HTML5 Links tutorial with examples

HTML5 Links tutorial

HTML Links

Links in HTML

Link means to connect the main resources path; links provides the way to approach the origin web page or form. In links also different properties are there with their respective functionalities will see one by one.



HTML5 Links and Hyperlinks tutorial

html5 tutorial for beginners

Hyperlinks

In HTML links means Hyperlinks By clicking a link you can redirect to other page which is referred, and also on mouse over to this link mouse cursor will change to small hand icon symbol. The link not only text shown here it may be image or any other format like CSS can also apply to design a link.

Syntax: <a href="url here">link text name</a> Example: <a href="http://www.harisystems.com"> Click Website Here </a> href is an attribute that will represents destination address of the link. And link text name to written here that the purpose of the link what it is.

HTML5 LocalLinks tutorial

Local Links

In HTML links means Hyperlinks
Now we will see the local links to connect internal pages of our website for this it is very simple on above said example written (http://www) it’s a full address of website page which is not require now simply we can write as

Example: <a href="../html/index.html">Internal Html Page</> The link says that internal folder there is index.html page to be open .. try on practice with your internal links

html5 tutorial for beginners

html5 Style Links with CSS tutorial

Using CSS we can style the link buttons in different properties like colors, on mouse hower and background of link button as well text

Example: <style> a:link, a:visited { background-color: #f46336; color: white; padding: 12px 15px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: blue; } </style> To learn more on CSS visit our CSS tutorial


HTML5 form Link and target Attribute

To click a link to open a window to see the destination HTML page for that there is specified attribute that is target and different values are available will see one by one in detail.

target – attribute is having following values to open a link written page 1. _blank – specifying this value page opens new window or tab 2. _self – specifying this value page opens same window or tab 3. _parent – specifying this value page opens parent frame 4. _top – specifying this value page opens full body of the window 5. framename – specifying this value page opens named frame Example: <a href="http://www.harisystems.com" target="_blank">Tutorial Site</a>


In Link and Image as Link

To use images and apply on link button simply add the image tag inside the link tag

Example: <a href="http://www.harisystems.com"> <img src="home.gif" alt="Home Page"> </a>


HTML5 Link Titles

Link title will provide an extra information on mouse over the link which we written on title tooltip text information.

Example: <a href="http://www.harisystems.com" title="Go to Home Page">Visit web site < /a>


HTML5 form External Link Path

External pages can be referenced with a full web URL or with a path relative to the current web page content.

Example: <a href="http://www.harisystems.com/html/index.php">HTML Tutorial</a> If HTML form is included with the local folder called html then it would be like Example: <a href="/html/index.php"> HTML tutorial </a> If content of html form with in the folder form as local content than simply it can specify Example: <a href="/index.php"> HTML tutorial </a>


Harisystems is optimized for learning, testing and training. courses are designed to be simplified to improve reading and basic understanding for beginners to expert level. Tutorials and examples are constantly reviewed to avoid errors, however we cannot warrant full correctness of all content. if any found need to correct write us at info@harisystems.com. we Harisystems is not responsible for any with this tutorials, While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 2007-2020 by Harisystems. All Rights Reserved.
Copyright © Harisystems 2020