Anchor Tag - Image - HTML5

Anchor Tag and Images as Links

The image tag is actually an anchor.

It is used to place a graphic at a desired location.

It can also be used as a link to another document or image.

The code:
<img src="image.gif" alt=""/>

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 Eagle to see the Big Eagle in the iframe below.

Thumbnail Demo (Not Liquid)

Display in a New Browser Window

You can also choose to have the larger image open in a new browser window.

Click the little eagle again to see what it does.

The Actual HTML5 code

<p><a href="images/big-eagle.jpg" target="_blank"><img src="images/little-eagle.jpg" alt="Little Eagle" style="float: left;box-shadow:4px 2px 6px #010101; border: none"></a></p>

Button Images as Links

You can set button images in paragraphs or lists and use them like the thumbnail demo above. You can also open web pages .

We'll use this one to put a parrot in the iframe above.

The code:
<p><a href="images/parrot.jpg" target="picdisplay"><img src="images/hyperlink-demo.gif" alt="button demo" /></a></p>

iframe code
<iframe name="picdisplay" width="565px" height="848px" style="display:block; margin: 0 auto;box-shadow: 5px 5px 10px #202020"></iframe>

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/eagle.ico" class="inline" style="max-width: 25px" alt="eagle icon"></a> and find out more about using pictures in HTML pages.</p>