Instructional Module X10i

Create an XHTML Web Page

for those not already familiar with HTML

Contents

About this Document

Audience and Objectives
  1. Create a Page Template
  2. Create a Class Home Page
  1. Validate the Page
  2. Submit the Assignment

1. Create a Page Template

The first step in any new coding adventure is to build a template file as the basis for your future work. Some of the code editors will create a template for you automatically, but if you have your own, you won't be dependent on any one editor.

To keep things simple, this time start Notepad or some other non-code-specific editor. Copy thee highlighted lines into your file, observing the role listed for each:

  1. XML statement:
    <?xml version="1.0" encoding="UTF-8"?>
  2. DOCTYPE statement:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
  3. HTML namespace declaration:
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. HTML Head, Title, and Meta tags
    <head>
    <title>Sarah Strong</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="Author" content="Sarah Strong">
    </head>
  5. HTML Body, close-Body, and close-HTML tags:
    <body>
    </body>
    </html>
  6. In the Title and Meta tags with Sarah Strong's name, take out her name and put in yours instead (unless your name *is* Sarah Strong).
  7. Save the file as template.htm.
  8. Validate the template using W3C's validator, http://validator.w3.org/

 
2. Create a Class Home Page


X10i Figure 1

If necessary, re-open your XHTML template page. Save it as home.htm.

Create a simple XHTML class "home page" that includes these elements:

  • Class and section numbers;
  • Your name;
  • A list of assignments, which you will link to the page as part of a later assignment. Use the illustration at left to get the assignments and their codes.

Formatting the page should be simple: don't try to line the elements up or use any but the default fonts, colors, and sizes. We'll make it look nice later, using Cascading Stylesheets (CSS). Just put each schedule item in a paragraph of its own with the <p> and </p> tags. For example:

<p>INP 150 Section 99</p>
<p>Sarah Strong</p>
<p>Assignments:</p>
<p>H10h Syllabus Discovery Experience</p>
<p>X10i Create an XHML Web Page</p>

(The rest of the assignments should be listed below these two in a similar manner.)

Save the page several times as you work, to be sure you don't lose it.
3. Validate the Page

Validate the page using W3C's validator, http://validator.w3.org/. Make any corrections that are necessary, and re-validate until the validator approves of your page. The instructor will verify that your page is valid.
4. Submit the Assignment

When you're done, double-check that the assignment meets the specifications above.

Attach your file (home.htm) to email to the instructor. Be sure your email meets the formal requirements: name, class, section and exercise (X10i), and that it follows standard business-email practice. (Printed output is not required for this exercise.)

 
to Top About This Document
Audience

This module is for people who want to build an XHTML Web page.

 
Objectives

On successful completion of this module, you will be able to:

  1. Create the framework for an XHTML Web page;
  2. Insert the proper tags referring to the DTD, namespace declaration, and character coding;
  3. Use tags according to the XHTML specifications to display an attractive page.
Module X10i: Create an XHTML Web Page
This document is part of a modular instruction series in Computer Instruction. For more information, see the overview or the list of modules in this series, X: XML, XHTML, DHTML, CSS. This document has been used in the following classes:INP 150,  INP 270.
History:
Original: 02 September 2003
Last modification: Monday, 31-Aug-2009 11:48:07 EDT
Copyright
Copyright © 2003-2005, Laurence J. Krieg, Washtenaw Community College
Instructors: You may point to this file in your Web-based materials; however, its location may change without notice.
Students: You are welcome to make a copy for your personal use.
All other uses: Please contact the author, Laurence J. Krieg, for permission: krieg@ieee.org.