Preparing Your Work for the Cyberspace, Hypertext, and Theory Web (1): Templates and Basic HTML

George P. Landow

Templates with HTML tags to paste at the top and bottom of your document.

This template (and the one following) create documents that will function when placed in folders, such as those for modules, inside an area folder, such as that for Nature's Laws or Literature and the Arts.

You can save yourself the work of retyping all these tags and the possibility of error by highlighting the templates, choosing copy from the edit menu, and pasting the template into your word-processor or web editing programme. Some people prefer to work in NotePad (Windows) or SimpleText (Mac).

Paste the following at the top of your document.

<html>
<head>
<title>title (for Web Browser: IE, Netscape)</title>
</head>
<body bgcolor="#FFFFFF">
<h2>title (inside window) </h2>
<h4>< author's name </h4>
<img src="../top.gif">

What it all means

<html> Tells any html viewer (Netscape or Explorer) the document is in HTML.
<head> Begins the header
<title> title </title> Put here the text you want to appear on the bar marked with horizontal lines at the very top of any browser window.
</head> Closes header section
<body bgcolor="#FFFFFF"> 1. Begins body, or main part of document; 2. sets the background color (here white)
<img src="../top.gif"> Places icon at top of page
<h2>title</h2> Creates the title you see inside the document
<h4> author's name </h4> Put full name of author here plus (a) academic title; (b) module number and year taken.

Paste the following at the bottom of your document:

<hr>
<a href ="index.html"><img src="sitemap2.gif" alt="project sitemap"></a>
<a href ="../../index.html"><img src="../../icons/htcspace2.gif" alt="Cyberspace Web"></a>
<a href ="../ht/htov.html"><img src="../../icons/htov2.gif" alt="Hypertext"></a>

What it all means

<hr>Creates horizontal line across page; "hr" stands for "Horizontal Rule." This is one of two tags that cannot be closed.
<a href="index.html"><img src="sitemap2.gif" alt="project sitemap></a>1. Tag beginning with "img src" [image source] places the icon for your project. 2. Tag surounding it creates a link the your project overview (also commonly called a "homepage" or "site map." 3. The linked icon helps readers navigate the website. Essential for instructional or educational websites and projects.
<a href="../../index"><img src="../../icons/htcspace2.gif" alt="Cyberspace Web sitemap"></a>This linked icon takes the reader to the Cyberspace Web's main overview (sitemap). All these tags assume that your project appears inside the "ht" (hypertext) directory; it's URL would therefore include the following: "cpace/ht/yourproject/"
<a href ="../ht/htov.html"><img src="../../icons/htov2.gif" alt="Hypertext"></a>This linked icon takes the user to the hypertext overview. Why does this link have only one "../" whereas the icon has "../../"? Hint: look at the directory structure.
<P align="right"> Last modified: date </p>Replace "date" with date the document was last updated or otherwise modified
</body>Ends the body of the document.
</html>Ends the entire HTML document.

Related Materials


Cyberspace Web Overview Creative Nonfiction E-Nonfiction related courses Directions

Last modified 4 December 2006