Join James Williamson for an in-depth discussion in this video Exploring HTML, part of Web Design Fundamentals.
- View Offline
- At the heart of every web page is HTML. It's the standard markup language for the web. A markup language simply means that you're going to be using tags to identify what type of content the browser should display. Let's go ahead and create a basic HTML page so that you have an idea of how all of that works. I'm on a Mac so I'm going to use a program called TextEdit. I'm going to go ahead and open that up. Basically, TextEdit is nothing more than a basic plain text editor. If you're on a PC instead of a Mac, feel free to use Notepad, it'll work just as well.
That's all they are. They have a certain extension on them which tells the browser how to parse them. Other than that, they're just plain text. It's sort of the beauty and simplicity of the web if you will. The second thing is to show you that you don't need thousands of dollars of tools and equipment to create websites. If you really wanted to do it old school, you could open up Notepad, open up TextEdit and just go to town. They don't have the really robust coding tools that a lot of the other tools have out there, or coding features, but you could get it done. It certainly wouldn't be as efficient, but it would work.
Let me close this, because there's a couple preferences I want to show you. If I open up my preferences, if I go to new document, I want to make sure that regardless of which program you guys are using, whether it be Notepad, TextEdit or something else, make sure that it's creating a plain text document for one. We don't want a rich text document. The second thing is, I'm going to make sure it's not adding any extensions by default. I want to do that. In TextEdit, I have to make sure that it displays HTML files as HTML code instead of formatting the content for me. You might want to make sure that is turned on.
If you're using a program like Notepad, check its preferences and make sure that, if it has similar settings, that you go ahead and set them that way. Now I'm going to go ahead and create a brand new file and then just very quickly I'm going to save this. I'm going to go out to my desktop, find the exercise files that I downloaded and saved, and save it to the 01_01 directory. Now, if you don't have those exercise files, you can go to the web design fundamentals course page at lynda.com and download those. They're free for everybody. They're very simple files. If you don't have them and you just want to save this to the desktop, that's fine.
I'm going to title this hello.htm and that's all that's required for me to take a plain text file and convert it to an HTML document; that's it. I could also use the extension .html, that would work just fine as well. It used to matter in terms of the server whether you used the htm or html extension. Now it doesn't, it's just more of a personal preference. I'm going to his save, there we go. Now I have an HTML file. There's nothing on it at the moment, but I have one. If I type in something like My First Web Page, If I save this and go out to a browser, and I'm going to just go out to, let's say Google's Chrome browser and I'm going to tell it that I want it to open a file.
I'm going to go to desktop, exercise files, hello, and boom, open that up. You can see, in this tab, in my browser it says My First Web Page. HTML is nothing more than a text file. It's working within the browser right now, but it's not supposed to be. Chrome is actually doing us a favor by rendering this. I've broken all kinds of rules because instead of using a markup language to mark up content, I just placed content on there and then Chrome is going, "Oh, well "it's an HTML file so I don't see what I need to see "so I'm just going to build it for you." It's just going to scaffold all that stuff for me.
As a matter of fact, if I inspect this element, if I right click and choose inspect element, you can see all this HTML code that we didn't write down here in the WebKit inspector. Where that is coming from is that Chrome's just making it for us. It's like, "You kind of needed this," so it makes it for us. Let's go back and take a look at what's required for the most basic of HTML documents. I'm going to go in and the first thing I'm going to do is at the very top, I'm going to add an html tag. Tags are going to have these angle brackets.
You can see I've got sort of a little less than and a greater than symbol and I'm surrounding the text html. Below the content where it says My First Web Page, I'm going to create a closing tag. This is an opening tag up top and this is a closing tag at the bottom. You'll notice the only difference between them is the forward slash. The forward slash indicates that this document is closing. This is opening a document, HTML file, and this is closing it. The next thing the HTML file needs is a head. Every single HTML file, and I'm just going to go down to the next line here, type in head.
The title tag is going to be totally nested inside of the head tag. This is what we call child and parent tags. Obviously the parent tag is the one towards the top. The child tag is the one nested inside of it. If you nest one tag inside of another one, you have to close it before you can close the parent. When I say title and I do something like Exploring HTML, I have to close that title tag before I can close the head tag. That's just a little bit of syntax, not a lot but just a little bit.
After the head, I have to have a body. The body is where all the visual content of the page goes, and you can see that I'm going to surround that text with the body. If I save this now and go back to my browser and refresh it, nothing really happens except for the fact that in this tab, the Exploring HTML comes up because now that's the title of that. As a matter of fact, if I inspected this element again, and I'm right clicking, by the way, when I do that to choose inspect element, I'm coming in here and I can see within the head now, there's that title.
Everything else looks pretty much the same. That's because, remember, before Chrome was sort of doing that for us. Now we have the actual structure there. Of course, markup languages use tags to identify content. Right now, we're not identifying the text My First Web Page is anything other than text that's just sitting within the body. When that happens, a browser is going to use the default tag which, in this case would be paragraph, so it just assumes that that's a paragraph. What if we wanted it to be something else, like a heading, for example? To do that, we would just need to wrap that in a heading tag and we would need to use whichever heading tag we wanted to.
The h1 is the most important heading tag. I'm going to do an h1 tag. Again, I have the opening h1 tag. You can see, I'm using those angle brackets, less than, greater than, and then the text h1. Right after it, I have to close that h1. If I save this and then go back into my browser and refresh it, now I see a physical difference in the rendering of that content because Chrome says, "Oh, that's a heading and "that's a heading 1, that's the most important heading. "I'm going to go ahead and apply my "default styling for an h1 to that.
"I'm going to make it big, I'm going to make it bold, "I'm going to let people know that "this is indeed a heading." It's reacting to the fact that we've identified this content as being a different type of element. I'm going to finish this up by going in and just doing a very quick little paragraph. The paragraph tag, of course, uses a p. You'll notice heading 1 uses h1. The tags are pretty self explanatory. I bet that most of you, if I just showed you the p tag and said, "What is this?" You might answer, "Oh, paragraph." That might just roll right off the tongue. Most of them do kind of make sense like that, b for bold, i for italics, p for paragraph, that sort of thing.
I'm just going to type in This is my first web page, it's a little basic, but it's helping me understand how HTML works and how to markup my content. Once again, if I open a paragraph tag, I have to close it so at the end of that, I'm going to go ahead and close that.
You know what? It might be nice if I put a period in there just to give that some punctuation. All right, I'm going to go ahead and save that, go back to my browser and when I refresh, there is my brand new content. Now, there is, of course, a lot more to HTML than what we've done here. Really, in only about five minutes, you've just learned the fundamentals of how HTML works. You've structured a document correctly by adding an HTML, a head section and a body section and you've added and structured the page content correctly as well by using an h1 and a paragraph tag.
Once you have those basics down, it's really just a matter of learning the remaining syntax rules and which elements are available for you to use. Those are the basics of HTML. Let's go ahead and take a look at how CSS is used to control the visual style of page elements in our next movie.
- What is web design?
- What is a web designer?
- Learning to code
- Choosing a web host
- Working with a CMS
- Exploring how websites are structured
- Choosing your framework or software
- Designing with standards and accessibility in mind