GO 340 Gemstones & Gemology

Emporia State University
Susan Ward Aber


Simple HTML Tutorial

Creation and Code

Welcome to instructions needed to accomplish your WebPage assignment! This site will give you to just enough information to design the appropriate format for your final presentation using HyperText Mark-up Language (HTML). Online websites and software programs exist to create World Wide Web (WWW) pages but for the beginner, part of this assignment is learning some simple html code. Proper citations and referencing of all materials used, including images, will be addressed in this webpage as well. If you find images online that are not in the public domain, it is best to request permission for the use and alert authors that you will be linking to their site.

This tutorial is modeled after one created many years ago by David Mannering at the ESU computing center. It is a twelve-step guide to creating simple webpages! Combine this with rich information content and you will have an effective final presentation for this course! Webpages are composed of ordinary ASCII text files that contain the special code markers. To see an example, click on View on the top menu of this page and choose Page Source or Page Info in the drop-down menu. This technique works to view the source for any webpage, whether created directly from code or by a software program.

To get started, open a text file editor such as WordPad; if your computer has some version of Windows, click on start, then program, accessories, and WordPad. Touch the square with the cursor to reduce the size of the page to one-half. This square is located in the center of the three choices along the top right edge (dash, square, red X) Now position it in the lower half of your screen by placing the cursor along the top header bar and left click to move the entire box. Follow along with each step and save your work to a memory device- diskette, memory stick, flash card -and on the hard drive of your computer as well.

This tutorial was created using a Mozilla Firefox browser, which I recommend as your browser type. Follow the directions below and type in the the following commands in the WordPad document you have opened and readied...

HTML Tutorial

1. After opening WordPad, type in the following, leaving blank lines where indicated: <html> <head> <title>GO 340 Project</title> </head> <body> </body> </html>

1a. Save the file on your hard drive, memory stick, flash card, or floppy diskette, by going to File and Save As. Go to the bottom and Save type as and choose text document file type; then assign a file name with no more than eight characters, such as go340.htm. And, click yes for saving this as Text Only file format. Thus, the file name should be given the htm extension but saved as a text file type.

2. All content entry from here on out will be located between the body and end or slash body command markers. So position the cursor in the blank space after the command. Add the following heading and subheading by filling in your own title and name:

<h2>YourTitle </h2> <h4> by </h4> <h3>YourName</h3>

3. Save the file. The background of an html document by default is usually gray or white. 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). Thus, return to the body command you typed before and replace it with:

<body bgcolor="#ffcc66" text="#660000" link="#666600" vlink="#993300">

3a. Save the file. To view your newly created webpage, open your preferred browser. 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, go340.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.

Change the colors to suit your style by choosing other color codes shown online at http://www.w3schools.com/html/html_colors.asp (W3Schools.com).

4. There is control over font size using the h1, h2, etc. tags. You will only use these commands for headings because this command places the text on a new line. Font size can be controlled in a different manner though in sizes from 1-7, with most software having a default of 3. You can assign font sizes throughout the document or override the default by assigning a basefont size at the beginning of the document. Add the following on the line after the body bgcolor and h2 commands:

<basefont size=4>

4a. Add the following line below by YourName:

<br><font size=5>http://www.emporia.edu/earthsci/amber/go340/yourlastname</font> <p>

5. Save the file. 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 gemstones and gemology course in the 2007 spring semester at <a href="http://www.emporia.edu/">Emporia State University</a>. The assignment was to learn webpage creation, as well as present a summary of our knowledge regarding: <p>Your Topic <br> Your Sub-headings <br> Conclusions <br> References <hr>

6. Save the file. To view, activate the browser window and refresh or reload. Centering text or image is done with the center command. Bulleted or numbered lists are created 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 under References hr:

<h2><center>Table of Contents</center></h2> <ul> <li>Introduction</li> <li>Contents</li> <li>Conclusions</li> <li>References and Links</li></ul> <ul> <ol> <li>Cited Sources</li> <li>Recommended Links</li></ol></ul> <hr><p>

7. Save the file. View the additions on the browser version by clicking on the Reload button. 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 final page, add these lines to your wordpad file after ...Recommended Links /li /ol /ul:

<h3>Introduction</h3> <dd>Gemstones are valued for their <i>beauty, durability, and rarity</i>. <b> Check your knowledge</b> of this subject by taking a <blink>quiz</blink>.<p>

8. Save the file. View the additions on the browser version by clicking on the Reload button. 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 Mozilla Firefox version, to highlight the sentence below, then go to Edit, Copy, and bring it down to the WordPad page for Paste.

