TweetFacebookShareThis

Writing HTML Code Part 3

Previous Page    Next Page

Creating ordered and unordered lists

Creating ordered and unordered lists using the <ol></ol>, <ul></ul> and <li></li> tags, there are a number of different attributes that can be added using the cascading style sheet list-style-type:decimal; which is the default, upper and lowercase letters list-style-type:upper-alpha; or list-style-type:lower-alpha; Roman numerals using the upper and lowercase list-style-type:upper-roman; and list-style-type:lower-roman; and in a similar fashion for the unordered list the list-style-type:square; list-style-type:circle; and list-style-type:disc;

Below is the HTML code used to create an unordered list

<ul class="a">
<li>This is number one</li>
<li>This is number two</li>
<li>This is number three</li>
</ul>

The CSS code used to style the unordered list which creates a disc shaped bulleted list

.a {list-style-type:disc;}

Ordered Lists

  1. This is number one
  2. This is number two
  3. This is number three

  1. This is number one
  2. This is number two
  3. This is number three

  1. This is number one
  2. This is number two
  3. This is number three

  1. This is number one
  2. This is number two
  3. This is number three

  1. This is number one
  2. This is number two
  3. This is number three

Unordered Lists

  • This is number one
  • This is number two
  • This is number three

  • This is number one
  • This is number two
  • This is number three

  • This is number one
  • This is number two
  • This is number three

Creating Tables

Tables can be useful with the layout of certain types of content, to form a table you basically need three HTML elements: <table>, <tr> (Table Row) and <td> (Table Data) below is the HTML and CSS code used to create a table.

<div id="table1">
<table>
<tr>
<td>Selector</td>
<td>Declaration</td>
<tr/>
<tr>
<td>h1</td>
<td>{color= #0000ff;}</td>
</tr>
<tr>
<td>h1</td>
<td>{font-size= 2em;}</td>
</tr>
<tr>
<td> </td>
<td>Property Value</td>
</tr>
</table>
</div>
#table1 {
border:1px solid #ccc;
text-align:center;
margin:auto;
width:300px;
font-weight:bold;
background-color:#eee;
}

#table1 td{
border:1px solid #ccc;
width:150px;
}

The HTML and CSS code would produce the following table

Selector Declaration
h1 { color: #0000ff;}
h1 { font-size: 2em;}
  Property Value

Some great tutorial sites for learning how to write code
www.w3schools.com
htmldog.com
www.devguru.com

The World Wide Web Consortium (W3C)
www.w3c.org

W3C Markup Validation Service
validator.w3.org

Previous Page    Next Page

Recommended Books