Creating Lists
Creating Lists
Embedded Files
Empowering Today’s Learners to Become Tomorrow’s Leaders
You can create bulleted or numbered lists just as you can in a Word document.
The Unordered element (ul) is used to create a bulleted list.
The Ordered element (ol) is used to create a numbered list.
Each item in the list must be contained in a list element (li).
All of these elements are block elements and therefore must have an opening and closing tag.
An unordered list will look like this:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5 </li>
</ul>
An ordered list will look like this:
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5 </li>
</ol>
Procedures to Practice
Procedures to Practice
Open index.html in Notepad
Create an ordered list of animals and a bullet list for household items
Add the following code into index.html (should go in above the mailing address that you added to your page as part of the instructions on 'Breaks'):
<p>These are five of my favorite animals:</p>
<ol>
<li>dog</li>
<li>cat</li>
<li>mouse</li>
<li>snake</li>
<li>hippo</li>
</ol>
<p>These are household items:</p>
<ul>
<li>chair</li>
<li>stove</li>
<li>bed</li>
<li>TV</li>
<li>computer</li>
</ul>
3. Save, and preview in a browser to see the results.
You will see an ordered list of five animals and a bulleted list of household items. Note that you don't see the mailing address here, but that's only because this screenshot cut it off. It's still there. You need to be very careful to only do as the instructions indicate and not to accidentily remove content when you are putting new content into your page. This will result in point deductions when this project is ultimately graded.
Lists as Containers for Navigation
Lists as Containers for Navigation
Lists are great containers for creating navigation. When combined with CSS (which we will discover in a couple of weeks), they create an easy to maintain and interactive navigation.
View the page source of this page (see demo on how to view page source).
The side navigation is created with an unordered list element.
YOU ARE NOW DONE WORKING ON THE PROCEDURES SITE FOR MODULE 1. STARTING ON THE NEXT PAGE, YOU SHOULD BE WORKING IN PORTFOLIO.
Page updated
Report abuse