<pre>Gemology may be described as a discipline interested in identifying selling cutting collecting displaying mining gem materials (Aber, 2004, p. 100). </pre><p>

9. Save the file. View the additions on the browser version by clicking on the Reload button. A word or phrase highlighted and underlined is linked to other sections of your document or other text and graphic files. These links are termed hypertext jumps. An example of this could involve linking the Introduction located in the Table of Contents to the actual introduction section. The introduction section must be given an identifying name and the introduction heading in the table of contents must be told to go to this name. Go back to the Introduction in the Table of Contents and between the li and /li commands replace Introduction with:

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

9a. The anchored hyper reference given above will look for intro. So go to Introduction after 2. Recommended Links to Visit and add the following in the line directly above the word Introduction:

<a name="intro">

10. Save the file. View the additions on the browser version by clicking on the Reload button. External links go to other pages you create or one you did not create but want others to visit and read. Jumping or linking to another HTML file on your computer is accomplished by entering the filename within the referenced anchor. Add this to the sentences you have (after the /pre and p commands):

In order to understand gemology, a background in traditional <a href="http://www.emporia.edu/earthsci/amber/go336">mineralogy</a> is important. <a name="email"> For more information email <a href="mailto:saber@emporia.edu">saber@emporia.edu</a>. <p>

11. Save the file. View the additions on the browser version by clicking on the Reload button. Now, go back and put your email in place of mine. To continue, you can include .gif or .jpg images in the document by using the following tag:

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

11a. Now this image will not show on your webpage until you pinch it. Right click on the juggling image above and from the menu choices, click on Save Image As. Send the image to the drive where your webpage is located and retain the name of juggle.gif. Attention should be paid to the extension of the image you choose as some are not gif but rather jpg extensions.

12. Save the file. View the additions on the browser version by clicking on the Reload button. 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) with an overall width assigned as well. 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 width="70%"> <caption><h2>Recommended Links</h2></caption> <td><a href="http://www.emporia.edu/earthsci/amber/go340/syllabus.htm">Gemstones Syllabus</a> <td><a href="http://www.emporia.edu/earthsci/amber/go340/webpage.htm">WebPage Assignment</a> <tr> <td><a href="http://www.emporia.edu/earthsci/amber/go340/students/stupages.htm">Past Student WebPages</a> <td><a href="http://www.emporia.edu/earthsci/amber/go340/gemlinks.htm">Gemstone Links</a> </table></center>

12a. Save the file. View the additions on the browser version by clicking on the Reload button. The last thing on your page should be the original end body and html commands:

</body> </html>

Review your webpage. How does it look? Can you see your image? Click on the hotlinked words and phrases. Do they work? If all went well, you have a template to work with for you final webpage project. Obviously you may not incorporate all of these items into your final product but you have this webpage example to use how you see fit! Submit this tutorial exercise to me via email attachment. If you used an image other than the juggle.gif, you must include the image as an attachment to the email message as well.

Final Webpage Project Expectations

While this was a tutorial to learn some basic HTML, you will be completing a final webpage project for this course. Submit the final in the same manner, attached to an email message to me and include all images as attachments as well. It is wise to submit a paper copy of the webpage in case my screen does not match what you saw on your screen.

For your assignment, content is of prime importance and your materials should be gathered from a variety of sources including books, journals, the Internet, etc. Proper credit to sources must be given when quoting or paraphrasing, and when including images. References should be given at the end of the document. For more information visit:

http://academic.emporia.edu/aberjame/web_page.htm http://academic.emporia.edu/aberjame/plagiarism.htm

Specific grading of the final webpage is based on the following criteria:

* meeting deadlines (8 points)
* a title and your name (2 points)
* suitable introduction and table of contents or method with which to navigate through the page (8 points)
* the content, with a text length equivalent to a three to five page typed report of a normal font size) (38 points)
* references, text and image citations - at least two images with proper citation and reference to the exact source (if online source, hyperlink directly to source and mention the image source homepage as well) (24 points)
* minimum of two relevant word or phrase citation links to external sources and two word or phrase links to internal sources (8 points)
* email address and date of creation/last update (2 points)
* following directions, pleasing background color and layout (10 points)

Return to the
top of the page or back to the GO 340 Syllabus.

This page originates from the Earth Science department for the use and benefit of students enrolled at Emporia State University. For more information contact the course instructor, S. W. Aber, e-mail: saber@emporia.edu Thanks for visiting! Webpage created: April 4, 2004; last update: March 2, 2009.

Copyright 1999-2009 Susan Ward Aber. All rights reserved.