Upload
akhitha-babu
View
27
Download
1
Embed Size (px)
Citation preview
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).