Instructions for HTML Exercise 3

Accessibility and media

In this exercise, you're continuing to work on your HTML page from Exercises 1 and 2. For exercise 3 you will add the following:

1. Add an image, including alt text
2. Add an embedded video or other embeddable media
3. Continue revisions for sentence style (see chapter 10)

Add at least 1 substantive/informational illustration to your html page.

The image below is an example of an informational illustration and includes a decriptive caption and alt-text.

1. Locate an image and link to it using the <img> element tag.

The markup for images looks like this:

<img src=“htp://url.whereyourimageis.net/thepicture.png” alt="Add your alt-text” />
  	

To add an image, locate an online image, something you can link to from the internet rather than a file I'd need to upload to our web space.

Images are not technically inserted into an HTML page, but instead are linked to the page. When you locate an image you want to include on your page, copy the source URL for that image. Paste the URL for the image in the src="" attribute of the element. Using the URL in the source attribute will call up that image through the link in your own HTML. See the w3schools tutorial for <img> tags.

Note: you must copy the URL for the image file itself, not just the page it's on. If you are using a Google image search, use the "Copy Image Location" option, not "Copy Link Location" or "Copy Image."

Image element tags are self-closing, so you don’t need a pair of tags.

In the alt="" attribute, include accessible alt text in plain language (you'll practice this in the Week 8 forum).

2. Make your image an active hyperlink

To make your image a hyperlink, nest the whole thing inside of <a> tags:

<a href= “http:// url.whereyourimageis.net”>
  <img src= “http://url.whereyourimageis.net/thepicture.png” alt=“Add your alt-text” />
</a>
  

3. Set height or width attributes if needed

Depending on your image, you may need to specify height and width. Those attributes are commonly measured in pixels (px), though other values can be used. If your image is too big, try setting the width attribute to width= “500px”.

<a href= “http:// url.whereyourimageis.net”&rt;
  <img src= “http://url.whereyourimageis.net/thepicture.png” alt= “Add your alt-text” width= “500px”/>
</a>
  	

4. Place everything into a figure element

Now that you've gone that far, let's go to go one step further and place your linked image inside of an HTML <figure> element, which will contain all the information about your image and information for displaying a caption. See MDN Web Docs reference for more information.

<figure>
  <a href= “http:// url.whereyourimageis.net”>
    <img src= “http://url.whereyourimageis.net/thepicture.png” alt=“Add your alt-text” width= “500px”/>
  </a>
  <figcaption>Your accessible caption goes here</figcaption>
</figure>
		

Embed at least one video or other embeddable media on your html page

You can also embed video and other content from popular sites like Vimeo, YouTube, or Giphy. Find a video or gif you’d like to embed on your page and copy/paste the embed code for that video/gif into your HTML markup.

• On YouTube or Vimeo, click the “share” icon under the video and select the “embed” option
• On Giphy, when you select a gif the embed code should be the first thing displayed

Continue revisions for sentence style

Keep on revising those sentences! Make them work for your users, who are not living in the 19th century!