HTML Links

Welcome back to Educator.com.0000

Today's lesson is going to go in-depth with links, also known as hyperlinks, anchor tags, hypertext...0003

It is basically the foundation of the Internet, so we are going to spend a lot of time looking at all the different details surrounding it.0016

The most important thing about links is probably that they take you to a location.0025

And when you specify in the link the location you want to go to, you are using a URL or a URI.0031

URL is Universe Resource Locator; URI is Universal Resource Indicator.0037

Now, there is a difference between these, even though most people use them interchangeably.0043

Most people just say URL all the time, but technically, a URL specifies the location of a resource on the Internet0049

and the way for retrieving it, whereas the URI can do that, or it can just specify the name.0057

It could just indicate what the resource is, without actually explaining to the browser how to get there or what the location is.0066

An example would be this link here: this is an actual URL from the w3 website.0074

There is this file right here, w3c_home, which is an image.0083

And this is a URI, not a URL, because it doesn't actually indicate the file type of this file.0089

It doesn't say it is a .gif or a .png; it just gives this file.0095

And it leaves it up to the browser and the server to negotiate together which file to get,0101

because there are actually two files on the server with this name in this location.0108

And there is something called content negotiation that the browser and the server talk to each other,0113

and say, the browser says, "Well, I can't read PNG, so will you please give me the GIF?" and the server will send the GIF.0122

Or it could be the other way around; and that is one of the advantages of using a URI, instead of a URL.0129

But this is just an example; there are a lot of different ways you can put the URI together.0135

But that is just a sort of preliminary introduction.0141

We are going to spend a lot of time looking at the URI, or the URL, and seeing what the different parts that make it up are.0145

Typically, a URL or URI--the most important part is the domain.0155

So, in this example, google.com, a very familiar ".com," is the top-level domain.0161

There are a lot of these: .com, .org, .net, .edu--which can indicate the type of website, or even the country of origin0168

(like .uk would be a Great Britain website).0177

And then, the next one behind that is the actual domain, and then in front of that is the sub-domain.0183

The domain is the main thing that you are usually thinking about when you are getting it.0192

And the sub-domain can be sort of like an entire website on its own, that is a part of the domain, but on its own little area.0197

It used to be that servers, way back in the day, when the Internet was not really the World Wide Web yet--0207

servers would have lots of stuff on them.0214

And Tim Berners-Lee invented the World Wide Web: he was hoping that people would put all their web pages in that www. domain.0218

So, that is why you see, a lot of times, www.domainname.com--because it is indicating that this is the World Wide Web part of the domain.0227

And nowadays, the World Wide Web is the most important part of the Internet, so we don't really do that anymore.0238

Now, kind of like subdomains, you just assume that they are going to be on the World Wide Web.0245

And you use it to divide it up.0250

So, for example, in maps.google.com, it is the maps website on Google, to distinguish it from other parts of Google.0251

This first part here, http, is the protocol: the protocol is the language that the browser and the server are using to communicate all of this data.0259

HTTP stands for Hypertext Transfer Protocol--hypertext, like HTML-type text markup language.0270

There are a couple of other ones; another one you may run into is FTP, which is File Transfer Protocol,0278

which you will use for uploading your web pages to a server.0283

And so, you need to specify how they are going to actually be talking.0288

So, this just establishes the language; this establishes the type of website;0291

the domain itself, where the server is--only now, it could be many servers; and the subdomain.0296

Now, I have also given an example of an IP address here.0306

You don't always have to use the domain; you can just use the IP address.0309

Every server has one; every domain has one; these aren't necessarily going to always be the same.0314

This is the IP address for Google right now; you may type it in later, and it might not work anymore; they may have changed it.0320

But they each have their own uses; usually, you just stick to the domain.0327

OK, so now, let's look at a second-level domain, which I already mentioned (.uk would a Great Britain website).0334

Actually, all .uk domains have a second-level domain, which is this part right here.0342

