HTML: Clearing a graphic

This entry is part 31 of 34 in the series HTML

We have the image floating on the left and say if we have 2 paragrahs and we would like the second paragraph to start at the left margin, we can appy a clear attribute to the second paragraph.

<p style='clear: left'>The city has...</p>

Codecrawl.com-Image

HTML: Controlling image size

This entry is part 32 of 34 in the series HTML

Image size is expressed in pixels.  If you want, you can specify only the width, the height will be resized proportionally.  Or you can specify the height.

The original image size below is 800 x 600.  We specify the height to 200px.

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Image</title>
</head>
<body>

<img src='//codecrawl.com/code/images/ushuaia.jpg' height='200'>

</body>
</html>

We can also provide a fixed size to the image as in:

 

 

HTML: Image margin

This entry is part 33 of 34 in the series HTML

If we find the text to be too close to the image, we can set a margin to the the image.

Here we set a right margin of 10px to the image.
Codecrawl.com-Image

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Image</title>
</head>
<body>

<img src='//codecrawl.com/code/images/ushuaia1.jpg' style='float: left; margin-right: 10px'>
<h3>Welcome to Ushuaia!</h3>

</body>
</html>

HTML: Creating graphical hyperlink

This entry is part 34 of 34 in the series HTML

To create a hyperlink on an image, we place the <img> tag in an <a> tag.

You can refer to an earlier example where we have created a hyperlink to a webpage.

Codecrawl.com-Image

<!DOCTYPE html>
<html>
<head lang='en'>     
    <meta charset='UTF-8'>
    <title>Codecrawl.com-Image</title>
</head>
<body>

<a href='http://en.wikipedia.org/wiki/Ushuaia' title='Ushuaia'><img src='//codecrawl.com/code/images/ushuaia1.jpg'></a>

</body>
</html>

Just in case that the image is not loaded for some reason, we could put an alternate text on the image.

<img src='//codecrawl.com/code/images/ushuaia1.jpg' alt='Ushuaia'>