How to Create a Web Page

10 Easy Steps for Teachers

 

STEP 1: Why would you want to do such a thing?

Before you start your page, you have to think about what information you are putting there, why you are putting it there, and who is going to find it useful. Also, remember that the WWW can be accessed from any country, anywhere in the world – where is your audience? Some ideas:

What?

Why?

Who?

Where?

Schemes of Work.

To share with other teachers.

Music teachers, PGCE students.

UK.

Information about your Music department – courses, examples of work (audio files).

To give information about how great your department is (advertising?).

Parents, Local Community, Prospective teachers, Foreign applicants.

UK & International.

Personal page.

Just for fun, share photos, or put your resumé online.

Friends/family, prospective employers.

Local Community, National.



STEP 2: Check your equipment

The great thing about building a web page is that, unless you have a clockwork PC from the 1920’s, you should have everything you need already installed. The most important things are:

Text Editor: Notepad, Wordpad, or MS Word.

Browser: Internet Explorer (IE) or Netscape Navigator (up-to-date versions are better).

Q. How do I find Notepad?

A. Open up your browser (IE) and point to View on the menu bar, then click View Source. This should open up your default text editor – usually Notepad.

Q. What’s all this text in Notepad then?

A. If you did View Source from a web page (i.e., you were in the University of Bristol web site) you should see all of the HTML which was used to create the page, which leads me nicely on to…..

 

STEP 3: How to tell your PC what your Web page should look like (HTML)

Hypertext Markup Language, or HTML, sounds much worse than it really is. You don’t need to learn weird computer language, just a few basic text tags. The tags all have to be written in pairs – for example the title of my page (which appears right up the top above the menu bar) appears like this:

<TITLE>Matt's Guide to Creating a Web Page</TITLE>

As you can see, it’s not brain surgery. Just make sure the 2nd tag has a forward-slash at the start (bottom-right of the PC keyboard, next to SHIFT). There is a basic layout to any web page that is written something like this:

You can see that the code starts and ends with <HTML> </HTML>

The top of the page has the <TITLE> tags that are in between two <HEAD> tags.

The section you will be dealing with most is between <BODY> and </BODY>. This is where the "visible" page is described.

Q. How do I view this code as a Web page?

A. All you have to do is open the html file in the browser window by clicking FILE and OPEN and selecting the document.

Q. How do I save a file as html?

A. In Notepad click FILE and SAVE AS. Make sure the file type says "Text Document" and put ".html" after the file name. So, if my file is called "index" (the first page usually is) I would type "index.html" to save it.



STEP 4: Please can we do something interesting now?

Of course, now the basics have been covered you can do things like change the colour of your page, add text, and add images.

Some of the tags can be given extra goodies that specify more detail. For example, the <BODY> tags can also include information about the background colour of the page. I could change my basic tag to this:

<BODY bgcolor=yellow>

There is a list of colours that you can use in the <BODY> tag, as follows:

Black, White, Aqua, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, and Yellow.

 

STEP 5: Big deal, text me

OK, before we go any further I have to point out the spelling of certain words. As you may have noticed, you have to spell "colour" as "color". I think we both know that it has a "u" but I’m afraid the Americans don’t.

Let’s decide on a font colour for our page, like this:

<BODY bgcolor=aqua text=red>

So, assuming you followed all the steps so far, your page will turn out like this:

You can see my title (Matt’s Guide to….) at the very top of the menu bar. The background colour (bgcolor) is a lovely shade of Aqua and my text is undeniably Red.

Q. What if I want more colours to choose from?

A. You will have to consult a colour chart of which there are many on the web. Try Webmonkey’s page (www.webmonkey.com).

