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
- style=””
- title=””
- usemap=””
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>
2 Comments
yes i will do it thank you sir for giving out this oppotunity to people like me
Sure thing, I am glad you are learning 🙂