And it is probably the most common one, co: .co.uk.0349

You can kind of think of it as its own domain, but the real domain is here; and that has a second-level domain.0353

And this is just all one thing, and then you have the real domain--in this case, example is the name of the domain.0359

And then, sometimes, websites will need to specify a certain port that they are using.0367

That is this part right here: you have a colon after the top-level domain, right before the slash, and then you have the port number right here.0372

The default is going to be 80; so, if you put this port number, 80, in, it is almost always just going to not affect your URL.0379

It will just work automatically, because that is what the default is.0387

Usually, you are only going to put a port in if the server has something special where it needs a different port,0390

or if you have a certain reason that you are using a different port.0396

But just so...if you ever come across this, so you know what that is...0402

And then, probably the most obvious thing is folder names (in this example, educator.com).0407

In fact, if you look at the top of the browser right now, if you are viewing this online, you will probably see this Computer Science folder in the URL.0414

And there can be any number of folders; and these are very much like a folder on your computer.0422

It is a folder with files in it, that can contain other folders.0426

And you can navigate through them, just like any other folder.0430

You have the slash after the top-level domain, and then right after that will be a folder.0435

You know it is a folder, because it has this trailing slash.0443

It is important to put this slash here at the end, so that when you send the request for this page,0446

the server know that you are asking for a folder, and not a file.0453

If it doesn't have the slash, it is going to check to see if there is a file like this.0457

Remember what I was talking about--content negotiation: there may be some content negotiation stuff to go on there.0460

It is going to realize that there isn't, because nobody really does that anymore (unless you have very complicated reasons, or you are really advanced).0468

And then, it is going to send a second request with the slash on it.0477

So, it is just that if you don't put the slash, it is going to send two requests; and in some rare cases, you could cause some confusion.0479

The file name is usually going to be the very last part of the URL.0488

And it is just like a file on your computer, usually: it is the name of the file, and then the extension of the file.0492

For a lot of web pages--especially if you are hand-coding it--it is going to be .html.0500

Now, as I already mentioned, the extension is not always going to be there.0507

But it is a good idea to have one, if you are coding yourself, because you are going to have it0513

automatically associated with your text within programs and things like that.0521

On the Internet, that doesn't so much matter, especially if you have programs that are generating pages with server-side scripts or content management programs.0525

In this case, I have given the file index.html; and you can actually go to google.com/index.html, although you never do that.0538

And the reason is: well, 1) nobody wants to type .index.html every time they go to Google.0547

So, we have this shortcut system, where if you just have the domain, or you just go to a folder,0553

it automatically will look for some default files that are the index for that directory.0561

In this case, index.html is the default; you also will see things like name.html or .htm.0567

It depends on the server settings, but usually it will go automatically to index.html and name.html.0576

If we didn't put this in here, it would automatically get there.0583

We could put any other file name to get to one that is not the default.0587

This example right here is actually the same example as on the first slide, where I was talking about content negotiation.0591

But I have actually given the file extension, so this is no longer a URI; this is a URL.0601

It is actually giving the full location, and there is no content negotiation going on; it is saying, "Give me the GIF version of this image."0606

This example is another real-world example; you can go to this on the w3 website.0614

And you might think, based on looking at it, that this is a folder, because it doesn't have an extension here.0620

But this is actually the name of a file, and if you go here, it will bring up a page.0627

Now, if you wanted to go to the directory, there would be a slash there.0633

You can also send some variables or data through the URL, which happens a lot with forms and...0641

for example, on Google Maps, you will see a lot of variables sent.0650

Any website that is using server-side scripting in generating pages0653

and sending a lot of information around will have this sort of stuff show up in the URL.0656

It is called name/value pairs, and it is a variable with this name, and then this value.0663

So, it goes right after the file or end of the folder.0670

You put a question mark to indicate that you are starting with name/value pairs.0673

And then, you give the name, an equal sign, and a value; don't put any spaces or any really crazy characters.0678

