Page 1
EDUC7022: Evaluation and Design of Educational Courseware
EDUC7022 Evaluation and Design of Educational Courseware
Aspects of Design: Introduction
This course unit aims to do two things. The first is to get you to think, talk
and write about courseware design and the second is to enable you to
develop exemplar learning materials in the WordPress Content
Management System (CMS).
This set of activities is designed specifically to help you understand the
basics of web materials creation. What you will learn is a mixture of skills,
some connected to HTML and the design of web pages, some about the
creation or manipulation of the different elements that make up
courseware and some which will enable you to understand how all of the
these elements are put together in a Content Management System (CMS).
The CMS we are going to use is WordPress. You may know this as a form
of blog: http://wordpress.org/, but as this CMS has become increasingly
sophisticated it is slowly replacing what we have known traditionally as
web pages. This gives us the best of both worlds; it enables ordinary
people to have static web pages with materials embedded as well as the
interactivity provided by the blog part of the CMS. There are also
independently produced plugins that provide further interactivity. There
are other professional Content Management Systems, which allow you to
do much more sophisticated things, but WordPress enables you to interact
with it on various levels, meaning that we can create simple yet effective
materials, quite quickly, but at the same time as we develop our skills we
can take more and more control over what it is we want to present. It also
has the advantage of being Open Source software, thus available to
anyone who wants to be able to use it at low cost.
In order to be able to take more control of your materials design, we are
not going to start with the CMS itself we are going to focus in this first
unit on what web pages are and how they are created. These skills may
seem a bit abstract at first, but you need to ‘suspend disbelief’ as you will
©2011 Rob Drummond and Gary Motteram; updated Gary Motteram 2013
Page 2
EDUC7022: Evaluation and Design of Educational Courseware
see how it all comes together as the course unit progresses. If you have
any difficulties with anything, please use the Forum to ask questions. You
can also email me, or use tools like to Skype to get an online tutorial.
Some of you may have a background in web design so you will be able to
provide support to colleagues for whom this might be new.
©2011 Rob Drummond and Gary Motteram; updated Gary Motteram 2013
Page 3
EDUC7022: Evaluation and Design of Educational Courseware
The Basics
A web page is an electronic document containing text, images, sound,
video etc, originally written in HTML (now usually referred to as
(X)HTML). HTML stands for Hyper Text Markup Language, and is the code
that generates the online content (the X stands for extensible and simply
means you can add to it). A collection of interconnected web pages
constitutes a website, and the collection of these websites in vast
numbers is what constitutes the World Wide Web. The WWW is often
referred to as The Internet, but this isn’t strictly true. The Internet
actually refers to a collection of interconnected computer networks, only
part of which is the WWW.
For a website to exist on the WWW it must be stored on a web server.
For most people, space on a web server is paid for through a hosting
company, who generally own their own servers and sell you a bit of
space on them. We then buy a domain name (www.mydomain.com)
from another company, and ‘point’ the name to our web space. We then
use FTP (File Transfer Protocol) software to upload our HTML web pages
onto our webspace. When someone types our domain name into their
web browser software (Internet Explorer, Firefox, Safari, Crome etc)
they see our website in all its glory.
However, websites don’t have to be made public. We can just as easily
save HTML pages and whole websites onto CDs, pen drives, or the hard
drives on our PCs, where they can be accessed just as easily through the
same web browsers.
We mentioned that web pages are made up of text, images, sound and
video, all coded in HTML. While the text exists on the page itself, the
other items – images, sounds and video – are not actually embedded
within the page, they are all separate objects, linked to from the page.
This is different to what we are used to with word processing documents.
It wouldn’t matter how many images you put into a word document, it
would always still be only one file. However, a web page with 5 images
and a video clip actually consists of 7 files – the page itself, the video, and
©2011 Rob Drummond and Gary Motteram; updated Gary Motteram 2013
Page 4
EDUC7022: Evaluation and Design of Educational Courseware
each image. Because of this, it is very important to maintain a logical file/
folder structure for your sites. If a web page is ‘looking’ for an image that
should be in folder x, but you have moved it to folder y, it simply won’t
show up on the page. This is most likely what is happening when you get
broken links for pictures on pages.
In modern, well-designed websites, the content and the formatting
(layout, colours, etc) are kept separate, in two different files. This means
that the content can be viewed in a variety of formats on different
platforms using different hardware. The way this separation is achieved is
by having the content coded in HTML, and the formatting written in CSS
(Cascading Style Sheets). The browser then brings the two together,
applying the formatting to the content. It is at this point that users can
intervene to have different (or no) formatting applied. If you include
formatting in your HTML file, this gives the user less choice as to how they
want the content to be displayed. The point about users being able to
make choices about how to view a website is an important one and we will
return to it. You can find CSS in a whole variety of tools for educational
materials design, so the basics you learn here are transferable not
HTML is not difficult to learn. It is made up of a series of ‘tags’ of which
there are a finite number. An average website will only use a common
selection of all these tags. You can see the HTML code for any webpage by
going to View > (Page) Source in your browser. If you look closely you
will see a series of tags in angle brackets working in pairs e.g.
<p>Hello</p>.
You will not automatically see the CSS, as this will (should) be kept in a
separate file. However, it consists of series of rules that refer to elements
of the HTML. If, for example, we had this <div> in the HTML:
<div id = “one”><p>Hello everybody</p></div>
The CSS might have:
©2011 Rob Drummond and Gary Motteram; updated Gary Motteram 2013
Page 5
EDUC7022: Evaluation and Design of Educational Courseware
#one {
background:#cccccc;
width:300px;}
#one p {
color:#800080;}
Which would create a grey box, 300 pixels wide with purple writing.
As with all things computer related, the best way is to experiment, and to
gradually work out how things work for yourself. And this is precisely what
the practical element of this course will help you to do!
We’re now going to go on and work on creating a basic web page to see
how the content and style sheet work together.
©2011 Rob Drummond and Gary Motteram; updated Gary Motteram 2013
Page 6
EDUC7011: Multimedia in Language Education
1) An Introduction to HTML and CSS
This is the page we are going to create. The only software we will use is
Notepad, which, on a windows machine, you will find under Start> All
Programs> Accessories. If you don’t have Notepad, any simple text editor
will do.
On a Mac it is difficult to get a true text editor so I recommend you use
Word, but you have to save the files as Text Only with Line Breaks
(MS DOS). You could always buy a good text editor and I would
recommend Text Mate, which is not expensive and I find myself using it a
lot as I work on various types of materials.
Include the full file name i.e. index.html and style.css, or else the .txt
extension will get added. On more recent versions of Word the system
forces you add .txt, so do this the first time and then change the
document’s name. After that the file should be OK. Once you have done
the first Save As you can Save after this. You can use this on a PC, too.
©2011 Rob Drummond and Gary Motteram
Page 7
EDUC7011: Multimedia in Language Education
There are 5 main elements:
1.
2.
3.
4.
5.
Navigation
Header
Content
Sidebar
Footer (not seen on this image)
Decide where you are going to save the site, and create a folder called
‘site_1’. Within this folder create a second folder called ‘images’.
In the images folder, save the two images provided – ‘header.gif’ and
‘tree.jpg’. These can be found on the blog under resources.
Open Notepad (or Word) twice so that you have two separate Notepad
pages open. Save one as ‘index.html’ for the HTML code, and the other as
‘style.css’ for the CSS code. To do this you will have to change the ‘Save
as type’ to ‘All files’.
In ‘index’, copy the following code (you can copy and paste from this file).
©2011 Rob Drummond and Gary Motteram
Page 8
EDUC7011: Multimedia in Language Education
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>My Webpage</title>
<style type="text/css" media="all">@import
"style.css";</style>
</head>
<body>
</body>
</html>
Create a div called ‘container’ in your index (HTML) page between the
<body> </body> tags:
<div id="container">hello</div>
Definition and Usage
The <div> tag defines a division or a section in an HTML document.
The <div> tag is often used to group block-elements to format them with
styles.
Definition from: http://www.w3schools.com/tags/tag_div.asp
In the ‘style’ (CSS) page, create a new rule to select the container:
#container {
}
We won't be able to see the changes we are making to this <div>,
because it is transparent by default. So the first thing to give the <div> a
background colour. This will help us see what we are doing. Add this to
the CSS:
#container {
background: #4040ff;
}
Save both files.
Open a browser (Firefox or Internet Explorer) window, then open the
‘index’ file by going to
File > Open
©2011 Rob Drummond and Gary Motteram
Page 9
EDUC7011: Multimedia in Language Education
You should see a blue bar right across the page with ‘hello’ on the left.
This is our container <div>. It will automatically stretch to fill the page
horizontally, and shrink to fit the content vertically.
We need to centre it on the page and give it a width. We do this in the
CSS rule. Add this to the CSS (anything in bold must be added, anything
in normal type must remain):
#container {
background: #4040ff;
width: 760px;
margin: auto;
}
Now you should have a centred blue 760px wide block with "hello” written
in it. But it’s sitting about 8px away from the top of the browser. This is
because the html and body tags have default margins and/or padding on
nearly all browsers. So we need to write a CSS rule to reset the margins
and padding on the html and body tags to zero. Add this rule to the very
top of your CSS file:
html, body {
margin: 0;
padding: 0;
}
Now the blue box should be flush against the top of the page.
Now we need to create all the other divs. Replace the word ‘hello’ with
the following in your HTML (within the container <div>)
<div id="container">
<div id="nav">Nav</div>
<div id="header">Header</div>
<div id="sidebar">Sidebar </div>
<div id="content">Content</div>
<div id="footer">Footer</div>
The page should now look something like this:
©2011 Rob Drummond and Gary Motteram
Page 10
EDUC7011: Multimedia in Language Education
Without CSS, the divs will be arranged from top to bottom, one under the
other, in the same order as they are in the code. We need to make our
divs the correct size.
Remove the blue background from #container in the CSS, and add a new
rule for #nav. Give #nav a background colour so that we can see it, and
set its height to 30px. Add this to the CSS:
#nav {
background: #47731B;
height: 30px;
}
In fact, lets set the background for all the divs. It is a good idea to keep
the CSS rules in roughly the same order as they appear in the HTML, so
nav towards the top, footer towards the bottom.
The header is using a background image rather than colour (remember
the lime image you put in your ‘images’ folder? Add this to the CSS:
#header {
background:url(images/header.gif);
height: 150px;
}
See that ‘background’ is asking for the image file name rather than a
colour? There is no width set, as by default it will stretch to the width of
the container.
The sidebar div just needs a background colour. It will expand and shrink
to accommodate whatever is in it, so it doesn’t need a height. Add this to
the CSS:
#sidebar {
background: #DBF2C4;
}
Same for #content:
#content {
background: #ffffff;
}
The footer gets a height as well though:
©2011 Rob Drummond and Gary Motteram
Page 11
EDUC7011: Multimedia in Language Education
#footer {
background: #47731B;
height:25px;
}
You should now have something looking like this:
You can see that at the moment, the content and sidebar divs are on top
of each other. In order to get them side by side we need to ‘float’ them to
the left or right, which basically means aligning them to either side.
We need to float the sidebar to the right and give it a width. Add this to
the CSS:
©2011 Rob Drummond and Gary Motteram
Page 12
EDUC7011: Multimedia in Language Education
#sidebar {
background: #DBF2C4;
float: right;
width: 280px;
}
This should give you:
Now lets put some text in the content div. In your HTML, write some
information about yourself. Paragraphs should be within their own <p>
tags so that it should look something like the text below. For now it would
be good if you had quite a lot of text there in order to keep the shape of
the layout, and to help you see how text length affects the overall
mechanics of the page. Use some extra dummy text if necessary, just
while we get things started.
<div id="content"> <p>My name’s Gary, and this is my website. I’m
using it as part of a project I am doing in one of the course units
on my MA course, in which I will be designing multimedia
materials. etc etc etc</p>
<p>Maecenas vulputate aliquam odio. Duis scelerisque justo a
pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nuncvestibulum ligula. In hac habitasse
platea dictumst.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nullam gravida enim ut risus. Praesent sapien purus, ultrices a,
varius ac, suscipit ut, enim. Maecenas in lectus. Donec in sapien in
nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae
lacus euismod vulputate. Nullam rhoncus mauris ac metus.</p>
<p>Maecenas vulputate aliquam odio. Duis scelerisque justo a
pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac
habitasse platea dictumst.</p>
</div>
©2011 Rob Drummond and Gary Motteram
Page 13
EDUC7011: Multimedia in Language Education
Notice that we have four paragraphs above, shown by the <p> tags.
Because <p> tags can have some default formatting in some browsers,
we need to reset them. Add this to the CSS:
p{
margin:0;
padding:0;
}
Unfortunately, this text will stretch right across the page, underneath the
sidebar div. To stop this, we can give the content div a right margin the
same size as the sidebar div to push the text over to the left. Put this in
the CSS:
#content {
background: #ffffff;
margin-right:280px;
}
Tip
If you want to add additional space between the paragraphs or indent the
first line you can use the &nbsp (non-breaking space) command. You
simply add as many of these as you want to create space in your text.
Let’s now add some text to the sidebar. In your HTML, write some
information in a couple of paragraphs. Ideally you should write something
meaningful about you or your teaching context.
<div id="sidebar"> <p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nullam gravida enim ut risus. Praesent sapien
purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce
malesuada enim vitae lacus euismod vulputate.
</p><p>Maecenas vulputate aliquam odio. Duis scelerisque justo
a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac
habitasse platea dictumst.</p> </div>
©2011 Rob Drummond and Gary Motteram
Page 14
EDUC7011: Multimedia in Language Education
This should give you:
Notice that the background colour of the sidebar does not reach the
footer. This is because the div only stretches as far as the text it contains.
To solve this problem we can give the container div the same background
colour as the sidebar div. Add this to the CSS:
#container {
width: 760px;
margin: auto;
background: #DBF2C4;
}
If the text in the sidebar was longer than that of the content div we would
have a different problem – the text would go over the footer. To prevent
this happening we just need to add something to the footer. Add this to
the CSS:
#footer {
clear: both;
background: #47731B;
height: 25px;
}
This tells the footer to start after anything else earlier in the code. It
starts ‘clear’ of what’s above. (In actual fact this is to do with floats, but it
is not necessary to understand it fully at this stage.)
©2011 Rob Drummond and Gary Motteram
Page 15
EDUC7011: Multimedia in Language Education
Let’s give the page a title. For this we need header tags. <h1> is the most
important, followed by <h2>, <h3> and so on. Put the following in the
HTML, inside the header div (remove the word ‘header’ that is already
there):
<div id="header"><h1>My webpage</h1></div>
And let’s make sure it isn’t right against the edges by giving it some
padding. Add this to the CSS:
h1 {
margin: 0;
padding: 20px;
}
Before we go any further, let’s change the font for the whole page into a
sans-serif one. Let’s also give the page a background colour. We do this
by adding a rule for the ‘body’ near the top of the CSS:
body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
background: #eeeeee;
}
This tells the browser to use Arial first, then the other fonts if Arial is not
available, with a font size of 12.
The navigation needs a list of links, created in HTML with an <a> tag. Add
this to the HTML (take out the word ‘Nav’ that is already there):
<div id="nav">
<a href="#">Page
<a href="#">Page
<a href="#">Page
<a href="#">Page
</div>
1</a>
2</a>
3</a>
4</a>
The ‘#’ symbol is just used for a dummy link, as we have no other pages
yet.
©2011 Rob Drummond and Gary Motteram
Page 16
EDUC7011: Multimedia in Language Education
In order to space the links out a bit, we need to add some spaces. Using
the spacebar means nothing in code, so we need to add the HTML
equivalent – ‘&nbsp;’:
<div id="nav">
<a href="#">Page 1</a> &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp;
<a href="#">Page 2</a> &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp;
<a href="#">Page 3</a> &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp;
<a href="#">Page 4</a>
</div>
This should give you four blue links in the top left of the ‘nav’ div. In order
to get them in the right place, we need to add this to the CSS:
#nav {
background: #47731B;
height: 30px;
padding:10px;
text-align:right;
}
We also need to make them look a bit more appealing. Add this new rule
to the CSS:
#nav a {
font-size:18px;
letter-spacing:4px;
color:#eee;
text-decoration:none;
}
This tells the browser to make the links (the <a> tags within the “nav”
div) bigger (18px), stretched, grey, and have no underlining (text
decoration).
They should look like this:
Now we want to make them change colour when the cursor goes over
them. Add this new rule to the CSS:
#nav a:hover {
color:#FFFF66;
}
©2011 Rob Drummond and Gary Motteram
Page 17
EDUC7011: Multimedia in Language Education
This tells the browser to make them a different colour when the cursor
‘hovers’ over them.
For the footer, we just need to give it some padding, align the text in the
centre, and give the text a better colour. Add this to the CSS:
#footer {
clear: both;
background: #47731B;
height: 25px;
color:#ccc;
padding-top:10px;
text-align:center;
}
And of course write whatever you want in the footer HTML.
Now we want to add an image to the content div. We do this by adding
the following code into the HTML, anywhere within the existing text:
…Nam augue lorem, semper at, porta eget, placerat eget, purus.
Suspendisse mattis nunc <img src="images/tree.jpg" alt="Picture of
a small tree" width="150" height="150" /> vestibulum ligula. In hac
habitasse platea dictumst….
This tells the browser to look for an image called ‘tree.jpg’ in the ‘images’
folder. The ‘alt’ text is what is displayed if someone has turned images off
in their browser. It is also what gets picked up by a screen reader for
people with visual impairments. It is therefore important for accessibility.
We need to make sure the image is in the right place though, so we add
this rule to the CSS:
#content img {
float:right;
padding:10px;
}
Which pushes it to the right of the div, and gives it a bit of padding.
You should now have something like this:
©2011 Rob Drummond and Gary Motteram
Page 18
EDUC7011: Multimedia in Language Education
So now it is simply a case of some finishing touches.
Let’s format the text a bit by creating these rules in the CSS for the
paragraphs:
#content p {
padding:10px;
line-height:18px;
text-align:justify;
}
#sidebar p {
padding:10px;
line-height:18px;
}
The padding takes the text away from the edges, the line height adds
some space between the lines, and the text is now justified in the content
div.
And lastly, let’s just take the whole container away from the top of the
screen after all. Add this to the CSS:
#container {
width: 760px;
margin: auto;
©2011 Rob Drummond and Gary Motteram
Page 19
EDUC7011: Multimedia in Language Education
background: #DBF2C4;
margin-top:10px;
}
And that’s it! If you’ve got this far, well done!
If you’ve got any questions, or can’t see how something works, make use
of the Forum to get some support.
2) Extending your design
This section starts you on the process of making changes to the basic
pages that we have created to personalise them and you can use this as
the basics of your own website created in CSS.
Image manipulation
Task: Replace the header image of your web page with a different image.
At the moment your page is using the image we supplied – ‘header.gif’.
This can easily be replaced with an image of your choice. The important
thing is that the dimensions of the new image must be the same as those
of the old image (760 pixels x 150 pixels – notice the width measurement
is almost always given first).
To get a new image ready you will need some image editing software.
There is bound to be a suitable piece of software on your computer
already. Even quite basic programs are fine for now, although you may
want something more sophisticated in the future. There is also an
excellent online image editor which can be found at www.sumo.fi/ Go to
the website and click Open Sumo Paint. This is a fully featured paint
programme similar to Photoshop or Paintshop Pro. It has one or two
weaknesses, but is currently free.
Unless you want to start from scratch, take your own photo, or create
your own graphic, you could first choose and download an image to start
©2011 Rob Drummond and Gary Motteram
Page 20
EDUC7011: Multimedia in Language Education
with from a site like: http://www.freedigitalphotos.net/. This has the
advantage that you know that the pictures are copyright free. You can, at
the end of the day, make use of pictures from all over the web, but you
ought really to ask permission, certainly if you plan to use the materials
commercially. Rules are very strict here; even with photos you have taken
yourself.
Whatever you do, make sure your final image is 760px wide and 150px
high. This is so that it will fit into your existing web page. Of course, if you
re-design your web pages, the image will need to change size.
This can be saved as a jpeg, a gif, or a png (for an explanation of the
difference see this link: http://www.sitepoint.com/article/gif-jpg-pngwhats-difference/). It should be saved into your images folder, where the
existing ‘header.gif’ image is stored. You then simply need to change the
code in your css to match the new image filename. For example, if your
new image is called ‘new_header.jpg’ your css should read:
#header {
background:url(images/new_header.jpg);
height: 150px;
}
And that’s it.
Hyperlinks
Task: Add hyperlinks to your navigation.
A hyperlink, or ‘link’ is simply an electronic link to another web page or
document, either within the same site, or further afield. For our purposes
it is the way we connect the pages on our sites. The example site at
http://lte.humanities.manchester.ac.uk/examples/practice_mats/reading/
0809/ now consists of 3 pages, with the filenames ‘index.htm’,
©2011 Rob Drummond and Gary Motteram
Page 21
EDUC7011: Multimedia in Language Education
‘page2.htm’, and ‘page3.htm’. These are connected by the navigation
hyperlinks.
If we look at the HTML code for the navigation on the index page (go to
view > source in your browser) we see:
<div id="nav">
<a href="index.htm">Home</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="page2.htm">Text</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="page3.htm">Quiz</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div>
It is actually very simple. The ‘<a href=’ part tells the browser this is a
link. The ‘”page2.htm”’ part tells the browser which page to go to when
clicked. The ‘Text’ part tells the browser what text to display that should
be clicked. The ‘</a>’ part is simply the closing pair of the <a> tag.
The three lines of code are then repeated on each page.
To do this with your own page, you first need a second page to link to.
The easiest way to do this is simply to open your ‘index.htm’ page in
Notepad, then immediately save it as ‘page2.htm’. Make a few changes,
then save it again. You will now have two pages, one slightly different
from the other. It is then simply a case of adding the link information as
above to each page. Repeat the process for a third page.
©2011 Rob Drummond and Gary Motteram
Page 22
EDUC7011: Multimedia in Language Education
Embedding other elements in your pages
Task: Embed a Hot Potatoes activity in your page.
This tutorial will show you how to embed a Hot Potatoes activity within an
existing webpage, as in the ‘Quiz’ page of
http://lte.humanities.manchester.ac.uk/examples/practice_mats/reading/
0809/
If you have never heard of Hot Potatoes, go to the website and see what
it can do. Either way, you will need to download the software onto your
machine.
http://web.uvic.ca/hrd/hotpot/. There is an additional text-based
introduction to Hot Potatoes that you can use if you don’t want to do all
the activities online.
After you have downloaded it, take some time to experiment creating
activities before you think about embedding them.
One important thing to remember is that for every HP activity there are
two pages – one is the activity itself and will have a file extension such as
.jcl for example. The other page is the actual HTML. It is the HTML page
that we use on the websites. This will become clear when you start to
investigate HP.
By default, HP exercises open in a new window, as they are automatically
saved as web pages in their own right. This is not ideal for websites, as
you start to lose the consistency of the navigation. Therefore, this tutorial
will show you how to embed the exercise within a page, as in the example
mentioned above.
©2011 Rob Drummond and Gary Motteram
Page 23
EDUC7011: Multimedia in Language Education
Firstly, create some kind of exercise in HP. For this example let’s imagine
we have created a quiz, and have saved the html file as ‘quiz.htm’. This
should be saved in the same folder as your HTML pages.
To embed a HP task we take advantage of the <iframe> tag. Put very
simply, this embeds one page within another page. ‘iframe’ means ‘inline
frame’ and is not the same as traditional frames which are outdated and
should be avoided.
If at any time you want to find out more about the code we are using
here, or to look for new code, then simply search on the web.
1. Open the HTML page (in Notepad) you want the exercise to appear
in. This should already have something in it, probably the header
image, and perhaps some text in the sidebar.
2. Identify the place in the code you want the exercise to appear and
put the following code:
<iframe src="quiz.htm" name="Quiz" width="100%"
height="500px" align="top" scrolling="auto"
frameborder="0"></iframe>
NB – if you want to experiment with this Quiz using your own
pages you will need to use the full path (absolute address) to
the file:
http://lte.humanities.manchester.ac.uk/examples/practice_m
ats/reading/0809/quiz.htm. This is because in the case of the
example all the pages are sitting in the same folder and we use what
are called ‘relative’ addresses, i.e. short addresses. If a file is sitting in
a particular space on the Internet you need the full path. A more
detailed explanation can be found here:
http://www.thuto.org/ubh/web/html/relad1.htm. This is a good basic
site about HTML and CSS.
©2011 Rob Drummond and Gary Motteram
Page 24
EDUC7011: Multimedia in Language Education
src = the name of the Hot Potatoes html page;
name = not important, but name it something relevant;
width = the width of the page within the page. Can be % or px. In this
case it is better to use 100% and then the embedded file will lay out
more effectively on the page no matter what size the user makes the
webpage;
height = as above, but use px to avoid scrolling;
align = self explanatory;
scrolling = if the content is bigger than the specified height, scrollbars
will appear. If you don’t want scrollbars, experiment with the ‘height’
value.
frameborder = self explanatory
3. You might want to get rid of the titles and buttons on the HP
exercise, as these will probably be unnecessary. Do this in the
configuration screen of HP.
©2011 Rob Drummond and Gary Motteram