A guide to building web pages

If you look at webpages and think 'I'll never be able to do that' - think again ! There is a plethora of software to help you design websites. However, the good stuff is expensive, and the cheap stuff can be very limiting.

Another way to build your own pages is to learn the code of webpage design- HTML (HyperText Markup Language).
The advantage of learning HTML over using a software package is that you know what is happening on a page, and can make alterations and corrections easily.

The guidance below is aimed at teaching you the basics of web design using the language of webpages - HTML. You may want to print out both the web page you see, and also the code that has been used to build the page. Instructions on how to do this are given below.

To print out the HTML code used in these pages:

For internet Explorer users; press your right mouse button over these words, then highlight 'view source'. Click your left mouse button to open up a notepad window. At the top of the notepad window you will see the word edit, click on that, then highlight and click on 'wordwrap'. Left click on the word File, then highlight the word 'print'. Click, and print out the notepad.

For Netscape Users;

Once that has been done, move the mouse over these words and left click once. Then locate the print button at the top of your browser and click on it to print out this page as you see it.
Both these printouts may help you to understand HTML.

Text can be altered in size with the H1 - 6 command

Use the command <H (text size)> to open begin and </H (text size) > to end

The largest size - <H1>

The next size - <H2>

The third size - <H3>

The fourth size - <H4>

The fifth size - <H5>

The smallest size - <H6>

To start a new line you use a line break - entered as <BR>
<BR> starts a new line

<BR><BR> leaves an empty gap

while <p> will begin a new paragraph.

An exception to this rule is when you change letter sizes - it automatically begins a new line

To place a horizontal ruler across the page type <HR>

You can also place text where you want it with the <div align=" "> command

Placing text on the left

On the right

In the middle

NOTE !!!! HTML is an American Language and so center is spelt as such

To alter the style of writing you need to type the command
<FONT FACE= " type of writing that you want to use">

i.e. <FONT FACE="Arial">

You must make sure the type of writing you choose is available on most computers, or else that computer will not display your page right.
Types of writing that will work on most computers are 'Times New Roman', 'Comic Sans', and 'Arial'.

To alter the colour of the writing you need to add the <font color=" "> command (American again) after the style of writing -

<font color=blue>Writing in blue or <font color=green> or green

You can also underline using the <U> and </U> to begin and end underlining

and write in Italics using the <I> and </I> to begin and end

or even use a bold style using <B> and </B> to begin and end

maybe a combination of different styles

That is the basis of designing a web page.

Adding graphics

Pictures, photographs and other types of image can be included on a web page.

Pictures can be added as long as they have been saved as either JPG style pictures (ie photographs) or GIF images (created pictures)

Do not worry if your pictures are saved as a different format - simply load the picture then save it again in a different form

If you scan a picture into a computer it will ask you how you want to save it, at this point choose JPG or GIF

To enter a picture on screen you use the image command
<IMG SRC="name of image.JPG">
or
<IMG SRC="name of image.GIF">

You can place an image in various places, like you can with text using the
<ALIGN="LEFT">
or
<ALIGN="RIGHT">
command within the image command

So that the picture is on the left

Using the code <div align="left">

So that the picture is on the right

Using the code <div align="right">

You can also change where any text would appear around the image, so that the image can line up with the top of the text, the middle of the text, or at the bottom of the text

at the bottom of the text by typing <ALIGN="left">

in the middle of the text by typing <ALIGN="middle">

even at the top of the by typing <ALIGN="top">

Finally , to alter the size of an image you add the <HEIGHT=xx> and <WIDTH=xx> commands inside the image command

An image 100 x 100.

Code used was <IMG SRC="swlogo.gif" HEIGHT=100 WIDTH=100>

An image 250 x 250.

Code used was <IMG SRC="swlogo.gif" HEIGHT=250 WIDTH=250>

You will have noticed that the picture quality reduces when you enlarge an image, HEIGHT and WIDTH are mostly used for reducing an image size to alllow it to fit within a pre arranged web space

These are the basics of web design, and should allow you to create a basic Website

When your web page is designed and has been tested on your computer, then it is time to upload your information onto the World Wide Web. This is achieved using a piece of software called FTP (File Transfer Protocol).

You should have been given an FTP software program when you signed up with your Internet Service Provider (ISP).

Follow the instructions that come with your software and upload your pages (Techie talk for transferring the information from your computer to one at the ISP centre) onto the internet.

You should now have successfully launched your school on the Internet, Well Done !!!!

To create animated pictures requires additional software, and is best left until you feel comfortable with designing a page

I hope that these pages are a help to any ICT coordinator who is facing the task of building a webpage, and thinks that it will be an impossible task. It is easy to understand as long as you remember the basic rules and guides listed above.

Finally, if you wish to go a little further with your web designing, try a book entitled 'HTML for Dummies - Quick Reference, 2nd Edition' available at all good computer stores. I recommend this book because it is so clear, and full of examples to demonstrate how the code works.

Good luck with the designing and publishing of your webpage / website.

You can always visit our guestbook and leave a comment there.