Learn to Code Special! | 30% off ALL ACCESS to One Month ๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰


HTML Links

Day 5 ยท Lesson 1 ยท

In 1965, Ted Nelson coined the term hyperlink. That's almost 30 years before Tim Berners Lee invented HTML and the World Wide Web. I'm a New Media geek, ask me questions if you'd like to hear more about where the web came from!

- (speaks in foreign language) I'm trying
to learn German this year, practicing.
How's it going?
We're gonna add links to this project.
Don't judge me if you actually speak German.
I'm trying.
And adding links is not that hard.
We can do that because I gave you some links to add,
these here, these paragraph links,
and I just gotta show you the code for that.
So the first link we're gonna add
is a direct link to Sesame Street
because Mr. Cookie here, Mr. Cookie Monster,
he wants to show potential employers where he worked,
so we're gonna say, me have over 30 years
of experience with cookies on Sesame Street.
We're gonna link Sesame Street here to Sesame Street.
To do a link , to make a link,
what we wanna do is surround
it with an A element, an A in the beginning,
and an A at the end.
Remember the closing tag with the
(clicks tongue), means it's closing,
so everything in between the opening
and closing is a link, and to make this work,
you do this thing called href.
Href, hypertext reference, is what
that means but doesn't really matter too much.
That's what it is.
I'll make my thing a little smaller, and that's it.
So, href, sesamestreet.org like that,
and now if I come back to the site,
we refresh, and you can see we have, voila,
the blue link here, and when I click it,
it goes to Duck Art Canvas.
We made it to Sesame Street.
Things are good.
Kindness is in the air.
Okay, so that looks good, right.
So that's pretty good.
The default color is blue,
the default color, we'll change
that when we do our CSS
'cause CSS is the styles,
but for now, it's blue, and the default location is,
it just changes it in this window
but what if you wanted it to open another window
or tab when you click on it or when your user clicks on it?
(snaps fingers) Easy, you do this thing
called target equals underscore blank, like that.
So, that's it, and when we come back,
and if I refresh, you'll see I have the same
or similar effect, but now I have a different tab.
You can't control whether it opens a tab or a new window,
only the user, so basically,
how I ever set up my Chrome,
it will just open it the default.
So, that's what happens.
So give that a try.
You have this link in here.
It's important that there's no spaces here.
See how the colors erode.
Well, you want the colors to be a pattern like that.
It needs to be exactly like this,
and we're basically putting
these attributes on this element.
That's the (speaks in foreign language),
I don't know what that means.
That's the fancy speak of what we're doing there.
If at any point you get stuck,
of course you could just Google any of this, right.
How do I link hyperlink HTML,
and I'm almost certain that whatever,
like the answer is right there.
So, yeah.
Now you know if you get stuck, you can do that.
So go ahead and do that,
and then add the second one.
I'm gonna have you do it on your own.
Add the second link to the YouTube video here
where he sings in his SNL demo reel,
of course, of course he put his demo reel.
You could link that as well.
So do that on your own,
and I'll see you in the next video
where we'll be adding the images for social media.