Easy Web Design, 3rd Edition
  EWD Projects :: Oldschool

Demystifying Basic HTML

Inserting Body Text on the Home Page

Print This Procedure ( doc :: pdf )

In this section, you’re going to insert some body text into the music site’s home page. What this endeavor actually boils down to is a practice in formatting text. The main content of the home page consists of a couple headings, paragraph text, colored block quotes, and a linked unnumbered list. So as you can imagine, we’ll be in this walkthrough's next few sections.

Creating Headings

In HTML coding, you can define six heading levels by using <h1></h1>, <h2></h2>, and so on through <h6></h6> tag sets, with the size 1 heading being the largest and size 6 being the smallest. The following figure shows a sample of the various heading sizes. To view the headings in action, visit www.creationguide.com/headings.

Six standard HTML heading sizes

note Different browsers might display headings in different ways (i.e. different fonts, different sizes, boldfacing, and so forth). But in all browsers, the hierarchy presentation coincides with the heading setting

The music site uses one heading tag on the home page, which formats the welcome message at the top of the page:

1.      Open your text editor, and then open C:\music\index.html.

2.      In the second row and second cell of the table (the cell after the navigation bar information), click after <td valign="top">, press Enter, and press Tab.

First you’ll define the font style for the cell’s body text:

3.      Type the following:

<span style=”font-family: verdana, arial, sans-serif;">


Notice in step 3 the three font names in the face attribute. Because you never know what fonts users will have installed on their systems, you should provide a backup plan when you define font styles. In step 3, if a user’s computer has the Verdana font installed, the browser will display upcoming body text in the Verdana font style. If Verdana isn’t installed on the user’s computer, the browser will look for the Arial font family. If neither Verdana nor Arial is installed on the user’s system, the browser will display the body text in a sans serif style. If fonts listed in the font tag can’t be found on the user’s computer, the browser will display the text in the browser’s default font style.

Next you’ll add a line break and insert a “welcome” heading on the music home page.

4.      Press Enter, press Tab, type <br /> to add a line break, press Enter, press Tab, and then type the following size 3 heading information:

<h3>Welcome to Chris Soll's Online Resource for Music Instruction and Performance Information!</h3>


5.      Save index.html. Your code should appear as shown in the following figure.

Specifying a font style and adding size 3 heading.

Next section

top of page