HTML— More Tags, Formatting, and Lists

Formatting Tags  Bold  Italics  Underline  Big text  Small text  Subscript (H 2 O)  Superscript (10 3 )

Character Entities  Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag  If we want the browser to actually display these characters we must insert character entities in the HTML source  Example: &lt = <  Open “Character Codes Chart” in the Reference folder on the student server

Lists  Unordered List ( )  Bulleted (no numbers)  Ordered List ( )  Numbered list  Create a new html document (use template).  Save it as “food.html”  Make the title of the page be “My Favorite Food” (should appear in the title bar and as a heading for the document)

 Change the background color to something other than default  Put a horizontal rule after the heading & make it thicker and the same color as your font  Change the font color to something other than default Changes on your Document

Unordered Lists  Unordered List  li defines a list item    Tamales  Tamales  Lasagna  Lasagna  Pumpkin Pie  Pumpkin Pie    Use the formatting tags from prior slide to change the appearance of the text  bold, italics, underline, big, small

Ordered List  Change the to  Change the to  Save and refresh

Tables  Evenly Space Data  Evenly Space Data  Display images in a specific part of a screen  Display images in a specific part of a screen  Organize information on a page

Tables  Each table starts with a tag  Each table row starts with a tag  Each cell (table data) starts with a tag  The letters td stands for "table data," which is the content of a data cell  A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

Tables  Create a new html document (use template)  Save it as “table.html”  Try it: One column: One column: <tr> </tr></table> One row and three columns: One row and three columns: <tr> </tr></table>  Save it and view it in your browser Be sure that the correct title appears in the title bar.

Tables  Now add the 3 rd table Two rows and three columns: Two rows and three columns: <tr> </tr><tr> </tr></table>

Table Attributes – You Try  The size and color of border  or or  or or    Headings in a Table  Instead of, use for the row of headings in your table  Cell Padding - sets the amount of space between the contents of the cell and the cell wall    Cell Spacing - controls the space between table cells    Background color of a table    Background color of a table cell    Alignment    Width  or  or

Tables  Create a new html document (use template).  Save it as “data.html”  Make the title of the page be “Contact Information” (should appear in the title bar and as a heading for the document)

 Change the background color to something other than default  Put a horizontal rule after the heading & make it thicker and the same color as your font  Change the font color to something other than default Changes on your Document

Make your Table Names Phone numbers Janalee Goodrich Melanie Brunson Remember that: Each table starts with a tag Each table row starts with a tag Each table data starts with a tag Don’t forget to put in a border attribute Empty cell = -- No border.

Assignment  Make the width of the columns =“160”  Make the borders of the table = “8”  Change to “15”  Change the background color of your header  Change the background color of the rest of the cells to a different color (inside of key bgcolor=“”)  Change the bordercolor ( )