Placeholder Image

Subtitles section Play video

  • In HTML you create a hyperlink with the a tag. Let's make a working copy of links.html,

  • and I'll call the copy links-working.html and open it in my text editor. Very simple,

  • small, HTML page. It's got a paragraph and it's got a link. Go ahead and open this in

  • the browser. You notice that the file that's opened here is on the desktop. The URL is

  • a file URL like that. So what that means is that this URL is not on a server. This file

  • is not on a server. It's on my file system, so that's why we have a file URL. And there

  • is a link here, and you'll notice the helper text at the bottom of the screen, so down

  • here we get this little hyper text when I hover my mouse over it. It has an HTTP URL,

  • so it says http://ldc.bw.org, and if we look here in the HTML file, you see here's a link

  • to--we have <a href=, and there is that URL that was showing up at the bottom of the screen.

  • You see it down there at the bottom of the screen? That's exactly the same. So if I click

  • on this, it loads up that page on my web site, and that URL is ldc.bw.org. Now, this is Firefox,

  • and it obscures parts of the URL. If I put my cursor up here-- and that still doesn't

  • do it. In some browsers, if you put your cursor up there, it will show you the whole URL with

  • the HTTP and everything. Here it's just showing you the part of it that goes after the HTTP.

  • So that's not helping us much, but that's what it looks like. So the a link, a stands

  • for anchor, and that's a historical reference really. A tags aren't so much anchors any

  • more as they are just links. Used to have a dual purpose, and one of those purposes

  • has been completely deprecated out of HTML. But it looks like this. It has the name of

  • the tag, which is a; the href attribute, which specifies the URL where the link goes; and

  • so it's as simple as that. And if we come back to the page here and we reload, we can

  • click on that link and it takes us where we want to go. There is one attribute I'd like

  • to show you here. It's the target attribute. You can specify the name of a named window

  • that's been opened and created with JavaScript, or you can say _blank. And if I save this

  • now, it will open it in a blank page, and in Firefox that usually means a tab. Let me

  • reload here and go ahead and click on that, and so it's opened this page in a new tab

  • and it's left that alone in the old tab. In some browsers it will actually open it in

  • new window. Now the a tag is actually an inline tag, but it's unique in that it will allow

  • block-level content. And so if I take out this whole paragraph here and instead, in

  • between this a tag I can put block-level content. I can do something like section, and I can

  • give it a little bit of style, and inside of that, I can have an h1 tag and I can have

  • paragraph tags, and all of this can be inside of an a element. You know, when I save this

  • and reload it in the browser, all of that is now this link and I can click anywhere

  • in there and it will bring me to the target page. The a element by itself is very powerful,

  • and it may look and work in many different ways, especially when combined with CSS. We'll

  • see more examples of this in the rest of this chapter.

In HTML you create a hyperlink with the a tag. Let's make a working copy of links.html,

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it