HTML5 and CSS3 Fundamentals – Link Basics

Introduction

Are you ready to learn how to develop professional websites? Fantastic. There’s a lot that you need to learn about HTML links, so let’s dive in.

HTML pages are hypertext pages that contain hyperlinks—that enable people to navigate between different contents on the World Wide Web. The fundamental idea in developing any website—which is at the heart of any website development—is to allow users to refer to other pages on the World Wide Web. The underlying TCP/IP application layer protocol that helps in the transfer of hypertext pages across the WWW is called HyperText Transfer Protocol (HTTP).

For instance, when you type a URL in a web browser such as www.stoneriverelearning.com and click the enter key from your keyboard, the HTTP protocol directs the Web Server to fetch and transmit the requested page—which in this case is the Stone River eLearning home page. The requested page must be hypertext—with the links that allows you to navigate between different contents on the Stone River eLearning website such as Course Bundles and Course Demos.

Knowing how to insert these hyperlinks in your HTML page is essential in helping you understand how the World Wide Web works. Before we dive in and begin to learn the basics of HTML links, here is a couple of tips that you should bear in mind when generating links during the process of developing a good website.

  • It should have leveraged links. By leveraged links, we imply that the words you choose for a link should not only be part of a key word, but also descriptive enough to make the user understand what the link is all about.
  • The hyperlinks should be functional. Broken links will leave your customers exasperated lot. Try as much as possible to make your links functional so as not to disappoint your clients. But this should not only apply to hyperlinks alone. Every aspect of your website should be well-designed to make your site usable.
  • There should be impeccable choice and use of color. When choosing the color for your links—whether “visited”, or “active” or “hover”—make sure you select an appropriate color scheme.
  • The text you select for the hyperlinks should be easy to read. Use fonts that are not only appealing, but also available on most operating systems.

How to insert links

HTML links are defined by the <A> tag. This stands for an anchor—which is a text that marks the beginning and the end of a hypertext link. More often than not, the text between the opening tag and the closing tag can either be the start or the destination or even both of the hyperlink.

The attributes of the anchor tag include the following:

  • Href. It specifies the location (URL) of the web page to be opened. For instance the example below shows how an HTML page named: “Index.html” that is located in the same folder as the current page can be linked.
<A href="Index.html”> Click Here to View the Index Page</A>

Note that the user will click on the text:  “Click Here to View the Index Page” on the web browser so that the page: “Index.html” can be opened.

  • Hreflang. It specifies the language of the linked resource in HTML. In other words, this attribute informs the search engine the language that you are using on that specific page—to help the search engine generate the results to other users that are searching in that language. You should note that this attribute can only be used when the href attribute has already been defined.

For instance, the example below illustrates how the Hreflang attribute can be used to help the search engine generate results in English language.

<A href="Index.html" hreflang="en"> Click Here to View the Index Page </A>
  • Media. It specifies the media for which the linked resource relates to. The value of the media attribute should always be a media query. More often than not, this attribute mainly applies when linking to external style sheets which allows the user agent to select the best adapted device on which the page will run on.

The example below illustrates how the media attribute can be used to specify target URLS that are designed for desktop web browsers.

<A href="Index.html" media="screen"> Click Here to View the Index Page </A>
  • Ping. It specifies the URLs of the resources that notifies the user to follow the hyperlink on a web page. This is exemplified below
<A href="Index.html" ping="http://www.stoneriverelearning.com"> Click Here to View the Index Page </A>

In this case, when a user clicks on the link, the URL which has been specified in in the ping attribute (http://www.stoneriverelearning.com) will be sent.

  • Target. It indicates the location where the linked resource is to be displayed. The value of the target attribute can assume either “_blank”, “_top”,”_parent”, or”_self”. This is demonstrated by the example below:
<A href="Index.html" target="_blank"> Click Here to View the Index Page </A>
  • Type. It indicates the media type—usually in the form of a MIME type–for the link target. There are some instances, when the browser might want to add a small speaker icon, especially, when type is set to audio or a wav file format.
    Congratulations! You’ve finished your first class about HTML link basics, but there’s still lots for you to learn about HTML links. So keep up, and good luck!

 

GET YOUR FREE HTML5 & CSS3 EBOOK!

(Visited 174 times, 1 visits today)