1 / 25

LISTs & TABLEs

Eastern Mediterranean University School of Computing and Technology Department of Information Technology. ITEC229 Client-Side Internet and Web Programming. LISTs & TABLEs. CHAPTER 4. Prepared by: R. Kansoy. Contents. 4.1 Lists 4.1.1 Ordered Lists 4.1.2 Unordered Lists

msylvester
Download Presentation

LISTs & TABLEs

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. Eastern Mediterranean University School of Computing and Technology Department of Information Technology ITEC229 Client-Side Internet and Web Programming LISTs & TABLEs CHAPTER 4 Prepared by: R. Kansoy

  2. Contents 4.1 Lists 4.1.1 Ordered Lists 4.1.2 Unordered Lists 4.1.3 Definition Lists 4.1.4 Nested Lists 4.2 Tables http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  3. 4.1 LISTs • HTML supports 3 types of lists: • Ordered Lists • Unordered Lists • Definition Lists • Nested Lists • Lists may be nested to obtain multiple hierarchy levels http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  4. 4.1 LISTs 4.1.1 Ordered List - <ol> • Lists whose elements must appear in a certain order • Such lists usually have their items prefixed with a number or letter • An ordered list starts with the <ol> tag and finishes with </ol> tag. • Each list item writtin within the <li>... </li> tags. • By default, ordered lists use decimal sequence numbers(1, 2, 3, …) <ol> <li>Apples</li> <li>Bananas</li> <li>Coconuts</li> </ol> • Apples • Bananas • Coconuts http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  5. 4.1 LISTs 4.1.1 Ordered List - <ol> • To change sequence type, use TYPE attribute in <OL> openingtag; • TYPE = “1” (default)– Decimal sequence (1, 2, 3, …) • TYPE = “I”– Uppercase Roman numerals (I, II, III, …) • TYPE = “i”– Lowercase Roman numerals (i, ii, iii, …) • TYPE = “A”– Uppercase alphabetical (A, B, C, …) • TYPE = “a”– Lowercase alphabetical (a, b, c, …) <ol type=“a”> <li>Apples</li> <li>Bananas</li> <li>Coconuts</li> </ol> a. Apples b. Bananas c. Coconuts http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  6. 4.1 LISTs 4.1.2 Unordered List - <ul> • Lists whose elements do not have to appear in a certain order. • An unordered list starts with the <ul> tag and finishes with </ul> tag. • Each list item written within the <li>...</li> tags. • The list items are marked with bullets (typically small black discs). <ul> <li>Apples</li> <li>Bananas</li> <li>Coconuts</li> </ul> • Apples • Bananas • Coconuts http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  7. 4.1 LISTs 4.1.2 Unordered List - <ul> • To change the type of a an unordered list, use TYPE attribute in <OL> openingtag; • TYPE = “disc” (default)– • TYPE = “circle”– • TYPE = “square”– <ultype=”square”> <li>Apples</li> <li>Bananas</li> <li>Coconuts</li> </ul> • Apples • Bananas • Coconuts http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  8. 4.1 LISTs 4.1.3 Definition List - <dl> • A definition list is a list of items, with a description of each item. • More complex than the other 2 lists due to their having 2 elements per list item • <dl> tag defines a definition list. • <dt> defines the item in the list. • <dd> describes the item in the list. http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  9. 4.1 LISTs 4.1.3 Definition List - <dl> <dl> <dt>Internet Explorer</dt> <dd>Developed by Microsoft</dd> <dt>Netscape</dt> <dd>Developed by Netscape</dd> </dl> Internet Explorer Developed by Microsoft Netscape Developed by Netscape http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  10. 4.1 LISTs 4.1.4 Nested Lists • Contained in another list element • Lists can be nested of the same or different types • Nesting the new list inside the original; • Indents list one level and changes the bullet type to • reflect theNesting • Send us a letter, including: • Your full name • Your order number • You contact information • Use the web form to send an email <ul> <li>Send us a letter, including:</li> <ol> <li>Your full name</li> <li>Your order number</li> <li>Your contact information</li> </ol> <li> Use the web form to send an email</li> </ul> http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  11. 4.2 TABLEs • Tables are used when you need to show "tabular data" i.e. information that is logically presented in rows and columns. • Building tables in HTML may at first seem complicated but if you keep cool and watch your step, it is actually strictly logical - just like everything else in HTML. • All tags and text that apply to the table go inside <TABLE>…</TABLE>tags • TABLE Attributes; • BORDER: lets you set the width of the table’s borderinpixels • ALIGN: specifies the horizontal alignment of the content in the entire table, in a row or in a single cell. For example, left, center or right. • WIDTH:pixels (absolute) or a percentage • VALIGN:specifies the vertical alignment of the content in a cell. For example, top, middle or bottom. http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  12. 4.2 TABLEs • CAPTION element is inserted directly above the tablein thebrowser window • Helps text-based browsers interpret table data • TABLE Elements • THEAD element • Header info • For example, titles of table and column headers • TBODYelement • Used for formatting and grouping purposes http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  13. 4.2 TABLEs • A table is divided into rows • Each row is divided into data cells • <TR>…</TR> • stands for "table row" • starts and ends horizontal rows. • <TH>…</TH> • suitable for titles andcolumn headings • used in the header part of a table. • all major browsers will display the text in the <th> element as bold and centered. http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  14. 4.2 TABLEs • <TD>...</TD> • stands for "table data". • starts and ends each cell in the rows of thetable. • holds the content of a data cell. • used in the bodypart of a table. • alignedleft by default. • a<td> tag can contain • text, • links, • images, • lists, • forms, • other tables, etc. http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  15. 4.2 TABLEs • Possible to make some data cells larger than others • Cells can be merged with therowspanandcolspan attributes • The values of these attributes specify the number of rows or columns occupied by the cell • Can be placed inside any data cell or table header cell • Modified cells will cover the areas of other cells • Reduces number of cells in that row or column http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  16. 4.2 TABLEs <html> <body> <h4>HorizontalHeaders:</h4> <table border="1"> <tr> <th>Name</th> <th>Telephone</th> <th>Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> </body> </html> Horizontal Headers: http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  17. 4.2 TABLEs <html> <body> <h4>Vertical Headers:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th>Telephone:</th> <td>555 77 854</td> </tr> <tr> <th>Telephone:</th> <td>555 77 855</td> </tr> </table> </body> </html> VerticalHeaders: http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  18. 4.2 TABLEs <table border="1"> <caption> TABLE 1 </caption><THEAD> <tr><th>Header 1</th><th>Header 2</th></tr> </THEAD> <TBODY><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> </TBODY></table> TABLE 1 http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  19. 4.2 TABLEs <html> <body> <h4>Cell that spans two columns:</h4> <table border="1"> <tr><th>Name</th> <thcolspan="2">Telephone</th></tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>Cell that spans two rows:</h4> <table border="1"> <tr><th>First Name:</th><td>Bill Gates</td></tr> <tr><throwspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr><td>555 77 855</td></tr> </table> </body> </html> Cell that spans two columns: Cell that spans two rows: http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  20. 4.2 TABLEs • COLGROUP element • Used to group and format columns • Each COL element • In the <COLGROUP>…</COLGROUP> tag • Can format any number of columns (specified by theSPAN attribute) • Background color or image • Add to any row or cell • Use BGCOLOR and BACKGROUND attributes http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  21. 4.2 TABLEs http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  22. 4.2 TABLEs http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  23. 4.2 TABLEs http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  24. 4.2 TABLEs http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229

  25. Thank You ! LISTs & TABLEs http://staff.emu.edu.tr/raygankansoy/en/teaching/itec229 END of CHAPTER 4

More Related