HTML images


Images form integral part of HTML documents.We use images as links,for making web pages look exciting,etc.
Types of images in HTML:
  1. jpg-These are just simple images.
  2. GIF-These type of images are animated images.
  3. PNG-These type of images contain graphical data.

Inserting an image in HTML

Syntax:

<img src="image location" alt="image info" style="width:145px;height:145px;">

    Notation:

  • Image location means image address on server or on local device.
  • Alt element contains text that is to be displayed when HTML images are not fully loaded.
  • Width and height attributes are important to use because if they are no mentioned images acquire entire area as there default size.

Example:

Inserting images located on same server.
<!DOCTYPE html>
<html>
<head>
<title>
HTML IMAGES
</title>
</head>
<body>
<img src="logo.jpg" alt="coding" style="width:145px;height:145px;>
<p>This image is locted on same server. </body>
</html>
If the images are located in different folder on same server then mention the location of image in src element.

Output:

coding
This image is located on same server.

Example:

Inserting images located on other server.
<!DOCTYPE html>
<html>
<head>
<title>
HTML IMAGES
</title>
</head>
<body>
<img src="https://drive.google.com/open
?id=0ByMFPlYvOGKcS0xtRF96UH
VJQ28" alt="coding" style="width:145px;height:145px;>
<p>This image is locted on same server. </body>
</html>

Output:

coding

Images as link in HTML

Images are often used as links in HTML.How it is done is described below.

Example:

<!DOCTYPE html>
<html>
<head>
<title>
IMAGES AS LINK IN HTML
</title>
</head>
<body>
<a href="http://www.codecera.com">
<img src="logo.jpg" alt="coding" style="width:145px;height:145px;">
</a>
</body>
</html>

Output:

Click on this image.
coding