To Lecture Notes

IT 130 -- 9/25/08

Review Questions

1. How should the permissions be set on the students.depaul.edu server for files?

   Ans: Read permission for owner, group and other; Write permission for owner only.

2. How should the permissions be set on the students.depaul.edu server for folders?

   Ans: Read permission for owner, group and other; Write permission for owner only; Execute permission for owner, group and other.

3. What is a directory?

   Ans: It is the word in DOS and Unix for folder.

4. Write an image tag that displays the image named funny-dog.jpg.

   Ans: <img src="funny-dog.jpg" />

5. How do you reduce the size of an image file?

   Ans: Use MS-Paint. Open the image, select Image >> Strech/Skew. Enter equal percentages less than 100 for both the Horizontal and Vertical boxes. You can also crop the image by selecting a rectangle within the image.

6. What are two rules for naming files that you upload to the server?

   Ans: (1) No spaces, (2) no uppercase letters.

Absolute Addresses

• An absolute address for a hyperlink or image is the address of a page in a website unrelated to the current website.

• An absolute address begins with http.

• Always use target="new" when linking to a website unrelated to the current website.

• Example:
  <a href="www.disneyland.com" target="new">
  I want to go to DisneyLand</a>

Relative Addresses

• A relative address in a hyperlink is the address of a page within the current website.

• A relative address is a path from the current page to the target page.

• A relative address does not start with http://.

• Using target="new" is not recommended when linking to a relative address in the same website.
  <a href="proj1-smith.htm">Project 1</a>

How to Determine a Relative Address

• Here is a link to Sample Website 1.

• The navigation architecture of the Sample Website 1:

  0 public_html
      1 appendix
          2 app1.htm
          2 app2.htm
          2 app3.htm
      1 ch1.htm
      1 ch2.htm
      1 ch3.htm
      1 images
          2 cat.jpg
          2 dog.jpg
  

• The numbers at the beginning of each line represents the depth of the file or folder relative to the public_html file.

• Suppose that one is writing code for a webpage. This page is called the current page.

• The current folder is the folder that contains the current file.

• A page that is referenced on the current page is called the target file.

• The target file can either be an image that is displayed on the current page or a hyperlink that jumps to the target page.

• Warning: in the situations described below, the attribute src in an image tag, even though it literally means "source", refers to the target image.

• There are four relative address relationships that you should know for this class:
  1. Sibling Relationship (Same folder)   The current page and the target page or image are in the same folder.
     Example:   The files ch1.htm and ch2.htm are in the same folder.

     Example:   The files app1.htm and app2.htm are in the same folder.

  2. Child Relationship   The target file is in a child folder, relative to the current page.
     Example:   The files ch2.htm and app3.htm are in a child folder relationship. ch2.htm is in public_html, but app3 is in the folder appendix, which is a child folder of public_html.

     Example:   The files ch3.htm and cat.jpg are in a child folder folder relationship. ch3.htm is in public_html but cat.jpg is in the child folder images.

  3. Parent Relationship   The target file is in a parent folder, relative to the current page.
     Example:   The files app2.htm and ch1.htm are in a child folder relationship. ch2.htm is in appendix, but app3 is in public_html, which is the parent folder of appendix.

  4. Cousing Relationship   The current page and the target files are two different folders, but those two folders are contained in the same folder.
     Example:   The files app2.htm and cat.htm are in a cousin relationship. ch2.htm is in the folder appendix and cat.jpg is in the folder images. Both appendix and images are in the folder public_html.

• Use the name .. for the parent folder of the current folder.

• Here are some hyperlink tags for these four situations:
  Example 1a:   ch1.htm and ch2.htm are in the same folder public_html. Here is a hyperlink on the page app1.htm (current) that references app2.htm (target).

  <a href="app2.htm">To Appendix 2</a>

  Example: 1b   app1.htm and app2.htm are in the same folder appendix. Here is a hyperlink on the page app1.htm that references app2.htm.

  <a href="app2.htm">To Chapter 2</a>

  Example 2a:   app3.htm is in the child folder apppendix, relative to ch2.htm. Here is a hyperlink on the page ch2.htm (current) that references app3.htm (target).

  <a href="appendix/app3.htm">To Appendix 3</a>

  Example 2b:   cat.jpg is in the child folder images relative to ch3.htm. Here is an image tag on the page ch3.htm (current) that references cat.jpg (target).

  <img src="images/cat.jpg" />

  Example 3a:   ch1.htm is in the parent folder public_html, relative to app2.htm. Here is a hyperlink on the page app2.htm (current) that references ch1.htm (target).

  <a href="../ch1.htm">To Chapter 1</a>

  Example 4a:   app1.htm is contained in the appendix folder; dog.jpg is contained in the images folder. Both appendix and images are contained in the parent folder public_html, hence appendix and images are cousin folders. Here is the image tag that displays dog.jpg on the app1.htm page:

  <img src="../images/dog.jpg" />

Work on Project Proj3

1. Create a page named proj3-index-smith.htm, title "Index Page", heading "Project 3 Index Page."

2. Add hyperlinks for Proj1, Proj2, the image collage and your resume.

3. Modify your collage and resume according to the Project Proj3 description. Your collage must have at least four related images with captions. If you have four images, put the images and captions in a table with four rows and two columns. See the next section for information on creating tables.