From the course: HTML for Educators

Working with images in HTML - HTML Tutorial

From the course: HTML for Educators

Start my 1-month free trial

Working with images in HTML

“

- [Instructor] Images can add visual interest and help inform your learners. In this chapter, we'll explore what every educator needs to know about using images in HTML. I'm in unit01.html, and I have a folder called images that has missing_pier.jpg. The image element is created with a single img tag. There's no closing tag. To appear on your page, you must tell the browser what image you want to display and where that image lives. This is done by adding an src, or source, attribute and setting that equal to quote the relative or absolute path to the image on the internet. Think of the source attribute as following all of the same rules that we learned about with the href attribute for links in the last chapter, except that instead of taking our learner to another destination like the href does, the source attribute embeds a remote resource into your page for your learner to experience. Now I have to admit, this blew my mind when I was first learning to write webpages. The fact that with this simple code, you could dynamically assemble a single page of content from parts that could be living on servers anywhere in the world, and the browser would assemble them into a single cohesive page on your screen on the fly. Let's create a relative link to the missing_pier.jpg file by typing in images/missing_pier.jpg. In terms of types of images that can be displayed on your webpage, there are several, but the three most common are jpegs, gifs, and pngs. Jpegs are commonly used for photographs and they have the .jpg file extension. Gifs can include transparency, and can be either a static or an animated image. The animated gif has been experiencing a bit of a renaissance in the past few years. Gifs have a .gif file extension. Png, or pings, are an extremely flexible image format. They're a vector-based image that can also include an alpha channel or transparency. Now that your browser knows where to get which image that you want it to display, the next thing you need to tell the browser is what size you want the image to be displayed at, and you do that by adding a width and/or height attributes. If you just enter a number into these attributes, then the browser will assume you're referring to the pixel dimensions that you want the image to be displayed at. For instance, I'll enter 560 for the width and 311 for the height, which is the same as saying I want this image to be displayed at 560 pixels wide and 311 pixels high. If you want the browser to stretch the width or height of the image according to the size of the page or its containing element, then you can set the width and height to a percentage. We'll look at this in a later movie. Finally, you should add an alt attribute and describe the image. This is the text that would be read by screen readers and it would be displayed if your image failed to load on your page. Be descriptive with your alt text. I'll add "Image from Belize showing the remains of a pier "after a tropical storm struck the island." Then don't forget to add the ending bracket to close your tag. Let's save our work and preview the page.

Contents