click for English language website click for Spanish language website

A beginners guide to HTML part 2

If you have not read part 1 please do so here, it goes through the basic set up of an HTML page for the first time. This article follows on directly from this.

Now that we have a web page set up and a means to test it we can delve further into the HTML. Don't forget that when we want to create some visual content on our page we do so between the <body> tags in our code.

So to recap we are at this stage:

<body>
<h1>Hello world!</h1>
</body>

We have created a header now lets create some content.

Most web pages can be thought up as a series of boxes. Look at any website and try to visualise a series of boxes – one for the header, one for the navigation, one for the main block of content, one for the footer. This is a standard layout amongst most websites, they may be in different orders, with more emphasis on content or aesthetics on some web pages but you should be able to identify a box model on most web pages.

So let us begin building our website from the ground up. Personally I like to do this in stages. It is good practice in the beginning to create the general layout of the page.

Let's create a standard box model for our website. It's a good idea to first create a 'wrapper' or 'container' box. This will effectively be a box that wraps around all the other boxes in a web site and keep everything in check and together visually.

We do this by creating a div . Think of a div as a box. A box can be completely unique on a web page such as our wrapper box or a navigation box – we won't need to use the same box again. We create a unique box by calling it by id .

Any website will need some boxes on a page to be duplicated. For example a content box on a page may repeat several times. We do this by creating a div with a <class> identifier.

You can call your boxes anything you like, however try to ensure a consistent style. When you refer to a box in your CSS file later on, the names have to match up exactly or it won't work.

To create a re-useable box we use the following code:

<div class=”nameofbox”>content goes here</div>

For a unique box:

<div id=”nameofbox”>content goes here</div>

As I mentioned you can call the box anything you like. There are common names used in HTML which will identify a box as what it is. These include header , nav and footer . It is good practice to use these although not essential.

I put some placeholder code inside each box so that we can see on screen where it is. This is a useful way to test your website as you go.

So in our code if we create our basic layout:

<body>
<div id=”container”>
<div id=”header”> our unique header box </div>
<div id=”nav”> our unique navigation box </div>
<div id=”content”> all our content will go here </div>
<div id=”footer”> our unique footer box </div>
</div>
</body>

Don't forget to close each box correctly. Everything is nested inside the <body> tags. All our content is then nested inside a container box. Each box then belongs to itself.

If you then preview your website you should see your website all scrunched up together, as no formatting has been applied yet – this is for CSS which we will approach in a later article.

So we now have a basic layout which we will manipulate later in the CSS. An important step to know at this stage is how to create content within HTML, whether it be an article, a section of your page or anything written.

Say we wish to create an article about football. First we need to make sure we put the content in the right box. In this case it would go in the content box.

If you have a short article already written then great, if not I often create 'filler' content, usually used to test the visual layout of your website. Lorem Ipsum is a great way to do this – create some text here and copy and paste it into a Word Processor for now.

If we are creating a full article it goes something like below:

<div id=”content”>
<article>
<h1>Content Title!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent iaculis, lacus at iaculis vestibulum, ligula ipsum aliquam arcu, at pharetra sapien dui eget nunc. Morbi elementum nisi eu viverra finibus. </p>
<p> Phasellus sed risus vel tortor euismod imperdiet. Integer efficitur mauris nec leo mattis faucibus. Nam gravida rhoncus ante, vitae interdum neque porta ut. Praesent sed nunc ante. </p>
<p>Etiam elementum ex vitae feugiat interdum. Etiam dapibus massa eget congue aliquet. Morbi convallis volutpat felis eu rutrum. Nam nec libero nec mi sagittis venenatis. Suspendisse dolor velit, convallis vitae aliquam eget, porta a tortor. Ut euismod rutrum feugiat.</p>
</article>
</div>

This is the absolute basics of formatting an article in HTML. The <article> tag is recognised by search engines to indicate the start of written content, so it is good practice to use it. The p tag creates a paragraph and applies the appropriate formatting before and after the paragraph.

Note that any white space between paragraphs or between text will be ignored completely. So you cannot simply press 'enter' a few times to create a new paragraph.

Also understand that any tag that you create in your HTML can be manipulated in dozens of different ways. For example the <p> tag you can control the line spacing of the paragraph, the colour, the letter spacing, the space above and below the paragraph and much more.

You can also manipulate every paragraph in your entire website in one go or just edit a single tag individually. HTML and CSS is a powerful tool! That is all for now, see you in part 3!