CS114 Lab 2: html cont.: adding HyperText and Images to your web page

Last week we practiced using some basic html to structure the content of a web page. Today we will add hyper text (links) and images to our web pages.

Add pictures: the <img> element

Here is the html code to add the above image, stored in the file "green-tea.jpg", on the web page:

<img src="green-tea.jpg" alt="a cup of green tea">

Note: This will only work when the image file and the html document are saved in the same directory/folder.

src and alt are called attributes. The img element can take more attributes, like height and width.

The all-important <a> element: the 'HT' in 'HTML'

The <a> element is used to create Hyper Text, i.e. to link web pages together. Consider the following html code that will display a "driving directions" label, that, when clicked, will take us to the "directions.html" web page (relative URL):

<a href="directions.html"> driving directions</a>

Click to see it at work: driving directions

• The href attribute specifies the destination of the link.
• Notice the open and close tags.

Note: This will only work when the destination file and the document that contains the link are saved in the same directory/folder.

Now, consider the following code, that links to a web page in any server (absolute URL):

<a href="http://cs.wellesley.edu/~cs111/labs/lab1/lab01.html"> cs111 lab</a>

and here it is at work: cs111 lab.

Absolute and Relative addresses

Absolute URLs

They consist of the following parts:

Tree Structured Directories

As you know, operating systems (like Macs, and Windows), organize the contents of a computer's hard drive into folders, also called directories. Folders and files form a tree structure, because of the ability of directories to contain other directories.

Here's an example for a website about musical instruments. We might have the following organization of files and folders, as we would draw it on the board:

Relative URLs

We can use these relationships to form a shorthand way of specifying a URL. This is called a relative URL, because we specify the location of a file relative to a known file. Here are the basic rules:

Relative URLs are only for files on the same server. Therefore, we can leave off the protocol and server name.

• If a file is in the same directory as the HTML file containing the link, we just give its name. If we want to put a link in the file rattle.html linking it to xylophone.html, we can say:
  <a href="xylophone.html">xylophone</a>
• If a file is in a sibling subdirectory, we can just give the path starting from the sibling. So, if we are in the file called instruments.html and we want to give a link to the file groups.html, we can say:
  <a href="groups/groups.html">musical instruments grouping </a> according to Hornbostel-Sachs
• If the file is in a directory that contains a subdirectory that contains the HTML file with the link, we have to go up the tree. To go up, we write ../. That's dot, dot, slash. For example, if we are in the file rattle.html and we want to make a link to groups.html, we can say:
  <a href="../groups.html">one kind of grouping</a>

Tasks for today:

Task 1

1. Link from xylophone.html to rattle.html
2. Link from xylophone.html to groups.html
3. Insert the image logo.gif in the instruments.html web page
4. Link from instruments.html to rattle.html
5. Link from instruments.html to roseBaby.html
6. Link from xylophone.html to instruments.html
7. Link from groups.html to classical2.jpg
8. Link from xylophone.html to groups.html
9. Link from rattle.html to blackGrand.jpg
10. Link from groups.html to xylophone.html

Task 2

Your main task for today will be to create a small web site about the new CS Lounge! The contents of the page(s) are not important for this lab. What's important is that you get practice with links, images, relative URLs and uploading your work to the cs server.

1. On your local mac, create a new folder, named csLounge
2. Within the csLounge folder, create a sub-folder named images and one named documents.
   We have a collection of images that you can use for this lab: images for drinks
3. Call your web page lounge.html and save it in your csLounge folder. Your folder structure should look like this at this point:
   
   

Your lounge.html page should contain the following:

• a couple of (small) paragraphs of text
• several different HTML tags
• at least two images
• at least one absolute link to your favorite website
• at least one relative link to one of the images

When you are ready to upload your stuff to the server, use Fetch to connect to your cs account. Within your public_html folder there, create a new folder, named lab2. Upload your local csLounge folder into the newly created lab2 one.

Make modifications to your web page, re-upload it to the server, view it on a browser over the web, as time permits.