Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
This course is designed to quickly lead you through the steps of building an HTML website, from creating a new page to building links and tables. Author James Williamson simplifies the coding process, with straightforward steps you can recreate on your own. The course explains the basic structure of an HTML document, shows how to add text and images, and introduces font styling with CSS. James also offers a bonus design challenge at the end of each chapter, where he asks you to think of a solution before offering his own.
While the head stores functional information that is largely invisible, the body is where all of your page's visible content will go. And that's we're going to focus on creating here in this version of our structure.htm file, which you can find in the 02_04 directory, or like last time, you can just simply keep the last file open and it'll work just fine. So to add our body, it goes just below the head, so I'm going to make sure that my cursor is blinking just after the head. I'm going to hit Return or Enter to head down to the next line. And again, I'm just going to open up a body tag and then directly after that body tag, on the line below that, I'm going to do a closing body tag. So we have both our opening and our closing body tag.
Now, this is actually going to have probably more information in it than the head nine times out of ten, when you're actually authoring your own pages or editing somebody else's pages. But for this exercise, we're just going to do a couple of things within the body to sort of explore what goes into it. We're going to focus much more on formatting visual content of the page that goes within the body later on in the course. So right now we're just sort of introducing this. So inside the body, I'm just going to go ahead and create a new line and I'm going to type in "This is content within the body." Here we go.
Save this and then I'm going to preview this in one of my browsers. Okay, so we've opened up the page within the browser, and you can see, right at the top of the page I have just a single line of text that says, "This is content within the body." Now, you may say to yourself, but wait a minute. We didn't format that content at all. You know, HTML is supposed to be a markup language, and it's supposed to identify the content on the page with a specific element, and you did not do that. You're right, I did not. And so what the browsers typically will do is so they find a line of text that just isn't being identified. They kind of display it as a paragraph.
You could really think of the paragraph as sort of the default element on the page. We're going to be doing a little structuring within our body. So what I want do is basically we are going to set up the next exercise here. Let's change this top line. I'm going to type in, "This is the page header. Branding navigation and other identifying information is usually found here." And that's all going to be on one line. And I'm going to go ahead and turn Word Wrap on.
Why it doesn't stay on for each document I don't know, but that's just Komodo for you. And then I'm going to hit Enter to go down to the next line and there I'm going to type in, "This is the page's main content." Below that we'll do another line. I'm going to type in "This is content related to the main content or site, but that doesn't belong with the main page content." All right, and then on the last line, below that I'm going to type in "This is the page footer." Now, why am I doing all this? Well, because typically within the body you're going to find more complex structures than just a couple of paragraphs and a header.
You're going to find pages that are organized into sections or regions. They could be headers, footers, sidebars, main content, multiple-column layouts. You're really going to run across a lot of different organizational structures based on the content of the page. And as you author HTML, you're going to be responsible for determining what those structures are, so that's one of the biggest challenges behind it. So while we have everything here in place for our basic HTML page structure, we need to focus a little bit more on the internal structure of the actual content, and we're going to do that in our next movie.
There are currently no FAQs about Up and Running with HTML.
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.