9/30/08 Notes

IT 130 -- 9/30/08

Review Questions

Which of the following are good names for folders?
Ans: "BigCities" contains upper case letters, "big cities" contains a space, big/cities will be interpreted as the file cities inside the file big, bitcities.htm is okay for the name of a webpage but a file extension is not okay for the name of a file. Therefore, big-cities and bigcities are the only acceptable filenames.
What is the HTML symbol for parent folder?
Ans: ..
Here is the navigation architecture for 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
```
Write address tags that conform to these four locations of the target file relative to the current file.
- Same folder:
  Ans: Source file ch1.htm <a href="ch2.htm">
- Child relationship:
  Ans: Source file ch1.htm <a href="appendix/app1.htm">
- Parent Relationship:
  Ans: Source file app1.htm <a href="../ch1.htm">
- Cousin relationship
  Ans: Source file app1.htm <img src="../images/cat.jpg" />
Write HTML code to display this table:

A B

D

Ans:
<table>
<tr> <td>A</td> <td>B</td> </tr>
<tr> <td> </td> <td>D</td> </tr>
</table>

Write down the information architecture for your files on the students.depaul.edu server through Project Proj3. Assume that all of your Proj3 files are in a folder named proj3.

Ans:

0 public_html
    1 proj1-smith.htm
    1 proj2-smith.htm
    1 proj3
        2 image-collage.htm
        2 proj3-index.htm
        2 resume.htm
        2 images
            3 earth.jpg
            3 jupiter.jpg
            3 mars.jpg
            3 saturn.gif

Document-level Styles

Here is the document-level style from Example 9: proj3-template in Website3.

< style type="text/css">
body, p, h2 { color:maroon;
              background-color:pink;
              font-family:papyrus; }
tr, p, h2   { text-align:center; }
img         { width:200px; height:200px; }
</style>

A document-level style is placed in the head section (between <head> and </head> tags).
A document-level style starts with <style="type/css"> and ends with </style>.
There are three items that go in a document-level style:
1. Elements, e.g., body, p, h2, tr, img.
2. Properties, e.g., color, background-color, font-family, text-align, width, height.
3. Values, e.g., maroon, pink, papyrus, center, 100px.
Like inline styles, properties are separated from values with colons ( : ).
Like inline styles, property value pairs are separated from each other with semicolons ( ; ).
Unlike inline styles, elements are separated from properties and values with curly braces ( { } ).
Properties that are defined once for an element apply to all elements on the page.
A group of styles in curly braces can be defined for more than one element at a time. Just separate the elements with commas.
See the Cascading Style Sheets (CSS) Reference for more details. The properties that must be known for the midterm are marked with a *.

Practice Problems

Here is a link to Sample Website 2.

The navigation architecture of the Sample Website 2:

0 public_html
    1 first
        2 a.htm
        2 b.htm
        2 c.htm
        2 pics
            3 a.gif
            3 b.gif
            3 c.gif
    1 letters-home.htm
    1 second
        2 d.htm
        2 e.htm
        2 pics
            3 d.gif
            3 e.gif
            3 morepics
                4 last.gif
                4 last.htm

Exercises:
Write the relative path from the source file to the target file:

Current File Target File or Image

a.htm d.htm

letters-home.htm b.htm

d.htm e.gif

last.htm last.gif

More About Headers and Paragraphs

We know that headers are delimited by the tags <hn> and </hn>, where n is one of the numbers 1, 2, 3, 4, 5, 6, 7.
Paragraphs are delimited by the tags <p> and </p>.
Use the text-align property to left align, right align, center, or justify an element. The corresponding values are left, right, center and justify
Justified text is usually not recommended for web pages.
Entire centered paragraphs are also not recommended.
Recall the body of a document is delimited by the tags <body> and </body>.
To change the background color of a single paragraph, use a style attribute:
<p style="color:green;background-color:yellow">
See Example 7.

Lists

Use the delimitors <ul> and </ul> for an unordered list.
Use the delimitors <ol> and </ol> for an unordered list.
Use the delimitors <li> and </li> for the items in an ordered or unordered list.
Use these CSS styles for controlling the numbering of lists:
style="list-style-type:disc"
style="list-style-type:circle"
style="list-style-type:numeric"
style="list-style-type:upper-alpha"
style="list-style-type:lower-alpha"
See Example 8.

Project Proj3

Finish 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 3 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.
Be sure that your project conforms to these specifications:
1. All HTML pages and images are in the proj3 folder.
2. All links are relative links.
3. Each page has a document-level font that sets the font, text color and background color.
4. The images and text on the Image Collage Page must be in a table.
5. Each image must have text in the table explaining the image.
6. Times New Roman is not an allowed font. This includes the text in the Images Collage table.
7. The image page must not be named index.htm, index.html, default.htm, default.html.

Current File	Target File or Image
a.htm	d.htm
letters-home.htm	b.htm
d.htm	e.gif
last.htm	last.gif