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
we have a problem.  See, a lot of people
write in notepad and hit the "Enter" key
when the end of their line starts to hit the
edge of the window.  They know that if
they keep typing, the words will end up on
a single line that stretches on forever. What
they don't realize is that all they had to do
was go to the "Edit" menu in Notepad and
make sure that there was a checkmark by
"Word Wrap".  When Word Wrap is on,
your writing will drop down to the next line
when it reaches the edge of the window.

Unfortunately, in thinking that they were
making a nice-looking document, people
who hit "Enter" at the end of every line
are adding a line-break and screwing up
their document.

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!

Arachnophilia is available at http://www.arachnoid.com/arachnophilia/

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>
<br>
"I see," Lois answered, disappointed.

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>
<br>
<br>
<h3>Chapter 12: Tissue Damage</h3>

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

1. Put your cursor at the end of the top sentence (in this case, the period after the word "space") before the <br> tag.
2. Using either your mouse or your arrow keys (as we discussed before), select the following three <br> tags and the line after the last <br> tag, so that you've selected everything up to (but not including) the <h3> tag.
3. Press CTRL+R to bring up the "Replace" box.
4. Your selection should appear in the "search for" text area.  (This text area is only two lines high, so even though you've made a four line selection you'll only see the first two <br> tags.  You can scroll down to see them all.) 
5. In the "replace with" text area, type the coding that you'd like to replace the selection with.  First, put an </p> tag, because we know that we need to close off the last paragraph.  Hit CTRL+ENTER to start a new line.  On that line, put the coding you'd like to use to separate your chapters; it could be an empty paragraph <p></p> or just lines of <br /> tags.  For my example, I'll use an <hr width="75%" /> tag. Hit CTRL+ENTER twice to add two more lines to the text area (we aren't putting code there, but it helps to space out the HTML document visually so that we can easily read it.
6. Hit the "Replace All" button.
7. Proof your document to make sure it worked correctly.

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 hit
CTRL+ENTER.  (You won't actually see it.)

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>
<hr width="75%" />

<h3>Chapter 12: Tissue Damage</h3>

Cool, eh?

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:

Search For:	Replace With:
<br>* <br>*	</p>* * <p>

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:

Search For:	Replace With:
* <p>	</p> <p>

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.

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