03. session 03 using lists and tables
-
Upload
phuc-do -
Category
Technology
-
view
760 -
download
1
Transcript of 03. session 03 using lists and tables
![Page 1: 03. session 03 using lists and tables](https://reader033.fdocuments.us/reader033/viewer/2022052600/557e8c7ed8b42acf658b52b6/html5/thumbnails/1.jpg)
Using Lists and Tables
Session 3
![Page 2: 03. session 03 using lists and tables](https://reader033.fdocuments.us/reader033/viewer/2022052600/557e8c7ed8b42acf658b52b6/html5/thumbnails/2.jpg)
Objectives Explain Ordered Lists. Explain Unordered Lists. Explain Defination Lists. Explain the Table elements.
Building Dynamic Websites/Session 1/ 2 of 22
![Page 3: 03. session 03 using lists and tables](https://reader033.fdocuments.us/reader033/viewer/2022052600/557e8c7ed8b42acf658b52b6/html5/thumbnails/3.jpg)
Lists A List is a collection
of items. A list can contain
other HTML elements such as image, links or other lists.
Building Dynamic Websites/Session 1/ 3 of 22
![Page 4: 03. session 03 using lists and tables](https://reader033.fdocuments.us/reader033/viewer/2022052600/557e8c7ed8b42acf658b52b6/html5/thumbnails/4.jpg)
Ordered Lists<HTML>
<HEAD><TITLE>Learning HTML</TITLE>
<BODY><H2>Days in a week</H2><OL>
<LI>Sunday<LI>Monday<LI>Tuesday<LI>Wednesday<LI>Thursday<LI>Friday<LI>Saturday
</OL></BODY>
</HTML>Building Dynamic Websites/Session 1/ 4 of 22
![Page 5: 03. session 03 using lists and tables](https://reader033.fdocuments.us/reader033/viewer/2022052600/557e8c7ed8b42acf658b52b6/html5/thumbnails/5.jpg)
Ordered Lists
Building Dynamic Websites/Session 1/ 5 of 22
![Page 6: 03. session 03 using lists and tables](https://reader033.fdocuments.us/reader033/viewer/2022052600/557e8c7ed8b42acf658b52b6/html5/thumbnails/6.jpg)
List-style-type
Building Dynamic Websites/Session 1/ 6 of 22
<OL STYLE="list-style-type:property’s value">
![Page 7: 03. session 03 using lists and tables](https://reader033.fdocuments.us/reader033/viewer/2022052600/557e8c7ed8b42acf658b52b6/html5/thumbnails/7.jpg)
Nested Ordered lists<HTML>
<HEAD><TITLE>Learning HTML</TITLE>
<BODY>
<H2>Web Designing with HTML</H2>
<OL>
<LI>Introducting HTML
<OL STYLE="list-style-type:lower-roman">
<LI>WWW and Internet Overview
<LI>HTML Overview
<LI>Basic HTML Elements
</OL>
<LI>Working with HTML Elements
(continue…)Building Dynamic Websites/Session 1/ 7 of 22
![Page 8: 03. session 03 using lists and tables](https://reader033.fdocuments.us/reader033/viewer/2022052600/557e8c7ed8b42acf658b52b6/html5/thumbnails/8.jpg)
Nested Ordered lists
Building Dynamic Websites/Session 1/ 8 of 22
![Page 9: 03. session 03 using lists and tables](https://reader033.fdocuments.us/reader033/viewer/2022052600/557e8c7ed8b42acf658b52b6/html5/thumbnails/9.jpg)
Unordered Lists<HTML>
<HEAD><TITLE>Learning HTML</TITLE>
<BODY><H2>Wild Animals</H2><UL>
<LI>Lion<LI>Tiger<LI>Leopard<LI>Wolf
</UL></BODY>
</HTML>
Building Dynamic Websites/Session 1/ 9 of 22
![Page 10: 03. session 03 using lists and tables](https://reader033.fdocuments.us/reader033/viewer/2022052600/557e8c7ed8b42acf658b52b6/html5/thumbnails/10.jpg)
Unordered Lists
Building Dynamic Websites/Session 1/ 10 of 22
![Page 11: 03. session 03 using lists and tables](https://reader033.fdocuments.us/reader033/viewer/2022052600/557e8c7ed8b42acf658b52b6/html5/thumbnails/11.jpg)
List-style-type
Building Dynamic Websites/Session 1/ 11 of 22
<OL STYLE="list-style-type:property’s value">
![Page 12: 03. session 03 using lists and tables](https://reader033.fdocuments.us/reader033/viewer/2022052600/557e8c7ed8b42acf658b52b6/html5/thumbnails/12.jpg)
Nested Unordered lists
Building Dynamic Websites/Session 1/ 12 of 22
![Page 13: 03. session 03 using lists and tables](https://reader033.fdocuments.us/reader033/viewer/2022052600/557e8c7ed8b42acf658b52b6/html5/thumbnails/13.jpg)
Definition lists DL DT DD
Building Dynamic Websites/Session 1/ 13 of 22
![Page 14: 03. session 03 using lists and tables](https://reader033.fdocuments.us/reader033/viewer/2022052600/557e8c7ed8b42acf658b52b6/html5/thumbnails/14.jpg)
Unordered Lists<HTML>
<HEAD><TITLE>Learning HTML</TITLE>
<BODY> <H2>Types of noun</H2> <DL> <DT>Common noun
<DD>It is a name of an Objectin general such as pencel, penpaper and so on
<DT>Proper noun <DD>It is a unique name of a person
or a place</DL>
</BODY></HTML>
Building Dynamic Websites/Session 1/ 14 of 22
![Page 15: 03. session 03 using lists and tables](https://reader033.fdocuments.us/reader033/viewer/2022052600/557e8c7ed8b42acf658b52b6/html5/thumbnails/15.jpg)
Tables A table is made up of rows and columns. The intersection of each row and
column is a cell.
Building Dynamic Websites/Session 1/ 15 of 22
![Page 16: 03. session 03 using lists and tables](https://reader033.fdocuments.us/reader033/viewer/2022052600/557e8c7ed8b42acf658b52b6/html5/thumbnails/16.jpg)
Columns heading
Building Dynamic Websites/Session 1/ 16 of 22
![Page 17: 03. session 03 using lists and tables](https://reader033.fdocuments.us/reader033/viewer/2022052600/557e8c7ed8b42acf658b52b6/html5/thumbnails/17.jpg)
Caption
Building Dynamic Websites/Session 1/ 17 of 22
![Page 18: 03. session 03 using lists and tables](https://reader033.fdocuments.us/reader033/viewer/2022052600/557e8c7ed8b42acf658b52b6/html5/thumbnails/18.jpg)
Colspan/Rowspan attribute
Building Dynamic Websites/Session 1/ 18 of 22
• These attributes are used to create cells that span more than one column or row.
• The COLSPAN attribute is used with the <TH> tag, while the ROWSPAN attribute is used with the <TD> tag.
![Page 19: 03. session 03 using lists and tables](https://reader033.fdocuments.us/reader033/viewer/2022052600/557e8c7ed8b42acf658b52b6/html5/thumbnails/19.jpg)
Colspan/Rowspan attribute
Building Dynamic Websites/Session 1/ 19 of 22
Rowspan Colspan
![Page 20: 03. session 03 using lists and tables](https://reader033.fdocuments.us/reader033/viewer/2022052600/557e8c7ed8b42acf658b52b6/html5/thumbnails/20.jpg)
Some attribute WIDTH BORDER CELLSPACING CELLPADDING
Building Dynamic Websites/Session 1/ 20 of 22
![Page 21: 03. session 03 using lists and tables](https://reader033.fdocuments.us/reader033/viewer/2022052600/557e8c7ed8b42acf658b52b6/html5/thumbnails/21.jpg)
Horizontal/Vertical alignment
Building Dynamic Websites/Session 1/ 21 of 22
Align = left Align = center Align = right Align = justify
Valign = top Valign = middle Valign = bottom Valign = baseline
<TD ALIGN = right VALIGN = bottom>
Data Cell 1</TD>
![Page 22: 03. session 03 using lists and tables](https://reader033.fdocuments.us/reader033/viewer/2022052600/557e8c7ed8b42acf658b52b6/html5/thumbnails/22.jpg)
Summary A nested list refers to another list
defined inside an item of a list. The THEAD, TFOOT, TBODY elements
allow grouping the rows in a table. COLGROUP element allow grouping the
column in a table. Hyperlinks within a table ca display by
using A element.
Building Dynamic Websites/Session 1/ 22 of 22