 |
| HTML and CSS tutorial for beginners in English |
Hello friends, welcome to KTL's HTML and CSS tutorial. Today we will study lesson 9.
In our previous lesson, we studied comments in HTML. We also saw how to display text in quotation marks.
Today we will see how to insert images in a web page.
Inserting an image in web page - <img>
<img> tag is used to display an image in a web page. <img> tag has 3 attributes. We will study them today.We will write a script to understand <img> tag. Open a new Notepad file. Copy all text from "Lesson-08".
Delete following lines - third paragraph.
<p>
He said, <q>Let us go to picnic today</q>
</p>
After second </p> give a <br /> tag.
Below <br /> tag write
<img src="hibiscus.jpg" alt="Hibiscus flower">
<img> tag is used to insert an image in a web page. In <img> tag "src" attribute is used to mention name of image file to be displayed. Its syntax is
src="image to be displayed".
Name of image is written in quotation marks. "alt" attribute specifies the alternative text to be displayed if image cannot be displayed in the web page.
<img> is an empty tag. It does not have a closing tag.
We use "style" attribute to mention width and height of an image. Alternatively, we specify width and height attributes without using style attribute. For example,
style=“width:100px;height:100px;"
or we can also write
width="100" height="100"
Here px stands for pixels. Width of our image displayed is 100 pixels. We can also use cm - centimeter or mm - millimeter instead of pixels. Therefore our <img> tag will look like this:
<img src="hibiscus.jpg" alt="Hibiscus flower" style=“width:100px;height:100px;">
Add this in our script just below our first <img> statement.
 |
| Figure 9-1 HTML img tag, src, style |
Click on the above figure for PDF file of source code. Save this file again as "Lesson-9. Save as "Lesson-9.html". From windows explorer double click on HTML document.
 |
| Figure 9-2. Images displayed in a web page |
Click on figure 9-2 to see actual output in web page. See the output. Our two images are displayed. Second image of specified size is displayed.
Important Points:
1. <img> tag displays an image in a web page.2. <img> has three attributes namely, src, alt, and style. Alternatively we can mention four attributes namely, src, alt, width, and height.
3. Make sure always to mention alt, width and height. Alt is used for alternative text to be displayed if image cannot be displayed. Style or (width and height) are used for dimensions of image displayed.
Lesson-08 Lesson-10
