Expertrating - HTML Tutorial, Images

Home > Courses, Tutorials & eBooks > HTML Tutorial > Images

HTML Tutorial - Images

Page 1 of 2

The previous sections were confined to the design of web pages/HTML documents that contain only textual content. This section elucidates the technique of inserting images in the web page, making the web page more pleasing to the eye. It goes a step further in assisting the user to personalize the HTML document.

HTML enables authors to display images in a document. Images make the web page look good. When a picture compliments the text on the web page, it generates more enthusiasm in the user.

Image Tag

The image tag is written as <img>. This is used to display an image in an HTML document. The image tag is a singular tag, which means it need not be closed as </img>. But, the latest version of HTML does not support this. In the latest version, the image tag is to be closed by putting a (/) backslash, e.g. <img/>.

The Image tag is similar to the anchor tag as discussed earlier, in the sense that the image tag alone does not perform any function. It has to include various attributes so that the image can be displayed on the page.

Example:

<img attributes />

Attributes of <img> Tag

Src

Src is the source attribute. It indicates the location or the path of the picture to be displayed on the web page.

Example:

<img src=”c:\images\img1.jpg” />

Alt

lt is an attribute, which displays an alternative text if the picture is not displayed on the web browser.

Example:

Width

The width attribute determines how wide the picture is to appear on the web page.

Example:

Height

The height attribute determines the height of the picture that has to appear on the web page.

Example:

Align

The align attribute sets the alignment or the position of the picture in relation to the text around it.

Example:

Border

The border attribute sets a border around the images. A border value greater than 0 puts a border around the image.

Example:

<img src=”c:\images\img1.jpg alt=”this is my image” align=left border=2/>

The following is an example of a web page with an image:

Example:

<html>

<head>

<title> My list of jokes </title>

</head>

<h1>This is my list of jokes </h1>

<ul>

<li>Classic jokes </li>

<li>Math jokes </li>

<li>Food jokes</li>

</ul> <hr/>

<ol>

<li>Crazy jokes</li>

<li>Ethnic jokes</li>

<li>Food jokes</li>

</ul> <hr/>

</body>

</head>

This is how the web page looks:

ExpertRating HTML Certification - Get Certified Now!!