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.

Example:

• <table cellspacing=”1″ cellpadding=”0″ border=”0″
• bgcolor=”black” height=”250″ width=”400″>
• <tr height=”50″><td colspan=”2″ bgcolor=”white”>
• <table title=”Banner” border=”0″>
• <tr><td>Place a banner here</td></tr>
• </table>
• </td></tr>
• <tr height=”200″><td bgcolor=”white”>
• <table 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” border=”0″>
• <tr><td>Content goes here</td></tr>
• </table>
• </td></tr></table>

Basic Layout:

This approach is basic yet organized. Often times websites become too complex for the viewer to follow. The code becomes complex rather fast, 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 debugging you will have to perform.

Example:

• <table 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:

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

<!– Comments –>

A comment is a way for you to put some extra details and still hide them from the viewer.

For example if the web page developer want to control what lines of code are to be ignored by the web browser, and what should be shown to the user.

There are three main reasons you may want your code to be ignored.

·           Writing notes or reminders to yourself inside your actual HTML documents.

·           Scripting languages such as Javascript require some commenting. to identify which line is for what purpose.

·           Temporarily commenting out elements especially if the element has been left unfinished.

Use the last example place text inside your code and documents that the web browser will ignore. This is a great way to place little notes to yourself or to remind yourself what pieces of code are doing what.

A coment tag has an opening and closing tag between which goes the content which is to be commented.

·           <!– Opening Comment

·           – > Closing Comment

Example:

<!–Note to self: This is my banner image! Don’t forget –>

<img src=”http://www.tizag.com/pics/tizagSugar.jpg” height=”100″ width=”200″ />

Placing notes and reminders to yourself is a great way to remember your thoughts and to keep track elements embedded in your webpages. Also, your code may exist for many years, these notes to yourself are a great way to remember what was going on as you may not remember 5 or more years down the road.

All combinations of text placed within the comment tags will be ignored by the web browser, this includes any HTML tags, scripting language(s), etc.

<!– Commenting Existing Code –>

As a web developer often times you may have many works in progress, or elements that aren’t quite finished. In this case you may comment out an element until it is 100% ready for the site. Below we have commented out an input form element since we are not quite ready to receive input from our users.

Example:

<!– <input size=”12″ /> — Input Field –>

Now when we are ready to display that element, we can simply remove the comment tags and our browser will readily display the element.

Scripting languages such as Javascript and VBScript must be commented out as well. You will learn that once they are placed within the <script> tags, only then does the browser correctly execute the scripts.

Example:

<script>

<!–

document.write(“Hello World!”)

//–>

</script>

---

[Translate]