Example 1
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<title>Setting Image Dimensions in HTML</title>
</head>
<body>
<img src="/images/kitten0.png" alt="kittens" width="300" height="300">
<img src="/images/hacker.png" alt="Hacker" width="250" height="150">
<img src="/images/kitten1.png" alt="Kittens" width="200" height="200">
</body>
</html>Example 2
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example image alignment</title>
</head>
<body>
<p>This image <img src="/images/kitten0.png" alt="Smiley" style="vertical-align: top;"> is aligned vertically top of the text.</p>
<p>This image <img src="/images/kitten1.png" alt="Smiley" style="vertical-align: middle;"> is aligned vertically center of the text.</p>
<p>This image <img src="//images/hacker.png" alt="Smiley" style="vertical-align: baseline;"> is aligned to the baseline of the text.</p>
</body>
</html> Make a hyperlink of an image
Example 3
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of linking images</title>
</head>
<body>
<p><a href="/images/kitten0.png"><img src="/images/kitten0.png" alt="Kittens"></a></p>
</body>
</html>Example 4
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML image map</title>
</head>
<body>
<h1>Click on a shape to see how it works:</h1>
<img src="/images/shapes.png" alt="Geometrical Shapes" usemap="#shapes">
<map name="shapes">
<area shape="circle" coords="40,40,40" href="/examples/circle.html" alt="Circle">
<area shape="poly" coords="148,2,104,80,193,80" href="/examples/triangle.html" alt="Triangle">
<area shape="rect" coords="226,2,323,80" href="/examples/rectangle.html" alt="Rectangle">
<area shape="poly" coords="392,2,352,32,366,80,418,80,432,32" href="/examples/pentagon.html" alt="Pentagon">
</map>
</body>
</html>