HTML

HTML

📌 HTML Links

What is a Link ?

HTML links are elements that allow users to move from one webpage to another. When a link is clicked, the browser navigates to the specified address. Typically, when you hover over a link, the cursor changes into a hand icon, indicating that it is clickable.

Basic Syntax

In HTML, links are created using the <a> (anchor) tag. The most important attribute of this tag is href (Hypertext Reference), which defines the destination URL.

Example:

HTML
 <a href="https://www.teachwebcode.com/">Teachwebcode</a>

The target Attribute

Description

The target attribute controls where the linked document will open. If not specified, the link opens in the same tab by default.

  • Common Values:

  • _self → Opens in the same tab (default behavior)
  • _blank → Opens in a new tab or window
  • _parent → Opens in the parent frame
  • _top → Opens in the full browser window

Example :

HTML
 <a href="https://www.teachwebcode.com/" target="_blank">Teachwebcode</a>

This example opens the link in a new tab.

Absolute vs Relative URLs

Absolute URL :

An absolute URL includes the full web address, including the protocol and domain name.

Example :

HTML
<a href="https://www.teachwebcode.com/">Teachwebcode</a>

Relative URL :

A relative URL points to a resource within the same website.

Example :

HTML
<a href="html_images.asp">HTML Images</a>

The first example links to an external website, while the second points to a local page.

Using an Image as a Link

Description

You can make an image clickable by placing it inside an anchor (<a>) tag.

Example :

HTML
<a href="default.asp">
    <img src="smiley.gif" alt="HTML tutorial" width="42">
</a>

Clicking the image will take the user to another page.

Email Links

Description :

To create a link that opens the user’s email client, you can use the mailto: protocol.

Example :

HTML
<a href="mailto:someone@example.com">Send Email</a>

When clicked, this link opens the default email application.

Using a Button as a Link

Description :

Buttons can act like links by using JavaScript to redirect users.

Example :

HTML
<button  onclick="document.location='default.asp'">
    HTML Tutorial
</button>

Clicking the button navigates to another page.

Link Colors

Default Behavior :

  • Unvisited links → blue and underlined
  • Visited links → purple and underlined
  • Active links → red and underlined

Customizing with CSS :

You can change the appearance of links using CSS.

Example :

HTML

a:link { color: green; text-decoration: none; }
a:visited { color: purple; text-decoration: none; }
a:hover { color: red; text-decoration: underline; }
a:active { color: blue; text-decoration: underline; }

This allows you to define different styles for each link state.


Html Css
Html Image