Suzi's HTML experimentation page!

Welcome to my new web page. As it progresses it may develop into a brief HTML tutorial. If you're interested, stop by from time to time and see how things shape up. This page will be continually under construction. Thanks for stopping by and if you would like to comment, drop me a line!

I'm taking the long route and learning HTML by book (O'Reily's HTML: The definitive guide), but you can also learn by picking web pages you like and using your browser to view their source. Problem is, you don't know if they're doing it right! Lots of browsers will be able to read a webpage even with glaring errors. So, a great way to check your learning is to go to the W3C's HTML validator (make sure you select HTML4.01 Transitional). They're the folks that determine the standards for HTML code. If they don't find any mistakes in your page, every browser out there will be able to view your stuff.

Some basic text manipulations

Text is often the main portion of any web page. It is also one of the easiest things to code. Any text you type into your HTML document will be displayed by the browser as text. It will be just as you have typed it, with a few exceptions - carriage returns are generally ignored, as are leading spaces. The browser will automatically format your text to fit the width of the window, and keep wrapping it around until you tell it to do something different.

Other exceptions include characters such as <, > and &. These characters will not be recognised as text because they are used to indicate commands to your browser. To type <, > and & you need to enter &lt; for the less than sign, &gt; for the greater than sign and &amp; for the amphersand. < and > are used to enclose all commands, or "tags" in HTML. By now you can probably guess what the & means!

Paragraphs and divisions

There are three ways to break up the flow of text: <br>, <div> and <p> Both <br> and <div> simply insert a carraige return into your text. The difference is that <div> allows you to attach attributes to the following section of text. However, <div> is rarely used. <div> has a corresponding end tag, </div>, which may be left out. It would be placed at the end of the division. <p> indicates a paragraph break, and the browser will insert a blank line between the text preceding the <p> and the text following the <p>. <p> also has an end tag, </p>, which is almost never used, and would come at the end of the paragraph.

Both paragraphs and divisions allow you to assign several attributes to the following text. The main ones you are likely to use are align, id, title, class and style. Align allows you to choose the alignment of your paragraph or devision. Typing <p align=center> will center the text of the following paragraph. Other alignments are left, right and justify. If you don't specify an alignment, your text will be left justified, just like most of this page is.

Id allows you to assign a tag to your paragraph so you can link to it later (there are other ways to do this, however). Title allows you to title your paragraph if you really want to. This paragraph, for example, opens with the tag <p id=p-attributes title="Other paragraph attributes"> Style and class are used to assign styles to your paragraph, as will be discussed below when we cover cascading style sheets.

Text Attributes

There are a lot of attributes text can have, and some day I will type it all in. A general note on text attributes is that it is preferable to use content-based tags (such as citations, emphasis, etc.) rather than visual tags (bold, italic, and the like) because they say more and have the same visual effect. They also make your life easier when you later go searching through your document for, say, all of your citations. There is a lot more to say, but in the meantime, I will skip ahead to colors since I already have that coded and I want to move it off of the poetry/experimentation page!

COLORS!

Ideally, colors will be put into your page with a style sheet. But if you're just going for some cool visual effects (tisk, tisk) You can type them in like this:

<font color="color name">
or
<font color="#XXXXXX">

Color numbers must be in quotes. (although most browsers will display them just fine without) There are 3 pairs of hexidecimal digits (0-F) - the first pair is for red, the second for green, and the final pair for blue. You can program all 16 million colors this way if you so choose. Most people don't need that many colors however. Below you will find my painstakingly made color samples. When I learn image maps I might make a map with more color values.

Named colors
You should note that most browsers allow more color names, but only these are allowed in the HTML standards!

white white (#ffffff)
silver silver (#c0c0c0)
gray gray (#808080)
black black (#000000)
maroon maroon (#800000)
red red (#ff0000)
yellow yellow (#ffff00)
lime lime (#00ff00)
olive olive (#808000)
green green (#008000)
teal teal (#008080)
aqua aqua (#00ffff)
blue blue (#0000ff)
navy navy (#000080)
purple purple (#800080)
fuchsia fuchsia (#ff00ff)

216 additional colors

(click here to see these colors on a black background)

#000000 | #000033 | #000066 | #000099 | #0000cc | #0000ff |
#003300 | #003333 | #003366 | #003399 | #0033cc | #0033ff |
#006600 | #006633 | #006666 | #006699 | #0066cc | #0066ff |
#009900 | #009933 | #009966 | #009999 | #0099cc | #0099ff |
#00cc00 | #00cc33 | #00cc66 | #00cc99 | #00cccc | #00ccff |
#00ff00 | #00ff33 | #00ff66 | #00ff99 | #00ffcc | #00ffff |

#330000 | #330033 | #330066 | #330099 | #3300cc | #3300ff |
#333300 | #333333 | #333366 | #333399 | #3333cc | #3333ff |
#336600 | #336633 | #336666 | #336699 | #3366cc | #3366ff |
#339900 | #339933 | #339966 | #339999 | #3399cc | #3399ff |
#33cc00 | #33cc33 | #33cc66 | #33cc99 | #33cccc | #33ccff |
#33ff00 | #33ff33 | #33ff66 | #33ff99 | #33ffcc | #33ffff |

#660000 | #660033 | #660066 | #660099 | #6600cc | #6600ff |
#663300 | #663333 | #663366 | #663399 | #6633cc | #6633ff |
#666600 | #666633 | #666666 | #666699 | #6666cc | #6666ff |
#669900 | #669933 | #669966 | #669999 | #6699cc | #6699ff |
#66cc00 | #66cc33 | #66cc66 | #66cc99 | #66cccc | #66ccff |
#66ff00 | #66ff33 | #66ff66 | #66ff99 | #66ffcc | #66ffff |

#660000 | #990033 | #990066 | #990099 | #9900cc | #9900ff |
#993300 | #993333 | #993366 | #993399 | #9933cc | #9933ff |
#996600 | #996633 | #996666 | #996699 | #9966cc | #9966ff |
#999900 | #999933 | #999966 | #999999 | #9999cc | #9999ff |
#99cc00 | #99cc33 | #99cc66 | #99cc99 | #99cccc | #99ccff |
#99ff00 | #99ff33 | #99ff66 | #99ff99 | #99ffcc | #99ffff |

#cc0000 | #cc0033 | #cc0066 | #cc0099 | #cc00cc | #cc00ff |
#cc3300 | #cc3333 | #cc3366 | #cc3399 | #cc33cc | #cc33ff |
#cc6600 | #cc6633 | #cc6666 | #cc6699 | #cc66cc | #cc66ff |
#cc9900 | #cc9933 | #cc9966 | #cc9999 | #cc99cc | #cc99ff |
#cccc00 | #cccc33 | #cccc66 | #cccc99 | #cccccc | #ccccff |
#ccff00 | #ccff33 | #ccff66 | #ccff99 | #ccffcc | #ccffff |

#ff0000 | #ff0033 | #ff0066 | #ff0099 | #ff00cc | #ff00ff |
#ff3300 | #ff3333 | #ff3366 | #ff3399 | #ff33cc | #ff33ff |
#ff6600 | #ff6633 | #ff6666 | #ff6699 | #ff66cc | #ff66ff |
#ff9900 | #ff9933 | #ff9966 | #ff9999 | #ff99cc | #ff99ff |
#ffcc00 | #ffcc33 | #ffcc66 | #ffcc99 | #ffcccc | #ffccff |
#ffff00 | #ffff33 | #ffff66 | #ffff99 | #ffffcc | #ffffff |

This page created by Suzi Anvin on 6/24/01 and last updated on 06/29/01

Valid HTML 4.01!