Assignment #1

RCC Fall 2009 CIS-72A XHTML

Basic HTML structure, Headings, Lists, and Images
Due Wed Sept 16 at start of class
If early or late, turn in to MLK-219 lab with a time stamp
9 Printouts, 100 Points

Note that before you begin this assignment you should already have read and understand the issues discussed within the Assignment #0 document that is passed out in class and available on the class Web site.

Part 1: the Hybrid VIdeo #1
1 Printout, 20 Points

For this part of the assignment, you are asked to watch, listen, and do the same steps as are done in the hybrid video. The links to this hybrid video appear below (both Windows Media and Flash versions). But before you attempt to access this video, you should first read the "About Hybrid Videos" document so you are sure to be experiencing the video as it was intended.

Link to the Windows Media video (8MB .wmv file): Hybrid Video #1 (43 min, 20 sec video)

Link to the Flash version of this video: Flash Hybrid Video #1

By doing what the video does, you will be creating an HTML online resume document from scratch. There are no files that you need to have as a starting point for this part. The document that you create, "resume.htm", should be saved on any disk and folder that you like and should be identical to the document created in the video except that you should insert your own first and last name in place of "Joe Student" wherever they appear in the video.

Printout #1: Turn in a printout of the finished document, (after your name has been inserted as directed above), printed from within the browser (using the browser's File menu). Your printout should look like the one shown at the end of the video except for your name.

Part 2: Your Own Resume
2 Printouts, 20 points

Copy your resume.htm file from part 1 of this assignment, calling the new copy myresume.htm. Then make the following changes to this Web page to customized for you.

  1. Modify the contact information paragraph to reflect your own address, email, and phone.
  2. Rewrite the Objective section to indicate that you are looking for a particular job position within a particular industry. Choose a type of job that you are actually interested in.
  3. Modify the Interests section to list 3 of your own actual interests (instead of the original 2). Modify the list structure to display these 3 interests as an ordered list (1, 2, 3) instead of a bulleted list.
  4. Adjust the Education section to be an unordered list. Modify the list items so that they reflect actual information about your own educational history. If you do not have any degrees or certificates yet, just indicate what you are working toward currently at RCC, your educational goals, your (intended) major, extra activities on campus, and/or classes you are taking or have taken. You should end up with at least 2 bulleted education list items.
  5. Adjust the Experience section to indicate at least 2 jobs that you have either actually had previously or, if you do not have the experience, that you make up. Format the section using the same structure of tags that is in the original page.
  6. Modify the References section to replace the existing 2 people with two new ones based on your new experience section. You are encouraged to make up 2 people with humorous names and job titles. But let's keep it clean folks -- remember, this class is rated PG-13!
  7. In an HTML comment section within the "head" section of your code, indicate that this is "Assignment #1, Part #2".

Printout #2: Turn in a printout of your new resume document, (after your name has been inserted as directed above), printed from within the browser (using the browser's File menu.)

Printout #3: Turn in a printout of the HTML code for this same document, printed from within Notepad (or whatever text editor you are using.)

Part 3: Tutorial 1, Developing a Web Page
2 Printouts, 20 Points

Read and do the steps and instructions given within tutorial 1 on pages 1 - 47 of the textbook (you should not do any work after page 47). In completing this tutorial you will create the "Dave's Devil Sticks" Web page exactly as shown in the book except for the following changes.

  1. Find the document's second paragraph of text, the indented testimonial area which reads "I'm more than happy to recommend...". On the line below this paragraph, locate the name "Thomas Gage" and replace it with your own full name. Make sure that the rest of that line remains the same, including the em-dash and space before your name and the comma after it.
  2. Also make sure that your full name shows up in the comment area of the HTML code, as indicated on page 14 in figure 1-7.

Printout #4: Turn in a printout of the finished document, (after your name has been inserted as directed above), printed from within the browser (using the browser's File menu). Your printout should look like the one shown in figure 1-41 on page 47 (except for your name.)

Printout #5: Turn in a printout of the HTML code for this same document, printed from within Notepad (or whatever text editor you are using). The printout should look something like the HTML document shown in figure 1-40 on page 46 of your textbook (except that figure is just a partial view of the file.) Make sure your name shows up in the code in the 2 areas mentioned above.

Part 4: the Hybrid VIdeo #2: Links
1 Printout, 20 Points

