<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #f2f2f2;
}
.topnav a {
float: left;
color: #000080;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size:20px;
}
.topnav a:hover {
background-color: #ddd ;
color: black;
}
.topnav a.active {
background-color:#000080 ;
color:white;
}
header, footer {
padding: 1em;
color: white;
background-color: #000080;
clear: left;
font-size:large;
text-align: center;
}
nav {
float: left;
max-width: 180px;
margin: 0;
padding: 1em;
}
nav ul {
list-style-type: none;
padding: 0;
font-size:20px;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 170px;
border-left: 1px solid gray;
padding: 1em;
overflow: hidden;
}
.icon-bar a {
float: left;
width: 5%;
text-align: center;
padding: 13px 0;
color: #000080;
font-size: 25px;
}
.vertical-menu {
width: 180px;
}
.vertical-menu a {
background-color:#eee;
color:black;
display: block;
padding:15px;
text-decoration: none;
}
.vertical-menu a:hover {
background-color: #ccc;
}
.vertical-menu a.active {
background-color: #000080;
color: white;
}
a{
text-decoration: none;
display: inline-block;
padding: 9px 17px;
}
a:hover {
background-color: #ddd;
color: black;
}
.previous {
background-color:#000080;
color: white;
}
.next {
background-color: #000080;
color: white;
margin-left:780px;
}
</style>
</head>
<body>
<header>
<h1>HTML</h1>
</header>
<div class="topnav">
<div class="icon-bar"> <a class="" href="index.html"><i class="fa fa-home"></i></a> </div>
<a href="allprolang.html">All Languages</a>
<a href="c_overview.html">C</a>
<a href="cpp_overview.html">CPP</a>
<a href="java_overview.html">JAVA</a>
<a class="active" href="html_overview.html">HTML</a>
<a href="css_overview.html">CSS</a>
<a href="javascript_overview.html">JAVASCRIPT</a>
<a href="python_overview.html">PYTHON</a>
<div class="icon-bar"> <a class="" href="#"><i class="fa fa-search"></i></a> </div></div>
<nav>
<div class="vertical-menu">
<a href="html_overview.html">Overview</a>
<a href="html_editors.html">Editors</a>
<a href="html_basicsyntax.html">Basic Syntaxes</a>
<a href="html_elements.html">HTML Elements</a>
<a href="html_attributes.html">Attributes</a>
<a href="html_headings.html">Headings</a>
<a href="html_paragraphs.html">Paragraphs</a>
<a href="html_comments.html">Comments</a>
<a href="html_styles.html">Styles</a>
<a href="html_formatting.html">Formatting</a>
<a href="html_quotes.html">Quotes</a>
<a href="html_links.html">Links</a>
<a href="html_tables.html">Tables</a>
<a href="html_lists.html">Lists</a>
<a href="html_forms.html">Forms</a>
<a href="html_htmlWithCss.html">Html with Css</a>
<a class="active" href="html_images.html">Images</a>
<a href="html_colors.html">Colors</a>
</div> </nav>
<article>
<a href="html_htmlWithCss.html" class="previous">« Previous</a>
<a href="html_colors.html" class="next">Next »</a>
<h1 style="color:#000080";>Images In Html</h1>
<p>Images improve the appearance and illustrate many concepts of the web pages.</p>
<h3>Inserting Images in HTML Documents</h3>
<p>The web is not just about text, its multi-media and HTML's multimedia features allow you to include images, audio clips, video clips, and other multimedia element in the web pages.</p>
<p>The <img> tag is used to insert images in HTML documents. It is an empty element and contains attributes only. The syntax of <img> tag can be given with:</p>
<table border="" width="500"><tr><td>
<img src="url" alt="some_text"></td></tr></table>
<p>The following example inserts three images on the web page:</p>
<h3>
Example</h3>
<table border="" width="500"><tr><td><pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of HTML Images</title>
</head>
<body>
<div>
<img src="image1.png" alt="html1">
<img src="image2.png" alt="html2">
<img src="image3.png" alt="html3">
</div>
</body>
</html></pre></td></tr></table>
<h3>Output</h3>
<table>
<img src="images/html_images1.png" alt="html1">
<img src="images/html_images2.png" alt="html2">
<img src="images/html_image3.png" alt="html3">
</table>
<p><b>Note:</b> Like <br> , the <img> element is also an empty element, and does not have a closing tag. In XHTML it closes itself ending with "/>".</p>
<h3>The Src Attribute of Images</h3>
<p>Every image has a src attribute (src stands for source). The src attribute tells the browser where to find the image you want to display. The URL of the image provided as the value of src attribute points to the location where the image is stored.</p>
<h3>
The Alt Attribute of Images</h3>
<p>
The alt attribute is the alternative description for an image, if the image cannot be displayed. The value of the alt attribute is an author-defined text.</p>
<h3>Setting Width and Height of an Image</h3>
<p>
The width and height attributes are used to specify the height and width of an image.</p>
<p>
The attribute values are specified in pixels by default.</p>
<h3>Example</h3>
<table border="" width="500"><tr><td><pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Setting Dimensions for Images</title>
</head>
<body>
<div>
<img src="image1.png" alt="html1" width="300" height="300">
<img src="image2.png" alt="html2" width="250" height="150">
<img src="image3.png" alt="html3" width="200" height="200">
</div>
</body>
</html> </pre></td></td></table>
<h3>Output</h3>
<table border="" width="500"> <td>
<img src="images/html_images1.png" alt="html1" width="300" height="300">
<img src="images/html_images2.png" alt="html2" width="250" height="150">
<img src="images/html_image3.png" alt="html3" width="200" height="200">
</td></table>
<p><b>Note: </b>It's a good practice to specify both the width and height attributes for an image. In the absence of these attributes the image loads with its original size that may cause distortion or flicker in your website layout.</p>
<h3>HTML Image Tags</h3>
<table border="" width="500"><tr><th>
Tag</th><th> Description</th></tr>
<tr><td>
<img></td><td> Defines an image.</td></tr>
<tr><td><map></td><td> Defines an image-map.</td></tr>
<tr><td><area></td><td> Defines a clickable area inside an image-map.</td></tr></table>
<br><br>
<a href="html_htmlWithCss.html" class="previous">« Previous</a>
<a href="html_colors.html" class="next">Next »</a>
</article>
<footer>Devoloped by LE's</footer>
</div>
</body>
</html>