OBINTUSACADEMY
HOME CONTACT SERVICES PRIVACY
C.B MS-PACKAGES HTML
HTML - Links

HTML

BASIC

Introduction to HTML Getting Started Basic Structure HTML Syntax HTML Tags HTML Elements HTML Attributes HTML Formatting HTML Links HTML Quotation Element HTML Citation Element HTML Address Element HTML Abbreviation Element HTML Bi-Directional Element HTML Comments HTML Lists HTML Styles HTML Images HTML Favicon Basic Projects

INTERMEDIATE

HTML Meta Tag Attributes HTML Tables HTML Forms HTML Form Elements HTML Form Attributes HTML Input Attributes HTML Form Examples HTML Inline Elements HTML Block Elements HTML Div HTML Id HTML Class HTML iFrame

ADVANCE

HTML Graphics

HTML Links

PREVIOUS NEXT
definition
DEFINITION:

A link is a connection from one thing to another.

HTML link is the connection from one web resource to another which allows you to move from one page to another or connect any resources (files, scripts etc) to another.

It is written in this form: name="value"

  • name - This is name of the attribute (src or href)
  • value - Value of the attribute. (URL - Uniform Resource Locator. Example: google.com, images/jenifer.jpg). URL is an address to any resources locally and on the internet.

src vs href link

src links

  • src is Source Reference link.
  • used to insert (add) resources (files) into your HTML web page.
  • used in <img>, <script>, <source> tags.

href links

  • href is Hypertext Reference link.
  • used to link (connect) resources (files, documents) that opens another document in your HTML web page.
  • used in <a>, <area>, <base>, <link> tags.

Types of href links

There are three (3) types of href links: Absolute, Relative and Inline links.

ABSOLUTE

  • Absolute links are used to link a page in another website.
  • It carries the full address of the page
TRY IT OUT YOURSELF

RELATIVE

  • Relative links are used to link a page within the same website.
  • It carries the address without the (https://www.) part.
TRY IT OUT YOURSELF

INLINE

  • Inline links are used to move to a particular section in the same html document.
  • It carries the # and id attribute value of that section of the html document
TRY IT OUT YOURSELF

target Attribute

The target attribute is used to specify where to open the linked document. It takes five (5) values; the first 4 starts with an underscore _ character.

  • _blank - Opens linked document in a new window.
  • _self - Opens linked document in the same window. (This the default setting of links)
  • _parent - Opens linked document in the parent window.
  • _top - Opens linked document in the full body of the window.
  • frame name - Opens linked document in the specified iframe
TRY IT OUT YOURSELF
tips
TIP:

In the code editor, you can always click on the reset button which resets the browser page so that you can try other links.


Link Appearance

There are three (3) types of appearance of links on the browser.

  • Unvisited Link - blue and underlined
  • Visited Link - purple and underlined
  • Active Link - red and underlined

Changing link appearance

A quick way to change the link appearance is by using the link, alink and alink attributes inside the body tag.

  • link - attribute for unvisited link
  • vlink - attribute for visited link
  • alink - attribute for active link
TRY IT OUT YOURSELF
note
NOTE:

Links can be styled in other ways; I will be showing you how to do that soon. But for now, lets continue.


Other links

There are other important links you need to know before leaving this place.

EMAIL LINK

  • This link is used to open your default email application to let you send new email.
  • Its URL is written as mailto: plus, the email address. For example: mailto:example@gmail.com
TRY IT OUT YOURSELF

DOWNLOAD LINK

  • PDF, DOCX, ZIP, RAR are downloadable files. Simple input the complete URL of the file and it will be downloadable when clicked on.
TRY IT OUT YOURSELF

BASE LINK

  • This is a default URL for all links on the page to start with
  • Here you use the base tag <base>...</base>. Place it inside the head tag <head>...</head>.
  • It is used together with other links on the page.
TRY IT OUT YOURSELF

Wrapping link around element tags

You can wrap link around different element tags, such as <img>, <p>, <button> and lots more.

TRY IT OUT YOURSELF
PREVIOUS NEXT
ADVERTISEMENTS

LEARNING IS A CONTINOUS PROCESS - PRACTICE MAKES PERFECT