Advanced HTML
Taking Your Pages to the Next Level
Jim Hamlin
This page left intentionally blank.
Introduction
Advanced HTML
Taking Your Pages to the Next Level
Jim Hamlin
This page left intentionally blank.
Introduction
HTML Overview - Getting Things Started
Coding Structure
HTML Markup
Attributes
Markup Syntax Must be Exact
Document Components
Defining a document
Header
Body
Footer
Layout and Format Components
Layout commands
Line Breaks
Horizontal rules
Address format
Paragraphs
Format commands
Boldface
Italic
Emphasis
Keyboard text
Blink
Short Citation
Source Code
Sample text
Strong emphasis
Typewriter text
Variable
Headings
Exercise
URL
Naming and Linking
Naming regions of your document
Exercise
Adding Graphics
Graphic Formats
JPEG
GIF
Adding Graphics to Your Page
Providing an Alternate
Wrapping Text Around Your Graphic
Graphic Links
Sizing an Image
Exercise
Basic Lists
Numbered lists
Unordered lists
Definition lists
List Headers
Nesting lists
Exercise
Basic Tables
Basic Elements
Adding Borders
Adding Headers
Exercise
Adding a Title
Applying Text Formatting
Cell Alignment
Exercise
Cells Which Span Columns and Rows
Exercise
Image Maps
Creating an Image
Exercise
Creating a Map
Products
Map THIS!
MapEdit
MapMaker
WebMap
Web Hotspots 2.0 / 3.0
Using Map THIS!
Load the Image
Define Clickable Regions
Define Region Settings
Saving the Image
Working More Effectively
Exercise
Adding a Map to Your Page
Exercise
Supplemental Exercise
Compatibility Considerations / Alernatives
Compatibility Considerations
Exercise
Using Multiple Graphics
Exercise
Client Side Image Maps
SpyGlass Style Image Maps
HTML 3 Figure Image Maps
Changing Font, Color, & Background
Changing your background
The background color
Exercise
Using an image instead
Exercise
Font Size
Creating a Base Font for Your Document
Changing the Font
Exercises:
Changing Font Color
Exercise
Changing Font Face
Exercise
Adding Colors to Your Table
Exercise
Sound and Animation
What was that? Adding Sound to Your Page
Exercise
Playing Inline Animation
Exercise
Extra… Extra… Scrolling Marquee…
Controlling the Scroll
Exercise
Changing the Color
Exercise
Changing the Size
Alignment of Text
Exercise
Utilizing Forms
What is a Form?
Defining a Form
Form Submission
METHOD=GET
METHOD=POST
Submit and Reset
Exercise
Using a Test Server
Exercise
Form Controls and Characteristics
Text Entry Fields
Exercise
Changing the Characteristics of Your Text Entry Fields
Exercise
Applying Default Values
Exercise
File Attachments
Exercise
Check Boxes
Exercise
Radio Buttons
Exercise
Password Entry Fields
Exercise
Combo Boxes (Option Menus)
Exercise
Selection List Boxes
Exercise
Multiline Freeform Text
Exercise
Hidden Elements
Exercise
CGI
Introducing CGI
Environment Variables
Input Streams
Output Streams
Perl CGI Scripts
cgi-utils.pl
cgi.pm
C/C++ CGI Programs
CGI Alternative - Mail it
Placing the Program on the Server
I've Been Framed!
Frame Documents
Targets
Extending Frames
Nesting Frames
Imagemaps In Frames
Adding Life to Your Page With Animated GIFs
What is an Animated GIF?
What makes up a GIF?
Header
Logical Screen Descriptor
Loop
Control
Image
Comment Block
Trailer
Animation Tools
Tools
GIF Construction Set
GifBuilder
GIFMation
PhotoImpact GIF Animator
Using GifCon to Create Animation
CGI Input and Output - C
Server Environment Variables
Common Variables
Additional Variables
Useful URLs
Style Guides
Icons
Background images
Web color utilities
HTML design pages, more info!
Table Exercise
The purpose of this courseware is to introduce you to some of the more advanced commands and features which allow you produce more professional and effective documents on the World Wide Web, one of the most popular resources on the Internet. Upon successful completion of this courseware, you will be able to:
HTML is a very broad markup language which can be used by a variety of different Web browsers. This courseware presents some of the advanced features which are compatible with most browsers. This courseware will also investigate some of the "extensions" which can only be used with particular browsers and touch on some of the new features proposed in HTML 3. Additionally, you will be introduced to some of the other tools which can be used to help make your document more sophisticated.
This course assumes you have a basic understanding of the Internet, Microsoft Windows, and basic HTML markup. Exercises presented in this book are result oriented. Exercises in this book instruct you what needs to be done, not the steps to do it. By reading through the section carefully, all information needed to complete the exercises is available. If in doubt, try it in your browser! There's nothing wrong with a little experimentation… J
HTML Overview - Getting Things Started
This section is designed to ensure that you are sufficiently acquainted with HTML syntax and many of the basic HTML tags. This section also covers many of the new features offered with HTML 3. This section will focus on:
The HTML language consists of a number of special text tags used by the browser to setup the document, format text, and establish links to Internet resources.
Tags are very similar to the way you would structure a word processing document. For example, special codes are used to denote a boldface font. In order for the document to know which text to boldface, you must mark the beginning and end of the text. Tags work in very much the same way: you must tell them where to begin and where to end.
Since HTML documents are purely text, unlike word processing documents, you must provide the WEB browser a means by which to identify tags. This is done by enclosing the command within angle brackets: "<" and ">". For example, the force line break would be <BR>.
The force line break is one of the few examples of HTML codes which do not require a corresponding closing code. Many of the tags require you to tell the browser where to end. This is accomplished by using the same tag but only with a "/" beginning the command. Using the example above, boldfacing some text can be accomplished by placing a <B> at the beginning and </B> to close.
<B>This is bolded text</B>
Tags are not case sensitive: <HTML>, <html>, and <HtMl> are all equivalent. Text within tags is displayed as is typed. However, any spaces which are contained with the text are only displayed as a single space, regardless of how many spaces are used.
It is important to note that markup tags can be nested within one another. Again using the example above, you could pose the question: What if I wanted to create a forced line break with some bolded text? You could of course do this:
<B>This is the first line of bolded text.</B><BR>
<B>This is the second line of bolded text.</B>
However, by using nested tags, you could eliminate some of the tags required to accomplish the same task:
<B>This is the first line of bolded text.<BR>
This is the second line of bolded text.</B>
All of the tags within the HTML language have default characteristics. In order to change those characteristics you must change the tag’s attributes. This is done through the use of predefined attribute commands, with each tag having its own set. For example, the default behavior of the horizontal rule tag can be changed. You can adjust its alignment, length, thickness, and even its shading.
For example, if you wanted to create a thicker left justified centered horizontal rule with a width of 100:
<HR ALIGN=LEFT SIZE="5" WIDTH=100>
As you can see, attributes are enclosed within the angle brackets.
Browsers rely on one thing: the recognition of tags. If a browser is unable to recognize a tag, it plainly does not understand it. Browsers are very simple in the way that if they do not understand a tag, they ignore it. Right now you may be asking yourself: why a browser would not be able to understand a given tag? Two of the most common reasons why a browser would not recognize a tag are:
Some browsers, such as Netscape, have their own enhancements to the HTML standard. These enhancements are usually supported only by the browser for which they were created. For example, many Netscape enhancements do not work with Mosaic browsers.
Problems with the tag’s syntax can be caused by a variety of reasons. You may have spelled the tag incorrectly, you may have used attributes which are not associated with that tag, you have nested tags within a tag which does not support nesting of that tag, or extra characters are added to the tag which make its recognition impossible.
Some tips to help you to avoid making these mistakes include:
HTML documents, similar to normal word processing documents, ideally consist of a header, body, and footer.
Each of the three sections make up a single HTML document. For some browsers to respond correctly to your markup commands, you must identify a document as an HTML document. This is accomplished through the use of a tag. The <HTML> tag is used to show the start of a document and a corresponding </HTML> tag is used to denote the end of the document. Although many browsers do not require you to use this tag, it is a good idea to include it for compatibility reasons.
A header is used to define information about the document itself. This includes the document’s name, default font, background color, and others. Defining a header for a document is actually quite simple. All that is required to define a header is to enclose the header information the header tag starting with <HEAD> and closing with </HEAD>.
The name of the document, or the document’s title, is the title which is displayed in the title bar of the browser. A document’s title is defined within the HTML title tag: <TITLE> to begin the heading and </TITLE> to signify its close.
The body contains the information which you want to convey to the user. This is accomplished through the use of text, media, and links to other documents. The body of a document is represented with the markup tag <BODY> and since it acts on a set of data requires a closing tag </BODY>.
The footer, although not formally defined as part of a document, is typically included at the bottom of the body. The footer usually contains the author, copyright information, date of creation, and version number.
Here is an example of an HTML document describing the above elements:
<HTML>
<HEAD>
<TITLE>Sample Web Page</TITLE>
</HEAD>
<BODY>
<CENTER>
<ADDRESS>
For questions or comments about my WEB Pages, please EMail
<A HREF="mailto:jdoe@somecompany.com">jdoe@somewhere.com.</A>
<BR><BR>
John Doe<BR>
Some Company Corporation<BR>
#000 - 00000 Some Address<BR>
Somewhere, Prov. Canada X9X 9X9<BR>
Tel: (604) 999-9999 Fax: (604) 888-8888<BR><BR>
Copyright © 1995 Some Company Corporation<BR><BR>
Revised: October 1, 1997<BR><BR>
<B>URL:http://somecompany.com/accounts/jhamlin/default.html</B>
</ADDRESS>
</CENTER>
</BODY>
</HTML>
There are a number of layout and format tags which can be used to change the attributes of the text and to control the text flow within the document.
HTML layout commands help you break the text flow and create divisions in your document. Two commands which help you do this are the line break tag and the horizontal rule tag.
An HTML browser will always attempt to fit as much text on a line before it wraps to the next line. This is good in most cases, but what if you wanted to ensure that a line break occurred after a certain point? The solution would be to make use of a line break tag to tell the browser that even though there is room for more text on the current line, skip to the next line anyway. The tag used to perform this action is <BR>. (A closing tag is not required in this case as this command is a one time only type of command and does not act on a range of text.)
This line will keep wrapping and wrapping to the size of browsers view area until a formal line break is sent. A line break will force text following the break to the next line.<BR>
Another line, somewhat shorter.<BR>
Another line, somewhat shorter.<BR>
A horizontal rule is a horizontal line used to separate sets of text or links. This line, generated by the tag <HR>, is typically a couple of pixels wide and is shadowed.
The horizontal rule has a number of attributes which allow you to change it's default behavior. Attributes include alignment, width, size, and shading:
|
ALIGN=(LEFT|RIGHT|CENTER) |
Change alignment |
|
NOSHADE |
Eliminate shading of horizontal bar |
|
SIZE="size" |
Number used to define vertical width. Valid values are from 1 to 7 |
|
WIDTH=(number|percent) |
Used to define the exact width in pixels or the percentage of the line that the rule is to occupy |
<HR ALIGN=LEFT SIZE="5" WIDTH=100>
<HR WIDTH=50% NOSHADE>
The address format is used to denote information about the HTML document. This information is typically enclosed as part of the footer and consists of information such as the author’s name, address, signature file, and contact information. The <ADDRESS> tag is used to start the address format and the </ADDRESS> closes the address format. The address tag is typically enclosed within the <BODY> of a document, and can contain many other tags including <A>, <BR>, <P>, and many others.
<CENTER>
<ADDRESS>
For questions or comments about my WEB Pages, please EMail
<A HREF="mailto:jdoe@somecompany.com">jdoe@somecompany.com.</A><BR>
<BR>
Copyright © 1997 Some Company Corporation<BR><BR>
Revised: January 1, 1997<BR><BR>
<B>URL:http://somecompany.com/accounts/jdoe/default.html</B>
</ADDRESS>
</CENTER>
You would use a paragraph in a Web page for typically the same reason you would use a paragraph in printed information: to separate ideas or concepts into distinguishable divisions. The paragraph tag will cause a line break followed by an additional line. The paragraph is a singleton tag in that it does not act on a range of text. The markup to create a paragraph division is <P>.
What is this you may ask? What exactly are we trying to demonstrate? Why it is one of our useful tags known as the paragraph. You will notice that the paragraph tag makes a paragraph which resembles what a paragraph would look like in a printed document. A line break from the current line followed by a blank line is symbolic of the paragraph.<P>
What is this you may ask? It is the second paragraph. It is not as long though.
There are many tags used exclusively to manipulate the characteristics of the text displayed on the screen. Since this family of tags acts on a given set of text, both opening and closing tags are required. These tags can be used to change the attributes of the text by adding bold, italics, and emphasis. In addition, the font itself can also be changed to reflect a particular type of text.
The boldface tag changes the text enclosed within its starting tag and closing tag to become bolded. The tag is started with a <B> and closed with </B>. This tag should be used when you want to draw attention to specific words or sentences.
This is <B>bolded</B> text.
The italic tag makes the text which is enclosed within the start <I> and the </I> appear in italics.
The time to strike is when <I>the opportunity presents itself.</I>
The emphasis tag changes the characters enclosed within to appear emphasized. (This is very similar to making text italics.) This tag is started with <EM> and is closed with </EM>. It should be noted that when you want something to appear different from the rest of the text on the screen, the emphasis tag should be used rather than the italics tag. This is because some users set their browsers to emphasize text in a different color rather than the default of italics.
this system is <EM>fully</EM> customizable
The keyboard text tag changes the characters enclosed to signal to the user that it is text which is typed at the keyboard. This tag is started with <KBD> and closed with </KBD>. This text is typically displayed as courier, common to many text based display systems.
If you want to copy all the files from your current directory to your floppy, one way is to type:<BR>
<BR>
<KBD>COPY *.* A:\</KBD>
The blink tag changes the text characteristic to blinking for any text enclosed. Although various browsers will support this tag, note that this tag is a Netscape extension. The tag is started with a <BLINK> and closed with a </BLINK>.
<BLINK>Look at this text blink!</BLINK><BR>
The short citation tag produces a different font which is characteristic of citations in printed documents. The tag is started with a <CITE> and closed with </CITE>. The citation command will typically be used to show a citation or a reference to other data sources.
From <CITE>The HTML Handbook</CITE> by John Doe, 1995.
The source code tag is useful if you have documents which include snippets of source code. This tag will change the font to a type which resembles a font often used when source code is printed. This tag is started with <CODE> and closed with </CODE>.
The following code is an example in C++ which demonstrates output:<BR>
<BR>
<CODE>
void main() { <BR>
cout << var1 << var2; <BR>
} <BR>
</CODE>
The sample text tag is used for literal characters or to represent the output of a program. This tag is started with <SAMP> and closed with </SAMP>.
Typing an unknown command at the command prompt on an MSDOS will often result in:<BR>
<BR>
<SAMP>Bad command or file name</SAMP>
The strong emphasis tag is used when you want to bring attention to particular words within the text of a document. The strong emphasis tag is started with <STRONG> and closed with </STRONG>. It is recommended that use of this tag is limited to words which need to stand out. Overuse of this tag will nullify the effect.
There was <STRONG>absolutely no</STRONG> reason to respond in that fashion.
The typewriter (teletype) tag is used when you want text which is monospaced. This type of text typically is shown in block courier and is used with text you want to appear output from a line printer of typewriter. This tag is started with <TT> and is closed with </TT>.
If you were to redirect the output of a directory listing to the printer, the result would be: <BR>
<BR>
<TT>
Volume in drive C is MSDOS <BR>
Volume Serial Number is 12D8-3C33 <BR>
Directory of C:\ <BR>
</TT>
The variable tag is used to indicate to the users that this is information which they must supply. For example, if you were describing a command line utility for DOS or UNIX, the parameters which the user should supply would be formatted with the variable tag. This tag is started with <VAR> and is closed with </VAR>.
The syntax for the delete command in DOS is: <BR>
<BR>
<CODE>DEL</CODE> <VAR>filename</VAR>
Headings, similar to text formatting commands, are used to help make your document easier to read. However headings are different from formatting commands as they offer structure for your document. Headings are used to logically divide sections of your document to assist transition from one topic to the next.
The heading tag is used to format a particular range of text, which requires the use of and opening and closing tag. The opening and closing tags used to create headings are <H#> and </H#> where "#" can be a number between "1" and "6". (Levels "1" to "6" range from largest to smallest).
<H1>Level One Heading</H1>
<H2>Level Two Heading</H2>
<H3>Level Three Heading</H3>
<H4>Level Four Heading</H4>
<H5>Level Five Heading</H5>
<H6>Level Six Heading</H6>
A Uniform Resource Locator (URL) is used to instruct the WWW browser how to connect to an Internet resource. A URL represents the type of resource and the exact location the resource can be located at. The URL’s syntax for an HTML file is:
aaaa://bbb.bbb.bbb:cc/ddd/ddd/ddd/eee#fff
aaaa: Data source / protocol / access method
This specifies the mechanism used to access the data which exists at the link. Recognized links include:
ftp:// Use the FTP (File Transfer Protocol) to retrieve a file.
gopher:// File system index accessed through the gopher protocol.
http:// A hypertext HTML document.
mailto:// Send email to a particular address using a predefined form generated
by the browser.
news:// Points to a USENET newsgroup or article name.
telnet:// Links to a remote system using the login arguments passed.
WAIS:// Points to a Wide Area Information Server on the Internet.
file:// Points to a locally accessible file (local disk system).
https:// Hypertext Transfer Protocol (Secure)
Here are some others (these are not commonly used in your documents):
nntp:// Local Network News Transport Protocol
cid:// Content identifiers for MIME
mid:// Message identifiers for electronic mail
afs:// AFS file access
prospero:// Prospero link
x-exec:// Executable program
//bbb.bbb.bbb Domain name / node
The domain name or internet address where the resource is located. The default is the current computer.
:cc Port
The process address a Web session needs to connect with. Most of the time it is 80, which also happens to be the default. If you want to use the default, the port can be omitted.
/ddd/ddd/ddd/ Path
This represents the resource’s path on the server. This path can include directories and subdirectories.
eee Resource name
The resource name is the actual name of the object which is to be connected to.
#fff Arguments
Arguments can be used to pass parameters to a program or can be used to locate a particular spot in an HTML document.
Links to Internet resources are accomplished through the use of an HTML tag. This tag, known as the anchor <A>, provides a method for the user of a page to make hypermedia links. The anchor tag can be used to define a "link to" or can be used to define a destination; these also happen to be the minimum attributes which can be used with this tag.
In order to "link to" using the anchor tag you are required to use the HREF attribute. The HREF attribute is used to define the Internet resource which you wish to link to. The syntax of the HREF attribute is simply HREF="URL". The URL can be any Internet resource which you wish to provide a link to. For example, if you wanted to provide a link to the Netscape home page:
<A HREF="http://home.netscape.com/">Netscape Inc.</A>
The words "Netscape Inc." in this particular example are used as the anchor to the home page at home.netscape.com. The text is visually changed through the use of color to indicate to the user of the page that the text "Netscape Inc." is an anchor.
Defining a destination is used within web pages to further subdivide the document. With anchors, you can specify various points throughout the document which the user can jump to. This makes it easier to locate specific information within a document from the document itself or from another document.
Naming regions of your document
Some web document designers like to maintain larger documents rather than having many smaller documents. It is reasonable to assume that a larger document would resemble a similar logical structure to the smaller document method: the document would contain a table of contents and the associated data. The solution is to use internal links within a document. By providing internal links, the user can quickly jump to particular points in the document. Links at jump points should also be provided to related points and the table of contents.
This process of providing internal links, known as intra-document linking, is performed using the anchor, <A>, tag. The first step to setting up an intra-document link is to establish a name for the beginning of text you want to jump to. This is done using the extension NAME, whose syntax follows: NAME="thename". As with other tags, you must remember to provide the closing </A> at the end the text you wish to name.
<A NAME="Subject1">This is subject 1.</A>
In order to make it possible for a user to make a jump you must provide an anchor to that point. This is also performed using the anchor tag. However this time you must provide a jump mechanism to the named point. The extension which is used to perform this is called HREF, whose syntax follows: HREF="URL". As noted earlier, a URL represents a network resource such as another page, FTP, Telnet, etc. What we want to do is connect to a web page. (The syntax of the URL is: "locationandnameofpage#nameoftext".) However, we want to connect to the name of a point on the page we are currently on. To accomplish this, simply omit the name and location of the document (or you can specify the name and location of the current document if you like typing. J )
<A HREF="#Subject1">(Subject 1)</A>
Some style guides recommend that the text which is to be used as the anchor, in this particular example "Subject 1", be placed in brackets to represent an internal jump. The following is an example which demonstrates the use of the anchor tag when creating a table of contents for your document.
<HTML>
<HEAD>
</HEAD>
<BODY>
<H2><A NAME="TOC">Table of Contents</A></H2><P>
<A HREF="#Topic1">Topic 1</A><BR>
<A HREF="#Topic2">Topic 2</A><BR>
<A HREF="#Topic3">Topic 3</A><BR>
<P>
<H2><A NAME="Topic1">Topic 1</A></H2>
This is text about topic 1.<BR>
<A HREF="#TOC">(TOC)</A><BR>
<P>
<H2><A NAME="Topic2">Topic 2</A></H2>
This is text about topic 2.<BR>
<A HREF="#TOC">(TOC)</A><BR>
<P>
<H2><A NAME="Topic3">Topic 3</A></H2>
This is text about topic 3.<BR>
<A HREF="#TOC">(TOC)</A><BR>
<P>
</BODY>
</HTML>
As you have already seen the syntax for a URL for the document name itself and for the position within that page is "locationandnameofpage#nameoftext". In the previous section you discovered how to make links within the current document. In contrast to linking within the current document, to link to other documents you must provide the location and name of the document you wish to connect to. Additionally, you can specify a specific point in that document the same way you do to provide jumps within the current document. Also note that the "name" which is used to name a region is case sensitive in some browsers. Ensure that the name used for naming the region matches the name which is used as the reference.
The two most commonly supported still graphics formats are the GIF and JPEG.
The JPEG or JPG is a graphics format produced by the Joint Photographic Experts Group. This format is known for its compressed size and quality with scanned images.
The GIF, graphics interchange format, is known for it’s sharp image. A GIF can come in two formats: interlaced and non-interlaced. A GIF also supports the ability to make one of the colors in the palette a transparent color.
Interlaced GIFs
Interlaced GIFs appear as a poor resolution first and then improve in resolution until the entire image has arrived. This type of GIF is ideal if you want to provide the users of your page with a general idea of what the content of your page is before the entire page is loaded. If the browser that the user of your page uses does not support progressive display then this option will not take the intended effect; the image will be entirely loaded and then displayed.
Non-Interlaced GIFs
Non-interlaced GIFs appear on the screen in a linear fashion from the top row of pixels to the bottom row of pixels until the entire image arrives.
Transparent GIFs
Transparent GIFs are great because they give the illusion that they are blending in with the user’s display. This is accomplished by assigning one color to be transparent. When the image is received by the user’s browser, the transparent color is replaced with the color of the browser’s background. Note that this is only available if your user’s browser supports transparent colors.
Adding images to your document will make it look better than just a plain old text page. Graphics add color and often help to convey your message better (A picture is worth a thousand words - couldn’t resist!) Including graphics on your page is not as hard as you may think. The tag to accomplish such a feat is the image, <IMG>, command.
The <IMG> command always requires a location of a graphic which it is to display on your page. The definition of a graphic to be loaded is represented in the attribute SRC (SRC follows the syntax SRC="...".)
<IMG SRC="...">
<IMG SRC="ROCKET.GIF">
<IMG SRC="/graphics/ROCKET.GIF">
<IMG SRC="file:///C|/Classes/HTML/rocket.gif">
The image source as shown above can be in a variety of forms. It can be a filename, relative filename and directory, or be a URL to a graphic file.
In many cases, users of a page who are not capable of displaying a graphic on their page are left with a big mess! In other cases users who are using a graphical browser but have graphics turned off are left with icons in the place of the graphic. It is your responsibility to try to make the screens of these people as easy to read as possible. Rather than just not loading a graphic, you should provide a text alternative.
There are many conventions used. If the graphic represents a logo or icon you generally use an alternative phrase such as "[Image]". If you use graphics in a list, you would most likely provide the user with an alternative that makes sense, such as "*".
Creating an alternative to loading an image is accomplished through the use of the attribute ALT. Alt follows the syntax ALT="..." where ... represents the text to put in the graphic’s place. For example, if you had a graphical bullet and wanted to provide an alternative such as "*":
<IMG SRC="redball.gif" ALT="*">
If you wanted to replace an image such as a logo with a text representative you could do something like this:
<IMG SRC="logo.gif" ALT="[Image]">
Note that some browsers such as Internet Explorer use the alternate attribute as a tooltip for the image. In the above example, the user would see a tooltip named "[Image]" displayed. When keeping this in mind, you may wish to use more descriptive text.
Wrapping Text Around Your Graphic
You may often have a large image that you want to display on your page. Whenever you insert a picture the default is not to wrap text around it. (Floating text). This can make your image appear as a foreign object in the document and can make your document longer than it needs to be. To wrap text around an image you can use the ALIGN attribute. There are two values of this attribute which define how text is wrapped: LEFT and RIGHT. The LEFT value will place the image on the left side of the page and allow text to wrap the right side. The RIGHT attribute will do the opposite, placing the image on the right side and wrapping the text on the left.
ALIGN=LEFT|RIGHT
<IMG SRC="logo.gif" ALT="[Image]" ALIGN=LEFT>
<IMG SRC="logo.gif" ALT="[Image]" ALIGN=RIGHT>
You have already seen how to make text based anchors which link to Internet resources. In fact, you can use images as well. To use an image as a link you simply include the image within the anchor tag. In the following example a link to Netscape’s home page is chosen by a Netscape graphic anchor.
<A HREF="http://home.netscape.com/"><IMG SRC="netscape.gif"></A>
It is important to note that you are not limited to using either text or graphics. You can use them both! Simply include whatever you want to be used as the anchor within the anchor tag.
<A HREF="http://home.netscape.com/"><IMG SRC="netscape.gif">Netscape Inc.</A>
Whenever you make a graphic an anchor in a link, a border is placed around the image by default to show that the image is an anchor. But what if you didn’t want those borders placed around your document? There is an attribute named BORDER which allows you to specify the width of the border which is placed around the image. If you decided you did not want a border, you could define the border width to be 0. On the other hand, if you wanted a thicker border you could define the border width to be 3, 4, 5, or even 30!
BORDER=##
<IMG SRC="..." BORDER=0>
<IMG SRC="..." BORDER=1>
<IMG SRC="..." BORDER=3>
<IMG SRC="..." BORDER=30>
In version 3 of HTML the ability to size an image has been proposed. Netscape and several other graphical browsers will allow the use of the sizing attributes. These attributes are WIDTH and HEIGHT.
The WIDTH and HEIGHT attributes can be used in three ways:
WIDTH=##
HEIGHT=##
<IMG SRC="logo.gif" WIDTH=20>
<IMG SRC="logo.gif" HEIGHT=30>
<IMG SRC="logo.gif" WIDTH=40 HEIGHT=35>
Using the WIDTH or HEIGHT attribute can be used to effectively reduce an image to a particular height or width that fits the application in your page. Note that when using both the WIDTH and HEIGHT attributes together that you do not get any horizontal or vertical scaling to keep the image height and width relative to their original sizes (the aspect ratio is not preserved).
In addition to re-sizing the image, you can also control how it gets placed by defining the horizontal and vertical spacing. Using the horizontal spacing attribute "hspace=x" you can place x number of guaranteed transparent pixels on either side of the image; the vertical attribute "vspace=x" works the same way only it places x transparent pixels above and below the image. This is useful if you wanted to have a guaranteed amount of white space around any particular image.
Lists are used to distinguish lines of text from other paragraphs within your document. They can also be used to show a logical sequence of events. List tags will either indent your text lines, bullet them, or number them. Most common list types include unordered lists, ordered lists, and definition lists.
The numbered list, also known as an ordered list, is used to show a list of items which should be shown in a particular order. The ordered list is started by the markup tag <OL> and completed with the markup tag </OL>. Each line in the list begins with a <LI>. The resulting output is a numbered list of lines.
<OL>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
<LI> This is the fourth item.
</OL>
In addition to creating the list, HTML 3 offers some list configuration ability. You can begin a list at a particular number by specifying the SEQNUM=## attribute of the <OL> tag. Using the SEQNUM attribute will start the list at ## rather than at 1.
<OL SEQNUM=3>
<LI> This is the third item.
<LI> This is the fourth item.
</OL>
You can also skip numbers within your list by using the SKIP attribute within your <LI> tag. SKIP=## will skip ## number of items before continuing the number sequence. For example, if you wanted your list to skip 4 numbers between steps, the following code could be used.
<OL>
<LI> This is the first item.
<LI SKIP=4> This is the second item.
<LI> This is the third item.
<LI> This is the fourth item.
</OL>
Lists can also be related to other lists within a page. For example: If you have a list in your document and then conclude the list to include some additional information, you can continue your list where your last list left off. The CONTINUE attribute will force the ordered list to start with the next number in the previous list's sequence.
<OL CONTINUE>
<LI> This is the third item.
<LI> This is the fourth item.
</OL>
Netscape incorporates a few extensions which allow you change the type of numbering which is performed. The default numbering, {1,2,3,…} can be changed to use either Roman numerals {I,II,III,IV,…} or letters of the alphabet {A,B,C,…}. This is performed using the TYPE attribute of the <OL> tag. To use Roman numerals, use TYPE=I. To use letters of the alphabet, use TYPE=A.
<OL TYPE=I>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
</OL>
<OL TYPE=A>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
</OL>
Note that the type attribute can also be applied within the <LI> tag in the event you wanted to override the numbering of a particular item.
The unordered list is typically used to emphasize several short lines of information. The unordered list is started by the markup tag <UL> and completed with the markup tag </UL>. Each line in the list begins with a <LI>. The resulting output is a bulleted list of lines.
<UL>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
<LI> This is the fourth item.
</UL>
Netscape incorporates some extensions which allow you to define the type of bullet which is used in the unordered list. You can change the bullet to be a disc, square, or circle. As with the custom numbering of an ordered list, the TYPE attribute is used. The TYPE attribute in this context use disc, square, or circle to define the type of bullet.
<UL TYPE=square>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
</UL>
Note that the type attribute can also be applied within the <LI> tag in the event you wanted to override the default bullet of a particular item in the list.
The definition list is used to create glossaries. The first item in the list is the term and the second is the definition of that term. The definition list is started by the markup tag <DL> and completed with the markup tag </DL>. Each term in the list begins with the markup <DT> and the corresponding definition is denoted with <DD>.
<DL>
<DT> Term A
<DD> Definition of term A
<DT> Term B
<DD> Definition of term B
</DL>
When creating a list, it is now possible to include list headers. List headers are created using the <LH> tag and a closing </LH> tag. The <LH> tag is placed between the opening and closing list tags for the type of list you are creating. This tag can be placed anywhere between the open and close of the list. Generally, the header is placed near the beginning of the list.
<UL>
<LH> This is the heading for the item list</LH>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
<LI> This is the fourth item.
</UL>
Any list can be nested within another. Nesting is accomplished by placing the open and closing tag of the nested list between the open and closing tag of the list to nest in. Nested lists will appear indented from the list which contains it. Lists which are included within lists also can take on a new bullet style. For example, Netscape will use the solid circle, open square, and then solid square. An example which demonstrates the use of nesting is shown below. Notice that the bullets in the fourth level are not unique. This is because it is not typically recommended to create lists with a depth of more than three.
<HTML>
<HEAD>
</HEAD>
<BODY>
<UL>
<LI>Markup Languages
<UL>
<LI>SGML
<UL>
<LI>TEST
<UL>
<LI>Line1
<LI>Line2
</UL>
<LI>TEST2
</UL>
<LI>HTML
<LI>VRML
</UL>
<LI>Programming Languages
<UL>
<LI>Basic
<LI>Pascal
</UL>
</UL>
</BODY>
</HTML>
(Note that this example shows indented lines. This is not necessary to make the internal lists indented and is only used for better readability of the code; multiple spaces are collapsed into a single space)
As in written documents, there are some times when you require the use of a table to organize information. There are many times when a list will be sufficient to organize information you wish to present to the user. When you need to introduce another level of detail you can make use of a table.
The HTML markup tags to define a table are <TABLE> to signify the start of a table, and </TABLE> to signify the end of the table.
<TABLE>
.
. (table elements)
.
</TABLE>
Essentially, a table is a collection of data organized into rows and columns. There is no difference between a table in a written document and ones contained within HTML documents.
Tables in HTML documents are organized by row. What this means is that you must explicitly define a row and then add a variable number of data elements to that row. The HTML markup tags to define a row in a table are <TR> to signify the start of a row, and </TR> to signify the end of a row.
<TABLE>
<TR>
.
. (row elements)
.
</TR>
<TR>
.
. (row elements)
.
</TR>
</TABLE>
Obviously you have to do more than just define rows in your table. (That’s the first step.) You must now define the data elements which are contained within the row. To accomplish this there is another tag, <TD>. <TD> works the same way as other table tags as it starts with a <TD> and ends with a </TD>.
<TABLE>
<TR>
<TD>Column 1 Row 1</TD>
<TD>Column 2 Row 1</TD>
<TD>Column 3 Row 1</TD>
</TR>
<TR>
<TD>Column 1 Row 2</TD>
<TD>Column 2 Row 2</TD>
<TD>Column 3 Row 2</TD>
</TR>
</TABLE>
You will notice in this example that no borders are defined for the table itself. There are times when complex data is being put into your table and you need physical separators. In order to do this, you are required to define the border of the table. This is done through the attribute BORDER which is placed with the <TABLE> markup tag. Syntax: <TABLE BORDER=#>. So for example, if you wanted a border of one, you simply use:
<TABLE BORDER=1>
Now that we have what physically looks like a table, you will notice that we are missing an important part: namely the headers for the columns. It is as easy to define headers as it is data elements. The markup to define a header is <TH> to start the header and </TH> to end the header. You will notice that headers are placed within the <TR> tag the same way the <TD> is inserted.
<TR>
<TH>Column 1</TH>
<TH>Column 2</TH>
<TH>Column 3</TH>
</TR>
Headers can additionally be used to signify rows as well. It just takes a bit of planning about how you are going to structure your table. In order to add headers for each row, you will be required to create an extra column at the start of every row.
<TABLE BORDER=1>
<TR>
<TH></TH>
<TH>Column 1</TH>
<TH>Column 2</TH>
<TH>Column 3</TH>
</TR>
<TR>
<TH>Row 1</TH>
<TD>Column 1 Row 1</TD>
<TD>Column 2 Row 1</TD>
<TD>Column 3 Row 1</TD>
</TR><TR>
<TH>Row 2</TH>
<TD>Column 1 Row 2</TD>
<TD>Column 2 Row 2</TD>
<TD>Column 3 Row 2</TD>
</TR>
</TABLE>
Another useful feature of tables is the ability to assign a title to a table. This is accomplished through the use of the <CAPTION> markup tag. The caption tag must be enclosed within the <TABLE> ... </TABLE> tags and must have the text to be used in the title contained within it. Note that a table can only effectively contain one caption.
<TABLE BORDER=1>
<CAPTION>Title of Table</CAPTION>
<TR>
<TH>Row 1</TH>
<TD>Column 1 Row 1</TD>
<TD>Column 2 Row 1</TD>
<TD>Column 3 Row 1</TD>
</TR>
</TABLE>
You should note that you can place a title at the bottom of a table. The <CAPTION> tag has an attribute "ALIGN" which defines where the caption will be placed. In order to place the caption at the end of a table you can change the caption line to the following:
<CAPTION ALIGN=BOTTOM>Title of Table</CAPTION>
As you may have noticed, headings by default are boldfaced and centered. You can apply any formatting markup tags to the text within a cell as well. For example, if you wanted to boldface the word Column in our example in the first row, first column all you would need to do is wrap the word Column in the boldface markup tag as shown:
<TR>
<TH>Row 1</TH>
<TD><B>Column</B> 1 Row 1</TD>
<TD>Column 2 Row 1</TD>
<TD>Column 3 Row 1</TD>
</TR>
Headings, by default appear centered in the cell of a table. What if you wanted to align other cells not being used as headers? There is an ALIGN attribute which will do this for you. This ALIGN attribute can be used in both the cell and in the row tags. Now before jumping ahead and adding the align attribute to all cells, you should consider all the cells which you want to affect. If you want to affect all the entire row of a table, you should consider using the ALIGN attribute in the row tag; if you want to affect only specific cells, use the ALIGN in the cell tags; if a good portion of the row is changed from the default, you may also want to consider using the row ALIGN and the cell ALIGN. The cell ALIGN will always take precedence over the row ALIGN. By knowing this, you can define a default behavior for all the cells within a row, and then set individual alignment behavior on a cell by cell basis if it deviates from the default you set in the row.
Whew! Here’s an example to clarify. You must note that the default behavior for a row and for a cell is LEFT justified. If you wanted to redefine the behavior so that the default for the row is "CENTER"ed, you would define the row attribute as:
<TR ALIGN=CENTER>
Once you have set the row to be centered, you may require that the first data element remain left or right justified. You could do this by:
<TD ALIGN=LEFT>
<TD ALIGN=RIGHT>
Not only can you align your text based on horizontal alignment, but you can also align your text vertically within the cell. There will be many times when the text within your cell will wrap to the next line and cause a cell to take up two or more vertical lines. The default behavior is to have the text align to the CENTER of the cell. There may be some situations where you want to make the text to align to the top or bottom of the cell. This is accomplished through the use of the VALIGN attribute. This attribute can be one of three values: MIDDLE, TOP, or BOTTOM. This attribute works in very much the same way as the ALIGN attribute where you can define a particular default to the entire row and change individual cells. If you recall, this is done by defining a vertical alignment within the row <TR> tag and then redefining the vertical alignment within the cell.
Row alignment Cell alignment
<TR VALIGN=TOP> <TD VALIGN=TOP>
<TR VALIGN=MIDDLE> <TD VALIGN=MIDDLE>
<TR VALIGN=BOTTOM> <TD VALIGN=BOTTOM>
Cells Which Span Columns and Rows
You have now experimented with tables which contain a fixed number of rows and a fixed number of columns. There may be an occasion where a column is not required within a particular row. If you were just to remove the data tag you would find that your column alignment would be wrong. This is because the browser interprets each cell one at a time and places them into the table. The browser has no knowledge of your intentions and you cannot assume it does. However, there is a way for you to tell the browser that a particular cell is going to consume two or more columns. This is done at the cell level using the COLSPAN attribute. This attribute follows the syntax: COLSPAN=#.
Using our recurring example, if we wanted the second column (1st data column) to consume two cells and we eliminated the third physical column, we would change the document so the last row reads:
<TABLE BORDER=1>
<TR>
<TH></TH>
<TH>Column 1</TH>
<TH>Column 2</TH>
<TH>Column 3</TH>
</TR>
<TR>
<TH>Row 1</TH>
<TD>Column 1 Row 1</TD>
<TD>Column 2 Row 1</TD>
<TD>Column 3 Row 1</TD>
</TR>
<TR>
<TH>Row 2</TH>
<TD COLSPAN=2>Column 1 Row 2</TD>
<TD>Column 2 Row 2</TD>
</TR>
</TABLE>
In addition to the combining of cells on a columnar basis, you also have the ability to combine rows. This is accomplished in very much the same way. The attribute to accomplish this is through the use of the ROWSPAN attribute.
<TABLE BORDER=1>
<TR>
<TH></TH>
<TH>Column 1</TH>
<TH>Column 2</TH>
<TH>Column 3</TH>
</TR>
<TR>
<TH>Row 1</TH>
<TD ROWSPAN=2>Column 1</TD>
<TD>Column 2 Row 1</TD>
<TD>Column 3 Row 1</TD>
</TR>
<TR>
<TH>Row 2</TH>
<TD>Column 1 Row 2</TD>
<TD>Column 2 Row 2</TD>
</TR>
</TABLE>
The ROWSPAN and COLSPAN attributes can both be used within a table or within the same sets of cells. There may be times where it is hard to keep track of how a browser will interpret the spanning of cells, so you may need to verify in your browser.
You have seen that you can link to other documents using the anchor tag. While creating links between documents and jumping within your document you may have used an image to create the link. This, as you remember, was accomplished by placing the image tag within the anchor tag.
Often this was useful when you had several distinct images as each could have their own link. But, what if you had a single image? Or you want to set up a standard navigation toolbar on your page? This can be accomplished through the use of image maps.
When the user views an image map, they can click on any portion of the image they wish. The image is divided into several sections which represent different links. When the user clicks a particular link, the coordinates of the click is recorded. The appropriate link which resides in that coordinate range is then activated.
This section will focus on:
Netscape is a good example of a site which uses an image map for navigation. While looking at their page you will notice a number of graphic images placed throughout the page. You will also notice a set of buttons below the main Netscape graphic. These are the navigation buttons for the site.
Each button is distinguished from the other by their coordinates. "Company & Products" has a different location than "Assistance". When the user clicks on a link, the coordinates are recorded. These coordinates are then sent to the server to determine what link to activate.
Netscape is an example which uses a button bar style to reveal links to the user. You of course are not restricted to using a button bar style. Some Web designers use graphics like scenic pictures to show links. For example, if tourism France had a web page, they could use a picture or map of the city and define clickable regions within the picture. If a user clicked on the Eiffel Tower, then they would be presented more information on that monument.
A clickable image can be any type of picture, as long as it is a graphic type of GIF or JPEG. Although you can use scanned images or images from other locations, most web designers choose to create their own. An image can be created with any graphic utility. One of the more popular shareware graphic programs, and the one which we will use for this section, is Paint Shop Pro.
In the Netscape example, the image map represents a button bar of rectangular buttons. This is one of the easiest image maps to create as each button is the same size and shape. The rectangular shape is also one of the easiest to map. Clickable areas can be defined in other shapes as well including circles and polygons such as triangles, hexagons, etc.
When making graphics to be used in image maps keep the following in mind:
Create an image map button bar similar to the one which shown in this section. Include a button to your home page, a page about yourself, sports, hobbies, work, etc. If you wish to create a button bar for a company, consider making sections such as general information, products, marketing, employment opportunities, etc.
Once you have created the image to be used for the map file, the next step is to create a map file. This map file basically contains a list of coordinates that form the map (clickable) regions. Each region defined by the map has an associated hyperlink. When the user clicks on a clickable region of the image, the map file is used by the Web server to determine which region was selected by matching the coordinates supplied by the browser.
Of course, you don't have to create the map file manually yourself. You can make use of various software to simplify the task. In general, most mapping software load up the image, allow you to graphically divide the image into regions, and assign links to those regions. As was noted in the previous section, regions can take a variety of shapes including squares, rectangles, circles, and polygons. Remaining areas of the image can be made to be default regions or can be set up to do nothing.
There are a variety of useful products which can be used to create map files. Some of the more popular ones are listed below. The one which we will be using in this courseware is Map THIS!
Map THIS! is a freeware Windows (Win32) image map generator by Todd Wilson which has won numerous Web awards. Version 1.31 is the latest and last version. A new product, Live Image, which is packed with new features is being produced which will replace Map THIS!
Map THIS! can be found at http://www.ecaetc.ohio-state.edu/tc/mt/
MapEdit is a WYSIWYG editor for imagemaps. Authored by Thomas Boutell, the keeper of the WWW FAQ. This editor supports the GIF, JPG, and PNG formats.
MapEdit comes in versions for a number of different operating systems which include Microsoft Windows 3.1, Microsoft Windows 95 and NT on normal PCs, Microsoft Windows NT for the DEC Alpha, Linux (ELF support needed), Solaris 2.5 (INTEL), HP/UX 9 on the HP 700 series, AIX version 4.1, Solaris 2.5 (SPARC), BSDI OS 2.x, HP/UX 9 on the HP 300 series, DEC Alpha, running OSF/1 (4.0), SCO Unix 3.0 (COFF), SCO Unix 5.0 (ELF), HP/UX 10, FreeBSD, SunOS 4.1.3 (SPARC), and SGI Irix 5.3.
MapEdit can be found at http://www.boutell.com/mapedit/
MapMaker allows you to Interactively create an image map for any inline image anywhere on the WWW by specifying the URL of the page which includes the inline images. The image map file is created by defining individual polygons on the image which you specify. Each polygon is defined by specifying the vertices of the polygon in order. Once you have selected an image upon which to create an image map, you can define each polygon by clicking on the image. MapMaker is designed for Mosaic or Unix boxes and is incompatible with some other browsers, such as Netscape or Mosaic on the Mac.
MapMaker can be found at http://www.tns.lcs.mit.edu/cgi-bin/mapmaker
For those of you who have a Macintosh, the best image map generator is currently WebMap. Version 1.01 is shareware and the new version 2.0X is payware. This is authored by City.net.
WebMap can be found at http://www.city.net/cnx/software/webmap.html
Web Hotspots 2.0 is an image map editor for Windows supporting both server and client-side image maps, multiple image file formats including GIF and JPEG and more microscopic (zoomed-in) editing, advanced shape manipulation, subtractive regions (cutouts), starter host page generation, insertion of host (i.e., IMG) entries into existing pages, and live testing for Windows Sockets 1.1 compliant configurations.
Web Hotspots can be found at http://www.cris.com/~automata/hotspots.shtml
Creating an image map with Map This! can be broken down into a few simple steps:
Start Map This! and select New from the File menu. You will then be prompted for the
name of the graphic file you want to create the image map for.
Once the graphic has been opened, you will be able to begin working with your image.
In the window of the graphic which has been opened is a toolbar with four options: define rectangle, define circle/oval, define polygon, and select area.
These tools are used to define each of the areas which are to be used as clickable regions. Each tool has a particular function and are as follows:
|
Define Rectangle |
You can create new rectangles by moving the mouse pointer to the location for the first corner. While holding the left mouse button, drag the mouse pointer to the opposite corner. Release the mouse pointer when you are done. |
|
Define Circle/Oval |
You can create new circles by moving the mouse pointer to the location of the center of the circle. While holding the left mouse button, drag the mouse pointer to the radius of the circle. This is known as pull from center. |
|
Define Polygon |
You can create any type of polygon using the polygon tool. Create odd shapes, triangles, etc. For example, you can use the polygon tool to make a rough shape of a car. You create a new polygon by moving the mouse pointer to the first corner of the polygon. Click the left mouse button to start the polygon. Move the mouse pointer and click for the second corner. Continue until you have created all your "nodes". Complete the polygon either by clicking near the starting point or by double clicking the left mouse button. |
|
Select Area |
The arrow tool can be used to move, reshape, or delete existing areas. You can move an area by positioning the mouse pointer over an area. When the mouse pointer changes to a four way arrow, drag the area to a different location using the left mouse button. Deleting an area can be accomplished by right clicking on the area and selecting "Delete Area" from the popup menu. Reshaping can be done by clicking on "nodes" which make up the shape and dragging the node to a new location. |
Once an area is created, a border is drawn around the area and if filled using a hatched pattern.
When you have finished defining the clickable regions on your image, you can change the settings of the region. Note: You can define the region settings for a region any time after it is created. To change the settings for a clickable region select the "Select Area" tool and right click on the region. Select "Edit Area Info" from the popup menu.
You have the ability to set the URL to activate when the area is clicked. In this example, the page destination.htm will be loaded when the user activates the particular region. Note that you can also connect to named anchors on the same page or on different pages. Within the map file, include the name of the anchor.
http://thedomain/thepage.html#thename
Once you have defined all the clickable regions for the image and have changed the settings for each of those regions, you can save the image map by selecting "Save As" from the File menu. A dialog will appear requesting additional information on the map file and what format to save it as.
Enter a title for the image map in the title field and type your name into the author field. Default URL is used as a link to any region of the image which does not have an area associated with it. If you want to assign no link to be your default, you must connect call a CGI script to return back a no response message, #204 (contact your system administrator to find out if your site has such a program.) A description is useful as it provides additional information as to what the map file does. The format setting allows you to specify what map format you want to use. This format must match the format used on the server where you are placing the map file. The most common, and default, format is NCSA. If you are unsure of the format to use, contact the administrator of your service provider to determine the correct type.
You can speed up your work by using a few of the advanced features of Map This! For instance, you can test the map file you just created by selecting "Test Map" from the Goodies menu. This allows you to see what links will be activated when a user clicks on a particular region of the image. When you have finished testing your map, select Done.
Magnification tools can be used to focus on particular areas of your image. This gives you the ability to zoom in on an area and then create more precise regions. "Zoom In" from the View menu is used to magnify, "Zoom Out" returns you to the state previous to the magnification.
Another useful feature is the ability to list all the clickable regions being used for an image. This is especially useful if you have a large number of regions defined.
The area list is accessed by selecting "Area List" from the View menu. From within the area list, you can select and edit any region in the list. When a region is selected in the list, the region is also selected on the image view. You can scroll through the list by clicking on the up and down arrows. You can delete a region by selecting the "X" button. Editing area information can be accessed by clicking on the pencil button.
Create a map file for each of the buttons on the button bar created in the previous assignment. Edit the settings for each of the regions to assign a link. Test the links by testing the map within the Map This! program.
The final step to creating an image map is referencing your map from your HTML document. An image map is referenced from an anchor tag. The anchor tag is placed in the HTML file where you want the image map to reside. The anchor tag as you remember follows the following syntax:
<A HREF="Your URL">
The URL in this case is the name and location of your map file. Where your map file can be placed depends on the configuration of your service provider. Some providers place these files in a CGI-BIN directory and others are placed in the same directory as the HTML file.
<A HREF="mymapfile.map">
<A HREF="cgi-bin/mymapfile.map">
Once you define your anchor, the next step is to include the image within the anchor. This is done by placing the IMG tag between the opening and closing anchor tags. (This is the same as using an image as a link.) An additional attribute is required to distinguish the image as an image map. This is done with the ISMAP attribute. The ISMAP attribute is placed inside the IMG tag.
<IMG SRC="titlebar.gif" ISMAP>
Placing the IMG tag between the anchor tags will then resemble:
<A HREF="mymapfile.map"><IMG SRC="titlebar.gif" ISMAP></A>
As with other graphic links, you will notice that the image of an image map has a border. This border, in most cases, should be removed for aesthetics. You can remove the border in the same fashion as removing a border from a graphic link. The BORDER attribute with a value of 0 can be used to accomplish this.
<A HREF="mymapfile.map"><IMG SRC="titlebar.gif" ISMAP BORDER=0></A>
You can supply an alternate to the image map as you do with normal embedded images. Note that this does not specifically pertain to image maps. The behavior is the same as a normal graphic in that the alternate text is displayed until the image map is displayed. If a user is using a text browser, the alternate text is displayed. This alternate text has no function except to tell the user that an image map was not displayed. If you want to provide alternates to the image map, refer to the next section on compatibility and alternatives.
<A HREF="mymapfile.map"><IMG SRC="titlebar.gif" ISMAP BORDER=0 ALT="Titlebar"></A>
The map cannot be tested from your local machine, and must be uploaded to a server. As a final step, in order to test your image map, the HTML document, graphic used as the map, and map file must be loaded onto the web server. You can upload using FTP, or another facility provided by your ISP.
If you have problems running the image map, there may be a special configuration on your ISP or they may be using a different type of map file. Consult your administrator for information on the type of maps used on the site, the location where the map files should be stored, and any other special considerations.
If you would like more information on the CGI imagemap programs including source and documentation you can connect to:
|
NCSA |
http://hoohoo.ncsa.uiuc.edu/docs/tutorials/imagemapping.html |
|
CERN |
http://www.w3.org/hypertext/WWW/Daemon/User/CGI/HTImageDoc.html |
Create an HTML document which will be used to contain the image map.
Download an image from the Internet which is either a picture or map. Load this image into Map This! and create clickable regions for each area. These areas will most likely be polygons. Assign links to each region. Test the image map from within Map This! An image of a map can be obtained from http://www.city.net/ or you can find your own by searching on the net.
Compatibility Considerations / Alernatives
There are considerations which should be made when developing image maps:
When trying to answer these questions, you need to realize that your audience may not be using the same tools as yourself, and that their connection/configuration may be different. With image maps, coordinates are processed at the server which increases interaction. If your ISP's server is quite busy, network traffic is high, or the user's connection is slow, will this interaction slow your user down?
You may also want to consider using individual graphics and links to achieve a result similar to the map. Image maps look good and function well for some, but can you achieve the same result with regular links? Remember that links to images are processed locally.
Additionally, for increased compatibility, you should always provide text alternatives to your image map; whether you are using individual graphics or a map.
You may also want to consider a relatively new extension to HTML, client side image maps, which actually process the coordinates on the client machine.
There are times when your user may be using a browser which does not support graphics, or they simply have "load graphics" turned off. To allow these users to be able to navigate your pages, you should provide text alternatives to the image map. These text alternatives typically appear below the image map or at the bottom of your page.
Text alternatives can be in a variety of forms. If you recall the Netscape button bar example from the start of this chapter, you will note that several options are available. As text alternatives, they have decided to break the topic into mor