TK For Kids - How To Make A Website

INDEX

HOME

About Site

Calendar

Chat Room

Downloads

Games

Homework

How 2 Guide

Map Club

News Room

Newsletter

Notice Board

Web Search

Your Email

Guestbook

TK Toolbar

TK Shop

Parents Page

Site Terms

PrivacyPolicy

TK Survey

Site Map

OnlineSafety

Report Errors

TK For Kids - The How Too Guides :: HTML Website

Below is an easy step by step guide to how to make a website. This set of instructions can be used if you are typing out the HTML code. This can be done in Notepad, Wordpad, Microsoft Script Editor, FrontPage.

Creating a new webpage
Open a blank document. Save it and give it a file name. Add l to the end of the file name. Type out the following at the top of the document (you can copy this if you want.):

<html>
<head>
<title>YOUR TITLE HERE</title>
</head>
<body>

Give a couple of enters down at this point. Here is where the main body of your website will be.

</body>
</html>

This is saying that it is a HTML (Hypertext Makeup Language) document. The title of the document is what ever you want. This can be viewed at the top of your web browser. The body is the main part of the document. The forward slashes "/" means end. Now save the changes. Tip: Your home page must be called "index", this is so your Internet browser knows what page is home. This may seem quite complicated, but just take it one step at a time.

Now open your file in an internet browser. You should see a blank page (white screen) with the title you gave your page at the top.

Background Colour
Copy the following code into the body of your HTML document.

bgcolor="# "

After the hash key "#" is where you put a combinations of 6 letters and numbers to create a colour, e.g., #FFFFFF is white, #000000 is black, #003366 is navy blue. Try different combinations and see what colours you get. Remember to save your document as you go. Refresh your internet browser to see the changes.

Typing text
To type text on your website, you will need to type out the following in first (between <body> and </body> otherwise it wont work). YOUR TEXT HERE

This means that your text will be in font "Times New Roman", a size of "3". you can change the name of the font to what ever you want as well as the size. Note: the name of the fonts can only be "True type fonts". Tip: Size 3 font is equal to size 12 in most word programs.

To make your text bold, type  </b> around the text you want bold, YOUR BOLD TEXT HERE

An example is as follows-YOUR TEXT HERE

This code will display the following- YOUR TEXT HERE -where "TEXT" is bold in between "YOUR" and "HERE".

To change the colour of your text, type out the following code after size="3" before the ">":
color="#000000"

e.g. 

To change colour in a section of text, you will need to end one section and start another.

e.g.
YOUR TEXTHERE

Note the change of colour and text font around "TEXT". This code above would look like the following: YOUR TEXT HERE

Use the above example to see what combinations you can create. Remember to save your document as you go and to refresh your internet browser to view the changes. Some other things you can try out is "" "" for italicised words and "" "" for underlined words.

To paragraph your work you will need to type add this code around your paragraph: "" ""

e.g.
 YOUR TEXT HERE YOUR TEXT HERE

would look like this:
YOUR TEXT HERE

YOUR TEXT HERE

For a new line, you would use " ".

e.g.

YOUR TEXT HERE YOUR TEXT HERE

would look like this:

YOUR TEXT HERE

Inserting Images

Before you can put images on your page, you will need to put your images into a folder or in a location that you will be able to remember to upload when you are uploading your webpage. Usually a folder is created in the same location as your HTML document. Once you have done this you can copy this code into your document where you want your image to be located.

<img src="/THE FOLDER/FILE NAME.EXTENSION" width="93" height="97" border="0" alt="THE IMAGES NAME" >

The extension of the file name is the last three letters e.g., file a file name of .gif or .jpg. The different formatting on these file is important. Gif is quick to load and is good for things with not much mixed colour (e.g. the buttons at the top of this page). Jpg is good for photos or image with high colour content (e.g. our logo at the top of the page). You can change these formatting using paint, or graphic workshop program.

The width is how wide your image is (in pixels), and the height is how high the image is (also in pixels). Ten pixels make up the full stop at the end of this sentence. If you want a border around our image, you can type a number for how thick you would like it. a border of 0 means no border. Alt is where you give your image a name. this is if someone does not want to view the images, they can read what the image is.

Src is the location of your image. first come the folders name, followed by the file name of the image.

Adding Hyperlinks

In-between <body> and </body> you can add a hyperlink around a word or an image. A hyperlink is the link between two web pages or another site. You can do this by copying out this code or pasting it into your document:

