To connect a document to other online sites, use an HTML link. Users are sent to different web pages or websites when they click links on web pages. Links, usually referred to as hyperlinks, are prevalent in HTML documents. Links may be created by web designers from text, photos, and other sorts of material.
The HTML <a> tag defines a hyperlink. It has the following syntax:
This example shows how to create a link to your own net.
<!DOCTYPE html>
<html>
<body>
<h1>How to create a Link!</h1>
<p><a href="https://sites.google.com/d/1nCUA8lS65TA19tihuI__TchU7qtobahi/p/1nEeZSJZhw77XinMCunnA8-DVMDgJuwH4/edit">Visit DCSHS!</a></p>
</body>
</html>
When a link is clicked, the destination property indicates where the linked page will open. The open window is the default. The linked content will open in a new tab (on modern browsers) or window (on older ones) if target="_blank" is specified.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
<!DOCTYPE html>
<html>
<body>
<h2>The target Attribute</h2>
<a href="https://sites.google.com/d/1nCUA8lS65TA19tihuI__TchU7qtobahi/p/1nEeZSJZhw77XinMCunnA8-DVMDgJuwH4/edit" target="_blank">Visit DCSHS!</a>
<p>If target="_blank", the link will open in a new browser window or tab.</p>
</body>
</html>
Use mailto: inside the href attribute to create a link that opens the user's email program (to let them send a new email):
<!DOCTYPE html>
<html>
<body>
<h2>Link to an Email Address</h2>
<p>To create a link that opens in the user's email program (to let them send a new email), use mailto: inside the href attribute:</p>
<p><a href="mailto:someone@example.com">Send email</a></p>
</body>
</html>
To use an HTML button as a link, you have to add some JavaScript code.
JavaScript allows you to specify what happens at certain events, such as a click of a button:
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #3333ff ;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: blue;
}
</style>
</head>
<body>
<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href="https://sites.google.com/d/1nCUA8lS65TA19tihuI__TchU7qtobahi/p/1nEeZSJZhw77XinMCunnA8-DVMDgJuwH4/edit" target="_blank">This is a link</a>
</body>
</html>
The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.
<!DOCTYPE html>
<html lang="en-US">
<body>
<h2>Link Titles</h2>
<p>The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.</p>
<a href="https://sites.google.com/d/1nCUA8lS65TA19tihuI__TchU7qtobahi/p/13PaeZEs67RR0VaotdXlhOSXE2CQkEtBi/edit" title="Go to HTML INTRODUCTION">Visit to our HTML INTRODUCTION</a>
</body>
</html>