Thanks for visiting GO 336 Mineralogy
from Emporia State University

HTML Creation and Code
Susie Ward Aber

www.emporia.edu/earthsci/go336/html.htm

Creation and Code    HTML Tutorial    Related Sites

Creation and Code

Welcome to a HyperText Mark-up Language or html tutorial that will aid you in creating webpages for this course. Software programs exist to create webpages, but part of course assignments is learning simple html code. For additional information on html code, visit any of the sites listed below; for information on writing in general, visit two ESU Earth Science sites for direction:

Student Academic Dishonesty
information on plagiarism 		ES Instructions for
Creating Student Webpages

Webpages are composed of ordinary ASCII text files that contain the special code markers, just as any software program. To see an example, click on View on the top menu of the page and choose Page Source or Page Info in the drop-down menu. Software programs are available but writing your own code is free. Therefore, a tutorial follows that was modeled after one created many years ago by David Mannering. It is a twelve-step guide to creating a simple page, which combined with rich information content will be an effective presentation.

To get started open a text file editor such as WordPad (click on Start in the bottom left corner, then Program, Accessories, and WordPad). Touch the square in the center of the three choices along the top right edge (dash, square, and an X) to reduce the size of the page to one-half and position it in the lower half of your screen. Follow along with each step and save your work to a diskette placed in the appropriate drive. This tutorial was created using Mozilla Firefox and Netscape browsers and will work best with these web browsers, not Internet Explorer. After you have completed the tutorial, email the file and image to saber@emporia.edu.

Return to the top.

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>

1. Introduction

a. The HTML document begins with the html, head, title, and body markers. The title will appear at the top of the WWW browser (e.g., see the title of this page, Simple HTML tutorial). Notice that each marker ends with a caret, slash, command, caret. After opening WordPad editor as directed above, type:

<html> <head> <title>GO 336 Project</title> </head> <body>

Leave several spaces here!


</body> </html>

b. Save the file on a diskette or memory card/stick and give it a name with no more than eight characters, such as aber07.htm. The file name should be given the htm extension but saved as text file (.txt) type.

2. Begin the HTML Document

a. All entries from here on out will be located between the body and end body command markers. Add the following heading and subheading:

<h3>Your Title - Mineralogy Final Project<br> YourName</h3>

b. Save the file on a diskette or memory card/stick, aber07.htm. Remember to save as to the diskette or memory card/stick.

3. Backgrounds and Color

a. The background of an html document is usually gray or white, by default. You can assign colors to the background, text, and links. The background color tag, bgcolor, is placed within the body marker. In addition to background and text colors, hypertext will appear a different color (before and after a link is visited). Return to the top of the page and replace the body command with:

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

b. Save the file on the diskette or memory card/stick, aber07.htm. Remember to save as to the diskette or memory card/stick. At a later time, you can change the colors to suit your style. Numerous color codes can be found online at www.w3schools.com/html/html_colors.asp (www.w3schools.com).

4. Font Size and Colors

a. 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">

b. Add the following line below by YourName:

<br><font size="5">www.emporia.edu/earthsci/amber/go336/yourlastname</font><p>

3. Save the file on the a diskette or memory card/stick, aber07.htm. Remember to save as to the diskette or memory card/stick.

5. Paragraphs, Indentions, Line Breaks, Horizontal Rule

a. 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. Type the following:

<dd>This webpage project was created for a mineralogy course at Emporia State University. The assignment was to learn webpage creation and present a summary of... insert your topic here and continue your introduction <p> <hr width="50%">

b. Save the file on the diskette or memory card/stick, aber07.htm. Remember to save as to the diskette or memory card/stick.

c. To view your page, open Netscape/Mozilla Firefox. 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, aber07.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.

6. Centering and Lists

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

<p><center>Table of Contents</center><p> <ul><li>Introduction</li> <li>Insert your heading(s) here</li> <li>Conclusions</li> <li>Sources</li></ul><ul> <ol><li>References</li> <li>Additional Online Information</li></ol></ul><hr><p>

b. Save the file on the diskette or memory card/stick, aber07.htm. View the additions on the browser version by clicking on the Reload button.

7. Bold Face, Italics, and Blinking

a. Letters may be in italics (i), bold face (b), or blinking (blink). Blinking text should be used sparingly, if at all. In spite of the fact that this has nothing to do with your webpage, add these lines to your wordpad file:

<h3>Introduction</h3> <dd><b>Mineralogy</b> is a subfield of the geosciences that includes <i>crystallography and mineral genesis, as well as the physical, chemical, and optical properties</i> of naturally occurring, crystalline solids. <p> Check your knowledge of this subject by taking a <blink>quiz</blink>.<p>

b. Save the file on the diskette or memory card/stick, aber07.htm. View the additions on the browser version by clicking on the "Reload" button.

8. Pre-formatted Text

