Images, Video, Favicons, & Tables

Adding Images to Your HTML

There are a couple of reasons for adding images to your HTML. One reason is that you would like to add an image for decoration. This means that if you took it off the page, the user would still be able to use and understand the page fully, because the image isn't adding any information they won't have otherwise. The other reason is because you have images that are necessary content, and if you remove them from the page the user would be lost or missing needed information.

Images have two required attributes: src, which tells the browser where the image is and should use a relative link, and alt, which uses text to describe the image so that you could imagine what it looks like if you can't see it. Remember that if your image has any text in it, you have to include that in the alt text. It is also important to add the height and width attributes, as it improves the way your page looks as it loads. Ensure that those attributes are taken from the image, after editing and saving it at the correct size. Not respecting the aspect ratio will make your images look distorted on the screen.

✱  Adding Decorative Images to HTML

As explained above, a decorative images is one that if you took it off the page, the user would still be able to use and understand the page fully, because the image isn't adding any information they won't have otherwise. When adding these in your HTML, you indicate that they are decorative by leaving the alt text attribute empty. You can't leave the alt attribute off completely, just blank. Generally though, you'll add decorative images using CSS.

Photo by USGS on Unsplash

✱  Adding Images as Content is HTML

For images that are content, and necessary for understanding the page (think products, maps, etc.) you cannot leave the alt text blank, and should use it to describe the image to the best of your ability. These should also use width and height attributes that come from the edited image itself.

Photo by Uwe Conrad on Unsplash

Adding Video to Your HTML

Many sites today use video, as it is something that audiences prefer. You can use multiple sources to allow the browser to play the one that it supports. This is especially handy if you are using a newer format, because you can also include older formats in case the user isn't in an updated browser. As with other resources on your site, you should use relative links for the src attribute.

Adding a Favicon to Your Web Page

A favicon serves a lot of purposes, as you saw in our lecture today. You can find the original png that we will use to create our favicon inside of the images folder. You can easily convert it to a favicon file type on the Favicon Generator website. Be sure to select to only generate the 16x16 favicon with the options below the file upload.

Please follow the instructions in class to get this working.

Using SVGs in HTML

There are a few ways that you can add an SVG to your page with HTML, and today we'll practice pasting their code directly into our HTML. You can also use a link to the file as the src for an image tag, but pasting the code allows us to do more with CSS later. Vector images are best for graphics, because they are defined with math, and will display perfectly at any size, which saves time when they load on the page.

We are going to paste an SVG icon for Facebook into the footer below to practice this. Notice that I have added an aria-label attribute to the links wrapped around those icons. It is used when there isn't any link text, like when you wrap a link around the image.

Using Tables in HTML

In HTML, tables are used for tabular data. Think of data similar to a schedule or what you might find easier to read in a spreadsheet format. Tables can cause issues on smaller screens, as they aren't responsive, so consider that if you add them to a page. If they will be small enough to fit on the screen, even with their data, you should be fine.