The following will cover how to create links and images using HTML.
Use the <a> element to define a link
The <a> element is used to create links in HTML. To create a link, you need to add the href attribute to the <a> element. The href attribute defines the URL or web address of the page you want to link to.
Here’s an example:
1 2 3 |
<a href="https://www.kodeu.live">Click here to go to kodeU.live</a> |
In this example, when a user clicks on the link, they will be directed to the kodeu.live website.
Use the href attribute to define the link address
The href attribute is used to define the link address. The link address can be an absolute URL, such as “https://www.google.com”, or a relative URL, such as “/contact.html”.
Here’s an example of a relative URL:
1 2 3 |
<a href="/contact.html">Click here to go to the Contact page</a> |
In this example, the link will take the user to the “contact.html” page on the same website.
Use the target attribute to define where to open the linked document
The target attribute is used to define where the linked document should open. The default value for the target attribute is “_self”, which means the linked document will open in the same window or tab.
Here’s an example of how to use the target attribute to open a link in a new window:
1 2 3 |
<a href="https://www.google.com" target="_blank">Click here to go to google.com in a new window</a> |
In this example, when the user clicks on the link, the google.com website will open in a new window.
Use the <img> element (inside <a>) to use an image as a link
You can also use an image as a link by placing the <img> element inside the <a> element.
Here’s an example:
1 2 3 |
<a href="https://www.yoursite.com"><img src="yourimage.jpg" alt="Example"></a> |
In this example, when the user clicks on the image, they will be directed to the Example.com website.
Use the mailto: scheme inside the href attribute to create a link that opens the user’s email program
You can create a link that opens the user’s email program by using the mailto: scheme inside the href attribute.
Here’s an example:
1 2 3 |
<a href="mailto:info@kodeu.live">Click to send an email</a> |
In this example, when the user clicks on the link, their email program will open with the recipient field filled in with “info@kodeu.live”.
HTML Links Summary
By using the <a> element and the href attribute, you can create links to other pages on your website or to external websites. You can also use images as links by placing the <img> element inside the <a> element. And, by using the mailto: scheme inside the href attribute, you can create links that open the user’s email program.