First Lab Session

CSC 104 Lab Session

This is your first lab session in this course! This page contains some information that should give you a good exercises to practise writing HTML.

If you already know how to use a text editor and view the HTML pages that you create, feel free to jump to the exercises below. The bottom of the page contains harder exercises that provide little to no guidance. Try these if you want a challenge.

If at any point you would like some clarifications on this page, feel free to ask the TAs for help.

Text Editors

The first thing you need to do is to learn how to use a text editor. Pretty much any text editor would do. Examples of some editors are Word, Netscape Composer, Notepad, Wordpad, vi, emacs, pico, BBEdit, etc. Choose a simple one that you are familiar with and work with it.

Now, open the editor, type some sentences in it, and try saving it. Save the file as ``test1.html''. The extension ``html'' tells us that it is an HTML file (as opposed to a plain text file or a word document). Remember where you save it.

Changing Directories and Creating Folders

You may notice that there are many directories, or drives, in your account when you try to save a document. All the files in this lab session will be saved under the folder called ``My Documents'' that appears on your desktop.

Now, open up ``test1.html'' (if it is not already opened) and save it under the ``My Documents'' directory.

To manage the space in your computer account, you can create folders. If you don't know how to do this, ask a TA or a neighbour. Create a folder under the ``My Documents'' directory called ``104lab1'' so that you can save your files into this folder. All your work today should be saved here.

In the future, create folders with meaningful name so that it will help you remember where you saved what. Feel free to create folders inside 104lab1, if it helps you manage it better. (A folder inside a folder is called a subfolder.)

Viewing Your Web Page

To use Netscape, click on the ``Start'' button on the bottom left hand corner of the screen. A menu would pop up and one of the options is ``Netscape''. Click on this part and Netscape would launch with a window on your screen.

Now that you are in Netscape, select ``File'' and then ``Open Page''. A small window will pop up and ask you which URL or file you would like to open. Click on ``Choose File'' and find ``test1.html''. Once you have selected the file, click ``OK''. Some garbage may show up on your Netscape window. If so, make sure that when you saved your file, it is in plain text format, not word or anything else. Try saving your file again and then viewing it. If it still doesn't work, ask the TA for help.

You will need to know how to view HTML files when you try out the exercises below so that you can verify your work.

Although you can view the page you've created, unfortunately, nobody else can see it. To publish your web page to the world, go to the next section.

Publising Your Web Page

EXPLANATION (next time)

Exercises

These exercises are intended to get you familiar and comfortable with writing HTML. If you feel they are too easy, try harder ones. Each exercise asks you to complete a small task. It may give a description of what you should do, or present you with something so that you can see what it looks like. A solution is provided for you in all the exercises. If the solution only provides a screen and not the HTML code, then use ``View Document Source'' to see the code. Remember that there is always more than one correct way to do something. Viewing your documents with Netscape should give you a good sense of what you have achieved. If you are unsure whether your solution is correct, ask the TAs.

1. Open a new file in your text editor. Type in an example from your tutorial notes that changes the Netscape heading to ``My first Page!'' and leaves the background white. (Hint: you need to have the following tags: HTML, TITLE, and BODY.) Save the file as ``first.html''. Solution

2. Now, make a page that looks the same as the one above, but the body should have ``Hello World!'' in it. Save the file as ``hello.html''. Solution

3. Delete the words ``Hello World!'' in the file. Instead, type the following:

Ode to Melancholy

Now, put an H2 tag around it. Save this file as ``keats.html''. Solution

4. In the same file, type in the following sentences:

No, no, go not to Lethe, neither twist
Wolf's-bane, tight-rooted, for its poisonous wine;
Nor suffer thy pale forehead to be kiss'd
By nightshade, ruby grape of Proserpine;
Make not your rosary of yew-berries,
Nor let the beetle, nor the death-moth be
Your mournful Psyche, nor the downy owl
A partner in your sorrow's mysteries;
For shade to shade will come too drowsily,
And drown the wakeful anguish of the soul.

Remember to put line breaks at the end of each line. Save this file (use the same name, but we should save it, so that the work doesn't get lost). Solution

5. After step 4, add the following lines:

But when the melancholy fit shall fall
Sudden from heaven like a weeping cloud,
That fosters the droop-headed flowers all,
And hides the green hill in an April shroud;
Then glut thy sorrow on a morning rose,
Or on the rainbow of the salt sand-wave,
Or on the wealth of globed peonies;
Or if thy mistress some rich anger shows,
Emprison her soft hand, and let her rave,
And feed deep, deep upon her peerless eyes.

Make sure that you make these lines appear to be centered. Again, save your work. Solution

6. For the last part of the poem, do the following:

She dwells with Beauty - Beauty that must die;
And Joy, whose hand is ever at his lips
Bidding adieu; and aching Pleasure nigh,
Turning to poison while the bee-mouth sips:
Ay, in the very temple of Delight
Veil'd Melancholy has her sovran shrine,
Though seen of none save him whose strenuous tongue
Can burst Joy's grape against his palate fine;
His soul shall taste the sadness of her might,
And be among her cloudy trophies hung.

Change the title on the Netscape menu bar to ``Keat's Ode to Melancholy''. Save your work. Solution

7. Draw the following:

                ****    ****
               *    ****    *
              *              *
              *              *
               *   HELLO    *
                *          *
                 *        *
                  *      *
                   *    *
                    *  *
                     **

Also, change the title to something more appropriate, such as ``hello heart''. Save your work as ``heart.html''. Solution

8. Now, we are going to try some simple formatting exercises. Write the HTML code that produces the following text:

This is not so hard afterall!

you & me

this is co lour ful!

Look @ me!

Save your work as ``samples.html''. Solution

9. This exercise teaches you how to put a picture onto your webpage. This turtle image is a gif file. Click on it with your mouse's right button, and save this image into your 104lab1 folder. Save the file as ``turtle.gif''.

Now, use the IMG tag to put this turtle picture at the end of your samples.html.

Again, save this file as ``samples.html''. Solution

10. Do the same with the following tiger picture:

Again, save this file as ``samples.html''. Solution

11. Throughout this page, you have been clicking on links to view the solutions or to jump to certain parts of the page. Recall using the A tag with the HREF parameter to create links from your tutorial. Now, make one in a new file that looks like this:

this is a link to heart.html.

Now you know how to make links to the other files you've created! Add links to your keats.html, first.html, turtle.gif, and tigers.jpg files. Save this file as ``link.html''. Solution

12. Move your mouse onto the following pictures:

Notice that your mouse changes into a hand. This change is an indication that these photos can be clicked on. Try clicking on them and see what happens.

Although the tiger picture has a box around it and the turtle picture doesn't, both of these function as links. You can also turn your pictures into clickable images, by using the A tag with HREF around the IMG tag. Try it.

You will notice by default, the images have a box around them. To get rid of the border around the turtle image, you need to set the BORDER parameter to zero.

Save your work as ``pictures.html''. Solution

13. There should be an exercise here that helps you understand how to link files in different folders, but I haven't written it yet. Sorry!

Harder Exercises

1. This is a big exercise on formatting. Make sure you are comfortable with lists and simple tables before tackling this.

Create your own resume or curriculum vitae. Save your work as ``cv.html''. Solution

2. This is a complicated table exercise. You need to be comfortable with tables and know how to use spanning cells. Give it a try.

Create your own spanning table. Save your work as ``table1.html''. Solution

3. This is a chance to get more practise on tables. This exercise is similar to the last one.

Create another spanning table. Save your work as ``table2.html''. Solution