Images, Video, and Other Types of Content

This lesson is part of the Web Programming 1 Course.

We have already added an image to a page in a previous lesson, now will dig a litte deeper into displaying various types of media content in a web page. To review, you can show an image in a web page by adding an img element and setting the src attribute to a path that links to the image. Here is the code that is similar to what we wrote back in the second lesson:

<img src="../images/eagle.png">

Remember that img elements are self-closing, which means that there is an opening tag, but no closing tag (also remember that self-closing tags cannot contain any child elements).

You have already learned that the src attribute is required for an img element because it indicates the path to the image to be displayed.

Another attribute that you should always add to an img element is the alt attribute. Setting the alt attribute to the proper value is extremely important for a few reasons. First, if for some reason, the image cannot be displayed, then the value of the alt attribute will appear in it's place, which at least gives your visiters and idea of what they should be seeing. Second, the value of the alt attribute gives information to search engines, they use this information in their search results algorithms. Finally, and maybe most importantly, the alt attribute is used by screen reader software, which is software created so that visually impaired people can surf the net. Screen reader software analyzes the content on a page reads it aloud using text-to-speech technology.

<img src="../images/eagle.png" alt="A bald eagle">

You can also add a width attribute to an img element. This allows you to control the size of the image.

<img src="../images/eagle.png" alt="A bald eagle" width="300">

In this case the width of the image will be 300 pixels. Pixels is the default unit of measure for an img element, but you could specify a percent value like this:

<img src="../images/eagle.png" alt="A bald eagle" width="50%">

I should point out that adding a width attribute to an img element is not the best way to set the width of an image. There are better ways, that include CSS code, which we'll explore later in the course.

Turning an Image into a Hyperlink

A common technique is to make images clickable links. You can do this by nesting an img element inside of an a element like so:

<a href="hobbies/bird-watching.html">
    <img src="../images/eagle.png" alt="A bald eagle" width="50%">
</a>

For the sake of mentioning some programming parlance, we could say that we 'wrapped' an a element around the img element. Or that we 'nested' an img element within an a element.

Embedding a YouTube Video in a Web Page

If you want to display videos on your web pages, a great technique to do so is to post the video on YouTube and then use an iframe element to embed the video in your page. You can actually use a feature on YouTube to generate the HTML code for you, as shown in the video above. Here is a review of the steps we took in the video:

  1. Go to YouTube and find a video that you want to put on your website
  2. Click on 'Share'
  3. Click on 'Embed'
  4. Copy the code snippet (it's an iframe element)
  5. Paste the code snippet into your HTML document

Links to Other Types of Files

You may want your web pages to link to other types of media/content, such as a Word document or a PDF file (for example, you may want to put a link to your resume on a web page so that people can download it).

To do this, you could add an a element to your web page and set the value of the href attribute to a path that leads to the file you want to share, like so:

<a href="../some-folder/resume.pdf">Click here to download my resume</a>