HTML - Images

Image Tag How to

<img> tag is used in html to link to images within a web site or to display images from external sites.

Note: Images used in the examples below are from haniyateen web site and are re-published with permission from the owner.

Image Display Simple

simple image tag along with sample that can be clicked

<img src = "/img/00194.png" alt="smiley face" />
<br/>
<a href="http://haniyateen.com/c117-cool-names-smiley-faces/">
<img src = "/img/00194.png" alt="smiley face" /></a>

This is how it will appear in a browser

View above example output in a new browser window

Modify Image Dimensions

<a href="http://haniyateen.com/c2-cool-quote-graphics-famous/">
<img src = "/img/00141.png" /></a>
<br/>
<a href="http://haniyateen.com/c2-cool-quote-graphics-famous/">
<img src = "/img/00141.png" width="250" height="80" /></a>
<br/>
<a href="http://haniyateen.com/c2-cool-quote-graphics-famous/">
<img src = "/img/00141.png" width="150" height="60" /></a>
<br/>
<a href="http://haniyateen.com/c2-cool-quote-graphics-famous/">
<img src = "/img/00141.png" width="100" height="45" /></a>

This is how it will appear in a browser

View above example output in a new browser window

Image Alignment Sample Code

View above example output in a new browser window

Insert a Background picture

<html>
<head>
<title>Hello World</title>
</head>
<body background="/img/00194.png">
Page with smiley face as background
</body>
</html>

View above example output in a new browser window