Putting A Picture On The Web Page
Adding graphics to a website makes it look nice and pretty, and it just so happens that the img tag puts a picture on the web page. It is a single tag, no closing tag required:
src is an attribute, it tells the browser where to find the picture. The stuff in the quotation marks is the file name of the picture and includes its extention (.jpg). Replace filename.jpg with the file name of your picture and be sure it’s between the quotes.
To keep things simple, for now store your pictures in the same place you keep your web pages, so if you keep your webpages in a folder called "my pages", put your pictures there too.
Every picture on a web page has its very own img tag:
<img src="button2.gif">
That will put two pictures side by side on the page:
If an img tag is enclosed between the opening and closing p tags, the other image will start on a new line:
<img src="button2.gif">
Result:
Give your pictures a description by adding an alt attribute to the img tag:
The alt attribute will make the description appear if a browser does not display images. In some browsers the description will also pop up when a mouse pointer is moved over the picture.
Image Format
The most widely used image formats are gif or jpg format. The gif format is suitable for pictures with solid blocks of color such as charts, or when an image requires a transparent background. The jpg format is suitable for pictures with subtle color changes such as photos.
Pictures used on websites need to be optimized so that they won't take too long to load. For more info see Optimizing Graphics. Next we're going to make links in lesson 6.
