Introduction
to HTML (Images and Links)
By Virtual Mechanics |
Last week I introduced
basic HTML concepts for those of you with little or no HTML
experience. This week I shall continue with several more advanced
concepts. As with last week's newsletter, my intent is not to
teach HTML. There are many excellent books on the topic. Two
tags in particular however, should be understood. These
are the Image and the Anchor tags. As with last week's article,
if you already have a good grasp of HTML please feel free to
skip to the next topic.
Basic HTML is comprised of series of Tags that instruct the
Browser on how to display the web page. If you recall, I mentioned
that an HTML page is separated into a <HEAD> component
with header information such as the title, and a <BODY>
component that contains the actual text and images to be displayed.
Numerous tags
are available for basic Page Layout and Header information.
These are always enclosed between the "<" less than and ">"
greater than brackets.
I have made reference to numerous tags in past articles. There
are two tags in particular however, that need to be discussed.
These are the Anchor and the Image tags. The Image tag is used
to place a picture on your web page. The Anchor tag is used
to create an HTML link to another web page or file.
The Image tag can display several different image formats in
most Browsers. The most common are GIF, JPEG, and BMP. What
are the differences between these formats and which is better
to use?
GIF images are highly compressed and will accurately maintain
the detail in a picture. The GIF format also supports a simple
frame animation capability that is very common on Web Pages.
The primary disadvantage with the GIF format is its limitation
to 256 colors. This makes it unsuitable when high quality multicolored
images are displayed.
The JPEG format provides extensive compression capabilities
at high color resolution. It also provides the ability to choose
between quality and compression when the file is saved. JPEG
is consequently the preferred format when large, high quality
non-animated images are to be displayed. The primary disadvantage
with the JPEG format apart from its lack of animation support,
is that its compression method may actually loose information.
This can
sometimes be seen in a JPEG picture as a halo near distinct
color changes within the picture.
BMP does not compress a picture at all and should consequently
be avoided if possible. In fact, a BMP picture can easily be
20 to 50 times larger than the equivalent JPEG picture causing
significant download times. The primary advantage with a BMP
is that it does not modify a picture or loose data. It is consequently
sometimes used
if a picture must be transmitted in its pure format without
modification.
Most Browsers also support several other image file formats.
Care should be taken however, that the file format is supported
by the majority of Browsers that are used to visit your site.
The Image Tag takes the form <img src="fileurl" Width=pixels
Height=pixels Alt="description" Border=Size Align=location Vspace=pixels
Hspace=pixels>. As with most tags, it is not always necessary
to enter all the components of the tag since the Browser will
provide a default value for those not entered.
Src=fileurl This attribute identifies the location of
the image file. If it is located in the same directory as the
HTML file then only the file name and extension needs to be
included. It is also possible to include the full URL path to
an image on another web site. Although this may seem to provide
some advantages, care should be taken before linking to someone
else's image. First of all they may not like you using their
bandwidth for your Web Site. Second, they may move or rename
the image causing your Web Page to display an empty box. Finally,
even though you may have the full co-operation and support of
the other Web Site, these types of external
links can slow down the download speed of your web page. This
is especially true if the other Web Site is on another server
that goes down a lot.
Width=pixels,Height=pixels These tags tell the Browser
what size to display the image (usually in pixels). If they
are excluded, the Browser will display the image at its actual
resolution. It is worth including these attributes even if you
are not scaling the image larger or smaller. This is because
the Browser will actually be able to display the picture faster
if it knows the resolution before it loads the picture.
Border=Size Sets the size (in pixels) of a border to
be placed around an image when it is used as an anchor (see
below). Specifying a size of 0 will disable the border. If omitted,
the Browser will place a 1 pixel border around the image.
Align = location, Vspace = size, Hspace = size. These
tags work best when the Web Page is being designed to work with
older Browsers. The Align attribute can be set to "LEFT" or
"RIGHT" and is used to position the image against the Left or
Right edge of the Browser window. Non CSS Text will then flow
around the image. The space
between the image and the text can be set with the Hspace and
Vspace attributes in pixels. As discussed in past newsletters,
the newer Browsers can now position text and Images under full
user control anywhere on the web page.
The other tag that should be understood is the Anchor tag. This
is used to create a link to another page or file. I have discussed
the Anchor tag several times in past issues so I shall be brief
here.
The format for the anchor tag is <a href="fileurl">...</a>
The href attribute identifies the address of the file. As
with the image "src" attribute, this can just be a local file
name in the same directory as the HTML file or it can be a full
URL link to a page somewhere else on the Internet. The file
is usually a HTML Web Page that ends with the file extension
".htm" or ".html". It does not have to be an HTML page however.
If the file extension is recognized by your computer it will
start the program that is assigned to handle it. A common example
is a "zip" file that will be
Opened or Stored to your local computer by the PKZIP or WinZip
programs. Another example could be an image file that will often
be displayed by your Browser or paint program.
The anchor tag is delimited by the </a> end anchor
tag. Text between the first part of the tag and the </a>
will be highlighted so that the user can select it to activate
the link. Instead of text, you can also use a picture to activate
the link by placing the Image tag between the two parts of the
anchor tag.
<a <img
click
here </a>
is9fig1
A combined text and picture link
Next week, more advanced HTML topics.
Source: "IMS Web Tips" is a weekly news letter for
all web site managers regardless of experience who are looking
for detailed information on creating, maintaining and promoting
their web sites.
To subscribe send an email to join.imswebtips@list.imswebtips.com
or visit www.IMSWebTips.com
for subscription information and a list of past articles.
More Articles
|
.
|
|
[an error occurred while processing this directive]
|
|
|
|
|
