Making Your Work HTML Ready

With the ever increasing popularity of the Internet, more and more publishers are using this valuable resource to receive submissions.

Therefore it is a good idea to learn at least the basic forms of HTML to prepare your submissions to WorldCrafters.

This help file will not teach you everything about using HTML, but it will provide enough information for you to prepare an acceptable submission for Course assignments.

Because this document will also be used as an example, there are no special HTML codes used.
You are strongly urged to view the source file for this page, or download the template and look it over. Take note of how the tags are nested together to form the relevant sections of the document.
You are welcome to cut and paste your text into this template to begin with, but you will quickly find it is much too limited.

To begin with, HTML requires a fairly strict structure consisting of HTML, HEAD, TITLE, and BODY 'tags'. We will examine each tag pair separately.

<HTML> is always placed at the top of the document. It tells any browser what to expect in the rest of the page.

</HTML> is always placed at the end of the page, and "closes" the document. That simply tells the browser that everything between and is to be considered as HTML code.

<HEAD> starts the section which the browser reads to gain extra information it may need to properly display the page. When you become more adept at using HTML, you will add a variety of tags here, but for the purpose of submissions, we will only include the <TITLE> tag. (See below)

</HEAD> will always end this section, and usually appears just above the <BODY> tag.

<TITLE> appears in the <HEAD> section only. Anything placed between the opening and closing TITLE tags will appear at the top of the browser window where the page appears.
For example, the TITLE of this document is "How to Submit Assignments". Beginners often confuse this TITLE with the actual title of their text. (See the <BODY> tag below)

</TITLE> Ends the TITLE section. (Do you notice how every ending tag is identical, except for the slash(/)? That is consistent with nearly all HTML tags. Exceptions are noted in the <BODY> section below.)

<BODY> always appears below the </HEAD> tag. This section is the portion of the document that actually appears to the reader. HOW it appears is determined by additional tags.
We will examine several here. They will be the ones you most commonly use in your submissions.

<H1> "Heading" makes the text between its tags larger and bolder. Number 1 produces the largest text and number 6 produces the smallest, which will still be different from the standard text. It MUST be ended with a matching </H1> tag. (Naturally, use the appropriate number!)

"Break" adds a single 'carriage return'. Use it just as you would a 'hard return' in your favorite word procesor. It does NOT take an ending tag.

"Paragraph" is the same thing as but it adds two carriage returns, perfect for starting a new paragraph. :)

<HR> "Hard Return" creates a simple graphic line the exact width of the window.

"Bold" makes the text enclosed appear as boldface type. It must have a matching tag.

"Underline" presents the enclosed text as underlined. It must have a matching tag.

"Italic" displays the enclosed text in an italic format. Like the rest, it must be concluded with a matching tag.

Final Notes: Most tags can be 'nested' as in the following example:
Cool Stuff!
produces Cool Stuff!

One way to provide a double space to indent your paragraphs is to use a token
similar to the 'less than' noted above. Use the following characters without
spaces in between: & nbsp ; to create a single space. Two of these 'tokens',
separated by a space in your HTML document will give a reasonable indent.

Now, with all that said, here is a list of the steps to modify a submission for HTML viewing. Be sure to alter these steps to fit your particular style as necessary.

Download the template, and keep a copy. Open it in any word processor that handles plain ASCII or .txt files. Be SURE to disable "word wrapping".
Scroll down and change "Default Title" to the title of your story. This appears twice:
Once to set the title of the window, and a second time to set the title as it will appear in the document.
Scroll further and look for "Insert Story Here". <HR> makes a good separator so we will use it in this example. Just above "Insert", type <HR>.
Open your story in a new window and click in EDIT. Click on SELECT ALL. Click EDIT again and select COPY. (For non-Windows users, cut and paste in whatever manner available to you. If you do not know how, send me e-mail with your system type and programs you use and I will find out.)
Switch to the template window and position the cursor under the <PRE> tag. Click EDIT and select PASTE.
Refer to your original story and look for any words you might have underlined, italicized, or set bold. Use the appropriate tags as noted above. A sentence like "She screamed!" could be italicized as follows: "She screamed!"
Next, insert the appropriate "line break" and "paragraph" tags to format the text. The template has all of its tags on a separate line for clarity, but you may place your tags at the end of a line if you wish.
Just below your story, you will see an 'anchor' that looks like this: <A HREF="default.html">Back</A>
Replace 'default.html' with the filename of your index page, using the following naming convention:
Filenames are based on the first two letters of the first name, and the first five letters of your last name. My name results in pamicha.html, for example. Ann Marie Olson results in anmarie.html. NOTE: Case is sensitive! Use only lower case letters.
Scroll down to the <ADDRESS> tags. Replace 'Somebody@somewhere.com' with your e-mail address. Replace 'Somebody' at the end of the anchor with your your name.
Just below that anchor, you will see "1999 Copright message here." Replace the text with something appropriate. Using " (c) Copyright " will help protect your intellecutal property rights, and is always a good idea.
Stories related to the Simegen universe MUST be marked "(c) Copyright Sime~Gen Inc."
Save your document as text, but be sure to use .html as the extension. When your file is uploaded, it will be renamed according to the conventions noted above, with the addition of four digits. These numbers represent the assignment number and the year as follows: pamicha0199.html represents assignment 01 in the year 99. Feel free to save your document with the correct name, but be assured I will verify it as necessary when your assignment is posted.
View your document in your favorite browser for errors. Most will allow you to type the full path name as a link. Use the following format: file:///c|\internet\editors\html\worldcraft\anmarie.html (change the path to point to your file, of course.)
Email me directly if you need help with this, or if you are on a non-windows system.
Send your document according to the guidelines and your done! Be sure to let me know if you have difficulty.
NOTE: If you are familiar with HTML and intend on adding anything fancy, remember these points. Background colors are fine, but if you use a background image, it must be linked off-site ONLY. Do not point to any image file larger than 50k. Anything that would require the use of a plugin, or any browser higher than Netscape 3.0/IE4.0 should not be used at all.
Also, try to use a common font. Not everyone has them all, and the result may reduce your work to a garble.
For the sake of clarity in commenting, I also add an "Ordered List" to each paragraph.
Below the by-line, I add <OL> and at the start of each paragraph, AFTER the tag, I add a <LI> tag. (List Item)
At the end of the text, before the </BODY> tag, add </OL> to close the "Ordered List" section.
The end result is that each paragraph will be numbered so the instructors can refer to a paragraph by number when commenting. Students are encouraged to include these tags in their submissions.

For those unfamiliar with the term, you can "View Source" in most browsers by clicking on VIEW, then scrolling down to SOURCE.
Sometimes you will see "View Frame Source" instead. It is the same thing.
Click here to download the template. It is a self opening archive. Simply double click on it to open. (Windows Only. E-mail me directly for a copy if you are on a Mac or Unix.

Back

Comments: StudentShowcase@SimeGen.Com

Copyright © 1999 Sime~Gen Inc. All rights reserved.

Making Your Work HTML Ready

Back