Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Once you know the basics of structuring an HTML document, it's a lot easier to begin writing and editing your own HTML. In this chapter we're going to strip an HTML document down to its most basic parts so that we can focus on just the essentials of what makes up an HTML file. Now before we do that, I want to show you a little something about looking through other HTML files out there on the web, because one of the best ways to learn about HTML is to see how other people are doing it.
I have a pager opened in the browser, and one of the things that you can do, regardless of what browser you're using, you can always go and view the page source for a page. In this case I am in Firefox, so I am just going to go up to the menu and we go to Web Developer, and I am going to say show me the page source for that. So this is one way to do this. And the thing that I found about this over the years, especially when I was before starting to learn HTML, is that yes, I can sort of look at this and I can kind of look at the page, but the problem is it's very difficult for someone who is new to HTML to understand what this is in relation to what they're seeing on the page.
I want to show perhaps an easier way of sort correlating the visual elements on the page with the code that it represents. So I am going to close that window, and I want to show you a little tool that Firefox has that pretty much all modern browsers have at this point, and it's the ability to inspect the page at sort of a granular level by looking at the code. Now, in Firefox this called Firebug, and it's an add-on for Firefox. If you have Firefox installed and you are using it and you don't see the little Firebug icon the I am going to show you, simply go to the add-ons and download it. But all of them have this type of functionality.
Opera has Dragonfly; Chrome and Safari have WebKit Web Inspector; Microsoft Internet Explorer has the Developer Tools built into it; so you'll always have access to this kind of functionality, regardless of which browser you're using. So in Firefox, I am just going to go over and hit this little Firebug icon over here, and when I do that, this little pane shows up at the bottom of the window. Now there I can see the source code for this page, just as I was looking at a minute ago. It's collapsed at the moment, but I can open it up and take a look at all of the different elements. Now what's really nice about this is that I have this little feature right here, which is click an element to inspect the HTML.
So if I select that tool, I can now move around the document and as I move around the document and highlight different elements on the page, you can see it's going down into the code and it's showing me what I'm looking at. If there is a page that you want to learn from or there's something out there that you're like I wonder how they did that, or what code is used to represent this particular element or particular structure, this is a very quick and easy way for you do that. You can just pull up the browser, go into Firebug or WebKit Inspector for whatever and then you can find exactly the code that you're looking for within the source code of the document.
So definitely keep that in mind as you are learning HTML. I'm going to close this for a moment and I am going to go back into the editor that I'm using, which is the Komodo Edit editor. And I've got a page opened up from our exercise files. In the 02_01 directory, I have opened up the structure.htm file. Now, if you open that up in whatever editor you're using, the code is probably going to look a little bit different than mine does, and that's because I've modified the editor a little to collapse some of the code so that I am looking at just the basic structure of the page.
Don't worry about doing this yourself; just follow along with me and take a look at the different elements. So really, HTML documents are made up of three major pieces. The first major piece is the html tag itself. If you don't have html tag, you don't have an HTML document. So, that's going to the parent tag of the entire document itself. You'll have an opening tag, you'll have of the rest of html page, and at the very, very bottom of it you'll the closing html tag. Directly after the html tag comes the head of the document and if I expand this out a little bit, inside the head I have got more information about the files.
So this could to be meta information, title of the page, links to external scripts; it's not necessarily visual information, but it's information that is relevant to the page and that's necessary for the page to function properly. So that's the head of the document, and again, you see that section, the opening head tag and closing the head tag and then its contents inside of it. And the last basic structural part to an html document would be the body itself, and if I open this tag up, you can see the inside the body. This is where all the visual content goes.
So your headings, your paragraphs, your images, your tables, your lists, anything that you have inside the page needs to be visible within the browser or user agent is going go inside that the body element. That's really it. It can be very confusing when you open up a complex HTML page and you see all this content on the page. But if you can really sort of isolate it into those three things that, hey, I have an html tag surrounding all of this, and then inside that html tag I have a head and I have a body. The head is where the information for the document goes and links to external resources, and the body is where the actual visual content goes.
If you break it down into those three areas, it's a little easier to digest and a little easier to start thinking of structuring your own documents. Now that we have gone over the overall structure of the page, we need to focus on each area individually as we build them. We are going to start that in our next movie by discussing the one tag on the page here that I didn't talk about as we went over this, and that would be this one right here: the doc type declaration.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.