What really distinguishes the Web from other mediums is the way in which a web page can contain links (or hyperlinks) that you can click on to be taken from one page to another page. The link can be a word, phrase, or image. The power of HTML lies in hyperlinks or links. Links allow you to click on any element and navigate from page to page. A hyperlink can be put on text or image that you can click on, and jump to another document.
When you link to another page in your own web site, the link is known as an internal link. When you link to a different site, it is known as an external link.
Links are defined with the anchor tag, <a> tag (anchor) and href attribute that specifies the destination address. The destination can be just about anything, from another web page on the same site, to a different site, to a document or file, to another location within the same web page. The link text is the visible part on the browser. Anything between the opening <a> tag and the closing </a> tag becomes part of the link that users can click in a browser.
To link to another web page, the opening <a> tag must carry an attribute called href; the value of the href attribute is the name of the file or URL you are linking to.
<a href="/link">link text</a>
When you move the mouse cursor over a link, two things normally happen:
- The mouse arrow turns into a little hand.
- The color of the link element changes.
Style of Default Links
By default, links will appear as this in all browsers:
- An unvisited link is underlined and blue.
- A visited link is underlined and purple.
- An active link is underlined and red.
The target attribute specifies where to open the linked document - same window or new window or tab. Below example will open the linked document (Google Website) in a new browser window or a new tab.
<a href="https://www.google.com/" target="_blank">Visit Google!</a>
_blank Opens the linked document in a new window or tab
_self Opens the linked document in the same frame as it was clicked (this is default)
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of the window
Linking to Email Address
To create a link to an e-mail address, you need to use the following syntax with the <a> element:
<a href=”mailto:firstname.lastname@example.org”>Email Us</a>
A URL usually contains following parts:
Protocol: A web protocol is a standardized agreement on how communication occurs. The web primarily uses HTTP (hypertext transfer protocol), but occasionally, you encounter others. Most addresses begin with http:// or https:// because this is the standard on the web. Protocols usually end with a colon and two slashes (://).
Host name: It is traditional to name your primary web server www. There is no requirement for this, but it is common enough that users type www right after the http://. The text right after http:// (and up to the first period) is the name of the actual computer you are linking to.
Domain name: The last two or three characters indicate a particular type of web server. Three-letter domains usually indicate the type of organization, and two-letter domains indicate a country.
Subdomain: Everything between the host name (usually www) and the domain name (often .com) is the subdomain. This is used so that large organizations can have multiple servers on the same domain.
Page name: Sometimes, an address specifies a particular document on the web. This page name follows the address and usually ends with .html. Sometimes, the page name includes sub-directories and username information, as well.
Absolute and Relative URLs
Absolute and relative paths are two reference methods for connecting sites and pages. While both methods can be used when creating links that point to content in our own site, only absolute can be used when pointing to content that is outside of your domain.
An absolute URL contains everything you need to uniquely identify a particular file on the Internet. This is what you would type into the address bar of your browser in order to find a page.
A relative URL indicates where the resource is in relation to the current page. You can use relative URLs to specify files in different directories.
Benefit of using relative URLs within your site is that you can develop the site on your desktop or laptop without having bought a domain name. You can also change your domain name or copy a subsection of one site over to a new domain name without having to change all of the links, because each link is relative to other pages within the same site.