Hello dear readers! welcome back to another section of my tutorial on Html. In this tutorial guide, we will be discussing about the Html images and the various ways that can be made use of in formating these images.
Images are important to beautify as well as to depict many complex concepts in a simple way on your web page. This tutorial post 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 have said in the previous tutorials we have had, the <img> tag is also one of the empty tags we have on Html, which means it can contain only list of attributes and it has no closing tag.
RECOMMENDED: HTML-Phrase Tags
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>
<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>
Feel free to try the above code out using your text editor for a better understanding. Note that it is very important practice to put all the images you want to 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 a 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 us keep the Html file text.html in our home directory and create a subdirectory for images in the home directory where we will keep all our image test.png.
RECOMMENDED: Html-Comments
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>
<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 an image width and height based on your requirements using width and height attributes. You can specify width and height of an image in terms of either the pixels or percentage of its actual size. You will get to know more about pixels and percentage when we start our tutorials on 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>
<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>
Feel free to try the above code out using your text editor for a better understanding. You can also drop your questions via the comment box below.
RECOMMENDED: Html Attributes
Setting Image Border
By default, an 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>
<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>
<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.
Alright guys! This is where we are rounding up for this tutorial post. In my next tutorial, we are going to be studying about Html Tables.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.