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