Images help to make a webpage more visually interesting. Images should be stored inside of an image folder for better site organization.
<img src="images/sprite.gif" alt="Image with three shapes is missing" title="Three Shapes" style="width:150px; height:50px;">
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
While other coding languages often put spaces around an = sign, DO NOT add those spaces when writing in HTML.
Links are necessary to help your users access other pages on your website and also to navigate to other websites.
Go to Home
<a href="index.php"> Back 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).
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:
Go to Google
<a href="http://www.google.com" target="_blank"> Go to Google
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.
<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>
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.
<img src="images/sprite.gif" style="height: 100px; width: 300px;" alt="Map example" usemap="#examplemap">
<area shape="circle" coords="50,50,45" href="#">
<area shape="rect" coords="190,15,110,80" href="#">
Circle Map Coordinates
- First coordinate = horizontal position
- Second coordinate = vertical position
- Third coordinate = radius
Rectangular Map Coordinates
- First coordinate = position along the x-axis (top-left)
- Second coordinate = position along the y-axis (top-left)
- Third coordinate = position along the x-axis (bottom-right)
- 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.