Web Design
 ENG 330

Handcoded page

Your assignment is to follow class instructions to create a Web page using Notepad (Wordpad is OK if you make sure to save as plain text/ASCII i.e. with a .txt file extension). For full credit, your code must conform to the standards of XHTML (see HTML & CSS p. 179). That means:

  1. Tags must be lowercase
  2. All non-empty elements must have closing tags (e.g. </p>)
  3. All empty elements must have a closing slash (e.g. <br />)
  4. All values of attributes must be quoted (e.g. <tag attribute="value">
  5. All attributes must have a value (e.g. <input type="radio" checked="checked">
  6. All pages must have a <!DOCTYPE> that specifies the type of markup language you are using. For XHTML, use (copy) this DOCTYPE:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">     (see p. 181)
  7. The <html> tag should include what’s called a namespace (i.e.
    <html xmlns="http://www.w3.org/1999/xhtml">
  8. All tags must be properly nested
The page must have:
  • Actual content—if you’re stuck, make a page that describes what XHTML can do.
  • a head element with a title, and a body that includes a level-one heading, level-two heading and some body type in paragraphs (See chapter 2) with some bolded (use <strong> rather than <b>), some italic or emphasized (use <em> rather than <i>; see p. 51) and some bold and italic.
  • body background color other than the default (as shown in class) (<body bgcolor="blahblash">). See links on the March 12 page
  • at least one section set off in a <div> tag (see Chapter 8) with a class or id attribute
  • line breaks, a horizontal rule (Chapter 2)
  • ordered and unordered lists (see Chapter 3 can be nested if you prefer).
  • a blockquote (Chapter 2)
  • an e-mail link (see Chapter 4), and a text link to any other Web site that opens in a new window (Chapter 4)
  • the following image (or suitable alternative) used as a thumbnail, right-aligned, with a title or alt attribute that says something about image content (Chapter 5) and a link from the image (see UNC page on 1/29) to the full-sized version of the image. This can be on a separate page. (You can size the thumbnail with width and height attributes for the <img /> tag, or, ideally, make a smaller copy in Photoshop).
This is an alt tagLa Salle photo

Due Feb. 5. Email me the file(s) as attachments OR (New!) FTP the files (HTML and image(s) as needed) and just email me the URL. It will be of the form http://www.lasalle.edu/~smithj1/handcode.html

Note that Chapter 10 introduces CSS, which we can use to do a lot of these things. We'll be covering that later on.