How to Use Anchor Tags and Images as Links
The image tag is actually an anchor.
It is used to add an image to a page at a desired location.
It can also be used as a link to another document or image.
The code:
<img src="image.gif" alt="alternate text">
This code simply displays the image.
Required Attributes: (There are only 2 in HTML5)
src path/filename of image
alt Brief description of image
*All other attributes are set using style sheets.
Approved Alignment Methods
The float property
<img src="sam.gif" style="float: left / right" alt="text">
The margin for centering
<img src="sam.gif" style="display: block; margin: 0 auto">.
Other Possible Attributes
border Set in style sheet.
box-shadow Set in style sheet.
display: block/inline Set in style sheet. (very handy)
Image as Hyperlink
To use an image as a hyperlink, the code is:
<a href="samesite.htm"><img src="image.gif"></a>
Actual code:
<a href="#top-test"><img src="images/sample.gif" class="imagel" alt="Demo"></a>
Id attribute was used in the h1 header tag at top of page:
<h1 id="top-test">HTML Code Tutorial</h1>
Thumbnails and Larger Images
To use Thumbnail images to present larger images.
<a href="large_image"><img src="thumbnail"></a>
Click on the Little Buddy to see the Big Buddy in the iframe below.
The code:
<p><"images/buudy-2-400.jpg" target="picdisplay"><img src="images/buddy-2-100.jpg" alt="buddy image"></a></p>
iframe code
<iframe name="picdisplay" width="400px" height="433px" style="display:block; margin: 0 auto;box-shadow: 5px 5px 10px #202020"></iframe>
Thumbnail Demo (Not Liquid)
Swapping Technique Used for Responsive Design
We were presented with a problem in the iframe demo presented above. Note the line 'Thumbnail Demo (Not Liquid)'. When viewed at 360 pixels device width the fixed width iframe was too large at 400 pixels wide.
Couldn't find anyone that knew how to create an elastic empty iframe that would adapt to a targetted image, so we used the swapping technique that is used for swapping different sized images on a page. Heres the actual code and CSS we used to solve the problem.
HTML5 Code
The links:
<p class="iframelink1"><a href="images/buddy-2-400.jpg" target="picdisplay1"> <img src="images/buddy-2-100.jpg" alt="Buddy Thumb" class="l-img"></a></p> <p class="iframelink2"><a href="images/buddy-3-300.jpg" target="picdisplay2"> <img src="images/buddy-2-100.jpg" alt="Buddy Thumb" class="l-img"></a></p> The iframes: <iframe class="iframeswap1" name="picdisplay1"></iframe> <iframe class="iframeswap2" name="picdisplay2"></iframe>
The CSS
iframe.iframeswap1 {
display:block;
width: 400px;
height:433px;
margin: 0 auto;
box-shadow: 2px 2px 4px #202020
}
iframe.iframeswap2 {
display:block;
width: 300px;
height:325px;
margin: 0 auto;
box-shadow: 2px 2px 4px #202020
}
iframe.iframeswap2 , p.iframelink2 {display:none}
The Media Query:
@media all and (max-width: 470px){
iframe.iframeswap1 , p.iframelink1 {display:none}
iframe.iframeswap2 , p.iframelink2 {display:block}
}
Display in a New Browser Window
You can also choose to have the larger image open in a new browser window.
Click the little Buddy again to see what it does.
The Actual HTML5 code
<p><a href="images/big-buddy.jpg" target="_blank"><img src="images/little-buddy.jpg" alt="Little Buddy" style="float: left;box-shadow:4px 2px 6px #010101; border: none"></a></p>
Inline Icons as Links
HTML5 makes adding images inline a little easier.
We'll demonstrate by creating an image class.
The Basic HTML5 code
<p><img src="" class="inline" alt=""></p>
The CSS
img.inline {
display: inline;
border:none;
box-shadow:none;
padding: 0 2px;
margin: 0 0
}
Click the icon 
find out more about using pictures in HTML pages.
Actual HTML5 Code for this Link
<p>Click the icon <a href="paragraph_images.html"><img src="images/buddy-2-100.jpg" class="inline" style="max-width: 25px" alt="buddy icon"></a> and find out more about using pictures in HTML pages.</p>