How to Create HTML Links to Other Web Pages
A link is something you either click
on or tap and then the browser brings up a different Web page. Links are what connect Web pages together.
To create a hyperlink, or link for short, we use the
<a> element. The <a> in this element stands for anchor. Here is how
to create one:
<!DOCTYPE HTML>
<html>
<head>
<title>A HTML Link</title>
</head>
<body>
<a href='https://gamecodeplus13.blogspot.com'>Click here!</a>
</body>
</html>
As you can see, the <a> element needs an 'href' attribute. This hyperlink reference tells the browser which Web page to be
directed to.
The text between the start tag and end tag becomes the link
that someone can activate by clicking on it.
But you don’t need text. You could put an image element
between your <a> tags and that would become the clickable link. In fact,
you could put any visible object or element between the <a> tags to make
that the link. And even that could be compromised with some CSS code to make an
invisible link. But why stop there. You could place the <a> element just
inside the <body> element making your entire Web page one big crazy link.
<!DOCTYPE HTML>
<html>
<head>
<title>A Crazy Link</title>
</head>
<body>
<a href='https://gamecodeplus13.blogspot.com' target='_blank'>
<p>...Here would be an entire Web page with pictures and stuff...<br>
All one giant link.</p>
</a>
</body>
</html>
In that silly example, you might have noticed a 'target' attribute. The target attribute tells the browser where to open the link at. In
this case, a new blank tab or window. If the target value is ‘_self’, then the
link will open in the same window or tab instead of a new one. If the target
attribute is not declared then the browser will default to ‘_self’ as the
target.
One more thing, you can’t nest an <a> element inside
another <a> element. It won’t work. Believe me I have tried.
But you can add a 'title' attribute to links. This will add floating text to a link if someone hoovers a mouse pointer over the link.
<!DOCTYPE HTML>
<html>
<head>
<title>A Crazy Link</title>
</head>
<body>
<a href='https://gamecodeplus13.blogspot.com' target='_blank' title='This is a link'>
<p>...Here would be an entire Web page with pictures and stuff...<br>
All one giant link.</p>
</a>
</body>
</html>
If you were curious, that <br> element is just a line
break. It tells the browser to start a new line.
Another thing links can do, if you create an element that has an id attribute, you can link to that spot on your web page.
<!DOCTYPE HTML>
<html>
<head>
<title>AN HTML Link</title>
</head>
<body>
<a href='#bottom'>
Click here and jump to the bottom.
</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id='bottom'>Here is the bottom.</p>
</body>
</html>
Now you can jump to certain spots on your Web page.
A quick note on the difference between relative URL and
complete URL. Suppose you wanted to link to another Web page that is found in
the same directory as your current page. Then you could just put the name of
that new page in the ‘href’ attribute. Like this.
<a href='anotherWebPage.html'>
But if the link goes to another Web site, then you must put
the complete URL address.
<a href='https://www.blogger.com'>
Now suppose you wanted to link to the bottom of another Web
page. That Web page would need an element with the ‘id’ attribute assigned.
Like in our above example. Then you would link to it like this.
<a href='anotherWebPage.html#bottom'>
I hope you have enjoyed reading this tutorial about links.
There is still more you can do with links but for now I would like to move on
to image maps. So, join me for my next tutorial about image maps.
Comments
Post a Comment