html links |Students Empire

hyperlinks

Hyperlinks provide the basis for HTML by which users can navigate through content, both within the same document and across pages.

You create hyperlinks using the a element.

Attribute

The a element has local attributes:href, hreflang, media, rel, target, type.

href - Specifies the URL of the resource that the a element refers to.
hreflang - Specifies the language of the linked resource.
media - Specifies the device that the linked content is intended for. This attribute uses the same device and feature values with head meta element.
rel - Specifies the kind of relationship between the document and the linked resource. This attribute uses the same values as the rel attribute of the link element.
target - Specifies the browsing context in which the linked resource should be opened.
type - Specifies the MIME type of the linked resource, such as text/html.

The id, coords, shape, urn, charset, methods and rev attributes are obsolete.

External Hyperlinks

You can create hyperlinks to other HTML documents by setting the href attribute in a element to a URL that starts with http://

When the user clicks the hyperlink, the browser will load the specified page.

		      <!DOCTYPE HTML>
		    <html>
		    <body>
		      <a href="http://studentsempire.com">website</a>.
		    </body>
		    </html>

Note

Not all URLs have to refer to other web pages.

Browsers also support other protocols such as https and ftp. If you want to reference an e-mail address, you can use the mailto protocol

Relative URLs

If the value of the href attribute doesn't start with a recognized protocol, such as http://, then the browser treats the hyperlink as a relative reference.

		        <!DOCTYPE HTML>
		    <html>
		    <body>
		      <a href="index.php">visit website</a>
		    </body>
		    </html>

When the user clicks the link, the browser uses the URL of the current document to determine how to load the linked page.

Internal Hyperlinks

You can create hyperlinks that bring another element into view in the browser window.

You create internal hyperlinks using the CSS-style ID selector, #id, as shown in the following code.

		        <!DOCTYPE HTML>
		    <html>
		    <body>
		      <a href="#tutorial">here</a>
		      <br>
		      <br>
		      <br>
		      <br>
		      <br>
		      <br>
		      <p id="tutorial">This is a test.</p>
		    </body>
		    </html>

Target browsing context

The target attribute from a element lets you tell the browser where you want the linked resource to be displayed.

By default, the browser uses the window, tab, or frame in which the current document is displayed to show the linked document and replace the existing one.

_blank - Open the document in a new window (or tab).
_parent - Open the document in the parent frameset.
_self - Open the document in the current window (this is the default behavior).
_top - Open the document in the full body of the window.
<frame> - Open the document in the specified frame.

Using Anchor class

		        a:link {color:#FF0000;}    /* unvisited link */ 
		    a:visited {color:#00FF00;} /* visited link */ 
		    a:hover {color:#FF00FF;}   /* mouse over link */ 
		    a:active {color:#0000FF;}  /* selected link */

		        <!DOCTYPE HTML>
		    <html>
		      <head>
		        <style>
		            a:link, a:visited {
		              text-decoration: underline;
		              color: #6A5ACD;
		              background-color: transparent;
		            }
		            a:hover, a:active {
		              text-decoration: underline overline;
		              color: #191970;
		              background-color: #C9C3ED;
		            }
		    </style>    
		      </head>
		      <body>
		        <ul>
		          <li><a href="#">A</a></li>
		          <li><a href="#">B</a></li>
		          <li><a href="#">C</a></li>
		          <li><a href="#">D</a></li>
		        </ul>
		      </body>
		    </html>