Practice Review: Creating a Simple Webpage

Try this practice exercise to see how well you understood this unit. 

Read this article to review the concepts of elements, tags, links, and images. Then, follow the instructions to create an idex.html webpage.

You can copy the HTML code for each section and paste it into Notepad (Windows), TextEdit (Mac), or an editor of your choice. Be sure to create a folder structure on your computer modeling the Working with Files section, and you can use your own image. 

Your completed index.html file contains:

  • a document header;
  • an image tag;
  • heading tags;
  • a list; and
  • a link.

This exercise does not count towards your grade. It is just for practice!

Make sure you complete all parts of this example before you continue to the next section, "Introduction to CSS".

Images

Let's turn our attention to the <img> element again:

<img src="images/firefox-icon.png" alt="My test image">

As we said before, it embeds an image into our page in the position it appears. It does this via the src (source) attribute, which contains the path to our image file.

We have also included an alt (alternative) attribute. In this attribute, you specify descriptive text for users who cannot see the image, possibly because of the following reasons:

  1. They are visually impaired. Users with significant visual impairments often use tools called screen readers to read out the alt text to them.
  2. Something has gone wrong causing the image not to display. For example, try deliberately changing the path inside your src attribute to make it incorrect. If you save and reload the page, you should see something like this in place of the image:


The keywords for alt text are "descriptive text". The alt text you write should provide the reader with enough information to have a good idea of what the image conveys. In this example, our current text of "My test image" is no good at all. A much better alternative for our Firefox logo would be "The Firefox logo: a flaming fox surrounding the Earth".

Try coming up with some better alt text for your image now.

Find out more about accessibility in our accessibility learning module.