COP 1830 Project 1 - XHTML Validation

PATH: Instructional Server> COP 1830> Projects>

COP 1830 Project 1 - XHTML Validation

Purpose:

This project is intended to give students experience in composing a simple but valid web page under the XHTML standard containing: ordinary narrative text, enhanced text, hyperlinks, graphic elements, and a colored background. The XHTML code will be written using a plain text editor to help students develop a fundamental understanding of XHTML tags and their use. The project will show that composing a web page is a multi-part process, in which you:

Select your topic and located reference material (text, images, video, etc.)
Compose narrative text about the topic and define its layout and enhancement (italics, etc.)
Decide on the locations of any graphic images (either inline or hot links).
Identify and position anchors within your text that will serve as hot links to other resources.
Validate the page for XHTML standards (in stages as you work).

While content is the most important part of any web site, your content will not affect your grade. It will be based on correct, complete, and skillful use of XHTML structural tags as validated by the [W3C Markup Validation Service]. Don't put a lot of energy into your content unless you are also doing it for some outside purpose.

Project Steps:

Use the web to browse the Internet and find sites, files and services of interest to you on some related topic. Note the location (URL) of each and save any small images that you want to have stored locally (on your own disk with the HTML file). If you want to use large images, then it will be best to use absolute references to them in your web page to have them read directly from an Internet server rather than storing copies of them on your own disk with your web page source code file.
Either on paper or using a plain text editor such as Windows Notepad, compose a narrative about your chosen topic. Avoid using a word processor to do this because they often use non-text characters such as “smart quotes” (notice the slanted quote marks) in place of "plain quotes" (notice the straight vertical quote marks) or other specially code symbols without the user noticing.
Using a plain text editor, create a web page source code file named project1.html. If you are using Notepad, you may have to place quotes around the entire filename when saving the file to prevent the addition of the extension .txt to the end of the filename.
Start your file with the preamble shown below to declare the coding standards for your web page to allow the [W3C Markup Validation Service] to validate your code under strict standards. Note the XML and DOCTYPE declaration statements in the preamble below..
```
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
```
The preamble ends with an open html tag to start your XHTML source code. Don't forget to place a close html tag at the end of your file.
Next create the head section of your file. Be sure to include a meta tag inside the head section that defines the character encoding your page will use. The syntax for this tag is:
```
<meta http-equiv='Content-Type' content='text/html; charset= utf-8' />
```
Also place a comment in the head section identifying: the filename, yourself as the author, and noting the date. Remember that XHTML comment tags look like this:
```

```
Below the close head tag (but above the close html tag), create a body section to hold the text narrative text that you wrote in Step 2. Begin the body with an open body tag that contains an appropriate style attribute and color number argument to define a background color for the rendered web page. For example
```
<body style='background-color:#deffff; color:inherit;'>
```
Don't forget to put a close body tag after your text (above the close html tag).
Next, insert the narrative text from Step 2 into the body container and "markup" the text with appropriate tags to define its layout and enhancement. For help, look in your textbook or in the [HTML/XHTML Tag Index] from [W3SCHOOLS.COM] or other online references.
- Insert at least one graphic image as an inline image using the HTML image tag. For example, if you want the IRSC logo image from the class web site appear on your page, you should insert the following HTML image tag where you want the image to appear:
  <img src='http://www.gibsonr.com/classes/images/irsclogo.gif' alt='IRSC Logo' />
- Now, markup your document with anchors (words or images) that can serve as links to the items you found. For example, if you want the word IRSC to serve as a hot link to the home page on IRSC Web Server, you must encapsulate the word IRSC inside of an HTML anchor container as follows:
  <a href='http://www.irsc.edu'>IRSC</a>
- Be sure to place a "mailto:" link on your page that a reader could use to contact you. The anchor for that address might look like:
  <a href='mailto:student@myschool.edu'>E-mail me</a>, with your own address substituted in place of student@myschool.edu.
Use the [W3C Markup Validation Service] to validate your code under strict standards as identified by the DOCTYPE tag placed in the preamble at the beginning of your HTML file.

Tips:

Start working on your project as soon as possible. Do not wait until you believe that you have mastered all of the skills. If you encounter an obstacle that you cannot solve after checking your book and other reference materials, send me a copy of the source code and request feedback. But remember that I will need time to respond. So give yourself that time by starting early.
Build the project one step at a time. Try to create a simple web page with just one paragraph on it; then validate it. If it validates, then try adding some more elements and validate again, etc.
Many systems are "case sensitive", so pay attention to upper and lowercase when typing URL’s and filenames in tags. Save your work after each change before trying to view it in your browser. Also, you must press the RELOAD (a.k.a. REFRESH) button on the browser’s button bar to see any changes made to a page since the previous rendering of it.

Submission:

Your web page (and any associated image files) should be submitted via the Project 1 drop box under the Lessons tab on the . If your project consists of more than one file (perhaps the XHTML source code and one or more picture files), then you should copy them into an empty folder named "project1" (without spaces) and then copy that folder into a compressed folder with the same name, but with a ".zip" extension.

Then, login to the and use the Project 1 drop box under the Lessons tab to attach your file (or compressed folder). If you need step-by-step directions, read the web page at:

     http://www.gibsonr.com/classes/howto/onlinesubm.html

PATH: Instructional Server> COP 1830> Projects>