Appendix 3
How Do I Do That?
Of course you want extras. Websites would be boring without them. You can find many, many free resources on HTML, CSS, JavaScript, other scripting, media and other modules, images, and more online. Just choose a search engine and go for it.
I'll share a few of the favorites my students have requested. How do I. . .
Decide how wide my website should be?
The common resolution for computer monitors these days is 1024x768. This means you can:
• Use a flexible width table of 100%
• Set a fixed-width table of between 900-1000px
Create text wrap around an image?
<p><img style=”float:left;” /> </p>You can also choose float:right
Create a middle of the screen website with equal background on both sides (like Wordpress blogs)?
This is a two step process:
body text-align:center; Works for IE only, so you also need to relist it with a variation: body text-align:-moz-center; <table style=”text-align:left;”> You can also add a background color or non- repeating image (like a banner)
Get my banner or other background image to show up because only part of it does?
The background image in a table and td tag only shows up if there is other content inside
the tags to push the cell “open”. If you don't plan to put text in there, you can:
Add style=”padding-top: px;” or
Add a few <br /> or <p> </p> tags to push down a bit.
Keep my text or images from being squashed against the side of a table cell?
You can use style=”padding-left: ;” and/or style=”padding-right: ;”
Keep one of my table columns (usually the right-hand one) from dropping down be- low the rest of the table?
Ah. . . if you have chosen a fixed-width table and calculated the widths of the columns, and have added margin measurements, you have actually added extra width on top of your calculated columns. Remember that your column widths and margin additions must together equal the width of the fixed width table.
Get rid of the spacing around my table cells so my borders fit seamlessly?
You need to do this inside the opening table tag by using the border-collapse option: <ta– ble style=” border-collapse:collapse;”>
Note: your table can still have a border - the border-collapse simple affects the build-in spacing around table cells (<td></td>).
Change the font family and/or size through the whole web page?
You can do this in the body tag: <body style=”font-family: ; font-size: ;”>
Change the color, size, and/or font of just a small piece of text after I change the whole body text?
Easy as pie! Place a <span style=”yourchoice: ;”></span> around the bit of text, with yourchoice being the font, color, size, and other changes.
Put the W3C Validator code in the footer of my web page without the ugly icon?
Piece o'cake! Place the Validator Icon code inside your page footer section, remove this
code (<img src=”http://www.w3.org/Icons/valid-xhtml10-blue” alt=”Valid XHTML 1.0
Transitional” height=”31” width=”88” />), and replace it with the word Validate. Since it all falls inside a <p></p>, you can even change that tag to be h5, h6, or style the <p> to make the text more discreet.