HTML
WEB DESIGN
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.
|