Printed from TeacherJohn.com • http://teacherjohn.com/cabrillo/dm160b/exercises/ex02.php

Exercise 2: Create a Page, Style Sheet, Upload, and Validate


Resources for this exercise:


Read Text Editors for HTML and Script Editing before starting this exercise. You may need to download one of the text editors listed there.

1) Using a basic text editor (such as TextWrangler on Mac OS X, or Notepad++ on Windows) create an HTML document. This page will become your home page.

This file must be saved as text in UTF-8 format, with no byte order mark (BOM).

2) This page must display a headline (in an <h1> tag) that states your full name. It should say something like "John Sky's DM61 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.

7) Following this paragraph will be a sub-sub-headline (in an <h3> tag) that says "My Text Editor".

8) Following this paragraph will be a simple paragraph (literally coded as a paragraph, using <p> and </p> tags) of one sentence that indicates the name of the text editor that you used to create this page. It should say something like "The text editor I used to create this page is TextWrangler" or "The text editor I used to create this page is Notepad++".

9) A portrait photo of your face must appear somewhere on this page. As with all images that are a part of your coursework for this class, the image file size must be optimized. See "How to Optimize an Image for the Web Using Photoshop". This must be a recognizable photo (no sunglasses, baby pictures, far-off-in-the-distance shots, etc.).

Create an "images" folder at the root of your public_html folder. Upload your image into it.

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 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.

10) 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 DM61 Home Page".

11) Add the HTML 5 DocType that will enable you to use an HTML validator (as explained in How to Use the W3C HTML and CSS Validators). Make sure you use the code for HTML 5 (not XHTML 1.0 Strict nor HTML 4, for example). First, at the very beginning of your document, before the <html> tag, place this line of code:

<!DOCTYPE html>

12) Add the character encoding meta tag (as explained in Character Encoding for Web Pages). Because this tag tells the browser how to interpret the characters used in the document, it should be the first tag in the <head> section. So right after the <head> tag, place this line of code:

<meta charset="utf-8">

13) 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. Make sure you use the code for HTML 5 (not XHTML 1.0 Strict nor HTML 4, for example). (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 links (for HTML 5).

14) 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".

15) Create an external style sheet for exercise 2.

16) In this style sheet define at least five CSS rules.

17) Save this style sheet as "exercise2.css". Create a folder called "css" at the root of your public_html folder, and upload the style sheet into this folder.

18) This page must demonstrate the correct use of all of the rules in your style sheet.

19) In summary, this page must correctly use the following tags:

Description Tag
document type declaration (see step 10 above)
character encoding meta tag (see step 11 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>

20) 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.

21) Upload this page to your "public_html "folder on the webhawks.org server. Because this is your main home page, it must be at the root of (directly within) your "public_html" folder, not within a subfolder.

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.

22) Create a folder called "css" directly within your public_html folder, and upload your external style sheet into your css directory.

23) 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.

If, when you point your browser at your home directory, instead of seeing your home page you get a message from the server that says: "Forbidden: You don't have permission to access …" your home directory, it simply means that you have no home page ("index.html") in your directory.

24) Make sure the HTML on this page validates (using the HTML 5 Doctype) 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 link. For more information, see How to Use the W3C HTML and CSS Validators for step-by-step directions.

25) 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.

26) If there are any errors, fix them, re-upload the page, and validate it again.

27) Submit the feedback form. To receive full credit for this exercise you must submit this feedback form before it expires. This exercise is due on 9/22/14. Allowing for a one-day grace period, the form will expire at the end of the day following the due date, which means the form for this exercise will expire at 12:00 AM on 09/24/14.


Grading rubric considerations for this exercise

For full credit: