HTML Basics

Session:2 Ordered /Unordered Lists

 3 Types
 Ordered
 Numbered
 Unordered
 Bullets
 Definitions
 Like a dictionary
LISTS
 Type <ol> for ordered list or <ul> for unordered
list
 Type <li> to begin every item of the list followed
by </li>
 Repeat step above for every item
 Type </ol> or </ul> to complete list
 Default for ordered list 1,2,3,4
 Default for unordered list is ●
Lists
Creating Ordered and Unordered
Unordered
Ordered <ol>
<ul>
 Item
1. Item1 1
 Item
2. Item2 2
 Item
3. Item3 3
 Item
4. Item44
</ol>
</ul>
Lists
 You can nest lists (one inside another)
 <ul>
<li> <ol><li></li></ol> </li>
</ul>
 You cannot put text between opening tag (<ol>
or <ul>) and first item <li>
 Lists are automatically indented from left margin
Unordered Lists
Creating Ordered and
 Marker can be
 For Unordered lists
 disc ●
 circle ○
 square ■
 For Ordered Lists
 decimal 1,2,3,4
 upper-alpha A,B,C,D
 lower-alpha a,b,c,d
 upper-roman I,II,III,IV
 lower-roman i,ii,iii,iv
Choosing your Markers
 List Code: Exploring Different Attributes

These all rest inside the first list tag:

<ol
type=I or i (for large or small roman numerals)
type=A or a (for capital or small letters)
type=1 (for numbers, which is the default)
>

<ul
type=disc (the default for first level lists)
type=round (the default for second level lists)
type=square (the default for third level lists)
>
 Nested Lists

Nested Lists are useful for creating website

site maps , and are simply just lists inside of lists:
<ol>
<li> Introduction </li>
<ol> <!-- indenting helps organize code -->
<li> Are lists fun? </li>
<li> Are lists not fun? </li>
</ol>
<li> Conclusion </li>
<ol>
<li> Lists are fun  </li>
<li> Lists are not fun  </li>
</ol>
</ol>
 You can modify the numbering of your lists
 To start on a number other than one
 <ol start=“3”>
 To change number “mid-stream”
 <li value=“5”>
Numbering
Choosing Where to start List
 Type <dl>
 Type <dt> and word or phrase to be fined
followed by </dt>
 Type <dd> and definition for word or phrase
followed by </dd>
 Type </dl>
Creating a definition list
 Review :Ordered Lists: <ol> Tag
 Create an Ordered List using <ol></ol>:
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>

 Attribute values for type are 1, A, a, I, or i

1. Apple i. Apple
2. Orange ii. Orange
3. Grapefruit iii. Grapefruit
a. Apple
A. Apple b. Orange I. Apple
B. Orange c. Grapefruit II. Orange
C. Grapefruit III. Grapefruit
13
 Unordered Lists: <ul> Tag
 Create an Unordered List using <ul></ul>:
<ul type="disk">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
 Attribute values for type are:
 disc, circle or square

• Apple o Apple  Apple

• Orange o Orange  Orange
• Pear o Pear  Pear
14
 Definition lists: <dl> tag
 Create definition lists using <dl>
 Pairs of text and associated definition; text is in
<dt> tag, definition in <dd> tag
<dl>
<dt>HTML</dt>
<dd>A markup language …</dd>
<dt>CSS</dt>
<dd>Language used to …</dd>
</dl>

 Renders without bullets

 Definition is indented
15
 Lists – Example
<ol type="1">
<li>Apple</li>
lists.html
<li>Orange</li>
<li>Grapefruit</li>
</ol>

<ul type="disc">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>

<dl>
<dt>HTML</dt>
<dd>A markup lang…</dd>
</dl>

16
HTML Tables
 HTML Tables
 Tables represent tabular data
 A table consists of one or several rows
 Each row has one or more columns
 Tables comprised of several core tags:
<table></table>: begin / end the table
<tr></tr>: create a table row
<td></td>: create tabular data (cell)

18
 Tables
<table border="1">
<tr>
<th>Name</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
 <table> main element <td>A B Morgan</td>
 <tr> table row <td>Fishing</td>
 <th> table header <td>5</td>
 <td> table data </tr>
<tr>
<td>D P Jones</td>
<td>Sailing</td>
<td>8</td>
</tr>
</table>

