1. COMS 161 Introduction to Computing
Title: HTML
Date: March 21, 2005
Lecture Number: 26

2. Announcements
Homework 7
Due 2/25/2005
Test 3/23/05
Wednesday

3. Review
HTML
Document structure
Tags
Block level
Lists

4. Outline
HTML
Document structure
Tables

5. Fonts
The FONT tag lets you control the size and color of text using "SIZE" and "COLOR" attributes
The size attribute can be absolute or relative:
< FONT SIZE=1 > Tiny < /FONT > ==> Tiny
< FONT SIZE="+1" > Not tiny < /FONT > ==> Not tiny
< FONT SIZE="-7" > Tiny < /FONT > ==> Tiny
The color attribute uses hexadecimal codes or color names:
< FONT COLOR="FF0000" > Red < /FONT > ==> Red
< FONT COLOR="TEAL" > Blue? < /FONT > ==> Blue?

6. Colors Good webpage Here are some example colors
< FONT COLOR="Black" > Black < /FONT > ==> Black
< FONT COLOR="Silver" > Silver < /FONT > ==> Silver
< FONT COLOR="Gray" > Gray < /FONT > ==> Gray
< FONT COLOR="White" > White < /FONT > ==> White
< FONT COLOR="Maroon" > Maroon < /FONT > ==> Maroon
< FONT COLOR ="#864086"> < /FONT >
Show me

7. Tables
Tables are formed using < TABLE > and < /TABLE > tags
The contents of a <TABLE> should be a group of rows specified using the < TR > tags
The contents of a row should be a group of table data cells enclosed in < TD > elements

8. Tables Show Me <TABLE> <TR> <TD>Tag</TD>
<TD>Type</TD>
</TR>
<TD>TITLE</TD>
<TD>Head</TD>
<TD>P</TD>
<TD>Block</TD>
</TABLE>
Row 1
Row 2
Row 3
Show Me

9. Borders and Headers
Use < TH > rather than < TD > when a table element is really a header
The border attribute can be used to specify the thickness of a border drawn around the table cells

10. Borders and Headers Show Me <TABLE BORDER=3> <TR>
<TH>Tag</TH>
<TH>Type</TH>
</TR>
<TD>TITLE</TD>
<TD>Head</TD>
<TD>P</TD>
<TD>Block</TD>
</TABLE>
Show Me

11. Cell Spacing The cellspacing attribute
Used to specify the amount of space between adjacent table cells

12. Cell Spacing Show Me <TABLE BORDER=3 CELLSPACING=5> <TR>
<TH>Tag</TH>
<TH>Type</TH>
</TR>
<TD>TITLE</TD>
<TD>Head</TD>
<TD>P</TD>
<TD>Block</TD>
</TABLE>
Show Me

13. Cell Padding The cellpadding attribute
Used to control the amount of space between a cell's border and its contents

14. Cell Padding Show Me <TABLE BORDER=3 CELLPADDING=5> <TR>
<TH>Tag</TH>
<TH>Type</TH>
</TR>
<TD>TITLE</TD>
<TD>Head</TD>
<TD>P</TD>
<TD>Block</TD>
</TABLE>
Show Me

15. Irregular Table Cells
The rowspan attribute can be used to specify that a single cell spans several rows.
The colspan attribute can be used to specify that a single cell spans several columns.
rowspan and colspan can be used with <TD> and <TH> tags

16. Irregular Table Cells Show Me <TABLE BORDER=3> <TR>
<TH>Tag</TH>
<TH>Type</TH>
</TR>
<TD>H1</TD>
<TD ROWSPAN=2>BLOCK </TD>
<TD>P</TD>
</TABLE>
Show Me

17. Cell Alignment
The align attribute specifies an alignment of "left", "center" or "right" for a table cell.
The valign attribute specifies an alignment of "top", "middle" or "bottom" for a table cell.
They can be used with <TD>, <TH>, and <TR> tags

18. Cell Alignment Show Me <TABLE BORDER=3 CELLPADDING=5>
<TR valign="bottom" >
<TH>Tag</TH>
<TH>Type</TH>
</TR>
<TR align="right" >
<TD>TITLE</TD>
<TD>Head</TD>
<TR rowspan=2>
<TD>Block</TD>
</TABLE>
Show Me

19. Table Width and Height Attributes
The width (or height) attribute can be used to specify the suggested width (or height) of a table or table cell
Widths and heights can be specified in pixels
Widths can also be given as percentages
These tags can also be used for page layout

20. Table Width and Height Attributes
<TABLE BORDER=3 HEIGHT=140>
<TR >
<TH>Tag</TH>
<TH WIDTH="50%" >Type</TH>
</TR>
<TR>
<TD>H1</TD>
<TD ROWSPAN=2>BLOCK </TD>
<TD>P</TD>
</TABLE>
Show Me

21. Good Web Practices General Guidelines
Creating a good web site involves using HTML correctly with good organization and style
Limit use of colors
Generally stick to defaults except for background color
Title should be succinct but meaningful
Keep download time under 10 seconds

22. Organizing a Page Put important things at the top Good rule of thumb
Page length between 1 and 10 screens
Use named anchors in long pages

23. Contact Information
Place at the bottom of each page:
Horizontal rule
Link to home page
Contact information - mailto link
HTML looks like
<HR> <P>Return to <A HREF=" Home Page</A></P> <P>Send comments to <A F. Hemler</A></P>

24. Good Web Pages http://www.coolhomepages.com/ Highly ranked Flash
Non flash