Syntax:

<A name="anchorname">link text</A>
<A href="URL ¦ URL #anchorname ¦ #anchorname">link text</A>

The anchor tag creates a link to another document or to another location in the same document. The link text displays on the screen, normally in a different color and underlined, however, the user can change the appearance from the browser configuration settings. When the user clicks on the link, the browser will load the linked document.

Attribute
Name	Sets the position of a named section within the document. The link text is optional; I normally put the link text outside the tag so that it is possible to have more than one name on the same section and it is a lot easier if you want to move the anchor.
Href	HyperReference. Specifies the file that is to be loaded. See below for more details.

Relative vs Absolute Pathnames

You can create links to documents in other directories by specifying the relative path from the current document. For example if you have the following directory structure:

    Sales
        Atlantic
           NJ
             nj.html
             nj.gif
	   NY
             ny.html
             ny.gif
        Pacific
	   CA
             ca.html
             ca.gif
	   WA
             (etc.)

If the current file is in the Sales directory the link to NY might be:

<A href="Atlantic/NY/NY.html">New York</A>

Pathnames use the standard UNIX syntax. The UNIX notation for the parent directory is ../ (2 periods and a slash). The parent directory is the directory one level above the current directory. To move up additional levels, simply add an additional "../" per level. In the example above, to link to NJ from NY use:

<A href="../NJ/NJ.html">New Jersey</A>

To link to CA:

<A href="../../Pacific/CA/CA.html">California</A>

Relative pathnames are advantageous because

• it is easier to move a group of documents to another location
• it is more efficient connecting to the server
• it involves less typing

Absolute paths should be used for documents that are unrelated and must be used for documents that are located on a different server. Using an absolute path invoves typing the entire URL.

URLs

The URL is the Internet address of a resource, including but not limited to web pages. The generalized syntax for a URL is

protocol://server name[:port]/DirectoryPathAndFileName

Part
Protocol	The protocol tells the client program what type of resource is being requested and the rules for transfering it. Some commonly used protocols http HyperText Transport Protocol. Used to transfer WWW documents. shttp HyperText Transport Protocol. ftp File Transfer Protocol. Used to transfer binary files. news UseNet newsgroup protocol. mailto E-mail Note: The news and mailto protocols use a slightly different syntax. The news protocol indicator is followed by a colon and the name of the newsgroup. news:rec.pets.cats.breed.persian The mail URL looks like mailto:milin@flash.net
Server Name	Tells the client program where the resource is located. Can be entered as the commonly used server.domain or as the IP address such as 192.168.24.30.
Port	Refers to the port number on the server where the client should connect. The port number is optional and if omitted the default port will be used.
File	Once the server has been located, the file element determines the file and directory where the resource is located within the server.

Syntax:

<IMG SRC="URL to image" [HEIGHT=n] [WIDTH=n] [ALT="Alternate Text"] [ALIGN=top ¦ middle ¦ bottom ¦ left ¦ right] [BORDER=n] [HSPACE=n] [VSPACE=n] [ISMAP] [USEMAP]>

Probably nothing has had more influence on the recent popularity of the World Wide Web than the support for including graphics in an HTML document.

File Format

Image files in HTML can be in any graphics format, however, browser support for images viewed inline is available only for the GIF and JPG (or JPEG) file formats. The new HTML 4.0 specification allows support for other graphic formats, but these have not yet been implemented by browsers.

The GIF format supports 256 colors, transparency, animation and interlacing that provides a 'fade-in' effect. The JPG format supports 24 bit color and a more compact compression for faster loading. For this reason it is better suited to photographic images.

Attributes
SRC	This is the only required attribute of the IMG tag. It tells the browser what image to load and where to find it on the Internet.
HEIGHT	The height of the image in pixels.
WIDTH	The width of the image in pixels.
ALT	Specifies Alternate text that is displayed if the browser is unable to view graphics or is configured to not show them. It is also displayed while the image is loading.
ALIGN	Determines how text is aligned with the image. TOP Aligns text to the top of the image. MIDDLE Aligns text to the verticle center of the image. BOTTOM Aligns text to the bottom edge of the image. LEFT Creates a floating image on the left of the browser screen that the text wraps around. RIGHT Creates a floating image on the right of the browser screen that the text wraps around.
BORDER	Specifies the width of the border to place around the image.
HSPACE	Specifies the amount of blank space to put on the left and right of the image.
VSPACE	Specifies the amount of blank space to put above and below the image.
ISMAP	Specifies an image to be used as part of a Server side image map.
USEMAP	Specifies an image to be used as part of a Client side image map.

Image Size Attributes

The HEIGHT and WIDTH attributes of the <IMG> tag specify the height and width of the image in pixels. Although these attributes are optional, I strongly recommend that they always be included. When the browser loads a document, it reads it from top to bottom, displaying one line at a time. When an image is encountered, everything else stops while the browser goes back to the server to retrieve the graphic file. If the image size is included in the tag, the browser can determine how much space needs to be set aside on the screen and in memory to load the image and can then continue processing the text portion of the page while the graphic is downloading. The result is a page that loads much faster.

Aligning Text Around Images

The ALIGN attribute of the <IMG> tag specifies how text aligns with and wraps around the image.

