HTML Images Syntax In HTML images are defined

alt Attribute • The value of the alt attribute should describe the image: <img

Style: Image Size - Width and Height Using the style attribute to specify the

align attribute <img SRC="iraq. jpg" align=“bottom"> < img SRC="iraq. jpg" align =“top"> < img

vspace , hspace and border attributes < img SRC= "iraq. jpg" vspace =“ 20

Images in Another Folder • it is common to store images in a sub-folder.

Images on Another Server • Some web sites store their images on image servers.

<html> <head> <title>HTML-Images</title> </head> <body> <head> <h 1 style="color: blue; "> Computer Sciences</h 1>

Slides: 12

Download presentation

HTML Images Syntax • In HTML, images are defined with the <img> tag. • The <img> tag is empty, it contains attributes only, and does not have a closing tag. • The src attribute specifies the URL (web address) of the image: <img src=“image name">

alt Attribute • The value of the alt attribute should describe the image: <img src="iraq. jpg" alt=“Flag of Iraq">

Style: Image Size - Width and Height Using the style attribute to specify the width and height of an image. <img src="iraq. jpg" alt=“Flag of Iraq" style="width: 500 px; height: 600 px; ">

Style: Image Size - Width and Height Using the style attribute to specify the width and height of an image. <img src="iraq. jpg" alt=“Flag of iraq" width="500" height="600">

align attribute <img SRC="iraq. jpg" align=“bottom"> < img SRC="iraq. jpg" align =“top"> < img SRC="iraq. jpg" align =“middle"> < img SRC="iraq. jpg" align =“left"> < img SRC="iraq. jpg" align =“right">

vspace , hspace and border attributes < img SRC= "iraq. jpg" vspace =“ 20 px” hspace = “ 30 px” border= “ 5” align =“right“/>

Images in Another Folder • it is common to store images in a sub-folder. You must then include the folder name in the src attribute: <img src="C: UsersPublicPicturesSample PicturesKoala. jpg“>

Images on Another Server • Some web sites store their images on image servers. (for example: i. pinimg. com) <img src= "https: // i. pinimg. com /236 x/06/9 d/e 6/069 de 614312 bf 7 bf b 6 a 656884740 b 79 d--coreldrawbunga. jpg">

<html> <head> <title>HTML-Images</title> </head> <body> <head> <h 1 style="color: blue; "> Computer Sciences</h 1> </head> <center> <img src="iraq. jpg" alt="Flag of iraq" width="128" height="128" border="6" > </center> <img src="iraq 2. jpg" alt="Flag of iraq" style="width: 128 px; height: 128 px; "> <img src= "https: //i. pinimg. com/236 x/06/9 d/e 6/069 de 614312 bf 7 bfb 6 a 656884740 b 79 d-coreldraw-bunga. jpg"> <center> <img src="C: UsersPublicPicturesSample PicturesKoala. jpg" width="128" height="128" border="1"> </center> </body> </html>

Thank You