Linking to external pages

“Visit lynda.com!” Now, in order to link to an external site or page, you’ll need to know the full URL for that site, and one of the best ways to do that is to simply browse to the site.

Now, one of the things that I don’t like that browsers have started to do, is that they’ve started to hide the protocol.  http, but there’s also protocols like https, for example, that tell me when a site is secure.

Browsers have begun displaying that in different ways, like having little icons, like little lock icons to let you know a protocol is secure, but I just don’t like that being taken away from me, I’m kind of a purist there, I guess. So, what I’m gonna do is I’m just gonna highlight all of that in the address bar and I’m gonna copy it. Now I’m gonna go back into my absolute.htm , and I’m gonna create a link. I’m just gonna go ahead and create an a tag around Visit lynda.com! And for the href attribute, I’m just gonna go ahead and paste that link in.

Now, it’s very important that I do have the entire protocol. So, if you copied it from a browser that, for whatever reason, doesn’t also copy the protocol, you have to place this in here. Just the http://www.lynda.com won’t work. It works if you type it into an address bar in a browser, but it doesn’t work for an absolute link. So, absolute links have to have well-formed URLs and that includes the protocol at the beginning of it. Now, this forward-slash, you’re gonna commonly see that in links. It doesn’t matter if that is there or not, if you take it off, it’s a little bit of a cleaner URL.

It doesn’t matter, it just means top-level directory for that site, so taking it off is not a big deal, and in fact, it may look a little better to take that off. And we’re gonna go ahead and give that a title attribute as well, and for the title attribute, I’m gonna be very descriptive here, I’m gonna type in “Visit lynda.com”. Alright, we’ll close that, and I’ve gotta remember to do my closing anchor element. So, I’m gonna go ahead and save that, and I want to preview this in my browser.

Now, I’m gonna close the tab here because I really want you to see that this link is doing it for us. When I click on Visit lynda.com!, indeed I navigate right to lynda.com, so the link is working perfectly. Now, you’ll notice that that actually replaced the page I had in that tab. What if you wanted it to open up the external page in a new tab? Well, to do that, you use another attribute called target. So, towards the end of the link, after the title, I’m gonna type in target= and for this target, I’m gonna do “_blank” . Targets were originally developed to work with framesets, which not a lot of people use in HTML anymore.

But the _blank target basically tells the browser, “Hey, I want this link opened up “in a new window or a new tab,” whatever the preference is set inside that browser. So, I’m gonna save that, preview that in my browser, I’m gonna close the old tab while I’m at it. And now when I click Visit lynda.com!, notice that it creates it in a brand new tab. Now, I’ve read a lot of tutorials and opinions online where people are like, “Oh, this is bad usability, “Don’t do this,” that discourage people from using _blank. But there are plenty of legitimate use cases for wanting a page to open up in a new window or a new tab, so it’s really important that you understand that functionality and how to do it.

And you’ll do it using the target attribute. So, as I mentioned at the top of the exercise, linking to external sites is pretty straight-forward. Just always be sure to check the link path, and make sure it’s the full link path, including the protocol.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s