Are you ready to begin creating a Web page? This chapter shows you how to get started with a basic HTML document.
HTML includes a number of basic structural tags that appear in almost every HTML page. Becoming familiar with these tags is a good first step to creating your pages.
This chapter also teaches you how to save an HTML document in a text editor and open the document in a Web browser, so you can see the results of your work.
Understanding HTML Document Structure 16
Start an HTML Document 18
Save an HTML Document 22
Save a Microsoft Word Document as HTML 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. These tags tell a Web browser where the HTML for a page begins and ends, what content is displayed in the browser window, and where to find metadata, references to style sheets and scripts, and other important elements. Understanding this structure helps you correctly organize the content in your HTML pages. It is a good idea to add these structural tags to your page before anything else.
HTML Tags
The <HTML> and </HTML> tags at the beginning and end of a text document identify it as HTML code. When a browser encounters these tags, it knows that anything within the two tags defines a Web page. Older Web browsers expect to see the HTML tags; with the latest version of HTML and newer versions of browsers, the tags are not always necessary, but adding them is always good form.
Document Type Declaration
You can add a DOCTYPE declaration to specify which tags a browser can expect to see in your HTML document. In HTML 4.01, there are three document types: HTML 4.01 Transitional, HTML 4.01 Strict, and HTML 4.01 Frameset. The Transitional type incorporates both current tags and older tags that have been phased out, or deprecated. The Strict type is more pared down and excludes deprecated tags. The Frameset type includes tags for creating framed pages, which are not covered in this book.
Document Header
You use the header of an HTML document to add descriptive and accessory information to your Web page. The document header tags, <HEAD> and </HEAD>, immediately follow the opening <HTML> tag. The document header contains information that does not appear in the browser viewing area, including title information, metadata, scripts, and style sheets. For more about style sheets, see Chapter 9.
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 <TITLE> and </TITLE> tags define a page title and appear inside the document header. It is good form to keep the title to fewer than 64 characters in length.
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 your 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 <BODY> and </BODY> tags. The body of a document comes after the header of a document. Most of the HTML tags covered in this book belong inside the body of the document and determine how its content is formatted. To learn how to begin formatting body text, see Chapter 3.
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 tags that appear at the beginning of all HTML documents. To save time, you can create a text file that includes these tags and use the file as a template each time you want to create a Web page.
Note
The examples in this book use WordPad. See Chapter 1 to learn more about editors.
This tag declares the document as HTML.
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."
Title text describes the contents of the page and appears in the title bar of the Web browser.
This tag completes the document header information for the page.
Note
You do not need to press
Note
Browsers ignore extra white space when rendering Web pages.
Note
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. Content added between the body tags appears in the viewing area of a Web browser. You can add attribute information to the <BODY> tag to change the background color and other overall characteristics of the page. See Chapter 4 for details.
This tag marks the beginning of the actual content of your Web page.
Body text is the content that appears in the browser window. For practice, you can type a simple paragraph for the body text.
This tag closes the body portion of the page.
This tag ends the HTML code of your document.
You can save your document and view the page in a Web browser. Remember to save your document with an.html or .htm file extension.
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."
Note
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. In WordPad, click View and then Options. In the Options dialog box, click the Text tab and then select the Wrap to Window option (
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 (_). Home pages for Web sites are commonly named index.html or default.htm.
Note
Your text editor may have a different command name for saving files. See your program's documentation for more information.
The Save As dialog box appears.
A dialog box may appear alerting you that all the formatting will be removed.
The editor saves the file.
Note
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. Although 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, 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, 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. Also keep your Web page files in one folder and give the folder a name that clearly identifies the content, such as My Web Pages.
You can save a Microsoft Word document as a Web page. Microsoft Word converts the content to HTML and saves it as a text file. Microsoft Word saves HTML documents with a lot of complex style information written in CSS and XML code. This helps ensure that the page looks exactly as it looked in Word when opened in a Web browser, with the same font styles, margins, and other features. You can see this extra information if you open the saved file in a text editor.
This example shows a document created in Microsoft Word 2007.
You can use Word's commands to style the text on your page and insert images.
In Microsoft Word 2003, you can click File and then Save.
The Save As dialog box appears.
Microsoft Word saves the document as an HTML text file.
Note
How can I create hyperlinks in Microsoft Word?
Click and drag to select the content you want to turn into a link and then click the Hyperlink command. In Word 2007, this command is located under the Insert tab. In Word 2003, it is located under the Insert menu. You can define the hyperlink in the dialog box that appears.
How should I edit an HTML page saved in Microsoft Word?
Because Microsoft Word saves its HTML documents with a lot of CSS and XML code, it is often best to edit such pages using Microsoft Word. This keeps you from having to edit the raw code. Instead, you can use Word's formatting menus, tool bars, and other commands.
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. Opening an HTML page that you are simultaneously editing in a text editor is a useful way to determine if the page is displaying correctly as you add content and tags. When you open a page from your computer in a browser, the file-system path leading to the page appears in the browser address field.
Note
Does it matter what browser I use to view the pages I am 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 file 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 includes all the standard structural elements as well as older tags that have been phased out, or deprecated. 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. HTML frames, which are rarely used in today's Web sites, are not covered in this book.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//END "http://www.w3.org/TR/html4/loose.dtd >
You may need to press
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//END "http://www.w3.org/TR/html4/strict.dtd >
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//END "http://www.w3.org/TR/html4/frameset.dtd >
Note
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, which are not covered in this book, 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. The <META> tag includes a NAME attribute that determines what type of metadata you are adding with the tag. You add metadata to the document header part of your HTML page, inside the <HEAD> and </HEAD> tags.
The metadata is now a part of the HTML document.
Note
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. Some HTML editors add this information automatically when you start a new HTML page.
Who can view my metadata?
The only time 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.