Are you ready to begin creating a Web page? This chapter shows you how to get started with a basic HTML document.
Understanding HTML Document Structure 18
Start an HTML Document 20
Save an HTML Document 24
View an HTML Page 26
Add a Document Declaration 28
Add Metadata 30
Although Web pages can differ widely in terms of content and layout, all pages have certain HTML tags that give them the same basic structure. Understanding this structure helps you begin to build your own HTML pages.
HTML Tags | Document Type Declaration |
|---|---|
The  | You can add a  |
|
You use the header of an HTML document to add descriptive and accessory information to your Web page. The document header tags,  | Document Title You can add a title to your HTML document to help people and search engines identify your Web page. For example, if you are building a Web page for a business, you might want to include the company's name and specialization in the title. Most Web browsers display the title in the browser window's title bar. The  |
Metadata Metadata means "data about data." On a Web page, metadata can include author information, the type of editor used to create the page, a description of the content, relevant keywords, and copyright information. Search engines often use metadata when trying to categorize a page. You place metadata inside the document header.  | Body The visible content that makes up your Web page, including paragraphs, lists, tables, and images, lives in the body of your HTML document. The body of the document is identified by the  |
You can start an HTML document using a text editor, HTML editor, or word processing program. You use sets of HTML tags to define the basic structure of your page.
The <HTML>, <HEAD>, and <TITLE> tags are basic elements that appear at the beginning of all HTML documents.
Start an HTML Document
1 Open an editor or word processing program.
Note
The examples in this book use both Windows Notepad and WordPad. See Chapter 1 to learn more about editors.
2 Type <HTML>.
This tag declares the document as HTML.
3 Press
4 Type <HEAD>.
This tag defines where the title, metadata, and other descriptive information appear.
Note
For more about adding metadata to a Web page, see the section "Add Metadata."
5 Press
7 Type title text for your page.
Title text describes the contents of the page and appears in the title bar of the Web browser.
8 Type </TITLE>.
9 Press
10 Type </HEAD>.
This tag completes the document header information for the page.
11 Press
Note
You do not need to press
Note
Browsers ignore extra white space in the code when rendering Web pages.
Tip
Which should I add first to my HTML document, the HTML tags or the page content?
It is usually easier to start your HTML document by typing the basic structural tags, which include the <HTML>, <HEAD>, and <BODY> tags. These tags appear in all HTML documents, and typing them first helps ensure they have valid syntax and are in the correct order. After you add the basic structural tags, you can add the body content and additional HTML tags to format that content.
Does it matter if I type my tags in uppercase, lowercase, or mixed case?
No. The current HTML standard allows for different cases in your HTML text. However, it is good form to format your HTML tags consistently. Also, typing tags in all uppercase letters can make it easier to distinguish HTML code from the page content and to identify errors in your code.
You can use the body tags, <BODY> and </BODY>, to define the content in your Web page. Page content can include lines of text, bulleted and numbered lists, tables, forms, and more.
12 Type <BODY>.
This tag marks the beginning of the actual content of your Web page.
13 Press
14 Type the body text you want to appear on the page.
Body text is the content that appears in the browser window. For practice, you can type a simple paragraph for the body text.
15 Press
This tag closes the body portion of the page.
17 Press
18 Type </HTML>.
This tag ends the HTML code of your document.
You can save your document and view the page in a Web browser.
Note
To learn how to save a file, see the section "Save an HTML Document." To learn how to view the results of your HTML coding, see the section "View an HTML Page."
Tip
How do I turn on WordPad's text wrapping?
It can be annoying when the HTML code in WordPad scrolls off the right side of the screen. You can turn on the text-wrapping feature to keep your code in view at all times.
1 In WordPad, click View.
2 Click Options.
The Options dialog box appears.
3 Click the Text tab.
4 Select the Wrap to window option (
5 Click OK.
WordPad activates text wrapping.
You can save your Web page as an HTML file so that users can view it in a Web browser. When saving a Web page, you can use either the .html or .htm file extension.
When naming a Web page, it is best not to use spaces and to keep the characters limited to letters, numbers, hyphens (-), and underscores (_). If you are creating a home page for a Web site, it is common to name the page index.html or default.htm.
Save an HTML Document
1 Click File.
Note
Your text editor may have a different command name for saving files. See your program's documentation for more information.
2 Click Save.
The Save As dialog box appears.
3 Click here to navigate to the folder or drive where you want to store the file.
4 Click here and select Text Document.
5 Type a name for the file, followed by .html or .htm.
6 Click Save.
A dialog box may appear alerting you that all the formatting will be removed.
7 Click Yes.
The editor saves the file.
Tip
What is the difference between the .html and .htm extensions?
The shorter .htm extension is left over from the early, pre-Windows days, when file names could have only three-character file extensions. Some Windows-based programs still default to the .htm extension. Today's computers can handle longer file names and extensions, so the three-character limit is no longer an issue. While Web browsers and servers can read either extension, you probably want to opt for .html because it is more universally used.
What makes a good file name for a Web page?
When naming a file, it is a good idea to keep the name simple so that you can easily remember it and locate it again later. In addition, because you need to type file names when creating hyperlinks, it is best to use a name that relates to the pages you are designing. For example, if you are creating a page that lists contact information for your company, the file name for that page might be contact.html. It is also a good idea to keep your Web page files in one folder and give the folder a name that clearly identifies the content, such as My Web Pages.
After you create and save an HTML document, you can view it in your Web browser. Your Web browser can view HTML pages that you have saved on your computer as well as pages on the Internet.
View an HTML Page
1 Open your Web browser.
This example uses the Internet Explorer browser.
2 Click File.
3 Click Open.
The Open dialog box appears.
4 Click Browse.
5 Click here to navigate to the folder or drive in which your HTML document is stored.
6 Click the file name.
7 Click Open.
• The Open dialog box displays the path and name of the file.
8 In the Open dialog box, click OK.
The Web browser displays the page.
• The title information appears here.
• The body information appears here.
• The location of the HTML file appears here.
If you make changes to the HTML of the page that is displayed in the browser, you can click
Tip
Does it matter what browser I use to view the pages I'm building?
No. All popular Web browsers are set up to view HTML pages that you have saved on your computer, also known as offline pages. You may need to follow a slightly different set of steps to open an offline HTML document in a browser other than Internet Explorer, such as Mozilla Firefox. Be sure to consult your browser's documentation for more information.
What happens if I cannot view my page?
If you do not see any content for your page, you need to double-check your HTML code for errors. Make sure your document uses correctly paired start and end tags, and proofread your HTML code to make sure everything is correct. Also make sure you named your page with an .html or .htm extension.
You can use a document declaration at the top of your Web page to declare which type of HTML tags the browser can expect to see. You can use one of three types: HTML 4.01 Transitional, HTML 4.01 Strict, or HTML 4.01 Frameset.
The transitional version of HTML is the most inclusive. It has all the standard structural elements as well as older tags that have been phased out of the current standard. The strict type includes only currently sanctioned tags. The frameset type is the same as the transitional type but includes additional tags for creating frames.
Add a Document Declaration
1 Open the HTML document you want to edit.
2 Position your cursor before the <HTML> tag and press
3 Type the DOCTYPE declaration.
• To specify HTML 4.01 Transitional, type:
<!DOCTYPE HTML PUBLIC "-//W3C// DTD HTML 4.01 Transitional//EN" "http:// www.w3.org/TR/REC-html4/loose.dtd">
You may need to press
• To specify HTML 4.01 Strict, type:
<!DOCTYPE HTML PUBLIC "-//W3C// DTD HTML 4.01 Strict//EN" "http:// www.w3.org/TR/REC-html4/ strict.dtd">
• To specify HTML 4.01 Frameset, type:
<!DOCTYPE HTML PUBLIC "-//W3C// DTD HTML 4.01 Frameset//EN" "http:// www.w3.org/TR/REC-html4/ frameset.dtd">
The declaration statement is complete.
Tip
Do I have to include a document declaration?
Most popular browsers can display your page without a DOCTYPE declaration. However, if you are using a validation tool to check your page for proper form, the tool may require that you include a declaration so that it knows what type of HTML it should validate your page against. Including a document declaration is also considered good form.
Which version of HTML should I use?
All Web browsers support HTML Transitional. However, professional developers are moving toward HTML Strict and using it with Cascading Style Sheets (CSS) to control page formatting. Many of the deprecated tags in HTML have been replaced by formatting rules that you apply with CSS. If your page uses frames, then you need to use HTML Frameset because it allows you to add frames to a page. Deciding which version to use really depends on what Web page elements you plan to use and what type of coding you are familiar with.
You can add metadata to your page to include extra descriptive information that does not appear in the browser window. Metadata can include a page description, author and copyright information, keywords, and more. What you insert in metadata tags can help search engines categorize your page.
You define metadata in the document header using the <META> tag.
Add Metadata
Add an Author Name
1 Click between the <HEAD> and </HEAD> tags and press
In this example, the metadata appears below the <TITLE> tags.
2 Type <META NAME= "author" followed by a space.
3 Type CONTENT=" My Name ">, replacing My Name with your name.
4 Press
Add a Page Description
5 Type <META NAME= "description" and a blank space.
6 Type CONTENT=" Page Description ">, replacing Page Description with your own page description.
7 Press
8 Type <META NAME= "keywords" and a space.
9 Type CONTENT="My Keywords">, replacing My Keywords with a keyword.
For multiple keywords, use a comma followed by a space to separate the keywords.
10 Press
Add a Copyright
11 Type <META NAME= "copyright" and a space.
12 Type CONTENT=" 2008">, replacing 2008 with your own numbers or copyright information.
13 Press
The metadata is now a part of the HTML document.
Tip
How do I add the name of the program I used to design my page to the metadata information?
To specify an authoring program, type <META NAME="generator" CONTENT="Program Name">. Substitute the name of your program for the text Program Name.
Who can view my metadata?
The only way users can see your metadata information is if they view the HTML code for the page. To view the HTML code of any page in your browser window, click View and then Source. This opens a text-editor window displaying the HTML used to create the page. Any metadata assigned to the document appears at the top inside the <HEAD> and </HEAD> tags.
