Warning: include() [function.include]: URL file-access is disabled in the server configuration in /home/rendezv/public_html/tutorials/html-tutorial03.php on line 1

Warning: include(http://rendezv0us.org/header.inc) [function.include]: failed to open stream: no suitable wrapper could be found in /home/rendezv/public_html/tutorials/html-tutorial03.php on line 1

Warning: include() [function.include]: Failed opening 'http://rendezv0us.org/header.inc' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/rendezv/public_html/tutorials/html-tutorial03.php on line 1

Coding A Website With Div Layers

NOTE: If you have spliced and/or image mapped an image in Image Ready when you saved it would have saved as a html document and the spliced images into a folder called images, you can open this html file and edit it to add the title, CSS, and div layers and any other text/features as most of the other coding has been provided.

Step 1: Start the html and create the head and title tags by typing:

Where between the title tags type in the title of the website, an example being:

<HTML>
<HEAD>
<TITLE> RENDEZV0US.org | Version 16 Feat. Justin Theroux </TITLE>

The title will appear at the top of the window, like so:

Step 2: Now its time to do the CSS for the site. Type in:

Where is says COLOR replace it with the colour code you would like there, where it says FONT type in the name of the font you want, you may also change any other values as you please. NOTE that the </head> ends the head tags.

If you are not using an colour for the background and an image use:

{background: url('BACKGROUND URL'); Instead of background-color:#COLOR;

So far my coding looks like this:

<HTML>
<HEAD>
<TITLE> RENDEZV0US.org | Version 16 Feat. Justin Theroux </TITLE>
<style type="text/css"> </style>
</head>

Step 3: It is now time to begin the body codes by typing:

Step 4: Insert your banner. You will not need to insert a banner if Image Ready has already provided you with the coding. To insert you banner type the following code then unsert the URL of your image between the "'s.

Step 5: Creat you div layers by typing:

<div id= NAME style="position:absolute; top:##px; left:##px; width:##px; height:##px; overflow:CHOICE" > ALL YOU TEXT AND CONTENT HERE </div>

Where it says NAME replace it with the name of the div layer (eg: content or sidebar), where it says ## replace it with you values to where you want your div layers to go, top and left refer to how far for the top/left it will appear, and width and height if how wide and high the div layer will be. Where it says overflow and choice, put you choice in, no will make the div layer expand when it needs room and auto will make a scroll when it is to big.
Do the same as above for each layer, for example one for you side bar, and one for your content.

Step 6: End your BODY and HTML tags by typing:

</HEAD>
</HTML>

My finished product is this:
<HTML> <HEAD> <TITLE> RENDEZV0US.org | Version 16 Feat. Justin Theroux </TITLE> <style type="text/css"> </style> </head> <body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">  <table id="Top" width="760" height="420" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="images/sauve_01.gif" width="760" height="105" alt=""></td> </tr> <tr> <td> <img src="images/sauve_02.gif" width="760" height="105" alt=""></td> </tr> <tr> <td> <img src="images/sauve_03.gif" width="760" height="105" border="0" alt="" usemap="#sauve_03_Map"></td> </tr> <tr> <td> <img src="images/sauve_04.gif" width="760" height="105" alt=""></td> </tr> </table> <map name="sauve_03_Map"> <area shape="rect" alt="X links" coords="6,73,58,84" href="/links.php"> <area shape="rect" alt="X hosting" coords="97,63,164,72" href="/hosting.php"> <area shape="rect" alt="X hosting" coords="22,63,97,72" href="/domain.php"> <area shape="rect" alt="X tutorials" coords="65,50,149,62" href="/tutorials/tutorials.php"> <area shape="rect" alt="X art" coords="22,52,63,62" href="/art.php"> <area shape="rect" alt="X home" coords="6,46,22,64" href="/index.php"> </map>  <div id= SIDEBAR style="position:absolute; top:295px; left:15px; width:155px; height:352px; overflow:no"> <font color="#FFFFFF" face="veranda"><center> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </center> </font> </div> <div id= CONTENT style="position:absolute; top:255px; left:178px; width:522px; height:105px; overflow:no"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </div> </body> </html>

Warning: include() [function.include]: URL file-access is disabled in the server configuration in /home/rendezv/public_html/tutorials/html-tutorial03.php on line 218

Warning: include(http://rendezv0us.org/footer.inc) [function.include]: failed to open stream: no suitable wrapper could be found in /home/rendezv/public_html/tutorials/html-tutorial03.php on line 218

Warning: include() [function.include]: Failed opening 'http://rendezv0us.org/footer.inc' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/rendezv/public_html/tutorials/html-tutorial03.php on line 218