Saturday, July 8, 2017

Html-Images

Hello guys! welcome to this section of my tutorials on html where am gonna be talking about HTML images and the various ways by which we can format these images.
Images are very important to beautify as well as to depict many complex concepts in simple way on your web page. This tutorial will take you through the simple steps involved in making use of images on your web pages.

 
Insert Image
You can insert any image on your web page by using the <img> tag. Following is the simple syntax for using this tag.
<img src="image url"  .......   attribute-list />
Just like i said in the previous tutorials we have had, the <img> tag is also one of the empty tags we have on HTML, which means that, it can contain only list of attributes and it has no closing tag.

Example
<DOCTYPE html>
<html>
<head>
<title>Inserting Images In Web Pages</title>
</head>
<body>
<p>simple image insert</p>
<img src="test.png" alt="Test Image" />
</body>
</html>
You can try the above code out with your text editor using any image on your computer. Note that it is very important to put all the images you wanna work with in a particular folder for efficiency.
You can use different format of images like 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 mandatory attribute which specifies an alternate text for an image, if the actual image can not be displayed.

Setting Image Location
Usually we keep all the images in a seperate directory. So let's keep HTML file text.html in our home directory and create a subdirectory for images inside the home directory where we will keep all our image test.png.



Example
Assuming our image location is "image/test.png", try the following code below:

<DOCTYPE html>
<html>
<head>
<title>Inserting Images In Web Pages</title>
</head>
<body>
<p>simple image insert</p>
<img src="image/test.png" alt="Test Image" />
</body>
</html>
Note that its not compulsory to make use of the test.png that am using in this tutorial, you can make use of any image on your laptop or desktop.

Setting Image Width/Height
You can set image width and height based on your requirement using width and height attributes. You can specify the width and height of an image in termes of either pixels or percentage of its actual size. You will get to know more about pixels and percentage when we start talking about Cascading Style Sheets(CSS).

Example
<DOCTYPE html>
<html>
<head>
<title>Setting Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src="test.png" alt="Test Image" width="80"  height="150" />
</body>
</html>
You can try the above code out for better understanding.

Setting Image Border
By default, image has a border around it, you can specify border thickness in terms of pixels using border attribute. With a thickness of 0, it means their will be no border around the image.



Example
<DOCTYPE html>
<html>
<head>
<title>Setting Image Border</title>
</head>
<body>
<p>Setting image width and height</p>
<img src="test.png" alt="Test Image"  border="5" />
</body>
</html>
You can try the above code out for better understanding.

Setting Image Alignment
By default, image will be aligned to the left side of the page, but you can use align attribute to set it in the center or right.

 Example
<DOCTYPE html>
<html>
<head>
<title>Setting Image Align</title>
</head>
<body>
<p>Setting image width and height</p>
<img src="test.png" alt="Test Image"  border="5"  align="right" />
</body>
</html>
You can try the above code out for better understanding.

Well guys thats all we gonna be talking about in context to HTML images. See you in my next tutorial and goodluck!!

Links to previous tutorials on HTML : Html IntroductionHtml TagsHtml Document StructureThe Doctype Declaration , Html Basic Tags , Html Basic Tags2 , Html Elements , Html Attributes , Html Attribute 2 , Html Formating , Html Formatting[CONTINUATION] , Grouping Content , HTML-Phrase Tags , Html-Phrase Tags[CONCLUSION] , Html-Meta Tags , Html-Comments
Share:

0 comments:

Post a Comment