More HTML Tags

<blockquote> . . . </blockquote>

This one takes a block of HTML and indents it on either side. It was intended for making long quotations in the approved style for reports and such (remember English class?) but it is more often used simply to indent something.

This text is in a blockquote.

This text is inside a pair of blockquotes.

Link to the SM Toolbox. Blockquotes work on images as well as text.
<blockquote> works on images as well as text.
<blockquote>
<p>This text is in a blockquote.</p>

<blockquote>
<p>This text is inside a pair of blockquotes.</p>
<a href=http://thaicity.net/apatt/tool.html><img
src="../banners/smtoolbox.jpg" width=327 height=86 border=0
alt="Link to the SM Toolbox. Blockquotes work on images
as well as text."></a><br>
<b><blockquote></b> works on images as well as text.

</blockquote></blockquote>

<center> . . . </center>

This tag centers both text and pictures over a block. It's one of the first tags I learned how to use, but unfortunately it is deprecated by the W3C; it was an early innovation by Netscape. FrontPage Express will keep <center> tags but hedge its bets by putting them inside . . .

<div> . . . </div>

The <div> tag is used to apply something to a whole block of html. The one you'll see most often is <div align=center> which is usually used to replace the obsolete Netscape-created <center> tag. If you work with style sheets, <div> provides a place to attach a style to as large a block of code as you like.

<span> . . . </span>

Pretty much the same thing as <div> in its effects, a container to put attributes inside. <span> was created mainly for use with style sheets.

The important differences between <span> and <div> are:

Technically <div> is a block element and <span> isn't. So says the W3C.

<hr>

This stands for "horizontal rule." It does this: moves down, draws a line of some kind, and moves down again. I use it a lot to break up sections of text. There's a button for putting one in in Netscape Composer and the AOL pagemaker; in Frontpage Express you have to go to "Insert" and then "Horizontal Line" on the menu. It's found on the Arachnophilia "Styles" button bar, but I never use it because what it puts in is:

<hr width=95% align=center>

Which looks like this:


I usually want just plain <hr>:


As you can see, <hr> can take some qualifiers. Here are some examples:

<hr width=80%>


You can't use a width in pixels with <hr>, at least in Internet Explorer. As you can see, the default alignment is "center," so you probably will never use "align=center" inside an <hr> tag you type in yourself.

<hr size=5 noshade>


Noshade works in Netscape too

<hr width=40% size="10" align=left>


<hr width=75% size=7 noshade align=right>


I've never seen anything but center alignment for a horizontal rule except on an examples page like this one, but you can use left or right alignment if you feel like it.

<hr size=5 color=#ff0000>


Now this one should look familiar--if you are looking at this page in Internet Explorer. If you are, you will see a red line five pixels high going accross the page. If you use another browser, it will probably look like this:


I did a lot of "art" on my old Earthlink version of American Dream using the color qualifier. Unfortunately, Netscape doesn't recognize it, and I've found that it is something that Microsoft invented on its own, so it isn't in the W3C standard. This is the cludge I came up with to do it in Netscape:

<table width=100%><tr><td height=5 bgcolor=#ff0000><img src=../../images/transparent.gif></td></tr></table>

"transparent.gif" is just a one-pixel gif with that one pixel set to be transparent. It's there just to put something inside the table, because Netscape won't show empty cells. There's a lot more things our little friend here can be used for, but that will come later.

Paul Lutus, the guy who wrote Arachnophilia, does the same thing with code like this:

<img src=../images/red.jpg width=100% height=5>

Paul was smart enough to use a GIF instead, though, so he actually got red in his one-pixel GIF. JPEG changed the color to brown for me. I forsee a big revision in my future, because I didn't use "transparent.gif" to do most of my stripes; I used .jpg files and now I see the color is wrong.

Anyway, Paul's technique makes for shorter code but it also means you have to save an image for every color you want to use. My latest cludge only needs one image for any color. It uses more code, but that code will stay there--FrontPage will eat Paul's code by changing the width and height to actually fit the picture.

<pre> . . . </pre>

Preformatted text. I hardly ever use this one, but I've seen it used a lot. What it basically does is put a block of text in a fixed-width font and displays it using all the whitespace that you used typing it in. I've most often seen it as a cludge to convert .txt files to HTML without work. Well, it does work that way, after a fashion, but it's lazy and it usually looks terrible, and you lose the textwrapping feature that is maybe the first reason to put your fanfiction in HTML rather than .txt format. That is, if your reader is viewing through a narrower window or in a screen with less resolution than you use, there is a good chance he or she will have to horizontal-scroll on every line to read. Most will not do that.

That said, <pre> is useful for some small chores. If you have a small table of information to present, <pre> can allow you to type it in and present it more or less as you see it. Using tables is a bit more complex--tables will be dealt with in an upcoming chapter. However, here is a comparison of how to do the same simple tabulation using each technique:

<pre>

             Preformatted Text   HTML Tables
Ease of use  Simple              Fairly hard to learn and maintain.
Flexibility  None                Lots of things you can do with tables
Size         Usually smaller     Usually larger
Appearance   Not very impressive Can be spectacular--but only <b>Internet
                                 Explorer</b> seems to be able to handle
                                 them right.
</pre>


             Preformatted Text   HTML Tables
Ease of use  Simple              Fairly hard to learn and maintain.
Flexibility  None                Lots of things you can do with tables
Size         Usually smaller     Usually larger
Appearance   Not very impressive Can be spectacular--but only Internet
                                 Explorer seems to be able to handle
                                 them right.


Preformatted Text HTML Tables
Ease of Use Simple Fairly hard to learn and maintain.
Flexibility None Lots of things you can do with tables.
Size Usually smaller Usually larger
Appearance Not very impressive. Can be spectacular--but only Internet Explorer seems to be able to handle them right.


<table><tr>
<th></th>
<th>Preformatted Text</th>
<th>HTML Tables</th>
</tr><tr>
<td><b>Ease of Use</b></td>
<td bgcolor=#00ff00>Simple</td>
<td bgcolor=#ff0000>Fairly hard to learn and maintain.</td>
</tr><tr>
<td><b>Flexibility</b></td>
<td bgcolor=#ffff00>None</td>
<td bgcolor=#00ff00>Lots of things you can do with tables.</td>
</tr><tr>
<td><b>Size</b></td>
<td>Usually smaller</td>
<td>Usually larger</td>
</tr><tr>
<td><b>Appearance</b></td>
<td>Not very impressive.</td>
<td>Can be spectacular--but only <b>Internet
Explorer</b> seems to be able to handle
them right.</td>
</td></tr></table>

Anyway, you can see that the HTML table version is bigger and harder to understand from the code, but that it's prettier.

You can also see that you can use HTML tags inside a preformatted block--but they can make things harder for you when you are lining up things. A rule of thumb here is if you have a lot of HTML tags like links to other sites (which can be quite long), you should use a table rather than a <pre> block because it will probably be less trouble.

BTW, I just found out Netscape doesn't handle <pre> the same way--the "preformatted" text I fed it in the above example came out looking crappy because Netscape 4.5 wasn't smart enough to switch to a fixed-width font. Ah, Netscape, what a wonderful browser . . . I'm not going to look at it in 6.0 now because that sucker slows down my machine to a crawl.

Back to Using WS_FTP LE On to Tables
HTML Index Main Index

Hosting by WebRing.