Introduction

Welcome back! In the first part of this article series, we looked at how the web works, what tools you need to create a basic web page, and the basics of HTML pages and how they should be structured. In this part I will take you through the contents of the head and body of the sample web page template, showing you what all the different parts do. Download the template now if you haven’t already done so, by clicking on the previous link.

The table of contents is as follows:

The head of your document

Now let’s look more deeply at the contents of the sample template’s head element. You can put a lot more information inside this element than I have included here, but I’ve elected to just keep it simple for now.

Linking to CSS

The first line is as follows:

<code><link type="text/css" rel="stylesheet" href="style.css"></code>

The link element is referencing the style.css file in the zip you downloaded above. It is saying find the CSS file named style.css, and apply the styles inside it to the HTML inside this document. You don’t need to worry about the type and rel attributes for now — just make sure you include them in your own examples in future.

The HTML title element

The next line is as follows:

<code><title>CV/Resumé template</title></code>

The title element specifies the title that will be shown in the title bar of the browser, as seen here:

You can see this in your downloaded code by going inside the 0-nostyle folder and loading the HTML page inside it in a browser. If you check this same file out using a text editor, you’ll see that the link element is not present in the head of the page, so no CSS is being applied to the HTML.

In this section I will go through all the HTML elements inside the body element, and explain what everything does. Along the way I will introduce you to many HTML elements and explain their functions. This is by no means an exhaustive HTML reference, but it should be enough to get your started.

The wrapper div: div elements

You’ll notice that the entire contents of the body element are also wrapped in a div element:

<code><div id="wrapper">
...''all the rest of the content is here''...
</div></code>

div elements are a generic container, or grouping element that you use to group other elements together when there isn’t another element that would do the job better. You can give a div an id or class element to give it an identity, but as it stands, the div will do nothing until you start to style the page with CSS. Below is another example — I have used a div to group together a list and an image as a profile.

Think of a div like a bag, which contains other elements. If you have a load of individual items that you want to keep together to serve a single purpose (like all the parts of a tent, to go camping with), and there isn’t a better element to do the job, then a div is a good idea.

What is the difference between an id and a class? you may ask. An id is a unique identifier, meaning that you can only have one of each id on a web page. A class on the other hand can be repeated as many times as you like. Note also that you can use whatever classes and ids you like in your HTML pages. They are used as identifiers to style parts of your page using CSS, as you’ll see later.

The profile section

Here we’ve got another div, with an id of profile to group this HTML section together. Let’s take a look at the new things:

HTML Headings

<code><h1>CV/Resumé - Chris Mills</h1></code>

The h1 element is a heading, one of the most important types of HTML element on the Web. There are six levels of headings available to use — h1-h6 — although you shouldn’t really need more than three or four. You’ll notice, looking at my sample HTML template, that I only have one h1 on the whole document, then the next level of headings are h2, then h3. This creates what we call a heading hierarchy, with one most important heading, then less important headings below it in the hierarchy. You should be careful to structure your document sections and subsections like this, as it has many advantages for web pages, such as making them more findable on search engines like Google. You should never use headings just because you want a bigger text size for your normal paragraphs. That is a misuse of heading elements, and such desired style changes should be achieved with CSS instead.

Images in HTML

<code><img src="ChrisMills.jpg" alt="A picture of you"></code>

The image element is what you use to insert images into your web page using HTML. It is an empty element, meaning that it has no content inside it, and is effectively a single tag. It has two essential attributes:

src: The content of this attribute is a path pointing to the image to be displayed. In our case, it is just a file name, because the image file is in the same location as the HTML file. If the image were inside a directory called images in the same directory as the HTML file, the value of the src attribute would be images/ChrisMills_180x180.jpg

alt: This attribute contains a text description of the image, for the benefit of those who cannot see the images (some web users are blind, and others have images turned off in their browser). If the image is merely decorative, ie visual bling, then you should leave the alt attribute blank, ie alt="".

ul: This element wraps the individual list items, defining the start and end of the list. ul stands for unordered list, and is to be used for lists where the order of the items doesn’t matter, such as a shopping list. This gives the items bullet points.

