IPUB 100 Lesson 3 Instructor Mark Lamontagne Review Create 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 3 Instructor Mark Lamontagne Learning Objective Tables Construct Usage Lists HTML Unordered list HTML Ordered list HTML Definition List

IPUB 100 Lesson 3 Instructor Mark Lamontagne HTML Tables Used 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: opening tag table heading table row table cell

IPUB 100 Lesson 3 Instructor Mark Lamontagne HTML Table Header1 Header 2 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 header1header2 Row1, cell 1row 1, cell 2 row 2, cell 1row 2, cell 2

IPUB 100 Lesson 3 Instructor Mark Lamontagne Exercise Create a table which would represent the image on the right.

IPUB 100 Lesson 3 Instructor Mark Lamontagne Each Product Product-name Product-image Product-details Product-price productname1productname2productname3productname4 product-image1product-image2product-image3product-image4 product-details1product-details2product-details3product-details4 product-price1product-price2product-price3product-price4 productname5productname6productname7productname8 product-image5product-image6product-image7product-image8 product-details5product-details6product-details7product-details8 product-price5product-price6product-price7product-price8

IPUB 100 Lesson 3 Instructor Mark Lamontagne productname1 productname2 productname3 productname4 product-image1 product-image2 product-image3 product-image4 product-details1 product-details2 product-details3 product-details4 product-price1 product-price2 product-price3 product-price4 productname5 productname6 productname7 productname8 product-image5 product-image6 product-image7 product-image8 product-details5 product-details6 product-details7 product-details8 product-price5 product-price6 product-price7 product-price8

IPUB 100 Lesson 3 Instructor Mark Lamontagne Uses of Unordered Lists Making sense out of context. Elements such as and 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 3 Instructor Mark Lamontagne Unordered List pen paper pencil Pen Paper pencil CodeVisual

IPUB 100 Lesson 3 Instructor Mark Lamontagne exercise Create the html portion a dropdown navigation using a unordered list.

IPUB 100 Lesson 3 Instructor Mark Lamontagne solution text text

IPUB 100 Lesson 3 Instructor Mark 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 crayon Use 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 3 Instructor Mark Lamontagne Ordered List pen paper pencil 1.Pen 2.Paper 3.pencil CodeVisual

IPUB 100 Lesson 3 Instructor Mark Lamontagne HTML Definition Lists Coffee - black hot drink Milk - white cold drink Coffee - black hot drink Milk - white cold drink CodeVisual

IPUB 100 Lesson 3 Instructor Mark Lamontagne Questions?