Navigating from One HTML Page to Another
The process of navigating from one link to another is accomplished in HTML using something called an anchor tag.
As with all of HTML, look/feel and functionality come down to which tags are used and where.
Anchor tags are no exception to this rule, and thankfully they are really simple to use as well.
Let's assume you're building an HTML web page, and on this web page you want to include a link to a second page, how would you do this?
It comes down to two things:
- Where do you want to take your visitors when they click on the link
- What do you want the link to “say” on the webpage (i.e. what word(s) would you like to be clickable)
Anchor Tag Code (the basics)
Once you've identified the two fundamental things you need to know before you create an anchor tag, you're ready to rock.
Let's say we want to take our website visitors to a wicked source of free video tutorials on Java… what would that code look like?
<a href="http://youtube.com/howtoprogramwithjava">Click here</a> for wicked Java videos
As you can see, there are two main elements to creating an anchor tag. The first is the anchor tag itself with the destination URL (i.e. the place where the person will go when they click on the link), the second is what should be clickable (in this case it's the text “Click here”).
All anchor tags require an
href attribute, as that's what tells the browser where to go once it's clicked.
And of course you must let the browser know which part can be clicked to “activate” the link… this is done by wrapping some text with the
<a href=""></a> code. This means that anything you put between the opening “<a>” tag and the closing “</a>” tag will be clickable. This rule even applies to images (which we will talk about in another article).
How to Get a Link to Open in Another Window / Tab
Okay, so that pretty much covers the basics.
As far as anchor tags go, it doesn't actually get much more complicated.
If you want to get fancier, we can talk about how to open links in a new window / tab.
You see, the code we've already covered will always navigate to your desired URL in the same window. But what happens if you want to KEEP the user where they are and just open the link in a new window?
It's bloody simple!
You just need to add another attribute to your anchor tag. Here, I'll show you, let's take our previous example and modify the code so that the link will open our Java video website in a new window / tab:
<a href="http://youtube.com/howtoprogramwithjava" target="_blank">Click here</a> for wicked Java videos
Just in case you missed it, we've added a
target property to the anchor tag, and we've given it the value of
_blank. Don't ask me why the value has to be
_blank but that's what will tell the browser to open a new window / tab and load it with the URL (
href) that was specific in the anchor tag.
There are some other values that can be specified for the
target property, but these days, they aren't used very often at all. If you're curious, you can just Google “html anchor target” and you'll get a list of different functionalities.
Removing the Underline from an HTML Link
By default, a link will appear as follows (in all browsers):
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
I know that every once in a while I actually want to play around with how my links look on a web page. This is something that you'll eventually want to do as well, so I figured now is a good a time as any to tell you how to change the way links look.
This actually involves using some CSS. We've talked a little bit about CSS already in this article so be sure to read up on it if you haven't already.
Believe it or not, you can actually modify a link in a few ways, you can:
- Remove the underline under a link
- Change what color a link turns once the user has visited the link
- Change the appearance of the link when someone hovers over it
- Change the appearance of the link when someone is clicking on it
For more details on how to do this with CSS, just take a look at this article in W3Schools and scroll down to the section marked “HTML Links – Colors“.
So overall the process of creating links in HTML is pretty straightforward. The hardest part is just remembering that to create a link you need to use the
<a href=""></a> tag!
I hope you found this article helpful, and if you want to receive more sweet tutorials like this one, just sign up for the email list below, you'll be the coolest kid on your block ;)