You can use ol instead of ul (there is a second list further down the code that uses this) to get numbers rather than bullets. ol stands for ordered list, and is for representing lists of items where the order does matter, such as the steps to follow when cooking a meal from a recipe

li: This element name is short for list item. Each item in the list appears inside one of these elements. You can include further elements inside list items such as paragraphs and images if you wish, or even other lists

Links to other places

The a element is another one of the most important elements in HTML. It is this element that makes the Web a web. Why? Because it allows you to link a piece of text to any web page or resource you know the web address of. In this example, clicking on the text DevOpera on the template will immediate make your browser load up the page at http://dev.opera.com. The href attribute, containing the address of the web site to link to, is all you need inside the a element. Have a play with it when you make your own web page!

HTML emphasis: strong and em

<strong>Address</strong>

Displays as Address.

Here we have used the strong element to wrap important terms. This bolds the text in most browsers, but it does not just refer to the look of the text. It also means that the term enclosed in the element is more important than the surrounding text, or emphasised. There is also an em element, which most browsers render in an italic font, and can also be used for emphasis, depending on your preference.

<em>Address</em>

Displays as Address

Paragraphs

In the next document section, there is nothing we haven’t seen before except for the paragraph — p — element. This element is one of the most important HTML elements, along with the headings. Use this whenever you want to separate out a basic paragraph of text, which will be often. The browser will automatically add some spacing between paragraphs.

There is also a class attribute of value first on some of the p elements. You’ll find out what these are for in the CSS section.

there is nothing here that you haven’t seen before, except perhaps the ol element denoting the list as ordered, or numbered. You might notice that each li element has got a heading and a paragraph inside it — this is perfectly fine. This brings me on to my next topic — the difference between block and inline elements.

Block versus inline? What is he talking about?

There is a lot of complicated jargon I’ve omitted from this article that you don't really need to know right now, but I need to go over this before we go any further. I’ll try to be as brief and simple as I can.

Think about different sized boxes containing leaflets. You can put boxes inside other boxes, and you can put leaflets inside boxes, but you can’t put a box inside a leaflet. Also, a box takes up space, but a leaflet doesn’t take up space. Ok, several leaflets together would take up space, but bear with me here for the purposes of the analogy. In any case, you could lose a leaflet underneath a dinner plate, but you couldn’t lose a box underneath a dinner plate.

Are you loving the analogy? Good. Relating this to the HTML:

The block elements are like boxes — they take up space on the page and form part of the page layout. You can put block elements inside other block elements, but you can’t put them inside inline elements. Examples of block elements are div, h1, p, table, ul and li

the inline elements are like leaflets. They don’t really take up space on the page or form part of the page layout, and you can put them inside block elements, but you can’t put block elements inside them. They serve to give meaning to individual bits of text inside paragraphs, rather than whole paragraphs. Examples of inline elements are a, strong and em

It might sound complicated, but it is largely common sense. Does it make sense to have a paragraph inside a single emphasised word? No. Does it make sense to have a bulleted list and a paragraph contaning some links inside a list item? Yes.

Modifying the template

At this point I’d like you to start playing with the template — change it, break it, personalise it! But above all, have some fun. Don’t be afraid to add in your own content to make your own CV, or to just delete all of the body contents and make your own web page with a totally different purpose. Simple rules to follow are:

When modifying the text content of an element, make sure you don’t change the tags surrounding the text, just the text

When adding an element, make sure it is properly opened with an opening tag (eg <p>), and closed with a closing tag (eg </p>), unless it is an empty element such as img

Make sure you don’t put block elements inside inline elements

Make sure attributes are written properly, with quote marks round the value, eg <p class="first">

Make sure elements are properly nested. For example, <strong><a href="http://important.com">Important link</a></strong> is fine, but <a href="http://important.com"><strong>Important link</a></strong> is not. The elements shouldn't overlap like that — the a element is opened/started, then the strong element, therefore the strong element should be closed/finished before the a element, not the other way round. This can cause errors.

Summary

I think you’ll agree by this point that HTML really isn’t that hard to write, once you get to grips with the basics. By this point in the series you should have an understanding of the way the web works, and a fairly solid knowledge of HTML fundamentals. In the next article I’ll turn your attention to CSS, the language we use to give our HTML some style.