19
 <table border="1">
Tables <tr>
<th>Name</th>
<td>A B Morgan</td>
<td>D P Jones</td>
</tr>
<tr>
<th>Course</th>
<td>Fishing</td>
 <table> main element
<td>Sailing</td>
 <tr> table row </tr>
 <th> table header <tr>
 <td> table data <th>Year</th>
<td>8</td>
<td>5</td>
</tr>
<tr>
</table>

20
 <table border="1">
Rows
 Cellsand
canColumns
span <tr>
<th colspan="2">Name</th>
multiple columns <th>Course</th>
<th>Year</th>
and multiple </tr>
<tr>
rows with the <td>A B</td>
colspan and <td>Morgan</td>
<td rowspan="2">Fishing</td>
rowspan <td>5</td>
</tr>
attributes <tr>
<td>D J</td>
<td>Jones</td>
<td>Sailing</td>
<td>8</td>
</tr>

</table>

21
The align and width attributes
<table border="1" align="center">
 The align <tr>
attribute <th colspan="2" width="60%">Name</th>
<th rowspan="2">Course</th>
determines the <th rowspan="2">Year</th>
position of the </tr>
text within a <tr>
<th>Last</th>
cell <th>Init.</th>
 The width </tr>
<tr>
attribute <td>Morgan</td>
determines the <td>AB</td>
width of the <td>Fishing</td>
<td align="center">5</td>
row relative to </tr>
the table <!– etc -->

22
 Table attributes
Table attributes
 align alignment relative to the page
 width in pixels or percentage of page width
 border - width of border (pixels)
BSc CM0133 Internet Computing

 cellspacing separation between cells (pixels)

 cellpadding - space around data inside cell (pixels)
 bgcolor - background colour (inside cells)

Furthermore
• The <caption> element puts a title above the table

23
 Table attributes
<table border="3" align="center" cellspacing="6"
cellpadding="6" bgcolor="cyan">
<caption>
<h2>Course Data</h2>
</caption>
BSc CM0133 Internet Computing
<tr>
<th>Name</th>
<th>Course</th>
<th>Year</th>
</tr>
<tr>
<td>A B Morgan</td>
<td>Fishing</td>
<td>5</td>
</tr>
<!– etc -->

24
 Cell Spacing and Padding
 Tables have two important attributes:

 cellspacing  cellpadding

cell cell cell cell

cell cell cell cell

 Defines the  Defines the empty

empty space space around the cell
between cells content
25
 Cell Spacing and Padding –
Example
table-cells.html
<html>
<head><title>Table Cells</title></head>
<body>
<table cellspacing="15" cellpadding="0">
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="10">
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
</html>

26
 Cell Spacing and Padding –
Example (2)
table-cells.html
<html>
<head><title>Table Cells</title></head>
<body>
<table cellspacing="15" cellpadding="0">
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="10">
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
</html>

27
 Tables with Different
Cell Spacing Values
different cell spacing values

different cell padding values

28
 Column and Row Span
 Table cells have two important attributes:
 colspan  rowspan
colspan="1" colspan="1" rowspan="2" rowspan="1"

cell[1,1] cell[1,2] cell[1,2]

cell[1,1]
cell[2,1] cell[2,1]

colspan="2" rowspan="1"
 Defines how  Defines how
many columns many rows the
the cell occupies cell occupies
29
 Column and Row Span – Example
table-colspan-rowspan.html
<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr class=“2"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr class=“3"><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr>
</table>

30
 Column and Row Span –
table-colspan-rowspan.html
Example (2)
<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr class=“2"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr class=“3"><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr>
Cell[1,1] Cell[2,1]
</table>

Cell[1,2] Cell[3,2]
Cell[2,2]
Cell[1,3] Cell[2,3]

31
 Adding Table Headings to the
Table
Text in cells formatted
with the <th> tag is bold
and centered above each
table column.

table
headings

32
Tables with Different Borders
Values

33
 Adding a 5-Pixel Border to a
Table

Only the outside

border is affected by
the border attribute;
the internal gridlines
are not affected.

34
 Values of the Align
and Valign Attributes

35
 Nested Tables
 Table data “cells” (<td>) can contain nested
tables (tables within tables):
<table> nested-tables.html
<tr>
<td>Contact:</td>
<td>
<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</table>
</td>
</tr>
</table>
36