HTML Templates for Designing eLearning

Designing eLearning Background of eLearning

Opening the Templates

If you just want to view the code in any of the templates, open the file as you normally would with you browser, and then press the

What the Template means

The table below shows
  • left column - HTML code
  • middle column - what the coded means
  • right column - comments
The yellow highlighted words are what you need to change in the template to create your own design.

Code in HTML What it means Comment
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang="USA"> Type of HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > Declares this as HTML document
<head> Beginning of Heading
<title>Monthly Waste Report Worksheet: Module 8</title> Title that goes in frame around browser window
<STYLE TYPE="text/css"> <!-- @import "files/styles2.css"; --> </STYLE> Casading Style Sheet
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> Character Set
<meta name="author" content="Don Clark" /> Title of Author
<meta name="keywords" content="design, elearning, ISD" /> Metadata Information about a document rather than document content (aids search engines>
<meta name="description" content="Part of a package of elearning templates." /> Metadata Information about a document rather than document content
</head> End of heading
<body> Beginning of Body (what you see in the window)
<div id="container"> Content Container
<div id="main"> Prepare Container
<div id="sidebar"> Text below will be in sidebar
<p class="p1"><span> Start paragraph
<h3>Transferring the Business Unit's Totals</h3> Title of Sidebar
The Business Unit's salvage pounds and dollars are charged on line 29 and 30. Text in sidebar
<P> Can start new paragraph if needed
</span></p> End of sidebar's paragraphs
</div> End of sidebar
<div id="lesson"> Start main lesson
<p class="p1"><span> Start paragraph
<h1>Monthly Waste Report</h1> Title
<center> Centet
<img src="salvage9.jpg" width="694" height="472"> Image, width, and height Width and height can be used to chage size of picture. Can be left blan k if not needed.
<center> End Center
</span></p></div> End paragraph
</div> End main lesson
<div id="footer"> Footer for buttons
<!! Back !!> Note
<a href="salvage_8.html"><img src="files/buttons_files/button2.gif" title="Go back to next screen"></a> Back Button File to open when button is clicked
<Site Map !!> Note
<a href="salvage_map.html"><img src="files/buttons_files/button3.gif" title="Home (site map)"></a> Home or Map button File to open when button is clicked
<!! Next !!> Note
<a href="salvage_10.htmlFoward button File to open when button is clicked
</span></p></div> End of paragraph
</div> End of Container
</BODY> End of Body
</HTML> End of Html


 

Notes

For author and copyright information, see the About page.
Created January 21, 2001 Updated January 28, 2008  

A Big Dog, Little Dog and Knowledge Jump Production. Contact: donclark@nwlink.com