3rd sem comp
TRANSCRIPT
![Page 1: 3rd sem comp](https://reader035.vdocuments.net/reader035/viewer/2022062310/58a2833f1a28ab891a8b6537/html5/thumbnails/1.jpg)
WELCOMEBy,Akhitha Babu
Topic: HTML GRAPHICS
![Page 2: 3rd sem comp](https://reader035.vdocuments.net/reader035/viewer/2022062310/58a2833f1a28ab891a8b6537/html5/thumbnails/2.jpg)
• 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
![Page 3: 3rd sem comp](https://reader035.vdocuments.net/reader035/viewer/2022062310/58a2833f1a28ab891a8b6537/html5/thumbnails/3.jpg)
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]
![Page 4: 3rd sem comp](https://reader035.vdocuments.net/reader035/viewer/2022062310/58a2833f1a28ab891a8b6537/html5/thumbnails/4.jpg)
•(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
![Page 5: 3rd sem comp](https://reader035.vdocuments.net/reader035/viewer/2022062310/58a2833f1a28ab891a8b6537/html5/thumbnails/5.jpg)
•(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
![Page 6: 3rd sem comp](https://reader035.vdocuments.net/reader035/viewer/2022062310/58a2833f1a28ab891a8b6537/html5/thumbnails/6.jpg)
•(align=“{left| middle| right| top| absmiddle| absbottom}”)
alignIMG
ATTRIBUTES
![Page 7: 3rd sem comp](https://reader035.vdocuments.net/reader035/viewer/2022062310/58a2833f1a28ab891a8b6537/html5/thumbnails/7.jpg)
•(hspace=“number”)•space between the image and the text to the left and right of it in pixels.
hspaceIMG
ATTRIBUTES
![Page 8: 3rd sem comp](https://reader035.vdocuments.net/reader035/viewer/2022062310/58a2833f1a28ab891a8b6537/html5/thumbnails/8.jpg)
•(vspace=“number”)•space between the image and the text to the above and bottom of it in pixels.
vspaceIMG
ATTRIBUTES
![Page 9: 3rd sem comp](https://reader035.vdocuments.net/reader035/viewer/2022062310/58a2833f1a28ab891a8b6537/html5/thumbnails/9.jpg)
•(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
![Page 10: 3rd sem comp](https://reader035.vdocuments.net/reader035/viewer/2022062310/58a2833f1a28ab891a8b6537/html5/thumbnails/10.jpg)
•(border=“number”)•in pixels• Sets a border of the specified width in pixels to be drawn around the image.
borderIMG
ATTRIBUTES
![Page 11: 3rd sem comp](https://reader035.vdocuments.net/reader035/viewer/2022062310/58a2833f1a28ab891a8b6537/html5/thumbnails/11.jpg)
•(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
![Page 12: 3rd sem comp](https://reader035.vdocuments.net/reader035/viewer/2022062310/58a2833f1a28ab891a8b6537/html5/thumbnails/12.jpg)
• 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).
![Page 13: 3rd sem comp](https://reader035.vdocuments.net/reader035/viewer/2022062310/58a2833f1a28ab891a8b6537/html5/thumbnails/13.jpg)