Internal and External Link Strategies

Next up, we need to add links, not only to external websites, other people's websites, for the things that we're going to recommend people to do, but also to link to the other pages within this website as well. Also, while we're reviewing those links, we're also going to learn something new, which is to link up and down the page, which we have not done before. So looking here first, these are meant to be an add bar of links to other pages within the website.

Normally speaking, you would develop one page first, get everything set, probably put in some placeholder links or link to pages that maybe don't exist, but that are going to, and then eventually just save this page as, do a file, save as, and save it as all those other pages and swap out the content that's in the main section. We've already created the other pages here in advance for you, just to save you a lot of copying and pasting and just saving as, saving as, copy, paste, copy, paste. And so we can already link to those with code suggestions.

It'll do code hinting of the other files. But we've done the same setup on those other pages that we have here. We just need to link to those pages.

This is going to be a link to go to the feature location, which is actually the current page. Now you might think, why would I link to the same page that I'm in right now? Because this would be the same site nav on every single page in the entire website. It's not like we're going to customize this for each and every page.

It's going to be the same code put over and over again. So even though you're going to be doing this on one of your files, whether it's the homepage or some page, doesn't really matter which is your first page. You're still going to link it to all of the appropriate pages.

So I'm going to link this to San Francisco, which is our currently featured page, our featured location. So I'm going to do option W or ALT W on Windows to wrap. We can wrap with that M in abbreviation and A is for anchor tag.

So I hit A and then hit return. And now I need to fill in the href. What hypertext page are we referencing? We are linking to San Francisco.

So I just start typing in San. And then I can either click on that or hit TAB. There we go.

Now I'm going to link this. So option or ALT W, A for anchor. And then this is going to tour packages.

This one here, wrap that in a tank. That one is going to travel planning. This one here, wrap that in a tank.

This is going to about wrap this one in a tag, and this is going to contact. All right. Now those are linked to their various pages.

If I save the file, option B for browser, well, ALT B for browser on Windows, we can see that all of these are linked. I can click on it. Well, that's the same page that I'm on right now.

I can click on this one to go to this other page. This has no CSS, no formatting. So that's why this page looks different.

Eventually, we're going to share the CSS that we have here. We're going to share it with the other pages so they can all look the same. But I can click to go to any of these other pages and come back, click on the other page and come back.

Also, if I were to click, I've already done the links on these. So basically copied and pasted the same nav that we have on our page. And so now we can actually click around to any of the pages here.

And eventually, once we share the CSS across all of them, they all look the same and have the same styling. Now, the logo should really link to the homepage. We don't have a link to the homepage here, but normally your logos link to the homepage.

We're going to wrap a link around this image tag. I'm going to hit ENTER here just to put these on different lines. And I'm going to select this image here just to make it a little bit neater.

Wrap with option W or ALT W on Windows, A for anchor. And this is going to link to index because index.html is your homepage. So anytime you put something inside of a link that will be clickable.

You can put text inside of a link. You can put images inside of a link. Whatever you put, it doesn't really matter.

That's the thing that you will click to go to that particular page. We can wrap a link around not only text, but also images. And now when I refresh the page, now I can click that to go to the homepage.

Now I can go anywhere within this particular website. Okay. Now, turning our attention to these different places to go.

If I want to link these things out to, for example, Alcatraz Island, there is an Alcatraz cruise website. Now, if you don't know what the website is, you would just Google search something like that. So I could just look Alcatraz Island tours and find the website for that.

Alcatrazislandtickets.com. And is that the current one? This might be Alcatraz city cruises. So this is the one. Let's go there.

Yes, there we go. So actually, if you look back here, Alcatraz city cruises, this has been the website for a long time. Now redirects to cityexperiences.com. So this is the current official place.

So sometimes when people make websites, they eventually redirect a domain name that they have. The domain name is this.com name. So sometimes they redirect to a different website.

They still have the domain name, but they are redirecting to another website. We could have course directly link to this full website here, which would be the recommended one, especially now if people are redirecting, you should link to the thing that they're redirecting. But if you think there's any chance that they might choose to redirect to maybe something different in the future, since they are linking to Alcatrazcitycruises.com, I think that might be worth just linking to the same thing that the National Park Service is linking to.

So I could actually just copy that link address and use that. All right. Now I'm going to go down here to Tor Alcatraz Island.

Now the learn more, I'd want to make that text here with this little arrow here. I want to make that go out to that website. So I'm going to wrap a link around there and paste in that web address, but I want this to pop open in a new tab.

