Setting Up
Create a separate directory (folder) to hold this assignment somewhere under your “My Documents” folder in the lab. You are going to put a file named index.php and two jpeg image files in this directory (and nothing else). For testing purposes, it may be convenient to use your login account name as the name of this folder.
Assignment Description
This is an assignment to make sure you can build a valid web page that incorporates a variety of HTML visual elements: headings, paragraphs, images, and tables. The web page is to be “unstyled.” By that I mean that the page is not to use any CSS at all. For example, if you start with the page template you worked on for the first assignment, you are to take out the LINKs to stylesheets that were in the <head> node of that page.
The page is to use no presentational features of HTML. That is, use no attributes that affect the appearance of the material you are presenting. For images, that means you are not to set the height or width, and for the table, it means that you are not to specify border or cellpadding attributes. Your page may not look very interesting, but all that will come when we start working with CSS in the next assignment. For now, plain vanilla.
The name of your page is to be index.php. This is a special file name that the Apache server will recognize as the page within a directory that is to be sent if a browser requests a URL for a directory instead of for a file within a directory. (This is an Apache configuration option that we set up for the computers in the lab.)
Code you web page so it has the following content:
- Use a meaningful title for the titlebar.
- Create a
<div>with an id of“heading”, and put a level-1 header (<h1>) with the same text as the page title inside this div. - Create a second
<div>with an id of“content”, and put three level-2 headings inside it:- Information
- Pictures
- Media
- Write two paragraphs of "information" underneath the Information heading. (You may use text from lorem ipsum if you want to save your creativity for other things.)
- Put two pictures next to each other under the Pictures heading. You may use your own, or you may borrow these two from me:
- Put a table with four columns in it under the Media heading. Make the headings for the four columns “Author/Artist,” “Title,” “Medium,” and “Comments.” Enter several rows in the table for items in different media categories, such as “Book,” “CD”, etc.
-
Create a third
<div>with an id of“footer”. In it, put a horizontal rule (i.e. a line: <hr>) and a link tohttp://validator.w3.org/check?uri=referer.
Test Your Page
You may use any editor you like to write your web page: Vim, Dreamweaver, or some other one that’s available to you. But write your code so it is indented to reflect the structure of the DOM tree you are creating, eliminate tab characters from your code, and make sure no code lines are wider than 76 columns except in very rare circumstances.
As you write your code, make sure to use valid XHTML 1.1 elements only. Dreamweaver can help you with this, but you need to test the code regularly with Firefox's HTML Tidy extension. Be sure to set Tidy’s Accessibility option to “Normal” instead of its default value of “None”. Only a green circle with a checkmark is acceptable.
Use Firefox's “Page Info” feature (under the Tools menu) to verify that your page has “application xhtml+xml” (not text/html) for its Type, and “Standards compliance mode” (not Quirks mode) for its Render Mode.
When the page displays correctly in Firefox, check to make sure it also displays correctly in Internet Explorer and Opera.
Finally, be sure the link at the bottom of the page works, and that the W3C Validator says the page is valid XHTML 1.1.
Submit the Assignment
Once you have coded and tested your page, send me an email containing your name, 4-digit ID, account name in the lab, and the path to the directory containing your page and images. Be sure the Subject: of your email is “CS-081 Assignment 2”