>



HTML 4.0:
The SPAN Flag

     Please note: The SPAN flag is not in full use across all browsers yet. The Internet Explorer 4.0 (or better) browser will support all of the attributes listed below. Netscape Navigator has not yet supported all of the attributes. The examples below that use images will not function in Netscape yet.


SPAN: What Does It Do?

     Nothing! Above all, remember this about HTML 4.0: Cascading Style Sheets (CSS) will be big. The use of one command to denote multiple points on a page is the wave of the HTML future.

     If you've used CSS, you know that you've always had the ability to attach a style to a command. For instance, you could say that every time the BOLD flag is used, also make the text Arial and blue, right? You also probably know that you could stick style commands into other flags. You could put:

STYLE="font-family: courier"

...into just about any flag and the text modified by the flag would also carry the CSS effect.

     But in all cases, you still had to use a flag that itself would affect the text, the image, or whatever. That's where the SPAN flag comes in so handy. It doesn't affect the text at all. It is there only to carry with it other attributes to affect the text, the image, or whatever.
     In fact, the text in this paragraph is surrounded by the <SPAN> and </SPAN> commands.


Adding Styles

     The primary purpose of the SPAN flag is to act as a vehicle by which attributes can be implemented. Here are a couple of examples of adding CSS commands right in the SPAN flag itself.

     You get the general idea. Follow the same format as you would placing CSS commands anywhere else, except now you put them in the <SPAN> flag.

     If you'd rather set up Classes or IDs, great. That'll work, too. I have this Style Sheet block in between the HEAD flags on this page:


<STYLE TYPE="text/css">

.newtext {font-size: 18pt; color: #ff0000; font-family: arial}
#newtext2 {font-size: 20pt; color: #ff00ff; font-family: courier}

</STYLE>


     There's both a Class (with the leading dot) and an ID (with the leading #) there to be used. And use them we shall.


Text Tool Tips

     This is really where the SPAN flag shines. This is also how I see the command being used most around the Net today.
     SPAN will allow a TITLE attribute that shows up on the page when the mouse is left to sit on the text. It looks a lot like what the ALT command produces when used with an image. Take a look. Lay your pointer on the text "Here's What You Get" below. Will not work in Netscape ai this time.

     That's very cool..


Affecting Images

     Not only will the SPAN flag act as a vehicle to carry Style Sheet commands, but it will also accept JavaScript Event Handlers. It actually makes a heck of an image flip. Roll your mouse over this image:

     Here's the code that made it:

<SPAN onMouseOver="document.pic1.src='openfolder.gif'"
onMouseOut="document.pic1.src='coffee.gif'">
<IMG SRC="coffee.gif" height="20" width="21" name="pic1">
</SPAN>

     Pretty basic, huh? The only other fancy thing I want to point out about the format above is that I have the onMouseOut set to the same image as the one the image command calls for. See that? That way it returns the image to its original state when the mouse moves off.

     You've seen it all before. Well, try this on for size. Below is the same image. Lay your pointer on it, click and hold, then release the click. Then double click.

     It was done with some new Event Handlers that the SPAN flag understands. Here's the code:

<SPAN onMouseDown="document.pic2.src='openfolder.gif'"
onMouseUp="document.pic2.src='coffee.gif'"
onDblClick="document.pic2.src='openfolder.gif'">
<IMG SRC="coffee.gif" height="20" width="21" name="pic2">
</SPAN>

     The format of calling for the images is the same, but let me point out those new commands:

     Let me hit you with a couple more. They may work or they may not. These are three new specifically HTML 4.0 level Event Handlers. Click on the box below and press any key on the keyboard.

     Anything? I didn't get the effect when I tried it. Later level browsers will though once HTML 4.0 becomes the standard all the way around. Here's the code:

<SPAN onKeyDown="document.pic3.src='openfolder.gif'"
onKeyUp="document.pic3.src='coffee.gif'">
<IMG SRC="coffee.gif" height="20" width="21" name="pic3">
</SPAN>

     Here are the Event Handlers above and one more you'll soon be concerned with.


For Search Engines

     Again, if you've read the HTML 4.0 overview, you'll already have a head start on what these last two attributes do. DIR and LANG are specifically for search engine use. They won't affect the look of your page at all.
     DIR denotes direction. There are languages that do not move from left to right like English. Some go right to left, and if you live in a country where you read right to left, then the English left-to-right seems strange. Still with me?
     By using the DIR command, you can tell the search engine that this blurb of text between the SPAN flags is going a specific way. Right to left is "RTL," while left to right is "LTR." It looks like this:

<SPAN DIR="ltr">Text Text Text</SPAN>

     LANG is an attribute that tells the search engine what language is being used inside the SPAN flags. It looks like this:

<SPAN LANG="es">Hola! Como esta?</SPAN>

     The 4.0 recognized codes are ar (Arabic), de (German), el (Greek), es (Spanish), fr (French), he (Hebrew), hi (Hindi), ja (Japanese), it (Italian), nl (Dutch), pt (Portuguese), ur (Urdu), ru (Russian), sa (Sanskrit), zh (Chinese).
     Yes, there is also a code set aside if you wish to denote a language that doesn't really exist, like Pig-Latin or Klingon. Follow the same format as above, except add x- before the name. Like so: LANG="x-ubbee dubbie." The "x" means it's an experimental language.


That's That

     This SPAN flag is going to be big on the Web. It's just a great idea that does so much. And now you've seen every aspect and attribute it'll hold.
     I'd start using it straightaway with text. Those with the right browser will get the effect, those that don't, won't. But they'll be none the worse for wear by your having it there for others to enjoy.
     I don't know if I'd start using SPAN with images quite yet, especially if the Event Handler is a necessary part of the page. Go with JavaScript until HTML 4.0 is standard across the board.