How to connect link 2 pages in HTML web design

All right, it's time for a Contact Us page, and we'll link it up with the Home Page. They jump across using our navigation. I need-- in fact I've deleted one of the letters from the Contact button, but basically we're going to duplicate the Home Page, and I'm going to show you what you need to look out for, when you are duplicating pages, then I'll show you how to link them, together, in this little video; let's jump in.
 
So let's create our Contact Us page. Now I wouldn't go to File, New, and start making a new HTML page, because there's no point typing all this out again, and because our Contact Us page uses the same logo, and the same Nav along the top, and our sweet drop-down menu. So there's lots of bits that I want to reuse. Basically I'm only going to switch out this chunk in the middle. These Hero divs. Index page, make sure it's selected, 'File', 'Save As'. Give it a new name, I'm going to call mine Contact, or Contact Us. Make sure there are no spaces, hyphens, or underscores. 

The only page you have to explicitly call something is Index. Has to be called Index, everything else is up to you. The first thing you need to do whenever you duplicate a page is change the title. You don't want two pages with the same title. It's really hard to know what to put in a Contact Us page, just put in address details, phone number, that type of thing. So if people are searching for Roar Cycle's phone number, they might get to the right page, without having to go to, like the Home page, and back out again. 

We should be adding our Meta description. We haven't done it to this whole website, that's a real big oversight from me. It's one of those things you need, well it's really good to have but not essential. Meta descriptions doesn't have a really good shortcut. There's no like, "All right, I'm just going to type in meta, and hit tab." At the moment at least, or I can't work out a way. So the Meta description, you just steal it from an old site, that's what I do, but it has the same structure as viewport-- as this, kind of one up the top here. 

So, that often is a good kind of way for me to cheat. So Meta name, this one is called Description, and it has the same thing, it says Content. And that's where the Meta description goes, and it should be about 150 characters. So we'd start talking about the contact details of-- I don't know how you'd write 150 characters. What I might do is I'll speed this up and I'll show you what I put. 

I'm back, make sure at the end of your Meta description, there is a closing angle brackets. I'm going to turn my Wrapping on. So I added this stuff, so that if there was a search result, remember, our search results, the Meta description is this thing. This kind of gray stuff here. You know when you're working on a website, often you don't need to go into the site, you're like, "Oh, okay," you can find out all the information from the description. That's what we've done for our people. I need to go back and add it to the Index page, which I'm not going to do, which I should. 

Now an interesting thing is who's responsible for this. So let's say you're the owner of Roar Cycles. You are responsible for writing all the Meta descriptions, and I find it's easy to do it on the fly, don't go, "I'll do that later on." You'll never do it, that's been my experience. If you're working with a client, ask them, or tell them they have to, say it's critical, "I need the title of every page", and tell them the kind of, you know, "It needs to be short, it needs to be this many characters", "It needs to have this good descriptions in it." And you need a corresponding description for every page. Can be a little hard to get Meta descriptions out of clients, but your page can live without a description, but it can't live without a title, or at least, if you want it to actually rank in any search engine. 

Let's actually connect the pages. So we're going to need two of them open, I'm going to close down my CSS, and I'm going to have the Index page and the Contact Us page. So I'm going to separate them kind of over here. So I got one, and the other. So let's connect the, say the Home page. Let's connect it when somebody uses this drop-down, well, actually uses this, the Contact Us page, because at the moment it goes nowhere, goes to hash, '#'. We only use that pound symbol because, it means, some browsers if you click on a button, and there's nothing in here, it will come up with an error, and that's not really what you want. You want to be testing just with no errors. So let's find our Contact Us, there it is there. So instead of hash, we're going to say, delete you. I'm going to start typing in 'Contact' and hopefully it goes, "Do you mean this page?" you're like, "Yeah, I do." Let's save, let's preview this in the browser. 

We're going to click on it, and look at that, we've gone to the Contact Us page. Nothing's changed, you see at the top here, that changed. So let's make some obvious difference, so let's go to Contact Us, and over here let's say, instead of-- so these two Hero boxes, I don't want anymore. So there is one - I'm going to get rid of everything in the Main; goodbye. Let's save it, that's a big difference. Let's have a little look now. So let's go back, so I've got my Index page, we're going to click on 'Contact', and it jumps to the Contact Us page. Now we want to get back to the Home page. Some pages have Home, and that's fine, you can have a Home button. Most websites though, you just click on the logo. You might have experienced that, so to add a link to our logo, we're going to wrap this image in an A-tag. We're going to wrap it up, we're going to use our sweet new shortcut. 

