Assignment Module X13h

Structuring Document Content and Presentation


Overview

This exericse is designed to help you get a good grasp of logical document structure and the use of block and inline presentation (format) tags. You'll be taking a text file and determining the logical structure, applying the appropriate XHTML tags. Then you'll apply presentation tags appropriate to block or inline structures.


Getting Started

to Top

Save your XHTML template file as x13h.htm, and title the page, "Sarah Strong Structuring" (changing Sarah Strong to your own name). Make sure your name is listed as author.

Task 1

to Top

The purpose of this task is to exercise your ability to do two things:

  • Determine the logical structure of a document;
  • Implement that logical structure using (X)HTML structural elements.

Here's what you'll need to do:

  1. Open the associated text file, x13h_t2.txt. Use copy-and-paste to put it into the body of your x13h exercise file.
  2. Read the document, paying attention to the way it is organized. Try to determine the logical structure with which it is organized. Read for the sense of the document and pay attention to the capitalization, spacing, and any other clues you can get from the way the text is laid out.
  3. Decide which is the major heading; tag it as an h1 using XHTML start and end tags.
  4. Decide which are the secondary headings; tag them as h2.
  5. Are there any lower-level headings? If so, tag them appropriately.
  6. Put paragraph tags around all blocks of text that don't have other structural roles.
  7. Save and validate your file.
Task 2


to Top

 

Examples of what this should look like are available (70% actual size):

 

to Top

Using the text you have just marked up, apply the presentation formats described below.

  • For this task, use only <div> and <span> tags to apply presentation formats. Recall that <div> is a block-level tag, and <span> is an inline-level tag. The point of this task is to give you practice in distinguishing between block-level and inline-level tags, so...
  • For this task, do not put styles in the structural tags (such as the <h1> and <p> tags) that you put in as part of Task 1.
  • Do not use use HTML tags such as <font ...>, <b>, or <i>.

Here's what to do:

  1. Wherever the words biology or biological appear, color them blue.
  2. Wherever the words psychology or psychological appear, color them green.
  3. Wherever the word problem appears, color it purple.
  4. Wherever the words sex, sexual, sexes, or intersexes appear, color them red.
  5. Wherever you find a word or phrase beginning and ending with the underscore "_" character, remove the underscore and give the phrase the font-style italic.
  6. Correct any inconsistent capitalization in the words you put in color (for example, if you see "THE NEW biology AND THE sex problem IN SOCIETY", correct it to show "THE NEW BIOLOGY AND THE SEX PROBLEM IN SOCIETY"
  7. For the title and subtitle of the document, from "Taboo and Genetics" through "Foundation of the Family", set the font-family to Papyrus, CaslonOpnface BT, Comic Sans MS, fantasy.
  8. For the rest of the document, use font-family Garamond, Palatino, serif.
  9. Center-align the title section at the beginning of the file, from "Taboo and Genetics" down through "Contents".
  10. Save and validate your file.
Submitting the Assignment

to Top
to Top

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

Send email to the instructor with your x13h.htm file attached. Be sure your email meets the formal requirements: name, class, section and exercise (X13h) in the Subject line, and that it follows standard business-email practice.

 


to Top About This Document
Audience

to Top

This exercise is for people who have learned the basics of building Web pages with XHTML (see modules X10h or X10i) and know the difference between structure and content, block and inline elements (see module X13c).

Objectives

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

  1. Incorporate section headers to create a structural hierarchy for your content
  2. Structure content using block-level elements
  3. Properly nest block-level and inline elements

Module X13h: Structuring Document Content and Presentation
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.
History

Original: 19 September 2003
Last modification: Monday, 31-Aug-2009 11:48:07 EDT
Copyright
Copyright © 2003, 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.