How to Make a Website

In this day and age anyone can have a web page, or at least some kind of "online presence". You can have a free blog, or your own social bookmarks page.

This article is not about either of those. It will rather show how to create a proper website that you will understand. It is a step by step guide for a clean coded website which you will be able to update by yourself. Using a WYSIWYG (What You See Is What You Get) visual page editor is an option for some people, but in my opinion, even if you are a complete beginner, you can do better than that - and have a clean code, which you will actually understand! That means that, as your understanding gets better and better, you will also be able to implement various snippets and gadgets into your site, and still keep it clean!

Basic HTML Page Construction

A good page has a very simple neat code. The base looks like this:

example 1

<html>

<head>
</head>

<body>
</body>

</html>

There are 3 tags, each opening and closing.
<html> opens the html page and </html> closes it. Within the opening and closing html tags are the <head> and the <body>.

Everything located between <head> and </head> is called the page head. It stores important information, such as the meta information (page title, description, and keywords), scripts and style sheets.

Everything located between <body> and </body> is called the page body. The body stores everything else that is plain to see, so that what most would consider the page itself.

Open a blank notepad (or any simple text program) file and enter these 3 opening and closing tags, as shown in example 1 on the left.

The Page Head

We will now populate the page head with everything a good website has. I will disregard the other, already entered tags and we will concentrate solely on what goes between <head> and </head>

Meta Information

example 2

<head>


</head>

As shown in example 2, enter a few spaces after the opening head tag <head> to visually separate it from the closing tag </head>.
Then add the following code between those 2 tags:

The first line declares the character encoding, which is in this case utf-8.There are other possibilities, but this one is in most cases the best choice, so we will use it here as well.

The second line shows opening and closing tags for the page title.

The third line displays the meta description.

The forth line displays the meta keywords.

So, with this new information in the page head, our code now looks as follows:

example 3

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />

</head>

That means you can now personalize this part. Your page title is of course entered between the opening title tag <title> and the closing title tag </title>. For now, let's call it "My First Page":
<title>My First Page</title>

In the description line, click between the 2 quote marks and write your description:
<meta name="description" content="My first page description" />

They keywords are done exactly the same way, except that you enter them in the keywords line, again between the 2 quote marks:
<meta name="keywords" content="keyword1, keyword2, keyword2, keyword4, keyword5" />

Cascading Style Sheets

The next very important part of the page head are the cascading style sheets, also called "style sheets" or just "css". Style sheets can be external, which makes more sense and makes editing easier, but for now, we will embed them directly into the page head. First the opening and closing tags for a style sheet:
<style type="text/css">
</style>

example 4

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>My First Page</title>
<meta name="description" content="My first page description" />
<meta name="keywords" content="keyword1, keyword2, keyword2, keyword4, keyword5" />

<style type="text/css">

</style>
</head>

Inside the css tags you can add different classes and declarations. For example, we already know that there is an entire area called the page body. Through style sheets you can give this body various properties, such as background color, text color, text size, etc.

It would look like this:
body {
Various statments and properties are placed between the curly brackets.
}

Here are a few common parameters and their meaning (which is in many cases self-explanatory):

Parameter	Example	Explanation
background	background: white;	Sets the background color to white. Instead of white it can also be another color. What is more common than color titles are hex codes. The hex code for white is #ffffff.
color	color: #000000;	Sets the text color. In this example the text color is set to black.
font-size	font-size: 12px;	Sets the text size. In this example the text color is set to 12 pixels ("px" is short for pixel).
font-family	font-family: Arial, Helvetica, sans-serif;	Declares which font family should be used. In this case it is primarily the font Arial. If it doesn't exist, it will use Helvetica, and if that one doesn't exist, it will use some sans-serif font instead.
margin	margin: 10px 10px 15px 10px;	Defines the space around elements. In this example it sets all 4 margins in one declaration. The order of the 4 numbers/sizes in the declaration is as follows: margin-top margin-right margin-bottom margin-left
padding	padding: 10px;	Defines the space between the content of an element and the border of the same element. In this example it sets the padding around the element, on all sides, to 10 pixels.
text-decoration	text-decoration: none;	The shown example is often used when you want to have links which are not underlined. Other possible values include underline, overline and line-through

There are, of course, many more parameters than these few listed here. What is important to understand is how each class is constructed:

body { (Opening curly bracket)
background: #ffffff; (Don't forget the semicolon at the end of each property!)
color: #000000;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
margin: 10px;
} (Closing curly bracket)

You will probably also want to set your link colors. The code for that is as follows:

a {
color:#336633; This is the hex code for green.
text-decoration:none;
}

a:hover {
color:#669966; The hex code for a paler version of the same green.
text-decoration:underline;
}

In the above example, the link is only underlined when the mouse hovers on top of it, otherwise it looks like regular text, but in a different color.

The last piece of css for now is going to be a class for a container of a fixed width, which will keep our layout in shape.:

.container{ (The period before the name is important, as the element "container" doesn't exist yet!)
width: 980px;
padding: 10px;
border: 1px solid #cccccc; This is also a new piece of css, simply adding a 1 pixel border around the entire container. The border color is a light gray (#cccccc)
}

Now we can add all this css code between the opening and closing tags of our style sheet, inside the page head. The <head> to </head> code will now look like this:

example 5

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>My First Page</title>
<meta name="description" content="My first page description" />
<meta name="keywords" content="keyword1, keyword2, keyword2, keyword4, keyword5" />

<style type="text/css">
body {
background: #ffffff;
color: #000000;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
margin: 10px;
}

a {
color:#336633;
text-decoration:none;
}

a:hover {
color:#669966;
text-decoration:underline;
}

.container{
width: 980px;
padding: 10px;
border: 1px solid #cccccc;
}
</style>
</head>

You can do most of your design and layout in CSS, but for now we will leave it at this, and move on to the page body.
Before you continue to the next page, make sure that you understand everything that has been explained in this first part.

Next: How to Make a Website, Part 2