HTML Basics Ordered Unordered Lists LISTS 3 Types

HTML Basics Ordered /Unordered Lists

LISTS 3 Types Ordered Numbered Unordered Bullets Definitions Like a dictionary

Creating Ordered and Unordered 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 Unordered <ul> • Item 1 • Item 2 • Item 3 • Item 4 </ul> Ordered <ol> 1. Item 1 2. Item 2 3. Item 3 4. Item 4 </ol>

Creating Ordered and Unordered Lists You can nest lists (one inside another) <ul> <li> <ol><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

Choosing your Markers 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, III, IV lower-roman i, iii, iv

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 are useful for creating website maps , and are simply just lists inside of lists: <ol> <li> Introduction </li> <ol>  <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>

Choosing Where to start List Numbering 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”>

Creating a definition 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>

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 2. Orange 3. Grapefruit i. Apple ii. Orange iii. Grapefruit a. Apple I. Apple b. Orange A. Apple c. Grapefruit II. Orange B. Orange III. Grapefruit C. 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> <li>Orange</li> <li>Grapefruit</li> </ol> lists. html <ul type="disc"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li> </ul> <dt>HTML</dt> <dd>A markup lang…</dd> </dl> 16

HTML Tables

HTML 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> <tr> <th> <td> main element table row table header table data <table border="1"> <tr> <th>Name</th> <th>Course</th> <th>Year</th> </tr> <td>A B Morgan</td> <td>Fishing</td> <td>5</td> </tr> <td>D P Jones</td> <td>Sailing</td> <td>8</td> </tr> </table> 19

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

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

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

Table attributes • alignment relative to the page • width in pixels or percentage of page width • border - width of border (pixels) • 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 BSc CM 0 23 133 Inter net

Table attributes <table border="3" align="center" cellspacing="6" cellpadding="6" bgcolor="cyan"> <caption> <h 2>Course Data</h 2> </caption> <tr> <th>Name</th> <th>Course</th> <th>Year</th> </tr> <td>A B Morgan</td> <td>Fishing</td> <td>5</td> </tr> <!– etc --> BSc CM 0 24 133 Inter net

Cell Spacing and Padding Tables have two important attributes: cellspacing cellpadding cell cell Defines the empty space between cells Defines the empty space around the cell content 25

table-cells. html Cell Spacing and Padding – Example <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

table-cells. html Cell Spacing and Padding – Example (2) <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="1" cell[1, 1] rowspan colspan="1" cell[1, 2] cell[2, 1] Defines how colspan="2" many columns the cell occupies rowspan="2" cell[1, 1] rowspan="1" cell[1, 2] cell[2, 1] rowspan="1" Defines how many rows the 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 – Example (2) 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> 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> <tr> <td>Contact: </td> <table> <tr> <td>First Name</td> <td>Last Name</td> </tr> </table> nested-tables. html 36