1. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition1  Wiley and the book authors, 2002 Web Design in a Nutshell Chapter 11: Creating Links

2. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition2  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

3. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition3  Wiley and the book authors, 2002 Synopsis 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

4. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition4  Wiley and the book authors, 2002 Summary of tags related to linking  … : 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  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

5. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition5  Wiley and the book authors, 2002 Summary of tags related to linking (cont.)  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 Relative reference: … o Absolute reference: … o Named anchor: … o Named anchor in current file: … o To name an anchor: … o To send an e-mail: … o To a file via ftp: …

6. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition6  Wiley and the book authors, 2002 Summary of tags related to linking (cont.)  (no end tag): used within the tag of a client-side image map to define the specific “hot” (clickable) area.  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  … : encloses client-side imagemap specifications  name=“text” (required): gives the imagemap a name that is referenced within the tag

7. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition7  Wiley and the book authors, 2002 Summary of tags related to linking (cont.)  (no end tag): specifies the base pathname for all relative URLs in the document. This tag is placed in the section of the document  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)  (no end tag): defines a relationship between the current document and another document. This tag goes within the portion of the document. It is often used to refer to an external style sheet  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

8. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition8  Wiley and the book authors, 2002 Summary of tags related to linking (cont.)  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

9. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition9  Wiley and the book authors, 2002 Simple hypertext links The anchor ( ) 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 linking to you! A link from an image looks like: 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 tag

10. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition10  Wiley and the book authors, 2002 URLs 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 …  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  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 tag in the of the document

11. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition11  Wiley and the book authors, 2002 Linking within a document 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 tag with the name attribute Daily Stock Quotes  Fragments can also be named using the id attribute in any element tag Daily Stock Quotes  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 Current Quotes

12. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition12  Wiley and the book authors, 2002 Setting global link colors with style sheets You can apply almost any style sheet property to a link by using the anchor tag ( ) as a selector A {color: #FF0000;}  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: #FF0000;}  Visited links: A:visited {color: #FFFF00;}  Active links: A:active {color: #FF00FF;}  When the mouse is over a link: A:hover {color: #0000FF;}

13. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition13  Wiley and the book authors, 2002 Turning off underlines 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;}

14. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition14  Wiley and the book authors, 2002 Targeting windows 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 … If you set every link on your page to target a _blank window, every link will launch a new window

15. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition15  Wiley and the book authors, 2002 Targeting windows (cont.) 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 …  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)  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

16. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition16  Wiley and the book authors, 2002 Imagemaps 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

17. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition17  Wiley and the book authors, 2002 Creating imagemaps 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  MapEdit: http://www.boutell.com/mapedithttp://www.boutell.com/mapedit

18. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition18  Wiley and the book authors, 2002 Creating the map 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

19. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition19  Wiley and the book authors, 2002 Client-side imagemaps Client-side imagemaps have 3 components:  An ordinary graphic file (gif, jpeg, or png)  A map delimited by the tags containing the coordinate and URL information for each area  The usemap attribute within the image tag ( ) that indicates which map to reference  This sample map is located at: http://hosting.globaleyes.com/CCTB/Go-See-Do/WineTrail/ http://hosting.globaleyes.com/CCTB/Go-See-Do/WineTrail/

20. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition20  Wiley and the book authors, 2002 Client-side imagemaps (cont.) There are 3 shapes that most browsers support in the tag (all points are measured in pixels):  shape=“rect” coords=“x1,y1,x2,y2”: where the point x1,y1 is the top left corner and x2,y2 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=“x1,y1,x2,y2,…,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

21. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition21  Wiley and the book authors, 2002 When not to use imagemaps 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/http://www.globaleyes.net/Antiques/ This approach only allows for rectangular clickable areas, however

22. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition22  Wiley and the book authors, 2002 Providing complete alternative text Normally, when a user cannot display images, the browser displays the text specified by the alt attribute in the 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

23. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition23  Wiley and the book authors, 2002 Linking documents with The 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 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 tag very versatile. The most popular application of the tag is for referring to an external style sheet