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.