XHTML and CSS - Adding Images to a Webpage
Adding Images to a Webpage
In this tutorial we'll be learning how to add images into a webpage, in order to do this we need a image, I'm going to be using the banner for this site, so first thing you need to do is download that, you can download the image here. Save the image in the same directory as your index.html page. In order to add a image to your website, you need to use html's img tag, img has one attribute that is required that is src, it stands for source.
<html> <head> <title> This is the title. </title> </head> <body> <img src="banner.png"> </body> </html>
If you want to resize a image you can do so with the attributes width and height.
<html> <head> <title> This is the title. </title> </head> <body> <img src="banner.png" width="300px" height="100px"> </body> </html>
The px at the end of the number stands for pixels, so that image has now been resized to 300 pixels wide and 100 pixels high. Resizing images in html doesn't actually shrink the file so it wont make your webpage load any faster but it's still useful in some cases. You can also add tool tips to images using the title attribute.
<html> <head> <title> This is the title. </title> </head> <body> <img src="banner.png" width="300px" height="100px" title="A Bored Coder Banner"> </body> </html>

Page generated in 0.0057 seconds.