Exercise 2
Create a Page, Style Sheet, Upload,
and Validate
Resources for this exercise:
- See the Course Schedule for due date. Exercises are due before the beginning of class on the due date.
- See the Homework Frequently Asked Questions (FAQ) page for answers to questions about homework exercises.
- See the How to Name Files and Directories page. Failure to follow proper naming conventions will result in lost credit.
- See the Our Class Web Server page for information on the server.
- See the HTML & Web Design: Learning Aids section of the Resources page for information on basic HTML tags.
- See the How to Upload to Webhawks.org with Fetch (Macintosh) and How to Upload to Webhawks.org with CoreFTP (Windows) for information on uploading.
- See the Logins and Passwords Worksheet page for your logins and passwords.
- See the CSS Basics page, and these CSS resources.
1) Using a basic text editor (such as TextWrangler on Mac OS X, or Wordpad on Windows) create an HTML document. This page will become your home page.
2) This page must display a headline (in an <h1> tag) that
states your full name.This should be the very first line in
the <body> section. It should say something like "John
Sky's DM160B Home Page".
3) Following this headline will be a sub-headline (in an <h2> tag)
that says "My Web Design Experience".
4) Following this sub-head will be one or more paragraphs (literally coded
as paragraphs,
using <p> and </p> tags) that indicate
your Web design experience.
5) Following this paragraph will be another sub-headline (in an <h2> tag)
that says "My Personal Goals for This Course".
6) Following this sub-head will be one or more paragraphs (literally coded
as paragraphs,
using <p> and </p> tags) that indicate your personal goals are for the course.
Don't add other stuff to this page right now; keep it simple and plain. You'll add more to it later. This page will become your home page for the class, and will eventually include your photo, and links to all your exercises. The most important thing now is not to make the page look pretty, but to use proper structural markup that validates.
7) This page's <title> must indicate that this is your
home page for your class work, so it should say something like "John
Sky's DM160B Home Page".
8) Add the XHTML 1.0 Strict DocType that will enable you to use an HTML validator
(as explained in How
to Use the W3C HTML and CSS Validators). First, at the very
beginning of your document, before the <html> tag, place
this line of code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
When use the above DocType, you will also need to use the following for
your <html> tag:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Note that a "strict" DocType means that you cannot use any deprecated
elements or attributes (such as the <font> element, or the align or target attributes).
Also note that an XHTML DocType is a little more restrictive than an HTML DocType. For example, in XHTML:
- All elements must have ending tags. (Unlike HTML, which allows your code
to omit the ending tag for some elements, such as
<li>or<p>.) - For elements that do not have a natural ending tag (such as
<br>,<hr>,<img>, and<link>), add a space and a slash to the end of the tag. For example:<br /><hr /><img src="dog.gif" alt="dog" /><link rel="stylesheet" href="css/style.css" type="text/css" />
- All HTML code must be lowercase.
- All values of attributes must be in quotes.
9) This page must contain links (either buttons or text links) to the HTML and CSS validators. See How to Put HTML and CSS Validate Buttons on Your Page for information on how I want you to to do this. (Use the block of code on this page to make the button links or text links, so that clicking on the links automatically lets you know if the page validates or not.)
Make sure you use the correct buttons or text links (for XHTML, not HTML).
10) This page will use an external style sheet, so this page must contain
a <link> tag in the <head> section. In
your<link> tag, use a relative path to
the style sheet. You will be creating a directory, within your public_html
directory, called "css" that will hold your style sheets for homework
exercises, so the relative path from your exercise to the style sheet will
be "css/exercise2.css".
11) Create an external style sheet for exercise 2.
12) In this style sheet define at least five CSS rules.
13) Save this style sheet as "exercise2.css".
14) This page must demonstrate the correct use of all of the rules in your style sheet.
15) In summary, this page must correctly use the following tags:
| Description | Tag |
|---|---|
| document type declaration | (see step 8 above) |
| HTML document | <html> |
| head section | <head> |
| title | <title> |
| body section | <body> |
| heading 1 | <h1> |
| heading 2 | <h2> |
| paragraph | <p> |
| link to external style sheet | <link> |
16) Save this file as a text-only file, and when you save the file name it "index.html". Make sure you name it exactly as it says: the words "index" and "html" with a period between them, with no spaces and no capitals.
17) Upload this page to your folder on the webhawks.org server.
See the How to Upload to Webhawks.org with Fetch (Macintosh) and How to Upload to Webhawks.org with CoreFTP (Windows) for information on uploading.
18) Create a folder called "css" directly within your public_html folder, and upload your external style sheet into your css directory.
19) View your page (the page on the server, not the page on your disk) in a Web browser:
Go to:
http://www.webhawks.org/~yourusername
to view your exercise 2 page (your home page).
Or, to make it easier, you can always get to your home page by going to the Student Sites page for our class.
20) Make sure the HTML on this page validates (using the XHTML 1.0 Strict DTD) with no errors, according to the W3C's online HTML Validator at http://validator.w3.org/. You can easily do this by clicking on your HTML validator button. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.
21) Make sure the CSS on this page validates, with no errors, according to the W3C's online CSS Validator at: http://jigsaw.w3.org/css-validator/validator-uri.html. You can easily do this by clicking on your CSS validator button. See the CSS section of How to Use the W3C HTML and CSS Validators for step-by-step directions.
22) If there are any errors, fix them, re-upload the page, and validate it again.
23) Submit the feedback form. To receive credit for this exercise you must submit the feedback form by the due date and time.