|
|
|
|
|
|
|
|
|
|
|
|
|
|
In these tutorials you will produce a small set of HTML web pages which:
The Tutorial exercises
|
An appeal: |
|
These exercises have been written on the assumption that you have already worked through the email Trail and, more importantly, the Internet Trail. Material here builds on those trails. You should therefore already know how to:
|
These tutorials are designed to take about 16 hours work (ie 4 weeks' practical work for the year-long module and 2 weeks' for the semesterised version). The 16 stages are very unequal in effort so a suggested schedule is given below
|
week 1 |
Exploring HTML |
1:Concepts, 2:Basics, 3:Practice, 4:Preparation, 5:Modification |
|
week 2 |
Build your own page |
|
|
week 3 |
More HTML |
|
|
week 4 |
Tables and clickable images |
There are very many resources already written which allow the user to learn HTML skills and concepts. To avoid unnecessary duplication this guide makes use of a few of them. Additional resources which you might want to make use of are given at the end.
|
For this module you are expected to work through the material identified in the set stages. Other resources are identified only for your interest - or, in some cases, for extra help. |
Read the following descriptions. You may not fully understand them initially but read them now and come back to them again later.
|
A note: |
Read and try out the ideas in this tutorial. You will find this by far most useful if you do this work online.
|
A Quick Guide to HTML by John English |
|
|
available either on MIS PC network at URL
j:\burks\internet\web\quikhtml\quikhtml.htm
or externally on the Internet at URL http://burks.bton.ac.uk/burks/internet/web/quikhtml/quikhtml.htm |
covers: |
|
This allows you to try out HTML tags and see their effect as you work through the tutorial. Nice! If you've never worked with HTML before you may find it useful to print this out for future reference. It's only 7 pages long. |
|
The structure of an HTML document is thus:
|
<HTML> |
-- |
start of HTML document |
||
|
<HEAD> |
-- |
start of document header |
||
|
<TITLE> |
-- |
start of window title (optional) |
||
|
........ |
-- |
window title |
||
|
</TITLE> |
-- |
end of window title |
||
|
....... |
-- |
header contents (if any) |
||
|
</HEAD> |
-- |
end of document header |
||
|
<BODY> |
-- |
start of document body |
||
|
........ |
-- |
body contents |
||
|
</BODY> |
-- |
end of document body |
||
|
</HTML> |
-- |
end of document |
Note HTML tags have one of 3 'styles':
|
style |
example |
|
|
<TAG> |
<HR> |
tag has no content |
|
<TAG>...</TAG> |
<H1>...</H1> |
tag has content and must have a matching end tag |
|
<TAG>...[</TAG>] |
<P> or <P>...</P> |
tag has content - but the end tag is optional |
|
Reference List: |
Stage 3 - Work within John English's tutorial
The above tutorial allows you to try out HTML within the safety of a demo window. Make sure you try out at least some facilities there. You're not actually building a permanent web page (wait a little longer) but by doing this you will develop a much better understanding of how these HTML tags work.
Stage 4 - Preparing to build a page
You need to know some implementation points before you can actually build a page of your own
|
Whilst you construct your web pages you should store your work on a floppy or your H: drive. You can test them from there - see the last point below. However, when you are happy with them, you are going to put them on the School of MIS' student intranet web server 'Calcott'. |
|
You will be constructing your web pages on a Windows system which is not case-sensitive. However you will be publishing them onto Calcott which uses linux operating system (a copy of unix). Linux (and unix) is case-sensitive so upper-case letters are treated as being different from lower-case. I would advise you to work with lower-case filenames in your pages, and to ensure you make the filenames lower-case when you put them on Calcott. |
|
HTML files have a file extension of either .html or .htm. |
|
You need to get an account to be able to put your web pages on Calcott. To do this follow the instructions from Calcott's main page at 'http://calcott.mis.coventry.ac.uk/' This will create a directory for you, with your login-name as its name. This has a sub-directory in it called 'public_html' which contains a single starter file 'index.html' |
|
You need to use an 'ftp' program (file transfer program) to copy your files from your floppy or H: drive onto Calcott into your 'public_html' directory. Your homepage should be called 'index.html', which overwrites the default 'index.html' file. Don't forget to ensure your filenames are all lower-case. A little guidance on this publishing is available from Calcott's main page. Step-by-step instructions for using the ws_ftp program are available. |
|
You can use Netscape to check out your pages during construction - simply enter 'h:\homepage.htm' (or whatever) as the URL. Netscape may convert URLs for you. A Windows file with directory name dividers of '\' will be converted by Netscape to '/'. Similarly 'h:' may become 'h|'. Don't get fazed by this. It's a result of most web servers using unix |
If you have created web pages using HTML before, maybe on another module, then revisit the web pages you created then. Otherwise move on to stage 6.
Stage 6 - Now - Build your own Home Page
You will be publishing onto the School's student intranet. This is exactly the same as if you were truly publishing pages onto the world-wide Internet - except this way we need be a little less concerned about the University's 'image', confidentiality, libel and so forth. However, despite this, you can access 'the world's' pages - it's just that the world can't access yours.
...but first you create your pages on a floppy or your H: drive
You need to use some form of editor (basic wordprocessor) to create your pages. I anticipate you will use Windows Programmers File Editor (PFE) or Notepad. You need something which can create text files with an .htm file extension. You could use Word provided you are careful to save the files as text.
|
If you are working in Windows 95 or NT you may have access to Wordpad. This can also be used. It is a little more sophisticated than Notepad as it includes search and replace facilities. However I find it far too slow. Don't use Notepad on the University's systems since it does not print out files properly. |
|
There are a number of HTML editors available. Some of these are available for free. Some of these are (approximately) WYSIWYG. They vary in the HTML facilities they understand and can incorporate - they vary in their robustness. It is however useful if you start your Web authoring by working directly with the HTML tags. The experience will help you understand what is going on if you later use an HTML editor. My experience of using such tools has not been happy. Better, more reliable tools are becoming available. For now, you need to be able to use the HTML codes even if you find an HTML editor which will do some of the work for you! |
When designing web pages it is usually best to keep the individual pages short - and then link several of them together. This allows readers to load up only those parts in which they are interested - it keeps them interested and reduces loading times.
For now then - short pages - two or three screens long at most.
Now for the hard bit: decide what you want to say on your web page! At the very least you should include: your name, your course and some of the things which interest you. Also include a 'mailto:' email link (similar to this <A HREF="mailto:L.Payne@coventry.ac.uk"> L.Payne</A>). The precise content of your page does not matter at all but keep it small and simple to start with.
Stage 7 - Designing linked pages
Every set of linked pages needs to have a home page. This is the page where you expect visitors to start their search. It is important that visitors can easily move between your pages; that they are linked in clear ways allowing visitors to move around in ways that they want - that the information content suggests.
The diagram below illustrates the structuring of one modestly-sized web site.
|
Schematic layout of a large web collection, showing the HTML-coded hypertext relationships between the home page, the top-level organizational nodes, and other elements of the collection. The solid lines indicate main links between items within the hierarchical (or linear) structures, while the long-dashed lines indicate links between "siblings" at the same level in a hierarchy. The arrows indicate the possible directions of the links, as coded into the HTML anchor elements in the documents. The short-dash lines indicate links to general-purpose pages - note that these hypertext anchors are unidirectional, since it is unreasonable to code in all possible return paths. |
from Ian S GRAHAM (1996), HTML Sourcebook, 2nd ed, Wiley
All the pages you build will be in a single Windows subdirectory h:\html\. For now you've got one file index.htm. You now need to build at least one other page which will link to your index homepage.
Using the notation shown earlier, this is:
|
You should at least build 2 pages with links to each other, link one of your pages to another student's page and include at least one link to an external web page's URL. |
Stage 9 - Trying some more HTML tags
Try the effect of these HTML tags in your pages
Examples:
|
#FF0000 |
|
#FFFFFF |
|
||||
|
#00FF00 |
|
#000000 |
|
||||
|
#0000FF |
|
#006BA5 |
|
| black | navy | silver | blue | ||||
| maroon | purple | red | fuchsia | ||||
| green | teal | lime | aqua | ||||
| olive | gray | yellow | white |
http://swift.mis.cov.ac.uk/~csx067/picker/colour.htm or http://www.digits.com/chart.html
Stage 10 - Linking within pages - using anchor names
In stage 8 you built links between pages. However you'll often want to link within pages or to a particular point on a page.
There are two parts to this:
1. Provide named anchors at the places you want to be able to jump to using
<A NAME="AnchorName">....</A>.
'Something' needs to be held between the tags - usually this will be a sub-heading but it could simply be a word or image.
2. The URL link needs to use the anchor name - preceded by a '#'. If the link is within the current file then the file name does not need to be given.
<A HREF="filename.htm#anchorname">...</A>
<A HREF="#anchorname">...</A>
|
Include links within your pages - maybe include a 'contents list' at the top of your homepage to provide links to its sub-sections. |
Stage 11 - Using Graphics Images
Images on web pages must be in a suitable format. At the current state of technology this means that they should be in either .GIF or .JPEG file format. (.PNG is becoming available.) These formats have different properties:
To start with, 'borrow' images from an existing Web page. Use the right mouse button to allow you to save the selected image into a file. (When saving the file be sure you keep the same file extension as the original image)
Images can be created using any graphics software and converted into the appropriate Web format. Paintshop Pro can be used to create some forms of images and can perform conversion of many formats ready for your web page. It is useful to know the size of your graphics images. To do this you'll need to use some graphics software (such as Paintshop Pro).
Work through 'Inline images' based on Mark R BROWN & Jerry HONEYCUTT (1997).
|
Ensure your HomePage includes at least one image. This can be 'borrowed' from the internet if you wish. However - to avoid plagiarism - you should always acknowledge borrowed items. |
If you feel so inclined you could try creating a trasparent .GIF image. These images allow the background colour of the original image to become transparent and hence 'lost'. In some circumstances this is very effective. You can create your transparent .GIF using a graphics program (such as PaintShop Pro).
|
Table tutor 2.02 by Joe Barta |
|
|
available either on MIS PC network at URL j:\burks\internet\web\tables\index.htm or externally on the Internet at URL |
covers: |
|
This contains 7 very short lessons covering the concepts needed to build tables Be sure you understand the concepts marked (*) ie Intro + lessons 1-6 |
|
Stage 13 - 'Client Side' Clickable images/image map tutorial
|
Client Side Imagemaps |
|
|
on the Web at: http://www.webcom.com/html/CS_imagemaps.shtml or http://webreview.com/1998/08_28/designers/08_28_98_3.shtml |
covers: |
|
These gives a broad picture of how to construct an image map |
|
Imagemap areas can be:
|
shape |
coordinate pairs required |
eg |
|
"rect" |
upper-left & lower-right corner coordinates |
100,100, 200, 200 |
|
"polygon" |
every corner of the polygon. Note that the last pair should be identical to the first (to close the polygon) |
0,0, 100,100, 200,200, 0,0 |
|
"circle" |
centre of circle and (single value) giving circle radius |
100,100, 50 |
|
"default" |
none - gives HREF for any parts of the image not defined by the map areas |
As you'll have gathered by now, there is quite a lot to HTML - and it is growing in power and scope with each new version. To pursue this further some URL references are given below. Using books provides a structured approach to learning more but the Web itself is very valuable for learning about specific concepts and facilities.
To find out what facilities can be used, look at the HTML source for pages which you download. Such investigation can lead to much better understanding and can really enhance your creative powers. The next topic which you might like to learn about is frames.
File last modified: 6 Jan 2002
© 1998 - 2002 Lisa Payne, Coventry University