HTML Templates for Designing eLearning

Contents for this page
Designing eLearning Main elearning Page
Introduction

Why You Should Learn HTML

HTML (Hyper Text Markup Language) is the main stardard for web pages. Knowing HTML allows you to tweak your elearning documents so that it does what you want. Using a text editor, rather than a WYSIWYG (What You See Is What You Get) editor can be a slower process for beginners; however, once you become more experienced in working directly with the code, normally allows you to achiever better and faster results.

While you do not have to hand code everything, every time, having the ability to hand code gives you the choice when needed.

An HTML web page is a plain text document that are creaded with programs such as Mac's TextEdit or a PC's NotePad. You can also use text editors that provide more support for HTML. About.com has a good list of such text editors, for both the Mac and PC.

You can use a word processor, such as MS Word, but you must save it as a text document, rather than a Word document.

eLearning HTML Template

The first template is template.html. It looks similar to the other elearning files, such as salvage9.html except that when you open it, it only displayes five xs (xxxxx) in various parts of your web browser window.

To view the code, open template.txt. If you use the search function, you will see that it has 5 sets of xs:

  • in the title (this displays in the top of the frame surrounding your browser's window)
  • in the heading for the sidebar
  • in the side bar
  • in the heading for the main lesson
  • in the main lesson itself
Copy the code and paste it into a plain text file. Give the file a name, but do not save it with the "txt" extension, but rather use "html", such as "elearning.html".

Replace the xxxs with you own words, save it, and then open it with your browser. This will get you familar with using the template.

You will also need to save the CSS (Cascading Style Sheet) to the same directory. Go to the templates file and copy "styles2.css" to your directory. This file further refines the formating of the templates. See Cascading Style Sheets (CSS).

Working With HTML

While there are numerous ways of reformating the text, we will review just a few of the more popular ones. If you want to learn more, see the Learning HTML and Web Design section on this page.

HTML commands are placed between the less than and greater than symbols: <   >, such as: the italic command, <i>text is in italic</i> will display text is in italic. Note that the backslash ends the command.

<b>text is in bold</b> will display text is in bold

Headings use h1, h2, h3, etc. Note that 1 is larger than 2 and 2 is larger than 3:

<h1>largest heading</h1> will display:

largest heading

<h2>Next largest</h2> will display:

Next largest

<h3>Next largest</h3> will display:

Next largest

<h4>Next largest</h4> will display:

Next largest

Use some of these commands in your elearning template to get some practice.

Opening the Salvage9. html Template

If you just want to view the code in any of the templates, open the file as you normally would with your browser, and then press the "View" button on the browser's main menu, and then select "view source" (words may vary slightly in different web browsers). Note that you can copy the contents and paste it into a plain text file.

When you name and save the file, ensure it ends in "html", such as "salvage.html".

If you want to download the files directly to your computer, go to the templates file section and copy the files from the web directory to your computer.

Understanding the Templates

The table below shows the HTML code and comments for the salvage9.html file. You do not need to learn what every line means as you will normally only be changing the highlighted code.
  • 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 content.

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 above the web browser's window
<STYLE TYPE="text/css"> <!-- @import "styles2.css"; --> </STYLE> Cascading Style Sheet CSS
<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> Center
<img src="salvage9.jpg" width="694" height="472"> Image, width, and height Width and height can be used to change size of picture. Can be left blank 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/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/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

Learning HTML and Web Design

A good source for learning HTML is HTML Code Tutorial or Introduction to HTML.

Tools to help you with web design can be found at Web Design Dashboard.

Cascading Style Sheets (CSS)

The templates are linked to a Cascading Style Sheet (See CSS in the table above - about the fifth row down). A CSS allows you to reformat the style rules that tell the browser how to display text. CSS allows complete and total control over the style of a hypertext (html) document

You can learn CSS at Learning CSS. To see some great designs (and their source code) go to Zen Garden. This is a great way to learn to code, view the design and the code at the same time. Note that with CSS you will have to have three windows open -- 1) the page or design itself, 2) the HTML source code, and 3) the CSS source code. By switching back and forth you can see the design, see the html creating the design, and view the CSS code that is controling the HTML code.

 

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: DonClark1776@gmail.com