Scribd
Upload
36 views

HTML

This document provides examples of HTML code for embedding images in web pages. It shows how to display an image using the <img> tag and src attribute. It also demonstrates how to make an image a hyperlink, set the size of an image, add alt text for accessibility, and align images within text using the align attribute. The code examples are accompanied by explanations of what each snippet of code does.

Uploaded by

Zawadi ZawadiFree
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
36 views

HTML

This document provides examples of HTML code for embedding images in web pages. It shows how to display an image using the <img> tag and src attribute. It also demonstrates how to make an image a hyperlink, set the size of an image, add alt text for accessibility, and align images within text using the align attribute. The code examples are accompanied by explanations of what each snippet of code does.

Uploaded by

Zawadi ZawadiFree
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 1

HTML Image Examples Here are some examples of HTML codes for an image tag Example: http://www.library.carleton.ca/images/banner.

jpg HTML Image Code to display an embedded image: The code: <img src="http://www.library.carleton.ca/images/banner.jpg"> Meaning: This code use the src attribute to display the desired non-clickable (static) image in an entry. HTML Image Code to display an hyperlink image OR hyperlink of a Text: The code: <a href="http://www.library.carleton.ca/images"><img src="banner.jpg"</a> Meaning: The image `banner.jpg' acts like an icon button that links the user to the indicated HTML document. <a href="DESTINATION URL"><img alt="" width="SIZE" src="IMAGE URL" height="SIZE"/></a> HTML Image Code to display sized image: The code: <img src="http://www.library.carleton.ca/images/banner.jpg" width="288" height="192"> Meaning: This code simply displays the desired image with the given width and height dimensions. HTML Image Mouseover Code: The code: <img src="http://www.library.carleton.ca/images/banner.jpg" width="288" height="192" alt="Sample Image"> Meaning: Adding the alt attribute to the image Tag lets you add a description to the image. The description will be displayed when the mouse pointer hovers over the image. HTML Code to Display an Alternative text when image browser cannot load image The code: <img src="banner.jpg" <img src alt="Go Left" width="288" height="192"> Meaning: HTML Code to Align an image within a text: The code: <img src=" http://www.library.carleton.ca/images/banner.jpg" width="288" height="192" align="bottom" width="48" height="48"> in the text Meaning: A paragraph with an image. The align attribute of the image is set to bottom. The image will float parallel to the text. Let the image float to the left of a paragraph <img src="web.jpg" align="left" width="48" height="48"> Meaning: A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text.
1

You might also like