Hi, today we're going to be talking about hyperlinks, or links,
as they're more commonly called.
And how you can use them to link your document with others out there.
Now, links are really what make the web a web.
It's this whole idea that different links built together create this kind of
knowledge that search engines or you yourself
can gain by going from page to page to page, and with hopefully related material.
So, let's get right into how you create a link on your page.
Links are called anchor links and that's where we get the a for in the a tag.
When you use an anchor tag,
the a tag you're going to need to make sure that you've two different parts.
You need a hyper reference and you need content.
So the hyper reference is just the reference to the location of
the new content.
So in this case I used http://www.umich.edu.
That tells a browser,
if somebody clicks on this link this is where I want to request the new page from.
We also need to have content.
The content is what we call the clickable part.
In this case, it's text.
I would actually click on an underlined text that says, University of Michigan.
But in some cases, it might be an image instead.
So what types of links can we have?
Some of the most common are called absolute links.
We also have relative links.
Internal links and
graphical links and I'm gonna show you examples of each one of those.
With an absolute reference in the a href section we need to put a fully formed url.
You need to have the http or https the address and
any type of extra document name you want.
So if you remember there's three parts to URL,
you have the protocol, the host and the document.
You need to include all of those if you have an absolute reference, right?
Everything else is still pretty much the same.
For a relative reference, we slightly change what goes in to the href.
Instead of linking to some outside or
even internal webpage, we're only going to put, in this case, the file name.
So in this case we're going to link to page2.html.
You might get slightly more in-depth than that,
where you can include also some sort of folder name.
So in this case we'd be going to the file called page2.html but
it's in a different folder called docs the third
way we can use a relative reference is to what we call use the ID tag.
So when you have href equals hash pound or history, we're
saying there's another location inside the same file and it's called history.
So, absolute versus relative links.
When would you use absolute links versus when would you use relative links?
With absolute links, you're basically saying, I am not in charge of this page,
somebody else is.
So if you're linking to somebody else's page,
absolutely use the absolute link with the full reference in there.
For relative is when you're developing your own site.
And it's really helpful to use relative links instead of absolute, so
that way if you move your page to a different server,
or you move it into a different folder, you don't need to rename everything.
And so those are some of the benefits to using local links,
is just the idea that you don't need to update as much.
Now, one of the things that you need to make sure that you never do
is have a link that includes some sort of file structure, we'll call it.
So check your links.
Make sure that it never says, C:page or MyDocumentsPage or
anything that is very specific to your computer.
The reason that you don't wanna do that is.
If you put your page out on the web.
If you're done you've put it up on a server or a hosting and
you want other people to click.
Well, it doesn't make sense that they would be able to access pages that are on
your computer.
So never ever have a reference that includes something local to your machine.
All right? One of the other things that you can do is
you can use images as the link.
So the clickable component doesn't have to be text.
You've seen this a lot.
It can be icons, images.
different things along that line.
In this case, I went in and I use the regular H reference and
what we're changing now, is not the h reference, but
content that goes between the opening and closing tag.
and I have gone ahead and I've put in an image instead.
Make sure that you use the alt text to go along with that image.
And another case I've done something very similar,
the only difference is, instead of using a local reference right here for
the image, I've used an absolute reference.
I've put in the entire URL.
So let's talk usability issues and accessibility issues.
If you're going to use a clickable component,
you wanna make sure that it has an informative name.
There's software out there that can list all of the links within a page for
people who are looking for things, who can't use typical.
typical means of accessing the page.
It is not at all helpful to them if all the links are labelled, click here,
click here, click here, right?
You want to give it some sort of informative name.
You also want to make sure that if you are using an image for
the clickable portion of your link.
That image needs to have some sort of alt text or
other information available to those who can't see the image.
So, let me show you some coded example of those types of links.
All right?
As you can see here, I have a reference to absolute references,
relative references, images as links, and then some embedded links, as well.
So, if I were to click on Washtenaw Dairy or Rosie's Coffee Bar and Bakery, or
Dexter's Bakery etc., it would actually take me to their pages.
Ahead back.
One of the tricks I want to point out as I'm doing this is,
as I hover over each one of these links, if you look at the very,
very bottom of my browser, and I can't really show at the same time, but
as you highlight it, it shows you which URL you are going to.
And I think this is very valuable for
people to know, because if you're ever hovering over a link, and
the information you see at the bottom of the page doesn't match what you said.
So absolute references take you away from your site.
Relative references can take you to something that's within your folder.
So right here I have an image of some doughnuts, and I have gone on and
they're in my folder in my file.
So I was able to link to them just using the picture name.
All right?
We can also use images as links as well.
Instead of writing Doughnuts from the Squire Shop, I went ahead and
made it so you can click on the image to get to the larger view.
This last idea of embedded links is a little bit interesting.
So let me bring you over to the code for just a second and show you.
Write down here,
I have something called relative references with an ID equals relative.
I have embedded links with an ID that says embedded and
up here, at the very beginning you can see I have div id = "absolute".
With embedded links, I can click on any of these and navigate within the same page.
So I'm not gonna go to a different page.
I'm not gonna open up a new tab.
Instead I'm gonna jump to different places within the page.
So I went to absolute.
I went to relative now if I try to do embedded references
it doesn't look like it moved but it really did.
It's just that we're already there.
All right, so that is how these kind of embedded or internal links work, right?
Now if at any time you get confused about how code is working.
I just want to remind you they can always go to view.
Developer and view source to really get a better idea
of how people are creating their pages and their links.
Next, let's talk about targets, all right?
Anchors can take a different target attribute as well.
We've got the source, let's add anchor.
So we're target.
So you might have target equals self.
This is kind of the default action.
This is going to happen if you don't put anything at all.
If you don't even include target, and what it means is when you click on a link,
open up in the same tab or window that you're looking at right now.
If you put target equals blank.
You're going to leave the current page you're in exactly the same, and
open up a new tab or window for where you want the new page to be opened.
Now this has its upside and downside.
The upside is that your site is still open in someone's window.
The downside is that many people don't like it when it keeps adding on and
adding on, and
as they progress through your page, you're making them open more and more tabs.
There are two other options that we're not going to really talk about here, but
you can see them in the reading, and those are top and parent, and
that deals with if you're really getting into the idea of having multiple windows,
frames, etcetera open.
So, let's go ahead and review, because making sure that you understand links is
vitally important to your success in this course or even in just understanding HTML.
So, the first thing you need to know is a page without links is extremely rare.
And to be honest, it's almost not even a web page.
It's just a document.
Links can be absolute, relative and internal.
And internal, again, was the kind where it had the hash mark in it.
I think I may have referred to them as relative, but
I wanna make sure I'm clear that the hash mark makes it internal.
You want to use caution when using images in links.
It's not that they're not a great thing to do, and I'm not saying you should do it.
I'm just saying make sure that you do it carefully to ensure that everyone who is
viewing your page can get the same content and the same experience as everyone else.