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!)
<BR> "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.
<P> "Paragraph" is the same thing as <BR> 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.
<B> "Bold" makes the text enclosed appear as boldface type. It must have a matching
</B> tag.
<U> "Underline" presents the enclosed text as underlined. It must have a matching
</U> tag.
<I> "Italic" displays the enclosed text in an italic format. Like the rest, it must
be concluded with a matching </I> tag.
Final Notes: Most tags can be 'nested' as in the following example:
<U><B><I>Cool Stuff!</I></B><U>
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 <I>screamed</I>!"
- 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 <P> 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.