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
Contributor's Central:Main Page
Fanzing's Web Design Tutorial
Part 6: Clean-Up!
The Biggest Problem With Text Documents!
If you write in Notepad or another text document, let me ask you this: Do you know what word wrap is? If so, and you write with word wrap on, you probably won't have a problem. Your paragraphs should work just fine.
If you don't know what word wrap is, then
Unfortunately, in thinking that they were
See those two paragraphs and how short each line is? That's what happens when you write in Notepad and use a break at the end of every line instead of word wrap. When converting to HTML, a <br> tag gets added to the end of every line. It is a witch with a capital "B" to deal with. You can't just use "Find and Replace" to remove the <br> tags, because it will remove them everywhere. Grrr. I have developed methods for dealing with them, but they'll require explanation
If you write in text and don't use word wrap turn it on and never turn it off again. You may also encounter these line-breaks-within-paragraph problems
If you have text documents already formatted the wrong way, your options are to go through the documents removing the breaks at the end of every line, to convert them to HTML and then remove the <br> tags using Find-and-Replace, or to open it as a text document and then put in the <p> tags yourself.
Arachnophilia's Miracle Tool!
Why do I still like Arachnophilia? Because, like some of the better word and web programs around, it allows complex Find-And-Replace. Find and Replace (I'm going to refer to it as just "replace" from here on out) will save you a lot of hassle in fixing various problems. Replace searches across a document or even several documents at once, if you like and everywhere that it finds a chosen word (or any other value), it replaces it with another word.
How do you use "Replace"? Like this:
To activate "Replace", you just hit CTRL + R ( or look for it under the "Edit" menu). A little pop-up box appears. It has two primary text areas, one that says "search for" and another marked "replace with." If you have already highlighted the word(s) you want to replace, your selection will appear in the "search for" text area. Otherwise, you'll have to type it in. Then, in the "replace with" text area, type the text or HTML code that you would like to appear in its place.
IMPORTANT : If you want to begin a new line in the text areas, you don't hit "Enter". (Hitting Enter will start the "Find and Replace"!) You need to hold down the control key while pressing "Enter." (That's CTRL+ENTER) Remember that for the future; you're going to use it!
For instance, if you wanted to replace all occurences of <br> with the properly coded tag <br />, you'd put "<br>" in the "search for" text area and "<br />" in the "replace with" text area. Next, put check marks by the actions which you would like to take effect: "Match whole word" "Match case" "Search Entire Document" and "Search All Open Documents." Then, press the button that says "Replace All" to have it change all the words in the document.
ONE WORD OF ADVICE : Make a back-up copy before doing any massive "Find and Replace" actions. If you goof up and replace things you hadn't intended to replace, you may want to go back to your original. While Arachnophilia does have an Undo history, it's still good to have a back-up.
Using "Find and Replace" To Fix Line Breaks
If you converted your document in Arachnophilia, you'll notice that instead of a proper <p> and </p> surrounding paragraphs, it simply spaces the paragraphs out with a number of <br> tags. (Remember, <br /> is now the proper way to write that tag, but it used to be <br>) If you used standard spacing between paragraphs, there will be two <br> tags between paragraphs, and they're on two separate lines, like this:
which is why we need to oppose Luthor at every
turn, Lois!" Superman said.<br>
What we're going to do to fix that is select those break tags and replace them with the paragraph tags we need. But not yet.
Why not yet? Because there may be places where there are more than two break tags in a row and replacing them with paragraph tags would just screw it up royally.
Look through your document. Are there any places where you separated chapters or sections with an extra space between the paragraphs? I am referring to something which, upon conversion into HTML, looks like this:
With a mighty swing, John Henry Irons severed his
infected leg and watched it drift away through the vacuum of space.<br>
(I know, I know I shouldn't use such intriguing examples.)
Assuming that you've proofed your document to make sure that three lines of <br> tags is the most you'll find in a row (in other words, that you haven't used four or five or ten somewhere else), we're ready to begin.
In case you can't picture all this in your head, I'll show you
what the two text areas should contain. Since you can't see
the "begin new line" spots, I'm going to represent that with a red
asterix. When you see a red asterix, it just means that you
If you did it right, you'll get a result like this:
With a mighty swing, John Henry Irons severed his
infected leg and watched it drift away through the vacuum of space.</p>
Now that we've eliminated the dreaded "three break tags in a row", it's time to transform all of those "two break tags in a row" into proper paragraph dividers. It's basically the same steps as what you did before, only this time you make the following replace:
We're almost done now!
You've changed all the places in between the paragraphs into proper "end paragraph" and "begin new paragraph" coding. Now you need to go back to the beginning of your document and make sure that there's a <p> at the beginning of the first paragraph. Then check the bottom of the story and make sure that there's a </p> after the last paragraph. Finally, proof the document and make certain that there are no paragraph tags in places where you didn't want them.
And that's it. You've fixed the paragraph tags.
Now, if you wish or need, you can do a find-and-replace on the remaining <br> tags that may be within the paragraphs. Check your document to see if there are <br> tags in the paragraphs. You'll most likely have some if you didn't use Word Wrap or if you've copied the piece from an e-mail. For that, you search for <br> and replace them with a space (that's right, a blank space using the space bar). Be conscious of any cases in your story where you may have intentionally used a break.
OR, If You Used Netscape Composer
As we covered before, putting your text document into Netscape Composer and then saving it is a little better than Arachnophilia. There, at least, <p> tags are put in. It's a good start, but there aren't any </p> tags. Here's a simple fix for that. Open the document in Arachnophilia and make the following replace:
Then, just make sure there's an </p> after the last paragraph.
In all cases where you use Find and Replace, you need to double-check your coding afterward.
And That's The Nitty-Gritty of HTML Clean-Up!
By now, if you've done these tutorials in order, you know how to write basic HTML and you've found an easy way (or ways) to convert your documents into HTML. In our final tutorial, I'm going to give you Fanzing's skeletal web page and guide you through its fill-in-the-blank design. That will be followed by answers to some expected questions and a handy reference sheet.
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.
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.3