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.
The alt Attribute
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
Image Size – Width and Height
You can use the
style attribute to specify the width and height of an image.
<img src="safhatech_img.jpg" alt="safhatech image" style="width:400px;height:500px;">
Alternatively, you can use the
<img src="safhatech_img.jpg" alt="safhatech image" width="500" height="600">
height attributes always defines the width and height of the image in pixels by default.
Width and Height, or Style?
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.
<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.
<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.
<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/