Lab 1: XHTML 1.0 Strict

Create a structured XHTML 1.0 Strict document with html, head, and body elements

Create the Lab 1 web page shown in the screen snapshot below.

To save typing time, the text of the lab1 web page [*.txt] is provided.

1. Create a new XHTML 1.0 Strict document saved as C:\wamp\www\labs\lab1\lab1.html
2. Copy and paste the text of the lab1 document into the body section of the page

Use HTML comments, title, and meta elements to a web document

Smart programmers use lots of comments to clarify confusing code, separate sections of code making it easier to find chunks, noting TODO sections and change history, hide sections of code by commenting them out, and adding file and method block comments.

In general, HTML mark-up code has much less need for comments compared with programming languages. In COMP334, we will use HTML comments to act as a file header comment block. Comments can be useful to identify closing tags for nested elements, complex pages, and HTML code generated from scripts. Feel free to use additional HTML comments inside your pages.

1. Add a HTML block comment between the DOCTYPE and the html element to provide "page-level" information.
   1. Your University ID (e.g. 1130000)
   2. The path to this file (e.g. C:\wamp\www\labs\lab1\lab1.html)
   3. The COMP334 honor code
      Honor Code: We pledge that this code represents our own work: Enter names here
2. Use title and meta elements to provide page information
   1. Set the text of the title element to "COMP334: Lab 1"
   2. Add meta tags to describe the content type and character set, a description, keywords, and yourself as author.

Note: an easy way to examine the meta data included in a web page to by using the Firefox Web Developer Toolbar, Information menu, View Meta Tag Information

Switch pair programming roles

Switch driver and navigator roles. You may be able to just slide the keyboard and mouse over, or it may be preferable to change seats. Do not change the computer in use however.

Use headings to create a document outline

HTML headings are used to create an easy to navigate outline of the contents of the page.

Every page needs a <h1> element to describe the page followed by h2 to h6 headings to add structure. Like an outline, the heading elements must be nested correctly (no skipping levels).

1. Mark up the heading structure of the lab 1 web page as shown at right
2. Add id attributes to the Html, Head, and Body h3 tags to provide internal links within the page

Note: an easy way to determine a page structure is using the Firefox Web Developer Toolbar, Information menu, View Document Outline

Switch pair programming roles

Switch driver and navigator. You may be able to just slide the keyboard and mouse over, or it may be preferable to change seats. Do not change the computer in use however.

Format text with block tags

1. Use the second screen snapshot annotated with block elements to mark up the block elements in the body of your lab 1 web page

Switch pair programming roles

Switch driver and navigator roles. You may be able to just slide the keyboard and mouse over, or it may be preferable to change seats. Do not change the computer in use however.

Format text with inline and anchor tags

1. Use the first screen snapshot to mark-up the inline elements in the body of your lab 1 web page
   • Use br, em, strong, code, sup, & sub
2. Validate your code at this point and fix all validation errors and warnings
3. Use hypertext anchor links to the following external websites:
   • http://www.w3schools.com/
   • http://www.w3schools.com/html/html_intro.asp
   • http://www.birzeit.edu/ar
4. Use mailto anchor links to the contact emails
   • mailto:name1@birzeit.edu
   • mailto:name2@birzeit.edu
5. Use internal anchor links to three id attributes:
   • #html
   • #head
   • #body

Note: an easy way to view all the anchor links on a web page is to use Firefox Web Developer toolbar, Information menu, "View Link Information"

Screen Snapshots

Note: a handy way to take screen snapshots of a page displayed in the Firefox browser is to use the Firefox add-on Screengrab!

Web page as displayed in browser

Web page with block elements outlined

Note: an easy way to examine the block elements in use is to use the Firefox Web Developer Toolbar, Outline menu, and check "Outline Block Level Elements" and "Show Element Names When Outlining".