So I'm going to select, I'm going to turn wrapping on. Word Wrap, so I'm going to select all of that. I'm going to use 'Command-Shift-P', or 'Ctrl-Shift-P' on a PC. I'm going to wrap with abbreviation, so you might have to type in 'wrap'. We're going to wrap it up in an A-tag, and I'm not going to give it anything else. I'm just going to call it A-tag, hit 'Enter' on my keyboard. So you can see now, this fella, I'm going to separate it out, so it makes it easy for you to see. So this image now is wrapped up in an A-tag. Where is it going to go? It's going to go to Index. Let's save it, let's have a quick little check. 

The logo still-- actually let's go back to the Home page, it's not working. It should have auto saved, H-ref, you. The image has a lot in it. The image has an A-tag wrapped around it. Click on it, does work; cool. We want it to be on both sites. So at the moment you click on the logo, on the Index page. It goes back to the logo, which is not quite what we want. So we're going to grab that whole thing. Where is it? logo starts-- no, logo starts there, ends there. I'm going to copy and paste it to both pages. So where is he? Logo, there it is there. It's going to replace that whole thing, so it's on both of them. So now let's give it a go. Let's go to our testing. 

So if I click on 'Contact', not connect, I don't even know how I'll go about that. Let's go back to the Home page, Contact, Home page. There is a bit of a drama of like, okay, you do it on one, then you got to copy and paste it on both, with the navigation. It's easy enough, you can select the whole kind of navigation, or this whole chunk, or the whole Header. Create that whole Header, and copy and paste it on both. It's not going to be a huge Java for our site, because it's only, what, six buttons. We potentially only have six, seven, or eight pages. 

The next thing I want to do is actually add some content to our kind of website. We're going to put it in the Main. Now this is going to run into a problem, like, I got a bit-- I did this on purpose, I promise. We have a problem where Main does some stuff. We said, Main, be a height, which is perfectly fine for what I want, minimum height, but we said, do some stuff like Flexbox and center items, because we wanted to do some fun stuff on our Home page, where we wanted these guys to sit side by side, and so we did some specific stuff to Main. So problem is that I don't want to do those to Main now, but I want to keep using Main, so we could either call this one Section now, and Style Section over here, or we do what every good Web Designer who gets lost, any sort of person anywhere on a computer does, we end up doing things like-

"Let's just call it Main2', and we have another one called Main2 over here. You've done it, you called your thing Final, you'd be like, "All right, this is my final document." You call it Final, it's like the curse of death right? You laugh, because you've done it, you called it Final2 even, and you've got Final Final on your computer somewhere, I bet. So yeah, sometimes you end up with Main2. 

Now the thing is we can't call this Main2, because Main is an actual HTML tag, like Header. It's predefined, so we need to call it, you'd need to do this, you need to say, this one is called Main2. So it needs to be a Div class called Main2. There's a few other ways of doing this. This is what we're going to do for the moment. It's like realism, also known as bad coding. So Main2, what do we want to do for Main2? So over here we're going to style it. The other thing I really want for Main2 is to give it a minimum height. So it doesn't crush itself. That will do fine. And I think, we need some-- Contact Us. We need some, probably some padding at the top, but we'll see how it goes. 

Let's add in here an H1, and underneath that a P-tag. Let's copy some text from our Project2 text file. The H1's called Contact Us. Kind of just typed that in there. I can't see my fingers when I'm typing. All right, you guys, you, you, you. Looking nice and tidy. Let's check it in the browser. Too close to the top, so I might just add Main2. Can I have some padding at the top please, buddy. Padding, yeah, Padding Top. 150, probably too much, way too much. 50, there we go. 

So actually before we go, let's just, like, I guess give you the, for instance. Let's ignore this, so let's pretend Main2 doesn't exist, and we're just using Main, the Main tag again. So Main, this one here needs to end with Main. Pre defined, pre made. And it worked on page 1, the Home page, but let's see what it does on this page. You see, it's flexing, so it means it sticks it side by side, and you're like, "Hmm, what do I want?" So that's why we got a separate box, I just kind of explained why, without actually showing you that kind of bad results. 

All right, Main2, let's get on to the next video, where we start looking at Forms, it's going to be a good one, good long one. It's a good hearty part of the class. We don't even have to save, it's auto saving for us. Let's get on to the next video.