Site hosted by Angelfire.com: Build your free website today!
« July 2009 »
S M T W T F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Entries by Topic
All topics  «
Enter Your Title Here
Wednesday, 2 June 2004




Untitled Document












Lesson 2: (The Body) Background Images and Colors
*Objective: After completing this lesson, you will be able to design a webpage using background images and colors.

To keep things a little cleaner I am only going to write what is in the tags. I will omit the , & tags. Needless to say, keep these in your document. <!-- TemplateEndEditable --></td><br> </tr><tr><td colspan="2"><!-- TemplateBeginEditable name="Story" --> <br> <p><BODY> </p><br> <p> </BODY> </p><br> <p>Type something really cool. </p><br> <p> <BODY> </p><br> <p> Something really cool </p><br> <p> </BODY> </p><br> <table cellspacing="0" cellpadding="0"><br> <tr><td valign="top"><p><img src="netbar1.gif" align="center"></p><br clear="all" /><p class="entry"><br><br> Something really cool </p></td><br> </tr></table><p><strong> IMPORTANT NOTE:</strong> Whenever you make a change to your document, just save it, then hit the Refresh/Reload button on your browser. <strong>In many instances just hitting the refresh button doesn't quite do the trick. In that case...</strong><br><br> <br> <strong>Internet Explorer users:</strong> Click <em>Refresh</em> while holding down the <em>CTRL</em> key. <br><br> <strong>Netscape users:</strong> Click <em>Reload</em> while holding down the <em>SHIFT</em> key. </p><br> <p><a name="bgcolor">I think</a> the first thing we are going to learn is how to change background colors. </p><br> <p> <BODY BGCOLOR="#CCFFCC"> </p><p> Something really cool </p><br> <p> </BODY> </p><br> <table cellspacing="0" cellpadding="0"><tr><br> <td valign="top"><p><p align="center"><img src="netbar4.gif" align="center"></p><br clear="all" /><p class="entry"><br><br> Something really cool </p></td></tr></table><br> <p> CCFFCC is computer code for light green. The topic of colors and browsers is rather interesting and is covered in advanced lessons. </p><br> <p><a name="backimage">You</a> can specify a background image instead. (Note: the image should be in the same folder as your HTML file.) </p><br> <p> <BODY BACKGROUND="swirlies.gif"> </p><br> <p> Something really cool </p><br> <p> </BODY> </p><br> <table cellspacing="0" cellpadding="0"><tr><td valign="top"><p<BODY BGCOLOR="#CCFFCC"> ><br><br> <p align="center"><img src="netbar1.gif" align="center"></p><br clear="all" /><p class="entry"></p></td></tr></table><br> <p>In order for the image to show up, the browser has to be able to find it. For now, we want the image to be in the same folder as your HTML document ( page1.html). The easiest way to do this is to right click on the swirl image above and choose <strong>Save Image As</strong> (or some variant thereof). Browse to wherever you put page1.html and save the image there. Later we'll get into this stuff in a little more detail.</p><br> <p>It's probably pretty obvious that the image is tiled. If you use a long skinny image you can get an effect like this... </p><br> <p> <BODY BACKGROUND="bluebar.gif"> </p><p> Something really cool </p><p> </BODY> </p><br> <table cellspacing="0" cellpadding="0"><tr><td valign="top"><p align="center"><img src="netbar1.gif" align="center"><p align="center"></p><br clear="all" /><p class="entry"></p></td></tr></table><br><br> <p>Here's the background image<br><br> <p align="center"><img src="bluebar.gif" align="center"></p><br clear="all" /><p class="entry"><br><br> (It's actually 1700x4, but I have compressed it here to 560x4 so it will fit on everyones screen)> </p><br> <p><strong>FAQ: </strong><em>I've seen pages where the background is fixed and the page just scrolls over it. How can I do that?</em><br><br> <br><br> <strong>A: </strong>Simple... add <strong> BGPROPERTIES=FIXED</strong> to the BODY tag... <br><br> <br><br><BODY BACKGROUND="mybackground.gif" BGPROPERTIES=FIXED><br><br> <br><br> Keep in mind this little doodad is <em>Internet Explorer specific</em>. That is, only people using Internet Explorer or IE based browsers will be able to see it.<a name="fixedback"> </a></p><br> <!-- TemplateEndEditable --></td><br> </tr><br></table><br></body><br></html> <br clear="all" /> <p> <div class="time"> Posted by oz/tutorials at 7:28 PM EDT <br /> <a class="timeLink" href="javascript:add_comment('205187')">Post Comment</a> | <a href="http://www.angelfire.com/oz/tutorials/lesson2c/index.blog/205187/untitled/" class="timeLink">Permalink</a> | <a class="timeLink" href="" onclick="javascript:share_this_page(this, 'http://www.angelfire.com/oz/tutorials/lesson2c/index.blog/205187/untitled/'); return false;">Share This Post</a> </div> </div> </div> <p class="entry"> Newer | Latest | Older </p> </div> <div class="calBorder" id="lowerBar"> </div> </div> </div> </body> </html>