1 / 9

Web Site Development HTML Part 2

Web Site Development HTML Part 2. Web Site Development HTML Continued. Topics Lists Tables Images Links. 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

aleron
Télécharger la présentation

Web Site Development HTML Part 2

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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">

More Related