Lessons

Lesson Info

Add HTML5 Sections to a Web Page

Okay, so we have our site all set up and ready to go. We want to create our new blank page. I'm going to do a CMD or CTRL + N for new, I get my New Document dialog box to come up. I'm going to stick with New Document HTML. Framework, none. I don't want to use Bootstrap yet. I can choose to title my document here if I want to. I'm not going to do that. I'm going to show you how to do it and we're going to do it in the HTML. Choose my Doc Type, you want HTML5. You don't want any of that old stuff. I'm not going to worry about any CSS yet, I will create that as I need it. There's a little thing down here I just want to point out. I'm not going to talk about it, but you can also extract stuff from Photoshop. Dreamweaver has a workspace called Extract and you can bring in a PSD file and you can actually pull stuff out and save images. It'll tell you the CSS if you mouse over something like fonts, it'll tell you the font name, it'll tell you the size, it'll tell you the colors. You can actua...

lly pull some stuff out of there. Adobe has a tendency to take things away, and... So I'm not going to show you guys this. I don't know how long its life is going to be. It's part of it. And I don't really use it. I like to do it the way that we've already done it. And I'm teaching you this by hand, so no cheating right now. So, we're going to go ahead and click Create and I have my document. When I'm working inside of Dreamweaver, inside of an HTML document, I'm always in Split View. Okay? So, up at the top of the screen, I have Split View. I have gone into the Preferences and I have enlarged the font size for our code so that you guys can see it. Okay? So, if you guys are in Dreamweaver and you're like, "I can't see my code," you can change that inside of the Preferences. Okay. All right, let's save it. I'm going to close up these assets so we can see our local files. I'm going to close up the images. So, right now, we just have two folders in there. I'm going to do a File, Save As, index.html. Where? Simple Donuts. Just to make sure, Dreamweaver gives you a handy little button. If you are not sure you're actually in your site root folder, go ahead and click on that Site Root button and it will jump to your root. Because let's say you're crazy like I am and you're doing five different things in five different websites all at the same time, it may actually be saving stuff to the wrong website by accident. So, always, always...because a lot of times, I'll be doing the same thing, especially for teaching, where I'll have two sites are exactly the same, so I don't know which root is which. So that button is super duper handy. Okay? And I'm just going to go ahead and say Save, and there it is. So, now, I can see over here in my files that I've got index.html. Okay? Okay. We want to go ahead and add our stuff to our page, get this page going here. And I've got my doc type, I've got this big, fat Untitled Document. You do a search on Untitled Document in Google, there's millions. Don't be one of them, okay? Don't be that way. Make sure you title your document. All right, so, I am going to title this guy, I don't know, I'm going to call it Simple Donuts. You can call it whatever you want. Your title is important. It should be short, and concise, and specific. Every page in your website should have a separate title because Google cares about your titles. Okay? And so do your users. I'm not a tab browser, I'm a new window browser, so I have like 20 browser windows open. I never on-board with the tab thing. But if you guys browse like me or browse in tabs, you want to be able to tell which website is where inside of the tabs, right? All right, so I have my title. And remember, I've said everything that we do goes in the body section, right? Now, if I just click up here in my design, see I got... I can't see. There's no flashy thing. There's nothing to tell me where I am. It makes me crazy. So, that's why I like to jump in the code, I'm like, "Okay, I know where I am." I got my little flashy thing in the code. I know I'm there. It doesn't matter. There's nothing on the page. If I was up on the top, I know I would be in the body because there's nothing else there. We're going to start by inserting a div. We talked about a div earlier, right? So, at the top of my screen, I have my handy little Insert bar with all these crazy little icons. And, look, the first thing is a div. I just have to click that button and it brings up this little dialog box. And this dialog box is basically saying, "Where do you want to insert it?" Well, I want to insert it at the insertion point. There's really no other place for me to insert it. I don't want it on the outside of my body tag, I don't want it...well, actually, it doesn't even matter. At insertion point. After start of tag would be after my body tag. Before end of tag would be before the end of the body tag. It's all going to go in the same place at this point, okay? Because there's nothing else in here. It's talking about classes and IDs, which we're going to talk about. Do I want to apply any CSS? Yes, I do. As a matter of fact, I want to create a class called Container, but I'm going to save that because we haven't talked about it. So, I'm just going to ignore this box and I'm going to say OK, and it inserts a div. And it gives me a little placeholder text that says, "Content for New Div Tag Goes Here." Nice and descriptive. We're going to nest everything. This div is going to be what's called a Container. I'm trying to think if I... I don't think I did. Let's see, I know I have a blank piece of paper in here somewhere. I'm going to draw it for you. So, we already did our design inside of Photoshop and stuff, right? But a lot of times, I like to have something down on paper, too. So, this is my very untechnical wireframe. It's called wireframing. I have a funny story. I had a guy in Denver interview me one time for a job and he asked me, he was like, "Well, do you know how to wireframe?" And I'm like, "You mean like 3D stuff?" Because that's what I used to do a million years ago. And, of course, he thought I knew absolutely nothing. And I went home and I looked up wireframing, I'm like, "Are you kidding? I wireframe in my sleep." Right? Somebody made up a name for it years ago when I was like, "Who made up that name? That was dumb." All right, so I've got it here. And I'm going to have a head section, and I'm going to have a sidebar section, and I'm going to have a footer section, okay? So, basically, the point is I need something to hold this together, right? These guys, if I don't hold them together as a unit, they're going to be all over the place on my page. So, I'm creating a container or a wrapper, a wrapper is another really popular term that people like to use, to hold it together. I like container. I'm calling it container. So, this is going to be our container. It's going to contain everything in our page. So, everything needs to be nested inside of those div tags. So, remember, I said HTML doesn't care how you do it. So, I'm going to make myself some nice big space. I'm also going to write myself a note, right? Because what's going to happen is all my content's going to go between these div tags. I'm going to have that div tag at the button of the page and I'm going to have more div tags in there. And then, I'm going to forget, I'm going to be like, "What's that div tag for?" I don't know. It's way down there now and there's all this other stuff. So, I'm going to put in a little comment. I'm going to do my open caret, exclamation point, dash, dash, and it turned gray. And then, I'm going to say, "This is the container closing div." You can say whatever you want, but now I know really what it is. And I do a space, dash, dash, end caret. Okay? So, that comment that I made to myself is going to stay with that ending div tag. So, next year, when I go back to this website, I'm going to be like, "What was I doing? Oh, yeah. I know what that's for." Okay? So, just like naming your Photoshop layers, good idea. This is a good idea, too. All right, so I'm going to... I don't need that text. That "Content for New Div Tag Goes Here," I don't need that. I'm going to delete it. I'm going to hit Return again so I know what I'm doing. My next section, my nav, is going to go at the top, right? So, I know I need a nav. I can insert a nav up in my HTML. My nav is hiding right here. So, I have a handy little button, and I click it, and it inserts a nav. And, again, it's like, "Do you want to apply CSS?" Nope. I'm just going to go ahead and click OK. So, now, I have a nav. After my nav... So I'm going to click in my code at the end of line 10. And after the nav, I want my header section. I can come up and I can insert a header tag. Just click OK and I have a header tag. After my header tag, I would like to have an Aside and a Main content. So, remember, when we looked at it, we've got the Aside and we've got the Main Content, right? Now, the thing about this is it could be on either side. This little sidebar can be on either side, it doesn't matter. However, we're going to do something called Floating, and whenever you float something, it doesn't matter which side it's on. The thing that's floated, the sidebar, needs to come first. So, even if I had my sidebar on the other side, it would still need to come first in the line of HTML, okay? So, the aside comes first. So, after Header, insert Aside. I have a handy little button for Aside, I put it in there. After my Aside, I want Main. I have a little button for Main. I put it in there. After Main, I want Footer. I click at the end of Main, I click on Footer, and click OK, okay? So, now, I've got all my pieces and parts inside of there. But it doesn't look like anything. And we can't tell what's going on and we can't tell anything from anything, right? So, what I'm going to do now is I'm actually going to switch to go grab myself some text. I need some placeholder text so that I can tell each piece and part from the other piece and part. So, I'm going to jump out to a website called lipsum.com. It's Lorem Ipsum. I know we call it Greek text, it's actually Latin. On this website, I can create as many custom paragraphs as I would like, so I'm just going to do four paragraphs. So, I type 4 in the box, I'm going to click Generate Lorem Ipsum. It's going to give me a page. And here's the trick, okay? I'm going to select this text. However, I'm not going to select all of this text. I'm going to leave out the last sentence, or the last line, or the last word. It doesn't matter. I don't know why this happens. It's done it forever, it's really weird. If you select all of the text and you paste it in, it will bring in some code that you do not want. So, do not select all of the text. Select most of the text. Just make sure you leave at least a word or something at the end, okay? So, I've got it. I'm going to copy, CMD or CTRL + C to copy it into my clipboard. I'm going to jump back into... I almost said Illustrator. We are not doing Illustrator. Into Dreamweaver, I'm going to go in the Main content, that's going to have the most content, and I want to paste this in my Design View because if I paste it in my Code View, I lose my paragraphs, which is frustrating. Then I have to go back in and fix those, right? However, it all looks the same in there, so I'm going to actually select the text in the Main inside of my Code View so I know I have the right piece of text selected. And then, I should... Nope. It didn't work. All right. Sometimes it works, sometimes it doesn't. Sometimes, it's also easier... We haven't talked about the views yet, so we got Code View, Split View, Live View. Under Live View, I have this thing called Design View. So, a lot of times, when we're putting text in, it's easier to view things in Design View than Live View. It's just not pretty. Design View is definitely not pretty. And I want to be in... So, look, now I know I'm in the right place, right? So, I've got my blinking cursor in my code inside a Main. I have my blinking cursor in the Design View, so I can just select all that text and I'm going to go ahead and do a CMD or CTRL + V to paste it, and it's in there. Okay? And you can see my paragraphs came in, so I didn't have to fix those. So, if you do wind up pasting it in the Code View, not a big deal. Then, you just have to go ahead and format the paragraphs on your own, okay? It just takes more time. Okay, so, I've got that. I want to also put a little bit of text in my Aside. I know where that is, right? It says, "Content for New aside Tag Goes Here." I'm just going to take one and I'm going to copy one paragraph into my clipboard, CMD or CTRL + C, and I'm going to jump into my aside tag. I'm going to select the text that's in there, CMD or CTRL + V to paste. I'm going to go to my nav. My nav is going to have my links. So, I'm going to replace this text, I'm just going to say "Link One, Link Two, Link Three." Very exciting stuff. And then, I'm going to come down to my footer tag and I'm going to say "Copyright 2017." And I'm going to do my email address, which we will make it work. We will make it work later. Okay, cool. So, I have a bunch of stuff in there, I want to test it. Let's see if this guy is going to work for us today. I need to save it. So, that asterisk I was talking about earlier, there's my asterisk, CMD or CTRL + S to save. No more asterisk, everything's saved. Better work. Yes. And there it is. Not very exciting, not very interesting, but we have structure. It's all good. It's all good, right? All right.