The Fundamentals of HTML, XHTML, and CSS

--By Terry Hawthorne

HTML/XHTML and CSS | Banish the Tedium | TOC & Projectors | Blogs, Online Discussion, & Wikis

Workshop Objectives

During this workshop, you will:

  1. Learn to use XHTML and CSS to create easy-to-maintain, standards-based Web pages.
  2. Use a spreadsheet, such as Microsoft Excel, and Windows batch files to automate the routine, tedious work associated with maintaining Web pages.

Why Standards-Based?

Author Your First Web Page

To create a simple Web page suitable for publishing information about your class or student work, create a new folder, copy the following text, paste it into a text editor, and save the resulting file with an .htm or .html extension in the folder you just created.

<?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">
  <head>
    <title>Replace this text with your page's title.</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Type the heading for your page here</h1>
<p>Replace this text with your own.</p>
</body>
</html>

Explanation

As you can see from the sample above, an HTML or XHTML page consists of the text that appears on the page, along with tags that are enclosed within less than (<) and greater than (>) brackets. Your browser uses these tags to format the page. Note that the opening and closing tags are identical, except that the closing tag contains a forward slash (/).

The purpose of HTML/XHTML tags is to identify the function of text, not its appearance. Thus the <h1> tag in the sample above indicates a Heading 1, or highest-level heading, in your document. The appearance of h1-level text is determined by your browser's default settings or, as in the case of the page you are reading, by a stylesheet. It is possible to enter HTML tags that change the appearance of a document, but this is not a smart practice. HTML pages can be viewed on a variety of devices; attempting to hard-code their appearance can create problems when they are viewed on devices other than the one on which you created them. If you are interested in controlling the appearance of your Web pages, you should use Cascading Stylesheets to accomplish this.

Because Web pages consist of text, you can use any text editor to create and modify them. On Windows, you can use Wordpad or Notepad. (Wordpad and Notepad are both available under Start/All Programs/Accessories.) On Macintosh systems, you can use SimpleText or TextEdit. The free NoteTab Lite text editor is much better than Wordpad and Notepad.

A basic Web page consists of three parts:

Document Type Definition (DTD)
The DTD defines the elements that can be used in a standards-based Web document. If you don't use a DTD, your visitors' browsers will default to quirks mode, which may result in inconsistent display from one browser to another. More information on DTD...
Head
The XHTML head contains the document's title and specialized tags such as CSS links. It may also contain scripting code.
Body
The body contains your content: the text and images the user sees. Strictly speaking, images and other binary content aren't embedded in an XHTML document--text only, remember--but appear in a visitor's browser because of the XHTML tags you put in your document.

XHTML Syntax

The Filename Extension Problem

