PHP HTML CSS

HTML Links and Style

html link and css
HTML hyperlinks a.k.a links is a word, a combination of words or an images that user can click to jump to another pages or documents. Usually to identify a links in web, the cursor will turn to a little hand when it hover to the links text or images. In HTML, the most important attributes to create a links is <a>.

In HTML, the code use to generate a link is shown as:

1. External links to Google website:

<a href="http://www.google.com" target="_blank">Google</a>

 

2. Internal links:
<a href="/index.html" target="_blank">Index Page</a>

 

3. Image contain links (Google logo links to Google website):
<a href="http://www.google.com" target="_blank"><img src="/img/googlelogo.jpg" /></a>

 

4. Email links with subject:

<a href="mailto:user[at]yahoo.com?Subject=Important%20notice">Email</a>

 

The website will only show "Google" text as highlighted in blue color. By default, HTML will show link as:
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red

To change the links color to make it suitable with your website theme, we can use Cascading Style Sheet (CSS) which wil help you to control the link color. Here the codes:

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 */

 

This codes hows how it look when we combine the HTML links and CSS coding (Internal CSS):

<!html>
<head>
<title>Link & Links CSS</title>
<style>
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 */
</style>
</head>
<body>
1. External links to Google website:
<a href="http://www.google.com" target="_blank">Google</a>
<p>
2. Internal links:
<a href="/index.html" target="_blank">Index Page</a>
<p>
3. Image contain links (Google logo links to Google website):
<a href="http://www.google.com" target="_blank"><img src="/img/googlelogo.jpg" /></a>
<p>
4. Email links with subject:
<a href="mailto:user[at]yahoo.com?Subject=Important%20notice"; target="_blank">Email</a>
</body>
</html>

 

Click here to download the source file for this tutorial.
Author Information
Muhammad Asyraf bin Wahi Anuar
Web Administrator
Asyraf enjoys life and has great enthusiasm for all outdoors activities especially MTB! Don't Follow Me. I'm Lost Too -_-

Tags: , , , ,
Muhammad Asyraf bin Wahi Anuar | Copyright 2017 | Informatic Trooper