Image and Links in HTML



Image Tag in HTML?

  • In HTML we use <img> tag to add images on our webpage.

  • The <img> tag doesn't require any closing tag.


Image Tag Attributes

  • src: It is used to specify the path of the image.

  • alt: If users are unable to see an image then they will see the alt value.

  • style: This attribute is used to add style to the image like width, height, etc.

  • width: It is used to specify the width of the image.

  • height: It is used to specify the height of the image.

  • title: This attribute is used to set the title on the image.
<img width="200px" src="https://cdn.pixabay.com/photo/2015/09/05/20/02/coding-924920_1280.jpg" alt="coding image">

Anchor Tag in HTML

  • In HTML <a> tag is used to create hyperlinks on the web page.

  • It contains the content between the opening and closing tags which will be hyper content.


Anchor Tag Attributes

  • href: It is used to set the URL.

  • target: This will specify where the linked content will be opened.

    • _blank: It will open the link in a new tab.

    • _self: It will open the link in a current browser tab.

    • _top: This works the same as _self.


Let's do some cool things with Anchor Tag

i). Link to an email address: 

<a href="mailto:contact.geekshelp.@gmail..com">Send email</a>


ii). Link to a phone number:

<a href="tel:+91123456789">123456789</a>


iii). Go to a section on the webpage:

<a href="#section">Go to Section</a>

Code Described in the video

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Links and Images in HTML </title>
</head>

<body>
    <!-- Image in HTML -->
    <img width="200px" src="https://cdn.pixabay.com/photo/2015/09/05/20/02/coding-924920_1280.jpg" alt="coding image">

    <!-- Links in HTML -->
    <a href="https://google.com" target="_blank"> Go to Google </a>

    <a href="mailto:contact.geekshelp@gmail.com"> Mail to Geeks Help </a>
    <a href="tel:+917357300000"> Call To </a>
</body>

</html>

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad