HTML Links

Using HTML links, also known as hyperlinks, you can navigate between web pages or access images, videos, documents, and more. With the 'href' attribute and the '<a>' element, you can create links.

<a href="https://www.lapmos.com">Click here to visit lapmos.com</a>
    

The hyperlink "Click here to visit lapmos.com" is displayed in this example. The href attribute specifies the web address to which users are taken when they click on the link. In this case, that URL contains "https://www.lapmos.com".

• ‘<a>’: This is the HTML element used to create links.
• ‘href’: This is the attribute used to specify the URL or destination of the link.
• ‘https://www.lapmos.com’: This is the URL or destination of the link.
• ‘Click here to visit lapmos.com’: This is the text that will be displayed as a hyperlink.

Relative URLs

You can also link to other pages within own website by specifying a relative URL. Here is an example:

<a href="contact.html">Contact Us</a>
    

Whenever the user clicks on the link, they will be directed to the “contact.html” page, which is located in the same directory as the current page.

Relative URLs and Absolute URLs

In HTML, there are two types of URLs that can be used to link to web pages or resources: Relative URLs and Absolute URLs.

The relative URL specifies the location of a file or resource relative to the current page or t he website's root directory. It can be used to link to pages in the same website or to resource located in the same directory as current page.

The Absolute URL, on the other hand, specifies the complete web address of a file or resource, including the protocol (such as HTTP or HTTPS), the domain name, and the filename. Absolute URLs are used when linking to pages or resources on other websites, or when linking to resources that are located outside the current directory or website.

<!-- Relative URLs -->
    <a href="about.html">About Us</a>
    <!-- Absolute URLs -->
    <a href="https://www.example.com/about.html">About Us</a>
    

One advantage of absolute URLs is that they can ensure that the link works correctly, even if the website's file structure changes or if the page is accessed from a different location. However, relative URLs are often preferred for linking within a website, as they can make it easier to manage links and avoid broken links if the website's structure changes.

Navigate Specific part on webpage

You can also use anchor tags to create links to specific parts of a web page.

<!-- Navigate Specific part/location on same webpage -->
    <a href="#section1">Go to Section 1</a>
    
    ...
    
    <h2 id="section1">Section 1</h2>
    <p>Some text here...</p>
    

In the above example, the link “Go to Section 1” will take the user to the section of the page with the ‘id’ attribute of “sectoin1”. When the user clicks on the link, the page will scroll to the corresponding section.

Use image as a Link

Links can also include images, like this:

<a href="https://www.lapmos.com"><img src="waterfall.jpg" alt="Waterfall"></a>

Link to email

To create a link that opens the user's email client with a pre-filled email address, you can use the ‘mailto’ protocol with the ‘<a>’ element.

<a href="mailto:contact@example.com">Contact us by email</a>
    

Link to Phone number

To create a link that allows the user to call a phone number on their mobile device, you can use the ‘tel’ protocol with the ‘<a>’ element.

<a href="tel:+1234567890">Call us at +1 (234) 567-890</a>
    

Link to a file

To create a link to a file that the user can download, you can use the ‘<a>’ element with the ‘href’ attribute set to the URL of the file.

<a href="https://www.example.com/docs/document.pdf" download>Download the PDF</a>
    

This creates a hyperlink that, when clicked, will download the file specified by the URL. The ‘download’ attribute is used to suggest that the target should be downloaded by the browser instead of navigating to it.

Use Button as a Link

To use an HTML button as a link, you have to add some JavaScript code. With JavaScript, you can specify what happens when a button is clicked.

<button onclick="document.location='https://www.lapmos.com'">Visi lapmos.com</button>

Link titles

In HTML, the ‘title’ attribute can be used to provide additional information or a tooltip text for a hyperlink created with the ‘<a>’ element. The text spcified in the ‘title’ attribute is displayed as a tooltip when the user hovers over the link with their mouse.

<a href="https://www.lapmos.com" title="Visit our website">Go to lapmos.com</a>
    

• By default, links will appear as follows in all browsers:
  An visited link is underline and purple.
• An unvisited link is underlined and blue.
• An active link is underlined and red.

HTML Links target attributes

The target attribut specifies where to open the linked document. The target attribute can have one of the following values:

• _self: Default. Open the document in the same window/tab as it was clicked.
• _blank: Opens the document in a new window/tab.
• _parent: Opens the document in the parent frame.
• _top: Opens the document in the full body of the window.

<a href="https://www.lapmos.com/" target="_blank">Visit lapmos.com!</a>