Setting Up the Document Structure in HTML5

  • 1/26/2001
Contents

Creating Paragraphs and Line Breaks

Within the <body> section of the document, you type the text that will appear on the Web page. Each paragraph of text should be enclosed in a two-sided tag that indicates its type.

The most basic paragraph type is the body paragraph, indicated by the <p> tag. It is a two-sided tag, so the paragraph text is placed between a <p> and a </p>.

NOTE

In HTML, the code will still work even if the </p> is omitted; in XHTML, it won’t. However, even if you never plan on coding in XHTML, it is a good practice to include the </p> tag. This way, you won’t fall into any sloppy habits.

When a browser displays a Web page, it inserts vertical white space between paragraphs:

httpatomoreillycomsourcemspimages796843.png

Click to view larger image

That spacing is usually convenient, but it can be a problem when the extra space between lines is unwanted, such as with an address.

httpatomoreillycomsourcemspimages796845.png

Click to view larger image

To create a line break without officially starting a new paragraph (and thereby adding that extra white space), use the <br> tag. This is a one-sided tag placed within a paragraph, at the end of each line, like this:

<p>David Jaffe<br>
317-555-8882</p>

NOTE

In XHTML, the line break tag is <br />. The end slash (and the space) is necessary to indicate that it’s a self-closing tag. Notice that the slash is placed after the letters, not before, as with the closing end of a two-sided tag. In XHTML, one-sided tags must end with a slash to indicate that they are self-closing. The space between the text and the final slash is also required so the tag will be recognized in HTML.

In this exercise, you will add text to an HTML file template, and then preview it in Microsoft Internet Explorer.

SET UP

Use the HTML5.htm file from the previous exercise or in the practice file folder for this topic. This practice file is located in the Documents\Microsoft Press\HTML5 SBS\02Structure\CreatingParagraphs folder. Open the HTML5 file in Notepad.

  1. Save the HTML5 file in the Documents\Microsoft Press\HTML5 SBS folder as index.htm.

    NOTE

    It is customary to name the opening page of a Web site index.htm, index.html, default.htm, or default.html. When users type a URL in their Web browsers but omit the file name (for example, typing www.microsoft.com rather than www.microsoft.com/filename.htm), most servers will automatically respond with the index or default page if one exists.

  2. Open the index file in Internet Explorer and arrange the Notepad and Internet Explorer windows so that both are visible.

    The index file displayed in Internet Explorer is currently blank.

  3. In the Notepad window, type the following between the <body> and </body> tags:

    <p>Welcome to The Garden Company! We hope you will find our site a useful
resource for becoming a better gardener.<p>
<p>Our main store is located at:<br>
108 Ponting Street<br>
Macon, IN 46062</p>
<p>Please stop by and browse our extensive inventory from Monday through
Saturday, 7:00 a.m. to 8:00 p.m.</p>

  4. Save your work, and then press F5 or click the Refresh button at the right side of the Address bar to refresh the display in Internet Explorer to see the result of the changes. Leave both windows open for the next exercise.

    httpatomoreillycomsourcemspimages796847.png

    Click to view larger image

    NOTE

    Your screen might look slightly different, depending on the settings you have configured in your browser.

CLEAN UP

Close the Notepad and Internet Explorer windows.

Save to your account

This chapter is from the book