beatty@lasalle.edu
Home
Assignments
Resources
Syllabus
Weekly


Web Design and Development
DART/ENG 230

TR 11:00 - 12:15 (S 21); H-167

Handcoded pages

Your assignment is to follow class instructions to create two Web pages using Notepad on a PC (Wordpad is OK if you make sure to save as plain text/ASCII file with a .html extension) or TextEdit (Mac, also saved as plain text with .html extension; see p. 31). For full credit, your HTML5 code must conform to the standards of XHTML that are listed here as guidelines at the end of this HTML5 FAQ article (also see HTML & CSS p. 179). The full XHTML standards are these:

  1. Page starts with an XHTML doctype: e.g. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">; HTML5 uses the short doctype <!doctype html>
  2. Tags must be lowercase
  3. All non-empty elements (container tags) must have closing tags (e.g. </p>)
  4. All empty elements (self-contained elements) must have a closing slash (e.g. <br />); Note the HTML5 FAQ article says you don't need to do this
  5. All values of attributes must be quoted (e.g. <tag attribute="value">
  6. All tags must be properly nested (e.g. <strong><em>Stuff</em></strong>)
  7. The <title> element must come after the <head> tag in the head element
  8. All attributes must have a value, even if it is redundant (e.g. <input type="checkbox" checked="checked">; Note again the HTML5 FAQ article says you don't need to follow this one

(For HTML5, you could omit the trailing slash in empty elements (do that), leave quotes off attribute values (don't do that), and have mixed case (don't do that). For HTML5 you start with <!doctype html> (do that)(note the exclamation mark—this is actually an SGML/XML tag). So for us, we will do only yhe bold-face rules above.)

 

The content must be real, not nonsensical. One option is a page about HTML and how it works (This is a top-level heading ...). The first page must have:

  • A head element with a title, and a body that includes a heading, secondary heading, third-level heading (<h1>, <h2>, <h3>) and paragraphs/body type (see Chapter 2) with some bolded, some italic and some bold and italic (preferably using the logical tags <em> and <strong> ; see p. 51)
  • body background color other than the default as done in class (e.g. <body bgcolor="#123456">; or one of the 147 predefined colors <body bgcolor="lightblue"> (see p. 249), or a hexadecimal color—see links on October 19 page, or try the color picker at Color Scheme Designer)
  • line breaks, a horizontal rule, (Chapter 2) and ordered and unordered lists (can be nested if you prefer; see Chapter 3).
  • one section set off in a generic container <div> element with a class or id attribute (see Chapter 8)
  • an e-mail link, and a text link to any other Web site that opens in a new window (Chapter 4) and
  • an image used as a thumbnail with an alt or title attribute that says something about image content (Chapter 5) and a link from the image to another page that you make that contains the full-sized version of the image (you can size the thumbnail with width and height attributes for the <img /> tag, or, ideally, make a smaller copy in Photoshop).
Use this if you want: This is alt textLa Salle montage

NOW due Tuesday, February 13. Email me the files as attachments. You probably should zip them, especially if they are coming from a Mac. Don't forget to check GradesFirst to schedule an appointment with a tutor.
Home | Assignments | Resources | Syllabus | Weekly

Web Development Site maintained by John Beatty