Labels

Powered by Blogger.

Free HTML Software

Free HTML Software
Free HTML Software

Sunday 1 December 2013

HTML - Standard Layout

HTML - Standard Layout

A fairly standard layout consists of a banner near the top, navigation, and your content or display box. These are the backbone to any great website.

HTML Code:

<table cellspacing="1" cellpadding="0" border="0"
 bgcolor="black" id="shell" height="250" width="400">
   <tr height="50">
      <td colspan="2" bgcolor="white">
         <table title="Banner" id="banner" border="0">
            <tr><td>Place a banner here</td></tr>
         </table>
      </td>
   </tr>
   <tr height="200">
      <td bgcolor="white">
         <table id="navigation" title="Navigation" border="0">
            <tr><td>Links!</td></tr>
            <tr><td>Links!</td></tr>
            <tr><td>Links!</td></tr>
         </table>
      </td><td bgcolor="white">
         <table title="Content" id="content" border="0">
            <tr><td>Content goes here</td></tr>
         </table>
      </td>
   </tr>
</table>

Basic Layout:

Content goes here
This approach is basic, yet organized. The code becomes complex rather fast, so you will need to be sure to properly assign height and width values to your tables as well. The more specific you are about heights and widths, the less room there will be for error and debugging.

HTML Code:

<table id="shell" title="Shell" height="250" width="400"
 border="0" bgcolor="black" cellspacing="1" cellpadding="0">
   <tr height="50">
      <td bgcolor="white">
         <table title="banner" id="banner">
            <tr><td>Banner goes here</td></tr>
         </table>
      </td>
   </tr>
   <tr height="25">
      <td bgcolor="white">
         <table title="Navigation" id="navigation">
            <tr><td>Links!</td>
            <td>Links!</td>
            <td>Links!</td></tr>
         </table>
      </td>
   </tr>
   <tr>
      <td bgcolor="white">
         <table title="Content" id="content">
            <tr>
               <td>Content goes here</td>
            </tr>
         </table>
      </td>
   </tr>
</table>

Basic Layout 2:

Content goes here
The code is quite a lot to look at, SO break it up and organize it in your own way to make things easier for you.

0 comments:

Post a Comment