HTML - Tutorial 10

HTML Tutorial 10

Prepared by: Anthony Larrain

More on Images

Suppose you have an image file river2.jpg in the same directory as your html document with width 400 and height 152. Suppose the HTML file had the following code along with the text.

<img src="river2.jpg" width="400" height="152" alt="A picture of a river in the smokey mountains" title="Photo taken in the summer of 1985" />A river in the smokey mountain, taken summer 1985

Browser Display

A River in the Smokey Mountains, taken summer 1985.

Notice the image is placed in the normal flow of the document and the text continues next to the image along the bottom of the image
Can use the align attribute to adjust the text.
Values for the align attribute.

Bottom (The default Alignment)
Middle
Top

Example 1

<img align="middle" src="river2.jpg" width="400" height="152" /> A river in the smokey mountain, taken summer 1985 <img align="top" src="river2.jpg" width="400" height="152" /> A river in the smokey mountain, taken summer 1985

Browser Display

A river in the smokey mountain, taken summer 1985

Floating an image

We can use CSS to float the image to the left OR right and make the text wrap around the image.

See Examples beforefloat.html, float1.html and float2.html

To center an image we have to use the HTML <div> tag along with the align attribute. Or use the center tag.

See Example centerimage.html

HTML `div` tag

The div tag defines a division within a web page.
The div tag allows individual sections of an HTML page to be styled.
Browsers usually place a line break before and after the div element.

Multimedia and the World Wide Web

HTML Tutorial 10

More on Images

Browser Display

Example 1

Browser Display

Floating an image

HTML div tag

HTML `div` tag