- 3 years ago
- Shahzad Gujjar
- 1517 Views
-
2
In this tutorial, you’ll learn how to use HTML to build links to other pages.
Creating Links in HTML
A link, also known as a hyperlink, is a relationship between two web resources. Users can move seamlessly from one page to the next on any server in the world using links.
Anchors are the two ends of a link. The link begins at the source anchor and points to the destination anchor, which could be an image, an audio or video clip, a PDF file, an HTML document, or an element within the document, and so on.
In most browsers, links will appear as follows by default:
- A link that has not been visited is underlined and highlighted in blue.
- A clicked link is underlined and highlighted in purple.
- An active link is highlighted in red and underlined.
You can, however, use CSS to override this. Find out more about styling links.
HTML Link Syntax
The <a> tag in HTML is used to specify links.
A word, a group of words, or an image may be used as a link or hyperlink.
<a href="url">Link text</a>
Between the opening <a> tag and the closing </a> tag, the user sees and clicks the link in the browser. Here are a few links to get you started:
<a href="https://www.google.com/">Google Search</a>
<a href="https://www.learncodeweb.com/">Learn Code Web</a>
<a href="images/yourimage.jpg">
<img src="yourimagethumb.jpg" alt="image">
</a>
The href attribute specifies the link’s target. It may take the form of an absolute or relative URL.
An absolute URL is one that contains all parts of the URL format, such as the protocol, hostname, and document path, such as https://www.google.com/, https://www.example.com/form.php, and so on. Relative URLs, on the other hand, are page-relative paths such as contact.html, images/smiley.png, and so on. The prefix HTTP:// or HTTPS:// is never used in a relative URL.
Setting the Targets for Links
The target attribute instructs the browser to open the linked document in a specific location. Each of the four specified targets has a name that begins with an underscore(_) character:
- _blank — Opens a new window or tab with the linked document.
- _parent — Brings up the parent window with the linked document.
- _self — Brings up the linked document in the same window or tab as the original. Because this is the default, there is no need to specify it explicitly.
- _top — Displays the linked document in full-screen mode.
To see how the link’s target actually works, consider the following example:
<a href="/about-us.php" target="_top">About Us</a>
<a href="https://www.google.com/" target="_blank">Google</a>
<a href="images/sky.jpg" target="_parent">
<img src="sky-thumb.jpg" alt="Cloudy Sky">
</a>
If your web page is located inside an iframe, you can use the target=” _top” attribute on the links to break the iframe and display the target page in its entirety.
Creating Bookmark Anchors
Bookmark anchors can also be used to allow users to jump to a particular section of a web page. If you have a long web page, bookmarks are particularly useful.
Bookmark creation is a two-step procedure: As shown in the following example, first add the id attribute to the element where you want to jump, then use that id attribute value preceded by the hash sign (#) as the value of the href attribute of the <a> tag:
<a href="#sectionA">Jump to Section A</a>
<h2 id="sectionA">Section A</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
NOTE: You can even go to a specific section of another website by using the href attribute to indicate the URL of that page as well as the anchor (i.e. #elementId), for example, a href=”mypage.html#topicA”>. Please go to TopicA/a>.
Creating Download Links
You can also make a file download link in the same way that you would a text link. Simply specify the file you want to be available for download in the destination URL.
We’ve created download links for ZIP, PDF, and JPG files in the example below.
<a href="downloads/test.zip">Download Zip file</a>
<a href="downloads/masters.pdf">Download PDF file</a>
<a href="downloads/sample.jpg">Download Image file</a>
NOTE: The file is not directly downloaded to your hard drive when you click a link to a PDF or image file. The file can only be opened in your web browser. You can also save or download it to your hard drive permanently.
- 3 years ago
- Shahzad Gujjar
- 1517 Views
-
2