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.

  1. Html base code
  2. How to align text
  3. Font attributes
  4. Inserting images
  5. Image attributes
  6. Creating links
  7. Sound attributes
  8. 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.