Including images in HTML documents

We have worked with text so far, but you can also include images in HTML documents. The are included using the <img> tag. For example, I used an <img> tag to include this picture of my grandson Lucas:

I specified which image to include using the src attribute of the <img> tag. The value of the attribute is the name of the file to be displayed. (If you view the source of this document, you will see that the file is named "lucas.jpg").

The <img> tag has other attributes. For example, the border attribute specifies the size of the border to put around an image. Here is the image of Lucas with thin border:

Here is a picture of Lucas with a thick border:

View the source and you will see that the value of the border attribute is a number. That number determines the width of the border in pixels. A pixel (short for "picture element") is just a geeky way of saying a dot. So, when we say "border" = 2, we are saying the border should be two dots wide.

If you look very closely at your computer screen, you will see that the picutres of Lucas are composed of small dots of different colors. Printed images are also made of dots.

Disclaimer: The views and opinions expressed on unofficial pages of California State University, Dominguez Hills faculty, staff or students are strictly those of the page authors. The content of these pages has not been reviewed or approved by California State University, Dominguez Hills.