Web Design in a Nutshell Chapter 11 Creating
Web Design in a Nutshell Chapter 11: Creating Links ________________________________________________________ PHP Bible, 2 nd Edition 1 Wiley and the book authors, 2002
Summary Ø Ø Ø Ø Ø Summary of tags related to linking Simple hypertext links URLs Linking within a document Setting global link colors with style sheets Turning off underlines Targeting windows Image maps Client-side image maps Linking documents with <link> ________________________________________________________ PHP Bible, 2 nd Edition 2 Wiley and the book authors, 2002
Synopsis n n A link is a connection from one web resource to another This ability to link one document to another is what makes HTML unique among document markup languages and is the key to its widespread popularity ________________________________________________________ PHP Bible, 2 nd Edition 3 Wiley and the book authors, 2002
Summary of tags related to linking Ø <a>…</a>: defines an anchor within a document. An anchor is used to link to another document or web resource. It can also serve to label a fragment within a document (also called a named anchor) which can serve as a destination anchor for linking to a specific point in an HTML document v v v accesskey=“character”: assigns an access key (shortcut key) to the link. The value is a single character accessed with Alt-key href=“url”: specifies the URL of the destination HTML document or web resource id=“text”: gives the link a unique name to be referenced from a style sheet or javascript name=“text”: places a fragment identifier within an HTML document target=“text”: specifies the name of the window or frame in which the target document should be displayed ________________________________________________________ PHP Bible, 2 nd Edition 4 Wiley and the book authors, 2002
Summary of tags related to linking (cont. ) v v v title=“text”: specifies a title for the target document. May be displayed as a “tool tip” type=“MIME type”: specifies the content type of the linked content Examples: o o Relative reference: <a href=“filename. html”>…</a> Absolute reference: <a href=“http: //www. server. com/a. html”>…</ a> o o o Named anchor: <a href=“filename. html#fragment”>…</a> Named anchor in current file: <a href=“#fragment”>…</a> To name an anchor: <a name=“fragment”>…</a> To send an e-mail: <a href=“mailto: user@domain. com”>…</a> To a file via ftp: <a href=“ftp: //ftp. server. com/file. zip”>…</a> ________________________________________________________ PHP Bible, 2 nd Edition 5 Wiley and the book authors, 2002
Summary of tags related to linking (cont. ) Ø <area> (no end tag): used within the <map> tag of a client-side image map to define the specific “hot” (clickable) area. v v v Ø alt=“text” (required): specifies a short description of the image that is displayed when the image file is not available coords=“values”: specifies a list of comma-separated pixel coordinates that define a “hot” area of an image map. The specific syntax for the coordinates varies by shape. href=“url”: specifies the URL of the resource that is linked to nohref: defines a “mouse-sensitive” area in an imagemap for which there is no action when the user clicks in that area shap=“[rect|circle|poly|default]”: defines the shape of the clickable area <map>…</map>: encloses client-side imagemap specifications v name=“text” (required): gives the imagemap a name that is referenced within the <img> tag ________________________________________________________ PHP Bible, 2 nd Edition 6 Wiley and the book authors, 2002
Summary of tags related to linking (cont. ) Ø <base> (no end tag): specifies the base pathname for all relative URLs in the document. This tag is placed in the <head> section of the document v v Ø href=“url” (required): specifies the URL to be used target=“name”: defines the default target window for all links in the document (often used to target frames) <link> (no end tag): defines a relationship between the current document and another document. This tag goes within the <head> portion of the document. It is often used to refer to an external style sheet v v href=“url”: identifies the target document media=“[screen|tty|tv|projection|handheld|print|braille|aural|all”: identifies the target medium for the linked document so an alternative stylesheet can be accessed ________________________________________________________ PHP Bible, 2 nd Edition 7 Wiley and the book authors, 2002
![Summary of tags related to linking (cont. ) v v rel=“[stylesheet|next|prev|copyright|index|glossary]”: describes the relationship](http://slidetodoc.com/presentation_image_h2/edec1028b10abe3b192422844281f8d9/image-8.jpg "Summary of tags related to linking (cont. ) v v rel=“[stylesheet|next|prev|copyright|index|glossary]”: describes the relationship")
Summary of tags related to linking (cont. ) v v rel=“[stylesheet|next|prev|copyright|index|glossary]”: describes the relationship from the current source document to the target rev=“relation”: specifies the relationship of the target document back to the source (the opposite of the rel attribute title=“text”: provides a title for the target document type=“resource”: shows the type of an outside link. The value text/css indicates that the linked document is an external style sheet ________________________________________________________ PHP Bible, 2 nd Edition 8 Wiley and the book authors, 2002
Simple hypertext links n n The anchor (<a>) tag is used to identify a string of text or an image that serves as a hypertext link to another document. A text link looks like: I am <a href=“link. html”>linking</a> to you! n A link from an image looks like: <a href=“link. html”><img src=“pixie. gif” border=“ 0”></a> n Most graphical browsers display linked text underlined and in blue by default, but this behavior can be altered. Linked graphics appear with a blue outline (unless you turn off the border in the <img> tag ________________________________________________________ PHP Bible, 2 nd Edition 9 Wiley and the book authors, 2002
URLs n The URL is the pathname of the document you want to link to. URLs can be absolute or relative Ø Absolute URLs: made up of the protocol, host name (name of the server machine), path, and resource (file) name. When linking to documents on other servers, you must use an absolute url <a href=“http: //www. littlechair. com/web/index. html”>…</a> Ø Relative URLs: provides a pointer to another document relative to the location of the current document on the same server. The syntax is based on pathname structures in the Unix operating system. When you are pointing to another document within your own site, it is common to use relative URLs v v Directory paths can be traversed by specifying the subdirectory under the current directory, from the root directory (/…), from the directory immediately preceding the current directory (. . /…) By default, a relative URL is based on the location of the current document. That can be modified using the <base> tag in the <head> of the document ________________________________________________________ PHP Bible, 2 nd Edition 10 Wiley and the book authors, 2002
Linking within a document n By default, when you link to a page, the browser displays the top of that page. To aid I navigation, you can use the anchor tag to link to a specific point or section within a document. This technique is only effective on long documents Ø Naming a fragment: the first step is naming the portions of the document you want to link to using the <a> tag with the name attribute <h 1><a name=“stocks”>Daily Stock Quotes</a></h 1> v Fragments can also be named using the id attribute in any element tag <h 1 id=“stocks”>Daily Stock Quotes</h 1> Ø Linking to a fragment: using a standard anchor tag, at the end of the path and filename in the URL, put the name of the fragment preceded by the hash (#) symbol <a href=“business. html#stocks”>Current Quotes</a> ________________________________________________________ PHP Bible, 2 nd Edition 11 Wiley and the book authors, 2002
Setting global link colors with style sheets n You can apply almost any style sheet property to a link by using the anchor tag (<a>) as a selector A {color: #FF 0000; } Ø n Note that the color will also be applied to named anchors Various “pseudo-classes” are also predefined for working with anchor tags in style sheets Ø Ø Unvisited links: A: link {color: #FF 0000; } Visited links: A: visited {color: #FFFF 00; } Active links: A: active {color: #FF 00 FF; } When the mouse is over a link: A: hover {color: #0000 FF; } ________________________________________________________ PHP Bible, 2 nd Edition 12 Wiley and the book authors, 2002
Turning off underlines n The text-decoration style sheet property can be used to turn off the underlines for all the links in a document. If you choose to use this convention, make sure that your interface and system of visual cues is clear enough that links are still evident A {text-decoration: none; } ________________________________________________________ PHP Bible, 2 nd Edition 13 Wiley and the book authors, 2002
Targeting windows n n One of the problems with the hypertext medium is that when a user clicks on a link on your page, they might never come back. This can be avoided by making the target document display in a second browser window, leaving your page still active in the background Using the target attribute of the anchor tag is one way to accomplish this task <a href=“http: //www. oreilly. com/” target=“_blank”>…</a> n If you set every link on your page to target a _blank window, every link will launch a new window ________________________________________________________ PHP Bible, 2 nd Edition 14 Wiley and the book authors, 2002
Targeting windows (cont. ) n Another method, if you have multiple links you want to open in a separate window, is to specify a “name” for the window as the value of the target attribute <a href=“http: //www. oreilly. com/” target=“outside”>…</a> Ø n n This will cause all of the links specifying the same name to open in the same window The target attribute is most often used in conjunction with framed documents where the value will be the name of the frame you want the document to open into Other special values for the target attribute are: Ø Ø Ø _parent: opens the linked document in the “parent” frameset _self: default (same as if you didn’t specify a target) _top: opens the linked document in the topmost frame (uses the entire window) v This is especially useful if you think your site may be viewed in the frame of another site. Any link on your site which specifies _top as the value of the target attribute will make the frames disappear ________________________________________________________ PHP Bible, 2 nd Edition 15 Wiley and the book authors, 2002
Imagemaps n n n Ordinarily, placing an image with anchor tags makes the entire image a link to a single document You can, however, create multiple links, or “hot spots”, within a single graphic There are 2 main types of imagemaps: Ø Ø Client-side: the coordinate and URL information is contained right in the HTML. The process of putting the pieces together happens in the browser on the user’s machine Server-side: the map information resides on the server and is processed by the server or a separate CGI script ________________________________________________________ PHP Bible, 2 nd Edition 16 Wiley and the book authors, 2002
Creating imagemaps n n The key to making imagemaps work is a map (based on an image) that associates pixel coordinates with URLs. When the user clicks somewhere within the image, the browser passes the coordinates of the mouse pointer to the map, which, in turn, generates the appropriate link Although it’s possible to put together imagemap information manually, it is much easier to use a tool to do it Ø Ø Live Image: Download from siu. globaleyes. com’s Files tab Map. Edit: http: //www. boutell. com/mapedit ________________________________________________________ PHP Bible, 2 nd Edition 17 Wiley and the book authors, 2002
Creating the map n Regardless of the tool you’re using and the type of imagemap you’re creating, the process is basically the same: Ø Ø Ø Open the image in an imagemap program Define the areas within the image that will be clickable using the appropriate shape tools (rectangle, circle, or polygon) While the outline is highlighted, enter a URL for that area Continue adding shapes and their respective URLs (make sure that the areas do not overlap) Save or export the map information ________________________________________________________ PHP Bible, 2 nd Edition 18 Wiley and the book authors, 2002
Client-side imagemaps n Client-side imagemaps have 3 components: Ø Ø An ordinary graphic file (gif, jpeg, or png) A map delimited by the <map> tags containing the coordinate and URL information for each area The usemap attribute within the image tag (<img>) that indicates which map to reference This sample map is located at: http: //hosting. globaleyes. com/CCTB/Go-See-Do/Wine. Trail/ <IMG SRC="Wine. Trail. gif" USEMAP="#Wine. Trail" BORDER=0 WIDTH=550 HEIGHT=276> <MAP NAME="Wine. Trail"> <AREA SHAPE=RECT COORDS="94, 15, 185, 62" HREF=" Pomona. html" ALT="Pomona Winery"> <AREA SHAPE=RECT COORDS="225, 127, 340, 167" HREF=" Alto. Pass. html" ALT="Alto Vineyards"> <AREA SHAPE=RECT COORDS="423, 181, 515, 247" HREF=" Owl. Creek. html" ALT="Owl Creek Winery"> <AREA SHAPE=RECT COORDS="202, 75, 279, 125" HREF=" Von. Jakob. html" ALT="Von Jakob Winery"> </MAP> ________________________________________________________ PHP Bible, 2 nd Edition 19 Wiley and the book authors, 2002
Client-side imagemaps (cont. ) n There are 3 shapes that most browsers support in the <area> tag (all points are measured in pixels): Ø Ø Ø shape=“rect” coords=“x 1, y 1, x 2, y 2”: where the point x 1, y 1 is the top left corner and x 2, y 2 is the bottom right corner of the rectangle shape=“circle” coords=“x, y, r”: where the point x, y is the center of the circle and y is the radius shape=“poly” coords=“x 1, y 1, x 2, y 2, …, xn, yn”: where each x, y coordinate pair is a vertex along the path that surrounds the area. At least 3 pairs are required to define a triangle. Complex polygons generate a long list of coordinates ________________________________________________________ PHP Bible, 2 nd Edition 20 Wiley and the book authors, 2002
When not to use imagemaps n n Imagemaps are not always the best solution. Sometimes, slicing up a large image, each slice of which can be linked to a different document, and holding the pieces together with a table often offers functionality that an imagemap can’t match see http: //www. globaleyes. net/Antiques/ This approach only allows for rectangular clickable areas, however ________________________________________________________ PHP Bible, 2 nd Edition 21 Wiley and the book authors, 2002
Providing complete alternative text n n Normally, when a user cannot display images, the browser displays the text specified by the alt attribute in the <img> tag. Unfortunately, imagemaps can only display 1 alternative text message. One solution is to provide a redundant set of links in the HTML somewhere else so that users who cannot view graphics or work with imagemaps can still navigate the site ________________________________________________________ PHP Bible, 2 nd Edition 22 Wiley and the book authors, 2002
Linking documents with <link> n n n The <link> tag is used to define a relationship between the current document and another external document It is always placed in the header of the document There can be multiple <link> tags within a document The most important attributes are href which points to the linked file, and rel which describes the relationship from the source document A variety of attributes make the <link> tag very versatile. The most popular application of the <link> tag is for referring to an external style sheet <link href=“wholesite. css” rel=“stylesheet” type=“text/css”> ________________________________________________________ PHP Bible, 2 nd Edition 23 Wiley and the book authors, 2002
- Slides: 23
