Lesson 7
In HTML, there are two types of list, ordered (numbered) and unordered (bullet-pointed). In this exercise, you will create both.
Ordered Lists
- Double click the following icon on your desktop to open ‘Notepad++’
- Click ‘File’ & ‘Close’ to close any files that appear. You should now see a blank document.
- Type the following code:
<!doctype html>
<html>
<head>
<title>Welcome to our Homepage</title>
</head>
<body>
</body>
</html>
- You should now have something that looks like the image to the right:
- Now type the following code between the <body></body> tags:
<ol>
<li>Item One</li>
<li>Item Two</li>
</ol>
- Save your file and from the ‘Run’ menu choose ‘Launch in IE’. You should see the following in your browser. This example is an ordered list.
Unordered List
- Beneath the code you entered in step 5, type the following
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
- You should now have:
<ol>
<li>Item One</li>
<li>Item Two</li>
</ol>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
<li>Item Two</li>
</ul>
- Save your file and from the ‘Run’ menu choose ‘Launch in IE’. You should see the image above right.
This is an example of an ‘Ordered’ and ‘Unordered’ list. Lists can also be ‘Nested’ to create ‘Sub-items.
Unordered List
To create a list of nested items:
- Delete all your previously typed code between the <body></body> tags
- Now type the following:
<ol>
<li>Item One</li>
<ol>
<li>Sub-Item One</li>
<li>Sub-Item Two</li>
</ol>
<li>Item Two</li>
<ol>
<li>Sub-Item One</li>
<li>Sub-Item Two</li>
</ol>
</ol>
- Save your file and from the ‘Run’ menu choose ‘Launch in IE’. You should see the following in your browser.
Take me to lesson 8 'Using Tables'