HTML Web Design Tutorial #3
Adding a Head & Body Section to Your Web Page
In our next lesson, #3, we're going to split our document into two separate sections. Every web page is supposed to contain a head section, and a body section. Each section has its own special purpose, and anything else you add to your web page will go into one of these two sections accordingly.
In general, the head section holds information about the web page, while the body contains its content. The information contained in the head section will not show on the page itself, but may show in other areas, like the title bar. Most everything you put in the body section however, will show up on the finished web page.
HTML Web Design Tutorial #4
Saving Your Document as an HTML Web Page
In our last lesson we split our document into its two major sections, the head and body. We also added a bit of text into the body section, so we could see how it looks in a web browser. Before we can view it as a web page though, we'll need to save our text document into HTML format.
If we were to perform a regular save of our document right now, it would be saved as just a plain text file. Instead, we need to use the "Save As" option, so that we can give it a different extension. The extension we'll use is:
By giving our page this special extension we will then be able to see how it looks as a web page. In part 4, click on the "play" button below to begin, we will see how to add the extension, and create a new folder for holding all of our web files.
Of course, you'll get to see which section to place each item in, as you watch each of the animated lessons. To begin part 3, click on the "play" button below.
HTML Web Design Tutorial #5
Giving a Title to Your New Web Page
In the last lesson we showed you how to save your document as a web page, and then view it in a browser. If you had entered some text into the body section of your document, then you should have seen it displayed in the browser window. The body section is where we put the stuff we want people to see on our web page.
Now let's talk about something that goes into the head section of our html document. All web pages are supposed to have a unique title, and that title gets placed inside the document's head section. It goes inside the head section because the title is information about the web page. It's there to tell people what that particular page is all about.
Now, you could make a web page without a title, and it would still work. However, you don't want to do that, and here's why. Most search engines will list your page by its title, and not having one could lose you a click when someone searches for pages like yours. Also, when a visitor adds your page to their Favorites (Bookmarks), the listing will default to your page title.
Suffice it to say, there are plenty of good reasons to give your web page a title. So, lets see how to do it by clicking on the "play" button below.
HTML Web Design Tutorial #6
Using Line Breaks to Start a New Line of Text
An interesting thing happens to the text you put in your document when it's displayed on a web page. It all runs in a continuous stream regardless of how many times you hit the "Enter" key in order to start the text on a new line.
When a web browser reads an html document, it deliberately ignores the extra white space placed in the document. Any carriage returns, tabs, or consecutive spaces will be displayed in the web browser as only one single space. In order to add certain effects to your text, you'll need to use special formatting tags.
In part 6 we will see how to use a special formatting tag called the line break: <br>. Adding one into your html code creates the same effect as hitting the "Enter" key once. Click the "play" button below to begin the line break lesson.