And if you want to add more, you can use an ampersand and add as many more as you want.0684

And for HTML, the purpose of this course, I am not going to explain how you can really work with these.0689

It is usually going to be involved with scripting or form submission--server-side stuff.0696

But you will sometimes need to use this in your links.0700

The last thing that is a common part of URL construction is the internal link.0705

Right here, we have this hash at the end of this page here, and then a name that goes after it.0711

This is an internal link; so, what this link will do is take you to the Wikipedia article on HTML5.0719

This is the actual page that you are going to.0724

And then, right here, this hash indicates that it is a bookmark link that is going to take you to the section that is the markup section of that page.0728

So, you will actually scroll down to that part of the web page on this Wikipedia article.0736

And I will actually go into a little more detail on that later.0746

If you understood all that, you should be able to look at this URL and make some sense out of it.0752

I have taken away all of the real writing or names of domains, or anything like that, and just replaced it with the letter a.0759

Take a look at this and see if you can understand any of it.0767

For example, try and find the domain; try and find which parts are folders, which parts are name/value pairs...0770

And if you can, just go from left to right and identify every single part.0779

If you want to pause the video to do that, go ahead.0784

I'll go ahead and explain it from left to right, just to make sure you have it.0787

This part right here, before the colon and the double slash, is the protocol.0792

In most cases, on web pages, that is going to be HTTP: hypertext transfer protocol.0796

Then, we have this section right here, which is the domain, which consists of the top-level domain, the domain name itself, and then the subdomain.0801

This :80 is the port, and then the slash--if the :80 wasn't there, the slash would be directly after the top-level domain.0812

These two sections right here, just contained in the slashes, are folders.0821

And this is a file name; we can tell, because there is not a slash here.0826

And this dot indicates that this is probably the file extension, and this is the file name.0831

This question mark indicates that you are starting name/value pairs, so this is some stuff that some code is going to be using.0837

The ampersand indicates that it is starting another name/value pair.0843

So, this is the first variable, and this is the value to it; that is the second variable, and that is the value for it.0847

And this is a bookmark link, or an internal link.0851

This will scroll you down to the part of the page that has this name on it.0855

It is important to understand the difference between relative and absolute URL's, or URI's,0863

because a lot of times, you will be making copies of pages, or transferring them to new locations;0869

and if you have these messed up, then your links are all going to break--every single one.0877

Say you change the name of a folder, or you move it, or you make a copy...0882

So, it is important to get this straight.0887

An absolute URL is what I described in the first part of this lesson: it is things starting with the full URL,0890

with the protocol and the domain and all of that, all the way up.0897

Now, you can use shortcuts to define these links relatively.0901

So, in this example--all of these examples, by the way, are the full URL; that is why I have used these quotes--0907

to indicate that I am not truncating it for the sake of the slide here; this is the full thing.0914

You could have href= all of these, or source= ; this is the full thing.0920

In this case, you have a slash before index.html.0930

When you begin a URL with a slash, what that does is takes you to the root level of where you are.0935

Everything is relative to the document or the file that has the link in it.0942

If you are on Educator.com, for example (or any domain), it is going to take you to the root of that domain if you use this slash here.0948

It would take you...no matter how many directories deep you are, it is going to take you directly down to the domain name.0956

So, educator.com/index.html is where this would take you if you were on the Educator domain.0962

If you are on your computer, and you do this locally, it is going to take you to the root of your computer,0967

which, in, say, Windows, is probably going to be your C drive; so, it would be C:/index.html if you happen to have an index.html file there.0973

And if you don't have that slash--if you just have the file name itself with nothing else before or after it--0984

that is going to be, again, relative to the page that the link is on.0991

And it is just going to take you to index.html--that file in that folder that that file is in.0999

So, it is going to go relative from where it is; it is not going to change anywhere, and it is just going to look for a file of this name in the same folder, same directory.1006

