Skeletorscorpse - Creating your first web site

you are here: Home

HTML Basics

Creating your first web site

Tuesday, 15 August 2006

Creating your first web site

This tutorial will show you the basics of web site design, beginning with a simple HTML web page.

First off we will go over the basic minimum for a webpage.

<html>
<head>
<title>Title Goes Here</title>
</head>
<body>Main Content goes here</body>
</html>

The <html> tag opens up the page so the browser knows that the file it is looking at is formatted for websites. Virtually all tags need to be closed, there are some that don't have to be in circumstances such as the link and img tags. So we need to close off the <html> tag by placing a forward slash in front of it which gives us </html>. The forward slash means its a closing tag.

Next is the <head> tag. Anything in the head section will not be shown on the page, We will go in to this a bit deeper later on.

The <title> tag must always be within the <head> tag. The title is what is displayed at the very top of the browser. As with most other tags, it must be closed.

Following the closing head tag we have the <body> tags.

Everything inside these <body> tags is shown on the page, this is the content.

For a live example of this code click here

How did I do that example link?

Well its simple, I will take the code that we used before and put a link in it.

<html>
<head>
<title>Title Goes Here</title>
</head>
<body>Main Content goes here. Here is a <a href="http://www.skeletorscorpse.com/">link</a></body>
</html>

The link tag is just an <a> tag. But just having an <a> tag won't take you anywhere. As far as the browser is concerned its just some normal text and ignores the <a> tags. In my example I have just put a location for the link to go to when clicked.

I can expand this further by adding a target attribute. The target attribute defines where the link should be opened. By default it will just go to the page in the same window, but you can change this. I won't go in to them all now, but one useful target is "_blank", this opens a new browser window which goes to the link that you specified by using the href (hyperlink referance).

For a live example of this code click here

Email links work pretty much the same as normal links. For a link you would normally use a website, but for emails logically you type the email address down instead of a url.

<a href=" This e-mail address is being protected from spam bots, you need JavaScript enabled to view it ">Email me</a>

And this...won't work, the browser still thinks that this This e-mail address is being protected from spam bots, you need JavaScript enabled to view it is a website, but we know it isn't. So how do we tell it that its an email address? We just add the text mailto: infront of the email address. The browser will see this and when clicked open up your default mail client and automatically insert the email address that you specify in the href.

<a href="mailto: This e-mail address is being protected from spam bots, you need JavaScript enabled to view it ">Email me</a>

Now we have a working email link so people can contact us.

For a live example of this code click here

So we have a means for users to navigate our site using links and a way for users to contact us. But we don't know how to add pictures...let's add some pictures.

Images don't always have to be closed. I won't go in to any detail on this at the moment but if you are using XHTML then you must close your image tags, if you don't know what that means, that's fine, if you did know what it meant you wouldn't be reading this tutorial.

The image tag is just <img .....>. Pretty simple one to remember. But link the <a> tag we need more information for the browser to know what we want it to show.

If we just put <img> how would the browser know what dimensions we want the picture to be let alone know what picture to show.

So we need to tell it the location of our image. Unlike the <a> tag we do not use href. With images we use src.

So we would have:

This is basically the minimum you can have for the image tag. The browser now knows what image to display. Although we haven't told it how big the image is, the browser will automatically find the dimensions of the image, although this slows down the loading of the website, so it is good habit to type the dimensions down when you add an image to a webpage.

<html>
<head>
<title>Title Goes Here</title>
</head>
<body>
Main Content goes here. Here is a <a href="http://www.skeletorscorpse.com/">link</a>
<img src="jt.jpg" width="451" height="451>
</body>
</html>

Here I have specified the width and height of the picture.

You may be wondering where the tags came from, they just stand for paragraph. When you wish to start a new paragraph close off your old paragraph using then open a new one with .

For a live example of this code click here

5.	So what have we learnt? We have learnt: The basic formatting of a website How to change the text at the top of the browser How to add content How to add links How to add a contact link How to insert images How to start a new paragraph.

Bullet points

There are 2 types of bullet points. You have an unordered list, which just uses standard bullets, and you have ordered lists, which are either a list of numbers, letters or roman numerals.

We will start with standard bullet points, which is an Unordered List. The tag for this is <ul> which stands for unordered list funnily enough.

Next we have the Ordered List, which uses the <ol> tag.

So you have your <ul> and <ol> tags and your closing </ul> and </ol> tags. How do you add bullets/numbers inbetween?

We use the list tag, which is represented by <li> and must always be closed with </li>

Here is an example of an unordered list:

Here are a few examples of ordered lists:

First we will look at numbers, which is the default for ordered lists.

Now we have letters this just runs through the alphabet from A to Z.

Roman numerals use the same principal.

For a live examples click here