Thanks for visiting Earth Science Outreach
Emporia State University

Explorations in Earth Science
Utilizing Instructional Technologies
An Eisenhower-Funded Workshop

HTML Design and Creation

by

Susie Ward Aber

http://www.emporia.edu/earthsci/outreach/html.htm

Design    Creation    HTML Tutorial   

Project Expectations    Related Sites

Design

Before starting any project, it is best to have a purpose or goal in mind. The webpage's purpose is often revealed by the extension code or the three letters in the Uniform Resource Locator (URL), the electronic address. Commercial sites have the dot com extension (e.g., http://www.ebay.com) and are usually designed to sell something. Marketing techniques used on the web mirror other commercial media, which are often loud and flashy to command attention. There are exceptions though and some sites ending in dot com are indexes designed to provide access to information, (e.g., http://www.refdesk.com/index.html). Government sites end in dot gov and educational groups in dot edu. These sites are usually designed to provide access to information and point to pages that are rich with content (e.g., http://www.nasa.gov and http://www.emporia.edu/earthsci/amber/amber.htm). Organizations end in dot org and may simply provide information regarding the group's purpose (e.g., http://www.lwv.org) or selling information through subscription such as electronic journals. Organization may also be marketed through a commercial operation http://www.emporia.com/lwve).

Although numerous point and click software programs exist to create World Wide Web (WWW) pages, there is value in having rudimentary knowledge of the code behind the program. A knowledge of the code will allow you to create a simple page and as a teacher, aid in grading and editing student projects. Understanding what is behind the curtain of a webpage may also assist in preventing and detecting electronic plagiarism. The following webpages, Academic Dishonesty and Instructions for Creating Student Webpages, were created for ESU students and may be of interest. In addition to these pages, take some time to investigate books and web sites that teach design and creation of html.

Creation

Webpages are composed of ordinary ASCII text files that contain the special markers of Hypertext Markup Language (HTML). The webpage source and information, whether created from code or by a software program, can be seen by clicking on "View" at the top of the page, and choosing "Page Source" or "Page Info" in the drop-down menu. Images must be referenced and some external sources may require permission be granted for use.

This tutorial, modeled after one created by David Mannering, will provide the instructions to create World Wide Web (WWW) pages. This twelve-step program is a guide to creating a simple page, which combined with rich content will be quite effective. To get started open a text file editor such as WordPad or NotePad (click on "start" in the bottom left corner, "program," "accessories," and "WordPad." Touch the square in the center of the three choices along the top right edge to reduce the size of the page to one-half or across the lower half of your screen. Follow along with each step and save your work to the diskette provided (place floppy disk in the a drive). Type in the bold face commands (or highlight and copy the commands, then paste it into the WordPad document!).

This tutorial was created using Netscape and will work best with this web browser type.


HTML Tutorial

Table of Contents

1.
Introduction <html>, <head>, <title>, <body> 2. Begin the HTML Document <h1>, <h2> 3. Backgrounds and Colors <body...> 4. Font Size and Colors <font>, <basefont>, <sup>, <sub> 5. Paragraphs, Indentions, Line Breaks, Horizontal Rule <p>, <dd>, <br> 6. Centering and Lists <center>, <ul>, <ol>, <li> 7. Bold Face, Italics, Underlining, and Blinking <b>, <i>, <u>, <blink> 8. Pre-formatted text <pre> 9. Internal Links <a name="label">, <a href="#label"> 10. External Links <a href="URL">URL</a> 11. Graphical Links <img src="name.gif"> 12. Tables <table>, <th>, <tr>, <td>, <caption>


Introduction

1. The HTML document begins with the html, heading, title, and body markers. The title will appear at the top of the WWW browser. Notice that each marker ends with a slash command, which is a general pattern with HTML commands. After opening WordPad editor, enter the lines:

<html> <head> <title>YourName's Project</title> </head> <body>


</body> </html>

2. Save the file on the floppy disk (a drive) and give it a name with no more than eight characters, such as trialrun.htm. It should be given the htm extension but saved as text file type.

Beginning the HTML Document

1. All entries from here on out will be located between the <body> and </body> markers. 2. Add the following heading and subheading:

<h1>Summer Workshop Project</h1> <h3>by</h3> <h2>YourName</h2>

3. Save the file on the floppy disk (a drive), trialrun.htm (remember to save as text although it has the htm extension).

Backgrounds and Color

1. The background of an HTML document is usually gray by default. Color is possible for the background, text, and links. Colors codes can be found online at
http://www.w3schools.com/html/html_colors.asp (W3Schools.com). The background color tag, bgcolor, is placed within the body marker. One could return to the top of the page and replace <body> with: <body bgcolor="#ffccaa"> 2. The text colors can change also. In addition to regular text, hypertext will appear a different color (before and after a link is visited). Add the additional code:

<body bgcolor="#ffccaa" text="#cc33cc" link="#663366" alink="#993399" vlink="#000000">

3. Save the file on the floppy disk (a drive), trialrun.htm (remember to save as text although it has the htm extension).

Font Size and Colors

1.There is control over font size using the h1, h2, etc. tags but you cannot change the font size for a single word using these markers (because they always begin a new line). Font size can be controlled in a different manner though in sizes from 1-7, with a default of 3. If the basefont size is added at the beginning of the document, whenever the font is not designated this will be the default. Add the following on the line after the body background and text colors command:

<basefont size=4>

2. Add the following line below by YourName:

<br><font size=5>http://www.emporia.edu/earthsci/outreach/html.htm</font><p>

3. Save the file on the floppy disk (a drive), trialrun.htm (remember to save as text although it has the htm extension).

Paragraphs, Indentions, Line Breaks, Horizontal Rule

1. The following commands will allow for indentation of the paragraph (dd), leaving a space between the sentences and list (p), and within the list, simply drop down a line (br). The horizontal rule marker (hr) draws a line across the page.

<dd>This project is a result of a summer workshop held in July 2001 at Emporia State University. The workshop introduced various Earth Science content and resources within the context of tools and technologies including:<p>Digital Cameras<br>Geographic Information Systems<br>WebPage Authoring</dd><hr>

2. Save the file on the floppy disk (a drive), trialrun.htm
3. To view your page, open Netscape. Decrease the size of the WWW page so it fits on the top half of the screen. Go to "File" and choose "Open Page" from the drop down menu. Click on "Choose File..." and look in the a drive, trialrun.htm. Click on this file and then click on "Open." (WordPad may assume the file has a doc extension, so be sure to have it look for "all documents" or be on the html type of file.)

Centering and Lists

1. Centering is done with the <center> marker and bulleted or numbered lists with <ul> or <ol>. 2. Regardless of the type of list, each item must be enclosed in <li> and </li>. Add this to your text:

<p><center>Table of Contents</center><p> <ul><li>Introduction</li> <li>Contents</li> <li>Conclusions</li> <li>References and Links</li></ul><ul> <ol><li>Print Resources</li> <li>Electronic Resources</li></ol></ul><hr><p>

3. Save the file on the floppy disk (a drive), trialrun.htm. View the additions on the Netscape version by clicking on the "Reload" button.

Bold Face, Italics, Underlining, and Blinking

1. Letters may be in italics (i), bold face (b), underlined (u), or blinking (blink). Blinking text should be used sparingly. Add these lines to your trialrun:

<h2>Introduction</h2> <dd><u>Cartography</u> is the science and art of map making. A conceptual revolution occurred in cartography when traditional mapping methodswere replaced with the application of computers and <i>GIS</i>. <p> Check your knowledge of this subject by taking a <blink>quiz</blink>.<p>

2. Save the file on the floppy disk (a drive), trialrun.htm. View the additions on the Netscape version by clicking on the "Reload" button.

Pre-formatted Text

Enclosing text in the pre-formatted marker allows an existing spacing to be preserved which might be desirable for entering columns of information. The font style and size will also be preserved as well as spacing. On your WordPad page, type the pre-formatted marker beginning and end. Use the cursor on the Netscape version, to highlight the sentence below, then go to "Edit," "Copy," and bring it down to the WordPad page for "Paste."

<pre>GIS may be described as a powerful digital tool for collecting storing retrieving transforming analyzing displaying spatial information that is georeferenced (J. Aber 1995).</pre><p>

2. Save the file on the floppy disk (a drive), trialrun.htm. View the additions on the Netscape version by clicking on the "Reload" button.

Internal Links

A word or phrase highlighted and underlined is linked to other sections of your document, other text and graphic files. These links are termed hypertext jumps. An example of this could involve linking the Introduction in the table of contents to the Introduction section. The Introduction section must be given an identifying name and the Introduction term in the table of contents must be told to go to this name. Go back to the Introduction term in the table of contents and replace the single term with the following:

<a href="#intro">Introduction</a>

The anchored hyper reference will now look for "intro." Go back to <h2>Introduction</h2> after "Electronic Resources" and add the following between those two lines:

<a name="intro">

2. Save the file on the floppy disk (a drive), trialrun.htm. View the additions on the Netscape version by clicking on the "Reload" button.

External Links

1. External links could go to other pages you create or to someone else's page. Jumping or linking to another HTML file on your computer is accomplished by entering the filename within the referenced anchor, such as:

In order to understand GIS, a background in traditional <a href="assign.htm">mapping</a> is important.

2. Hyperlinking to a different page requires the URL (Uniform Resource Locator) to be within the anchor marker:

University courses on GIS are online and Emporia State University offers a <a href="http://www.emporia.edu/earthsci/geospat.htm"> Graduate Certificate in GeoSpatial Analysis</a> and an online <a href="http://www.emporia.edu/earthsci/graduat.htm">Graduate Program</a>. For more information email <a href="mailto:aberjame@emporia.edu">aberjame@emporia.edu</a>. <p>

Graphical Links

1.You can include .gif or .jpg images in the document by using the following tag:

<img src="nameof.gif"><p>

2. Choose an image off this page and save it to your disk. Right click on the image and click on "Save Image As." Send the image to the a: drive and then insert the name in the above code instead of "nameof" and place this image marker next to the table you create next. Attention should be paid to the extension of the image you choose as some are not gif but rather jpg extensions.
3. Save the file on the floppy disk (a drive), trialrun.htm. View the additions on the Netscape version by clicking on the "Reload" button.

Tables

1. Tables allow you to format data into aligned rows and columns which can be boxed in (add border) or the table can be invisible (no border). The code allows for a caption (caption), headings (th), as well as the cell contents (td). To create a second row in the table use tr. Add the following to create a table:

<center><table border=4> <caption><h2>Workshop Links</h2></caption> <td><a href="http://www.emporia.edu/earthsci/outreach/workshop.htm"> Summer Workshop</a> <td><a href="http://www.emporia.edu/earthsci/outreach/images.htm"> Field Trip Images</a> <tr> <td><a href="http://www.emporia.edu/earthsci/outreach/camptour.htm"> Campus Tour Images</a> <td><a href="http://www.emporia.edu/earthsci/outreach/resources.htm"> Online Cartographic Resources</a> </table></center>

2. Save the file on the floppy disk (a drive), trialrun.htm. View the additions on the Netscape version by clicking on the "Reload" button.


Return to the top.


Project Expectations for the Summer Workshop Students...

Some or all of your project will be displayed in a web-based format. The webpage should contain the following components:


Return to the top.


Awesome HTML Sites to Visit...

HTML Basics or How to Write a Webpage

ESU Earth
Science HTML Tutorial
webmonkey authoring
HTML basics
A guide to HTML
and CGI scripts
How to Create
a Web Page
Miko O'Sullivan's
The Idocs Guide To HTML
WebAlley
Publishing Made Easy
Top 15 Mistakes
for First Time Web Design
Simple Builder
HTML Primer HTML Tutorials
for the complete idiot
HTML Made
Really Easy
HTML: A Guide
for Beginners
Bare Bones
Guide to HTML
Intro to HTML Dave Raggett's Guide Netscape Communicator
Reference Library

ESU Webpage Examples

GO 336 Mineralogy
Student Webpages
GO 340 Gemstone
Student Webpages
Emporia State University
Earth Science Student Pages
ES 111 Introduction to Earth
Science Student Webpages
Kite Aerial
Photography
Susie Aber's
World of Amber

Revisit the Workshop homepage.

You are currently the person to access this page since July, 2001. Thanks for visiting! This page originates from the Earth Science department at Emporia State University. For more information contact S. W. Aber, e-mail: abersusa@emporia.edu. Last updated 30 April, 2003.

copyright 2001-2003 © Susan Ward Aber. All rights reserved.