CS 100 - Computer Literacy, Spring 2005

Lab 10 Solution

In order to display an image on a webpage, we need to transfer image to our webspace on icarus account. There are tools available to transfer a file from a computer to our icarus account. One such tool is WS-FTP. The tool is available in the Internet Tools window (it is on the desktop on ACCC windows PCs, once you log in).

Here are the simple steps you can follow to transfer an image from the PC you are working on, to public_html directory in your icarus account:

  1. Open Internet Tools window from desktop.
  2. Double click on the WS-FTP icon. A new window will pop up.
  3. In the profiles, choose Icaurs (it will fill up the host name as icarus.cc.uic.edu, alternately you can just fill up the hostname yourself).
  4. Now put in your net id in User Id field.
  5. If the Anonymous button is checked, you should uncheck it.
  6. Enter your ACCC common password in the password field and click OK.
  7. If it goes through, the focus will shift on another window. This window has two parts. The left half displays the files on the machine on which you are logged in. The right half displays the content of your icarus account.
  8. Locate the directory on the local machine (the PC you are working on), which contains the image you want to transfer. So in the left part, all the files in the directroy/folder will be displayed.
  9. In the right half of the window, find public_html directory, and double click on that. The right half then will show the content of the same, i.e. all the files/directories in it. If you want to transfer image to one of the subdirectories of public_html directory, double click on that directory.
  10. Now in the left half of the window, double click on the image file you want to transfer and it will be transfered in your icarus account.
  11. To verify, you can log in to your icarus account, go to public_html directory (by now you should know how) and look at the list of files (again you should know how). The image file should be listed as one of the entries.

The following solution assumes that the image file already exists in icarus account. The Grading Criteria is at the bottom of the page.

HTML code How it looks on webpage 

<html>

<head>
  <title>CS 100 Lab 10</title>
</head>

<body>
  <h1 align="center">CS 100 Lab 10</h1>

  <ul>
    <li>Name: Instructor CS 100</li>
    <li>NetId: i100</li>
    <li>Time of Lab: MF 8am - 10am</li>
  </ul>

  <p>
    This is the original image, it is also an image link:
  </p>
  <a href="http://www.lego.com/legoland/california/">
    <img src="lab10.jpg">
  </a>

  <p>
    This is the modified image, width is changed to 300 pixels: 
  </p>
  <img src="lab10.jpg" width=300>

  <p>
    Distorted image with width of 300 pixels, and height of 400 pixels:
  </p>
  <img src="lab10.jpg" width=300 height=400>
  
  <p>
    The image was taken from 
    <a href="http://www.cs.uic.edu/~i100/images/legos/index.html">
    CS 100 Image Page</a>
  </p>

</body>

</html>

CS 100 Lab 10

  • Name: Instructor CS 100
  • NetId: i100
  • Time of Lab: MF 8am - 10am

This is the original image, it is also an image link:

This is the modified image, width is changed to 300 pixels:

Distorted image with width of 300 pixels, and height of 400 pixels:

The image was taken from CS 100 Image Page.

Grading Criteria:

If webpage is not accessible, no credit will be given. If you have any questions, please contact Devang.