HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)

Chapter 7: Links

In this chapter were gonna be talking about a few of the ways to use links in our web pages. But first let's add two headings and two paragraphs to our page to make it a little larger so that this exercise will make more sense. The text in the paragraphs below is just for example purposes. You can put whatever type of content that you want in them but I wouldn't worry about it too much because we are going to delete these later before we make an actual website. Use copy and paste for the paragraph content to save some time. Also note that when entering large groups of text into your text editor like this you can hit enter/return when your text is coming close to the right side of the screen. Remember HTML is gonna ignore all of the extra spacing so this is helpful in the way that you won't have to scroll left and right constantly to see all of your code. You can keep all of your content in the normal size of the window. I hope that wasn't confusing. But for example you can have your paragraph text all on one line even if it's 25 sentences long. But that would obviously be harder to read because you would have to scroll you screen way to the right to read it all. Instead you spread the content over multiple lines so you can see it all at once. HTML will only add one space in between each word so it wouldn't matter even if you skipped a bunch of lines. A little fun fact about text that is used as a placeholder. There is text called Lorem Ipsum that web developers will use to fill their web page with content like a placeholder until they put their own content in. It has been around and used for all different types of things since the 1500's. Do an internet search for Lorem Ipsum to learn more about it. You may even want to use it in the future. I didn't use it in this book but it is used very often by web developers. Okay, Add this code right after the table that you just created in chapter 6.

<h1>Gaming Stuff</h1>

<p>This paragraph is all about gaming. This paragraph is all about gaming.

This paragraph is all about gaming. This paragraph is all about gaming. This paragraph is all about gaming. This paragraph is all about gaming. This paragraph is all about gaming. This paragraph is all about gaming. This paragraph is all about gaming. This paragraph is all about gaming.</p>

<h2>Gaming Accessories</h2>

<p>This paragraph is all about gaming accessories. This paragraph is all about gaming accessories. This paragraph is all about gaming accessories. This paragraph is all about gaming accessories. This paragraph is all about gaming accessories. This paragraph is all about gaming accessories. This paragraph is all about gaming accessories. This paragraph is all about gaming accessories. This paragraph is all about gaming accessories. This paragraph is all about gaming accessories. This paragraph is all about gaming accessories. This paragraph is all about gaming accessories.</p>

Now you should have enough content on your web page to simulate having a large one that would be a pain in the butt to scroll all the way to the end or back up to the top. In a case like that you might want to add a link to jump to a certain part of your page when it is clicked. For this example we're just gonna create a link at the very end of the page that when clicked will take the user back to the top. You can put these links wherever you want and have them go to anything you want as well. Like a certain article or even an image. So right before you closing body tag</body> add this code and then we'll go over what we just did.

®<a This is called the anchor tag. It defines a hyperlink.

®href= This is a href attribute. This attribute gives the anchor tag a destination to link to.

®"#top"> Then for the value of the href attribute we add our double quotes like always and a hatch tag. The hatch tag is what tells the anchor tag that this is going to be linking to something within this web page.

®Back to Top This text here is the actual link. It will be what the user will click on. This can say anything you want it to. You could have also used an image here instead of text, or an image and text.

®</a> And finally we close out the anchor element.

So now we have a link set up and it will display on our page. But it won't take us anywhere if we click on it right now. And that is because we have to create another anchor tag in order for this tag to link to that one. So since we want to link back to the top of the page we will add our second anchor tag immediately after the opening <body> tag. Enter this there:

®<a Again we start with an opening anchor tag.

®name= Then we have the name attribute. The value that we give to name will link up to the # hatch tag value that we specified in the first anchor.

®"top"> And the value that we give it is "top". This has to match your hatch tag value.

®</a> And we close the anchor element.

Okay, Were good to go if you save/run your page you will be able to scroll to the bottom of your page and click the Back to Top link. Note that if you wanted to jump to a certain paragraph for example you would first add an anchor to the opening tag of that specific element. So If we wanted to link to our Gaming Stuff heading, we would add our anchor here:

<h1><a name="gaming stuff article"></a>Gaming Stuff</h1>. And then somewhere else on your page where you want to add your click-able link you add this:

<a href="#gaming stuff article">Click Me to go to Gaming Stuff</a>.

Don't forget to add the # and also the text Click Me to go to Gaming Stuff here because if you don't put in any text or image there won't be anything for the user to click on. The link wouldn't even be visible on your web page.

The last way to link that were gonna learn in this chapter is how to link to an external site. We are gonna create a link right inside of a footer that when clicked the user will be taken to the Google search engine. Let's add this on the line after the Back To Top link code that we created earlier and right before the closing </body> tag. By the way this is always where you would want to put your bottom of the page footer. You can use the footer in other area's of your code. But if your using it in the way that it's normally intended for, Which is a footer at the very bottom of your web page, you want to add your code as the last thing before the body element is closed out because the browser reads the code from top to bottom. So add this code there:

<p> <a href="http://www.google.com">Click me</a> to go to Google search.</p>

</footer>

It's that simple to make any text on your page a click-able link. We created a footer for our page that has a p element nested inside of it with an anchor element nested inside of that. You could also make a list of links by creating an unordered list and adding your links in between you list item <li></li> tags. And you can add a heading that says something like "My Favorite Sites". You would just add the anchor tags like so:

<ul>

<li><a href="http://www.google.com">Go to Google</a></li>

<li><a href="http://www.yahoo.com">Go to Yahoo</a></li>

</ul>

That's gonna wrap up this chapter on links. Play around with adding links in different ways and you'll be linking like a pro in no time. Later in this book when we start creating multiple web pages for our website we'll learn how to link all of our pages to each other. It wouldn't make sense to show you that now because we're not quite at that stage yet. But when we get there you shouldn't have any problem at all.

Quiz Chapter 7

1.What is the name of this tag? <a>.

2.What does the href attribute do?

3.What special symbol do you use to tell the anchor that you are linking to something within the same page?

4.Name two ways that you could use links in your web page?

5.In what place do you always want to add the code for your bottom of the page footer?