Learning Code

Images and Links

Images and links are important for adding visual interest and to aid in the navigation of a site.

Images

Images help to make a webpage more visually interesting. Images should be stored inside of an image folder for better site organization.

<body>
<img src="images/sprite.gif" alt="Image with three shapes is missing" title="Three Shapes" style="width:150px; height:50px;">
</body>

An image element is one of the few that uses a single tag. There is no separate closing tag for an image. There are 4 attributes that should be included for any image:

  • src (short for source) - this is the location/path for the image
  • alt (short for alternate) - this is text that displays if the browser cannot find the image
  • title (intended for screenreaders) - this is text that displays in a tooltip when a cursor hovers over the image
  • style (this is actually for adding CSS) - to add the size of the image
Image with three shapes is missing Image with three shapes is missing

While other coding languages often put spaces around an = sign, DO NOT add those spaces when writing in HTML.

Links

Links are necessary to help your users access other pages on your website and also to navigate to other websites.

<body>
<a href="index.php"> Back to Home </a>
</body>


Go to Home

The a is short for anchor and href is an attribute that represents hyper-reference (where you add the path for the link).

Target Attribute

If you are adding a link that leaves your website, you should have it open in a different tab. Adding target allows you to do just that:

<body>
<a href="http://www.google.com" target="_blank"> Go to Google </a>
</body>


Go to Google

Image Links

Image links are links where an image is the link instead of text. An entire image element is placed between the opening and closing a tags.

<body>
<a href="images/sprite.gif"><img src="images/sprite.gif" alt="Image with three shapes is missing" title="Three Shapes" style="width:150px; height:50px;"></a>
</body>
Image with three shapes is missing

Image Mapping

Image Maps allow links to be added to just a specific section of an image. This can be handy to add a link back to the homepage just on the logo - or to add different links to different products in the same image.

<body>
<img src="images/sprite.gif" style="height: 100px; width: 300px;" alt="Map example" usemap="#examplemap">
      <map name="examplemap">
            <area shape="circle" coords="50,50,45" href="#">
            <area shape="rect" coords="190,15,110,80" href="#">
      </map>
</body>
Map example

Circle Map Coordinates

  1. First coordinate = horizontal position
  2. Second coordinate = vertical position
  3. Third coordinate = radius

Rectangular Map Coordinates

  1. First coordinate = position along the x-axis (top-left)
  2. Second coordinate = position along the y-axis (top-left)
  3. Third coordinate = position along the x-axis (bottom-right)
  4. Fourth coordinate = position along the y-axis (bottom-right)

The coordinates are based on the location of the top-left corner of the area element. The coordinates of that corner are 0,0. Setting the first 2 coordinates at 0,0 is helpful to make sure your map is working.

Can you use the Try-it Editor to try out these concepts?