HTML Links

HTML/HTML Links

HTML Links

Links are the defining feature of the web because they allow you to move from one web page to another page enabling the very idea of browsing or surfing.You will commonly come across the following types of links:

• Links from one website to another .
• Links from one page to another on the same website.
• Links from one part of a web page to another part of the same web page.
• Links that open in a new browser windows.
• Links that start up your email program and address a new email to someone.

Links are created by using the anchor  (<a>) element. When a user can click on anything between the opening <a> tag and the closing </a> tags. You specify which page you want to link to using the href attribute.

Output of the above code is:

Linking to Other Websites

Links are created using the  anchor  (<a>) element which has an   href attribute.The value of  href attribute is the page that you want people go to when they click the link. When a user click on anythings that appears bettwen the <a >  tag and the </a > tag and will be taken to the page specified in the  href  attribute. When you link to a different website, the value of the  href  attribute will be the full web address for the site, which is known as an absolute URL. Browsers show links in blue with an underline by default.

Output of the above code is:

Absolute URL: URL stands for Uniform Resource Locator. Every web page has its own unique URL. This is the web address that you would type into a browser if you wanted to visit that specific web page. An absolute URL starts with the domain name for that site, and can be followed by the path to a specific page. If no page is specified, the site will display the homepage.

Linking to Other Pages in the same Websites

When you are linking to other pages within the same website, you do not need to specify the domain name in the URL. You can use a shorthand known as a relative URL. If all the pages of the site are in the same folder, then the value of the href attribute is just the name of the file.

 Output of the above code is:

Relative URL: When linking to other pages within the same website, you can use relative URLs. These are like a shorthand version of absolute URLs because you do not need to specify the domain name.

Directory Structure

On larger websites it's a good idea to organize your code by placing the pages for each different section of the site into a new folder. Folders on a website are sometimes referred to as directories. 

Relative Link Type 

• Sample Folder: To link to a file in the same folder, just use the file name. (Nothing else is needed.)

Example: To link to reviews from the homepage: 

• Child Folder: For a child folder, use the name of the child folder, followed by a forward slash, then the file name.

Example:  To link to video listings from the homepage.

• Grandchild Folder Use the name of the child folder, followed by a forward slash, then the name of the grandchild folder, followed by another forward slash, then the file name

Example: To link to video reviews from the homepage:

• Parent Folder Use ../ to indicate the folder above the current one, then follow it with the file name.

Example: To link to the homepage from the video reviews:

• GrandParent Folder Repeat the ../ to indicate that you want to go up two folders (rather than one), then follow it with the file name.

Example: To link to the homepage from the video reviews:

Email Links

To create a link that starts up the user's email program and addresses an email to a specified email address, you use the element. However, this time the value of the  href attribute starts with mailto: and is followed by the email address you want the email to be sent to. On the right you can see that an email link looks just like any other link but, when it is clicked on, the user's email program will open a new email message and address it to the person specified in the link.

Example:

<a href="mailto:yunus@example.org">Email Yunus</a>

Opening Links in a New Window 

- target If you want a link to open in a new window, you can use the target attribute on the opening tag. The value of this attribute should be _blank.

Example:

Summary of HTML Links

• Links are created using the html element.
• The element uses the href  attribute to indicate the page you are linking to access.
• If you are linking to a page within your own website, use relative links rather than qualified URLs.
• You can create links to open email programs with an email address in the "to" field.
• You can use the id attribute to target elements within a page that can be linked to.