Creating & Linking to Another Page

[00:00:00]
>> Jen Kramer: I'd like you to start a whole new web page.
>> Jen Kramer: Start a whole brand new web page. So everything that we've done today is gonna come into play here. Start a whole new web page. Remember File > New File, right? Start a whole new web page. And I would like for you to go on ahead and put in some information on this web page too.

[00:00:24]
If you wanna just copy over your hobby information, My Fine Hobbies, we can just copy that over from this page into the other one. You can write a little bit about your hobbies, make some links okay? Just go on ahead and start a whole new page, as much as you can do in five minutes.

[00:00:44]
And then we'll wind up linking these two pages together, once you've gone ahead and put some stuff on another page. Sound good?
>> Speaker 2: Do we need to name it a .html file in order-
>> Jen Kramer: Yes.
>> Speaker 2: Okay.
>> Jen Kramer: Absolutely, you need to name it as a .html file.

[00:00:58]
All right, so go on ahead and make a new file. We'll go to File > New File. Okay, so here's our new web page. Now we're gonna go File > Save.
>> Jen Kramer: And here inside, it's gonna save to your day1 folder. Let's call it hobbies.html, okay? Here we go.

[00:01:25]
What do we do next?
>> Speaker 4: Exclamation point tab.
>> Jen Kramer: Exclamation point tab, that puts in all the crazy stuff at the top of the page.
>> Jen Kramer: What's the next thing that we should do?
>> Jen Kramer: Anybody know? Yeah, Jen?
>> Jen: A title?
>> Jen Kramer: Change the title, all right, My Great Hobbies, okay?

[00:01:58]
>> Jen Kramer: And then you can either type here in between the body tags, or you can just copy and paste over from your other page, that's good.
>> Jen Kramer: We can throw in, so this is probably no longer an h2 now. This is probably an h1, since this is the title of my web page right?

[00:02:38]
Maybe I want to put it a little paragraph at the top. I enjoy doing many things with my spare time. I don't have much spare time, but when I do, you can find me doing one of these things. And remember, if it goes way too long and it runs off the page, you can word wrap it.

[00:03:04]
Go to View > Toggle Word Wrap. It'll all come back onto one screen again. View > Toggle Word Wrap.
>> Jen Kramer: Yeah?
>> Speaker 5: So I know that a lot of of websites, for their HTML documents, will be called index.html. Is that just a convention or is there a particular reason for that?

[00:03:26]
>> Jen Kramer: There is a reason for that. We actually don't get to that reason until day five. But the reason for that is that that is your homepage. A homepage is always called index.html. All your other pages will be called something else. Okay, so you have sort of a, kind of a start of a web page here.

[00:03:43]
There's not a whole lot, but that's okay. That's where we are today, all right? So we now have two pages. We have a homepage, that's our index.html. And we have a hobbies page, right? Wouldn't it be nice if we could get from one page to the other? Gosh, it'd be great if we could do that?

[00:04:04]
Okay, so let's go on ahead and make that happen. Down here on your homepage, let's go on ahead, and I'm trying to decide if I want to put this at the top or the bottom. It probably makes more sense at the bottom of the page, in terms of the content.

[00:04:24]
But I'm gonna put it at the top of the page, so that you all can see what I'm doing. So I'm gonna put this just after my h1. And if you wanna put yours at the bottom of your web page, that's cool, too. The code will be the same, no matter where you wanna put it.

[00:04:40]
And I'm gonna put mine in here, and I'm gonna put in a paragraph. And I'm going to say, Visit my, right? Visit my, and then we're gonna put in our, which tag? Which tag is going to make a link from one page to another? Yeah?
>> Speaker 2: a?
>> Jen Kramer: The a tag, right?

[00:05:02]
So I'm gonna put in my a tag. a, what comes after a?
>> Speaker 2: href?
>> Jen Kramer: href equals. All right, so now comes the hard part. How do we get from our web page to the other web page? And our pages are not on the Internet, so what are we going to do?

[00:05:26]
>> Jen Kramer: Yeah?
>> Speaker 2: Are we just gonna put the name of our other page-
>> Jen Kramer: We are gonna just put the other name of our page. So if you take a look in your folder now, right, we have our two pages there right next to each other. They're in the same place in the folder.

[00:05:41]
So all we need to do is link one to the other just by typing the name of the page where we want to go. So this will be hobbies.html. And in fact, the code editor will help you. Yes?
>> Speaker 6: If we did have a web page already made, would that still link the pages if a user clicked on it?

[00:06:00]
Or would you have to put the URL?
>> Jen Kramer: Okay, so if you already have a web page that is already in existence, is that on your computer also? Or is it somewhere out there on the Internet?
>> Speaker 6: Some place on the Internet.
>> Jen Kramer: Somewhere out there on the Internet.

[00:06:14]
Okay, so if it's anything but in the exact same website that you're currently working on, we're working on one website, right? So if it's anything that's not this website right now, you're gonna need that whole HTTP in order to link to it.
>> Speaker 6: What if all the web pages were part of the same domain?

[00:06:30]
>> Jen Kramer: And if they are all in the same folder, we're all working on them all together, then you can use this methodology to link the pages together, okay? All right, hobbies.html, do we want this open in a new window? Typically, what we do when we're linking to a page that's the same one on our same website, we wanna link to it in the same window.

[00:06:54]
It's when we link to pages that go to other websites that we open them in new tabs. So we're not gonna put in the whole target equals blank thing. We're not gonna do that here. We're just gonna end our tag here, hobbies page. Just like that, okay? Visit my hobbies page.

[00:07:13]
So if we go on ahead and save that, and let's look at that link. See now, that my Visit my hobbies page link is blue, cuz I have never been there before, right? And when I click on it, I got my hobbies page. If it didn't work, chances are you made a typo in here somewhere.

[00:07:39]
You said .htm instead of .html for your file name. You spelled hobbies wrong. There's a space in there somewhere. Usually, it's that kind of thing that's going to break your link. Okay, so why don't you guys now take, you know what I'm gonna ask you next, right? Now you're on your hobbies page, and you can't get back to your homepage, right?

[00:08:02]
Go ahead and take two minutes and write a link that will take you from your hobbies page back to your homepage.