Now, these examples are more on the same theme of: you can go to a root, and then go to a folder.1018

And then, this trailing slash here--you can remember that lets you know it is a folder.1027

So, what this will do is take you to the root of the domain or your computer, go in this folder, and then open the folder.1032

So, if you are on your computer, it will probably just open this folder up, and you will be seeing files.1038

If you are on a domain on the Internet, it will probably look for the index.html file in this folder and open that.1042

Or if it can't find it, it will show you a little funny display of the files in that folder.1050

Now, this is where it gets a little bit tricky.1058

This notation here--the two periods before the slash--doesn't take you to the root.1061

What it does is takes you up a directory; so, whatever directory you are in, it will look up one directory.1067

If you are in a folder called Folder, and that folder is in the root, it will take you to the root.1077

So, it could potentially take you to the root; but if you are several folders deep, it will only take you one folder up, not all the way to the root.1085

But then again, if you are several folders deep, you can go one at a time.1092

So, in this case, it would take you up one folder, two folders, three folders, four folders.1096

And then, it is going to start going down from four folders up from where your folder started from,1101

into the folder names that are here--one, two, three deep, depending on what these names are.1107

This may be a little bit confusing to just explain verbally, so I am going to try and give a little bit of examples here, looking locally on this hard drive.1113

Here, I have prepared a couple of folder structures.1130

This is mimicking a couple of cities and states in the United States.1135

Here is the top folder; we could imagine it is in the root, although it is not really.1142

And then, directly in this folder, we have California, Florida, and New York folders.1147

And in each one of these, there are cities; and then, each city has several HTML files that are for that city.1152

See, Florida has Orlando here; New York has Buffalo, Manhattan, Rochester; and those.1162

So, if we wanted to, say, open up this file here, we get this little page for the city of Rochester.1169

And this is page 4; we could click to city 1, and it would take us to city 1.1181

They actually look exactly the same, so you probably didn't notice that it changed, although,1186

if we were going to pull it up in the code, we can look at it and see what is really happening.1192

Here is the code for that same page we were just looking at.1211

And look at this links here: this is a list of links that we had, and I clicked on city 1 from the city 4 page.1214

And they were all in the same directory; and you will notice that the URL's here are just simply the name of the file.1223

So, since it is in the same folder, it just looked for city1.html in the same folder.1230

And it just moved on over, very simply.1236

Now, it could have very easily gone to another folder, if I had indicated in here, say, that I wanted to go up a folder.1240

This is in Rochester; and then, these two dots and then the slash--you can go up, so that will take it up into the New York folder.1254

And then, say I wanted to move over to Manhattan--I could then drill down from New York into the Manhattan.1263

And then, it would open the city1.html in Manhattan.1270

I have sort of messed up this page, if somebody was trying to really use it for something useful.1275

But now, if we refresh this and click on it, it is going to take us to Manhattan now,1279

Even though I didn't change the name of the file, because the Manhattan city file has the same name.1288

