Welcome to Exploring Computing.
Today's video is Linking Webpages Part 1, Making Links.
So, this is going to be the first in a series of videos
where we're going to take a look at different aspects
of creating web pages, combining both the HTML and the cascading
style sheets.
And of course, one of the things that
makes the web really interesting is the fact
that we can link one web page to another web page.
Remember, that's one of the key parts of hypertext, markup,
and language--
The hypertext component.
So, we're going to go ahead and start off with that.
Now, we have already talked a little bit
about how to make links between web pages,
but it's going to turn out that there's a lot more to it,
both strictly on the HTML side, and also when combining it
with cascading style sheets.
So, let's go ahead and get started.
So, here I've got a diagram representing
that we've got a computer, www.stanford.edu,
and it has a bunch of files in it.
And we're going to assume that these files are
all in the same folder, and that they are in the top level
directory for whatever www.stanford.edu
is using to serve up web pages.
And I'll talk a little bit more detail about how
that works a little bit later.
But for now, we're trying to keep things simple.
So, we've got these two files, and they
are in the main location where the www.stanford.edu server is
going to be serving up files.
So, I've got a laptop I'm going to go ahead and visit.
And I'm going to have the example.html file sent to me.
And so, remember, what we're looking at here
is how to create links between pages.
So, what we're going to take a look at is--
Let's say I'm currently viewing the web page associated
with the example.html file that has
been downloaded on my laptop.
And now, that web page, example.html,
has a reference to another web page.
And it's got a reference to another.html web page.
And so, this is what the link might look like.
And we've seen this before.
So, this says, oh, I've got a hypertext transfer protocol
request for the web server, www.stanford.edu,
and I want to get to the file another.html.
And then the text, Another Webpage,
which is between a start and the a end tag, that's
the text that's going to be linked.
We'll talk a little bit later about what
it's going to look like and how we might change the appearance.
OK.
It turns out that we can actually shorten this.
And instead of saying www.stanford.edu/another.html,
we can just say another.html.
And this is what is referred to as a relative reference.
What we had before, where we had the full thing,
including the web server and the protocol HTTP,
that's what we refer to as an absolute reference.
You have this choice when you're linking from one web
page to another web page.
You need to decide, am I going to use an absolute reference
with the full HTTP and the server,
or are you going to have a relative reference where you
just have the name of the file.
And the assumption with a relative reference is that,
that file that you are referring to--
Because remember, this is a reference
to another.html from the file example.html, which currently
is residing with a copy, both on the server and a copy that
has been sent to my laptop.
The assumption is that I am referring
to another.html file that is on the same server
as the example.html file that I'm currently looking at,
and it's also in the same folder.
Now, it is possible to have different folders.
So, if I am viewing example.html.
And on the server, it's located in a directory or folder
that has a second folder or directory--
Folder and directory are synonymous.
And that folder's name is Articles.
And the Articles folder has a file called another.html on it.
Then you can see, I can use this relative reference here.
So, I can say, Articles slash another.html.
So, the Articles slash, with a slash
immediately after it, indicates that that's
a directory or a folder.
I should mention that there are operating
systems that use other delimiters to indicate folders.
So, for example, Windows most notably uses the backslash.
The Macintosh used to use colons before they got to OS X
and switched over to underlying operating system being Unix.
But regardless of what the underlying operating
system of either the client, the web client, meaning my laptop,
or the web server, meaning www.stanford.edu.
Regardless of the operating system
for either of those, when we're talking about web stuff,
we're always going to use that standard slash.
OK.
So, I'm going to go ahead and say, hey, this links to a file
on the same computer, on the same server
as the current file that I'm viewing,
but it's in a subdirectory--
It's in the Articles subdirectory.
And this is going to actually work
whether we have a relative or an absolute reference.
But here, I'm doing it with a relative reference.
So, one question that comes up is, do I
want to use an absolute reference
or a relative reference?
And here's the thing, if I wanted
to link to another web server--
So here, I'm trying to link to an article in the New York
Times server.
That actually needs to be done with an absolute reference.
There's no way to have a relative reference from one
server to another.
So right there, that's one clear distinction.
So, I can do everything I want with absolute references,
why would I ever want to use a relative reference?
Well, it turns out that there's actually
a bunch of big benefits to using relative references.
So, one of the benefits of having relative references
is that they're much more portable.
And so, what I mean by this is, if I have a website
and all the references between the different web
pages on the website are using relative references,
I can take all those files in those folders
and move them to another computer.
So, here's an example of why that might be useful.
So, a while back, Carnegie Mellon
was having financial difficulties--
Actually, all the universities were.
I think this was at the 2008 stock market crash.
And they ended up letting all their lecturers go.
Now, suppose the same thing happened to Stanford.
And I had a great website that was sitting on the Stanford
servers, and I had all these different files,
and they were all linked together.
And I ended up having to go to Harvard because Stanford
was out of money and let me go.
Well, if I have absolute references in this website
and I take it to Harvard, which is pretty standard practice--
Universities typically will let you
take your material with you.
So, I take my material, I take it to Harvard.
And if I'm using absolute references in my material--
That means, every time I have a link from one web
page to another web page within my website,
it says HTTP slash slash web.stanford.edu.
And I'm going to have to go in there and erase the Stanford
and replace it with Harvard.
And I'm just going to be balling my eyes out because--
Harvard's good, but it's not Stanford.
And so, by using those absolute references,
moving it from one server to another,
I've completely broken every single reference.
In contrast, if I'm using relative references,
every time I refer from one web page to another web page,
it doesn't have the full URL, it doesn't have web.stanford.edu.
It just says, hey, there's this other file,
it's in the same folder, or maybe it's in a subfolder.
But those links are all still working.
So, I can take my entire website,
I can move it to the Harvard server.
And all the internal links are still working.
I'm still pretty sad, of course.
But at least I don't have to go in and delete
all the references at Stanford and replace them with Harvard.
Another advantage of relative references
is, relative references are shorter.
That's nice from a typing standpoint.
You don't have to type HTTP colon slash
slash name of server slash.
It's also going to be a bit cheaper.
And this can add up over time, because you're
serving up fewer bits.
Those extra bits for the HTTP and the name
of the server, those are in the files.
Your HTML files are just a tad bit shorter.
You're going to pay a bit less money for your bandwidth.
And it'll be slightly faster.
It's nice.
It's not a huge win, but it is a win.
And there's no cost.
So, it's all win.
All right.
So, generally, there's a lot of advantages
to using relative references.
The main reason why we use an absolute reference is,
as we just saw, if you're trying to link to another web server--
Like, if I've got a link from my Stanford website
to the newyorktimes.com website.
Well, I don't really have any choice.
I can't create a relative reference
from one server to another.
Relative references only work within a server.
So, use an absolute reference then.
OK.
You may notice a fair number of URLs
where they don't actually specify the file name.
So, www.stanford.edu.
That says it's on the www.stanford server,
it doesn't say what the file is.
And you could go to--
This isn't actually a real URL.
So don't try this, 105 students.
There's actually a couple more subdirectories.
But I thought I'd shorten it to keep the example simple.
www.stanford.edu/cs105, it's not specifying the name of a file.
And so, all web servers have a particular default
file that they are going to serve up.
Most servers use the file, index.html.
So, there's a file in the directory called index.html.
And somebody does not specify a file name.
They specify folder name, but they don't specify a file name.
The index.html is going to get served up.
So, that's sort of your default name.
There are some other names used for this,
but index.html is the most common.
You may also see--
A web server, some of them use home.html, or some of them
use default.html.
And then, in fact, some of them actually
don't use dot HTML, they just use dot HTM.
You can actually blame Microsoft for this.
Way back in the day, all files on Microsoft
systems had to be named what was called 8.3.
Eight letters, and three letters after the dot.
It's pretty shocking to me.
That just seems super limited, having eight characters,
but that's the way it was.
But hey, it's all good.
Bill Gates seems to be doing good stuff.
Plus, the building that I can't go to anymore
is named after him because they donated much money for that
too.
But-- Yeah.
Happy thoughts to Bill for his work
on the philanthropy for medical purposes.
Good job, Bill and Melinda.
OK.
Now, this thing that we've been typing here,
HTTP colon www.stanford.edu/another.html,
this is what's referred to as the URL,
or a uniform resource locator.
It turns out that there's a second version
of this where instead of using HTTP, you use HTTPS.
This is a secure version of HTTP.
We'll be talking about it in much more detail,
and exactly what it's all about when we spend our week talking
about computer security a little bit later on down the line.
It turns out that our URL, uniform resource locator,
is actually a subset of a much bigger standard called URI,
for Uniform Resource Identifier.
And there's a whole bunch of you URIs, and some of these
are actually kind of handy.
Probably the handiest of them is the mailto URI.
And you can use this to create a link on your web page
where somebody clicks on a link and they mail a message to you.
This does assume that the web browser is set up to use mail.
And you could specify--
In addition to specifying the address to send it to,
you can specify other things like the subject,
you can CC some people, you can put a body on there.
I do want to caution you--
Be careful about putting email addresses up on the internet.
You will notice that our--
And by our, I mean none of the CS105 or CS106 e-teaching staff
addresses are up there.
And that's actually because there
are programs that surf the web looking for email addresses,
and put them on spam lists.
It's too late for me.
I get a ton of spam.
Although, since the computer science department
moved us to Google's G Suite, Google
seems to have taken care of most of it.
They also occasionally take real emails sent by students
and dump it in the spam folder.
So, that part's not so good, but they mostly
got rid of all the spam I get.
I used to get a ton of spam all the time.
And occasionally, I get in lists where
I would get spam messages, like, every five minutes.
It was just frickin' horrible.
Anyway.
So, if you put your email address on web pages
and it's clearly obviously an email address,
these programs will grab them and stuff you on spam lists.
So, be super cautious on there.
But if you're a business, maybe it's worth it for you
to have it super convenient for people
to email an email address associated with your company.
So, you're just going to go ahead and stick that up there.
And using this mailto URI, you can
make it really easy for somebody to email you.
There's a bunch of other types of URIs.
So, there's FTP and Secure FTP, there's FaceTime.
So, you click on a link, it starts of FaceTime.
And you click on a link to start Skype.
Game Master is even one that starts up Steam.
So, there's all sorts of different URIs up there.
One of the URIs that you may see is this file URI.
And in fact, if you're loading a file into the web browser
and that file is on your current computer,
this is basically what you're going to see.
So, file colon slash slash slash.
And then the C colon, that's Windows for the current domain
hard disk.
This works when it's on your computer, but don't use it.
It's specific to a specific location on your computer.
It's completely not portable.
So, we talked about how relative links are portable.
This is completely not portable.
And one of the things that it being completely not portable
is going to cause you problems is, when you take your files,
you zip them up and submit them for your homework assignments,
and the TA unzips them on their computer.
Those files are no longer on--
Those files are no longer in the same location
as they were when you zipped them up.
And so, this is going to completely break all your stuff
for grading purposes.
So, generally, don't use it.
It's a bad idea.
And it's especially a bad idea for our class,
because you'll lose points for grading.
That's it for this video.
In the next video, we're going to take a look at how
to style our links, changing the colors
and changing the appearance of them.
I'll see you then.