3 types of Hyperlinks in HTML
We will learn to create hyperlink to external page, external page in blank window, and to browse in deeper place of the same page.
Chapter 1. Hyperlink to external page
Live Preview: Dear Technology Magazine
Codes:
See the example, it's a normal hyperlink<p><a href="http://www.devilhunter.net">Dear Technology Magazine</a></p>
See the example, it's a normal hyperlink without underline
<p><a href="http://www.devilhunter.net" style="text-decoration: none">Dear Technology Magazine</a></p>
See the example, it's a normal hyperlink without underline and with bold font
<p><a href="http://www.devilhunter.net" style="text-decoration: none; font-weight: 700">Dear Technology Magazine</a></p>
Now with Trebuchet MS Font
<p><font face="Trebuchet MS"><a href="http://www.devilhunter.net" style="text-decoration: none; font-weight: 700">Dear Technology Magazine</a></font></p>
Trebuchet MS Font with a specific size
<p><font face="Trebuchet MS" size="2"><a href="http://www.devilhunter.net" style="text-decoration: none; font-weight: 700">Dear Technology Magazine</a></font></p>
Chapter 2. Hyperlink to external page, opening in a new window
Live Preview: Visual Code Editor
Code:
<p><a target="_blank" href="https://vce.devilhunter.net">Visual Code Editor</a></p>
Simply add target="_blank" with spaces both side inside the <a> tag.
Chapter 3. Internal page Hyperlink
Live Preview: Go to Chapter 1
Linking to anchors is very similar to normal links. Anchors point to a place within a page. To link to an anchor you need to:
- Create a link pointing to the anchor (in deeper place)
- Create the anchor itself. (in index)
An anchor is created using the <a> tag.
If you want to create an anchor called chapter4, you simply add this line inside HTML code where you want the anchor to be (in deeper place):
<a name="chapter_one"></a>
After doing this, you can make a link pointing to the anchor using the normal <a href> tag, like this (in index):
Click <a href="#chapter_one">here</a> to read chapter One.
Try this yourself
