flodhest network

The web, html and all that stuff

I'm here to talk about a non-perl topic, but things a lot of programmers should know about webdevelopment. If you disagree, then speak up, or be forever silent :)

The web is a pile of shit

I don't want to blame any specific browser (**IE**), but the web is a messy place. Why, you might ask? Well, it's pretty messy, because the browsers allow people to write all kinds of crappy sites, making it even harder to spec something that actually behaves like you want.

HTML

DOCTYPE

The doctype tells the browser which DTD to use with your document. The DTD is a set of rules, so the browser can understand how to display a header, link, images, etc. Without this, your document will not validate.

If you're not familiar with doctype, and write shitty markup, I'll suggest you start with a "transitional" doctype, which is not too strict -- the other one you should use is called "strict" :P

NOTE! IE <=6 doesn't understand the <!DOCTYPE>, unless it starts at the first byte in your document.

Inline garbage

DO NOT use inline CSS or JavaScript, unless you have a very,very,very good reason. Why? Because they don't have anything to do with your markup. Markup is for structuring your document, JS is for making the site dynamic and CSS is for making your site look good. DO NOT MIX!

Entities

What are entities? Entities is for describing a character, without actually typing it. Example: &amp; = &

Use entities in URLs! It's not really that hard to translate your non-valid characters into entities. There are methods to do this for you, if you're content is produced on server side.

Charset

Write and serve your content as utf-8. This enables you to write "€" in your document, and you don't have to use that many entities. (you still need to use entities in URLs)

"Bad Tag! Bad!"

<font>, <blink> and <marquee> are just evil: They don't tell anything about your markup, they describe the appearance of your markup - use css for that!

Frames?

Frames? They don't exist, forget you ever heard of them!

Validation?

http://validator.w3.org can check your site, and tell you if there's anything wrong.

CSS

<link rel=...>

<link rel="stylesheet" type="text/css" href="path/to/file.css"> is the way you should include your styles. Only exception, is if you specify css through your javascript. But NO INLINE STYLES!

Pixels is not you friend

Don't use px for fonts. Use an unit that scales, so it's actually possible to read: em, % or pt are good choices.

Box model

IE does not calculate the width of a box correctly, unless it's in strict-mode, specified by the DOCTYPE mentioned above. This means you have to apply a css-hack for the width and height, unless you write proper markup.

JavaScript, jscript, js...

<script type=...>

<script type="text/javascript" src="path/to/file.js"></script> is the way you should include your javascript.

You can have script-tags where-ever you like, so in some cases it could be smart to include it in the bottom of your site, so the content doesn't have to wait for a javascript to load. Other times it's required to put it in head.

JS-lib / frameworks

Use a js-lib! I don't care which, just don't try to re-invent the wheel. The DOM is quite messy, but someone has tried to make it better and easier to use:

(My personal preference is jquery)

Availability

Make sure your site works in both links/lynx, a modern cellphone and in the commonly used browsers (IE, ff, opera, safari). Cool features should come secondhand, to the actual content. After all - it's just extra features.

Lynx might sound harsh, but after all, that's the way google see your pages.

Flash

Avoid flash, unless there's some special need. Use markup to display your content. Flash could be part of your content, but the visitor should be able to navigate and read the text without flash.

Tools

Firefox

To help yourself, you should use a proper browser to develope in. I like ff, since it has some excellent plugins to help you get on the right track:

IE

Even though you think everything is fine, it *might* go wrong in IE, so be prepared:

Opera

Opera got "Dragonfly", which seems to cover all your basis. Use that if you're an Opera fan.

Questions?

...