HTML – IMAGES

This article will explain how to insert the image into webpage. In the beginning the web was just text, and it was boring. Some days later the ability was added embed images inside the webpages.

Insert image:

You can inset any image into your webpage by using tag. The below are example

<img src=”Image url…” >

Example:

So for example, if your image called abc.jpg and it is set in the same directory as your html page.

<!DOCTYPE html> 
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Image Insert here</p>
<img src="abc.png" alt="abc" />
</body>
</html>

This will produce the following result:

Image insert here

You can use PNG, JPEG or GIF image file based on your comfort but make sure you specify correct image file name in src attribute. Image name is always case sensitive.

The alt attribute is a mandatory attribute which specifies an alternate text for an image. This will be used for search engine optimization.

Image height and width:

You can give  the image height and width based on your  requirement  using width and height attributes.

The alt attribute is compulsory attribute which specifies an alternate text for an image, if the image cannot be displayed.

Location of the image

All images keep into one separate folder.so let’s keep one html file abc.html in our home directory and create sub directory images inside the home directory where we will keep our image abc.png

<!DOCTYPE html> 
<html>
<head>
<title>Insert Image into Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src="images/abc.png" alt="abc Image" />
</body>
</html>

Set Image Border

Image will have a border around it. You can specify the border width using border attribute.

<!DOCTYPE html> 
<html>
<head>
<title>  Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src="abc.png" alt=" abc Image" border="5"/>
</body>
</html>

Images on Another Server

Some website stored their images on servier. That can be access to below example

<!DOCTYPE html> 
<html>
<head>
<title>  Image On server </title>
</head>
<body>
<p>Setting On server </p>
<img src=" http://tutorwebdesign.com/images/abc.png" alt=" abc Image" border="5"/>
</body>
</html>

RECENT POSTS

Firefox CSS Hacks

admin
Wednesday, May 15th, 2019

Top 15 Web Design Trends 2018

admin
Friday, May 3rd, 2019