1 / 11

Website Design - Review

Website Design - Review. Layout using tables. Table exmaple. <table border="1"> < tr > <td rowspan =“2> < img src =“cake.gif” alt=“cake” height=“100” width=“100” /></td> <td>James</td> </ tr > < tr > <td>11/08</td> </ tr > </table >.

wynn
Download Presentation

Website Design - Review

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. Website Design - Review Layout using tables

  2. Table exmaple <table border="1"> <tr> <td rowspan=“2> <imgsrc=“cake.gif” alt=“cake” height=“100” width=“100” /></td> <td>James</td> </tr> <tr> <td>11/08</td> </tr> </table>

  3. Using a Table toFormat a Web Page <table border="0" width="80%"> <tr> <td colspan="3"> <h1>This is the banner area</h1></td> </tr> <tr> <td width="20%" valign="top"> Place Navigation here</td> <td width="10">&nbsp;</td> <td>Page content goes here</td> </tr> </table>

  4. Additional Table Layouts Try create these examples

  5. Website with Layout – Using Tables <html> <head> <title></title> </head> <body> </body> </html> <table> <tr> </tr> <tr> <td> </td> <td> </td> </tr> <tr> </tr> </table>

  6. Website with Layout – Using Tables <html> <head> <title>WebPage in Layout</title> </head> <body> </body> </html>

  7. Website with Layout – Using Tables <body> <table width="1000" border="0"> <tr> <td colspan="2" style="background-color:#FFA500;" height:100px; valign="middle"> <imgsrc="logo.png" width="100" height="100" alt="Logo Here" style="float: left;" /> <h1> (Write your heading here) </h1> </td> </tr> </table> </body>

  8. Website with Layout – Using Tables <trvalign="top"> <td style="background-color:#FFD700; width:100px;text-align:top;"> <b>Main Menu</b> <br> <a href="page1.html"> Page with image </a> <br> <a href="page2.html"> Information </a> <br> <a href="page3.html"> Others </a> </td> <td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;"> Content goes here<br> This is our BODY of this webpage we can use to write the information we want. Or to show other information like images.<br> <hr> this is example for a link to go to <a href="http://www.youtube.com"> Youtube </a> </td> </tr>

  9. Website with Layout – Using Tables <td style="background-color:#FFD700; width:100px;text-align:top;"> <b>Main Menu</b> <br> <a href="page1.html"> Page with image </a> <br> <a href="page2.html"> Information </a> <br> <a href="page3.html"> Others </a> </td>

  10. Website with Layout – Using Tables <td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;"> Content goes here<br> This is our BODY of this webpage we can use to write the information we want. Or to show other information like images.<br> <hr> this is example for a link to go to <a href="http://www.youtube.com"> Youtube </a> </td>

  11. Website with Layout – Using Tables <tr> <td colspan="2" style="backgroundcolor:#FFA500;text-align:center;"> This Webpage is made by YourName. (2013) </td> </tr>

More Related