HTML Image Elements Make Your Website Pop
Bring your website to life with images. Learn the HTML img tag to include photos, graphics, and animated gifs on your web page. Sharpen your site by adding titles, alt text, captions, and links to pictures with the figure, figcaption, and anchor tags.
- Click here for the full video transcript
>> MISS PIGGY-BACK: Dear Daisy, I found a picture of a robot on the web that I want to include on my website, but when I try to insert it in my page, all I get is this picture of legs on a beach! Sincerely, Miss Piggy-back
>> DAISY: Whoa, you can’t hotlink images like that! It’s not cool to include images from other websites on your own page. Many websites will serve a weird picture if you try to do that, like those beach legs that you saw. You’ll need to get your own images, but don’t worry. I have some you can use. Here’s an attractive robot you can use on your website, I’ll copy it into the images subfolder of this example website. Now in our index.html file, we can add the image with the img tag. The only attribute you need is the image source. This is the path to the file, relative to our index.html. Oh, trash! This image is way too big. Lets shrink it down with the width attribute. The width attribute takes a specific pixel value. Pixels are the little tiny dots of color that make up an image. By telling the browser to make this image 600 pixels wide, it proportionally reduces the height and width of our image to fit. We could also set the height of the image and stretch it disproportionately. This isn’t the best way to resize images, though. You should scale them with an image manipulation program like GIMP before putting them on your web page. Lets try a different image that I’ve already resized. Here’s a picture of a crab I met at the beach. I’m going to give this image two extra attributes called alt and title. Alt text is useful for blind users, because it describes an image that they wouldn’t be able to see visually, and the title text will provide a short description to any user that hovers over the image with their mouse. See how these images display next to each other? That’s because images are inline elements. If we wanted them to be separated, we’d need to use a br tag, or wrap them in a block level element. The figure element is useful when used with the figcaption element to add captions to pictures. We can also make images a link by wrapping them in an anchor tag. Images that are linked will be outlined in blue.
>> UNIQUE ID: I hope you’ve enjoyed this evening’s broadcast. You may have noticed the use of various image formats used throughout this video. Common image formats for the web are jpg, gif, and png. Jpg is a type of lossy format, meaning it is compressed to save disk space. It’s good for photographs and highly colorful or detailed images. The png and gif formats are lossless, and are best for images with few colors. Personally, I’m quite partial to the animated gif.
>> DAISY: We really brought our website to life with images today. We learned how to insert images into our HTML page and add titles, captions, and links to them.
In the next video, we’ll learn all about HTML tables while playing my favorite game with a very special guest.