Creating a Linked Unnumbered List

Print This Procedure ( doc :: pdf )

The final type of body text you’ll create on the music home page is an unnumbered list. An unnumbered list appears as a bulleted list on a Web page, as shown the next figure.

Viewing an unnumbered (bulleted) list

In this section, you’ll first add a small amount of text that introduces the unnumbered list, and then you’ll create the list (which includes links to appropriate pages):

1.      Open index.html in a text editor if necessary, click after the final </blockquote> in the second cell in the second table row, press Enter twice, press Tab, and then enter the following paragraph:

<p>Apply for lessons today, and join the elite group of world-class pianists and flutists who study under one of North America's top music instructors.</p>

2.      Press Enter twice, press Tab, and then type the following:

<p><strong>Site Overview</strong></p>

In step 3, you’ll begin the unnumbered list by inserting the <ul> tag.

3.      Press Enter twice, press Tab, and type <ul>.

In steps 4 through 9, you’ll create list items by surrounding each list item with the <li></li> tag set. Furthermore, you’ll format the first word of each list entry as a hyperlink to another page in the site.

4.      Press Enter, press Tab, and type the following:

<li><a href="lessons.html">Lessons</a> Information about receiving music instruction from Chris, including availability and fees.</li>

5.      Press Enter, press Tab, and type the following:

<li><a href="recitals.html">Recitals</a> Schedules, featured students, and performance piece titles for student recitals.</li>

6.      Press Enter, press Tab, and type the following:

<li><a href="competitions.html">Competitions</a> Dates, fees, rules, schedules, and award ceremony information for upcoming student competitions.</li>

7.      Press Enter, press Tab, and type the following:

<li><a href="performances.html">Performances</a> Calendar of Chris Soll's personal performances, including dates, locations, performance pieces, and ticket information.</li>

8.      Press Enter, press Tab, and type the following:

<li><a href="background.html">Background</a> Chris's education, performance, and instructional background.</li>

9.      Press Enter, press Tab, and type the following:

<li><a href="contact.html">Contact</a> E‑mail addresses, physical addresses, phone numbers, and map links that can assist you in applying for lessons, attending performances, and contacting Chris.</li>

10.  Press Enter, press Tab, and type </ul> to end the unnumbered list.

11.  Press Enter, press Tab, and type </span> to complete the body text and end the font family specification.

12.  Save index.html.

Your unnumbered list code should display as shown in the following figure (and your index.html page should display as shown in the figure at the beginning of this section).

Viewing code for an unnumbered list

Last but not least, you’ll insert a linked photograph into the body area of the music site’s home page.