ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing

ExpertRating Home
ExpertRating Benefits
Recommend ExpertRating
Suggest More Tests
Privacy Policy
HTML Tutorial - Index
HTML Tutorial - Introduction
HTML Tutorial - Formatting
HTML Tutorial - Links
HTML Tutorial - Images
HTML Tutorial - Forms
HTML Tutorial - Tables
HTML Tutorial - Frames
HTML Tutorial - Style Sheets
HTML Tutorial - Advance Tags

Online Personal Trainer Certification
Personal Trainer Certification (Spanish)
Six Sigma Certification
Find a Personal Trainer
Project Management Certification
Six Sigma Certification
Six Sigma Black Belt Certification
Master Black Belt Certification
Six Sigma Green Belt Certification
Life Coach Certification
Lean Management Certification
Lean Six Sigma Certification
First Aid Certification
CPR Certification
Yoga Certification
Aerobics Certification
Pilates Certification
Business Analyst Certification
SEO Certification
Online Business Writing Course & Certification
Makeup Artist Certification
Baby Sitting Course & Certification
Time Management Certification
Health Club Management Certification
Medical Coding Certification
Medical Billing Certification
Business Analysis Course
Master Trainer Certification
Total Quality Management Certification
Kaizen Certification
Creative Writing Certification
Event Management Certification
Test Search by Job Title
Administrative Assistant Certification
Virtual Assistant Certification
  All Online Courses


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

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.


<img attributes />


Attributes of <img> Tag


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


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



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


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



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


<img src=”c:\images\img1.jpg alt=”this is my image” width=105 />



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


<img src=”c:\images\img1.jpg alt=”this is my image” height=100 />



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


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



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


<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:


<title> My list of jokes </title>
<body background ="myimage.jpg" text = “blue”>
<h1>This is my list of jokes </h1>
<li>Classic jokes </li>
<li>Math jokes </li>
<li>Food jokes</li>
</ul> <hr/>
<li>Crazy jokes</li>
<li>Ethnic jokes</li>
<li>Food jokes</li>
</ul> <hr/>
<img src="image1.jpg" alt="my image" height=100 width=100 border=2/>

This is how the web page looks:



Home  |  About Us  |  Privacy Policy  |  Site Map  |  FAQs  |  Contact Us
© ExpertRating 2015. All Rights Reserved.