Intro
Browser
The Page
Tags
Elements
Tables
Layout
Perfection

Calling the Elements

Of course, you want more than just text in your web pages, even if you can make it in cool colors. You want lightning and thunder... or at least, some pictures and audio.

The text that you've written is an actual part of your HTML page, but graphics and audio are separate and may even be located somewhere else in the world. To get them to appear (or sound), you have to call them.

<IMG SRC="http://URL_address/filename.jpg">

Here is the basic "call" that you use to get a picture into the page. Note that it's a command, not a tag, so there's no close. The parts are IMG (the type of element you are calling), and SRC="URL/filename.type" (the full name of the image, and the address where it is located). When your HTML page is being rendered by the browser, it sees the address and sends a call to that server to fetch the file.

If the picture is located in the same directory as the HTML page (in other words, it's been uploaded to your home page directory), you can just call it by file name and don't have to put the full address. If it's in a directory that's close to the HTML page, you'll need to include the relative path in the file name. For example, at Net4TV we store our images in a "graphics" directory that's inside the directory where our HTML files are located, so our image calls usually look like <IMG SRC="graphics/filename.jpg">.

Just as tags can have attributes that extend them, so can your element commands. If you know the height and width (in pixels) of your image, you can add these as an attribute and your page will load faster (the browser will "block in" the space for the image and render the rest of the page while the image is coming in). You can align your image to one side or the other of the page, and add a border. Here's the actual call used to place our pipe smoker (above) into this page:

<IMG SRC="graphics/pipe.jpg" height=215
width=200 align=right border=2>

What do you think would happen if you used different values in the "height" and "width" attributes than the actual picture size? This picture is exactly the same as the picture above, except that it is set height to 86 and its width to 80 and the browser scales it automatically. What makes this super cool is that the page only fetches the graphic one time. Once it's come in, it can be used a lot of different ways without any cost in loading time:

It's a separator bar at height=10 and width=350!

(And now you know how we did our "Zen" separator.)

Audio is also called, but because audio is time-based it is "played" rather than just displayed. So, there are some differences.

Click here to play a MIDI.

If you want the user to be able to play the audio whenever they want, or you want to put several pieces of audio into your page, the easiest way to do it is with a hot link as we've done here. You do this exactly the same way as you make a hot link to another page with the <A> tag, except your link is to an audio or MIDI file rather than to an HTML page:
<A HREF="http://URL/filename.mid">Click here to play a MIDI.</A>

Other common digital audio formats, like .WAV and .AU, work the same way but are generally "heavier" (bigger data size) than MIDI so they take longer to load.

If you want your sound to play automatically when your page loads, there are a couple of different approaches depending on the browser that will display the page. WebTV and Microsoft Internet Explorer both support the <BGSOUND> command. The command syntax is very much like an IMG command:

   <BGSOUND SRC="URL/filename.type">

You can extend the BGSOUND command with the LOOP attribute, if you wish. The values can be LOOP=1 (or any number), or LOOP=INFINITE.

(Netscape Navigator doesn't recognize the BGSOUND command, so if you want to include a background sound for Netscape users, you have to use an <EMBED SRC="URL/filename.type"> tag, with attributes of HIDDEN=YES and AUTOSTART=TRUE.)

Getting a picture into your background, or a specific background color, is not done by a command or a tag, but by attributes in the page's <BODY> tag. For background color, use the attribute BGCOLOR="colorname"; for a background image, use BACKGROUND="URL_address/filename.type". Here's the BODY tag for this page that displays the ricepaper backgound:

<body background="graphics/ricegray.gif">

One thing that you should think about as you call elements into your pages: every time you call an image or audio, the browser has to open a connection to the server where it resides to call it, just like it does when you load a web page. If all of your elements are on the same server as your web page (for example, your page and all of your graphics are on Tripod), everything will start to load in as soon as the first connection is established.

But since WebTV can't upload, a lot of users call audio clips and many images into each page from servers all over the Net. This isn't a good idea for several reasons:

If you've got 5 images coming in from 5 different servers, for example, your page won't fully load until all of them have established connection and responded. Your page will load slooooowly, and there's a good chance that you'll have at least one broken link because a server is down or Web traffic is heavy.
Many of the "free" home page sites on the Web actually charge for very high volumes of bandwidth. When you call graphics and audio from another site, you're actually taking someone else's bandwidth, but they're not receiving any "countable" hits to their page. Tragically, some of the best artists on the Web have had to shut down their sites because they couldn't afford the bandwidth bills that came because hundreds of people "called" their images rather than copying them and uploading them into their own directories.

So, what do you do if you can't upload? Find a computer-using friend to do it for you. Use a public computer at the library. Go to Kinko's, where you also can scan your own photos and pictures and upload them. Use graphics from pages on your own server (check out the Resources for Images and Audio section for some addresses).

So, how are you doing, grasshopper? Are you getting the "zen" of how web pages work? When you eliminate the non-essential details and concentrate on the basics of what's going on, complicated things can suddenly become quite simple and understandable.

We've now covered the basic concepts and, if you just want to build a nice web page with a background, some pictures, some audio and some links, it's all you need to know. The knowledge you now have, plus an HTML manual with the details of the tags, commands and attributes, will give you the power to do some pretty cool web pages and show them off to the world.

However, if you have embarked on this journey with the intent of becoming a master, click here for the next meditation.

Dudette