Lab 3

Images
A vital part of the multimedia communication possibilities offered by HTML is the
ability to include images inline with the other content. This includes non-interactive pictures
as well as images that can be given a clickable user interface—anything from
a map to a navigation bar can be created using a simple image and some tags.
Firstly, you need to know how to insert an image into a Web page. This is broken
down into two stages—first you need to tell the browser that you want to insert
an image, and then you need to tell it where to find the image itself.
Assuming that the image is in the same place as the Web page, the generic form
for an image element is as follows:

<IMG SRC="image_name" WIDTH="width" HEIGHT="height" ALT="Image Text" BORDER=”0” Align=”left”>

The ALT attribute allows you to supply a textual description in case the browser is
unable to display the image or is not a visual user agent. For example, if the
interface is vocal, the image’s alternate text will be read out, because the image
itself cannot be displayed. The best practice, in order to be compliant with
standards on accessibility, is always to provide an ALT attribute. Plus, it makes for
better SEO—a search engine cannot index an image if it doesn’t know what it
displays.

Document Linking
The World Wide Web is an interlinked collection of documents and other resources. In
order to navigate between them, HTML defines elements called anchors. These anchors
point to other resources, and when the user clicks them, they open that resource in the
browser. There are two kinds of links:
• Link with an external target (external link)
• Link with an internal target (internal link)
Assume that you have a collection of pages where the first one is an index into the
others. Each of the other pages in the collection is a single subject, broken down
into sections. Using external and internal links, you want to build up navigation
between the topics covered in the collection of pages.
The generic form for an external link (which will be in the index page, linking to
other pages) is as follows:
<A HREF="target_page.html">Link Text</A>

You can also specify a link to a page that is in a different folder, relative to the one
that the source page is in:
<A HREF="target_folder/target_page.html">Link Text</A>
If the target page is on a different server altogether, the final possibility is:
<A HREF="http://www.mycom.com/target_folder/target_page.html">Link Text</A>

The next kind of link that you need in order to be able to use a small table of
contents at the start of each page is an internal link. These consist of a named
anchor within the page that provides a location that can be linked to. The general
form for this is as follows:

<A NAME="internal_ref_name">Anchor Text</A>

This snippet creates the named area that an internal link will point to, but it does
get rendered as a link by the browser. It is just a reference point. This kind of
anchor can be referred to from inside or outside the document. To refer to it
from inside the document, the following form can be used:
<A HREF="#internal_ref_name>Link Text</A>

Note that the # symbol is used, as it was in the client side imagemap, to create the
proper reference to the anchor. If you need to link directly to this point in the
page from outside the page, the external reference form can also be used:

<A HREF="http://www.mycom.com/target_folder/target_page.html #internal_

Map
The HTML code is designed to divide the image up into areas
that can refer to other documents. In the ‘‘Document Linking’’ section, you will
read how this works in more detail; for now, you just need to be aware that the
mechanism exists.
The areas of the map can be rectangular, circular, or irregularly shaped. In order
to be able to tell the browser what the shape is, you need to know the coordinates.
To get these, you need to load the image into an image editor and use it to
determine exactly where each corner (or the center of a circle) is located.
Figure 3.16 contains a sample imagemap that has a rectangle, circle, and polygon.
Next, you need to load your image into, for example, MS Paint. I’ve used that
for illustrative purposes because it is part of nearly every Windows system and
suits the needs here perfectly. Figure 3.17 shows where the coordinates can be
found.
In Figure 3.17, you will note that the image is zoomed in to help with accuracy.
The next step is to locate each corner of each shape and write them down. So, for
the image that I have used as an example, the coordinates would be:
For the polygon, you have to note each point on the perimeter, because it is
irregularly shaped. All that is left now is to encode the image and its map into
HTML. This is fairly repetitive, but straightforward:
<IMG SRC="imagemap.jpg" WIDTH="200" HEIGHT="200" USEMAP="#image_map">
<MAP NAME="image_map">
<AREA HREF="index.html" SHAPE="RECT" COORDS="13,16,83,90">
<AREA HREF="page2.html" SHAPE="CIRCLE" COORDS="58,147,32">
<AREA HREF="page3.html" SHAPE="POLY"
COORDS="108,31,158,51,181,155,139,147,103,65,108,31">
</MAP>
Table
A table consists of a start tag <TABLE> and end tag </TABLE>. Between these, it is
build up from a series of rows, which have a start tag <TR> and an end tag </TR>.
Inside those, there are a number of columns, or cells, each with a start tag <TD> and
end tag </TD>. The browser will not render the table until it has entirely loaded.
The basic structure of a table might look like the following HTML fragment:
<TABLE BORDER="1">
<TR>
<TD>Row 1, Cell 1</TD>
<TD>Row 1, Cell 2</TD>
</TR>
<TR>
<TD>Row 2, Cell 1</TD>
<TD>Row 2, Cell 2</TD>
</TR>
</TABLE>

<TABLE WIDTH="600">
<TR>
<TD COLSPAN="3" VALIGN="BOTTOM">
<CENTER>
<H1>Banner Would Go Here</H1>
[ Home | Latest Blog | About Us. . . ]
</CENTER>
</TD>
</TR>
<TR>
<TD WIDTH="150" VALIGN="TOP">
Menu<BR/>
Sub-menu<BR/>
</TD>
<TD WIDTH="300">
<!- - An empty paragraph to space it out,
with a double line break - ->
<BR /><BR />
<P>This is where all the glorious content
would go, if we actually had any.</P>
<P>Instead, we’ve put in this wonderful placeholder
that is more original than the fake Latin that most
people use instead of real text.</P>
<!- - An empty paragraph to space it out,
with a double line break - ->
<BR /><BR />
</TD>
<TD WIDTH="150">
<CENTER>
Sample<BR/>Advertising<BR/>Here<BR/>
</CENTER>
</TD>
</TR>
<TR>
<TD COLSPAN="3" VALIGN="BOTTOM">
<CENTER>
<I>Copyright Statement, privacy statement,
perhaps an additional menu here...</I>
</CENTER>
</TD>
</TR>
</TABLE>
I have introduced a number of interesting attributes in this HTML fragment, all
of which are vital in laying out the page properly. Firstly, the COLSPAN attribute
allows you to create cells that span several columns. This is used in the header
(banner and menu strip) as well as the footer (copyright statement).
You can only span as many columns as are available in the table. If a larger
number is used, the results are probably going to vary wildly between browsers.
Next, I have used the VALIGN attribute to make sure that the vertical alignment is
correct for the various cells that contain less content than the calculated cell
height.
The browser decides the cell height, and sometimes (as in the advertising pane)
the content will not be as large (in height) as the entire column. The default
behavior of browsers seems to be to center the content. So, to prevent this
happening for content that you want to be aligned otherwise, you can specify a
VALIGN value of:
n TOP
n CENTER
n BOTTOM

As you are probably starting to appreciate, leaving the default behavior (or
assuming any default behavior at all) for layout is inadvisable, so you should get
into the habit of always specifying the layout (alignment in this case) for HTML
where it is of importance.
Cells can also be aligned horizontally, using the ALIGN attribute, although it is
deprecated. Instead, I have chosen to use the <CENTER> tag to center the content
where appropriate.
The CELLSPACING and CELLPADDING attributes are used in the <TABLE> tag to set
the space between cells (spacing) and the inside margins (padding). You could
have used this to introduce whitespace in the previous fragment if, for example,
the left menu items began to creep towards the main content.