Name:
Lab:
1b. xhtml+css
25 pts
What You Should Already Know
To complete this lab, you should have a very basic knowledge of the PC desktop, including how to move a
mouse, type on a keyboard, and create folders and files.
What You Will Learn
In this lab, you will learn how to:
 Set up web folders, and distinguish types of file extensions
 Securely connect to a web server, and how to upload and download files using ftp
 Use simple text editors to edit text files to create web pages using basic html structural elements
 Annotate your website with comments for yourself and others
 Use hyperlinks to navigate within your web page, your web site, to the rest of the web, and even to send an
email
 Create and work with tables, including nested tables
 Create and work with lists, including nested lists
 Appropriately add styles to your website using cascading style sheets (css) to apply attributes to text (i.e.,
font-weight, font-style, font-family, color, text-align, text-indent, letter-spacing, line-height, textdecoration, margin, padding, etc.)
 Create various element selectors (such as class and pseudo-class, ID, and dependent selectors) and learn
when to use them
 Work with colors and images, using standard conventions to develop ADA-compliant websites for the
broadest audience (including special needs audiences such as the visually-impaired or color-blind, etc.)
 Employ language standards to overcome cross-browser compatibility issues and style inconsistency
 Use various graphic design strategies to create visually appealing websites that are professional-looking
and interesting, and that create value while taking into account your website objectives and your target
audience
What You Will Need to Complete This Lab
To complete this lab successfully, you will be provided with, or will need to obtain the following:
 The use of a text editor
 A web server account (currently on Mercury)
 The use of Secure FTP software
 An internet connection
Learning Outcomes:
This lab assignment is intended to fulfill the following outcomes of the course:
 I.1.2 Students will use xhtml to create .html pages, and observe how plain text (xhtml) is converted to
structured web pages through the interpretation of a web browser.
 Students will use css for all formatting, and observe how css enables the separation of document content
from document presentation, including elements such as the colors, fonts, and layout.
 Students will design and implement the organization of and relationships between multiple web pages.
 Students will create the content and layout of each page, and assess their expression in terms of the whole
web site.
Background Information:
We see a story in the news, or we read an article in the newspaper, and we accept what we have seen or read,
often without a second thought. Edith Sitwell said, “The public will believe anything, so long as it is not
founded on truth.” And Galileo Galilei said, “All truths are easy to understand once they are discovered; the
point is to discover them.” So what about those news stories? Did the story happen just as it was reported? For
this assignment, you will be developing a website to tackle the conspiracy, the myth, the legend or the hype.
Your job will be to either corroborate or dispel the myth.
Assignment Description:
Recall some legend, conspiracy or myth: The Loch Ness Monster. Big Foot. Who shot JFK? 9/11: an inside
job? Did Timothy McVeigh act alone? Are we being indoctrinated in the classroom? Does the media have a
liberal (or conservative) bias? The Federal Reserve Bank: is it federal or is it private?
For this assignment, you will be creating at least three separate pages for your “truth” website: your “home
page” will contain the general notions about the myth (describe the repeated story line, how it might be written
in a history book), and then include whether you believe the story, or whether you suspect that the normal story
line is not really the whole story; your second page will be a “details page” providing evidence and descriptions
for or against the conspiracy or myth, a place to lay out the facts; and the third page will be a “key people page”
containing information about the key figures (agencies, people, monsters, etc.) in the conspiracy or the myth.
You will use xhtml to provide the structure and dictate the content of your pages. You will use CSS to take care
of all formatting, e.g., font selection, size and color, background color, positioning, etc.
Conditions of Satisfaction:
To be considered for grading, your submission must meet the following conditions:
 Your website must be loaded onto Mercury, in you “www” folder, and it must display your index page
(index.html) when your URL is opened by a contemporary browser.
 Your website’s home page must be given the name ‘index.html’.
 Your website must NOT be created with a website code generator (such as DreamWeaver), but instead, use
text-based editors such as Notepad++, TextWrangler, etc.
 Your website should be professional, in good taste, and must not violate the Code of Student Rights,
