VirtualMV/HTML/Basic/Lists

From WikiEducator
Jump to: navigation, search




Overview

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

in HTML5 a description list has been defined

cat
Furry animal
dog
Woffie animal
VmvIcon Objective.png

: Lists

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

  • Add ordered, un-ordered and description 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

Description List

in HTML5 a description list has been defined

cat
Furry animal
dog
Woffie animal

This is created using

<dl>
  <dt>cat</dt>
    <dd>Furry animal</dd>
  <dt>dog</dt>
    <dd>Woffie animal</dd>
</dl>


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




<!DOCTYPE html>
<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.searchnz.co.nz">Search NZ</a></li>
    <li>NZ Search</li>
    <li>NZ Search Guide</li>
  </ul>
  <h3>International</h3>
  <ol>
    <li>google</li>
    <li>Microsoft bing</li>
    <li>yahoo</li>
    <li>DuckDuckgo</li>
  </ol>
  <h3>Glossary</h3>
  <dl>
    <dt>Search Engine</dt>
      <dd>Programs that run automatically, exploring websites creating catalogs of web pages</dd>
    <dt>Knowledge graph</dt>
      <dd>Serves up facts and services in response to search terms</dd>
  </dl> 
</body> 
</html>

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

**’s search links

New Zealand

  • Search NZ
  • NZ Search
  • NZ Search Guide

International

  1. google
  2. Microsoft bing
  3. yahoo
  4. DuckDuckgo

Glossary

Search Engine
Programs that run automatically, exploring websites creating catalogs of web pages
Knowledge graph
Serves up facts and services in response to search terms

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