Creating Links n241.tplt Tags related to linking <a>:…..</a> - defines an anchor within a document. An anchor is used to link to another document Link Examples <a href = "filename.html">…</a> - links to a local file <a href = "http://www.cs.iupui.edu/~aharris.html">…</a> - links to an external file Simple Hypertext Links The anchor <a> tag is used to identify a string of text or an image that serves as a hypertext link to another document Example:
A link to <a href = "http://www.cs.iupui.edu/~aharris">Andy's page </a> Absolute URLs Contains the following components
- a protocol identifier (http)
- a host name (the name of the server machine)
- the pathname
- a specific file name <a href = "http://www.cs.iupui.edu/~aharris.html">…</a> Relative URLs Provides a pointer to another document relative to the location of the current document If within your web page you can use a relative link, such as,
<a href = "talk.html">…</a> which links directly from your page to a file talk.html in your public_html directory Adding Images to Your Page <img src = URL> - displays the graphic that the URL defines <img src = URL
alt = text> - places alternative text that appears when the image is not displayed How Graphics Can Be Used As a simple graphic As a link As an imagemap As spacing devices Linking graphics To make a graphic a link, place anchor tags around the image tag Example:
- <a href = "document.html"><img src = "picture.gif"></a> Specifying width and height The width and height attributes indicate the dimension of the graphic in pixels. Example:
- <img src = "face.gif" width = 50 height = 50> This information allows the browser to lay out the page before the graphics download. Otherwise the page is redisplayed a second time with the graphics in place. Inline and External Graphics Inline graphics uses the <img src> tag to display the image on the page External graphics uses the <a>...</a> tag to link to the graphic. This allows the user to click on the link if they want to see the graphic. How to Stop Text Wrapping Text automatically wraps to fill the space along the side of an aligned graphic. To stop text wrapping insert a <br> with a clear attribute using one of three values (left, right, and all) Example:
<br clear = right> to begin the text below the graphic Images as a Positioning Tool This line is made with a red gif that is one pixel by one pixel. By using a height and width attribute you can manipulate the image.
this moves the text by manipulating the same image with the height and width attributes (h = 10, w = 70) Image Maps An imagemap is a single graphic with multiple "hotspots" that link to other documents The graphic is an ordinary inline image The "magic" is the result of special coding and map files that link pointer coordinated with their respective URLs Image Map Example