And so, you also can see that (let's go back to Rochester) I have links to the State and Nation pages.1298

So, say I click on the state; now, I have a page for New York, and it has links to these other ones here.1307

Here, we can see, in the directory up here: this is the New York directory, and we have this index.html.1313

Let's open that with our text editor; and now you can see the code here.1322

And these links are drilling down from the state level into the city level.1330

So, they all precede the file name with the name of the folder of the city that they are going into1336

(Manhattan for these, Buffalo and Rochester on through...), and you can see easily that they will click right on through,1342

to the city, like this, and then up to the nation, as well.1356

Let's say that you want to do something funny.1359

You are in California, in the Los Angeles link, and you want to make a link that drills up to the state,1363

and then up to the nation, and then back down into Florida, and then down into Orlando, and then opens one of the files there.1374

And you don't want to give the full path to it in an absolute way.1383

You just want to give it in a relative way.1386

Let's show you how to do that.1390

We are in California, LA, and then this first one here; let's edit it...all right, there it is.1392

Let's create this link: first, go up one directory; and that will be, not in the city level, but in the state level;1409

up again, and that takes us into the country level; and then we want to go down into Florida, and then down again into Orlando.1417

And then this slash to separate them...and save that...1428

And then, refresh it here, and this should take us to Orlando.1438

It went up, and then back down.1443

All right, so links can actually appear in several different types of states.1449

You probably already know this without really thinking about it, because it is a default browser style in all browsers,1461

where links that you have already visited once are a different color; if you haven't visited them yet, they are usually blue.1469

And then sometimes, while you are clicking on it (or while you are hovering over it), it can change.1475

This is done with CSS; it can actually also be done with HTML, but that is HTML4.01, and I want to focus more on moving forward and using HTML5.1479

So, I am not going to explain how to do it with HTML; I am just going to recommend that you use CSS.1489

This is the CSS that you would use to change the different link states to the styling that you want.1494

If it is just this one here, link is the unvisited link; give it a color blue...1504

text-decoration means to remove the underline for it; that is kind of the cool thing that people like to do.1509

visited will give it a red color, and then hovering and active--I am going to underline it.1514

If we open up this United States page, this top one, you will see that the text is green.1519

And then, say, I click on this and then go back; it is still green.1529

But if we want to open it up in the code and look at what it is going to look like, we can change the colors whichever way we want.1535

Here is the main index; OK, there it is.1549

And I have hidden, all the way down at the bottom here, some styles: a:visited{color:red;},1560

and then the text-decoration while you are hovering is to be underlined,1572

and then if it is active, it is going to be underlined and have a font weight of bold; we'll save that.1576

So now, you notice, if I click on it, it turns bold for a second; and when I let go, it doesn't go there; the same thing here.1592

And the underline shows up as I hover over it.1600

Now, see here, this is the default; the color is not changing--there must be some browser setting that I am not aware of.1606

But in most browsers, it will actually work the way that I expected.1613

Block level links are a new thing in HTML5, although browsers have been doing it this way for a long time.1623

Technically, in HTML4.01, you are not allowed to have block level elements within an anchor tag (or an anchor element, I should say).1631

You should just have text, or text-level elements, like em or span or things that change the text on a textual level,1641

instead of like blocks and boxes and headings and images and things.1653

But browsers have been supporting you doing this (against the specifications), and in HTML5, they decided that it should be allowed.1658

So, this is a new thing that you can do, and be semantically correct and conforming, as well.1665

Say that you have a web page here, and you have a little advertisement that you have off to the side.1671

And this advertisement is going to have a header, an image, and then a little title below it1679

to try and get you to click on it and "go and get your free iPod" or whatever.1686

You would have a little aside; and it used to be that, to be conforming, you would have to have this same link, href,1691

to spam.com or whatever you are going to, for each one of these.1698

So, you would have to have one in here, one here, and then one here, as well.1703

But now, you can include all three of them in this one link.1707

And you notice that that changes some things.1712

It frees up the Alt tag in this image; now, instead of describing where the link is going, I can just describe the image,1714

because this isn't the only thing that is in the link.1722

So, whereas before I would have to say something like, "Link to free iPod," now it can describe the image.1726

And this is an image of a very free-looking iPod.1733

You can do lots of block elements; you can do lists--you can have entire lists inside of an anchor tag.1741

Any time that you want to have multiple things linking to the same thing, you can do this now.1751

Bookmark links are what I described before, when you are going to have the browser automatically scrolling down to a certain location on the page.1760

The way to do that, as I indicated before, through URL's, is with this hash mark.1768

This is going to be a relative URL, so it is going to be looking at the very page that it is on.1773

Whatever page this link is on, it is going to go to that page, relative to that page, and then look for this internal location on that page.1778

And then, it is going to scroll through the page until it finds that this down here is the destination of this link.1789

And you just indicate it with an ID, so it has the same name.1796

You don't need to put the hash here; that is just a special notation to indicate in a link that it is looking for an internal link.1799

And then, this is just the name itself.1806

It used to be that you would have to have another anchor tag--something like a:name= and then the name of the bookmark link.1807

But now, any idea will work.1814

Let's pull open our page that we have here and give an example.1816

Let's say we want to make an easy way to link to the bottom of this page.1824

We can say, "Link to the end," and we are going to have the end right here, and put the hash1831

(and that is the bookmark notation), and then the content of the link, and then end it.1845

OK, so we have that paragraph; and now, let's go down to the bottom and create the destination for it.1855

We can put it right in this paragraph tag.1868

Save that; pull it up in the browser now; all right...there is the Nation page.1881

So, here is this new little text that we added to the end of this page, and it is a link.1894

And a link, again, is going to look just like this in the source.1899

And when you get to it, click on it; it pops us down to the bottom of the page.1911

This is the end; that is the text we added there.1916

And this is the exact same page; it just popped us down.1918

OK, the last slide is just kind of a quick overview of attributes.1928

There are a lot of attributes that you can use in links, but these are the most important ones.1933

The href and target attributes deal with what happens when users follow the link; so they are action attributes.1941

href, you should know by now, is hyper reference; it is going to tell where the link is going.1950

And then, the target is going to say how it is going to do that, or what context that page should be opened in.1956

Here is an example here: href popped an HTML.1963

It has a target attribute, and the value here is _blank, which is a special value that will open this link in a new window,1966

which I advise to never do, unless you have seriously thought through it,1978

because it is annoying for people who know what they are doing,1982

and it is confusing for people that don't know what they are doing, on the Internet.1985

But nonetheless, you can do it; but there are a lot of other types of contexts in which you can have a new page be opened.1988

The rel, media, href lang, and type attributes are all attributes that give information about the target link and describe its nature.1999

In this first example, it is a little gift that is being linked to the type attribute.2012

Well, this can describe what the MIME type is; so it is an image/gif.2018

And so, normally, when you link to an image like this, it is just going to open it in the browser.2024

But depending on your browser settings, if you specify a type of image/gif, it may decide to download the image,2030

because it is an image, instead of just another part of the Internet (like a page).2039

And so, this can be a very important attribute.2046

The rel attribute will describe the relationship of the page that you are linking to, to the page that it is being linked from.2051

So, in this example here, you have a link to page 2; you can imagine you are on page 1.2061

And the relationship between page 1 and page 2 is that page 2 is the next page from page 1.2067

And this is also a specified value; I didn't just make it up.2074

And so, browsers can look at this and understand where the flow is going and this sort of thing.2079

It is useful for browsers and a lot of other contexts.2086

We already looked at the pop-up example; this example here is the relationship one again.2092

That is just a duplicate, so ignore that.2098

Now, this last one is probably the most complicated, and probably going to be used the least.2101

But it indicates a relationship of alternate, which means that the page that it is linking to is an alternate version of the same page.2107

So, this link, you could imagine, would be, say, a page in French, and it is linking to an English version of that page.2117

And furthermore, it is specifying, with the media tag, that the type of media that it is--it is to be printed.2125

It is going to link to the English version of the page, and then print it for you immediately.2134

And the href lang is just specifying a language (en for English, of course).2140

And then, this is some French; I think this says "Print in English."2145

But for the most part, you can get away with just using the href attribute,2150

and then any other attributes that are global attributes,2157

that you can use anywhere else, that you need to use, depending on your context.2160

And then, these other ones are just good to know about, in case a situation comes up where you need them.2164

You should have a good introduction to links and the different situations and contexts that you might use them.2170

There is always more research that you can do on your own when you come across2178

more particular use cases are scenarios that you need to research on your own.2182

Just pull up a browser and do a Google search, or look at the HTML5 spec.2187

But this should be a good introduction, so far, for links.2193

And thanks for watching Educator.com.2198