Chapter 80. Creating HTML Documents


Developing a Web site means creating HTML documents. HTML stands for Hypertext Markup Languageit's the computer language that describes the content of a Web page.

GEEKSPEAK

HTML stands for Hypertext Markup Language. This is the computer language that describes the content of a Web page.


HTML documents are actually just text files. You don't need any software more advanced than a text editor to create them. Where do you get a text editor? You have one already, even if you don't realize it. Microsoft systems come with a program called Notepad, which you launch by choosing Start All Programs Accessories Notepad from the Windows desktop. Older Mac systems come with the text editor SimpleText, while newer Mac systems come with TextEdit. All three of these programs perform more or less the same function, in that they allow you to write and save text files.

GEEKSPEAK

Tags are HTML keywords that identify the structure of the text inside the HTML file. The structure of the text is simply what kind of element the text happens to be: a paragraph, a heading, the name of an image, and so on.


What separates HTML documents from other kinds of text files is the inclusion of tags, or HTML keywords that identify the structure of the text inside the file. Structure is technical jargonit means, quite simply, what kind of element the text happens to be, such as a paragraph, a heading, or the name of an image file. You can say that an HTML tag identifies a piece of text as a specific element on your Web page.

FAQ

My text editor is lame. Do I have to use it?

No. You probably also have a word-processing application such as Microsoft Word on your computer. Word processors are text editors, too, although they have many advanced features that you don't really need for creating HTML files. If you prefer working in the word processor, by all means, use it to create HTML pages. Just don't run out and buy one expressly for HTML editing.


Say your HTML file contains a line of text:

 Take my wife. Please. 

The HTML tags tell the browser what kind of text it is. To make the text a paragraph, add the paragraph tag, like so:

 <p>Take my wife. Please.</p> 

The paragraph tag, like most HTML tags, comes in two parts: the opening tag (<p>), which marks the beginning of the paragraph, and the closing tag (</p>), which marks the end of the paragraph. When the browser sees the paragraph tag, it understands that the text inside it is supposed to be a paragraph, and it displays the text in its built-in paragraph style, as in Figure 80.1.

Figure 80.1. Mark up a piece of text as a paragraph, and the browser displays the text in paragraph style.


It stands to reason, then, that if you change the tag, you change the structure of the text. And if you change the structure of the text, maybe the browser displays the text differently. Replace the paragraph tag with the first-level-heading tag:

 <h1>Take my wife. Please.</h1> 

and the browser displays the text as a first-level heading instead of a paragraph, as in Figure 80.2.

Figure 80.2. Change the paragraph tag to a heading tag, and the browser changes the appearance of the text.


TIP

When you save your HTML file, don't use the standard .txt extension for text files. Use the extension for HTML documents instead: .htm.


No matter how advanced, complex, or sophisticated your HTML document becomes, the tags work the same way. They identify the structure of the text, which the browser interprets according to its built-in styles.

HTML documents have two distinct sections:

  1. The head section, which contains specific information about the HTML file such as the title of the page. Scripts and style sheets also appear in this section. The browser doesn't display the head section inside the document window.

    FAQ

    I don't like the way the browser displays a [insert any element name here]. Who do I complain to?

    The maker of the browser. But why not take matters into your own hands? If you don't like the way the browser displays a certain element, you can redefine the element's appearance with Cascading Style Sheets (CSS). See Part IV for details.


  2. The body section, which contains the content of the page. The browser displays the body section inside the document window.

You mark off the sections with the head and body tags, like so:

 <head>   <!-- The head section goes here. --> </head> 

 <body>   <!-- The body section goes here. --> </body> 

Go back to the earlier example with the bad punch line. Since you want the browser to display this text inside the document window, it goes inside the body section of the page:

 <head>   <!-- The head section goes here. --> </head> <body>   <p>Take my wife. Please.</p> </body> 

To add more content to the page, add more text to the body section:

 <head>   <!-- The head section goes here. --> </head> <body>   My Favorite Jokes   We could talk about women.   <p>Take my wife. Please.</p> </body> 

Don't forget to identify the new content with the proper tags:

 <head>   <!-- The head section goes here. --> </head> <body>   <h1>My Favorite Jokes</h1>   <p>We could talk about women.</p>   <p>Take my wife. Please.</p> </body> 

You're now well on your way to creating the My Favorite Jokes Web page. Notice that the heading of the pageMy Favorite Jokesappears inside the body section of the page, which means that the browser displays this text inside the document window. If you want to make My Favorite Jokes the official title of your page as well, you need to add this text to the head section of the page, between title tags:

 <head>   <title>My Favorite Jokes</title> </head> <body>   <h1>My Favorite Jokes</h1>   <p>We could talk about women.</p>   <p>Take my wife. Please.</p> </body> 

The title of your page doesn't have to match the heading. You can title the page anything you like:

 <head>   <title>My Humor Site: The Jokes Page</title> </head> <body>   <h1>My Favorite Jokes</h1>   <p>We could talk about women.</p>   <p>Take my wife. Please.</p> </body> 

As a finishing touch, put the entire page inside opening and closing html tags. These tags are just a courtesy to the browser, to let it know that the page is an HTML document:

 <html>   <head>     <title>My Humor Site: The Jokes Page</title>   </head>   <body>     <h1>My Favorite Jokes</h1>     <p>We could talk about women.</p>     <p>Take my wife. Please.</p>   </body> </html> 

The entire document, from top to bottom, looks something like Figure 80.3 in a browser. So it's not much to look at. Who cares? The important thing is that you're learning how to write HTML code. Many Web designers got their start this way.

Figure 80.3. Your completed My Favorite Jokes page looks like this in a browser.




Web Design Garage
Web Design Garage
ISBN: 0131481991
EAN: 2147483647
Year: 2006
Pages: 202
Authors: Marc Campbell

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net