Responsibilities, and Conduct. Websites which serve to devalue a person or group of persons, or which are
derogatory, hateful or intimidating to a person or groups of persons based on gender, religion or ethnicity
miss the intent of the assignment and will be rejected.
 Your website must make use of embedded Cascading Style Sheets (CSS), and the styles must be declared
in the HEAD section of the document of each web page that is a part of your website.
Instructions
Page setup and appearance, overall
Points
Possible
13
 Begin by developing the structure of one page. Give it at least three sections: a top section
(or banner bar for site identification), a middle section (for primary content), and a bottom
section (footer). You will use <div> tags to create each section, and you will format each
section using css. Control the width of your page. Each page will have the same look and
feel. (2)
 Make a navigation section (menu) for the site links. Every page, except the index page
must link back to the index page. Replicate this section on all pages. (1)
 Use an ID selector or class selector for each <div> on your pages. Also, style the links in
your navigation section differently from the links on the rest of the website. (1)
 This page must be formatted using embedded css (not inline css). At least 4 elements from
each page in addition to the section <div> tags must be styled using css. (2)
 The site should manipulate the title bar of the browser; Use <title> tags. (1)
 A relevant heading (headline) should appear at the top of each page after your site
identification (banner). You may use additional headlines as necessary throughout the
website. Use <h1> tags for the highest-level headline, etc. (1)
 Choose a font that you feel gives a representative, but professional appearance. Make sure
that it is properly sized so that it is easy to read. This font must be used throughout your
website. (1)
 You make use of at least 2 font-styles (not necessarily font-families). (1)
 Foreground and background colors should contrast well. Choose background colors that
will give a professional impression. Remember that some background colors can make
reading a screen difficult; choose the color wisely. This background should be used on all
of your pages unless you have a particular design rationale for doing something different.
Consider using a color scheme for the entire website
(http://www.colorschemedesigner.com/), and employ no fewer than four colors on each
page (white and black will be considered valid color selections). (2)
 Your web site should look professional, and be in good taste. Containers (usually <div>
tags) should stack nicely and line up vertically. (1)
Home (index) page set up: the “Story Line”
4
 Repeat the essential notions about the myth (this should be a description about the oftrepeated story line, or how it might be written in a history book). Include whether you
believe the story, or whether you suspect that the normal story line is not really the whole
story. Your writing style will be important here. (3)
 For at least one paragraph, invoke a special class or ID. The styling you apply to this
paragraph must be visibly different from the remaining paragraphs on the webpage. This
could include a first-letter drop cap, a pull-quote, shaded box, etc. (1)
“Facts” page set up
 This page must have at least one table where you itemize your facts that either corroborate
the story (dispel the myth), or debunk the belief (provide evidence to contradict the story).
You must list at least five facts (they could be questions or suspicions); you are welcome to
5
have more. Borders should be visible (at least 1px), and column headings must be centered
and use bold font. Have at least three columns: the point of concern, evidence for or
against, and a source. (3)
 In addition to this table, you should have at least one paragraph that concludes the matter,
and summarizes your position convincingly. Your ability to argue matters here. (2)
“Key Figures” page set up
 Display the key players on this page. There should be no fewer than three (the third figure
may be yourself displayed in a section “about the author”, for example, if you cannot
identify key players). Include the name of the key figure, an image or other representation,
and why they are a person (or monster) of interest (describe the connection). Separate into
paragraphs if necessary. (2)
 For the other key figures, have them appear horizontally or vertically with the first. Invoke
a class attribute to “float” these additional figures as appropriate. Be sure to clear the floats
when you are done. (1)
Turn it in
 Make sure your home page is named “index.html”
 No “spaces” in any filenames, including images
 Load all pages into your “www” folder on Mercury and set proper file permissions
 Archive your website folder (*.zip, *.7z, *.tar, *.rar, etc.) and load the archive into the
assignment box on Oncourse
 Turn these grading sheets into your lab instructor on the day they are due
3