First, create a folder on your desktop and name it whatever you want. This is where you will hold all of your files for this lesson. Now you will need to find the image that you want to use. Copy the image that you selected into the newly created folder. When you create your HTML page, save it into this folder also. Now, create an HTML page including this code:
Code:
<img src="your-image-filename.jpg" alt="my messy boy!">
Output:
The Breakdown:
The first thing that we should take note of is that your image element is self-closing, meaning that, unlike something like a p element, which uses and opening (<p>) and closing (</p>) tags, an image element uses just one tag that closes itself with a ‘/’ at the end. Think about it this way… when you create a paragraph, you need to first tell the paragraph that you are starting a paragraph, then type all of the content for the paragraph, and then tell the browser that the paragraph is over. With an image, all that you need to do is tell the browser that you want a particular image placed on the page, so there is no need to open and close it – it stands on its own.
Now, how did we tell the browser which image we wanted to place? The answer is the src attribute. We simply set the src attribute to the location of the image. Since we saved our HTML page and image in the same folder, we need only to specify the name of the image. If instead we created a folder named “my_folder”, and saved our HTML file in there, then created a folder called “images” inside of the “my_folder” folder, then our src would be “images/image.jpg”.
You can also specify an absolute image src by entering the full URL of the image, for example:
<img src="http://www.webdesign-lessons.com/images/your-image-filename.jpg" alt="my messy boy!">
This is useful when the image is not on the same website as the HTML file.
Lastly, let’s talk about the alt attribute. The purpose of this attribute is to tell the browser what to show in case the image can’t be found (maybe it was accidentally deleted or moved). It is also useful for text-only browsers. Alt attributes are also read by search engines, but most importantly, alt attributes are read by screen readers which read the content of a website out loud for the visually impaired, so make sure that you include alt tags for relevant images that describe what the image represents for those who can’t see it.
I bet you didn’t that there was that much involved in just adding an image! We covered a lot of ground here, though, and I’m sure that you’re super-excited that you can now add more than boring old text to your web pages.