Below will hyperlink text:

<a href="http://www.WEB ADDRESS HERE">TEXT HYPERLINK HERE </a>

The code above will look like the following when added to your document.

TEXT HYPERLINK HERE

Once again you can change the text colour to match the theme of your site.

Below will hyperlink an image:

<a href="http://www.LINK LOCATION"><img src="IMAGE LOCATION" width="62" height="62" border="0" alt="IMAGE NAME" ></a>

You can also get people to email you by using the following:

<a href=mailto:EMAIL@ADDRESS>TEXT HYPERLINK HERE</a>

Justifying Text

You can aline your text on your webpage simply by placing "<center>", "<right>" or "<left>" around the text or image. Try placing the following code around some text in your HTML document. Remembering to save the changes and refreshing it in our browser window:

<center> </center>

E.G.: <center> YOUR CENTRED TEXT HERE!</center>

The above code will look like the following in your document.

YOUR CENTRED TEXT HERE!

Bulletpointing Your Work

To Bullet point your work copy this code below and place in your document. Bullet points are used to list items:

<ul><li>YOUR BULLET POINT TEXT HERE</li></ul>

For multiple bullets, copy and past the above code several times under each other but removing the </ul> on the one above and the <ul> on the next one down. E.G.:

<ul>

<li>YOUR BULLET POINT TEXT HERE</li>

</ul>

The above code will look like the following when pasted into your document. Remember you can change the text to what ever you want.

YOUR BULLET POINT TEXT HERE
YOUR BULLET POINT TEXT HERE
YOUR BULLET POINT TEXT HERE

Adding Web Dividers

A web divider is used to brake up text with in a document. To add a simple web divider, type out or copy this code:

<div align="center"><hr size="2" width="90%" color="#000000" noshade></div>

The above code will look like the following:

This is just a plain straight line. By change the width (%) will increase or decrease the line size. For a flasher one, type out or copy this code. Try changing different number values to see what you get.:

<div class=MsoNormal align=center style='text-align:center'><span

style='color:windowtext'><hr size=7 width="90%" align=center></div>

The above code will look like the following:

Headline

Headlines can be used to create headings and titles of documents:

<h1>HEADLINE TEXT HERE</h1>

To create a smaller headline, change the number after the "h". The bigger the number the smaller the headline is. Give it a go and see what you get.

Colours

There are many different colours. Below is a list of some colours and there codes available. The colour codes are called "hex codes".

RED	#FF0000
YELLOW	#FFFF33
GREEN	#66FF00
PURPLE	#FF66FF
BLUE	#0000FF
CYAN	#339999
L. BLUE	#66FFFF
D. RED	#990000
ORANGE	#FF6600
LIME GREEN	#CCFF00
WHITE	#FFFFFF
BLACK	#000000

By mixing different letters and numbers together, you can create your own colours.

Checking Your Work

You can check your work by opening your web browser, and opening your file. If everything looks like it should, then you can keep working on it or you can upload it to the Internet. Remember, not everyone has a fast computer / modem, so you shouldn't get to flash!

Uploading Your Work On The Web!

Remember you should ask an adult to help you upload your work.

To upload your work, you will first need to find a web host. You will need to create you own domain name, this will be generally what your website will be about. E.G.

YOUR_ DOMAIN_ NAME.tiki.com is what it would look like if you were using us as a web host.

Once you have created your domain name and have finished, you will need to now upload all your file. This includes creating folders on the internet for where your images are to be uploaded. By clicking on Browse you will be able to choose your files off your hard drive. For some web hosting website, may need to go to something like, "Quick Upload". Keep uploading all the files that you have created until you think you have finished. You can check by going to your own website, and seeing if everything looks like it should, if not, you should try and upload those files that do not work.

There are some great free web hosts out there like www.geocities.com and www.freewebs.com . When your website is up on the internet, feel free to email us and we'll have a look. Good luck and all the best for your site.

Notes:

Remember it will take months for you to create the perfect website. There will be a lot of trial and error to try and make this thing work. If things don't go right, or things get to tough, keep at it and don't give up.

Help support TK For Kids - When you have completed your site add this code below to the bottom of your HTML document or copy the text in the table.

<a href="http://tkforkids.webs.com/"> Website helped by TK FOR KIDS , Free online web design and much more!</A>

TK For Kids - Info Board

International News

TK For Kids Ads

TK For Kids Advertisements