IPUB 100 Lesson 3InstructorMark Lamontagne

ReviewCreate html5 page on blackboard.Write a relative link from the index page, for an image

called car.jpg . The image resides in the images folder of your site.

Write an anchor element for Google.Show me how to make the title element bold.Make the text “My Site Name” a heading.

IPUB 100 Lesson 3InstructorMark Lamontagne

Learning ObjectiveTables

ConstructUsage

ListsHTML Unordered listHTML Ordered listHTML Definition List

IPUB 100 Lesson 3InstructorMark Lamontagne

HTML TablesUsed to display tabular data (like an excel spreadsheet)Online stores like to use them because they keep the

pertinent product data on order.Table design is done through css.The elements of a table are:

<table> opening tag<th> table heading<tr> table row<td>table cell

IPUB 100 Lesson 3InstructorMark Lamontagne

HTML Table<table >

<tr><th>Header1</th><th>Header 2</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr>

</table>

header1 header2

Row1, cell 1 row 1, cell 2

row 2, cell 1 row 2, cell 2

IPUB 100 Lesson 3InstructorMark Lamontagne

ExerciseCreate a table which

would represent the image on the right.

IPUB 100 Lesson 3InstructorMark Lamontagne

Each Product

Product-name

Product-image

Product-details

Product-price

productname1 productname2 productname3productname4product-image1 product-image2 product-image3 product-image4product-details1 product-details2 product-details3 product-details4product-price1 product-price2 product-price3 product-price4productname5 productname6 productname7productname8product-image5 product-image6 product-image7 product-image8product-details5 product-details6 product-details7 product-details8product-price5 product-price6 product-price7 product-price8

IPUB 100 Lesson 3InstructorMark Lamontagne

<table><tr>

<th>productname1</th><th>productname2</th><th>productname3</th><th>productname4</th>

</tr><tr>

<td>product-image1</td><td>product-image2</td><td>product-image3</td><td>product-image4</td>

</tr><tr>

<td>product-details1</td><td>product-details2</td><td>product-details3</td><td>product-details4</td>

</tr>

<tr><td>product-price1</td><td>product-price2</td><td>product-price3</td><td>product-price4</td>

</tr><tr>

<th>productname5</th><th>productname6</th><th>productname7</th><th>productname8</th>

</tr><tr>

<td>product-image5</td><td>product-image6</td><td>product-image7</td><td>product-image8</td>

</tr><tr>

<td>product-details5</td><td>product-details6</td><td>product-details7</td><td>product-details8</td>

</tr>

<tr><td>product-price5</td><td>product-price6</td><td>product-price7</td><td>product-price8</td>

</tr>

</table>

IPUB 100 Lesson 3InstructorMark Lamontagne

Uses of Unordered ListsMaking sense out of context.

Elements such as <div> and <span> are semantically empty, implying no meaning other than grouping content into blocks. Any meaning they convey is a result of how your CSS influences their display in a visual browser context.

By grouping applicable content into lists, it gains meaning via your markup, independent of your stylesheet.

User Agents which scan only your content (and ignore your visual CSS), like text browsers, text-to-speech browsers, and even search-bots can understand your list organization and proceed to render (or interpret) it as such.

IPUB 100 Lesson 3InstructorMark Lamontagne

Unordered List

<ul><li>pen</li><li>paper</li><li>pencil</li>

</ul>

PenPaperpencil

Code Visual

IPUB 100 Lesson 3InstructorMark Lamontagne

exerciseCreate the html portion a

dropdown navigation using a unordered list.

IPUB 100 Lesson 3InstructorMark Lamontagne

solution<ul>

<li><ul><li><a href="#"></a></li><li><a href="#">text</a></li><li><a href="#">text</a></li></ul></li>

<li><a href="#">text</a></li><li><a href="#">text</a></li>

</ul>

IPUB 100 Lesson 3InstructorMark Lamontagne

Ordered Lists

These are sometimes called numbered lists, and list items that have a specific numerical order or ranking.

1 pen 2 pencil 3 crayonUse ordered lists anywhere you want to show a specific

order for the list items to be followed, or to rank items sequentially.

These lists are most often found in instructions and recipes.

IPUB 100 Lesson 3InstructorMark Lamontagne

Ordered List

<ol><li>pen</li><li>paper</li><li>pencil</li>

</ol>

1. Pen2. Paper3. pencil

Code Visual

IPUB 100 Lesson 3InstructorMark Lamontagne

HTML Definition Lists

<dl><dt>Coffee</dt>

<dd>- black hot drink</dd>

<dt>Milk</dt><dd>- white cold drink</dd>

</dl>

Coffee- black hot drink

Milk- white cold drink

Code Visual

IPUB 100 Lesson 3InstructorMark Lamontagne

Questions?