3rd sem comp

WELCOMEBy,Akhitha Babu

Topic: HTML GRAPHICS

• Used to embed graphics in HTML pages.

• Defines an image in an HTML page.

• No ending tag.• Images are not

technically inserted into an HTML page, images are linked to HTML pages.

HTML Graphics- <IMG> tag

FILE FORMATSWeb graphics are generally served up in one of two formats: •GIF (short for Graphics Interchange Format)[ .gif file extension]•JPEG (short for Joint Photographic Experts Group) [.jpeg or .jpgfile extension]

•(src=“………”)•Instruct the browser where the server should look for the image that is to be presented to the user.•The path and filename of the image which specifies its location.•Image may be of same directory or same server or another server

srcIMG

ATTRIBUTES

•(alt=“string”)•Alternative content that can be displayed instead of image.•During slow connectionIncorrect src attributeScreen reader for visually impaired•This is a message displayed if the image could not be found.

altIMG

ATTRIBUTES

•(align=“{left| middle| right| top| absmiddle| absbottom}”)

alignIMG

ATTRIBUTES

•(hspace=“number”)•space between the image and the text to the left and right of it in pixels.

hspaceIMG

ATTRIBUTES

•(vspace=“number”)•space between the image and the text to the above and bottom of it in pixels.

vspaceIMG

ATTRIBUTES

•(width=“{number| percentage}”)•in pixels or percentage of the browser window width.•The width of the image. If this is not specified, the image will be the size as determined by the gif file. This can be set in pixels or a percentage

widthIMG

ATTRIBUTES

•(border=“number”)•in pixels• Sets a border of the specified width in pixels to be drawn around the image.

borderIMG

ATTRIBUTES

•(height=“{number| percentage}”)•in pixels or percentage of the browser window height.•The height of the image. •If this is not specified, the image will be the size as determined by the gif file.

heightIMG

ATTRIBUTES

• Embedded inside other elements such as anchors.

ie,To link an image to another document, simply nest the <img> tag

inside <a> tags.• Then the user left clicks on the image,

they will go to the designated link (rather, their browser will load a file

from the designated link).