outline

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