Index:
Images
There are two kind of images - pictures at the end of anchors, and pictures
embedded in the text.
There are many different formats of images.
GIFs and JPGs are the standards for the web.
The tag for an
image is a <IMG SRC="url">.
Url would be the "link" to the image.
This is a test image
<IMG SRC="http://www.gomasonry.com/images/gosnc3.gif">
Displays as:
This is a test image
What happens
- The file specified
by the SRC URL is fetched over the network.
- If the file is
a valid image file (in one of the many different formats), then the
image is displayed at the location of the <IMG> tag.
There are several
optional tags that can be used inside an <IMG>.
ALIGN:
Alignments
vary the position of the picture relative to the text. There are three
alignments defined:
-
<IMG
SRC="url" ALIGN=TOP> Aligns image at the top
-
<IMG
SRC="url" ALIGN=MIDDLE> Centers the image
-
<IMG
SRC="url" ALIGN=BOTTOM> Aligns image to bottom
ALT
Images pose
a problem for people with text mode browsers or using their browsers "Text
Only" mode. Pictures are shown as [Image] or
not at all. In order to help them make sense of pictures, there is a textual
alternative tag that tells the browser what to display when there are
no graphics available.
The general form
is <IMG SRC="url" ALT="text">
The text for the
ALT tag is displayed if needed.
<IMG SRC="http://www.gomasonry.com/images/gosnc3.gif" ALT="Gomasonry
Icon">
This displays
as:
In a text browser we get:
[Gomasonry Icon]
Buttons
Buttons are links containing a picture instead of text. Instead of a
text button like this:
[ <- Back ]
we can do it with an <IMG> tag where the text normally goes:
<A HREF="http://www.gomasonry.com"><IMG
SRC="http://gomasonry.com/images/gosnc3.gif"
ALT="Go to Homepage"></A>
This Displays as:
A few things to be aware of:
-
Always provide an
ALT string!
-
Try to use the same navigation graphics over and over so with every
page loaded, the navigation graphics are already loaded.
- Set
your image borders to 0. This eliminates the "border" around
the image.
<A HREF="http://www.gomasonry.com"><IMG SRC="http://gomasonry.com/images/gosnc3.gif"
ALT="Go to Homepage" border="0"></A>
A named
anchor is another way of marking a section of the document. Unlike normal
links, the named anchor names a target so that a link can refer
to it.
This means that other documents can now refer to particular parts of
this document directly. This is quite useful to be able to do.
The tag to do this is the <A NAME="name"> pair. The
closing tag is </A>. The way to refer to a named
anchor is to prefix the name with a # (hash mark).
The section title for this part of the document is defined like this:
<H1>
<A NAME="Anchors">Anchors</A>
</H1>
To
refer to this section we use a normal HREF anchor and append a #
hash mark and the anchor name, like this:
<HREF="url#name">
For example, the following refers to the above section name Images.
The <A HREF="http://www.gomasonry.com/webmasters/
AdvancedHTML.html#Images"> Images Topic</A> here.
Note
that the URL above is broken for readability only. It should really appear
as a single unbroken line.
The
Buttons Topic here.
We
can even do away with the document name entirely, if we are referring
to another part of the same document: <A HREF="#Images">...</A>
You can also name a section and link it to another document at the same
time:
This is <A HREF="tutorial.html" NAME="TEST">
a test section</A> in the advanced
HTML document
