[an error occurred while processing this directive] [an error occurred while processing this directive]
 
Buy Fanzing's first comic:
"Job Wanted"!
   
  Monitor Duty    >     Fanzing Archives    >    HTML Tutorial Sitemap      
Fanzing Tutorial
Intro
Part 1: Tools
Part 2: Basic Code
Part 3: More Codes
Part 4: Basic Page
Part 5: Conversion
Part 6: Clean-Up
Part 7: Skeleton!
Part 8: Demo
Part 9: Style!
Part 10: Resources
Character codes
[an error occurred while processing this directive]

End of Summer
  

Fanzing's Web Design Tutorial

Part 4: The Web Page

 

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 browser. 

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 complex codes such as javascripts, style sheet info and 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 Window.

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 page..

THEREFORE…the most basic web page skeleton would look like this:

<html>
<head>
 <title>Untitled</title>
</head>
<body>
Put your content here.
</body>
</html>

 

That's it! 

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.

  1. 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.
  2. 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. 
  3. 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.
  4. Where it says "Untitled" between the title tags, write your title.
  5. 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.
  6. 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.
  7. 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.)
  8. Paste your document in.  You can go up to the "Edit" menu and choose "Paste", or you can use CTRL and the V button.
  9. 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!

[an error occurred while processing this directive]
 
Return to the Top of the Page [an error occurred while processing this directive]
 
 
 
This tutorial is © 2000 Michael Hutchison
Fanzing is not associated with DC Comics.
All DC Comics characters, trademarks and images (where used) are ™ DC Comics, Inc.
DC characters are used here in fan art and fiction in accordance with their generous "fair use" policies.
[an error occurred while processing this directive] 		 
Fanzing site version 7.1