For example, specifying ALIGN=TOP aligns the text to the top of the image and wraps around the image like this.

If, on the other hand, you specify ALIGN=MIDDLE, the results look like this, and the text wraps like this.

By specifying ALIGN=BOTTOM the text aligns to the bottom of the image and again wraps around like this.

Note that in all of the above examples, only one line of text is aligned to the image and that the wrap goes below the image. If you set the attribute to ALIGN=LEFT or ALIGN=RIGHT, however, you can create a 'floating' image in which the text wraps all the way around the graphic more completely on the sides. Then it helps to add in this useless sentence to make the paragraph long enough to better show the wrapping effect.

Alternate Text

The ALT attribute of the <IMG> tag specifies alternate text. This text is displayed in the image position while the graphic is being loaded or if the browser is unable to view graphics. Because images are relatively slow loading, some users have their browser configured to not display them; this configuration is also commonly used by people with visual impairments.

It is important that the text selected be descriptive of what the image shows or what it does, in the case using images as links.

Background Image

Syntax:

<BODY BACKGROUND="URL of image file">

The BACKGROUND attribute is part of the <BODY> tag and causes the specified image to be tiled repeatedly to display over the entire page. An important consideration that the selected image enhances rather than distracts from the contents of the page.

Background Color

Syntax:

<BODY BGCOLOR="#RRGGBB ¦ ColorName">

The BGCOLOR attribute is part of the <BODY> tag and some of the TABLE tags discussed below. It is important to select a color that will contrast with the color of other elements on the page (i.e. text, links, graphics etc.) for easier visibility.

see color

External Images

It is possible to create a link to an image that is located elsewhere on the web by including the complete URL to the image's location. This is usually not a good idea because most webmasters do not want you to link to their page this way. It is usually preferred that you copy the image to your own site. Keep in mind that there may be legal issues involved concerning copyrights when using someone else's images.

Images as Links

Syntax:

<A HREF="URL to linked location"><IMG SRC="URL to image file"></A>

Using an image as a link is as simple as replacing the linking text in the ANCHOR tag with the IMAGE tag. You can still use any of the attributes of both tags. The result is that the browser will load the HREF page when the user clicks on the image.

Image Maps

Syntax:

<IMG SRC="URL of Image file" … USEMAP="MapName" ¦ ISMAP>

…

<MAP NAME="MapName">

<AREA SHAPE="rect ¦ circle ¦ poly ¦ default" COORDS="N₁, N₂, N₃, N₄, …"

HREF="URL to linked location">
<AREA … >
…
</MAP>

An Image Map is a single image that links to different locations depending on where within the image the user clicks. Areas within the image are defined within the image and each area has its own link reference. You must include a separate AREA tag for each defined area.

There are two types of Image Maps:

Server Side Maps	The older Server Side Map requires programming on the server and therefore is beyond the scope of a class in HTML. In this type of map, when the image is clicked, the browser opens a connection to the server and receives back the URL of the referenced page and closes the connection. It must then open a new connection to request the page, which is then returned by the server.
Client Side Maps	Client Side Maps were introduced in the current HTML Specification 3.2. The syntax shown above is for a Client Side Map. When the user clicks a Client Side Map, the browser determines the URL and requests it from the server directly, saving time by not having to open a second connection. This has 3 main advantages: Speed The page can be loaded using only a single connection and no server processing is required. Offline Viewing Pages can be viewed from your hard drive and do not require a server connection. This is especially convenient when you are editing your page. No Special Configuration Needed Server Side Maps have more than one syntax depending on how the server is configured. Client Side Maps are always implemented the same way because the server is not involved.

Attributes of the <IMG> tag
ISMAP	Identifies the image as a Server Side Image Map.
USEMAP	Identifies the image as a Client Side Image Map and determines the location of the map data. This is usually a section in the same file (normally placed outside the <HTML> </HTML> container) or can be an URL to another file if you have several maps that you want in the same file, or want to use the same map for several images.
Attributes of the <MAP> tag
NAME	Required. Identifies the portion of the file to be used by matching to the NAME specified in the IMG tag.
Attributes of the <AREA> tag
HREF	Identifies the URL of the linked page.
NOHREF	Specifies that there is no URL associated with the area.
COORDS	Specifies the points (pixels) used to define the area. A series of comma delimited numbers that are grouped in pairs. The first number of each pair represents the location of the point in pixels from the left edge of the image, the second of each pair is the location from the top of the image. The number of pairs used and their meaning depend on the value of the SHAPE attribute.
SHAPE	Specifies the shape of the area. Set to one of the following keywords: RECT Specifies a rectangular area. Requires 2 pairs of coordinates; the first being the top left corner and the second is the bottom right. CIRCLE Specifies a circular area. Requires 2 pairs of coordinates; the first being the center of the circle and the second is any point on the outer edge. POLY Specifies an area that has an irregular shape. Takes as many coordinates as are required to define the area with each pair representing one vertex of the shape. DEFAULT Specifies what is to be done when the user clicks on an area that is not defined by any other AREA tag. Takes no coordinates, includes all points that are not included elsewhere in the map.
ALT	As with other graphic elements, you should always include alternate text. In the case of an Image Map, each defined area should have it own alternate text.