HTML/XHTML:Lists

From virtualMV2015wiki
Jump to: navigation, search
 Home  HTML/XHTML <

Introduction

There are times when you want to add a list of terms or references to your page.

We can do this either as an unordered (bulleted)

  • cat
  • dog
  • mouse

or ordered (numbered) list.

  1. Family
  2. Work


Icon Objective.png

Objective : Lists

By the end of this page you will be able to:

  • Add ordered and unordered lists to a web page
  • Change the bullet style and start numbering

Theory:Lists

The syntax is as follows:

  • For an unordered (bulleted) list the tags <ul> and </ul> surround the list
  • For an ordered (numbered) list the tags <ol> and </ol> surround the list
  • <li> and </li> are used for each line in the lists

So full syntax for a list is as follows;

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
</ul>

Which will produce

  • List Item 1
  • List Item 2

and for an ordered list;

<p>My priorities</p>
<ol>
  <li>Family</li>
  <li>Work</li>
  <li>Study</li>
</ol>

Which will produce

My priorities

  1. Family
  2. Work
  3. study

Ordered List attributes

Html also has a selection of other list types. These are listed below.

Table: HTML list types
HTML tag list numberingDescription
<ol> 1) 2) 3) 4)
<ol type = i> i) ii) iii) iv) Roman numerals (lowercase)
<ol type = I> I) II) III) IV) Roman numerals (uppercase)
<ol type = a> a) b) c) d) Lowercase letters
<ol type = A A. B. C. D. Uppercase letters


For example;

<ol type = "I">
  <li>List Item 1</li>
  <li>List Item 2</li>
</ol>
produces
  1. List Item 1
  2. List Item 2

The starting value of the list can be changed using the start attribute

For example;

<ol start="4">
  <li>Golf</li>
  <li>Tennis</li>
</ol>
  1. Golf
  2. Tennis

Unordered list (Bullet) attributes

You can change the look of the bullets using the type attribute

Disc	<ul type="disc">
Circle	<ul type="circle">
Square	<ul type="square">

or using styles

Disc	<ul style="list-style-type:disc">
Circle	<ul style="list-style-type:circle">
Square	<ul style="list-style-type:square">

Examples

         ListType.png

Icon Activity.png Activity: Lists Create a new web page links.htm as..

<html> 
<head> 
<title>**’s search engine links</title>
</head> 
<body>
<h2>**’s search links</h2> 
<h3>New Zealand</h3>
<ul>
  <li><a href = "http://www.accessnz.co.nz">accessnz</a></li>
  <li>searchnow</li>
  <li>searchnz</li>
  <li>NZ Search Guide</li>
</ul>
<h3>International</h3>
<ol>
  <li>google</li>
  <li>Microsoft bing</li>
  <li>yahoo</li>
</ol>
</body> 
</html>

Save then viewing in the web browser this should look something like;

**’s search links

New Zealand

  • accessnz
  • searchnz
  • NZ Search Guide

International

  1. google
  2. Microsoft bing
  3. yahoo

Now add the <a href..> tags to link to the search engines.

  • For example
    <li><a href = "http://www.google.com"> google</a></li>

    URL's are

    • http://www.accessnz.co.nz,
    • http://search.attitude.net.nz/nz_search_engines.html,
    • http://www.searchnz.co.nz,
    • http://www.google.com,
    • http://www.bing.com,
    • http://www.yahoo.com

    Icon References.png References


    HTML/XHTML:Lists. (2017). In virtualMV's ( Michael Verhaart ) wiki. Retrieved December 18, 2017, from http://www.virtualmv.com/wiki/index.php?title=HTML/XHTML%3ALists    (zotero)