Free Web Hosting Provider - Web Hosting - E-commerce - High Speed Internet - Free Web Page

Beginner's HTML Beginner's HTML

On this page

How to start off an HTML document
How to insert a background or change the color of the page
How to insert and manipulate text
How to insert pictures
How to make 'links' to other pages
How to change the alignment of your page
How to insert a horizontal line in to your page
How to finish off an HTML document

How to Start off an HTML document
To write an HTML document two programs are essential. A web browser (e.g. Internet Explorer) and a program that allows you to write in text format (e.g Notepad for Windows or Simpletext for Apple Computers). These are usually supplied with your computer. To start writing your webpage open Notepad (if you have a computer with Windows) or Simpletext (If you have an Apple Computer). You are now ready to start.
HTML uses 'tags'. A tag always starts with a '<' and ends with a '>'. You will see how these work later. All webpage documents start with this tag:
<HTML>
When you eventually go to view your webpage, this tag tells the web browser that this is an HTML document. Without this tag your webpage would have plain text and a grey background. If you look at the tool bar of your screen you should see the writing 'Beginner's HTML'. This is achieved like this:
<HEAD> <TITLE>Type your title here</TITLE> </HEAD>
The <HEAD> tag tells the web browser that whatever tags come after this one contains 'information' about the web page. In this case the information is the title. As you will see as you become more advanced, other bits of 'information can be placed there. The </TITLE> tells the browser that the title has ended and the </HEAD> tells the web browser not to look for information about your website anymore. It is now time to start designing the webpage. To show the browser that the content of your website begins here this tag is inserted:
<BODY>
Writing can be added in to this tag to change the background color, the background pattern and the colour of links to other pages. The following is the body tag for a page with a black background and white links to other pages:
<BODY BGCOLOR=BLACK LINK=WHITE>
If you have a pattern that you like on your computer and you would prefer that to a white background then do this:
<BODY BACKGROUND=nameofbackground LINK=WHITE>
How to create and manipulate text
The easiest way to create text is just to write all of your text out but this would make your webpage look boring so this is how to change your text. An easy way to change size is to do the following:
<H1>Really big</H1> <H2>Big</H2> <H3>Average</H3> <H4>Smaller</H4> <H5>Really Small</H5> <H6>Tiny</H6>
And this is the effect on the text:

Really big

Big

Average

Smaller

Really Small

Tiny

For more control over your text then I recommend that you use this:
<FONT>
Like the 'BODY' tag the 'FONT' tag extra properties can be added to this tag to change the way that your text looks. This is the 'FONT' tag for writing that is red and (in Internet terms) size 3.
<FONT SIZE=3 COLOR=RED>the colour of this text is red and the size is 3</FONT>
And this is what it looks like:

The colour of this text is red and the size is 3

The font of the text can be changed from the 'FONT' tag as-well but for the font that you choose to show up on other peoples computers, that person has to have that font so choose a common font such as Arial, Times New Roman or Courier New. This is how:

<FONT SIZE=3 COLOR=RED>The colour of the text is red, the size is 3 and the font is Arial</FONT>

And this is how it looks:

The colour of the text is red, the size is 3 and the font is Arial

How to insert pictures

Inserting pictures is probably one of the simplest tags but the one which causes the most complication. The tag relies on several things. That the picture is in the same directory as your HTML document and that you know the full file name of the picture including the end extension. Two types of picture format are used in publishing web pages on the Internet. They are GIF files and JPEG files as these take up less memory. To convert your picture to a GIF or JPEG you need to open up your picture in a program that has GIF or JPEG capabilities. Then save the picture as a GIF or JPEG. If you do not have a program that has GIF or JPEG capabilities then you cannot publish your own pictures on the Internet. but you can publish pictures that are already on the internet but this is very difficult. This is how to insert a picture called picture.jpg that is in the same directory to your HTML document:

And this is what it does:

Reasons why this may not work are that the picture may not be in the same directory as your HTML document, the ending on your tag may be different to that of your picture or even missing or you may have used the wrong case when writing the tag. E.g writing PICTURE.JPG instead of picture.jpg. REMEMBER THAT THE INTERNET IS CASE SENSITIVE!.

How to make links to other pages

Here is a link back to the home page 'index.html' which is in the same directory as this page:

Here is the result

My Home page

A picture (homebut.jpg) can be placed in to the tag to replace the text by using the following tag:

And here it is in action

Don't want that box around the image? Then add border=0 to the image tag:

And here it is:

How to change the alignment of your page

If you want your page to look like the above parts of my site then you don't need to know this but if you parts of your page to be in the centre or the right of the page then read on. To centre text or images is a simple process. Here is how to centre the first image (picture.jpg):

And this is what it looks like:

Remember to place the

</CENTER> tag before the point where where you no longer want the part of your page to be centred as this tells the browser that you no longer wish your page to be centered. To have text centred just replace the image tag with a text tag and write your text.

How to insert a horizontal line in to your page

This is really easy. Just type

<HR> at the point where you want the line. Here is an example:

To change the size to 50% type

<HR WIDTH=50%> and here it is:

Now you need to end the page. Have you noticed how on most tags (E.g the 'FONT' tag) where you no longer want to use it's properties a

</tag> (E.g '/FONT') is used. To close a page type the following at the bottom of the page:

</BODY> </HTML>

Then go to save-as. Make sure that you are saving the document as 'text only' format. Type in your name and then type '.htm' or '.html' it doesn't matter which one. Then save it in the folder that you created. Make sure you save it in the same directory as you're other stuff. REMEMBER WHERE YOU SAVED IT. To view open up your web browser and in the file menu there should be an option similar to 'open file' press on that, find your document and press open. Voila

Now go away and experiment with these basic tags and when you are familiar with them go on to the advanced pages.