Build a Simple Website

So you've decided it's time for you to build your first website but you have no idea how to start building it! - well you've come to the right place :)

This small guide should help you to understand the basic idea of how a webpage is put together, how tags work etc. It is not a step by step guide on how to make a website.

You don't need any expensive software to start building webpages. Webpages are written using plain ASCII text so a simple text editor such as Notepad will do the job. Just remember when you save your page that you have to give it a .html extension. If notepad saves it as filename.txt just rename it to filename.html

First lets break things down a bit. A website is basically a collection of webpages that are linked to each other, usually there is a common theme for the site (collection of pages). This is sometimes the hardest part - "what topic will I make a site about", luckily that's not my problem :)

A webpage is made up of different elements such as text, graphics, links, colors etc. Putting all these bits together is achieved by using an easy to learn language called HTML.

HTML is basically a structured set of tags that tell the browser how to display your page. Most tags have a start tag and an end tag. Some tags affect the layout of the page and some control the the presentation of elements such as text.

Time for a small example. In the following sentance I want to make the word "sat" bold

The cat sat on the mat.

The start or opening tag for telling the browser to start making text bold is <B> or <b> (tags are not case sensitive) so in our example we would place the <B> tag in front of the word "sat" like this <B>sat.

The tag to tell the browser to stop using bold is </B> or </b> the / tells the browser that this is an end or closing tag and to stop rendering whatever tag we are closing, in this case B for bold. So we tell the browser to stop using bold by placing the closing tag after the word "sat" like this sat</B>

In our text editor we would write the line like this

The cat <B>sat</B> on the mat.

when we look at the page in a browser the line shows up like this

The cat sat on the mat.

As you can see its not that complicated to get started and there's nothing to be afraid of. Thats just a small starter to explain how tags work but with everything in life theres a lot more to it than that.

*** Note - I have used uppercase tags to emphasise them - please make all your tags lowercase.

we'll look at some tags you must have to structure a webpage even though they appear to do nothing.

As you have already found out HTML is a set of tags normally containing 2 parts - an opening tag and a closing tag. These are just instructions telling the browser what to do. Take a look at the following code.

Code:
01: <html>
02: <head>
03: <title>your title</title>
04: </head>
05: <body>
06:
07:
08:
09: </body>
10: </html>


Look for the matching opening and closing tags. Lets go through the pairs in detail.

Code:
line 01 & line 10 <html> </html> Line 01 tells the browser we are opening a page containing HTML - line 10 closes the tag.

line 02 & line 04 <head> </head> any tags you use between the <head> </head> tags does not appear in the browser
window.
This section of a document is normally where you would place any scripts, style sheets or search engine information. As you are just starting out you don't have to worry about that just now.

Code:
line 03 <title> </title> what you place between the <title> </title> tags appears in the browsers title bar at the top of the window.

line 05 & line 09 <body> </body> anything you place between the <body> </body> will appear in the browser window. All formatting, text, images get placed between the <body> </body> tags.


Use the code above (without the line numbers) as a template for all your pages remembering to place your content between the <body> </body> tags.

For this part we are going to look at the <body> </body> tags, in particular the opening <body> tag.

The <body> tag tells the browser we want to start putting things onto the page.

BUT, what if we want things to appear differently? What if we want a different page color. What if we want to change the color of the text. How do we do that?

Well the answer is simple - tags have values attached to them which, if not specified, just use the browsers default settings but you can change them by learning what attibutes are assigned to each tag (not all tags have the same attributes).

For the <body> tag we can change the following document properties

page background color
text color
link color
There are more but that'll do for now.
The attribute used to change the background color of the page in the <body> tag is bgcolor="value". Color values can either be a color name i.e
Code:
bgcolor="red" or a value bgcolor="#ff0000" (always use the # when using values also be careful when using color names - not all browsers recognise all the names)


We now have a <body> tag that looks like this

Code:
<body bgcolor="red">


OK let's make it even uglier :) how about making the text on the page yellow (argh!) The attribute used to do this is text="value" (the same applies to all colors as explained above) so our <body> tag now loks like this

Code:
<body bgcolor="red" text="yellow">




Hopefully you can now start to see how easy it is to change things so they look the way you want them to.

The formatting of text is all done using tags. Word processors use the same principal - the only difference is you don't have to write the tags. You could use an HTML drag and drop program that is similar to a word processor where you don't have to learn anything, you just press buttons but where's the fun in that :)

Text formatting tags are dead easy to learn. Lets take a look at some of the common ones.

Code:
<p> </p> - paragraph (left aligned - default so no align="left" attribute required)
<p align="center"> </p> - paragraph (centered)
<p align="right"> </p> - paragraph (right aligned)
<br> line break (notice we don't need a closing tag)
<b> </b> - bold
<i> </i> - italics
<u> </u> - underline
<sub> </sub> - subscript
<sup> </sup> - superscript



Let's see how they look

Code:
left aligned using <p> </p> tags

centered using <p align="center"> </p> tags

right aligned using <p align="right"> </p> tags


One thing I would like to point out is that the closing </p> is still optional - please make sure you get into the habit of using now as it is very important when you start developing further using style sheets AND it may not be optional forever :)

Code:
b> </b> - bold
<i> </i> - italics
<u> </u> - underline
<sub> </sub> - subscript
<sup> </sup> - superscript


So far so good I hope. Ok so you haven't made a webpage yet but you have to walk before you can run. You are still learning to walk so take your time - create some pages with the tags I've covered and you'll see that it's not that hard.