So, You Want a Background, Huh?

Use these links to jump around or read it all...
[SPAN: What Does It Do?]
[Adding Styles] [Text Tool Tips]
[Affecting Images -- New Event Handlers!]
[For Search Engines]

     This piece is the first in, I hope, a long series of HTML 4.0 tutorials. If you haven't already, it would be best if you read over my HTML 4.0 reference tutorial. It offers a general overview of the new flags and attributes involved with the latest version of HTML to hit the Net.
     Now it's time to get a little more specific about what you can and cannot do with this version. We'll start with a brand new flag, SPAN. If you haven't seen or heard about it by now, get ready. This pup will be one of the big workhorses in Web pages to come.

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 4.0 (or better) will support the SPAN flag as long as it's dealing with text, except for the TITLE attribute (as of 11/23/98). The examples below that use images will not function.

• Post a comment
• Email Article
• Print Article
• Share Articles
  • Digg
  • del.icio.us
  • Slashdot
  • DZone
  • Reddit
  • StumbleUpon
  • Facebook
  • FriendFeed
  • Furl
  • Newsvine
  • Google
  • LinkedIn
  • MySpace
  • Technorati
  • Twitter
  • Windows Live
  • YahooBuzz

---

SPAN: What Does It Do?

     Nothing! Not a darn thing. But that's the beauty of it. Above all, remember this about HTML 4.0: Cascading Style Sheets (CSS) will be big. See So, You Want Cascading Style Sheets, Huh? . 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. Really. Look at the source code if you don't believe me. See? No effect.

     Now, before someone writes to me telling me that you can get the same effect using just the <FONT> and </FONT> commands in place of <SPAN>, yes, that's true. But what you're doing is using a flag for something it isn't meant to do. Plus, the SPAN flag is an HTML 4.0 entity and will thus comprehend HTML 4.0 attributes.

---

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.

• Affecting the Text's Background Color:
  • Use This Format:
    <SPAN STYLE="background-color: #ffffcc">Here's What You Get</SPAN>
  • Here's What You Get

• Affecting Text Color and Size:
  • Use This Format:
    <SPAN STYLE="color: green; font-size: 10pt">Here's What You Get</SPAN>
  • Here's What You Get

• Adding A Background Image to the Text:
  • <SPAN STYLE="background-image: url(background2.gif)">Here's What You Get</SPAN>
  • Here's What You Get

     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.

• Using the Class:
  • Follow this Format:
    <SPAN CLASS="newtext">Here's What You Get</SPAN>
  • Here's What You Get

• Using the ID:
  • Follow this Format:
    <SPAN ID="newtext2">Here's What You Get</SPAN>
  • Here's What You Get

---

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 (See So, You Want Faster Loading Pages, Huh? ) produces when used with an image. Take a look. Lay your pointer on the text "Here's What You Get" below.

• Adding the Title Tool Tip:
  • Follow this Format:
    <SPAN TITLE="This is the tool tip box">Here's What You Get</SPAN>
  • Here's What You Get

     That's very cool. I would use it to death.

---

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 (see So, You Want An Image Flip, Huh? (Part 2) .) Roll your mouse over this image:

     Here's the code that made it:

<SPAN onMouseOver="document.pic1.src='blueone.gif'" onMouseOut="document.pic1.src='blackone.gif'"> <IMG SRC="blackone.gif" height="50" width="150" name="pic1"> </SPAN>

     If you've read any of the Goodies' image flip tutorials, you can probably pick this one apart.

• The SPAN command contains the onMouseOver and onMouseOut Event Handlers with a JavaScript hierarchy statement denoting the document, the name of the image to be affected, then a source for the image that is to be placed.

• Then it's a basic image command with a NAME attribute so that the Event Handlers know where to make the effect. See all the "pic1" names above? That's what ties it all together.

• Finally, the /SPAN flag finishes it off.

     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.

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

     Okay, admit it. That was really smooth. It was done with some new Event Handlers that the SPAN flag understands. Here's the code:

<SPAN onMouseDown="document.pic2.src='/blueone.gif'" onMouseUp="document.pic2.src='/redone.gif'" onDblClick="document.pic2.src='/greenone.gif'"> <IMG SRC="/blackone.gif" height="50" width="150" name="pic2"> </SPAN>

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

• onMouseDown causes an effect when the mouse clicks down.
• onMouseUp causes an effect when the mouse button is released.
• onDblClick causes an effect when the mouse is double clicked.
       ~Know this, too~
• onMouseMove causes an effect when the mouse is moved within the SPAN area.
       This would be best if you surrounded a division of the page with the SPAN flag.

     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='/blueone.gif'" onKeyUp="document.pic3.src='/redone.gif'"> <IMG SRC="/blackone.gif" height="50" width="150" name="pic3"> </SPAN>

     You can probably guess what each of them do. Here are the Event Handlers above and one more you'll soon be concerned with.

• onKeyDown causes an effect when a key is pressed.
• onKeyUp causes an effect when a key is then released.
       ~and~
• onKeyPress causes an effect when any key is pressed and released.

---

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. If someone else on the Net has registered that same kind of language, maybe you two nutty kids can get together.

---

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.

 

Enjoy!

 

[SPAN: What Does It Do?]
[Adding Styles] [Text Tool Tips]
[Affecting Images -- New Event Handlers!]
[For Search Engines]