[http://hotwired.lycos.com/webmonkey/reference/color_codes/]

If you use a colour chart, then you need to find the hexadecimal number that specifies the exact colour. Aqua is also written as #00FFFF, and Red is #FF0000, so your body tag could end up looking like this:

<BODY bgcolor=#00FFFF text=#FF0000>

But it also looks more complicated, so let’s stick with our basic list for now.

 

STEP 6: Let’s play TAG

There are many tags that you can use on their own – not just within the <BODY> tags. They all work in pairs. Here is a basic list:
<H1></H1>
Creates the largest headline		 <H6></H6>
Creates the smallest headline
<B></B>
Creates bold text		 <i></i>
Creates italic text
<FONT size=?></FONT>
Sets size of font, from 1 to 7 		<FONT color=?></FONT>
Sets font color, using name or hex value
<P></P>
Creates a new paragraph		 <P align=?>
Aligns a paragraph to the left, right, or center


Here’s what they look like in action:

N.B. Each line is separated with the <P> tag (new paragraph)



STEP 7: More Tags

Here are a few more tags that will help to shape your page further:
<BR>
Inserts a line break		 <CENTER></CENTER>
Aligns anything to the centre
<HR>
Inserts a horizontal line		 <HR width=?>
Sets width of line (as percentage or absolute value)
<IMG src="name">
Adds an image		 <img src="name" align=?>
Aligns an image
(left, right, center, bottom, top, middle)

<img src="name" border=?>
Sets size of border around an image

 <A href="nextpage.html"></A>
Creates a hyperlink

You don’t have to write separate tags if you are doing more than one thing. If I wanted to add an image, align it right, and give it a border I can do it all in the same tag, like this:

<IMG src="mypicture.jpg" align=right border=10>

 

STEP 8: It’s all getting a bit tricky

There are lots of things to remember so far, so here’s an example of how some of the tags can be put together:

Here’s what it looks like loaded into the browser:

 

STEP 9: Put it on the Web

We have managed to cover most of the basics without even connecting to the Internet! There are many advantages to practising offline, but it is easy enough to get your page on the Web. To do this, you have to transfer all your html files and pictures to a host via the Internet. The host computer is permanently connected to the WWW and will allow anyone to access your page. Some examples of companies offering free hosting are:

Tripod [http://www.tripod.lycos.com]

Yahoo Geocities [http://geocities.yahoo.com/]

Free hosts tend to put adverts on your page, which is the only disadvantage. As a bonus, they make it very easy for you to transfer your files.

You could splash out and pay for Web hosting, which isn’t always that expensive. You can find loads of hosts if you search under "Web hosting" on Yahoo or Google. The only problem is that you often need a special FTP program (File Transfer Protocol) to load up your files. There are a few programs that you can download for free:

WS_FTP LE [http://www.ftpplanet.com/download.htm]

FTP Explorer [http://www.ftpx.com/download.html]

LeechFTP [http://stud.fh-heilbronn.de/~jdebis/leechftp/downloads.html]

 

STEP 10: Explore

It’s impossible to include everything you may need for your Web page. If you get stuck, the best thing to do is to search for the answer. Type your question into Yahoo or Google and you will find that many other people have been there and done that! To save you time, here is a list of sites that will teach you HTML tricks for free:

Webmonkey [http://hotwired.lycos.com/webmonkey/]

HTML Goodies [http://www.htmlgoodies.com/primers/primer_1.html]

HTML Cheat Sheet [http://hotwired.lycos.com/webmonkey/reference/html_cheatsheet/]

University of Bristol [http://www.bris.ac.uk/is/selfhelp/learningmaterials/webtutor/]



Glossary

Audio files

Music or sound that has been recorded in a digital format. Common file-types for the Web are MP3, AIFF, WAV.

Browser

The program used to view Web pages. The two most commonly used are Microsoft's Internet Explorer and Netscape's Navigator.

Color

The Web spelling of "colour"

Forward-slash

One of these: /

FTP

File Transfer Protocol. A computer program that lets you transfer your files between your PC and your Web site.

Gray

The Web spelling of "grey"

Hexadecimal

A shorthand way of naming a wide range of colours in computer language. Example: Red=#FF0000.

Host

The remote computer where your Web page files are stored and accessed by Internet users.

Host company

A company that offers to host your files (some free, some charge).

HTML

Hypertext Markup Language. The text-based code used to create Web pages.

Hyperlink

Where HTML has been used to direct you to a new page, by clicking on text or pictures. Example: clicking on "next page" takes you to the next page of the Web site.

Index

Usually the name of the first page in your Web site (index.html).

Offline

When you are not connected to the Internet (via a modem). The opposite of "online".

PGCE

Post Graduate Certificate in Education. An academic qualification and course for trainee teachers.

Tag

The small elements of HTML - often in pairs. Example: <HEAD></HEAD>

Text Editor

A simple program that allows text to be saved as ".txt" files. Used to write HTML, though files must then be saved as ".html". Examples: Notepad, Wordpad. Word Processing packages, such as Microsoft Word, can also be used.

WWW

Abbreviation of the World Wide Web.

Top