COMS 326 assignments

Before leaving class on Thursday, Sept 24, you should have:

1. A functional home page in your coms326 folder, including a picture and links.
2. Some CSS styles controlling the look of your page
3. A page (reviews/index.html) demonstrating at least a basic layout for your review project, including a screen-snapshot image that functions as a link. (You can use tables if you want, but you should have some basic CSS styles started.)

The midterm grade will be for completion of a take-home quiz and at least five pages. Some may still need polishing or additional content, but they should have readable text and color schemes, working links and consistent design elements that relate one page to another. They will include:

1. your coms 326 site home page,
2. your review-project home page
3. your three review pages

Essential elements: page titles, headings, paragraphs, images, lists, links using text, links using images, links within your site, links outside your site, CSS or tables to create a consistent and attractive appearance.

Task list

Sept. 22-29

Your goal for this week and weekend is to accomplish as many of the following things as possible in class, and to have accomplished the main ones (see "work process" below) before next Tuesday's class:

1. make a "home page" for your coms326 work. Done!
2. on it, describe your goals for this course. (mostly done!)
3. in completing and revising the page, learn the difference between in-line and block-style HTML tags: most tags you have used have been "block" style; in-line tags typically affect only some of the words within a block, like these strong and emphasized words.
   There are older HTML tags for "bold" and "italic," but using "strong" and "em" instead could make the page easier to interpret in some browsers -- such as a speaking-text browser for visually impaired users.
4. review the tags you already know: <p> <br /> <table><td><tr> and the comment tag <!-- invisible comments go here -->
   (Look them up in the book or at w3schools.com if you don't remember.)
5. learn these tags, if you haven't already: <b> <i> <strong> <em> <hr /> <ul> <ol>  <li>  <blockquote> 
   (Look them up in the book or at w3schools.com if you don't get to try them in class.)
6. learn these special-character tags: &amp; &quot; and &nbsp; 
   (Look them up in the book or at w3schools.com)
7. learn (or review) the fact that some tags (p, img, table, td, ul and many others) can have "properties" or "attributes" which have "values" (Examples: "width" is an attribute for an image; the number of pixels is its value; color is an attribute or property, "green" is a value.). HTML texts often use the word "attributes"; css texts usually say "properties." They are pretty much the same thing.
8. Use the <a href="..."> tag to create Web links. (mostly done!)
9. make a link from your course home page to Bob's course home page
10. make links to Web sites that you are using or plan to use as part of the course (tutorial pages, good examples, blogs discussing design, etc.)
11. Experiment with CSS codes in the head and body of the document to "style" some of your page contents, especially by specifying font families and colors, and background colors.
    Use "view source" to see the CSS styles in the head of this document, or make a copy and open it with an editor.
12. Test your page on a Macintosh AND on a PC running Windows to see if there are any differences in the ways Internet Explorer and Macintosh browsers interpret your codes.

Next steps

(You can come back to these steps as often as needed during the project as you refine the site design.)

1. Design: With pencil and paper, sketch a first-draft of a layout for the pages in your review project (what you want the pages to look like, including headings, menus, placement of images, etc.).
2. Decide what type fonts, styles and colors you might want to use.
3. Make a home page for the review project, using all of the codes you know so far, and a screen image from one of the multimedia sites you plan to review.
4. Using the text and W3Schools.com as your guide, explore using CSS or table codes to put images and text where you want them on a page, following your design sketch. Use "lorem ipsum" text to test the page. (Go to http://lipsum.com for blocks of text to test with.)
5. Know when to use "absolute" (explicit, external, off-site) links with "http:" and "relative" (on-site) links that just need your directory and document names:
• In each review, create a link from an image to the multimedia story itself (external link to nytimes.com etc.)
• create a link from the review project page to your 326 home page (relative link)
• create a link from your 326 page to the review page (relative link)

Work Process

To try to cut down on the confusion between your identically named server folder (H-drive) and Macintosh folder, try either of the following procedures:

Do all of your work in a COPY of your coms326 folder -- on the Macintosh or on your home computer-- copy it back into the public_html/coms326 folder at the end of class

OR

Make a backup copy of your public_html/coms326 folder at the start of class and date it, then do all your work directly on the server, but make a fresh backup copy at the end of class.

To avoid confusion, DO NOT name any folder on your Mac or home computer "public_html" or "coms326." The only folders with those two names should be the ones on the server (that is, your H-drive).

Call your working copy on the Mac or PC something obvious like "SEPT 24 WORK COPY OF COMS 326" -- even call it "FRED" if you want. The idea is to always know whether you are editing the server copy (public_html/coms326) or a local copy.

Either of those techniques will keep your work safe. You will always have your latest version on the public_html folder of your H drive, where you can get at it from any lab on campus, or from home. And you will have a backup copy on the lab computer or your home computer (or on a Flash drive).

Last tip:

NEVER drag an "index.html" document from your desktop to a folder in your "public_html" space, especially if you are tired or unsure of what you are doing.
Why? Because every folder can have an index.html page. If you drop one in the wrong folder you will destroy the old one.

To play it very, very safe, do it this way:

1. Give the page you are editing a temporary name like "sept22index.html,"
2. rename the older (server) copy "oldindex.html,"
3. then drag the new one into place
4. set your folder permissions
5. test it at http://www.radford.edu/yourname/coms326/yourfolder/sept22index.html
6. and then when you're sure it's the right page in the right folder,
   delete the "sept22" from the beginning of the name,
   reset your permissions,
   and smile.