Manuscript for HTML Tutorial #19

Listed below is the manuscript of all textual instructions used in HTML Tutorial #19 - Inserting Images into Your Web Page. Most of this text is displayed inside the yellow balloons used to guide viewers as they watch the lessons.

Students and instructors may find it helpful to have a hard copy of these balloon instructions. You may print this web page to use as an aide in following, referencing, or demonstrating the web design series.

Manuscript Table of Contents

Entire HTML Tutorial Series

Tutorial #19 - Inserting Images into Your Web Page

Lesson #19: Images. Click the play button to begin the tutorial.
In this lesson, we will see how to embed images into our web page.
An image, or graphic, is a separate picture file that is linked to a web page in such a way, as to appear to be inside of the page itself.
If you don’t have any web graphics of your own, you may use some of the Free Graphics from our web graphics section.
We will place our graphics in the same directory as our other web files. This will make them easier to link to.
Notice that these image files have a gif extension.
Gif is a widely used format for high contrast web images.
Another popular format is jpeg, a.k.a. jpg, which is used for continuous tone images like photographs.
There are other image formats that may work in certain web browsers. Although, gif and jpeg are more universally supported.
Let’s bring up our html source document, so we can add an image.
The tag for images uses the img element.
Of course we’ll have to tell the tag which image to use, so we’ll include the src (source) attribute.
Since our image is in the same directory as this document, we can just use its filename for the src value.
The image tag is an empty tag. So it has no closing tag.
Let’s see how it looks.
It looks like our image is pushing the rest of our content down the page.
But actually, it’s this paragraph that’s pushing itself, and other content away from the image.
Remember, block-level containers are inside of invisible boxes that maintain their integrity.
If we placed an image inside of a paragraph container, it would flow along with the other content.
We’ll just insert a smiley face gif right here.
An image is an inline element. It behaves just like text when placed in the same container.
In addition to the src attribute, there are three other attributes that should be used in all images. We will learn about those attributes in Lesson #20.

<<<Tutorial #18

Tutorial #20>>>