Filling Out Your Page
The <head> Tags
We will start at the top of our example document and explain what some of the blanks mean. A web page is broken up into two main sections, the "head" and the "body". Here we will talk about the head. This section contains information for your browser, a page title, meta tags, and can even include some JavaScript (more on JavaScript and meta tags later). The first item we will cover is your "title". Title tags look like this, <title> and </title>. You place your title text in between the title tags which in turn are placed in between your head tags. Your HTML document would look like this:
<html> <head> <title>This Is My First Page</title> </head> <body> </body> </html>
The title, This Is My First Page, will now be displayed in the title bar at the very top of your browser page. You should make sure that the title describes what your page is about and it shouldn't be more than fifty to sixty characters long. Anything longer than that runs the risk of being chopped off by your browser. When someone bookmarks a page the browser displays the title of the page in the bookmark list. Be sure that it makes sense to someone when the title stands alone. A title such as "Pictures" or "Mustang" doesn't really make sense to anyone but you. Better titles would "Panama City Beach Pictures" or "Ford Mustang '65". These titles describe what you can expect to find on the pages.
The <body> Tags
This is where the meat and potatoes of your page go. This is where all your text and graphics go. We have already covered one example of putting text between these tags and hopefully you played with it just a little. In playing with text you may have wondered how do I start a new line or paragraph since I can't format my text in a text only document. OK, not to worry. The beauty of web page design is that you get to format your text just the way you want. It may seem like a lot of work but to me the rewards of saying, "I did that", are well worth it. Besides with a little copying and pasting you can repeat some things with ease. Here in the beginning all these examples can get boring with retyping them over and over. To help you a little here is a template that you can "copy" and "paste" onto a blank page in your editing program so all you have to do is fill in the blanks:
<html> <head> <title></title> </head> <body> </body> </html>There now, that should make life easier.
Before you get really hot and heavy into your typing there are just a few points to ponder when it comes to formatting your text. First of all, browsers don't like multiple spaces. One space after a period is acceptable by a browser but not any more. The browser expects you to put the spaces there using HTML code. Next we have tabs. Tabs are just like extra spaces, the browser ignores these also. One more item that we take for granted is the carriage return. We figure that we can just hit enter and start a new line or paragraph. Again, browsers ignore this type of action also. Browsers want you to use HTML tags to lay out your document. Sounds a little silly but that is life in the HTML world. So by now you're wondering how to do all these formats that the browser can't bring itself to do. Here we go with an example of how to start a new paragraph and how to start a new line. We use the <p>, "paragraph" tag and the <br>, "line break" tag.
<html> <head> <title>This Is My First Page</title> </head> <body> Let's start with our first line of text. How about our second line of text, not gonna happen. <p> This is our third line of text starting a new paragraph. <br> This is line four using a line break. </body> </html>
After viewing the above example in your browser you can see the difference between a "paragraph" and "line break". A paragraph uses a space between the lines of text and a line break starts the new line immediately below the previous line of text. Also note that using the carriage return without inserting any tags causes the text lines to follow each other instead of starting new lines. Without any tags to break up your text all you would have is one big paragraph.