1 / 35

CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)

CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3). HTML Code. Browser Display. <UL> <LI> SimCity </LI> <LI> Quake </LI> <LI> Bridge </LI> </UL>. SimCity Quake Bridge. The default “bullet” for these lists is a “ disc ”

lew
Download Presentation

CS101 Introduction to Computing Lecture HTML Lists and Tables (Web Development Lecture 3)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CS101 Introduction to ComputingLectureHTML Lists and Tables(Web Development Lecture 3)

  2. HTML Code Browser Display <UL> <LI>SimCity</LI> <LI>Quake</LI> <LI>Bridge</LI> </UL> • SimCity • Quake • Bridge

  3. The default “bullet” for these lists is a “disc” That, however, can be changed to a “circle” or a “square” with the help of the type attribute

  4. HTML Code Browser Display <UL type = “circle”> <LI>SimCity</LI> <LI>Quake</LI> <LI>Bridge</LI> </UL> • SimCity • Quake • Bridge

  5. type = “square”

  6. Q: What happens if I start a new list without closing the original one? <UL> <LI>SimCity</LI> <LI>Quake II</LI> <UL> <LI>SimCity 3000</LI> <LI>Quake III</LI> </UL> <LI>Bridge</LI> </UL>

  7. Browser Display • Different bullets • Additional tab • SimCity • Quake II • SimCity 3000 • Quake III • Bridge

  8. Such structures, i.e., those in which a new one starts before the first list is finished, are called Nested Lists

  9. Types of Lists In addition to un-ordered lists, HTML supports two other types • Ordered Lists • Definition List

  10. Ordered List Browser Display OL instead of UL <OL> <LI>SimCity</LI> <LI>Quake</LI> <LI>Bridge</LI> </OL> • SimCity • Quake • Bridge Numbers instead of discs, circles or squares

  11. Ordered List Browser Display <OL type = “a”> <LI>SimCity</LI> <LI>Quake</LI> <LI>Bridge</LI> </OL> • SimCity • Quake • Bridge

  12. Ordered List Types

  13. Q: How would one start an ordered list with a number other than 1 Browser Display • SimCity • Quake • Bridge

  14. Ordered List Browser Display <OL start = “25”> <LI>SimCity</LI> <LI>Quake</LI> <LI>Bridge</LI> </OL> • SimCity • Quake • Bridge

  15. Browser Display Definition List • SimCity • A great simulation game in which one build cities • Quake • One of the best of the shoot-em-up genre Term <DL> <DT>SimCity</DT> <DD>A great simulation game in which one build cities </DD> <DT>Quake</DT> <DD> One of the best of the shoot-em-up genre </DD> </DL> Definition

  16. Ordered lists as well as definition lists can be nested just like the un-ordered lists • Can any type of list be nested into any other type?

  17. Lists are one way of presenting data in a an ordered or formal fashion • Tables provide another - more customizable - way of displaying ordered information on Web pages

  18. Browser Display

  19. Browser Display HTML Code <TABLE border = "1" > <TR> <TH>Indoor</TH> <TH>Outdoor</TH> </TR> <TR> <TD>Squash</TD> <TD>Cricket</TD> </TR> </TABLE>

  20. <TABLE> Attributes • BORDER • Determines the thickness of the table border • Example: <TABLE BORDER = “2”> • CELLPADING • Determines the distance between the border of a cell and the contents of the cell • Example: <TABLE CELLPADDING = “3”> • CELLSPACING • Determines the empty spacing between the borders of two adjacent cells • Example: <TABLE CELLSPACING = “1”>

  21. Browser Display HTML Code <TABLE border = "1" > <TR> <TH>Indoor</TH> <TH>Outdoor</TH> </TR> <TR> <TD>Squash</TD> <TD>Cricket</TD> </TR> </TABLE>

  22. Browser Display HTML Code <TABLE> <TR> <TH>Indoor</TH> <TH>Outdoor</TH> </TR> <TR> <TD>Squash</TD> <TD>Cricket</TD> </TR> </TABLE>

  23. <TABLE>,<TR>,<TH>,<TD> Attributes • ALIGN • Possible values: Center, Left, Right • Example: <TH ALIGN = “center”> • BGCOLOR • Example: <TD BGCOLOR = “red”> • WIDTH • Example: <TR WIDTH = “40%”> • HEIGHT • Example: <TABLE HEIGHT = “200”> 40% of the window width

  24. <TR> Attributes • VLAIGN • Determines the vertical alignment of the contents of all of the cells in a particular row • Possible values: Top, Middle, Bottom • Example: <TR VALIGN = “bottom”>

  25. <TH> & <TD> Attributes • NOWRAP • Extend the width of a cell, if necessary, to fit the contents of the cell in a single line • Example: <TD NOWRAP> • COLSPAN • No. of rows the current cell should extend itself downward • Example: <TD COLSPAN = “2”> • ROWSPAN • The number of columns the current cell should extend itself • Example: <TD ROWSPAN = “5”> • VALIGN • Same as that for <TR>

  26. Browser Display HTML Code <TABLE border=“1” > <TR> <TH colspan=“2”> IndoorOutdoor </TH> </TR> <TR> <TD>Squash</TD> <TD>Cricket</TD> </TR> </TABLE>

  27. HTML Code Browser Display <TABLE border = "1" > <CAPTION> My favorite sports </CAPTION> <TR> <TD>Squash</TD> <TD>Cricket</TD> </TR> </TABLE> My favorite sports Caption must be placed immediately after the<TABLE> tag

  28. End of HTML tag review

  29. What have we learned today? • We now know how Web pages are built using HTML • We also know how to make our personal Web pages available to everyone on the Internet

  30. Useful URL’s HTML for the Conceptually Challenged http://www.arachnoid.com/lutusp/html_tutor.html NCSA’s Beginner's Guide to HTML http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html

  31. Useful URL The Table Sampler http://www.netscape.com/assist/net_sites/table_sample.html

More Related