Search within TutorialsPark

HTML Images


How to add and control Images on HTML document.


bullet in slow motion ;

Images make your webpages more informative, detailed and Attractive.So,images are an integral part of modern webpages and used extensively all over. Use images for logos, diagrams , charts etc.

Common Image Formats

JPEG: - JPEG handles color very well.Should be prefered format for detailed images.

GIF: - GIF is alight weight format(256 color).Allows animated images using frames.Useful for logos,icons and other low detail images.

PNG: - Another format similar to GIF(256 color). Can easily be compressed into smaller sizes without any loss in detail.Best suited for logos,icons, bottons etc.


How to embed(or Add) images ?

1.Use the < img > element to embed your image onto the webpage

2.The src attribute indicates the location of the image to be embedded(generally a relative URL adress). For eg: src="xyz.png"

3."alternate":The alt attribute which stands for "alternate" provides Textual description of the image .
This text is not readable by the user but provides information about the image to search engines line Google, Bing etc.
Image search uses this attribute extensively. Eg: alt="This is my image"

Syntax of an image

Example of an Image.

Give it a TRY! »


SCALING OF IMAGES.

You can modify the display size of the image by specifying the width and height.

Width: Specifies the width of the image in pixels. You can also use percentage.For eg: 50%.

Height:Specifies the height of the image.You can also use percentage. Eg: 30%.

Width and Height Syntax.

Width and Height example.

Give it a TRY! » Note: As a good development practice,always specify width and height and the size specified must not be too small or large compared to original size of the image, otherwise the images may look distorted.


Image Hyperlinks.

Facebook_Icon Twitter_icon Google_icon

1.Image Hyperlink is used to create links between Webpages,but unlike text you use Images in this case.

2.Encapsulate an <img> element between the < a > tag,similar to how we did with text hyperlinks .

Image Hyperlinks Example.

Give it a TRY! »




Image Placement.

1. Lets explore the effects when an Image is placed in between or around text contents.

Before a Paragraph: Since paragraph is block level element it starts on a new line

At Start of a Paragraph: The first line align with the graphics, in case image is at the end of a paragraph the last line would align.

In Between a Paragraph: Image appears right in between the contents of the paragraph.

Image Placement Example.

Give it a TRY! »




We will learn More about Images and their alignment and placement, using CSS properties within our CSS section.






Related Examples

Related Tags