Lab 1: HTML coding with Notepad

Use Notepad to hand-code the HTML tags and text to duplicate the web page shown below.

Refer to Dave Raggett's Getting started with HTML or other online tutorials on HTML for a refresher on what we covered in class.

Screen snapshot of Lab 1 assignment

Save your page as index.html in folder Lab1 in your cs350 u:\ drive.

Use your own account number in place of the nn in cs35002_nn in heading 1 and your own name as heading 2
The non-obvious HTML tags are indicated for you inside square brackets (e.g. [h1])
- You should not include the "[..]" tag tips in your Lab 1 solution
Be careful not to omit any of the required elements (both block and inline) displayed in the sample web page shown above
- Individually, come up with two possible topics for Project 1 and include them on web page
- Do not write "Topic 1" and "Topic 2", write real topic ideas
Five hypertext links are required:
1. "CS 350" should link to http://www.cwu.edu/~gellenbe/350/
2. "Central Washington University" should link to http://www.cwu.edu/
3. "IEEE Virtual Museum" should link to http://www.ieee-virtual-museum.org/
4. "Related Web Sites" should link to http://www.cbi.umn.edu/resources/relatedlinks.html
5. The "Made with Notepad" image should link to http://www.notepad.org/
The "Made with Notepad" logo is available at www.notepad.org/
- Follow the link at the bottom of the page to "Get Created with NOTEPAD logos here"
- Right-click any one of the logos and save it to your U:\Lab1 folder (do not hotlink to the logo image)
- Link to the image on you index.html page with a relative path address (not as an absolute address like "U:\Lab1\notepad.gif")
- Include a short alternative (alt) description attribute for the image describing the image for those who cannot see it
- Optional: include an image title attribute to produce the pop-up tool tip with the text "go to www.notepad.org"

Note: This assignment is designed to be a throwback to old style HTML - those entering the course with previous XHTML experience do not need to worry about creating valid XHTML code or applying formatting to the page through CSS.

To Receive Credit

Print out and staple together both the displayed Web Page from IE (or Firefox) and your HTML code from Notepad
- Staple the browser printout as page 1 and the HTML code from Notepad as page 2
Make sure your name is on your printouts and your work is stored in your cs350 account in folder U:\Lab1\
Keep track of and write on your printout the total completion time (rounded to closest half-hour) that it took you to complete the lab assignment

Grading Criteria

Labs will be graded on a scale of 0 to 10:
- 10 Excellent, no problems detected in the HTML code or link references
- 9 Very well done: Page displays perfectly in a browser with one minor problem in the HTML code or omission of one of the block or inline elements. For example, problems and omissions would include
  - forgetting to include the alt description with the "Made with Notepad" image
  - forgetting to include a hypertext link from the "Made with Notepad" image to http://www.notepad.org/
  - one of the hypertext link reference (href) addresses is not correct
  - Hotlinking or using absolute addressing for the "Made with Notepad" image
  - forgetting to use <strong> or <em> elements to apply emphasis to a group of words
  - forgetting to include the <title> element inside the <head> element
- 8 Well done: Two minor problems in the HTML code or omissions of required block or inline elements.
- 7 Acceptable: Three problems in the HTML code or omissions of elements.
- 6 Problems: Four or five problems in the HTML code or omissions of elements.
- 5, 4, 3 Incomplete: the lab was attempted but over one-third of the requirements still undone.
- 0: Lab not submitted, no work done. You are allowed to drop your lab lowest score.