HTML/CSS - 6

HTML/CSS - 6: Working with Images

Images can make a webpage much more interesting. In HTML, images are added with the <img> tag.

The <img> tag usually needs at least two important pieces of information: src tells the browser where the image file is, and alt gives the image a text description.

You can also use width to control how wide the image appears on the page.

For example: <img src="photo.webp" alt="A mountain at sunset" width="500">

Your challenge: Build a small waffle gallery using the two images provided. Add both images, give each one useful alt text, and try changing their widths.

What should you notice?

Unlike headings and paragraphs, the <img> tag does not wrap around text. The information it needs is written directly inside the tag as attributes.

The src attribute points to the image file. If the filename is wrong, the browser will not be able to display the image.

The alt attribute gives the image a text description. Good alt text should briefly describe what the image shows rather than simply saying "image" or "picture".

Experiment: Change the width of one image from 600 to 300. Then try 800. Notice how the same image can appear at different sizes without changing the original file.

Try this: Temporarily misspell one of the image filenames inside src. What happens in the Live Output? Change it back when you are finished.

Good HTML habit: Include useful alt text when an image communicates information. It helps describe the image when it cannot be seen or loaded.

<h1>My Waffle Gallery</h1>

<img
  src="water-waffles.webp"
  alt="Waffles floating underwater"
  width="700">

<img
  src="space-waffles.webp"
  alt="Waffles floating through space"
  width="600">