Bhavitha Cherukuri: HTML Links — Use an Image as a Link

HTML Links — Use an Image as a Link

To use an image as a link, just put the <img> tag inside the <a> tag:

Example

<!DOCTYPE html>
<html>
<body>

<h2>Image as a Link</h2>

<p>The image below is a link. Try to click on it.</p>

<a href="https://google.com"><img src="images/dog.png" alt="cute dog"></a>

</body>
</html>

A new webpage opens with the dog picture and when you click on it you will be redirected to link:

Link to an Email Address

Use mailto: inside the href attribute to create a link that opens the user's email program (to let them send a new email):

Example

<!DOCTYPE html>
<html>
<body>

<h2>Link to an Email Address</h2>

<p>To create a link that opens in the user's email program (to let them send a new email), use mailto: inside the href attribute:</p>

<p><a href="abcd@example.com">Send email</a></p>

</body>
</html>

A new webpage is redirected by opening a mail:

Button as a Link

To use an HTML button as a link, you have to add some JavaScript code.

JavaScript allows you to specify what happens at certain events, such as a click of a button:

Example

<!DOCTYPE html>
<html>
    <head>
        <title>
            button
        </title>
    </head>
    <body>
        <a href="https://www.youtube.com/watch?v=tDqTXipQmBU&list=PLZPZq0r_RZOOxqHgOzPyCzIl4AJjXbCYt&index=11">
        <button style="font-size:25px; background-color:blue; color:white; border-radius:30px">click me</button>
        </a>

        <a href="https://www.google.com/">
            <button style="font-size:30px; background-color:green; color:white; border-radius:40px ">
                click me
            </button>
        </a>

        <a href="https://www.google.com/">
            <button style="font-size=20px; background-color:blue; color:white; border-radius:35px">
                click me
            </button>
        </a>
    </body>
</html>