HTML WEB DESIGN

 

separator-blank.png

 

GUIDE – LISTS

 

  • Create a new HTML document called webpage3.html.  Remove all but the html template from it.

    Here is my new webpage3.html document with all other docs:

 

 

  • Open the new doc in a text editor.  It should look this this.

 

<html>

<head>

</head>

<body>

</body>

</html>

 

 

  • Let’s add a heading called Page #3.

 

 

<html>

<head>

</head>

<body>

<b><h1>Page #3</h1></b>

</body>

</html>

 

 

·       Now let’s add a list of your favourite foods.  We will use a <ul> structure which is an unordered list.  Each item in the list needs to be placed inside <li> and </li> tags.

 

 

<html>

<head>

</head>

<body>

<b><h1>Page #3</h1></b>

 

Favourite foods

<ul>

<li>Pizza</li>

<li>Wings</li>

<li>Mushrooms</li>

<li>Steak</li>

</ul>

 

</body>

</html>

 

 

Test your page.  Take your time to understand how the structure is organized.

 

·       Now create a list of your favourite movies.  Use the exact same setup but instead of <ul>, use <ol> which is for ordered lists.

 

 

<html>

<head>

</head>

<body>

<b><h1>Page #3</h1></b>

 

Favourite foods

<ul>

<li>Pizza</li>

<li>Wings</li>

<li>Mushrooms</li>

<li>Steak</li>

</ul>

 

Favourite movies

<ol>

<li>Lord of the Rings 2</li>

<li>Thor Ragnarok</li>

<li>Star Wars V - The Empire Strikes Back</li>

<li>Spaceballs</li>

</ol>

 

</body>

</html>

 

 

Test your page.