For this part of the assignment, you are asked to watch, listen, and do the same steps as are done in the hybrid video. The links to this hybrid video appear below. But before you attempt to access this video, you should first read the "About Hybrid Videos" document so you are sure to be experiencing the video as it was intended. If the video link doesn't start the video when clicked, try right-clicking and saving the target to download the file and then try playing it locally.

By doing what the video does, you will be creating a "Favorite Links" page. But you are not asked to create this page from scratch. To follow along with the video's steps, you will need to have a set of starter files ready for your own use. The links to this hybrid video and to these data files appear below. But before you attempt to access this video or its data files, you should first read the "About Hybrid Videos" document (and the section entitled "Getting The Data Files For The Video") so you are sure to be experiencing the video as it was intended.

Link to the data files (.zip file): Data files for Video #2

Link to the Windows Media video: Hybrid Video #2 (12.6MB .wmv file, 50 min 32 sec video)

Link to the Flash version of this video: Flash Hybrid Video #2

The document that you create, "links.htm", should be exactly like the document created in the video except that you should insert your own first and last name in place of "Joe Student" wherever they appear (in the title and h1) and insert your email address instead of Joe Student's in the "Contact Me" section. You should also insert a typical html comment area toward the top of the file to identify yourself, the class you are in, the day/time it meets, and your instructor.

Printout #6: Turn in a printout of the completed favorite links document, (after your name has been inserted as directed above), printed from within the browser (using the browser's File menu). Your printout should look like the one shown in the video except for the changes mentioned above (your name and email).

Part 5: ADD Your Own Links
2 Printouts, 20 Points

For this part of the assignment, you are asked to finish part 4's favorite links page. You will be adding some of your own favorite links. You may have noticed a sample of a completed "Favorite Links" page toward the beginning of the hybrid video. Although that sample had the correct layout and formatting, you are going to be adding your own personal favorite links and link categories, so yours will be different. Below are the guidelines and requirements for completing this page. Follow them closely to maximize your points.

Guidelines

  1. Copy your links.htm file (from the hybrid video) and call the new file mylinks.htm. Then open mylinks.htm in your editor of choice and modify this new file as follows.
  2. Make sure that the "Contact Info" section displays your own email address as the underlined link in the browser and also addresses the email to you when that link is clicked.
  3. Note that all of the links that you add to this document must be your own unique ones -- not copied from mine or another student's favorite links page.
  4. Add 2 more h2 category sections above the current "HTML Resources" section (but below the bullet list of links). Examples of possible categories are "Games" (for gaming sites), "Shopping" (for e-commerce sites), "Sports" (for sports related sites), "Movies" (for movie related sites), etc.
  5. Place at least two appropriate links within each of these two new categories. The link descriptions should be about as detailed as the existing ones from the video. Use the same HTML coding format (definition lists) for these links as was used for the ones in the video. Test your links -- they must work!
  6. Insert two more "Top of page" image links for these new sections, using the same image and alignment used in the video.
  7. After your two new categories and links are in place, then insert your two new category names at the beginning of the existing bulleted list as follows:

Printout #7: Turn in a printout of the completed "Favorite Links" page, printed from within the browser using the browser's "File" menu. The whole page must display (it is ok if it takes more than one sheet of paper).

Printout #8: Turn in a printout of the HTML code for this same document, printed from within your text editor (such as Notepad). Make sure that all of your code prints (it is ok if it takes more than one sheet of paper).

Part 6: A Cover sheet
1 Printout, 0 Points

For this part of the assignment, you are asked to create a quick word processing document that contains the following information in a large font. You will attach a document like this to the front of each of your assignments in this class to help identify what assignment it is and that it is your work. Here are the guidelines for creating this word processing (not a html) document.

  1. The first line should look like the line below, with your own name replacing Joe Student's.
    Name: Joe Student
  2. The second line should look like the line below.
    Class: CIS-72A
  3. The third line should look like the line below, with your own class' day and time.
    Meets: Wednesdays @10:30
  4. The fourth line should look like the line below.
    Assignment: #1
  5. The fifth line should look like the line below.
    Instructor: Scott McLeod

Printout #9: Turn in a printout of your word processing document. Staple this cover sheet on top of all of your other printouts. That way it will identify your work when you turn it in.