With the recent browser statistics, that show Internet Explorer 6, Mozilla/Firefox, Safari/Konqueror and Opera combined at around 95%, it is finally feasible to write modern, CSS-based websites. For many years, this was not possible due to the vast number of legacy browsers, Internet Explorer 4 and 5 and Netscape 4 deployed on the computers around the planet. But with these browsers vanishing, we can finally start to ignore them.And it's not just the declining number of these browsers. I recently talked to two people that still surf the web with these old browsers, and they both basically said the same: "We're used to having problems with websites, our browsers are old. No problem, that will simply go away when we buy a new computer." While this is of course not representative, it supports my growing opinion that we can start to ignore old browsers. The tipping point for me was that Gecko-based browsers have overtaken IE4/5 and Netscape 4 recently (this is probably a safe bet according to recent web statistics). So it's already more important to have your website work with Mozilla than with any old browser. Basically, if you code standards-compliant HTML and CSS, your site will look the same in Mozilla, Opera and Safari. And while Internet Explorer 6 does have certain problems with stylesheets, it certainly is "good enough", if you know its quirks.
So, today, I want to talk about various aspects of modern webdesign. This may be helpful for all of you who want to write HTML by hand and not use WYSIWYG-tools like Dreamweaver and Frontpage. In case you don't know: WYSIWYG stands for "what you see is what you get". With WYSIWYG-tools you work on your actual website, the program writes the code itself while you put images on the site, create text, and so forth. You may ask: "What is the advantage of writing code by hand?" Well, in my opinion, there are several differences. Dreamweaver MX 2004 actually produces far better code than his predecessors, but you simply can't compare designing with a WYSIWYG-tool to writing code by hand. The latter gives you much more control over the design of your page. Basically, you know, at any time of the design process what you have done, what you are doing and what the consequences of your actions are. "Debugging" your website is a lot easier that way. The code you produce is a lot smaller, thus more efficient. All webdesigners out there will have to deal with HTML and CSS at some time. So it's better if you are prepared! Also, Dreamweaver costs money and may not exist for your platform.
Anyway, designing websites with Dreamweaver is not the topic of this article. All you need today is a text-editor and a browser. Preferably you have more than one browser, at best you can test your website constantly with Internet Explorer 6, Mozilla, Opera and Konqueror. I'd say: at least IE6 and Mozilla are required. Also, a good book about HTML helps a lot. I use this compendium constantly. Good books about CSS and webstandards are "Eric Meyer on CSS" and Jeffrey Zeldman's "Designing with Web Standards".
So, first of all, let's explain what we are talking about: HTML is the Hypertext Markup Language. Most of the modern websites are written with HTML (an alternative way to create a website would be Macromedia Flash). CSS stands for "Cascading Stylesheets". HTML is meant to contain all your (preferably well structured) content, stylesheets are there to control the design of your website. "Rendering" is the technical term for what your browser does when it displays a website.
Well, let's get started: open a text editor (preferably one that can highlight syntax, like Bluefish or Quanta+). The first thing you will want to do is put in this text:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="link/to/your/stylesheet.css" />
</head>
<body>
</body>
</html>
Wow, that was a piece. What's that? Well, the first line is the "Doctype" definition. What we do here is tell the browser that it is about to display an XHTML 1.1 file, this is the most recent HTML standard. If we do this, the browser will expect perfect, well-formed XHTML 1.1, thus rendering our site in standards-compliant (strict) mode, so the results will be a lot more predictable. If we don't include this Doctype, the browser will render the page in "compatibility"-mode, that means it expects old, "bad" HTML and will try to guess what to do with it. Unfortunately, this is exactly what browsers have to do most of the time nowadays. After the Doctype definition, we start out HTML-file with the opening "html"-tag. After this, there's a "head"-section and a "body". Basically, HTML and all Markup languages work the same way: you open a "tag", with <tag>, then do something, then close it with </tag>. You "mark up" what is between this beginning and closing tag. The head contains some information about the document, the body contains the information that is displayed on the screen. Enter some information into the "title"-tag. This will be what you can read at the top of your browser if you open your website. The following "meta"-tags are not important right now, just be sure to include them. The "link"-tag is interesting. Here you will link to your stylesheet (that still does not exist right now) to make sure that your HTML-file finds the stylesheet. Afterwards, the "body" starts. For now, just write anything into the body (like "Hello, World!"), save your document as "index.html" and open it with your browser.
At first, we will talk about the HTML part. Before you start with your website, you should plan what you want to do. Most of the sites are happy with 2-3 sections. A classic layout will include a header, a menu and the content. You can view a simple example for this on my site. A tip: view the source code of pages you like. Sometimes you can get really useful information out of it.
There are not too many HTML commands. Here's a short list of the most important tags: div, p, br, a, h1, (h2-h6), img, ul, ol, li. I don't even include the dreaded "table", that was used for old-school webdesigns, because i personally rarely ever use it. Probably the first decision you have to make is how to divide your website. Use the "div"-tag to make some basic divisions. The "body"-section of your document could now look like this:
<div id="header"> <h1>Welcome to my Website</h1> </div> <div id="menue"></div> <div id="content"> <p>Here goes all my content, but I don't have any yet.</p> <p>Let's make another paragraph.</p> </div>
The "id" is an identifier. We need it so that our divisions make sense later on. You can apply this "id" to ANY tag. The stylesheet will use this identifier to assign styles to the document. But we'll talk about this later. So, now we have a website with three sections. We use "h1" (heading nr.1) to write a fat "Welcome"-message into the header-division of our file. No stuff in the "menu"-div, because we don't know yet what menu items to include. In the content, we use the "paragraph"-tag "p" to write some text. Just to make sure, I will emphasize on this: you have to close EVERY tag that you opened, and you have to close it IN THE CORRECT ORDER. Let's talk about the tags I mentioned: we already know that "div" does nothing but define a certain section of your document, "p" creates a paragraph, "h1" (and his smaller brothers "h2" through "h6") are used for headings. "br" creates a simple line break, it's the "smaller brother" of "p". "ul" stands for "unordered list", "ol" for "ordered list". If you use "ol", your browser will automatically add numbers in front of the items. They both need "li" ("list item") to mark up the specific items. Lists look like this:
<ul> <li>item</li> <li>item</li> <li>item</li> <ul>
- "Creating websites by hand, Page 1/2"
- "Creating websites by hand, Page 2/2"
