Image Handling in HTML

Transcript

We've put a lot of text on a web page. I think it's time we spice the pages up with something a little more visual, like an image on my web page. 

So this lesson is about images and managing their position on a page.

I have an h2 with the text, “Our Pets”.  Underneath Our Pets. I have two h3s for my future pets, each with a short description and an image. Coding an image is a bit different than coding, any of the other tags we've learned so far, because it doesn't have a close tag. We call this a self-closing tag.

This kind of makes sense. You put text between tags and it showed up in the browser, but you probably wouldn't want to put text over an image. 

So how do we get images to show up?  First, you need to find a good image. 

There's really no shortage of pictures on the internet. Once you have identified a image you want to use, you need to follow these simple steps. 

1. Click the image and select the visit Image option and copy the web address for the image from the search bar. 

2. Click the image and select the visit Image option 

3. Copy the web address for the image from the search bar. 

Next you need to code the image tag to tell your browser the location of your image. You can do this with something called an attribute.  To code an attribute, you put the name of the attribute inside the open tag, followed by an equal sign, then the value inside quotes.

To tell your browser what image to use to use the attribute named src, that's short for source, of course. Now, I'll need the extra information or value. In this case, it's the location of my image that I copied from the search bar. I'll paste that address in between the quotes. and there's the image.

Cool huh? In the next lesson we are going to learn how to create a table of contents and improve the navigation of your web site.