IT 111 Chapter 4 Assignment

This assignment is due by 11:59pm on October 25 and is worth 20 points. Don't forget to review the Chapter 4 Updates before you begin. Also view a short YouTube video (4:51 minutes) that shares some tips about doing the assignment before you begin.

WARNING: The Student Date Files that accompany the textbook include the solutions to the hands-on practice exercises you'll be completing for this assignment and it might be tempting to just use these files. However, I believe that the best way to learn XHTML is to type the code in by hand so please don't use the textbook files or web authoring software like Dreamweaver or FrontPage.

Learning Outcomes

After completing this assignment you will be able to:

• use css to create lines and borders
• identify the graphic file formats that can be used on the web and their unique characteristics.
• add a background image to a web page
• apply the XHTML tags used for inserting images into a web page
• correctly code the common attributes and values that are used when adding images to a web page
• create a link that uses an image instead of text
• perform basic edits to photos for improved display on the web

Instructions

Grading Policy: Full points for each file will be given if you've followed all the instructions, included your last name and SID in each page title, and gotten each page to validate without any errors.

1. For each scenario below, select the best graphic file format for web display and explain your choice: (3 points)
   • I've created a logo for my company's web site that includes lots of solid colors. It has a transparent background.
   • I'm selling a sofa on craig's list and want to include a couple photos. The photos need to load quickly because people with dial up will be accessing my online ad.
   • I have an animated graphic for my organization's web site.
2. Complete the Hands-On Practice 4.2 to page 127 then: (2 points)
   • Copy the file named border.html (Figure 4.3) to your web account.
   • Use the current year and your real name instead of the place holders in the textbook.
   • Add your last name and the last four digits of your SID to the suggested page title.
   • Use the W3C Mark Up Validator to validate the XHTML coding for the page.
   • Use the W3C CSS Validation Service to validate the CSS for the page.
   • Send me an email message with a link to the page. The link will follow this pattern:
     http://compass.northseattle.edu/~your_username/border.html
3. Complete the Hands-On Practices 4.3 - 4.4 to page 137 then (4 points)
• Create a folder named trillium4 (all lower case letters and no spaces).
• A new version of the starter3.html file has been provided by the textbook author. Go to the Chapter 4 Updates page to get the new version. Save starter3.html as index.html - the default file name for home pages.
• Copy the images (trilliumbanner.jpg, home.gif, services.gif, and contact.gif) to the trillium4 folder.
• Use the current year in the copyright statement and your real name instead of the place holder text shown in the book.
• Add your last name and last 4 digits from your SID to the page title.
• Add the logo and button images to the home page (Figure 4.17).
• Copy the folder and all the files to your compass web account.
• Use the W3C Mark Up Validator to validate the XHTML coding for the page.
• Use the W3C CSS Validation Service to validate the CSS for the page.
• Send me an email message with a link to the page. The link will follow this pattern:
  http://compass.northseattle.edu/~your_username/trillium4/
4. Continue working on the Case Study (JavaJam, Fish Creek, Pete the Painter, Prime Properties) you worked on in Chapter 3. (7 points)
• The image files needed for the case study are located in the Textbook Student Data Files in WebCT which you should already have saved to your computer.
• If you're working on JavaJam, follow the instructions on pages 154 - 158. Add the music page and modify the home and menu pages as instructed in the text.
• If you're working on Fish Creek, follow the instructions on pages 158 - 160. Add the the Ask the Vet page and modify the home and services pages as instructed in the text.
• If you're working on Pete the Painter, follow the instructions on pages 160 - 163. Add the testimonials page and modify the home and services page as instructed in the text.
• If you're working on Prime Properties, follow the instructions on pages 163 - 167. Add the listings page and modify the home and financing pages as instructed in the text.
• Use the W3C Mark Up Validator and the W3C CSS Validation Service to validate all the pages you've modified
• Send me an email message with a link to the folder which will follow the pattern:
  http://compass.northseattle.edu/~username/javajamcss/ OR
  http://compass.northseattle.edu/~username/fishcreekcss/ OR
  http://compass.northseattle.edu/~username/paintercss/ OR
  http://compass.northseattle.edu/~username/primecss/
5. Edit two of the following photos for optimized display on the web. Green Lake Library (527 KB), Moab Utah (184 KB), London (1.53 MB), St. Paul's Cathedral (1.65 MB), Stockholm (1.63 MB) (4 points)
   • To save a photo to your computer for editing, right click on the image and select
     • Save Image As... (FireFox or Netscape)
     • Save Picture As... (Internet Explorer)
   • Use any image/graphics editing software you have installed on your computer OR use Picasa which is free and has versions for XP/Vista, Mac OS, and Linux. Watch a demo if you decide to use it for this assignment. Or, use written instructions contained in the Course ePacket (see pages 23 - 26).
   • Crop the photo, if necessary. Remember the "rule of thirds" described in the ePacket on page 29.
   • Resize the photo - a smaller photo will also have a smaller file size.
   • Adjust the file compression - review Guidelines for Using Images on pages 146 - 147 in the textbook to see target file sizes and download times. Your photos should look good but the files must not be more than 30 KB.
   • Insert each edited photo into a blank web page and include the height, width, and alt attributes. But, please use the actual width and height of the edited photos. Sometimes students use made up values for the width and height and I'll deduct points for this.
   • Use the W3C Mark Up Validator to validate the XHTML coding for both pages.
   • Send me an email message with a link to the web pages which will follow the pattern:
     http://compass.northseattle.edu/~username/photo1.html
     http://compass.northseattle.edu/~username/photo2.html
     

Questions?

Email Jean  ::  Submit to Discussion Board