So I'm going to do target underscore blank, and that'll target a new tab. All right. Now I can click learn more and in a new tab, it'll pop open.

And in this case, even though I'm linking to the prior website that they had purchased, they are now redirecting to this other website. If they decide to change that redirect and redirect to something else in the future, it would always be redirecting to whatever they choose. Normally websites, they don't typically have those, but it's pretty common actually, that for example, ChatGPT.com is currently how you get to ChatGPT, but they also bought chat.com and maybe they'll use this in the future.

And when you go to chat.com, it redirects to ChatGPT.com. So this does happen on other websites as well. So, all right. If I also wanted to make the image link as well, I could wrap the image in a link.

If I also want to be able to click that to go to the website as well, which I could do. If I copy that address, once again, could wrap it around the image. So option W or ALT W, A for anchor tag, paste in that address and then target underscore blank to pop that open up in a new tab.

So those would be two different things, two different things you can click. So two different links. Now I can click the image to go there as well as the learn more.

Okay. And we can do the other ones. In the exercise, you'll do additional links as well, but I don't think I need to demonstrate those basically done the same way.

We've done those before in a previous exercise. What is new is the idea that I could make jump links kind of that could go up and down the page. If you want quick access to go up and down the page, I could maybe click Alcatraz to scroll down here to Alcatraz.

I could click Fisherman's Wharf to scroll all the way down to Fisherman's Wharf. So I want these to be links and I want them to go to various places on the page. To do that, I need a place to send them to, to identify where is it, where's that link going to take them? So how do I link to a place on the page? I'm already on the page, so I need to name the place.

And this is actually what IDs are useful for. I'm going to do, let's say, biking down here. So I want to send people who when they click the biking link here, this one that says bike ride, when they click that, I want to send them down to here.

So I want them to scroll down. So I'm going to put an ID. And this is actually one of the reasons why IDs were created was because unlike a class, which can be used multiple times, an ID can only be used once per page.

If we're linking to a place, you cannot link to three different locations. When you click a link, where's it going to go? How would it decide which of those three different locations you're going to go to? So links must be unique to a single place. IDs can only be used once per page.

So I'm going to call this biking. Now you can come up with whatever ID you want. That's up to you.

I could call it blazing saddles if I wanted to, but I'll just call it biking. And now that I've given it an ID, I cannot use biking anywhere else on this page. I can only use it once.

And that's because if I'm going to link, I can only link to this one location. I can have other IDs with other names. For example, for Fisherman's Wharf, I can give that an ID and I can call that wharf.

We can give them whatever name we want. If you want to call it Fisherman's Wharf, let's say we do Fisherman's Wharf. And I'll just say Fisherman.

I don't need to have the apostrophe S in there. So Fisherman Wharf. You could do that with either an underscore or a dash in the name.

Don't use a space. Those are not allowed in your names, but you can do multiple words. Just don't use spaces in your names of things.

But I'm going to keep it simple and just call it wharf. And I'll do one more thing here. Alcatraz.

I'm going to give that an ID of Alcatraz. All of these have names now, and I can now link to those locations. So for example, bike ride can be a link.

I'm going to option W or ALT W on Windows. And it's a hypertext reference. It's just not another page.

It's a place on the page. Now, I don't know if you remember, but when we did this in CSS, when we targeted something with an ID, we used hashtag and then the name. We can do the same thing here.

Hashtag biking. That will go to a place called biking, an ID called biking. So I'm going to save that, preview in the browser.

And now when I click it, boom, it jumps down the page or up. It knows where that location is, so it'll go up or down as according to whatever is necessary. And this is how we can go up and down the page.

We can click it and boom, it jumps down the page. Let's make another link. This one is going to go to Alcatraz.

So I'm going to take this Alcatraz ID and I'm going to link this to it. So option or ALT W, A for anchor, go to something with an ID of Alcatraz. Assume that IDs are case sensitive.

If you're using uppercase or lowercase, just assume that they're case sensitive. It's a best assumption that things could be case sensitive. HTML often isn't case sensitive in most situations, but just in case it is, I do like to link with the same case just in case.

And now when I hit refresh, now I can click Alcatraz and it scrolls down to Alcatraz. The whole idea here is that you have to name the destination first, so it knows where to go, and then you create a link to go there. We've named that other place Wharf.

So once again, I can add a link here to hashtag Wharf. By the way, you can put that ID onto any tag. I put these onto headings, but anything can have an ID.

