An Introduction to HTML ∞ Sigurdhsson

This is the first article in a series intended to be a light introduction to the basics of HTML and CSS. The goal is that after reading this, the reader should be able to create simple web pages using modern techniques such as CSS. No previuos knowledge is required, although I do recommend that you get a decent text editor such as Notepad++ or SciTE, and that you know your way around the file system on your operating system of choice (i.e. know how to save/move/delete files). Basic knowledge about image formats might be useful too, i.e. knowing what formats to save your image in.

The first few steps

Anyway, let’s get started. Open your text editor and create a new file (most of the time this is done automatically). You’re going to create your very first web page – and it’s the classic cliché, the Hello World page. The first thing you need is a so called doctype. This tells your web browser what kind of HTML you are using. There’s a few things to consider here, but most of the time you will be using the HTML 4.01 Strict doctype, which looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Copy-paste this to the very first line of the new document. The next thing we need is a html element. An element is much like a box – although some might contain things and others might be actual objects, like an image or a button. The html element is created using these tags:

<html>
...
</html>

As you can see, there are two tags, one starting tag and one ending tag. This tells the browser where the element starts and ends, so that it can display the page correctly. The html element is a root element, meaning it can never be inside another element, and there should always be a html element at the “base” of the document. Now, we will also need a head element. The head element contains elements that tell the browser things that don’t really get displayed on the page, such as the page title, and it also includes external files such as CSS Style sheets. Out head element will look like this:

<head>
	<title>Hello World</title>
</head>

As you can see, it contains one other element: the title element. This tells the browser what the page title is, and this title is often displayed as the title of the browser window.

Next up is the body element. This contains everything that will be displayed on the page itself, such as headlines, paragraphs of text or images. In our case, we will only have a header. The complete body element will look like this:

<body>
	<h1>Hello World!</h1>
</body>

Your document should now look something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Hello World</title>
	</head>
	<body>
		<h1>Hello World!</h1>
	</body>
</html>

Save this as helloworld.html, preferrably in a folder that you can keep track of, and open it in your browser. You should see “Hello World!” in large, bold letters. Congratulations, you just created your first web page!

Getting the Look

It’s not very pretty, but it works. This is how web pages looked like in the very beginning of the internet, around ’94. But it’s 2008 now and we’ve come a long way, baby. Now is the time to introduce the style sheets. These style sheets tell the browser how to display things, as the HTML only tells it what to display. CSS files are basically lists of rules. They start with information about what element they apply to, and then there’s a list of rules for each element. So, if we wanted all our p (paragraph) elements to have red text, we would do like this:

p{
	color: red;
}

Of course, you could use hexadecimal colors but to be extra clear I used the color name. There are a lot of things you can do with CSS, but it can get quite complex, so we’ll wait a bit before I dive deeper into the wonderful world of CSS. For now, just create a new document and paste this into it:

h1{
	color: blue;
	size: 150%;
	font-family: sans-serif;
}

This should make your header blue, a little larger, and change the font to a non-serif one (e.g. Arial or Verdana). Save it as helloworld.css. Now, if you open helloworld.html, you’ll notice that nothing has changed. That’s because we haven’t told the browser that there is a CSS file.
Remember what I said about the head element? Well, telling the browser that there’s a CSS file is one of the things you use it for. To do this you use a link element that looks like this:

<link rel="stylesheet" href="helloworld.css">

Put that inside your head element, i.e. after the line with the title element but before the </head> tag. Save the HTML file and reload it in the browser. It should look a bit different now.

Well, that’s it for this time. Next time I will probably get into including pictures, making lists and give you the 101 in structuring your document. See you then!

You can use basic HTML such as links, emphasizing and quoting. Your email will not be published.