Laboratory Exercise 1

Your first exercise is to comment on this post – and you are encouraged to comment on other posts on this blog.

Your second exercise is to produce a spoof of the course homepage. To do this, you will take a copy of the source of the web page; save it to your desktop; edit it and then view the edited page in the browser.

1. Visit the course home page.
2. Use the Save As selection from the File menu of the Browser to save the Page Source to your desktop.
3. Now use the Open File... selection from the File menu in the Browser to open this file. You should see something almost like the original home page. We'll see a bit later why it appears differently.
4. Now open the TextEdit application on the Mac (if you're using another operating system, you can use any editor that will cope with plain text files.
5. Follow the instructions given by Apple to set TextEdit up as a plain text editor http://support.apple.com/kb/ta20406
6. Open your saved Page Source file using the Open File... selection from the File menu in TextEdit. You should see the raw HTML source of the page.
7. Experiment by editing parts of the page in TextEdit and reloading the page in the Browser to alter the content.

Despite the fact that you've followed Apple's instructions, you may find that the Page Source file has been changed so that the Browser doesn't recognise it as html. Select the file on the Desktop and hit Command-I to see information about the file. Look at the Name and Extensions panel. Uncheck the Hide Extension checkbox, and replace the '.txt' at the end of the filename with '.html'. When asked if you really want to do this, say that you do.

Because Apple have a bug, you'll have to edit the extension each time you save the file.

The appearance of the web page is controlled by style files, and some image files. To make the page look just like the original you will have to alter your Page Source file to tell the browser where to find these style files.

Look for the following section near the start of the Page Source:

<link href="/styles.css" rel="stylesheet" type="text/css"></link>
<link href="il1.css" rel="stylesheet" type="text/css"></link>
<link href="/images/tinyi.ico" rel="icon" type="image/x-icon"></link>
<link href="/images/tinyi.ico" rel="shortcut icon" type="image/x-icon"></link>

Edit it, by changing the second line then adding a new line at the beginning, so it reads:

<base href="http://www.inf.ed.ac.uk"></base>
<link href="/styles.css" rel="stylesheet" type="text/css"></link>
<link href="/teaching/courses/il1/il1.css" rel="stylesheet" type="text/css"></link>
<link href="/images/tinyi.ico" rel="icon" type="image/x-icon"></link>
<link href="/images/tinyi.ico" rel="shortcut icon" type="image/x-icon"></link>