So far we've just got text content in our s t email which we created by enclosing plain text in various
hvm out elements like headers and paragraphs.
To add an image to our Web page.
We use the image element.
I've added an image file a photo to the same folder where our term elf file is.
So in our eight Tim L. let's add an image tag here and we specify the path to the image file using the
soss attribute.
We saw at the start of this section that unlike a heading our paragraph element there are some elements
like image that don't have a closing tag.
So this is all we need to insert an image into our page
and in the browser we can see the image displayed here.
It's not generally a good idea to mix h t email and images together in the same folder so to organize
this a bit better.
Let's create an image is folder
and then move the image into that folder.
Now that we've done that however we've broken out a web page and the image is no longer displayed.
When you have an invalid source address for an image this broken image icon is what's displayed in the
browser.
To fix this we need to add the images folder to the source attribute like that.
Now in the browser the image is displayed correctly again.
Note how an image isn't part of the astm Owl.
It's a separate file that is referenced using the image tag and uploaded by the browser.
Just like the astm Al page.
An image has its own address and can be viewed on its own like this.
This is one of the ways that creating a web page is different to creating a document in a word processor
for example if I copy this address.
We can even use this directly in the source attribute of the image tag like this.
And then in the browser the image is displayed as before will look at addresses like this in more detail
later on.
This means that you can insert an image from another website into your web page.
For example we can get the address of this image like this.
Then insert this address into the soss attribute of our image elements like that.
And then in the browser This image is displayed on our site.
Even though it's hosted on another server.
This is called Hot linking.
And unless you're using a service are server that explicitly allows it.
I don't recommend that you do it firstly because you using somebody else's bandwidth and the image is
coming from their web server and also because there's nothing to stop them from changing are deleting
the image breaking your web page.
Finally there's an optional out attribute that is used to describe the image.
If the image source is wrong for example the image is in a format that the browser doesn't support.
Then this alternative text is displayed instead.
This is also helpful for non graphical browsers.
For example those used by people with visual impairment.
Let's add some alternative text to our original image using the art attribute.
We don't see this text.
If the image is displayed but if I disable the images.
We do see the alternative text.
You don't have to do this for all images in your document.
But if the image is essential to the content then it's generally a good idea.