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
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>
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 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>
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.