CSCE 102 General Application Programming Section 10,11,12

1
CSCE 102 General Application ProgrammingSection
10,11,12

• Instructor Jin
  Jin
• jinj_at_cse.sc.edu
• 
  9/14/069/19/06

2
Horizontal Rules

• lthr /gt--empty tags
• Empty tags weve learned so far?
• ltbr /gt, ltimg /gt, lthr /gt
• Use CSS for horizontal rules
• e.g. ltstyle typetext/cssgt
• hr height7px width75
  background-colorred
• lt/stylegt
• Go to Appendix B for a list of HTML and XHTML
  elements
• XHTML Tags Reference
• http//www.w3schools.com/tags/default.asp

3
Ordered and Unordered Lists

• Ordered Lists item listed by number or letter
• ltolgt
• ltligt Item1lt/ligt
• ltligt item2lt/ligt
• ..
• lt/olgt
• Unordered Lists item listed by a solid disc,
  open circle or solid square
• ltulgt
• ltligt Item1 lt/ligt
• ltligt Item2 lt/ligt
• .
• lt/ulgt
• Several Things to Pay Attention To
• Put the items inside the ltligt lt/ligt elements
• Both ltolgt and ltulgt are block-level elements
• The browser automatically insert a blank line
  before and after each list indent each lists
  slightly
• Ending tags are required in XHTML

4
Nested Lists

• Nest Lists in order to display a hierarchy.
• Example nested lists for unordered lists
• When you nest unordered lists, the top level uses
  solid dics to mark each item, the second level
  uses open circles and the third level uses solid
  squares.
• When you nest ordered lists, all the levels use
  numbers to mark each item.
• Example nested lists for ordered lists
• Example combining ordered and unordered lists

5
CSS for Lists

• How to define?
• ltstyle typetext/cssgt
• ul list-stylesquare
• lt/stylegt
• Values for list-style property of an unordered
  list are square, disc and circle
• Values for list-style property of an ordered list
  are decimal, upper-alpha, lower-alpha,
  upper-roman and lower-roman
• More list-styleurl(imageName.gif)

6
Create Tables

• lttablegt lt/tablegt--define tables
• lttrgt lt/trgt--define table rows
• lttdgt lt/tdgt--defines each cell within the row
• Example
• Table border options
• lttable bordergt or lttable border4gt
• See example here
• Table headers and captions
• ltthgt lt/thgt--for table header
• See example here

7
Create Tables Contd

• Aligning Text in Table Cells
• lttd aligncentergt lt/tdgt
• lttd valigntopgt lt/tdgt
• We dont recommend to use align or valign in lttrgt
• The default value for align is left and other
  values are right and center. The default
  value for valign is middle and other values are
  bottom and top.
• lttable cellpadding3gt lt/tablegt
• lttable cellspacing5gt lt/tablegt
• Example

8
Create Tables Contd

• Widening Cells
• Properties width, colspan, rowspan
• Example

9
Forgot one thing

• Comments in CSS
• Comments can be written anywhere in CSS where
  whitespace is allowed and are treated as white
  space themselves. Anything written between / and
  / is treated as a comment (white space).
• / CSS comments /