Fanzing's Web Design Tutorial

Introduction

WHY TAKE THIS TUTORIAL?

Many people have been asking what can be done to speed up Fanzing's publication. The main time-consuming part of Fanzing's publication process is making the normal documents that are submitted into HTML-coded web documents (HTML documents is the technical name for "web pages" -- so just read that as "web pages" when you see that!). Currently, only a few Fanzing contributors submit articles in HTML. Now, converting a document from text or a word processing document isn't hard…but it does take time. Converting dozens of such documents is a lot of work for one normal human…and I, contrary to popular opinion, am not a god (although "normal human" isn't exactly right, either).

However, if most of Fanzing's contributors could do the prep work, the issues could be put together in a weekend! Your efforts to make your document ready will greatly enhance the site.

To make things even easier for you, I'll give you a simple pre-designed page. You just put your name where it says "Name", put the title of your story or article where it says "Title", then copy-and-paste your HTML-coded story into the spot where it says "Put your story here".

Thus, the tutorial comes in two chunks.  The first chunk is on HTML codes and the basics of making a web page out of an existing non-web document.  The second chunk explains the skeleton web page I'll be giving you, tells you what to do with its components and what to not touch.

So long as you do the very basic coding necessary to make your story into an HTML document…and if you know how to copy and paste…you can do this! HTML is easy to learn. I learned it in a week, and I wasn't a techie.  I knew how to use the basics of a word processor, and that's about it.  But so long as you know how to "cut-and-paste" and do a find-and-replace in a word processor, you'll be making basic web pages in a few days!

If, at any point, you feel that I'm assuming too much knowledge on your part and haven't adequately explained something, by all means tell me and I will revise this tutorial.  It is easy to make mistakes and skip over an important bit, so feel free to point out when I've erred.

OVERVIEW

In this tutorial, I'm going to give you..

1. A free, simple-to-use web design tool.
2. A few instructions on basic HTML…and by basic, I mean how to make a paragraph and how to make a word appear in bold, and that's about it!
3. A few more HTML codes, such as making subtitles and divider lines for your story
4. Several options for converting your original text or word processing document into an HTML document
5. Instructions on the RIGHT way to format your existing document.
6. A skeleton page into which you can plug your info (name, title) and story (the transformed document).
7. Answers to a few anticipated questions.
8. Abundant gratitude!

WAIT! 
DON'T RUN FOR THE HILLS SCREAMING JUST YET!

This tutorial is going to teach you how to make a document (either word processor or text) Fanzing-ready. Regardless of whether you're an expert web designer, a novice who knows basic HTML…or a newbie who has never done any web design but is willing to fuddle in order to help out a beleaguered editor (and don't worry, that describes most of Fanzing's contributors)…you'll be able to turn out HTML documents ready for inclusion in the next issue. I'm going to make it THAT easy!

I'm NOT teaching advanced design skills, by any means. I'm not going to teach you how to do fonts, or colors, or tables (those big grids you see on web pages sometimes). Just the basics of formatting. Believe me, you are going to be surprised at how easy it is to pick up the basics of web design coding (HTML). If you're a novice word processor user, I can teach you how to become a novice web designer. Being a novice word processor user means you can at least make paragraphs and bold and italic words. Well, guess what? That's about all you have to know how to do in order to be a web designer!

Why do you think there are only a few billion pages out there? Do you really think there are that many tech geniuses? Nah. It's just that this is actually pretty easy, at least in the basics.

I sense that a few of you are still scared. Before you panic and run, let me ask you a simple question.

If you were given a bare-bones web page, looked at the code and saw this:

PUT YOUR TITLE HERE
PUT YOUR NAME HERE
PUT THE BODY OF YOUR STORY HERE
PUT YOUR NAME HERE (yes, again)

…would you be able to cope with that?

Well, that's all I'm expecting people to do! If you can do that much, that's half the job! There will be coding around those phrases, but you don't have to know a bit about what it means if you don't want to! So long as you can code the body of your story properly (and I cover that), you'll be fine!

Now, every now and then, I may start spouting jargon such as CSS and style sheets and XML and SSIs and templates and you're going to say, "What the hell is he talking about?  I'm frightened!"   Don't be.  I come from the "…for dummies" school that thinks everything required for you to finish the job should be explained clearly.  If I tell you, "You don't have to concern yourself with the details about this because jargon jargon jargon jargon"…and you are wondering what I'm saying…just take a breath and remember that I told you you don't have to concern yourself with it.

The only reason I will be explaining some of these harder concepts is that there are some other people who know HTML already and they'll want an explanation of what I'm doing.  I'm trying to make a tutorial for both the newbie who is a clean slate and the semi-experienced web designer whose slate is cluttered with gibberish.  So if I take a moment to get technical for the other guys, don't panic!  And don't be afraid to ask questions.

NOTE TO THOSE OF YOU
WHO KNOW HTML ALREADY:

If you already know HTML, I'd still recommend that you skim over the sections on HTML.  The reason is that Fanzing is committed to using the latest design standards and we're trying to move away from a lot of the older "junk code" that worked but wasn't properly formatted.  Unfortunately, the books and articles I've been studying recently have shown that the way I used to do HTML was wrong on several counts (such as using paragraph tags improperly and not using headers). 

So, please look over the rules and check it against the way you usually work.  You may be surprised at some of the latest design standards!  I know I was.

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.

Fanzing site version 7.1