Web Development Course - Class #6

Image Tags

If we want to add images to our web pages,we use <img> tag.Image tag is a non-pair tag(Means it has no closing tag).

For Example:

<img src=" " alt=" " title=" " />

It carries following attributes:

Src:

This tells the browser where it can find the image file. This will usually be a relative URL pointing to an image on your own site.

Alt:

This Attribute is used for giving text description of the image.

Title:

We can use title tag with the <img> tag to provide additional Information about the image.

Height and Width of Images

Height:

This attribute of <img> tag is used to manage the Height of Image in Pixels.

Width:

This attribute of <img> tag is used to manage the width of Image in Pixels.

For Example:

<img src="csexpert.jpg" alt="CS Expert Team" width="600" height="450" />

Where to Place Images

in Your Code

Where an image is placed in the code will affect how it is displayed. We can place our images in the Code By Three Ways.Examples are given below:

1.Before a Paragraph:

The paragraph starts on a new line after the image.

2.Inside the Paragraph:

The first row of text aligns with the bottom of the image.

3.In the Middle of Paragraph:

We can place image between the words of paragraph.

For Example:

<img src="expert_2.png" alt="Bird" width="100" height="100" />

<p>Here is the example to place image on the top of the Paragraph.</p>

<hr />

<p><img src="expert_2.png" alt="Bird" width="100"

height="100" />Here is the example of Placing Image in start of a paragraph.</p>

<hr />

<p>Here is the Image is in the Midle of <img

src="expert_2.png" alt="Bird" width="100"

height="100" />Paragraph.You can see here.</p>

HTML 5: Figure and

FigCaption

<figure>

Images often come with captions. HTML5 has introduced a new <figure> element to contain images and their caption so that the two are associated.

We can use many images in the <figure> tag.

<figcaption>

The HTML 5 introduced the <figcaption> tag to allow the developer to add caption to the Image.Before Introducing this tag ,It was impossible to add caption to an image..

For Example:

<figure>

<img src="expert_2.png">

<br />

<figcaption>Welcome to my Blog CS Expert.

figcaption>

</figure>