HTML Tags:List in Ordered
I list all the HTML tags you’ll ever need – and all the ones you shouldn’t use too! For each tag, I explain its proper use when writing Semantic HTML.
This is the reference we use when producing professional web page designs in our agency. I hope you find it useful.
We are going to work on lists. we can create lists directly in HTML without assigning numbers.
1. Types of Lists: There are two kinds of lists, and they are fairly simple.
<ol> is an ordered list
<ul> is an unordered list
<li> is used for each list item
2. Unordered Lists: An unordered list has what is commonly called “bullets”. We can add a bulleted list by adding an unordered list. The unordered list is contained within the Unordered list tags, <ul> </ul> tags. Each item in the list will be contained within the list item tags, <li> </li>
We will add an unordered list to our html code. Add the following code to your page body so far created and brought forward from lesson 7.
Reasons I like Html
<ul>
<li> I can make my pages as I want them</li>
<li> Once I learn html, the other languages come easily</li>
<li> Even if I use an html editor, I can now adjust aspects of the page</li>
<li> I can look at other peoples html code to learn how to do neat things</li>
</ul>
The unordered list will look like this:
Reasons I like Html
- I can make my pages as I want them
- Once I learn html, the other languages come easily
- Even if I use an html editor, I can now adjust aspects of the page
- I can look at other peoples html code to learn how to do neat things
3. Ordered Lists: An ordered list has what is commonly called “numbered list”. We can add a numbered list by adding an ordered list. The ordered list is contained within the Ordered list tags, <ol> </ol> tags. Each item in the list will be contained within the list item tags, <li> </li>
We will add an ordered list to our html code. Add the following code to your page body so far created.
<ol>
<li> Html base code</li>
<li>How to align text</li>
<li>Font attributes</li>
<li>Inserting images</li>
<li>Image attributes</li>
<li> Creating links</li>
<li> Sound attributes</li>
<li>Making lists</li>
</ol>
The Ordered list will look like this below. Notice you have not assigned a number to any line, but the coding figures it out.
- Html base code
- How to align text
- Font attributes
- Inserting images
- Image attributes
- Creating links
- Sound attributes
- Making lists
4. Code Summary: Here is our code so far
<html>
<head>
<title>
</title>
</head>
<body background=”http://www.porshiana.com/water.jpg” LINK=”#ffff00″ vlink=”#000000″>
<embed src=”http://www.porshiana.com/sample.mid” volume=”30%” hidden=”false” autostart=”true loop=”true” height=”100″>
<font color=”#ffffff”>
<h1 align=”center”> My very first html page</h1>
<font size=”6″><b>Welcome to my html page <br>
<center>
where I am showing my html skills</center>
<p align=”right”><b>
<font size=”4″> I want to learn eveything I can about html</p>
<div align=”left”> So I can make cool web pages</div>
<a href=”http://www.porshiana.com”>
<img src=”http://www.porshiana.com/waterimage.jpg” align=”right” height=”300″> </a>
If I learn how to use a image editor like adobe photoshop or jasc paint shop pro,
I will be able to create pictures like these too. Then I could design entire pages.
Knowing html and having an image editor are the basic requirements for web developement.
I hope you enjoy my very first html page</b>
<p>
<a href=”http://www.developingwebs.net”>Developing webs</a>
<a href=”http://www.porshiana.com/sample.mid”>This is a sample sound link</a>
Reasons I like Html
<ul>
<li> I can make my pages as I want them</li>
<li> Once I learn html, the other languages come easily</li>
<li> Even if I use an html editor, I can now adjust aspects of the page</li>
<li> I can look at other peoples html code to learn how to do neat things</li>
</ul>
Things I have learned
<ol>
<li> Html base code</li>
<li>How to align text</li>
<li>Font attributes</li>
<li>Inserting images</li>
<li>Image attributes</li>
<li> Creating links</li>
<li> Sound attributes</li>
<li>Making lists</li>
</ol>
</font>
</body>
</html>
Save this in your notepad, and view it.
