CS 100 - Computer Literacy, Spring 2005

Lab 10

This lab assignment will have you create a web page in your web space on your icarus account. This web page is to contain some images.

To connect to Icarus from SEL, follow these steps:

1. Click "Start"-->"All Programs"-->"Network Connectivity"-->"SSH Secure Shell"-->"Secure Shell Client". This will open SSH Client.
2. Click "Quick Connect" icon or "Enter" key to connect to a host.
3. The host name is: icarus.uic.edu, the username is your netid, the password is your netid password.

Or do the following:

1. On the Desktop, click on Internet Tools.
2. Click on the icon, SSH Secure Shell Client.
3. Click "Quick Connect" icon or "Enter" key to connect to a host.
4. The host name is: icarus.uic.edu, the username is your netid, the password is your netid password.

HTML Images

The <img> tag allows a picture to be displayed on a web page. The src attribute is used to specify the file that contains an image. This file can be specified using its filename if the images is in the same directory as the html file using this tag, or the file can be specified using the URL of the image. Images should be in the GIF or JPG format. There may be other formats acceptable to some Web Browsers, but GIF and JPG are the most common. An example of using the <img> tag is as follows.

     <img src="picture.jpg">

<img> Attributes

• ALT attribute - allows for text to be displayed in case the image is not loaded. This text should be descriptive of the image. For example:

      <img src="elephant.jpg" alt="Elephants in Kenya">
  
  

• BORDER attribute - Places a border around the image. The value given specifies the width in pixels of the border.

       <img src="picture.jpg" border=10>
  

• HEIGHT and WIDTH attributes - Allows the user to specify how big the image is to be displayed. The size is given in pixels. Normally either height or width is used, but not both. When both height and width are used, the picture may get distorted if the proper height to width ratio is not maintained.

       <img src="picture.jpg" width=200>
       <img src="picture.jpg" height=250>
  
  

• HSPACE and VSPACE attributes - Allows the user to specify how much space should be placed around the image in either the horizontal or vertical direction. The space is given in pixels.

       <img src="picture.jpg" hspace=15>
       <img src="picture.jpg" vspace=5>
  
  

• ALIGN attribute - This attribute is used when you want to have the image placed in the middle of some text. The various values of this attribute specify where the image should appear in relation to the text. The text is normally aligned with the bottom of the image. You can use the values of top and center to align the test at the top of the image or at the center of the image.

       <img src="picture.jpg" align="center">
  
  

To find the URL's of an image in a web page

You can make a copy of an image by clicking the RIGHT mouse button when over an image and selecting the "Save Image as..." option from the pop-up menu. This will save the image to the current machine that you are using. You may have to transfer the image (via FTP or some other method) to get it to your UNIX account.

HTML Links

The Anchor tag <a> allows you to add a link to another web page. The href attrribute is used to specify the URL of the web page to which the link will point. The name attribute allows the a page to be displayed at some location other than the top of the page. This discussion will focus on the href attribute. The follow is how to write a link to the CS Department Home Page:

     <a href="http://www.cs.uic.edu">CS Home Page</a>

     CS Home Page

The URL is:	http://www.cs.uic.edu	This specifies where the link will go. This information is given by the value of the href attribute. Normally the URL will specify another HTML web page, but it can reference just about anything. If the web browser can display the URL it normally asks if you want to download to which the object the URL refers.
The display information is:	CS Home Page	This specifies the information that will be displayed on the web page that you can click to activate the link. This information can be text or an image or both. Whatever information is between the open anchor tag <a> and the closing anchor tag </a> will become the display information.

     <a href="http://www.uic.edu"><img src="uic_logo_full_blue_rev.gif"></a>

Lab Assignment 10

For this lab assignment complete the following steps:

1. Select an image from one of the following pages:
   • Images from Brookfield Zoo
   • Images from Legoland

2. Create a web page to display the following information:
   • A title of CS 100 Lab 10
   • A heading of CS 100 Lab 10
   • An unordered list containing your name, Net-ID, Time of Lab
   • A link to the CS 100 image page from which you took your image.
   • The image that you selected.
   • The image resized to display nicely on the web page.
   • The image displayed distorted (i.e. stretched or smooshed). Make it small enough to display on the web page. The resulting image should not keep the same height to width ratio of the original image.
   • An image link using the image you selected to link to either Brookfield Zoo's web page at http://www.brookfieldzoo.org or Legoland California's web page at http://www.lego.com/legoland/california/.
   Your web page must have text near each image explaining how that image is being used to meet the requirements for this lab.

3. This web page must be placed in your web space (in your public_html directory) on your Icarus account.

4. You are also required to put a link on your Icarus Home Page to the page you created for this lab.

   Verify that your file is viewable via a web browser at the URL of:

        http://icarus.uic.edu/~NETID
   
   where NETID is your own Net-ID
   

   You can check this out via the link to your home page on the CS 100 Student List page. Once you are at your home page, follow the link you added to your home page for this lab assignment.

5. You are also to submit this web page electronically by emailling the page (you don't need to email the image) to the CS 100 instructor account at i100@cs.uic.edu.