This is actually why we need IDs. We need a unique place to link to. There can only be one of them, unlike a class where you can use it multiple times.

When it comes to CSS, it makes more sense to use classes because you can use those one or more times. An ID being so unique that you only get to use that ID once per page gives it a very high CSS specificity, meaning it's hard to override that. And so there's really not a need to use IDs when it comes to CSS.

I know we can use them, but really they were created for other purposes. And then we could also use them in CSS. So they're not a best practice when it comes to CSS, but they are a good thing to use in other situations like this linking that we're doing here.

Now we want to do a little bit more styling here in our page. For example, oh actually also, I want to do these back to top links as well. So I want to go back up, and let's say I want to link all the way back up to the very top of the page.

I could link to this if I give this an ID, and I could say like jump back to the list of things to do, but I want to link all the way back up to the top of the page. Like what if you scrolled all the way to the bottom? Be nice to say back all the way up to the top without having to scroll. So for that, let's say I go down here to the very bottom, and I want to wrap this text in a link.

So I select it, wrap it in a link, and I don't have a thing called top, but let's just see if that works. I never gave it a name, so when I click it, oh look at that. Lo and behold, it does actually work.

It didn't used to work, but over the years, because linking to the top became such a common thing, browsers basically kind of named the top of the page. They called it top, so it's kind of like a built-in name. But actually here's the thing, you don't even need to say it.

You can even just use hashtag, and because you use hashtag and you're not giving it an id, it doesn't know the id that you're looking for, and the only thing it can do is go to the top of the page because there's no id to be found. So you could just simply say hashtag, and that means go back to the top. Now when I scroll down, I can just click it, goes to the top.

Can't find an id that doesn't exist, so it just goes to the top. Alright, so down here, when we have the learn more, I also want this to go back to the top as well. We're going to do the same thing up here next to our other learn more.

So here's our learn more. So I'm going to make this a link to go to hashtag. Okay, so now I can click this to go to learn more, and I can click this to go back up to the top.

Now these two links are very close to each other. I want to add some more space, and the back to top should not look as prominent as the other links. And while we're not going to get too much into link styling now, that's going to come up in another future exercise, actually coming up after this one.

I do want to start to minimize the look of this. So I want to style these links separately. Like I want this to look one way, this to look another way, and I don't want those links to look at all like my other links.

For example, my navigation links, they're going to look entirely different. So I don't want to redefine all anchor tags, all links. Alright, A is for anchor tag.

I want to style these specifically, and so I'm going to use a class to do this. And so I'm going to call this learn more. Don't use a space in the name of a class, because that would actually give it two classes, learn and more.

For example, something could have multiple labels or classes on it. For example, I am a father and a son and a husband and a teacher. So those are all classes that I'm part of.

Those are all labels for me. And so we can have multiple classes, but I just want one. So I have to use a dash or an underscore for the class name.

It's going to be learn more. I'm just coming up with the name learn more, because I think that makes sense. And this one, I'll just call this back to top.

So I can also use those, of course, for other ones down the page, because I can use those classes multiple times. So I can use those in other places, but I'm going to come up here and create a style for those. So the learn more link, I want there to be space on the right of that.

So I'm going to do margin right, and I'm going to put on like 20 pixels to the right of that. And save that. So that puts space to the right of it.

Then for the back to top link, I want to gray that out a bit. So back to top, I'm going to change the color of that to a gray, kind of a medium gray. So it's still legible, but just kind of minimizes that so it's not as prominent as other ones.

I want to add a little bonus that is not covered in the exercise, but I think it's a cool thing. One of the usability challenges, I think, with clicking links like this is you click it and it just jumps right down the page. And I think that can be confusing to people because they don't necessarily know that they scrolled down the page.

They might think they went to another page, and I'd really like them to know that they scrolled down the page. So I'm going to add a little bit of CSS here. And this whole page is an HTML page.

I'm going to target that HTML tag and just say anything in this webpage. I'm going to change the scroll behavior and I'm going to change it to smooth. And it's going to smooth it out and make it animated.

So I'm going to save that and hit refresh. And so now when I click on this, it goes up and down very smoothly. Look at that.

Nice and smooth. So that extra, just teeny little bit of code there, that's something that you could probably put into every page you do. Just that if you do have scrolling behavior where you're going up and down, that'll just smooth it out.

Just a nice little extra thing. I don't have it in the exercise, but I still think it's a great little thing. So I just wanted to add that.

We're going to do more with link styling in the next exercise. But for now, go ahead and do exercise 3D to try out these things.