HTML Images Examples

Back to HTML Examples List

This page contains examples of HTML images - examples of image-specific code that you can use for your own website.

To use the code, copy it straight from the text box and paste it into your own website. Feel free to modify it as required.

Code

Result

<p>Image:</p> <img src="/pix/milford_sound/milford_sound_t.jpg" style="max-width:100%" alt="Milford Sound in New Zealand" /> <div class="more-info">More info: <a href="http://www.quackit.com/html/tags/html_img_tag.cfm">HTML <code>&lt;img&gt;</code> Tag</a>, <a href="http://www.quackit.com/html/tutorial/html_images.cfm">HTML Images</a>, <a href="http://www.quackit.com/web_graphics/free_website_graphics/">Free Website Graphics</a>.</div>

Image: More info: HTML <img> Tag, HTML Images, Free Website Graphics.

Code	Result
<p>Image With Border:</p> <img src="/pix/milford_sound/milford_sound_t.jpg" style="max-width:100%;border:3px solid black;" alt="Milford Sound in New Zealand" /> <div class="more-info">More info: <a href="http://www.quackit.com/html/codes/html_image_borders.cfm">HTML Image Borders</a>, <a href="http://www.quackit.com/css/properties/css_border.cfm">CSS <code>border</code> Property</a>.</div>	Image With Border: More info: HTML Image Borders, CSS border Property.

Code

Result

<p>Linked Image:</p> <a href="http://www.natural-environment.com/blog/2008/04/22/fiordland-national-park-new-zealand/"><img src="/pix/milford_sound/milford_sound_t.jpg" style="max-width:100%" alt="Milford Sound in New Zealand" /></a> <div class="more-info">More info: <a href="http://www.quackit.com/html/codes/html_image_link_code.cfm">Image Link Code</a>, <a href="http://www.quackit.com/html/tutorial/html_image_maps.cfm">Image Maps</a>, <a href="http://www.quackit.com/html/tags/html_a_tag.cfm"><code>&lt;a&gt;</code></a>.</div>

Linked Image: More info: Image Link Code, Image Maps, <a>.

Code

Result

<p>Linked Image, No Border:</p> <a href="http://www.natural-environment.com/blog/2008/04/22/fiordland-national-park-new-zealand/"><img src="/pix/milford_sound/milford_sound_t.jpg" style="max-width:100%;border:0;" border="0" alt="Milford Sound in New Zealand" /></a> <div class="more-info">More info: <a href="http://www.quackit.com/html/codes/html_image_link_code.cfm">Image Link Code</a>, <a href="http://www.quackit.com/html/codes/html_image_borders.cfm">HTML Image Borders</a>, <a href="http://www.quackit.com/css/properties/css_border.cfm">CSS <code>border</code> Property</a>, <a href="http://www.quackit.com/html/tags/html_a_tag.cfm"><code>&lt;a&gt;</code></a>.</div>

Linked Image, No Border: More info: Image Link Code, HTML Image Borders, CSS border Property, <a>.

Enjoy this page?

2. Link to this page (copy/paste into your own website or blog):
   <a href="http://www.quackit.com/html/examples/html_images_examples.cfm">HTML Images Examples</a> from Quackit.com
3. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!