William M. Pegram
Home | Courses | Web Design | Office | Client-Side Scripting | Server-Side Scripting | About Me

Home Page, Linking, Biography, Image, CSS Assignment (revised Spring 2012)

Before You Get Started - Be Organized - Put all your files for this assignment in a folder and put nothing else in this folder.

In this assignment you will create two web pages and an external stylesheet. You must create these in a text editor such as Notepad or Notepad++.

Requirements for the home page (25 points total)

• Filename of index.htm, index.html, default.htm, default.html, etc. (5 points)
• A relative link to another page that contains a short biography of yourself (6 points)
  • relative implies no reference to a drive such as the hard drive (2 points)
  • relative implies no complete URL, e.g. nothing beginning with http: (2 points)
  • relative implies no use of a leading / in the address (Dreamweaver will call this a site-root relative reference but normally these are considered absolute references) (2 points)
• This link must be easy to find (4 points)
  • this means pay attention to the contrast between color of link and color of background (2 points)
  • placement of tag on page (2 points)
• An appropriate title in the <title> tag  (5 points)
• The page must be linked through a relative reference to an external stylesheet (use the link tag) (5 points)

This home page will have links to work you do in this class. I will assume the location of this home page will be at the root directory of the URL specified for you on the student page at www,billpegram.com unless you email me otherwise. For example, if you do not want the home page of your student site to be devoted to this class, you may put all the files for this class in a folder within your site and then you would email me the URL of that folder. Thus your home page should have links to your work.

Requirements for the bio page (40 points)

• An appropriate title in the <title> tag (5 points)
• Two or more paragraphs of information about you -- Try to make this informative so that I can get to know you better, but since the page will be up on the internet and would be located by search engines, consider what information you do and do not want to include (10 points)
• An inline image (not a background image) (5 points)
• The reference to this image must be a relative reference (5 points)
• If you get the image from elsewhere, indicate the source of the image on the page or in HTML comments. (5 points). HTML comments are done like this: <!-- the comment goes here -->
• The image must include an alt attribute. You must also specify the height and width of the image, either through HTML attributes or CSS properties but don't resize using these; if you want to resize, do it in a graphics program like Fireworks, Paint, Photoshop, etc. (5 points)
• The page must be linked through a relative reference to the same external stylesheet as referenced by the home page (5 points)

Requirements for both pages (15 points)

• Both pages must have a DOCTYPE appropriate for XHTML1.0 Strict (5 points)
• Try to validate both pages as XHTML 1.0 Strict -- you don't need to fix every error, but try to fix most of them (10 points)

Requirements for the external stylesheet (15 points)

• Three tags must be styled and these three tags must appear in both of the pages (15 points)

When you are done, FTP all four files (the two html files, the image file, and the external CSS file) to your web space.  Test to see that it works by clicking on the link to your site at www.billpegram.com -- once it works, submit the URL via Blackboard. Ideally, you should test it from a computer different than the one you used so as to detect any references to the hard drives or flash drives.

I will not grade it until I receive your Blackboard submission and I will not grade files that are attached to the Blackboard submission - FTPing is an essential web skill and there are several typical mistakes that one will make, so it is important to get these mostly out of your system before your final project and before you enter the workforce.

Tips If You Have Problems

• Don't put spaces in filenames or foldernames (even if yoiu don't have problems)
• Relative links are described in Section 8 of the XHTML Tutorial
• Using inline images is described in Section 9 of the XHTML Tutorial
• Validation is described in Section 6 of the XHTML Tutorial
• The settings to use CoreFTP are shown in Section 7 of the XHTML Tutorial (in particular hostname, username, and password - remember that your username is nvstu/lanid -- don't forget the nvstu and you use your lanid (what you use to sign on to computers at NVCC) rather than your email address. Same for your password.
• External stylesheets are described in the CSS Tutorial
• If something isn't showing up on your web page, view the source code -- this is particularly important when the page is on the internet, because the files on the internet may not be the same as on your computer due to failure to FTP the file
• I make assignents due after the next class session so that if you have problems, you can ask me after class. Try to get the assignment done before class so that you can focus on new material. Avoid the temptation to work on assignments during the class lecture - all parts of the course are important and there is a time and place for everything.

Revised: February 6, 2012. Comments to William Pegram, wpegram@nvcc.edu