Do you think IIT Guwahati certified course can help you in your career?
No
Introduction
Let’s discuss Images and Linking, how to add images and links in our HTML file, and how to modify them by changing values of various associated attributes.
Both Images and links help in beautifying our website, hence enhancing the UI of our website. Visit any website, and we find tons of images and links used. Let’s learn about them one by one.
Images in HTML
For adding images in our website developed using HTML, we can use <img> tag.
This tag helps embed or technically link our web page with the respective image.
We can embed both a gif or a static image. Formats of images like ‘.png,’ ‘.jpg’ are also supported.
The image tag ‘<img>’ does not have any closing tag.
Various Attributes in Image Tag
src Attribute
This is the main and most important attribute of the image tag. It specifies the path (URL) to the image.
<img src = “image_name.jpg”>
Here, img_name.jpg is a random image name.
When the webpage loads, the browser gets the image from the web server and inserts it into the webpage.
alt Attribute
It helps add an alternate text for an image.
The value of alt attribute should describe the image -
<img src = “image_name.jpg” alt = “Image description”>
Here, img_name.jpg is a random image name
This attribute is important as in case the path of our image is broken( or not supported by our browser/slow connection) and the user cannot view it- the web page on loading would show a broken link icon which breaks the aesthetic appeal of our pages. The text written in ‘alt attribute’ helps describe the image that was supposed to be displayed in this case.
Alternatively, we also have height and width attributes and can use them to set height and width of our image.
<img src = “image_name.jpg” alt = “Image description” width="460" height="345">
Here, img_name.jpg is a random image name.
Output:
Formats supported in all Browsers
Some of the common image formats support by common browsers (like Chrome, Edge, Firefox, Safari, Opera) are:
File Format
File Extension
Animated Portable Network Graphics (APNG)
.apng
Graphics Interchange Format(GIF)
.gif
Microsoft Icon (ICO)
.ico, .cur
Joint Photographic Expert Group Image (JPEG)
,jpg, .jpeg, .jfif, .pjpeg, .pjp
Portable Network Graphics (PNG)
.png
Adding Links in HTML
Links help us jump from one webpage to another. For adding links in our website developed using HTML, we use <a> tag which defines a hyperlink.
Link tags do have a closing tag i.e <a> and </a>.
Various Attributes in HyperLink Tag
href Attribute
It indicates the link’s destination. The link text mentioned in the href is visible to the user, and clicking in it, redirects the user to the specified URL address.
By default,
Unvisited links will appear in the browsers as underlined and blue
Visited links will appear in the browsers as underlined and purple
Active links will appear in the browsers as underlined and red