<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Links Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 40px;
line-height: 1.6;
}
a {
color: #3366cc;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
section {
margin-top: 50px;
}
</style>
</head>
<body>
<h1>Types of links in html</h1>
<h2>External Links</h2>
<p>
Visit
<a href="https://www.wikipedia.org" target="_blank">Wikipedia</a> for more
information.
</p>
<h2>Internal Link</h2>
<p>Go to the <a href="about.html">About Page</a>.</p>
<p style="color:gray;font-size:14px;">
(Note: Create a separate file named <code>about.html</code> in the same
folder for this link to work.)
</p>
<h2>Link Within Same Page</h2>
<p>Jump to the <a href="#bottom">bottom of this page</a>.</p>
<section style="height:400px;">
<p>Scroll down to see the anchor target below.</p>
</section>
<h3 id="bottom">Bottom of the page</h3>
<p>This is the target for the same-page link.</p>
</body>
</html>