Lesson 8: Images
graphics and images are an essential part of any webpage. In fact, it is the best way to depict complex concepts. This chapter discusses how images can be effectively used as part of webpages to enhance the look and functionality of the same.
Inserting Images
An image can be inserted into an html document using <img> tag. The syntax of using this tag is given below – <img src = "URL of image" list of attributes /> As it is evident from the syntax, the img tag is an empty tag. In other words, it does not have a closing tag. Sample code to illustrate how this tag works is provided below.<!doctype html>
<html>
<head>
<title>html Image demo</title>
</head>
<body>
<p>document body…</p>
<img src = "/html/images/sample.png" alt = "Sample" />
</body>
</html>
html supports gif, Png and jpeg/jpg formats. If you face trouble getting this tag right on your web browser, do not forget to check the path of the source file and its name. html is case sensitive in this regard and naming the file incorrectly is one of the commonest mistakes that people make while inserting or using an image file. The alt attribute given as part of the <img> tag is used to specify the text that must be displayed in case the image fails to load.
Setting the height and Width of Images
Setting the corresponding attributes can set the height and width of the image. html allows the programmer to mention height and width in terms of pixels or percentage. Sample code to illustrate how this can be done is shown below –<!doctype html>
<html>
<head>
<title>Set Width and height of Image demo</title>
</head>
<body>
<p>Setting width and height of image</p>
<img src = "/html/images/sample.png" alt = "Sample Image" width = "150" height = "100"/>
</body>
</html>
how to Set the border of Image
by default, images in html have a border. You can alter the thickness of the border to get the desired effect. For instance, you can set the thickness to 0 for a “no border” configuration. Sample code to illustrate how this can be done is provided below –
<!doctype html>
<html>
<head>
<title>Set Image border demo</title>
</head>
<body>
<p>Setting border of Image</p>
<img src = "/html/images/sample.png" alt = "Sample Image" border = "3"/>
</body>
</html>
how to Align Images
<!doctype html>
<html>
<head>
<title>Set Image Alignment demo</title>
</head>
<body>
<p>Align Image</p>
<img src = "/html/images/sample.png" alt = "Sample Image" border = "3" align = "center"/>
</body>
</html>
Also Read:-
Lesson 7 comments
Lesson 6 Meta tags
Lesson 5 Phrase tags
Lesson 4 formatting
Lesson 3 attributes of HTML
Lesson 2 Basic tags
Lesson 1 overview of HTML
0 टिप्पणियाँ