So it's really easy to put your opinion onto the web these days. You can go to google and set up a blog in a couple of minutes, but if you want a "real" site, then you'll want to learn HTML. The hard stuff: hand coding html. You might protest that there are website authoring tools aglore, like frontpage or nvu, but they're only truly useful if you understand the underlying medium which the tools work in, HTML. So let's get started with eating some HTML for lunch!
Before we get started with html, let's talk for a quick bit about the underlying language, xml, that html is built off of. This way, you won't get any bad habits, and we can start writing xhtml straight off the bat, which is much better than regular html in terms of accessability. Xml is built on the idea of tags as the fundamental buildng block, like this:
><tag>
information
</tag>
Basically, tags contain information. In one example, the address tag contains the street, city, and country tags:
><address> <street>3rd Ave</street> <city>Chicago</city> <country>USA</country></address>
Sometimes, tags don't need to contain anything, like this:
><person> <sick /></person>
The person is sick; sick with what? The writer of the xml file didn't think that was important, and so he left out the end tag and closed the beginning tag with a /.
If you would rather represent your one-shot data in a different fashion, you can use attributes:
><person sick="cold"></person>
To represent a person with the cold.
First, one should always start with a doctype declaration. It's just a way to let your browser know if the site should be rendered with xhtml, html 4.0, html 3.0,... whatever. We'll try to make the html xhtml compliant, but we won't always be perfect: therefore, we'll use this doctype for xhtml transitional standard, with is more lenient than using strict xhtml standards:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
There shall be one root element. In the world of xhtml, that means you'll have an html tag after your doctype, and everything will be in that tag:
<DOCTYPE><html>...everything here...</html>
Thou shall nest thy tags correctly! Meaning, you shouldn't do this:
<b><i>hello </b></i>
Most browsers won't barf on that, but xhtml will barf, and you'll have to rearrange your tags so the i tag gets closed first, and then the b tags.
Some html tutorials introduce the html piecemeal: here, we'll try to give it to you in context, with a nice little example to work with.
introduce doctype, html, body, head, title, style, comments, and p; tag {}, style = "" color, font-face
Ready for your first site? Let's get started:
><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>hello world!</title><style type="text/css">p {color:blue;}</style></head><body><p>And this is a paragraph.</p><!--This is a comment--><p style="font-family:arial;"></p></body></html>
hx, hr,div,a href,a name,br, img, ul,li, strong, em; id, class, position, left(right), top(bottom),width, height,text-decoration,font-weight,font-size, font(shorthand)
><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>Bananas</title><style type="text/css">.anchor {font-weight:bold; font-size:1.1em;}#leftcol {font-size:24pt; }#rightcol{position:absolute; right:0; top:4em; width:300px; height:200px;}#footer {font:;}</style></head><body><h1>Yellow fruit</h1><ul><li><a href="google.com">google.com</a></li> <li><a href="http://dmoz.org/">open directory project</a></li><li><a href="#leftcol">left column</a></li><li><a href="#foot">footer</a></li></ul><hr /><div id="colleft">hello world<a name="leftcol">and goodbye</a><em>bing bang bang</em></div><div id="colright">this should be the column on the right.</div><div id="footer"><strong>eat this!</strong><br /><a name="foot">And this is the foot</a></div></body></html>
ol, table, tr, td, span, escape chars; import, list-style, background, border, display, double selector,adjacent selector, margin, padding, content+
><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title></title><style type="text/css"></style></head><body><table><tr><td>hello</td><td><ol><li>I am amused</li><li>eat a banana</li></ol>doh <</td></tr><tr><td>mooo</td><td><span id="gmail">noooo</span>dah!</td></tr></table></body></html> <>
form, input (text, password, menu, radio), textarea, iframe, frame, meta; submit, scroll bars, mouse
><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title></title><style type="text/css"></style></head><body><form><input><textarea></textarea></form></body></html>
Now, some of the following items will be my opinion: some other parts of it will be common sense. So, please don't find me and flame me if you disagree.
These are the basic commandments of design:
Thous shall not be convoluted.
Thou shall let the user know where a link leads.
Thou shall not use backgrounds hard on the eyes.
Thou shalt make navigation easy.
And the greatest of the commandments is this:
Thou shall not make anything look ugly.
Some people couldn't live without flash: I would rather have had the creator of flash be struck dead by lightening the year before he created it1. It's just so ripe for over-doing it, and it's very easy to make bad web sites. Unless you need flash, and you can't get around it no matter which way you look at it, then by all means, in moderation. But only then would I recommend it.
I speak of <blink> and <marquee>; they are both hideous. One is visually annoying, the other makes your site look over-done and in need of some real-professionalism. If there are other old tags out there, like <u> and <i> (underline and italicize) just use styles, or better, a content tag (<em> and <strong> should do the job).
Back in the dark ages, css wasn't around to abuse, so people used an image tag with a single pixel, transparent gif to do their dirty work for them. Don't let such an abdomination walk the earth: use real styles!
If you must use an animation, try using a movie. If that's too big for you, then I concede: animated gifs are still the way to go for very small concept 'movies'. However, pointless animations that indicate "this is where you click to mail me!" are overblown and need to die.
Cool, you survived my rant. Let's go on for some more opinions on the page on how to be a buff govenator!