Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
I hope you had fun with out first lab. In it you were instructed to build the basic structure of the Intro page for the Up and Running with HTML Reference site. In this movie I'm going to go through each of the steps and discuss how I structured the code. While your code may not look exactly like mine, pay attention to how the code is structured. It doesn't need to match up line for line, but you want the overall structure of the code to be the same. So to open up this file, you'll go into the 02_06 directory and into the finished_files folder, and you'll fine intro.htm there.
It looks almost exactly the same as we had it before, in terms of this large comment of top. But then we have the completed HTML below that. The very first thing that we have in our code after the comment is we have our HTML5 document type declaration. Notice that that doesn't have a closing tag, it starts with the exclamation point, it says doctype, and then identifies it as being HTML. After that, we have our opening html tag, and at the very bottom of the content of course we have a closing html tag. We want to make sure that the html tag wraps all the content on the page and we use the language attribute to identify English as the language being used.
Now, you may also notice that the code for English, which is "en," is inside quotation marks. That's important. You want the value of all attributes to be encased within quotation marks. Below the html tag, we have head our document right here. You can see the opening and closing head tag. And inside that we have the two items that we needed: the meta tag that is setting the character set value to you UTF-8-- we're using meta and character set attribute--and then directly after that we have our page title. So we are using the title tag to identify that. And then inside the opening and closing title tags we have the text Introduction to HTML.
Directly after the head, we have the body of our document. So again, opening body tag and then the closing body that wraps all of this content. And inside that we created three sections and those sections are created by using div tags. And inside those div tags you can see the placeholder content that I had on the page there, sort of all by itself, before I started authoring this. I went ahead and moved that into those div tags so that that can sort of be as placeholder contents. So that's going to do it for our first lab. Now just remember, when you're coding an HTML page, it's best to start out with simply just the basic structure of the page, as we have done here.
It's going to help you focus on ensuring the page is structured cleanly without the distractions that all that added page content could cause. Now, from there, you can move into adding more complex structure and then formatting that content.
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.