All right, now we get to the very heart and soul of webpages: Images and
Links. Actually, from a purist viewpoint, an image on a webpage is just a
link, as well. But, for simplicity's sake, we will refer to an
image as an Image, and a link to another webpage or document as a Link.
I don't know exactly why Simplicity wanted it this way, but she asked me to,
so I'll humor her, 'cause I'm such a nice guy!
The power of web pages for quick accessing of information lie in the
document's ability to link itself to another related document. If you came
across a link to another document while reading a book, you would have to
put the current book down, locate the new document, open it, and find the
appropriate location in it. Then, you would have to put it back, return to
your original book, pick it up, and locate where you were when you left off.
If you're extremely lucky, you would have been able to find the second
document in the same building, and nobody would have made off with your
original book while your back was turned. Well, welcome to the Web...
we can do things easier, faster, and better than the rest!
Links to other Web Pages on your Website
Most of the time, web pages start out pretty small. But, you keep finding new
and exiting things you want to share with the world, until all of a sudden,
one day, you load your webpage into an editor, to add some tidbit of information,
and you get a [File too big] or similar error. It's time to break this monster
you created into smaller pieces.
Or, maybe you're just so cool and neat and organized that you had this all planned
out from the beginning. But....how are you going to "hook" all these pages together?
Why, I'm SO glad you asked...We'll just place an active
link within your main HTML page, and configure it to jump out and retrieve one of the
secondary pages. When the user is done with it, they can, with a
single [Back] click, return right where they were on your main page.
To accomplish this veritable miracle, we use the <A HREF="">
and </A>
HTML tags. Let me show you how it's done. Walk this way.....:
<A HREF="page2.html">Go to Page 2</A>.
This is a simple link to take you to a document called "page2.html".
All the user will see on their document is the words "Go to Page 2".
But, when they click on it, their browser hops right up, goes out,
loads up page2, and puts it on the screen.
Links to other Web pages on your Website Tips:
- Many web servers (The computer that is physically hosting your website)
are case-sensitive, so when you make a link to "page2.html" and the page is
actually named "Page2.html", guess what? The link won't work! Be sure that
the case and spelling of your links exactly match the names of the HTML files.
Links to Web Pages on other Websites
We are not just limited to making links to other Web pages on our own Websites.
We can put links on our pages to any other document on the Web. All we need to
know is the URL and webpage file name. So now, you can really send your web
viewers on a really wild roller-coaster ride through cyberspace!
The HTML tags for links to other websites are just the same as a link to another
page on your website - the only difference is we have to add the entire URL name
of the page as well as it's name. Allow me to demonstrate...and participate in
some Shameless self-promotion by using my site as an
example:
<A HREF="http://www.oocities.org/CapeCanaveral/7704/trvths.html">
Click Me!</A>
When the poor, unsuspecting viewer would have clicked [Click Me!] in the above
example, they would have immediately been ensnared in the trap of intrigue that
is one of my pages. If I hadn't included the full URL here, the browser would have
looked for a "trvths.html" page on your own site, and given you an error message
when it failed to locate it.
Links to Webpages on other Websites Tips:
- Before I go, I'll treat you to a handy parameter in the link statement.
Sometimes, for reference purposes, you'd like to open up a secondary page
in a second browser window, so you can switch back and forth between the two.
This is handy for copy..ah, I mean "research". There is a handy little thing we can
code inside the <A HREF=""> HTML tag, to tell
the browser to open the document in a new browser instance. Don't worry, I would
never leave without giving you a handy example. So, for all of you who
were clamoring farewells, I'll label it "Much Adieu About Nothing"....:
<A HREF="http://www.oocities.org/CapeCanaveral/7704/trvths.html"
TARGET="_blank">Click Me!</A>
Now, the original browser and current browser will remain undisturbed, and the
new page will open up in a new copy of the browser. Cool, Eh?
- The Second Mouse always gets the Cheese!
Internal Links
Sometimes, when you have a large web page, you might want to make it easy
for your viewers to jump around your page, something like the "Table of
Contents" we have at the top of this page. It's very easy to set up, and
it can really be a great help when navigating around your page. Trust me --
have I ever steered you wrong? Yet?
There are only two statements required to do this - the
<A HREF=""> - </A>
and <A NAME=""> tags. The thing that
"hooks them together" is the name we put inside the quotation marks. Let's
rip apart one of the internal links I use on this page, to see how it works.
Trust me - I used to do this all the time; my sisters never had any working
toys all the while we were growing up. You see, putting them back together
was a bit trickier...:
<A HREF="#internal">Internal Links<
/A>
(lotsa pages of other stuff)
<A NAME=internal>
And there we have it! As soon as you click on the [Internal
Links] text, you jump down to the place in the page where the
<A NAME=internal> is. We call that second HTML tag an Anchor.
Now, there isn't anything visible with the anchor; you can't see it with the
browser. It just tells the browser to scroll up or down to where whatever the
first visible object after the anchor is at the top of the screen.
Internal Links Tips:
- If you use internal links to allow the viewer to jump around on your page,
it's a good idea to group the links together into a type of "Table of Contents"
or "Index".
- You can have any number of links go to a single anchor. In fact, if you have
a number of internal links, it's a good idea to add an anchor to the table of
contents itself, and end each section with a link to go back to the top.
Images in your Webpages
Whoever said "A picture is worth a thousand words" either participated in a
long, drawn out civil litigation involving a motor vehicle accident, or was an
expert in blackmail.... Anyway, we're going to go over placing images in webpages,
and have some fun doing it, too! That's one of my rules.
The key HTML tage we use for images is the <IMG SRC="">.
There is no closing tag associated to the Image tag. Within the quotes, we put the
exact name of the image file. If you want any browser to be able to view your image,
you should only use images of a .GIF or a .JPG format. A few browsers
can display .BMP files, but not many. And, that also goes for .ART
files, for you America Online users. If the image file is on your website, you can
just specify the name of the file. Otherwise, you'll have to put the full URL in
front of the file, like this:
<IMG SRC="http://www.oocities.org/gc_icon.gif"
>
Of course, you can spell out the full URL for images on your website, if you want to.
I wouldn't dream of stopping you....
Return to the Table of Contents
Images - ALT option
Let's look at another handy little feature within the <IMG
SRC=""> HTML tag: the ALT="" parameter. You see,
ten years ago, if you'd have exclaimed "I was surfing the Web last night, and it just
crawled, it was so slow!" in mixed company, they would order you a nice, tight
jacket with lots of buckles and straps, and one big sleeve right across the front.
Unless you lived near a coast, of course, which in that case, they'd assume you'd just
taken your medication, and were referring to "shooting a curl" or "crashing a tube"
or some other surf-board related activity. But nowadays, you'll find many a head
nodding in sympathy, sharing your frustration. Well, we can use this little parameter
to Reduce World Frustration! It's not quite like Reducing World Hunger or anything,
but it's still a good start. What it does is simple: while your images are
laboriously working there way into the viewer's browser, bit by bit, through the
Information SuperTrafficJam, it kindly displays a little text label giving the
viewer a teaser of what the image is. Let's go look!
<IMG src="//www.oocities.org/gc_icon.gif" ALT="GeoCities
Icon">
That way, while the image is loading, the space where the image will go has the words
[GeoCities Icon] in it. It's A Beautiful Thing! I mean, if an image is worth a
thousand words, then a few words to describe that image ought to be worth more than
just a few words by themselves, right?
Return to the Table of Contents
Images - HEIGHT and WIDTH options
There's another set of parameters to the <IMG SRC="">
HTML tag that show how considerate and caring you are to your viewers.
These are the HEIGHT and WIDTH
parameters. In addition to making the page load faster, these parameters also
let you define the exact size and shape that your image will be displayed as.
You can take a large image, and shrink it, stretch it, or grow it, as you please.
I think it's example time, don't you?
<IMG SRC="mouse.jpg" WIDTH=100 HEIGHT="62">
This image's actual size is 320 pixels wide and 200 pixels high, but the
prior HTML statement would display the image as a 100-pixel by 62-pixel image.
You cam just as easily make a small image appear bigger, by making the Width
and Height attributes larger than the actual image size, although the image
will quickly get all "fuzzy" and out-of-focus looking that way.
Prettyneat, huh?
Return to the Table of Contents
Images - ALIGN option
On many occasions, we have an image and some associated text on the same
line. There is another attribute of the <IMG SRC="">
HTML tag that we can use to instruct the browser how to align the
text and image together. That is the ALIGN=""
attribute tag. The available options that go in the quotes are
ABSBOTTOM, ABSMIDDLE, BASELINE
, LEFT, MIDDLE,
RIGHT, TEXTTOP, and
TOP.
Let's look at examples of these options, and see what the code does:
<IMG SRC="help.gif" ALIGN="ABSBOTTOM">This option will
align the bottom of an image with the bottom of the lowermost text on the same
line.
<IMG SRC="help.gif" ALIGN="ABSMIDDLE">This option will
align the horizontal centerline of the image with the horizontal centerline
of the text on the same line.
<IMG SRC="help.gif" ALIGN="BOTTOM">This option will
align the bottom of an image with the baseline of the text on the same line.
This is the default setting if none is specified.
<IMG SRC="help.gif" ALIGN="MIDDLE">This option will
align the horizontal centerline of the image with the baseline of the text
on the same line.
<IMG SRC="help.gif" ALIGN="TEXTTOP">This option will
align the top of the image with the top of the text on the same line.
<IMG SRC="help.gif" ALIGN="TOP">This option will
align the top of the image with the top of the tallest text on the same
line.
Notice how once each line was full, these option did not wrap the additional
text around the image, but dropped it down to a new line. You'll want to
remember that, when combining images and text on the same line. Now, let's
look at two more examples, and see how they treat additional text:
<IMG SRC="help.gif" ALIGN="LEFT">This option will
align the image with the left margin of the working space on the line.
<IMG SRC="help.gif" ALIGN="RIGHT">This option will
align the image with the right margin of the working space on the line,
even though the image is before the text in the HTML code.
You see how once the first line was full, the text wrapped around the image,
and created a second line under the first? These two alignment options
allow you to flow your text around an image just like in a newspaper or magazine
setup. These options are not limited to images and text - they will also effect
two or more images on the same line, as well. Or images and links....
Return to the Table of Contents
Email Links
On almost every webpage, you want to have a way for the viewer to contact the
Webmaster (Yes, that's YOU - Aren't you proud? You should be, you're working
hard to learn this stuff!), for any number of reasons - in case they find an
error, or a broken outside link, or they have additional information, or
questions, and sometimes, they just want to tell you what a great job you did
on your page! Now, anybody can laboriously spell out "Email me at
meet_me@st.louis.com", but we can do better than that! We can make a link that,
when clicked, automatically takes them to the [Compose Email] form on their
browser, with the email address already entered in for them! Go ahead, try it,
Click This! It's really simple = let's
check out how we do it:
Hi! <A HREF="MAILTO:computerthug@oocities.com">
Click Here </A> to send me email!
And, remember above, how we talked about putting a IMG
tag inside of a A HREF TAG, to make an image a link?
There's literally hundreds of [Email] images out there, to spiff up your page.
Return to the Table of Contents
Music File Links
I'm going to cover just ONE more thing, because you have been such a great
reader. Let's look at how we can make a link to an audio file, so that you can
treat your viewers to some music of your choice, if they have sound on their
computers. There are a number of audio file formats floating about on the
internet, but most of them require specific plug-ins to work, so I'm just going
to deal with the two most basic types - MIDI and WAV files.
WAV Files
The only method I'm familiar with to play a WAV file does not allow you to
show a visible "controller" on your web page, so it will automatically
play each time the web page is brought up. However, you can control how
many times the sound is repeated. To play a WAV file, we use the
<BGSOUND SRC=""> HTML tag. For a more
specific example, let's say you have a WAV file uploaded on your site named
aooga.wav. If we wanted to play the file once
each time the page loads, we would code it like this:
<BGSOUND SRC="aooga.wav" loop=1>
MIDI Files
There are two ways we can play MIDI files: with or without a visible
"control" to let the user start and stop the file. One way uses the built-in
capacity of the browser to play MIDI files, and the other relies on an audio
file plug-in. Let's say we want to play our
"be_happy.mid" MIDI file continuously. To play it without using a
visible controller (which is part of the audio plug-in), we code it almost
just like we did the WAV file:
<BGSOUND SRC="be_happy.mid" loop="infinite">
If you wish to display the plug-in's audio control, to allow the user the capacity
to start and stop the playing of the MIDI file, then you need to use a different
HTML tag - the <IMBED SRC=""> tag. It more or
less passes control of the MIDI file to the audio plug-in, and gives both you
and your page viewers more flexibility. Let's look at how to code the same
MIDI file we mentioned above:
<EMBED SRC="be_happy.mid" autostart="true" loop="infinite">
This will automatically start the MIDI file, and play it continually, but the
midi control will be displayed on your page where you placed the statement, so
the viewer can click the [Stop] button anytime, and also restart it by clicking
the [Play] button. You can change the autostart="true"
to "false", and the file will not start until the user
clicks [Play]. There are a number of other parameters available, but they depend
on the specific plug-in your viewers are using, so I'm not going to go into them here.
Tips on using Audio Files:
- Beware of using large WAV files! WAV files are much larger than comparative
MIDI files, and the loading of your page will be additionally delayed by the
size of the WAV file you select. So, don't leave your viewers hanging, trying
to load a large WAV file, or the chances are good that they will give up and
move elsewhere before seeing anything on your page.
- If the user does not have an audio interface, or an audio plug-in registered
with their browser, and you use the <IMBED> tag, an error message will pop
up, whereas if you use the <BGSOUND> tag, the browser will just (quietly!)
ignore it. Much more user friendly!
Return to the Table of Contents
Get your own free page!