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.
|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.|
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:
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:
To link to CA:
Relative pathnames are advantageous because
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.
The URL is the Internet address of a resource, including but not limited to web pages. The generalized syntax for a URL is
The protocol tells the client program what type of resource is
being requested and the rules for transfering it.
|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.|
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.
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.
|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.
|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
Aligning Text Around Images
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.
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.
<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.
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.
Images as Links
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.
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:
|Attributes of the <IMG> tag
||Identifies the image as a Server Side Image Map.
||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
||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
||Identifies the URL of the linked page.
||Specifies that there is no URL associated with the area.
||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.
||Specifies the shape of the area. Set to one of the following
||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.