Anchor tag is the tag that produces the hyperlinks on our webpage. What are these hyperlinks?
"... an icon, graphic, or text in a document that links to another file or object. The worldwide web is comprised of hyperlinks linking trillions of pages and files to one another." - http://www.computerhope.com/jargon/h/hyperlin.htm
Well, below is a link that redirects you to another blog once you clicked it:
Notice that it opened in another tab and delivered you a new page.
How will we code it?
Basically, this is the syntax of an anchor tag:
<a href="#">Redirect me, please</a>
... and it looks like this on a webpage
Now, how does our hyperlinks appear on our webpage depending on its status?
- Unvisited/unclicked hyperlink - an underlined blue text
- Visited/clicked hyperlink - an underlined purple text
- Active link - an underlined red text (try holding down your left click and you'll see)
Attributes
<a href="www.google.com" id="lnk-id" target="_blank">
- href - specifies the target location to where the user will be redirected once the hyperlink is clicked
- id - sets the identity of the hyperlink
- target - defines what will be the behaviour of the hyperlink once clicked. The target attribute has different values and they are as follows:
- _blank - opens the link in a new tab
- _self - opens the link in the same page where it is clicked
- _parent - opens the link in its parent frame
- _top - opens the link in its own page
Please refer to http://www.w3schools.com/tags/att_a_target.asp for more details about the target attribute. Google is your friend :)
Let's get it on
1. Open your favorite text editor and type the code below:
<html>
<head>
<title>Your webpage title goes here</title>
</head>
<body>
<a href="www.google.com" target="_self">Redirect me, please</a>
</body>
</html>
<head>
<title>Your webpage title goes here</title>
</head>
<body>
<a href="www.google.com" target="_self">Redirect me, please</a>
</body>
</html>
2. Save your file then open it on your browser. It should look something like this.
*Please feel free to leave comments, questions and corrections. I will promptly respond to it, promise!
No comments:
Post a Comment