(9/28) FIXED An ERROR IN SAMPLE IMAGE CODE
Step 5 -- Adding images to your web page.
Acceptable image formats
Browsers handle two image formats: jpeg which is suited for photgraphic images with wide color variation, and gif which is better suited for cartoon-like pictures.
The img tag
The <img> tag is actually an inline, empty tag so think of it as <img /> that contains an attribute which is the filename of the picture to be displayed. So, this tag will cause the picture below to be inserted.
<img src="turkey.jpg"
alt = "A picture of a turkey" />
The alt attribute provides some text that can be displayed if the image is missing or otherwise not available or to be read for a visually impaired user.
Images are not block elements, so they should be included inside block elements like paragraphs. Spacing can be an issue. If several images are included in one block element, the browser will just display them across the page as space permits, then move on to the next line. Tables can be useful in this regard for multiple images
It is common to store images for a website in a subfolder in which case the folder name must be included, as in
<img src="images/turkey.jpg"
alt = "A picture of a turkey" />
Background images
Images can be brought in the backdoor, so to speak, by using an image for background. As a bad example, and a warning to control yourself if you have no artistic ability, imagine taking the picture of your favorite turkey (above), converting it to a light charcoal sketch, and saving the file as a new jpeg file background-turkey.jpg. Add this statement to your CSS code:
body {
background-image:url(background-turkey.jpg);
}
et voila! If you would like something more discrete, say one image, without repetition, the instructions
background-repeat: no-repeat; background-position:top center;
produce a more subdued effect.
