#InboxUpgrade2020

Page 5

HTML Links

A link or hyperlink is a connection from one web resource to another.         

HTML Links (Hyperlinks or Web links)       

Links allow users to move seamlessly from one page to  another, on any server anywhere in the world. A link has two ends  called anchors and a direction. The link starts at the source anchor and  points to the destination anchor, which may be any web resource (e.g.  an image, an audio or video clip, an HTML document or an element within  the document itself, etc.).        

By default, links will appear as follows in most of the browsers:                       

• An unvisited link is underlined and blue.                     
• A visited link is underlined and purple.                    
• An active link is underlined and red.                

                 

However you can overwrite this using CSS. Learn more about styling links.

HTML Link Syntax

Links are specified in HTML using the <a> tag.

A link or hyperlink could be a word, group of words, or image.

<a href="url">link text</a>

This is the standard way to create a link

Example

<a href="http://www.codify.890m.com/html/">Visit our HTML tutorial</a>

The href attribute in source anchor specifies the address of the destination anchor.

The href attribute specifies the destination address (http://www.codify.890m.com/html/)  of the link.

The link text is the visible part (Visit our HTML tutorial).

Clicking on the link text will send you to the specified address.

Local Links

The example above used an absolute URL (a full web address). 

A local link (link to the same web site) is specified with a relative URL (without https://www....).

Example

<a href="page-4.html">Visit our HTML tutorial</a>

We will be using the local link more often when we start creating our own projects

The Target Attribute of Links

Target attribute tells the browser where to open  linked document. There are four defined targets. Each target starts with  an underscore(_): _blank, _parent, _self, _top.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

• _blank - Opens the linked document in a new window or tab
• _self - Opens the linked document in the same window/tab as it was clicked (this is default if no target is set)
• _parent - Opens the linked document in the parent frame 
• _top - Opens the linked document in the full body of the window  
• framename - Opens the linked document in a named frame 

Example

<a href="http://codify.890m.com/html/" target="_top">Visit Our HTML Tutorial</a>
<a href="http://codify.890m.com/" target="_self">Visit Our Homepage</a>
<a href=https://www.google.com/" target="_blank">Google</a>

Creating Bookmark Anchors      

HTML bookmarks are used to allow readers to jump to specific parts of a Web  page.

Bookmarks can be useful if your webpage is very long.

To make a bookmark, you must first create the bookmark, and then add a link  to it.

When the link is clicked, the page will scroll to the location with the  bookmark.

The id attribute is used to create a bookmark inside a web page in the following way.

Example

First, create a bookmark with the id attribute:

<h2 id="C4">Chapter Four</h2>

Example

Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:

<a href="http://codify.890m.com/#C4">Jump To Chapter Four</a>

This could be a reference of local link. E.g If a page is http://codify.890m.com/ which have the below Link

<a href="html_demo.html#C4">Jump To Chapter Four</a>

If a page visited page will be http://codify.890m.com/html_demo.html#C4. Although with JavaScript the #C4 beside the link is no more necessary.