HTML Images and the img Tag

• HTML images can be added to make websites more attractive.

Inserting Images

• Images can be inserted into a webpage in two ways:
• Providing a full URL to access an internet file
• Providing the file path relative to the current webpage file

The <img> Tag

• The <img> tag adds or embeds images into a webpage, is an empty tag (no closing tag), and can contain a list of attributes.
• It improves the quality, design structure, and appearance of the webpage.
• Websites link images using the <img> tag, which holds the space for the image.
• Syntax: <img src="url" alt="some_text" width="" height="">

Attributes of the <img> Tag

• src: Specifies the path to the image.
• alt: Specifies alternate text for the image if the image cannot be displayed due to network issues; informs the user about the image.
• height: Specifies the height of the image.
• width: Specifies the width of the image.

src Attribute Details

• src stands for "source" and tells the browser where to find the image.
• The URL of the image points to its stored location.
• When the webpage loads, the browser fetches the image from a web server and inserts it.
• A broken link icon appears if the image is not found, possibly due to a wrong file path or deleted image.

alt Attribute Details

• If the image cannot be displayed, the alt attribute provides an alternative description as user-defined text.
• This often occurs due to a slow internet connection, an error in the src attribute, or the use of a screen reader.

Setting Width and Height

• The width and height attributes specify the dimensions of the image in pixels by default
• It is always declared in pixels

Adding Titles

• Titles provide further information related to the inserted image
• The title attribute is used for inserting a title.

Styling Images

• The border property decorates the image.
• All pictures have a border by default
• The thickness of the border may be changed using the border attribute
• A thickness of "0" means no border around the picture

Aligning Images

• By default, an image aligns on the left side of the page.
• The align attribute can align the image to the center or right

Animated Images

• Animated images in .gif format can be added using the "img" tag

Image as Background

• Images can be used as a background for a webpage using the background-image property of CSS.

Hyperlinks to Images

• To make an image a link to another HTML page:
• Write the HTML code in a text editor.
• Place the cursor before the <img> tag in the HTML document.
• Use the anchor tag <a> for linking the page.
• Add the href attribute to the starting <a> tag, specifying the path to the HTML page.
• Save the HTML file and run it in the browser.

Image Maps

• The HTML <map> tag defines an image map
• An image map is an image with clickable areas defined by one or more <area> tags

Clickable Areas

• A clickable area is defined using an <area> element.

Shape Attribute

• The shape attribute defines the shape of the clickable area
• rect: Defines a rectangular region
• circle: Defines a circular region
• poly: Defines a polygonal region
• default: Defines the entire region

Shape="rect"

• Coordinates come in pairs for the x and y axes
• Coordinates 34,44 are 34 pixels from the left margin and 44 pixels from the top
• The coordinates 270,350 is located 270 pixels from the left margin and 350 pixels from the top

Shape="circle"

• Locate the coordinates of the center of the circle
• Specify the radius of the circle

Shape="poly"

• Contains several coordinate points, which create a shape formed with straight lines (a polygon)
• Can be used to create any shape
• X and y coordinates for all edges is found