Creating a Link

[00:00:00]
>> Jen Kramer: Now that we know how to make paragraphs and headings and lists, how about we make a link? Whoo, how exciting. Let's go to another web page, all right? It's kind of one of the hypertext part of the Hypertext Markup Language. Is all about links and being able to take your web page from one place to another.

[00:00:18]
So, let's go on ahead and add some more code then. So, after your list, let's go on ahead and let's add another heading here, this will also be h2, My Fine Links. And we can say in a paragraph My favourite website is, do you have a favourite website?

[00:00:47]
>> Speaker 2: Reddit.
>> Jen Kramer: I'm gonna say Google cuz it's work safe, easy, simple, universally admired, all good reasons to use it in teaching. So, my favorite website is Google. And you can use your favorite website, whatever it happens to be. What we're going to do around the word Google, or whatever you have for the name of your favorite website, we're gonna start it with an a tag.

[00:01:16]
A as in anchor, all right, a. That's followed by href, as in hypertext reference, href. So, we just open our tag, start it with an a href=. And then inside of the quote marks, you're gonna need two of them, we're gonna put in the website address. And since this website is not on our current website, it's somewhere else out there on the Internet, we need to start it with http://, all of that.

[00:01:55]
Don't leave out the http://. Don't leave out any of the letters, don't leave out any of the slashes. And then www.google.com, which is the website.
>> Jen Kramer: And then you can close that.
>> Jen Kramer: With your angle bracket. We'll have the word Google, and then we'll put in a /a, all right?

[00:02:24]
So, this is the whole link right here, so a href=http://www.google.com. if you don't remember your favorite website's name, you can always go over to your web browser. I'm gonna go to Google, google.com, and pull up your website, and you can copy, okay? Highlight the website address up there at the top, copy and paste.

[00:02:59]
>> Jen Kramer: Sometimes it will start with https, okay? Anyone have an idea of what the difference is between http and https? Yeah.
>> Dylan: It's the encryption between the two.
>> Jen Kramer: That's right. S stands for what?
>> Dylan: Security.
>> Jen Kramer: Secure, okay? So, if it's just http, it's insecure. I mean, we can have a long security discussion about that.

[00:03:22]
But it's nothing to get all concerned about. Or it can be https, like this. Either one of those is gonna work and will take you to another website, okay? So, hopefully, you did that. Go on ahead and save your web page. Whoops. Save your web page and take a look at it and your web browser.

[00:03:46]
And then down here you should see My favorite website is Google, we'll make everything bigger.
>> Jen Kramer: Way down at the bottom now.
>> Jen Kramer: There we go, My favorite website is Google. And if you click it, did it go somewhere?
>> Dylan: Jen, could you maybe stretch out your screen just to show it all on one line?

[00:04:12]
>> Jen Kramer: Sure.
>> Jen Kramer: So, notice how my a is inside of my paragraph here, all right?
>> Jen Kramer: Notice how I put my period outside of the link. Remember, anything that's inside of the link becomes whatever is clickable. Normally the way you look at these links, it's gonna be blue and underlined, right?

[00:04:37]
But sometimes it looks purple. Why does it look purple sometimes and blue other times? Dylan knows all the answers. Does anyone else know any answers?
>> Audience: [LAUGH]
>> Jen Kramer: Yes, Jenna?
>> Jenna: Is it because you visited it, because you visited it before?
>> Jen Kramer: Correct, because you visited it before.

[00:04:56]
If it's your favorite website, it's probably in purple because you visited it before, all right? So, if it's purple, that's cool, too. That just means you've been to that website sometime before. Is anyone distressed by the fact that when you click on the Google link, you get rid of your fabulous, amazing webpage that you want everyone to look at forever?

[00:05:16]
Does anyone wanted this to open up into a whole new window? Okay, so there's a way to do that, too. Right after your link, put another space, and we're going to put in here the following code. It's target="_blank, that's where the _blank goes. Target=_blank, make sure that this goes in quotes.

[00:05:45]
So, you're starting to see now another [COUGH] feature here of HTML. So, we have tags which you've seen these h2s and the paragraphs and so forth. And now we have these additional items that are showing up inside of our tags. These are called attributes. So, these are called attributes.

[00:06:08]
You can think of them as descriptions, right? So, it's like the tags are nouns, they're things, right, and then these attributes are descriptions of those things. It would be no good to us if we just had a link, it just had the a tag, right? Make it a link.

[00:06:28]
But where are you going, right? We need to have an extra description there to tell us where we're gonna go go. So, that's what that is. That's what that href is for. And then this target_blank will open it in a new window. So, if we go ahead and save that, and refresh one page, now when you click on Google, it should open in a whole new tab for you.