Basics
of Making Web Pages
This assumes you have Word (though not
everything here exists in all versions of Word), and Internet Explorer 4 or better.
The Labs have Windows and Word XP, while most of us probably have older
versions on our own machines… At present I haven’t the time to try to write all
this with attention to both, so you need some computer common sense as well!
Making and publishing a Home Page
Start by word processing your base or 'home'
page, from which you can connect to all the other pages you write, and make
links to internet sites etc. This page should be saved under the name index.htm.
Note that what is called a 'page' on the WWW can be any length, not really just
one page. It is a file rather than a page. Use File...Save as... to save
it from Word under the name index.htm, as an HTML file.
As soon as you start to make a page, if you
have not opened it as a webpage in the first place, save it as HTML so that you
are working on it within Word as an HTML document (ending .htm) rather than a
Word document (ending .doc). It is then stored in quite a different way by the
computer – in the format which Internet Explorer (or Netscape) can make sense
of. The difference may not seem obvious at first, but in fact the toolbar at
the top is a bit different, and a number of the options within menus are
different. If necessary right click on the toolbar at the top of the window and
choose to have the Web and
Web tools bars. What you see on screen may not look much different from
when you ordinarily word process in Word, but in fact there are differences in
what effects you can get and print out in a Word processed file and what you
can get on a webpage.
Always save your homepage, and any other
files of yours that you connect to it, including picture files, sound files
etc., in your myweb directory/folder on your m drive. You can
also keep copies on disk or elsewhere of course. The reason is that this is how
your page gets published. Anything that you put in the folder 'myweb' in the
file called 'index.htm' appears, by courtesy of the University, on your
personal website on WWW for all to see if they look at address http://privatewww.essex.ac.uk/~name/
(where instead of 'name' you put your own university email username). If you
can't find a myweb directory on your m drive, note that you cannot create it in
the usual way you create new directories/folders. It has to be created by a
special command: full instructions are available from the Computing Helpdesk.
Alternatively, of course, you can publish your page independently of the
University via an internet service provider like Freeserve or Virgin, if you
have joined them.
What you put on your website depends on its
purpose. You may want to do a personal one, describing yourself, airing a topic
you are passionate about (e.g. your family, favourite pop group, addiction to peanut
butter and prune sandwiches, or whatever,.....) or giving personal links to
other pages. However, we are concerned here more with a teacher Web site, as a
CALL focus for his/her class/school etc. see my page http://privatewww.essex.ac.uk/~scholp/callcreate.htm
for suggestions.
You can type your homepage from scratch, or
use a ready made template which you alter. There are some at http://www.aitech.ac.jp/~iteslj/Articles/Kelly-MakePage/ which have
some nice effects that you can simply alter the wording in to suit yourself.
Use File...Save as... on the top menu bar to save the page in your myweb
folder and edit it later in Word.
The Look of the Page
You can use different fonts (Times New Roman,
Courier etc.), of different sizes, boldface, underlined,
italic etc., much as in ordinary word processing by selecting from the
toolbar. Via the menu option on the top of the Window Insert....Symbol...
you can get extra symbols like arrows →, and letters with accents, the Old English letters,
Greek and Russian letters in the usual way. You can centre and indent text from
the toolbar.
Effects that are made use of a lot on the Web
are:
You can choose different colours for
the writing and the background instead of black and white. But keep it easy on
the eye! The underlined capital A icon on the right hand end of the toolbar,
and the one next to it, do this (or the Format menu: text colours
and background). If you go to Format...Background...Fill effects,
you get a small choice of wallpaper types for the background of your
page, instead of solid colour. Other wallpapers can be downloaded free from
sites on the web. E.g. at http://members.xoom.com/wgob_free/free/ there are various backgrounds. Choose one. Find one
you like and right click it on the mouse and save it in your myweb
directory. Then use Format... Background ...Fill effects... Other texture
in your page and select the .gif file you downloaded.
Horizontal lines are useful to make new
sections clearly distinct:
A fun thing can be a line of text that moves
across the page (sometimes called a marquee). Go to Insert...Scrolling
text and type the desired text, then OK. In recent Word, you have to
activate the Web Tool bar to find an icon to click for this. Right click on the
toolbar at the top of the window and select Web Tools: this should give you
additional facilities including the
At any point you can see what your page will
look like on the WWW. Click the Web Page Preview icon (middle of top
row). Afterwards, close that window to return to editing the page. Note that
the page will not look identical all over the world though: it depends on the browser
one is using (i.e. the program like Internet Explorer or Netscape which
displays web pages for one).
Putting in Clickable Links
The simplest webpage is just text, but the
most important thing you can add is links. Links are what makes text into hypertext.
These can be to various kinds of thing, and are inserted by first highlighting
the word(s) that you wish to become clickable, then using the Insert
menu at the top of the window in Word. Afterwards, the words you highlighted
show up blue - indicating that they are now clickable links.
a) Linking to a
site with an http internet address (=URL) on the internet. Click the
words that you want to become the link words (and so show up blue and be
clickable on the webpage). Then use Insert...Hyperlink... and in the
Link to URL space type the http:// address of the desired internet site in
the dialog box. Then OK. If you have accessed the site on the internet
recently you may find its address available to click in without typing if you
click the choice ▼ symbol beside the space. If the text highlighted is
itself a URL, that will automatically appear as the destination also.
b) Linking to
other .htm text files you have already made, also in your myweb directory. You
click on whatever word or words that you have typed which you want to become a
link to the other file (and so show up blue and be clickable on the webpage).
Then you select the menu option Insert...Hyperlink... , go to Link to
file then Browse to select your file and OK.
c) Linking to
another part of the same file you are composing. First go to the location in
the file that you want to be the destination of the link when clicked. Place
the cursor at that location and from the menu on the top of the Window choose Insert...Bookmark...
Give your location a short name (e.g. if it is section about reading tasks,
call it: reading). Then click Add. The bookmark name will not appear
overtly in the file. Just go back to where the source words are from
which the link is to be made. Highlight the link words and go to Insert...Hyperlink...
Fill in the space marked Named location in file by using Browse
to select the desired bookmark destination.
d) Linking to a
particular location within a different file of your own. A combination of the
previous two. Make sure you know the destination file, and the name of the
bookmark location in it that will be the destination. Highlight the link
word(s) then Insert...Hyperlink... and fill in both spaces. Bookmarks
appear added to URLs after the # sign. So my address http://privatewww.essex.ac.uk/~scholp/callcreate.htm#read
means 'the section of my callcreate file that is
bookmarked as 'read'.
e) Inserting a
link for the user to email yourself. Highlight any words that will be the link,
such as 'Contact me here'. Then use Insert...Hyperlink...Link to URL and
click the choice ▼ and pick mailto: after which you type your own
email address. Then when your page is up and running, if the user clicks the
highlighted words, an email window addressed to you will open for them to send
a message.
Adding Pictures and Sounds
For pedagogical purposes, or maybe just to
make things more attractive for the user, you may want to add pictures and
sounds.
a) Sounds can
easily be made to run as background when the page is accessed (if the user has speakers
or headphones: in the labs you need headphones). Click Insert...Background
sound...properties and Browse for the sound file (Or on the Web tool
bar there is an icon for this). Sound files usually end in .wav or .rmi.
Your computer
probably has a selection of sound files to choose from, but make sure the one
you want is copied to your m:\myweb directory. You can find what is already available
by going to Windows explorer and choosing via Search or Tools
to look for files of the type *.wav etc.
You can also
download free sound files from the WWW. E.g. visit http://www.vionline.com/sound.html or http://www.thefreesite.com/. Here is one. Find a
sound or tune you like and right click on it. Then choose Save target as...
a file of the same name in your myweb folder and choose it as the background
sound.
Sounds can also
be recorded by you, if you have a microphone. The Computing helpdesk sells
headphone-cum-microphone sets which plug into the machines in the labs. If in
the labs you go through Start... Programs... Multimedia... Sound recorder
you find you can record your voice and save it as a .wav file. On your own
machine Sound recorder will usually be somewhere under Programs. Click
the red circle and speak. Click the ► to play back. Save the file in
myweb. Here is a hello sound I recorded earlier.. Alternatively, while creating your
webpage you can use Insert…Object… Create new… Wave sound to get
hold of the recorder and speak what you want into a microphone to make a wav file
on the spot.
If the sound is
inaudible, go to Programs...Multimedia... Volume control and slide it
louder. Also the loudspeaker icon bottom right on your screen gets you to this.
b) Pictures (graphics)
can be readily added as background. This includes graphic fragments that may
produce a fancy line or frieze on the page, or the like, as well as pictures of
you or scenes, objects etc. They are generally in files ending in .gif or .jpg.
The ones ending in .bmp are usually rather large. Put the cursor where you want
the picture. Go to Insert...Picture and choose.
Your computer
should have a selection of clipart available.
Your own pictures
can come from a digital camera, if you have one. Or from scanning a
conventional picture or photograph into a computer file (see the facilities for
this near the Computing helpdesk on square 2).
Or copy one from
an internet site that offers free downloads, such as http://www.thefreesite.com/. You find an
image you like, right click it and Save picture as a file in your myweb
folder. Then link to it from your web page.
The above methods mean that the sound or
picture is always played/seen when the page is accessed. You can also arrange
for sounds/pictures to be hidden until a link is clicked. Just choose and
highlight the words to become the link in the usual way. Then Insert...Hyperlink...
, go to Link to file and type the name of the relevant .gif, .jpg or
.wav file. Then whenever the link is clicked the sound will play or the picture
show (in a separate window). These options are obviously useful if you want to
make the spoken version of a text optionally available to the reader, or an
explanatory picture.
HTML
You can do quite a bit just with the facilities
of Word in the manner above. As time passes, Word will add more facilities.
There are also specialist web page making programs like Frontpage, not
available in the labs at present.
However, you can do more via Word if you are
prepared to edit the HTML version of the file.
Really, when working on a web page there are
three versions of it:
Normally you don't need to look at or know
about the HTML version, but sometimes when things go wrong or you need an
effect your word processor won't create, you need to edit it directly.
A good starter explanation of HTML is at http://www.aitech.ac.jp/~iteslj/Articles/web-page/index.html and more general good links explaining HTML at http://www2.essex.ac.uk/wag/links.htm.
More advanced things you can do
include:
Dividing up the
page into areas of different colour with different text etc. in each. Frames.
Introducing
interactive features like tick boxes and spaces for the user to write in. Forms.
Many of the best effects on the WWW require
knowledge beyond HTML - of Java or CGI, which are other markup/programming
languages that can be attached to HTML, but are much more of a challenge to
learn.
Getting other People to Know about your
Pages
1) One way is to ask the Departmental web
officer to put links to your site from the Departmental webpage. Email
vcook@essex.ac.uk. Or your supervisor may do the same from his/her webpages (as
I do for my PhDs).
2) Another is to submit your site to
some popular central WWW site that it is relevant to, and the site manager may
create a link from there to your site. E.g. if yours is an EFL related site,
try to get it signposted from one of the sites I listed at the start of my CALL pages
3) Thirdly, you can make your pages more
prominent to the WWW search engines. As you probably know, when one uses a
search engine like Alta Vista, Lykos etc. to find something on the WWW, one is
relying on keywords. The search engines scan the web, indexing
occurrences of keywords in pages on websites. Then, when you ask to search for
a keyword, the search engine uses its archived index of sites featuring that
word to produce the 50,000 hits it typically produces! You can make your
site more visible to the search engines by making sure the right keywords are
entered in the page. These keywords don't appear in the visible part of the
page, however, they appear in the HTML version, in the area that is not
displayed to the world. So to alter keywords you have to go to the HTML view of
your homepage (index.htm) - see last section.
At the top of the HTML version you will find
the HEAD part, beginning with <HEAD> and ending with
</HEAD>. This contains material which mostly does not appear visibly on
the WWW, and is called meta information. That means it is information about
your page rather than the contents of it. It might look a bit like this:
<HTML>
<HEAD>
<META
HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=windows-1252">
<
<TITLE>mywebguide</TITLE>
<
</HEAD>
To make your page as well marked up as
possible, add (or alter existing) lines of information with meta-tags as
follows before </HEAD>: The parts you should supply yourself are
indicated in italics.
<TITLE>meaningful page title</TITLE>
<META NAME ="description" CONTENT ="A short sentence or two describing the contents of your web
page.">
<META NAME ="keywords" CONTENT ="list
of keywords people might use when looking for pages like yours - each word or
phrase should be separated by a comma">
<META NAME ="author" CONTENT ="Your
name">
<META NAME ="reply-to" CONTENT ="yourusername@essex.ac.uk">
<META NAME ="robots" CONTENT ="all">
PJS Mar00