The Boring But Necessary Part of the Tutorial!
So far, you've learned about how to use Notepad or a web design
program such as Arachnophilia to edit .html files. You've
learned the principles of basic HTML formatting. You may have
learned some advance principles if you read "Step Three".
I imagine you'd like to start putting this in action.
Perhaps you already have. Maybe you've already taken a document,
put in all those tags we talked about and tried opening it in a
It won't work.
The problem is that the browser has not been told what it's looking
at. It needs more info. It's like having all the ingredients
but not the instructions for making the cake.
In order for your HTML coding to be read by a browser, it needs
these four tags:
- <html> and </html> go around the entire document.
They tell the computer that the following is HTML code.
This may seem obvious to you, but there are other codes for programming
and the browser needs to be told this, even if 99.9999% of all
sites on the World Wide Web are HTML!
- <head> and </head> are next. They define an
area that is seen by the browser, not by the person reading the
web page. Within the head tags are contained such information
as the title of the document, the keywords and description used
by the search engines in listing your page, and numerous other
things you won't need to bother with right now.
- <body> and </body> follow the closing head tag.
This is the prime real estate where the web page is made.
Put your HTML codes here and see them in action!
- <title> and </title> tags are not mandatory in the
sense that the page would crash and burn without them, as it would
if you left out the HTML, HEAD and BODY tags, but they are pretty
essential. TITLE tags go inside the HEAD tags, and they
define the page title. Now, if you want the search
engines to not know what to call your page, if you want your
readers to not be able to call the page anything, go ahead and
leave them out. I dare you! The title of your
document is defined by these surrounding tags. The title
is used by search engines in listing your site AND by the user,
who will see the title listed in the bar at the top of the browser
Okay, it's boring
but it's necessary. The computer has
to be told to use HTML, and the web page needs a head and a body
just like you or me. And you want to have a title for your
the most basic web page skeleton would look
Put your content here.
If you're using Arachnophilia and click "New", it should set up
that basic structure for you. If you're just using Notepad
and working in text, then copy that code right there and paste it
into a blank Notepad window.
Do you have some code done already? Have you already gone
through an existing story and put in the HTML tags such as paragraph
tags? If so, you are this close to having a finished
web page! All you have to do is put the structural elements
around the page and you're done.
I'm going to guide you through this step-by-step. If you
know how to copy-paste, this will be easy. I'll explain how
to copy-paste, in case you don't know.
- I'm going to assume you are using Arachnophilia. If you
are using Notepad, open another Notepad so that you have two windows
open. You're going to be copying and pasting from one to
the other. One window will have your existing document,
the other one is the destination for your new web page.
- Open the document which contains your story. This
is your fiction story (or article) and you have already gone
through it and added all of the HTML tags such as paragraphs,
bolds, italics and the like. Be sure to proof-read it, making
sure that all tags are turned off properly.
- In Arachnophilia, open a new file. This should set up
the basic HTML body structure for you. If it didn't, or
if you're using a blank page in your Notepad, you can copy
and paste it from the example I gave you above.
- Where it says "Untitled" between the title tags, write your
- Go to the window containing your story. Select the entire
story from beginning to end. This is usually done by going
up to the "Edit" menu and choosing "Select All." Otherwise,
you can put your cursor at one end of the document and
drag it to the other end with the mouse by holding down your
primary mouse button. OR, if you're using the keyboard,
hold down the SHIFT key and then move your cursor to the other
end using the arrow keys.
- Copy the selected document. You can go up to the "Edit"
menu and choose "Copy", or you can just press the CTRL button
and the C button at the same time.
- Switch over to the window containing the skeleton. Place
your cursor right after the <body> tag
or, if using the
example above, where it says "Put your content here". (You'll
want to erase that. Simplest way is to select that phrase
with your cursor before pasting.)
- Paste your document in. You can go up to the "Edit" menu
and choose "Paste", or you can use CTRL and the V button.
- Save your document! If you're using Notepad, be sure to
change the extension to ".html"
Guess what? If everything's done right, you now have a web
page version of your document!
Let's look at it. If you're in Arachnophilia, you can open
it in a browser or in the internal browser. If you just want
to see it in a browser, all you have to do is click on the icon
of the file and it should open in a browser. Let me know if
you have any problems.
If you've gotten this far and aren't having any problems (and
I hope you aren't), then I'm proud of you. Most of the technical
knowledge is done. All that remains are two more parts to
the tutorial: the best way to convert existing documents, and
the final creation of a web page for Fanzing using the skeleton
page that I will give you. Really, those two parts will just
be a look at how to use the HTML codes and page structure that you've
learned. In many ways, the hard part is over!
is Editor-In-Chief of Fanzing.com. He is the world's biggest Elongated Man fan
and runs the only EM fan site.
He lives in Rochester, MN.