a. While this command should not be used often, enclosing text in the pre-formatted marker allows an existing text, spacings, and fonts to be preserved. On your WordPad page, type the pre-formatted marker beginning and end. Use the cursor on the browser version, to highlight the sentence below, then go to Edit, Copy, and bring it down to the WordPad page for Paste.

<pre>The definition of a mineral includes: naturally occurring homogeneous solid usually inorganic origin definite but not fixed chemical composition characteristic atomic structure </pre><p>

b. Save the file on the diskette or memory card/stick, aber07.htm. View the additions on the browser version by clicking on the "Reload" button.

9. Internal Links

a. 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 "Additional Online Information" and add the following:

<a name="intro">

b. Save the file on the diskette or memory card/stick, aber07.htm. View the additions on the browser version by clicking on the "Reload" button.

10. External Links

a. External links go to other pages you create or one you did not create but want others to read! 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 mineralogy, a background in the

<a href="http://www.emporia.edu/earthsci/amber/go336/known.htm">discipline</a> is important (www.emporia.edu/earthsci/amber/go336/known.htm).</b> <a name="email"> For more information email <a href="mailto:saber@emporia.edu">saber@emporia.edu</a>. <p> b. Save the file on the diskette or memory card/stick, aber07.htm. View the additions on the browser version by clicking on the "Reload" button.

11. Graphical Links

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

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

b. Choose an image off this page and save it to your diskette or memory card/stick. Right click on the image and click on "Save Image As." Send the image to the drive for your memory card/stick 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. Be sure to record the URL and complete citation for the webpage where the image was obtained in order to include the cite under the image and at the reference section of your page. While some gifs do not need citing, most images and animations do need citing. Permission should be obtained from the webmaster of the page where the image was taken.

c. Save the file on the diskette or memory card/stick, aber07.htm. View the additions on the browser version by clicking on the Reload button.

12. Tables

a. 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>Related Links</h2></caption> <td> Emporia State University <a href="http://www.emporia.edu/">www.emporia.edu</a> <td> Earth Science at ESU <a href="http://www.emporia.edu/earthsci/">www.emporia.edu/earthsci</a> <tr> <td> Mineralogy Webpage Assignment <a href="http://www.emporia.edu/earthsci/amber/go340/webpage.htm"> www.emporia.edu/earthsci/amber/go336/assign.htm</a> <td> Past Student Projects <a href="http://www.emporia.edu/earthsci/amber/go340/students/stupages.htm"> www.emporia.edu/earthsci/amber/go336/webpages.htm</a> </table></center>

b. Save the file on the diskette or memory card/stick, aber07.htm. View the additions on the browser version by clicking on the Reload button. Congratulations on creating a template with which to work on your webpage assignment! Now send this document to me via email and include the image used as well.

Return to the top.

Awesome HTML Sites to Visit...

HTML Basics or How to Write a Webpage

Dave Raggett's Guide
www.w3.org/MarkUp/Guide/ 		A guide to HTML
and CGI scripts
snowwhite.it.brighton.ac.uk/
~mas/mas/courses/html/html.html 		Instructions for
Creating Webpages
academic.emporia.edu/
aberjame/web_page.htm
Mike O'Sullivan's
The Idocs Guide To HTML
www.HTMLCodeTutorial.com 		WebAlley
Publishing Made Easy
www.weballey.net 		Top 15 Mistakes
for First Time Web Design
doghause.com/top15.asp
HTML Primer
htmlprimer.com/lessons/lesson1.html 		HTML Tutorials
for the complete idiot
www.geocities.com/siliconvalley/
campus/1924/index.html 		HTML Made
Really Easy
www.jmarshall.com/easy/html
Bare Bones
Guide to HTML
werbach.com/barebones/ 		Intro to HTML
www.cwru.edu/help/introHTML/toc.html 		webmonkey authoring
HTML basics
www.webmonkey.com/teachingtool/

ESU Webpage Examples

GO 336 Mineralogy
Student Webpages
www.emporia.edu/earthsci/
amber/go336/webpages.htm 		GO 340 Gemstone
Student Webpages
www.emporia.edu/earthsci
amber/go340/students/stupages.htm 		Emporia State University
Earth Science Student Pages
www.emporia.edu/earthsci/
student/present.htm
ES 111 Introduction to Earth
Science Student Webpages
www.emporia.edu/earthsci/
amber/es111/assign.htm 		Jim and Susie Aber's
Kite Aerial
Photography
www.geospectra.net/kite/ 		Susie Aber's
World of Amber
www.emporia.edu/earthsci/
amber/amber.htm

Thanks for visiting! This page originates from the Earth Science department at Emporia State University. For more information contact S. W. Aber, e-mail: saber@emporia.edu. Last updated 7 July, 2007. Revisit the course syllabus or the Mineralogy WebPage Assignment.

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