To add an image to our webpage, it would usually be best to add the image to our folder first. We can use any picture for this. If you don’t have a picture to work with, you might want to take one from a free picture-sharing website, such as StockVault.
Once we have a picture in the same folder as your HTML page, we can add that picture to our webpage. We start by adding an <img /> tag. As you can see, this tag is a self-closing tag. In case you forgot, this means that the tag has no ending tag. This tag can go anywhere in the body, but we can put it right after our </a> tag, and before our </BODY> tag.
Now that we have an <img /> tag, we can add an attribute that links this tag to our picture. This attribute is the “src” attribute. Notice that while some attributes are universal and can be applied to any HTML element, some attributes are specific to certain elements. The “href” is specific to the <a> tag, and the “src” attribute is specific to the <img /> tag.
If I choose a picture named “sunset.jpg”, then my attribute would be "src='sunset.jpg'". Keep in mind that when you link to your picture, you MUST include the file extension (.jpg, .gif, .png, etc). All pictures should also use the attribute “alt”, with text that will appear if the image cannot be displayed for some reason. Once we have these attributes on our <img /> tag, our code should look something like this:
The next step is very simple, yet is used all over the internet. If we wanted to link our image to another webpage, we could simply put an <a> and corresponding </a> tag around the image. Let’s do this by simply taking our “<img src=”sunset.jpg” />” code, and placing it inside our <a> tag that links to our external HTML page. Once this is done, that section of our code should look something like:
There are tons of other HTML tags to use on your page! Go to my HTML tag list and try them out!
Previous Next