Web Design with HTML and CSS

132

The importance of typography on the web

Web Design with HTML and CSS Digital Classroom

5 Repeat step 4, and add the list tags to the next three ingredients. Each list item will have

its own bullet point.

Now you’ll convert the next paragraph, which describes the steps for making the smoothie,

into an ordered list.

6 In the next paragraph, change the opening <p> and closing </p> paragraph tags to an

opening <ol> and closing </ol> to change this element to an ordered list. Then, as in

steps 4 and 5, add <li> tags (highlighted in red) to create three list items:

<ol>

<li>Add honeydew melon cubes to blender; blend until smooth.</li>

<li>Add yogurt, ice and lime juice and blend it again.</li>

<li>Transfer into tall glasses and garnish with melon slice.</li>

</ol>

7 Save your fi le and then preview it in the browser. The ordered list now displays numbers

for each list item.

The second paragraph has been converted to an ordered (or numbered) list.

Close the browser and return to your text editor.

One of the advantages of ordered lists is that the numbers are rendered in the browser. This

allows you to add or remove list items in your HTML and not have to worry about keeping

track of the numbers.

8 Add the following line between list items 2 and 3:

<li> Sample your smoothie and add honey or sugar if needed. Blend

again.</li>

Save the fi le and preview it in your browser. Note that the steps have automatically been

renumbered. Close your browser and return to your text editor. Now you’ll convert the

last paragraph into a defi nition list.