ITNP43: INTERFACE DESIGN AND THE WORLD WIDE WEB

HTML PRACTICAL 1: WRITING BASIC HTML AUTUMN 2014

ITNP43 – HTML Practical 1

Write Your Own Web Page

LEARNING OUTCOMES
By the end of this practical you should be able to create a simple web page by
writing HTML using a simple text editor, TextPad. You will be able to specify
and format:
 Page titles
 Headings
 Paragraphs
 Inline images

SUPPORTING DOCUMENTATION
There are lots of links to information about HTML on the ITNP43 resources
page (http://www.cs.stir.ac.uk/courses/ITNP43/resources.html), or you can
search for some yourself. A particularly useful link is w3schools XHTML
tutorial located at: http://www.w3schools.com/html5/
Validation of your HTML can be done at: http://validator.w3.org/
Courtesy of VisiBone (http://www.visibone.com/), a quick popup of all
HTML tags and a useful hexadecimal-to-colour converter can be found at:
http://www.cs.stir.ac.uk/~bpg/WWWstuff/VisiBopop/deskpop.htm
There are many many web sites which offer free "clip art", where you can
obtain images that you can use in your web pages. For example see:
http://classroomclipart.com

GETTING STARTED
Although it is possible to created web pages using a WYSIWYG tool such as
Adobe Dreamweaver or even Microsoft Word, such tools do not provide the
level of control of detail that may be necessary. Sometimes you really just
need to get your hands dirty and get into the HTML code in order to produce
the document you really want. You will learn to write your own HTML
documents. You should finish this worksheet with an appreciation of how
the HTML code relates to the finished output displayed in a web browser.
 Go to Groups\ITNP43 (V drive, inside Computer) and run the setweb
program (double click it).
This has the effect of creating a folder called Web in your Documents
folder, with particular access permissions.

DEPARTMENT OF COMPUTING SCIENCE & MATHEMATICS PAGE 1 OF 6

ITNP43: INTERFACE DESIGN AND THE WORLD WIDE WEB
HTML PRACTICAL 1: WRITING BASIC HTML AUTUMN 2014

This folder is important! Do not delete it. This is where you must store your
HTML files and associated files if they are to be accessible via the web (by
specifying a URL in a web browser).
To start you off we’ve provided a template web page.
 Copy the folder WWW1 file from the Groups\ITNP43\ folder into your
Web folder in your home folder. It contains template.html (and
some other files).
This worksheet will take you through some modifications to the file
template.html, using the text editor TextPad to make the modifications.
(You may use Notepad if you prefer, but TextPad uses colouring to help
identify the structure of an HTML document).
 Start up TextPad. (You’ll find it in Start->All Programs – “Start” is the big
button in the bottom left hand corner. TextPad might be under
Applications, if you do not see it straight away)
Using TextPad is quite straightforward. It is a bit like a word processor, but
not as sophisticated; it’s much simpler than Word. You will just be typing in
text and saving it. You will not do any text formatting in TextPad itself. All
HTML documents are simply text files.
 Open up the file template.html in TextPad.
Now you can see the HTML source for the web page. How do you view this
in the browser?
 Start up a web browser e.g. Internet Explorer.
 Type the URL for your “template” page into the address/location box
and press Return. (For example, for user Susan J Bloggs, whose
username is sjb001, the URL will be
http://www.students.stir.ac.uk/~sjb001/WWW1/template.html).
The ~sjb001 is the way that your Web folder is identified in a URL. You may
store your HTML files in folders within your Web folder if you wish (it's a
good idea to keep them well-organised!). Notice that you can specify files
within folders, and also that the browser translates this URL into something
slightly different.
Now let’s customize this page. We’ll start by making some very simple
changes to the page, but once you’ve done these you can make the page as
complicated as you like!

A tip: Set Configure: Word Wrap in TextPad so the text doesn’t head off to the right
of your window.

DEPARTMENT OF COMPUTING SCIENCE & MATHEMATICS PAGE 2 OF 6

ITNP43: INTERFACE DESIGN AND THE WORLD WIDE WEB
HTML PRACTICAL 1: WRITING BASIC HTML AUTUMN 2014

Change the Page Title

Make the title reflect what the page is about: call it “An HTML Exercise”.
Remember, the title of the page is defined by the <title> tag.
 Replace the text between the <title> tags (“A Simple HTML Page”) by
the text “An HTML Exercise”.
 Save the file (File:Save).
 Check the appearance of the file in the browser by clicking F5
(View:Refresh) in Explorer.

Adding Content to the Body of the Page

So far so good, but we also need some content. Content in the web page goes
in between the <body> tags. All of the following requires you to add HTML
tags after the <body> tag and before the </body> closing tag.

Page Heading
Usually it’s a good idea to make the top level heading the same as the title.
 Add the heading <h1> An HTML Exercise</h1>
You might find <h1> headings rather big. Try <h2> and <h3> headings as
alternatives.
Save your work at all stages, and keep checking what it looks
like in the browser.

Add some formatting and more information

Now add some more information (it doesn't matter what) to the body of your
document. For example
 Say that you are a student
 Write about where you come from
 Say what you are studying (don’t forget to mention ITNP43!)
 Write about your interests

Don’t forget that paragraphs start with <p> and finish with </p>. You could
add extra headings, too, to separate different subjects.

 Go ahead and do it! (you do not have to include “real” information.)

Text Styles
Tags can be used to specify how bits of text are displayed e.g. whether they
should be emphasised in a special way or not.
 Try enclosing a few words with <em>…</em> or <strong>…</strong>

DEPARTMENT OF COMPUTING SCIENCE & MATHEMATICS PAGE 3 OF 6

ITNP43: INTERFACE DESIGN AND THE WORLD WIDE WEB
HTML PRACTICAL 1: WRITING BASIC HTML AUTUMN 2014

You can try nesting different effects, too, to see how they combine. If you
have forgotten what tags are available, then have a look at your lecture notes
or try the w3schools tutorial.
HTML is not really designed for specifying styles, or other presentation
features such as fonts and colour. Later in the module we will see how to add
these things to our web page via the use of style sheets.

Link it up!
Links are created using anchor tags, <a …> … </a>. We can also use anchors
to link to other web pages. Create a link from where you typed “ITNP43” to
the ITNP43 home page by surrounding “ITNP43” with an anchor:
 Replace the “ITNP43” that you have already typed in your text by:
<a href="http://www.cs.stir.ac.uk/courses/ITNP43/">ITNP43</a>
 Save your page, refresh it in the browser (F5), and click this link.
Your browser will change to the home page for ITNP43. To get back to your
page, click the browser’s Back button.

Pretty Pictures
One way to make your page look better is to add graphics. There are some
GIFs in the Groups\ITNP43\Pix folder and on the “pictures” link on the
ITNP43 practicals web page, but feel free to download your own from other
sites (as long as they are not copyright protected.)
Inline images can be included anywhere in your document using the <img>
tag.
 Try including <img src=”filename.gif” alt=”description”> (where filename
is one of the files in your Web folder) or <img src=”Pix/filename.gif”
alt=”description”> (if you have stored your image files in a subfolder
called Pix) somewhere suitable in your document.
 Don’t forget to use the alt attribute to add a suitable short description
of your image.
Try different images. Some of the ones provided are “animated” GIFs that
provide a simple moving image.

Why use HTML at all?

Open the document testpage1.html in Internet Explorer (IE) and also in
TextPad. What do you see?
Browsers try to interpret whatever they are given, even if it doesn’t include all
the right tags. What has happened is that, because the file is called
testpage1.html, that is, it has a filename extension of .html, IE has
assumed that the content of the file is HTML. In addition, IE has assumed, in
the absence of any HTML tags, that the content represents the body of the
page.

DEPARTMENT OF COMPUTING SCIENCE & MATHEMATICS PAGE 4 OF 6

ITNP43: INTERFACE DESIGN AND THE WORLD WIDE WEB
HTML PRACTICAL 1: WRITING BASIC HTML AUTUMN 2014

 Add suitable HTML tags to testpage1.html so that it is displayed in a

more sensible layout (use template.html as a guide).
The next exercise is about making deliberate mistakes in your HTML to find
out how tolerant IE is. Of course it would be better to have correct HTML.
More on this in a moment.
Open testpage2.html in both IE and TextPad. Make the following
HTML errors one at a time, looking at the effect, and then correcting them
immediately. (You can always get another copy of testpage2.html from
the Groups folder.) In each case the browser will do its best to display
something sensible – it is quite tolerant. Which errors can your browser cope
with?
 Miss out the > after <h1
 Miss out the < before /h1>
 Insert a level 1 header completely inside a level 2 header. What happens?
Now take out the first <h1> tag. Is it the same?
 Make two start/end tag pairs “cross over” in an invalid manner, for
example: <strong>…<p>…</strong>…</p>
 Miss out the <html> and <body> tags
 Miss out the </html> and </body> tags

Validating Your HTML

A very useful website that will check the correctness of your HTML for you is:
http://validator.w3.org/.
Open this site in your browser window (using a new Tab, if you like). When
it loads, either type in the URL (URI) of your first page (template.html) or
select Browse… Now click on the Validate button and after a pause (during
which the W3C server fetches your home page and analyses it) you will get a
report on the screen – you will probably need to scroll down to see the whole
report.
IF you have errors reported try to fix them (by editing the HTML of your page
using TextPad).
After you think that you have fixed the problems, click the “Revalidate”
button on the report page and see if all is then OK – if not, then try again…!
Try another page: testpage2.html. You will probably see a number of
complaints reported (a mixture of errors and warnings):
 Some will be because the document type is not declared. The validator
tries “HTML 4.01 Transitional” as a default. You need to put something at
the start of your document to indicate it is HTML5. Look back at
template.html and see if you can add the required fix to testpage2.html.
Revalidate it when you have made the change.

DEPARTMENT OF COMPUTING SCIENCE & MATHEMATICS PAGE 5 OF 6

ITNP43: INTERFACE DESIGN AND THE WORLD WIDE WEB
HTML PRACTICAL 1: WRITING BASIC HTML AUTUMN 2014

 The other issue is that no “character encoding” was detected. As above,

see if you can fix this by again referring back to template.html.
You could try validating other pages to check the “quality” of their HTML
content (for example, Stirling University home page
(http://www.stir.ac.uk/), Bruce Graham’s university home page
(http://www.cs.stir.ac.uk/~bpg/), the department home page, …).
CAUTION: If you ask the validator to check a page that needs a username
and password to authorise the access (e.g. some lecture notes pages), then it
will ask you to tell it your username and password so that it can pass them on
to the server actually needing the username and password – this in general is
not a good idea, so, if it happens, click on cancel (and read the explanation
that you will see on the screen – it’s quite well written).

That’s it for now. But you will learn by experimenting, so try out other
things.
Just one footnote: whenever you are creating your own HTML files, DO NOT
use spaces in your filenames. Spaces can cause problems when typing in the
URL on browsers.

DEPARTMENT OF COMPUTING SCIENCE & MATHEMATICS PAGE 6 OF 6