NOTE This file was generated by Descript 1 00:00:00,000 --> 00:00:01,500 Hi guys and welcome back. 2 00:00:01,530 --> 00:00:05,400 In this video, let's take a look at the HTML layout of our page. 3 00:00:05,760 --> 00:00:08,639 First of all, I'm going to show you how I would come up with the 4 00:00:08,639 --> 00:00:12,299 HTML layout for this fictitious page that you see in front of you. 5 00:00:12,540 --> 00:00:15,960 And then we'll move onto the microblog and I'll show you how I come up 6 00:00:15,960 --> 00:00:17,939 with the HTML structure for that. 7 00:00:18,240 --> 00:00:19,020 Let's get started. 8 00:00:19,958 --> 00:00:23,018 So here, we've got a fictitious website that I just made up. 9 00:00:23,018 --> 00:00:26,908 And I want to show you how by thinking of the components of the 10 00:00:26,908 --> 00:00:28,498 site and sort of what's in there. 11 00:00:28,708 --> 00:00:32,188 You can come up with an optimal HTML structure. 12 00:00:32,442 --> 00:00:34,372 In this website, it's pretty straightfoward. 13 00:00:34,392 --> 00:00:36,222 It's a bit simpler than the microblog. 14 00:00:36,252 --> 00:00:37,592 That's why we're starting with this. 15 00:00:37,752 --> 00:00:40,662 But you can see, there are three main parts to this website. 16 00:00:40,826 --> 00:00:41,666 You've got a header. 17 00:00:42,283 --> 00:00:43,603 You've got some content. 18 00:00:43,663 --> 00:00:46,783 Here we've got items that are for sale, like a chair or 19 00:00:46,783 --> 00:00:47,833 a coffee machine and so on. 20 00:00:47,949 --> 00:00:49,989 And then here down at the bottom, you've got a footer. 21 00:00:50,039 --> 00:00:51,459 . That can contain anything you like. 22 00:00:51,942 --> 00:00:54,222 Just by identifying those three elements. 23 00:00:54,252 --> 00:00:56,712 We've already got a lot of the job done. 24 00:00:56,836 --> 00:01:00,506 This is going to be a header element and this is going to be a main element. 25 00:01:00,526 --> 00:01:02,626 That's going to contain the main content of the site. 26 00:01:02,866 --> 00:01:04,876 And this is going to be a footer element. 27 00:01:05,610 --> 00:01:09,145 So I've gone ahead and added those three elements to my diagram. 28 00:01:09,775 --> 00:01:13,105 And now that we've got the main element here, we can think about what each 29 00:01:13,105 --> 00:01:14,785 of these elements is going to be. 30 00:01:15,683 --> 00:01:20,273 I'm thinking that these elements here could also be on another page. 31 00:01:20,303 --> 00:01:23,543 Like for example, if you click through onto this page, maybe you would go 32 00:01:23,543 --> 00:01:27,143 to the office chair page and there you would see the same element. 33 00:01:27,263 --> 00:01:29,123 Maybe with a bit more information as well. 34 00:01:29,146 --> 00:01:33,076 But that means that this element here has meaning on its own 35 00:01:33,226 --> 00:01:35,536 and you could potentially copy it and put it somewhere else. 36 00:01:35,866 --> 00:01:39,196 And because of that, this is going to be an article element. 37 00:01:39,346 --> 00:01:40,846 This entire thing is going to be an article. 38 00:01:41,216 --> 00:01:43,676 And so is this one and this one and this one. 39 00:01:44,306 --> 00:01:47,876 They're not article in the traditional sense because articles in the traditional 40 00:01:47,876 --> 00:01:52,076 sense are things like blog posts or, you know, research papers, things like that. 41 00:01:52,376 --> 00:01:58,136 But an article in HTML is just an element that can be syndicated or placed 42 00:01:58,166 --> 00:01:59,786 on its own and has its own meaning. 43 00:01:59,906 --> 00:02:01,796 It can be put somewhere else if you want to. 44 00:02:01,978 --> 00:02:03,538 These would be articles. 45 00:02:03,535 --> 00:02:07,015 So I've gone ahead and added the article elements over to that. 46 00:02:07,501 --> 00:02:10,261 Now we've got the main layout of the page. 47 00:02:10,591 --> 00:02:14,821 Yes, we're going to use divs and spans elsewhere in this page. 48 00:02:14,851 --> 00:02:18,561 We're going to use heading elements like H1 and H2 and we're going to 49 00:02:18,561 --> 00:02:20,061 use paragraph elements as well. 50 00:02:20,241 --> 00:02:24,141 We might have buttons and links, like here and maybe buttons on these elements if we 51 00:02:24,141 --> 00:02:25,881 want to add them later on and so forth. 52 00:02:26,421 --> 00:02:28,991 But the main structure of the page is here. 53 00:02:28,991 --> 00:02:31,481 And this is what most people struggle with initially. 54 00:02:31,944 --> 00:02:35,464 Once you've got this, you can put H1 elements and paragraph elements 55 00:02:35,464 --> 00:02:39,994 everywhere, and that's fine, but here we've got the starting point of our 56 00:02:39,994 --> 00:02:41,704 page, which is the most important thing. 57 00:02:41,987 --> 00:02:45,677 So now we've got the microblog page and I'm sure you can see 58 00:02:45,677 --> 00:02:47,237 it's similar in many ways. 59 00:02:47,237 --> 00:02:49,187 I've purposefully made the two quite similar. 60 00:02:49,407 --> 00:02:52,437 You can see we've got a header and we've got a footer and that 61 00:02:52,437 --> 00:02:54,177 is pretty common across all pages. 62 00:02:54,260 --> 00:02:57,620 And we just have to think about what this here is going to be. 63 00:02:57,620 --> 00:03:01,700 I've just added the header and footer elements in there to make it clear 64 00:03:01,700 --> 00:03:02,600 that's what they're going to be. 65 00:03:03,210 --> 00:03:04,620 This element in the middle. 66 00:03:04,800 --> 00:03:07,890 You could think of it in a few different ways. 67 00:03:07,890 --> 00:03:08,820 What is this? 68 00:03:09,040 --> 00:03:12,850 You're going to have to make a decision on whether you want to call this the 69 00:03:12,850 --> 00:03:16,840 main content of the page and call this something else, or whether you want to 70 00:03:16,840 --> 00:03:19,930 call the entire thing, the main content of the page, and then subdivide them. 71 00:03:20,434 --> 00:03:26,374 Because this page is explicitly made for users to be able to give us their journals 72 00:03:26,404 --> 00:03:28,174 and to display their journal entries. 73 00:03:28,414 --> 00:03:31,384 I think the whole thing is the main content of the page. 74 00:03:31,504 --> 00:03:34,474 So I would put everything inside a main element. 75 00:03:35,015 --> 00:03:39,485 In my opinion, it should be something like this, but it is quite clear that 76 00:03:39,485 --> 00:03:45,035 this form here that contains the text field and the button should not be in 77 00:03:45,035 --> 00:03:47,825 the same place as these journal entries. 78 00:03:47,855 --> 00:03:51,155 They are completely different parts of the page, even if they're 79 00:03:51,155 --> 00:03:52,715 both considered main content. 80 00:03:53,205 --> 00:03:54,645 So how do we subdivide them? 81 00:03:54,975 --> 00:03:57,645 Well, that's why we've got the section element. 82 00:03:57,915 --> 00:04:02,235 We can put these here, inside a section of the page and these here 83 00:04:02,235 --> 00:04:04,185 inside another section of the page. 84 00:04:04,559 --> 00:04:06,479 That's what I've gone ahead and done right now. 85 00:04:06,479 --> 00:04:08,579 I've coloured them a bit differently so it's easier to see. 86 00:04:09,049 --> 00:04:11,329 Section elements normally have headings. 87 00:04:11,489 --> 00:04:14,879 They're not shown here in this design, but we could add them later on. 88 00:04:14,879 --> 00:04:18,129 We could add a heading on each of these sections like add a new entry as a 89 00:04:18,129 --> 00:04:20,889 heading and recent posts as a heading. 90 00:04:20,919 --> 00:04:22,089 We'll get into that later on. 91 00:04:22,419 --> 00:04:25,449 What we've got here is the main structure of the page. 92 00:04:25,479 --> 00:04:29,169 This gives us a very good starting point to then get working. 93 00:04:29,649 --> 00:04:31,509 We're also going to have things like images. 94 00:04:31,594 --> 00:04:34,294 We're going to have things like links and other texts. 95 00:04:34,324 --> 00:04:35,584 We're going to have paragraphs. 96 00:04:35,734 --> 00:04:38,404 We're going to have time elements, buttons, and forms. 97 00:04:38,584 --> 00:04:41,434 But all of those things are a bit more detailed then what we're 98 00:04:41,434 --> 00:04:43,264 looking at when we get started. 99 00:04:43,624 --> 00:04:46,504 Once you've decided this structure for the page, it's 100 00:04:46,504 --> 00:04:48,454 much easier to then get into it. 101 00:04:48,454 --> 00:04:52,461 So hopefully this helps, in terms of how I decide on the structure of the page. 102 00:04:52,661 --> 00:04:55,681 It's always going to be a little bit subjective of how 103 00:04:55,681 --> 00:04:56,911 you decide to structure it. 104 00:04:57,161 --> 00:04:58,121 But hopefully this helps. 105 00:04:58,171 --> 00:05:01,291 Thank you guys for joining me in this video and I'll see you in the next one.