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

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

Review HTML Document structure Tags Block level Lists

Outline HTML Document structure Tables

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?

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"> 864086 < /FONT > Show me

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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="http://people.hsc.edu/faculty-staff/phemler/">Hemler Home Page</A></P> <P>Send comments to <A HREF="mailto:phemler@hsc.edu">Paul F. Hemler</A></P>

Good Web Pages http://www.coolhomepages.com/ Highly ranked Flash http://www.deepblue.com/ http://www.robrady.com/ http://www.orangedrone.com/ Non flash http://www.simplicityhosting.net/ http://www.bonniecarberry.com/bluecheese/ http://www.saunalahtigroup.com/