VirtualMV/HTML/Basic/Lists
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.
- Family
- Work
in HTML5 a description list has been defined
- cat
- Furry animal
- dog
- Woffie animal
|
: ListsBy the end of this page you will be able to:
|
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
- Family
- Work
- study
Ordered List attributes
Html also has a selection of other list types. These are listed below.
Table: HTML list types| HTML tag | list numbering | Description |
|---|---|---|
| <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>
- List Item 1
- 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>
- Golf
- 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
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>
| 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
- Microsoft bing
- yahoo
- 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.
- For example
<li><a href = "http://www.google.com"> google</a></li>
URL's are
- NZ Search http://www.nzs.com/,
- http://search.attitude.net.nz/nz_search_engines.html,
- http://www.google.com,
- http://www.bing.com,
- http://www.yahoo.com
- DuckDuckgo http://duckduckgo.com/,
ReferencesvirtualMV | Superquick wiki guide | Please give me some feedback
VirtualMV/HTML/Basic/Lists. (2024). In WikiEducator/VirtualMV wiki. Retrieved November 21, 2024, from http:https://wikieducator.org/VirtualMV/HTML/Basic/Lists (zotero)
