HTML More Tags Formatting and Lists Formatting Tags

  • Slides: 16
Download presentation
HTML— More Tags, Formatting, and Lists

HTML— More Tags, Formatting, and Lists

Formatting Tags § § § § <b> Bold <i> Italics <u> Underline <big> Big

Formatting Tags § § § § <b> Bold <i> Italics <u> Underline <big> Big text <small> Small text <sub> Subscript (H 2 O) <sup> Superscript (103)

Character Entities § Some characters have a special meaning in HTML, like the less

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 (<ul>) § Bulleted (no numbers) § Ordered List (<ol>) §

Lists § Unordered List (<ul>) § Bulleted (no numbers) § Ordered List (<ol>) § 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)

Changes on your Document § Change the background color to something other than default

Changes on your 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

Unordered Lists § Unordered List § li defines a list item § § §

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

Ordered List § Change the <ul> to <ol> § Save and refresh

Ordered List § Change the <ul> to <ol> § Save and refresh

Tables § Evenly Space Data § Display images in a specific part of a

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

Tables § Each table starts with a <table> tag § Each table row starts

Tables § Each table starts with a <table> tag § Each table row starts with a <tr> tag § Each cell (table data) starts with a <td> 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.

Tables § Create a new html document (use template) § Save it as “table. html” § Try it: <h 4>One column: </h 4> <table border="1"> <tr> <td>100</td> </tr> </table> <h 4>One row and three columns: </h 4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </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 <h 4>Two rows and three columns:

Tables § Now add the 3 rd table <h 4>Two rows and three columns: </h 4> <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>

Table Attributes – You Try § The size and color of border § <table

Table Attributes – You Try § The size and color of border § <table border=“ 1”> or <table border=“ 8”> or <table border=“ 15”> § <table bordercolor=“red”> § Headings in a Table § Instead of <td></td>, use <th></th> 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 § <table border="1" cellpadding=“ 10”> § Cell Spacing - controls the space between table cells § <table border="1" cellspacing=“ 10”> § Background color of a table § <table border="1" bgcolor="red"> § Background color of a table cell § <td bgcolor=“lime”> § Alignment § <td Align=“right”>

Tables § Create a new html document (use template). § Save it as “data.

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)

Changes on your Document § Change the background color to something other than default

Changes on your 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

Make your Table Names Phone numbers E-mail Janalee Goodrich 738 -1346 jgoodrich@dcsd. org Melanie

Make your Table Names Phone numbers E-mail Janalee Goodrich 738 -1346 jgoodrich@dcsd. org Melanie Brunson 738 -1352 mbrunson@dcsd. org Remember that: Each table starts with a <table> tag Each table row starts with a <tr> tag Each table data starts with a <td> tag Don’t forget to put in a border attribute Empty cell = <td></td> -- No border.

Assignment § Make the width of the columns =“ 160” § Make the borders

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 <tr> key bgcolor=“”) § Change the bordercolor (<inside of table>)