Lessons

Lesson Info

What is HTML

So this is where all my designers are like, "Do we really? Do we really need to know how to do HTML?" Yes. You really need to know how to do HTML. If I can do HTML, you can do HTML. HTML is easy. Easy. It's not real programming. That's what I'm going to say right now. When I was in college I had to learn real programming. I had to learn C. I was in art class and I had an engineer for a teacher who knew nothing about art. So he taught us to program C on a Cray and it just re-drawed a TV screen. So when I see real programming, I'm like, "I think I need to go wash my hair. I've got to go." So I don't do real programming. I've opened up TextEdit. You can also use Notepad on Windows to follow along. One thing for TextEdit, we need to make a change. So currently it's set up, it's going to do RTF, rich text format. That is not what we want. We want plain text. So what I have to do inside of TextEdit, before I can use it, is I have to go to the preferences and I have to change the format to pl...

ain text. I think that's all I have to do and then I close it. And then I actually have to quit TextEdit and open it up again. Now I can write HTML. So that's the one thing on the Mac. You have to switch that around. So HTML is a tag-based language, and I'm going to have a whiteboard here in a second so I can write all this stuff down for you. And I want to talk about the tags. So we're just going to start. We're just going to create a basic page by hand. So these are greater than...less than/greater than signs. I don't say that. It takes too much energy for me to say that. I'm calling them carrots. I don't know where I got the name carrot, but I call them carrots. So we have open carrot, which is really the whichever one that is. And I'm going to type in HTML. Close carrot. Boom. Done. Every tag has an open tag and a close tag. So I need to close my HTML. So I'm going to hit return a couple times, I'm going to do open carrot, forward slash, HTML. H-T-M-L. I'm a terrible typer. It's the only class I ever got a D in. Close carrot. So I've got everything in my page just goes in between these two. I remember the first time, when I first learned HTML, I was like "Well, we have to compile it. How do you make it work in a browser? Don't you have to compile it?" And I was working with an admin and, of course, I'm the designer, I'm supposed to know all this stuff. And she looks at me and she's like, "No. You just save it. It's HTML." I was like "Oh, really? And it works?" I was always so shocked that it works so easy. So inside of our HTML, we have a head section. I'm going to do open carrot, head, close carrot. Open carrot, head...whoops, close carrot. I forgot my forward slash. There we go. The head section contains information for the browser. So you would put JavaScript in there, CSS in there, directions for the browser. So the browser's like, "Okay, what's in there? Okay, this is what I'm supposed to do with this page." There's one section inside of the head section that your actual users see and that is our page title. And inside of my title I could just type "Welcome to my first web page." So that's my title and that's actually going to go in the tab in the browser so you'll be able to see, so when you see the names of a page. After my head section, I have a body section. The body is the body. It's the main part and it's where all of my stuff goes that my users are going to see. So I can come in here and I can say, "This is a web page. I'm a really cool designer." And all I have to do is do a file, save as...not like that. Go away. Delete copy. Sorry. Okay, do a file. I guess I have to do save, and I'm going to save it as test.html. I'm going to save it to my desktop, and it's just plain text. Hit save. Please use html, not .txt. I'm going to jump out to Chrome and I should have a blank browser window. I do. We're going to hide all this other stuff in the background here. Here is my test page. I'm just going to drag and drop it, and you can drag and drop on Windows, too. Drag and drop it. And look, this is a web page. I'm a really cool designer. How cool is that? Easy peasy, right? Super easy. Now that's not really what I intended. I wanted those to be on separate lines. So how do we fix that? So I go back into TextEdit. Everything in HTML needs to be specified. So I have to say, "Oh, you're a paragraph. And so are you." So I'm going to do open carrot, P, close carrot. At the end of the line, open carrot, forward slash, P, close carrot. Same thing here. Open carrot, P, close carrot. End of the line, open carrot, forward slash, P, close carrot. Save it again. Come back out here. Ta-dah. Now I have two lines. So everything has to be specified. So HTML doesn't care about spacing. I'm going to show you that right now. "I'm a really cool designer and this is a really big space." Space. Period. Save. Hit. It didn't work. It didn't work because it's only going to acknowledge one space. So if I need to do a really big space, I have to do something special. I haven't done this in awhile. Let's see. There we go.  . Non-breaking space. N-B-S-P. So even though I haven't done it in awhile, that's how I remember it. And the ampersand is a special character. So if I was going to do copy, right, just to show you since I brought it up, I would do this. And then it always ends with a semi-colon. So I want a few more spaces in here, though. So I'm going to take this guy and I'm going to copy it. I'm going to go paste, paste, paste. And I'm going to go save. I'm going to come up here and I'm going to hit enter. Now I have a really big space and a little copyright symbol. So the point is you can create your HTML and create your spacing any way you like. So you can make it so that you can read it. That's the important part. So that you create it, you make it so you can read it. So don't worry about it. So if you need to come in and be like, "I need giant spaces between all of my stuff so I can see what the heck I'm doing." I do this all the time because I'm like, "I can't see. I can't see what I'm doing and I can't see what I'm writing." Go for it. It's all for you. You can always see what other people have done. Let's go to WebWitchery. Let's go to this dorky old site here. If I right click in a browser, I can go to...I've got to be not on there. I can go to view page source. This is a great way to learn, you guys. View page source. I click on that. There's my HTML from 1997. A little vintage HTML there. But then you can come in and see what other people have done. Now this looks normal. I mean it's all indented and it's laid out pretty well. But sometimes you'll do this to pages and the HTML will all be on one line. And you'll be like "What?" if you can't see, and they do that on purpose. They did it on purpose so that you can't go in and grab it. But just so you know, code, you can't copyright code. You can't copyright HTML and you can't copyright CSS. So what does that mean? That means if you're learning and you see somebody's cool site and their cool HTML, you can actually steal their HTML. You can't steal their images and their content, but you can steal the HTML and you can replace their content and images with your own stuff. So just so you guys know. So looking at other people's source code is a great way to learn. All right. So that was not fun to do that in TextEdit, for those of you on Notepad. It's kind of an icky way to do HTML. I did it this way for years. So we have a better way. We can still hand code HTML but not in here. So I'm going to quite out of that. And watch how easy Dreamweaver makes it. So I'm just going to go to file, new, I'm going to choose HTML, and none. So I'm just going to do a plain old HTML. Over in the right you can see it's HTML5, we're going to talk about that in a second, and I'm just going to click create. And right away, all that stuff that I typed in? Bam. There. Easy peasy. So there's a declaration at the top. Line one. What the heck is that? Well, that just means it's HTML5. So we've had lots of iterations of HTML. We had HTML4, we had XHTML, and there was a big war over those two. HTML5 won. So, anyway, it's the doc type is the declaration. So when the browser reads this particular doc type, it's like, "Oh, you're HTML5. Okay. I know how I should show you." Whereas XHTML had this really long two-line declaration. But when it reads that, it's like, "Oh. I need to display you this way." So that's what all that is. So I can come in here and I can quickly go, "Ooh, this is my second web page." And then I can come into my body and I can say I know I need a paragraph. I'm going to do an open carrot. What's that? That's cool. I have a little helper. I can hit P, close carrot, and it closed it for me. I didn't expect it to do that. I was going to do an open carrot at the end and it was going to close it, but that's even better. This is a paragraph of text. And then I can come in and do it again. Close it. And just since we're in here, I'm going to add some more fancy stuff. I'm going to add a header. And of course, I can see what's happening up here. And then I'm going to save this to my desktop. And I know it saved. I don't know if you guys know this or not, but all the apps up here, this guy here, if it was not saved, there would be an asterisk. Did you guys know that? And there's no asterisk. I saved it. I hit CMD + S 500 times. Here, let's try this. File, save all. There's nothing all to save. That's okay because, you know what? I did save it. So we're going to do it the old fashioned way. Hide others. Test two drag and drop. Yes. There it is. Okay. So also notice my titles. So I added my titles. This is my first web page. This is my second web page. So those guys show up. And then that's my web page. So it's a lot easier to hand code in Dreamweaver with all the pretty colors in it. I forgot to even mention the pretty colors. I was just so excited that it did the code for me. But it does pretty colors, too. So up at the top of Dreamweaver, I have code, split, live. I'm going to click on code and there's my code, and you can see it's all different colors. And when we get more stuff in there, there will be even more pretty colors to help delineate everything. We haven't done anything fancy yet, but it will actually auto indent and everything else. So it makes it really easy for you guys to be able to see stuff and figure it out. So HTML5, as opposed to older versions of HTML, HTML5 added some new tags. So prior to HTML5, we designed using these things called divs. I'm actually going to open up so that I have something to talk to you about. Let's open up a file. Let's do the one we're going to create. So just real quick. I'm just going to go over this real quick. I've got my doc type. I've got my HTML. I have my head. I've got some meta information. You guys have probably heard the term metadata when it comes to keywords and descriptions and all that stuff. So all that information goes in your head section. Underneath that I've got my title. Underneath that I've got all these weird links. Those are all links to different style sheets for CSS. I am going to do it this way with you guys for our sanity. Not because this is the right way, but to keep us sane because we're going to have a lot of CSS to work with. And your style sheets can get really big and really complicated, and then you can't find stuff. And so to keep it simple, I've got different things in different style sheets. So we can have multiple style sheets applied to the same pages. So we're going to do it that way. So that's what you see there. Underneath there, we've got this gray stuff and the gray stuff is delicious. No, the gray stuff is... Sorry, had to slip that one in there. That's comments to you. So that is a note to you. It's telling you something that's happening inside of the code. That's what I'm trying to say. Then you can see there's some scripting going on in here. This page happens to use Adobe Web Edge Fonts, which we will talk about, and there's my body. All right, this is where I want to go. So let's talk about the body. Inside the body...close this up so we have more room. I've got this weird thing called a div. What the heck is a div? It's short for division, I'm assuming. So it's just a section. It's just an area that we design stuff in. And you'll notice after the div we have this thing called nav. Well, that's our nav bar. So prior to HTML5, there was no such thing as nav. Our nav would actually be inside of a div, too. Everything was done in divs. So this div has a name container, which we'll talk about, and in HTML4 everything was a div and then it all had a little CSS to style it. It would be called header, footer, main, whatever. But HTML5 has added these semantic names for us to use. So what they did when they were building HTML5 is they went out and they looked at all these web pages, hundreds and thousands of web pages, to see what designers were using, what kind of name conventions they were using. And they took those naming conventions and applied them to containers. So, basically, they work just like a div but they have a name. So it's semantic, okay? It's important to use semantic names for accessibility. If any of you have to be 508 compliant, which is a completely different topic, but that's for people with disabilities, and Google likes it when you are compliant. The more compliant you are, the more Google will love you. So in here you can see I've got nav. I've got header, that's an HTML5 tag. I've got something called aside. I've got something called main. I've got something called footer. And we're going to talk about all of that.