1. Web Site DevelopmentHTML Part 2

2. Web Site Development HTML Continued Topics • Lists • Tables • Images • Links

3. Lists • There are two basic list types: • Unordered : bulleted • Ordered : sequenced by a number of letter • Lists can be nested to whatever level is required • Unordered list Delimiters : <ul type=“disc or circle or square”> </ul> List elements : <li> text </li> Example: <ul> <li> Mocking Bird</li> <li> Tennessee Walker</li> <li> Racoon </li> </ul>

4. Lists Cont’d • Order list • Delimiters : <ol type=“A” = upper case alphabetic, or a = lower case alphabetic, or I = upper case roman numeric, or i = lower case roman numeric, or 1 = numeric start=“n” starting sequence number Example: <ol type=“A”> <li> Mocking Bird</li> <li> Tennessee Walker</li> <li> Racoon </li> </ol>

5. Lists Cont’d • Nested Lists <html> <title> Tables </title> <body> <ul> <li> Birds</li> <ol> <li> Mocking Bird </li> <li> Cardinal </li> <li> Dove </li> </ol> <li> Horses</li> <ol> <li> Tennessee Walker </li> <li> Percheron </li> <li> Clydesdale </li> </ol> </ul> </body> </hmtl>

6. Tables • Simple and complex tables can be included in web pages • The major tags used in web page tables are: <table> and </table> : table declaration delimiter <tr> and </tr> : row declaration and delimiter <td> and </td> : table data contents declaration and delimiter <th> and </th> : table data header declaration and delimiter • The text in a th element is bold and centered while the text in a td element is regular and left aligned • Parameters details are covered in the reference document that has been provided • <table> • <tr> • <th> Name </th> • <th> Department </th> • </tr> • <tr> • <td> Lightning </td> • <td> Athletic </td> • </table>

7. Table Example <table border="2" bordercolor="red" bgcolor=“white" cellpadding="2"> <tr> <b> <th>Name</th> <th>Role</th> <thcolspan="2"> Contact Information</td> </tr></b> <tr> <td>Blue Cheeze</td> <td>CEO and President</td> <td>415-555-1234</td> <td>bcheeze@bluzmail.com</td> </tr> <tr> <td>Billie Blue</td> <td>VP of Creative Services</td> <td>415-555-1234</td> <td>bblue@bluzmail.com</td> </tr> <tr> <td>John Turpentine</td> <td>VP of New Talent Development</td> <td>415-555-1234</td> <td>jturpentine@bluzmail.com</td> </tr> </table> </font>

8. Web Site Links • Web site links can include: • Intra-page • Inter-page • External sites <a href=“document location”> descriptive text </a> Examples: <a href=“ http://mtsu.edu”> Welcome to MTSU </a> <a href’=“aboutus.html”> About Us </a>

9. Embedding Images • There are several image formats that can be embedded in web sites with .jpg, .bmp and .gif being the most common types <imgsrc=”path and filename” border=”n” height=”h” width=”w”> • height and width can be in percent (of original size) or in pixels • You can scale an image by using either the height or width or both • If you use both height and width you probably want to maintain the original aspect ratio • Since source image sizes vary, you most likely will need to try the scaling and adjust until you get the desired results <imgsrc="mockingbird.jpg" border="3"> <imgsrc="mockingbird.jpg" border="3" height="50" width="100">