In HTML Image Tag lesson you will learn how to embed image to your website and how to make the image like clickable URL.
Also you will know how to manipulate image width, height and title.
HTML Images Syntax
In HTML, images are defined with the <img>
tag. Also The <img>
tag is empty, it contains attributes only, and does not have a closing tag. The src
attribute specifies the URL (web address) of the image.
Fore Example:
<img src="Image_url">
The alt Attribute
The alt
attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). The value of the alt
attribute should describe the image.
<img src="safhatech_logo.jpg" alt="Safhatech logo">
Note: If a browser cannot find an image, it will display the value of the alt
attribute.
Image Size – Width and Height
You can use the style
attribute to specify the width and height of an image.
Example:
<img src="safhatech_img.jpg" alt="safhatech image" style="width:400px;height:500px;">
Alternatively, you can use the width
and height
attributes:
<img src="safhatech_img.jpg" alt="safhatech image" width="500" height="600">
The width
and height
attributes always defines the width and height of the image in pixels by default.
Width and Height, or Style?
The width
, height
, and style
attributes are valid in HTML5. However, we suggest using the style
attribute. Because it prevents styles sheets from changing the size of images.
Images in Another Folder
If not specified, the browser expects to find the image in the same folder as the web page. However, it is common to store images in a sub-folder. You must then include the folder name in the src
attribute with relative URL.
Fore Example:
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Images on Another Server
Some web sites store their images on image servers. Actually, you can access images from any web address in the world with absolute URL.
Example:
<img src="https://www.safhatech.com/images/safhatech_image.jpg" alt="safhatech.com">
Image as a Link
To use an image as a link, put the <img>
tag inside the <a>
tag with image url inside src attribute.
Example:
<a href="safhtech.com">
<img src="safhatech.gif" alt="safhatech_image" style="width:42px;height:42px;border:2;">
</a>
This post is one of the HTML5 for deep understanding course. where we will learn every common elements from basic to the advanced element.
In addition each lesson has a video which you could visit and watch for more practicing and for deep understanding.
We hope that we could give the best for you and for the deep and easy understanding.
You could follow the series from our website SAFHATECH.com and go to categories and then programming and then Choose the course you want then just click next post to go step by step.
Finally we hope every thing is works as you suspect.
Consequently You could follow us at :
Website URL: https://www.safhatech.com/
Youtube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw
Twitter: http:// https://twitter.com/safhatech
Instegram: https://www.instagram.com/safhatech
Facebook: http:// https://www.facebook.com/Safhatech-487171875443687
Phone:967772223681