The designers of both Windows and Macintosh computers assume that users don't know how to manage filename extensions. By default, Windows systems hide filename extensions from the user, so when you use Wordpad or Notepad to create a text file named mathlinks.htm, it actually creates a file named mathlinks.htm.txt. If you double-click that file, Windows will open it with Notepad, which is the registered program for files with a txt extension. To prevent this on Windows systems, you can put the filename inside quotes; e.g., "mathlinks.htm". You can eliminate this problem once and for all by doing the following:

  1. Open Windows Explorer (click Windows-E or click Start/Programs/Accessories, or just Start/Programs, depending on your version of Windows.
  2. Click Tools/Folder Options.
  3. Click the View Tab.
  4. Uncheck the box beside "Hide extensions for known file types."
  5. Click the Apply to All Folders button. (This may be slightly different, depending on your version of Windows.)

If you create a filename with an extension under Macintosh OS X, the Mac will note that the filename appears to have an extension and ask if you want to append another one. Say no.

Common HTML/XHTML Tags

The following table lists the commonly used HTML tags.

Tag Purpose
html Used to mark the beginning of a Web page.
head Used to mark the beginning of the header section of a Web page.
title Used in the header of a Web page to store the page's title, which will appear in the title bar of your browser window.
body Used to mark the beginning of the body of a Web page.
h1 Used to identify and format the top-level heading in a document. The headline of this Web page is formatted with an H1 tag.
h2-h6 Lower-level headings in a document.
p Used to mark the beginning of a new paragraph.
hr Used to insert a line, or horizontal rule. Because the hr tag does not enclose any content, you should write it as follows: <hr />.
table Used to mark the beginning of a table.
tr Used to mark the beginning of a row in a table.
td Used to mark the beginning of a cell in a table.
ol Used to mark the beginning of a numbered list. 
ul Used to mark the beginning of a bulleted list.
li Used to enclose individual list items in a numbered or bulleted list.
a

Used to insert a hyperlink. The full format is <a href="hyperlink file">, where hyperlink file is the name of the file you are linking to. For example, the following could be used to code a link to the Smyth County School Board's calendar page:

Click <a href="http://www.scsb.org/calendar.htm">here</a> to view our calendar.

This produces:

Click here to view our calendar.

If the page you linking to is located on the same Web server as the page that contains the link, it is a good practice to eliminate the reference to the Web server, or the http://www.scsb.org in our example. This enables you to move your Web pages from one computer to another without having to recode your links. This is what I mean by relative addressing.

img Used to insert an image. Remember that Web pages are text files. You cannot insert pictures directly into Web pages. To have a browser render a picture as part of a Web page, you insert a reference to the picture. The full format is <img src="picture filename" width="width in pixels" height="height in pixels" alt="Some text that describes the picture for visually-impaired visitors" /> where picture filename is the name of the of the JPEG, GIF, or other picture file. Note that the img tag does not have a closing form.

Best Practices

Getting Started With CSS

Stylesheets control the appearance of an XHTML document. To create a simple Cascading Stylesheet, copy the following text, paste it into a text editor, and save the resulting file with a .css extension in same folder as your XHTML document. The filename should match the filename you reference in the <link> tag in the head section of your XHTML document.

body	{
	color: #000000;
	background-color: #ffffff;
	font-family: verdana, arial, helvetica, sans-serif;
}
h1	{
	color: #ff0099; 
	margin: 0em 0em 0em -1em;
	font-size: 140%;
	font-weight: bold;
	padding: 1em;
}
div.popright	{
	color: blue;
	background-color: yellow;
	border-color: black;
	border-style: solid;
	border-color: black;
	float: right;
	padding: 1em;
	width: 300px;
	margin-left: 1pt;
}
a:link	{
	color: blue;
}
a:visited	{
	color: maroon;
}
a:hover	{
	color: yellow;
	background-color: black;
}

CSS Explanation

The preceding example illustrates several key CSS concepts:

The div popright class creates a box floating on the right side of the page, with blue text against a yellow background, with a 1-point-wide solid black border, just like this example.

  1. A CSS file consists of selectors, which correspond to XHTML tags, such as body, h1, h2, h3, p, div, etc.
  2. A CSS selector is followed by a { character and a series of one or more properties.
  3. Color, background-color, border, margin, font-family, font-size, and font-weight are examples of properties.
  4. A property is separated from its values by a colon.
  5. Properties are separated from one another by semicolons. For the sake of legibility, I put each property on its own line.
  6. A } character marks the end of the selector's properties.
  7. You can use CSS to create classes based on a selector. For example, in the preceding example, div.popright represents a class based on the div, or division, selector. To invoke this class on a Web page, use the following code:
    <div class="popright">Some text goes here.</div>
  8. The a (anchor) tag has pseudo-classes called link, visited, and hover. Pseudo-classes are noted by a colon between the selector and the class, rather than a period. The pseudo-classes refer to the state of the anchor. In this example, links are blue when you open this page, maroon after you visit them, and yellow with a black background when your place the mouse over them.
  9. Colors can be specified by name or by a numeric code. There are sixteen named colors:
  10. ColorHexadecimal CodeExample
    black#000000  
    silver#C0C0C0  
    gray#808080  
    white#FFFFFF  
    maroon#800000  
    red#FF0000  
    purple#800080  
    fuchsia#FF00FF  
    green#008000  
    lime#00FF00  
    olive#808000  
    yellow#FFFF00  
    navy#000080
    blue#0000FF  
    teal#008080  
    aqua#00FFFF  
  11. Computer displays use the three primary colors of light: red, green, and blue. The display mixes these three colors to produce millions of additional colors. In theory, there are 16,777,216 colors you can specify by numeric code. In practice, most people stick with a much smaller palette of so-called browser-safe colors. Browser-safe colors use combinations of the following percentages of each of the primary colors:
PercentageDecimal ValueHexadecimal Value
0000
205133
4010266
6015399
80204CC
100255FF

Learning More

What Program Do I Use to Write HTML/XHTML?

Any program that can generate plain text files will work. You can use Notepad and Wordpad on Windows computers, and SimpleText or TextEdit on Macintosh computers. The freeware program NoteTab Light is an excellent HTML editor. You can also use any word processing program, such as Microsoft Word, as long as it can save files in plain text format. Note that Microsoft Word has an option to save a document as a Web pages under its File Menu. This works, but it will generate an extremely large and very messy HTML file, which may be inaccessible across dial-up Internet lines. Microsoft FrontPage and Macromedia DreamWeaver are dedicated HTML authoring programs. I'm not familiar with DreamWeaver. FrontPage works OK, except that some of the code it generates only works on Internet Explorer. If you don't understand HTML, relying strictly on FrontPage can cause problems for you. Microsoft has discontinued FrontPage and is replacing it with two new programs, SharePoint Designer 2007 and Expression Web Designer, which Microsoft claims are more supportive of Web standards than FrontPage.

Banish the Tedium

Lack of time is one of the biggest barriers to using Web technologies, or any kind of that technology, with students. In this section, I will discuss several time-saving techniques I have developed.

Use a Spreadsheet

Many people do not realize that a spreadsheet can do far more than just perform numerical calculations. A spreadsheet, such as Microsoft Excel, can also combine strings of text. For example, creating HTML/XHTML tables is tedious, because it takes so many tags to create a single row. I use a spreadsheet for that. Take, for example, the HTML for the preceding table that shows the 16 named colors:

<table>
<tr>
<th>Color</th><th>Hexadecimal Code</th><th>Example</th></tr>
<tr><td>black</td><td>#000000</td><td class="blackbg">&nbsp;&nbsp;</td></tr>
<tr><td>silver</td><td>#C0C0C0</td><td class="silverbg">&nbsp;&nbsp;</td></tr>
<tr><td>gray</td><td>#808080</td><td class="graybg">&nbsp;&nbsp;</td></tr>
<tr><td>white</td><td>#FFFFFF</td><td class="whitebg">&nbsp;&nbsp;</td></tr>
<tr><td>maroon</td><td>#800000</td><td class="maroonbg">&nbsp;&nbsp;</td></tr>
<tr><td>red</td><td>#FF0000</td><td class="redbg">&nbsp;&nbsp;</td></tr>
<tr><td>purple</td><td>#800080</td><td class="purplebg">&nbsp;&nbsp;</td></tr>
<tr><td>fuchsia</td><td>#FF00FF</td><td class="fuchsiabg">&nbsp;&nbsp;</td></tr>
<tr><td>green</td><td>#008000</td><td class="greenbg">&nbsp;&nbsp;</td></tr>
<tr><td>lime</td><td>#00FF00</td><td class="limebg">&nbsp;&nbsp;</td></tr>
<tr><td>olive</td><td>#808000</td><td class="olivebg">&nbsp;&nbsp;</td></tr>
<tr><td>yellow</td><td>#FFFF00</td><td class="yellowbg">&nbsp;&nbsp;</td></tr>
<tr><td>navy</td><td>#000080</td><td class="navybg">&nbsp;&nbsp;</td></tr>
<tr><td>blue</td><td>#0000FF</td><td class="bluebg">&nbsp;&nbsp;</td></tr>
<tr><td>teal</td><td>#008080</td><td class="tealbg">&nbsp;&nbsp;</td></tr>
<tr><td>aqua</td><td>#00FFFF</td><td class="aquabg">&nbsp;&nbsp;</td></tr>
</table>

To simplify the creation of this table, I created a spreadsheet like this:

CSS Colors spreadsheet

I entered the names of the colors and their hexadecimal equivalents in columns A and B. In cell C1, I entered the following formula and copied it down the column for all 16 colors:

="." & A1 & "bg {background-color: " & B1 & ";}"

That created the code that defined a series of CSS classes named for each of the 16 colors. Each class takes the color's name, plus "bg", and uses the hexadecimal code in column B to define that class's background color. For example, the row for silver produced the following:

.silverbg {background-color: #C0C0C0;}

The & character serves as a concatenation operator in Excel; that is, it takes two pieces of text and puts them together. You must enclose any literal pieces of text with quotation marks. That raises an interesting question: What do you do when you need quotation marks in your resulting XHTML? For example, XHTML requires that all property values be in quotation marks. For example:

<a href="http://www.scsb.org">Smyth County School Board</>

The answer is Excel's CHAR function. The CHAR function takes the ASCII value of a character and displays that character in the value that results from the formula. The ASCII value for a quotation mark is 34, so CHAR(34) produces " in an Excel formula. You can see that I used CHAR(34) to get the quotation marks in the formulas in column D of my sample spreadsheet.

When you use Excel, you still have to write the code for an HTML table row, but you only have to do it once. After you copy and paste the formula, you can just select the resulting spreadsheet cells and paste them into your HTML editor.

Use Windows Batch Files

Batch files are a way to automate repetitive procedures. For example, you may create a template file that you want each of your students to be able to use. You could manually copy that file into each of your students' folders, or you could automate the procedure with the following batch file:

copy %1 G:\Inetpub\wwwroot\content\grade5\techmath\Student1
copy %1 G:\Inetpub\wwwroot\content\grade5\techmath\Student2
copy %1 G:\Inetpub\wwwroot\content\grade5\techmath\Student3
copy %1 G:\Inetpub\wwwroot\content\grade5\techmath\Student4
etc.

To use this file, copy and paste it into a text file. Change Student1, Student2, etc. to match the names of your students' folders. Change the full path as necessary. Save the file with a name like copyfile.bat. The .bat extension changes the file from a simple text file to a powerful batch file. To run it, you open a command prompt, navigate to the folder than contains the batch file and enter:

copyfile filename.ext

where filename.ext is the name of the file you want to copy to each student's folder. This batch file will copy small text and spreadsheet files to dozens of students' folders in far less time than it took you to read this sentence.

Using the Web to Publish Student Work

One of the advantages of publishing student work on a Web page is that students can immediately share what they have done. You can also give them immediate feedback, and they can fix grammatical mistakes and other problems on the spot. In a lab situation, I use a table of contents page that gives me one-click access to each student's page. I use the LCD projector to share each student's work with the whole class and give students feedback. Here's the XHTML for the table of contents page:

<?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">
<head>
<title>Student Web Pages</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1>Student Web Pages</h1>
<ul>
	<li><a href="anthony/web/">Anthony</a></li>
	<li><a href="austin/web/">Austin</a></li>	   
	<li><a href="ben/web/">Ben</a></li>
	<li><a href="chaney/web/">Chaney</a></li>   
	<li><a href="christen/web/">Christen</a></li>	   
	<li><a href="clint/web/">Clint</a></li>
	<li><a href="drew/web/">Drew</a></li> 
	<li><a href="dylan/web/">Dylan</a></li>  
	<li><a href="erin/web/">Erin</a></li> 
	<li><a href="evan/web/">Evan</a></li>  
	<li><a href="ferris/web/">Ferris</a></li>  
	<li><a href="grayson/web/">Grayson</a></li>
	<li><a href="jayson/web/">Jayson</a></li>
	<li><a href="marshall/web/">Marshall</a></li>	   
	<li><a href="sam/web/">Sam</a></li>
	<li><a href="spenser/web/">Spenser</a></li>	   
	<li><a href="tori/web/">Tori</a></li>	   
	<li><a href="zach/web/">Zach</a></li>
	<li><a href="mrh/web/">Mr. Hawthorne</a></li>
</ul>
</body>
</html>

For the preceding code to work, you have to create a subfolder for each student in the same folder as your table of contents. In this case, each student's folder contained a subfolder named web, and each student created a home page named default.htm and saved it in the web subfolder.

Blogs, Online Discussion Boards, and Wikis

You will probably need the assistance of your school division's IT department or technology resource teacher to set up a blog, discussion board, or wiki server. There is free or very inexpensive software available for running all of these resources.

Blog
A blog, or Web log, is a way for people to easily publish an online journal, either by themselves or in collaboration with others. Students in grades 4-6 at Willowdale Elementary Class near Omaha, Nebraska, publish a variety of blogs. An English class at Hunterdon Central Regional High School in New Jersey has attracted over two millions hits to its blog on The Secret Life of Bees. The advantage of blogs is their simplicity. Once you have one set up, it is easy for very inexperienced computer users to post to a blog.
Online Discussion Boards
Online discussion boards are similar to blogs, but generally have more options that can make them more complicated for less experienced users. The Smyth County School Board runs a discussion board, powered by Moodle.
Wikis
A wiki is a Web site to which anyone can publish. The most famous wiki is Wikipedia. There are many resources for using wikis in education.
Podcasting
Podcasting is a technology for creating audio or video files that can be distributed across the Internet and accessed through iPods or MP3 players.