saftutorials.com
HTML Images Tutorial

HTML image is tag which is used for Display image on your website. Its use by <img> tag. This tag not needed for close tag like </img>. Image is a most important content for a website. 

How to use image in HTML?

First write image tag <img src="your image source">

Basic structure of HTML Image
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Image Tutorials</title>
</head>
<body>
<img src="Your image source">
<p>Example</p>
<img src="../uploads/sample.png">
</body>
</html>

HTML Image with fixed width and height
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Image Tutorials</title>
</head>
<body>
<img src="Your image source">
<p>Example</p>
<img src="../uploads/sample.png" width="100" height="100">
</body>
</html>

Image Alter Text

HTML Image with Alter and Title attribute

HTML Alter text and Title is most important for a Website for image search in any Search Engine. When user search any image a search engine then search engine search who image are Alter text and Title. So be careful when you add an image in your website for alter text and image title.

HTML Image with Alter and Title attribute
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Image Tutorials</title>
</head>
<body>
<img src="Your image source">
<p>Example</p>
<img src="../uploads/sample.png" alt="Image Alter Text" title="Title Text">
</body>
</html>

Image Alter Text
HTML Image with Link
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Image Tutorials</title>
</head>
<body>
<a href="yourlink"> 
<img src="../uploads/sample.png" width="200" height="200">
</a> 
</body>
</html>

HTML Image with Animated Photo
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Image Tutorials</title>
</head>
<body>
<img src="../uploads/sample.gif">
</body>
</html>

HTML Image with Inline CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Image Tutorials</title>
</head>
<body>
<img src="../uploads/sample.png" style="border:1px solid red;width:250px;height:250px;" >
</body>
</html>

HTML Image with Embeded CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Image Tutorials</title>

<style type="text/css">
  img
  {
    border: 5px solid #000;
    width: 250px;
    height: 250px;
    border-radius: 20%;
  }
</style>

</head>
<body>
<img src="../uploads/sample.png">
</body>
</html>

HTML Image with Circle Photo
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Image Tutorials</title>
</head>
<body>
<img src="../uploads/sample.png" style="border:5px solid black;width:250px;height:250px;border-radius:50%;" >
</body>
</html>

Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic