To use an image tag we use a file on the internet. This file to the image could be located on your server or an external server. For example the following image tag would work anywhere.
<img src="https://a1websitepro.com/wp-content/uploads/2014/09/logo200.png" />
Breaking Down The Image Tag *
The syntax that we use to embed an image is always the same. It would be good to commit this to memory. After we type src=” we will put a file path to an image. We will then end that file path with another quote “. This will tell our browser to go out on the internet and find the file and bring it into our web page.
<img src="" />
Alt Tags in Images *
You also want to include alt attributes in the image tag. This should explain what the picture is all about in a few short words.
<img src="" alt="alt tag"
Height and Width in Image Tags *
In your image source code you can also give a height and width on the image itself. It looks like this.
<img src="" height="25px" width="25px" />
Id’s and Classes on Image Tags *
You can also add id’s and classes on image tags. Here is a couple examples.
Example of An Id
<img src="" id="foo" />
Example of a Class
<img src="" class="foo" />
Other Attributes You Can Use In An Image Tag *
Embedding Videos into A Webpage *
You can embed videos into your webpage with the use of iFrames. In the video tutorial we discussed how iFrames are closely related to the image tag. Here is an example.
<iframe src="https://www.youtube.com/embed/SCeW5pSTAig?ecver=2" width="640" height="360" frameborder="0" allowfullscreen></iframe>
Notice that the attributes are very similar to that of an image tag.
Complete Code Used In The Video *
<html> <head> <title>Embeding Images In HTML</title> </head> <body> <h1>Embeding Images In HTML</h1> <p>This is all about images</p> <img src="https://a1websitepro.com/wp-content/uploads/2014/09/logo200.png" /> <iframe src="https://www.youtube.com/embed/SCeW5pSTAig?ecver=2" width="640" height="360" frameborder="0" allowfullscreen></iframe> </body> </html>
I hope you enjoyed the article. If I was able to help you please consider a tip for the content.
One Time Tip