Teach Yourself Hypertext Markup Language (HTML)

You’ve had a play on / done some investigative research into the World Wide Web.
You’ve begun to recognise its potential. Now you want / need to learn to write material
for this marvellous medium yourself! Where do you begin? The best help is already
written on the Web itself.

What is HTML?
HTML is a simple computer language which allows documents to be read on all
‘browsers’ (this is the program which sits on your computer and enables you to read
documents on the Web, for example, Explorer and Navigator). HTML is a system of
tags or codes that are universally recognised by browsers which then ‘translate’ the file
into a readable document whatever the computing ‘platform’ (e.g. PC, Mac or Unix). The
tags also allow for the most important feature of the Web, the links, to be added. These
are the ‘hot words’ which will take the reader from page to page.

How are the codes/tags inserted?

At the simplest level you can do this ‘by hand’, i.e. by taking a word-processed
document that has been saved in a plain text format (the simplest format also known as
an ASCII or .txt file), and adding the relevant codes or tags in the correct places in your
document.

At a slightly more sophisticated level, there are ‘editors’ that will insert these codes for
you. These are programs such as Dream Weaver, Page Mill, Front Page, (there are
many more), which will take a word-processed document and re-create it as a Web page
for you (give or take a little adjustment).

At a still higher level, there are programmes that will allow you to author more complex
documents which can for example include the facility for students to mail to you replies
to questions posed in an on-line course; or make use of audio or animated files.
Incorporating media such as these into a course delivered via the WWW obviously make
the learning experience more interesting or satisfying for your students than would a ‘flat’
page which contains information in much the same format as in a book. Even with flat
text however, there are boundless possibilities of linking to other sources of information
(but we’re running before we can walk!)

There is no point in me writing a step by step primer to writing HTML, as this has already
been done by better qualified people. All the information is already there on the web.
Probably the best place to start is by working through ‘Writing HTML - a tutorial for
creating WWW pages’. This is a great beginner’s primer and is how I learned the
basics. It also has some links to sites that will show you how progress to being an
advanced writer.

http://www.mcli.dist.maricopa.edu/tut/

There’s also a course of instruction on using the Internet, The Online Netskills
Interactive Course (TONIC). TONIC is an easy-to-understand, structured course,
offering step-by-step, practical guidance on major Internet topics, ranging from basic
through to advanced - according to its promotional material! The course as a whole is
intended for beginners to networking, but who have some familiarity with computers It’s
free for UK HEI academics to sign up to.

http://www.netskills.ac.uk/TonicNG/cgi/sesame?tng

Have a quick go at writing a basic page now:

♦ First launch your web browser by going to ‘Start’, ‘Programs’ and ‘Internet Explorer’.

♦ Now go to the MBChB homepage by typing in the address (URL):

http://medweb.bham.ac.uk/mbchb/

♦ On the top toolbar of Explorer, go to ‘View’ and ‘Source’.

A new window will launch with the Notepad text editor, and you will be able to see
the underlying codes that instruct the MBChB Homepage to look as it does.

Note all the HTML codes are enclosed in brackets <> and include a start command
and a finish command. So for example, to make text bold, type <BOLD> before the
start of your bold text and </BOLD> when you want the text to stop appearing in bold
font.

You can look at the underlying codes for most pages in this way, so if you find a
page and want to imitate the colours or fonts, it is easy to copy the tags.
Now write your own page:

♦ Go to ‘Start’, ‘Programs’, ‘Accessories’ and ‘Notepad’. (Notepad is a plain text

editor).

Remember from the introduction above, HTML code is basically is a series of ‘tags’
attached to plain text. Every HTML document must include certain tags, and you will
learn these if you follow one of the suggested on-line tutorials above.

♦ In Notepad type in exactly

<HTML>
<HEAD>
<TITLE> This is the text that appears in the very top blue toolbar</TITLE>
</HEAD>
<BODY>
<P><H1>This is the title in larger font</H1>
<BR>
<I>Now let’s have some italics</I>
</P>
</BODY>
</HTML>

♦ Now save your work e.g. – save it as your name in ‘C drive’, ‘My documents’. Name
the suffix of the document .html

♦ Now go to ‘Start’, ‘Programmes’ and ‘Windows Explorer’

♦ Double click on your .html file. The Explorer web browser should launch and you
should see your page. Remember that the rest of the world cannot view it yet, as
you have to mount it on a server.
Now we can add an image

♦ Go onto the web and copy an image (see below for instructions on how to do this)
Save it in the same place as your .html document. (e.g. C drive, ‘my documents’
folder)

♦ Hit the ‘Back’ button (a left pointing arrow) on the browser until you see your new
page again. Go to ‘View’ and ‘Source’ to reopen the Notepad version of your work.

♦ Now add in the code to include an image:

After the </P> tag, and before the </BODY> tag add in

<P>
<IMG SRC=”type in the name of your image”></A>
</P>

NB replace the underlined text within the speech marks with the actual name
and suffix of the image you chose (e.g. mbchb.jpg).

♦ Chose ‘File’, and ‘Save’ to save these changes to your .html document.

♦ Now go back to your page on the Explorer Browser. If you cannot see the changes
(ie the picture you have just added) then hit the ‘Refresh’ button.

Next Add a Hyperlink

♦ Go back and reopen your document again, and add in the code for a hyperlink. This
is the bit that gives the World Wide Web its name – and after this your document isn’t
a flat page that could just as easily be a printed page - it’s a hypertext document.

♦ After the last </P> tag, and before the </BODY> tag type in

<P>
<A HREF=”URL of the page you want to link to”>click here</A>
</P>

NB replace the underlined text within the speech marks with the exact URL or
address of the page you wish to link to
E.g. http://medweb2.bham.ac.uk/mbchb/index.html.

Instead of the text ‘click here’, you can type any text that you wish to be the link
which is clicked on.
♦ Chose ‘File’, and ‘Save’ to save the changes to your .html document.

♦ Now go back to your page on the Explorer Browser. If you cannot see the changes
(i.e. the hyper-link you have just added) then hit the ‘Refresh’ button.

How to copy images from existing web pages

Place your cursor over the image, click on the right hand mouse button and chose ‘Save
picture as’. Complete the dialogue box and tell the computer where you want to save
the file and if you want to, rename it. It is then possible to place the image in your own
pages, or to first amend it via Paint Shop Pro or Photo Shop or similar graphical
manipulation packages. Remember that the page may state that an image is
copyrighted.

How to get pages mounted on a server

Once you have written your pages, you will need to get them mounted on a server so
that they are accessible for viewing by others. Depending on the type of material it may
be appropriate to pass it to your Medical Education Developer to mount on the MBChB
site or liaise with the Trust’s IT department to mount it on the Trust Intranet. If the pages
are of a more personal nature, there are commercial service providers who often provide
a limited amount of server space free of charge. E.g. Yahoo Geocities at
http://geocities.yahoo.com/home/

Please note that this is the first draft of this guide, and I welcome your feedback. Is this guide
written at the right level and does it include all the topics for you to be able to write HTML pages for
your undergraduate teaching activities? Please let me know:

Bev Merricks, Medical Education Developer

Selly Oak Hospital Undergraduate Centre
Tel: 0121 627 8695 (internal X52162)
Email: [email protected]