fbpx
April 2, 2020
html text links

Tutorial 12# Understanding HTML Text Links and How to Create Them

In this tutorial you will learning about HTML Text links, how to create them and how to insert them in your web document. Sometimes we might have a need to include links to other pages of our website to our HTML document or to include an external link to another website in our HTML document in achieving this we make use of some HTML link attributes that allows us add text links to the HTML document.

READ PREVIOUS TUTORIAL ON: Tutorial 11# Understanding HTML List and How to Insert Them

What are HTML text links?

HTML text links are links in form of hyperlinks that are added to a web document in other to link out to other sections of the website or to an external website.

How to Link a Web Document

In linking a web document we make use of the anchor HTML tag (<a> &</a>). This tag allows links to be inserted at the opening tag using this code structure.

<a href = "URL Of Document " ... HTML attributes-list>NAME OF Link Text</a> 

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>

   <a href="https://develoferd.com"  target="_self"  >document link</a>
   
</body>
</html>

RESULT ON WEB BROWSER

html text links

From the above example, we made use of a new feature known as target. This target attribute is a simple feature in HTML that tells the web browser how to view the link. The target attribute comes in different forms which are shown below.

ATTRIBUTE Description
_self This attribute opens the link in the same web browser tab or frame
_blank This attribute opens the link in a new tab on the web browser
_parent This opens the linked page in the parent frame.
_top Opens the linked document on a full window
targetframe Opens the linked document in a named targetframe

A typical example where we used all types of target attributes is shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>

   <a href="https://develoferd.com"  target="_self"  >document link1</a>
   <a href="https://develoferd.com"  target="targetframe"  >document link2</a>
   <a href="https://develoferd.com"  target="_top"  >document link3</a>
   <a href="https://develoferd.com"  target="_parent"  >document link4</a>
   
</body>
</html>

RESULT ON WEB BROWSER

html text link result

Linking to same website using Base Path tag

If you intend linking to a section of the same website you can easily use a base path tag (<base>) to tell the web browser of the document base so you dont keep repeating long string of URL. The base tag is an empty tag and only allows URL in between the open tags as shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <base href="https://develoferd.com/">
</head>
<body>

   <a href="/html/ebooks/downloads.html"  target="_self"  >document link1</a>
   
   
</body>
</html>

the document path linked above is /html/ebooks/downloads.html which leads to a particular section of the same website. Have a close look at the code to check how we integrate the url to the base tag.

Tweaking HTML link Colors

HTML text links colors can be tweaked to different colors. follow the below step and check it out on your web browser. You can check out other color hex codes using this link color codes

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <base href="https://develoferd.com/">
</head>
<body alink = "#EE0000" link = "#551A8B" vlink = "#0000EE" >

   <a href="/html/ebooks/downloads.html"  target="_self"  >document link1</a>
   
   
</body>
</html>

Adding Download Links To Web Document

if you intend giving out something on your web page for download. you can insert a download button using a simple tweak on the anchor text codes as shown below.

<a href = "URL Of Download Document " ... HTML attributes-list>DOWNLOAD BUTTON</a> 

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body alink = "#EE0000" link = "#551A8B" vlink = "#0000EE" >

   <a href="https://develoferd/html/ebooks/downloads.html"  target="_self"  >DOWNLOAD BUTTON</a>
   
   
</body>
</html>

RESULT ON WEB BROWSER

html text links

Conclusion

Now you understand the basics of HTML TEXT LINKS and you are really doing great. Lets move on to the next tutorial on   HTML IMAGE LINKS

Leave a Reply

Your email address will not be published. Required fields are marked *