Images and Anchors

Using Images as Links

Welcome Xhtml Rules Agenda DocType Web Terms XHTML Elements Meta Elements Block Level Elements Lists Text Format Font Attributes Horizontal Rule Special Entities Tag Review Project I

Anchor Tag Linking Tips Insert Images Image Formats Image Attributes Image Links HexColors Web Safe Colors Project 2

Why CSS? Inline CSS Embed CSS Linked CSS CSS Attributes Font Families Font CSS Text CSS Color CSS List CSS Project 3

Div or Span Background Images Display Position Z-index Clip and Visibility Border CSS Pseudo Classes Project 4 CSS Summary

Web Resources Final Check Course Review

Inserting images within a paragraph is easy. Start with placing the image tag <img> along with the attributes src and alt. The align tag (being replaced with CSS float:left )insures that the text will wrap that image. Include horizontal and vertical space (replaced with CSS padding) around the image to make reading easier and turn the border off border="0". Mouseover this image.

CSS Image Float Property

The align attribute has be deprecated for CSS float property.

image{float:left; margin;15px; width:100px; height:100px; border: 1px solid green}

This group consists of hardy and tender shrubs and woody climbers. They are mostly deciduous plants, though a few of the tender species are evergreen. They are natives of the Himalayas, North and South America, and central and eastern Asia. They come in an array of colors from pure white to brilliant crimson, pale lilac to intense azure.

Create an Image Link

<p> <a href="hydrangea.html" title="Hydrangea Plant" >
<img src="hydrangea.gif" alt="Hydrangea " width="100" height="100" /> </a>
</p>

Link to a Larger Image View - Button

Use html forms to create a button. to activate the button, useJavascript event handler- onClick- to call the function that displays a file with a larger view of the image.
<input type="button" value="View Larger Image" onClick="mywin()">

Link to a Larger Image View- Anchor Large Image

The html anchor displays the file in a targetted window with the larger image view:
<a style="text-decoration:underline" href="largeimage.html" target="_blank" title="Large Image">View the Large Image