Home > Chapter Review and Exercises > Chapter 6 - Links > Chapter 6 Exercises
Note: An excellent source on HTML Paths is: https://www.w3schools.com/html/html_filepaths.asp
The anchor element <a> allows you to link to other web pages and resources.
Use the href attribute to provide the URL of the target page.
For example, the anchor element to link to the www.oreilly.com website is: <a href="http://www.oreilly.com">Go to the O'Reilly Media site</a>
The href (hypertext reference) attribute provides the address of the page or resource (its URL) to the browser.
The URL must always appear in quotation marks.
There are two ways to specify the URL: absolute and relative.
Absolute URLs provide the full URL for the document, including the protocol (http:// or https://). These are called external links.
For example, href="http://www.oreilly.com/"
Relative URLs describe the pathname to a file relative to the current document.
For example, href="recipes/clam_soup.html" The clam_soup.html document is in the recipes subdirectory.
Relative URLs can be used when you are linking to another document that is on your own website server.
Step 1
In your Class folder, navigate to the Ch6 folder, and then open the Exercise 6-1 to 6-7 subdirectory. Open the index.html file that is in the jenskitchen folder into your text editor.
Step 2
In step 4 below, you will make the list item "Epicurious" link to its web page at www.epicurious.com.
Step 3
As an example, this is how the first link to the Food Network will look like using the <a> anchor element.
<a href="http://www.foodnetwork.com/">The Food Network</a>
Step 4
Create absolute links to www.foodnetwork.com and www.epicurious.com in the index.html file as shown here. Notice that the anchor element wraps around the text, and it sits entirely inside the li element.
<h2>Good Food on the Web</h2>
<ul>
<li><a href="http://www.foodnetwork.com">The Food Network</a></li>
<li><a href="http://www.epicurious.com">Epicurious</a></li>
</ul>
<p><small>Copyright 2016, Jennifer Robbins</small></p>
Step 5
Save the index.html file back into the jenskitchen folder that's in the Exercise 6-1 to 6-7 folder.
Step 6
Using File Explorer, navigate to the index.html file in the jenskitchen folder. Double left-click on it to open it in your web browser.
Click your two new links and go to the Food Network and Epicurious sites. If the link doesn’t take you there, go back and make sure that you didn’t miss anything in the markup.
Linking in the same directory
1. Relative Links are used when linking to pages on your own website (or in this case the folder on your PC).
2. A pathname is the notation used to point to a particular file or directory. It tells the browser where to find the file.
3. Directories and filenames are separated with forward slashes (/).
4. To link to another file within the same directory, only use the name of the file (i.e. is filename).
5. In this case, the folder you are in, jenskitchen, has both the index.html and the about.html files.
Step 1
In your Class folder, navigate to the Ch6 subdirectory, and then open the Exercise 6-1 to 6-7 subdirectory. Open the about.html file that is in the jenskitchen folder into your text editor.
Step 2
We want to make the paragraph “Back to the home page” at the bottom of the page link back to index.html.
Step 3
To create the link, add an anchor <a> element to bottom of the about.html file, as shown in bold text below:
<p>If you have recommendations, feel free to email me at jen@example.com.</p>
<p><a href="index.html">Back to the home page</a></p>
</body>
</html>
Step 4
Save the about.html file back into the jenskitchen folder that's in the Exercise 6-1 to 6-7 folder.
Step 5
Using File Explorer, navigate to the about.html file in the jenskitchen folder. Double left-click on it to open it in your web browser.
Clicking the link "Back to the home page", at the bottom of the page should take you back to the home page, index.html. If the link doesn’t take you there, go back and make sure that you didn’t miss anything in the markup.
Linking to a Lower Directory
1. To link to a lower directory, use the subdirectory name, then a forward slash (/), and then the file name.
2. For example, suppose a file name salmon.html is in a subdirectory named recipes. This link
<li><a href="recipes/salmon.html">Garlic Salmon</a></li>
will open the salmon.html file that is in the recipes subdirectory.
Step 1
In your Class folder, navigate to the Ch6 subdirectory, and then open the Exercise 6-1 to 6-7 subdirectory. Open the index.html file that is in the jenskitchen folder into your text editor.
Step 2
We want to make:
The list item “Tapenade (Olive Spread)” link to the file tapenade.html in the recipes subdirectory, and
The list item "Garlic Salmon" link to the file salmon.html in the recipes subdirectory.
Step 3
Add an <a> anchor element in the index.html file to the text "Tapenade (Olive Spread)" and "Garlic Salmon" as shown here in bold text. Notice that the anchor element wraps around the text, and it sits entirely inside the li element.
<h2>From Jen’s Cookbook</h2>
<ul>
<li><a href="recipes/tapenade.html">Tapenade (Olive Spread)</a></li>
<li><a href="recipes/salmon.html">Garlic Salmon</a></li>
<li>Linguine with Clam Sauce</li>
<li>Couscous with Peas and Mint</li>
</ul>
Step 4
Save the index.html file back into the jenskitchen folder that's in the Exercise 6-1 to 6-7 folder.
Step 5
Using File Explorer, navigate to the index.html file in the jenskitchen folder. Double left-click on it to open it in your web browser.
You should be able to click your new link and see the recipe page for tapenade. If the link doesn’t take you there, go back and make sure that you didn’t miss anything in the markup.
Link two directories down
1. To link to a file in a directory two levels down, you list the subdirectory names in sequence, separated by forward slashes.
2. For example, suppose a file name couscous.html is in a directory called pasta, and that the pasta directory is a subdirectory in the recipes directory. The recipes directory is a subdirectory in the directory where your main index.html file is stored.
3. This link
<li><a href="recipes/pasta/couscous.html">Couscous...</a></li>
will open the couscous.html file from the index.html file.
Step 1
In your Class folder, navigate to the Ch6 subdirectory, and then open the Exercise 6-1 to 6-7 subdirectory. Open the index.html file that is in the jenskitchen folder into your text editor.
Step 2
We want to make:
The list item “Linguine with Clam Sauce” link to the file linguine.html in the pasta subdirectory, and
The list item "Couscous with Peas and Mint" link to the file couscous.html in the pasta subdirectory.
Step 3
Add an <a> anchor element in the index.html file to the text "Linguine with Clam Sauce" and "Couscous with Peas and Mint" as shown here in bold text. Notice that the anchor element wraps around the text, and it sits entirely inside the li element.
<h2>From Jen’s Cookbook</h2>
<ul>
<li><a href="recipes/tapenade.html">Tapenade (Olive Spread)</a></li>
<li>Garlic Salmon</li>
<li><a href="recipes/pasta/linguine.html">Linguine with Clam Sauce</a></li
<li><a href="recipes/pasta/couscous.html">Couscous with Peas and Mint</a></li>
</ul>
Step 4
Save the index.html file back into the jenskitchen folder that's in the Exercise 6-1 to 6-7 folder.
Step 5
Using File Explorer, navigate to the index.html file in the jenskitchen folder. Double left-click on it to open it in your web browser.
You should be able to click your new link and get to the Linguine recipe. If the link doesn’t take you there, go back and make sure that you didn’t miss anything in the markup.
Linking to a higher directory
1. To link to a higher directory use the dot-dot-slash (../) symbol.
2. This instructs the browser to back up one directory level.
3. For example, suppose you are at the salman.html file in the recipes subdirectory and you want to get back to the index.html file that is in the jenskitchen directory. The salman.html file is in the recipes subdirectory.
4. This link will take you back to the index.html file in the jenskitchen directory.
<p><a href="../index.html">[Back to home page]</a></p>
5. To go back two directory levels use the dot-dot-slash twice (../../)
Step 1
In your Class folder, navigate to the Ch6 subdirectory, open the Exercise 6-1 to 6-7 subdirectory and then open the jenskitchen folder. From there, go to the recipes subdirectory and open the tapenade.html file into your text editor.
Step 2
We want to make the text "[Back to the home page]” into a link that will take you back to the home page (index.html), which is located one directory level up in the jenskitchen folder.
Step 3
Add an <a> anchor element in the tapenade.html file in the recipes directory to the text "[Back to the home page]" as shown here in bold text. Notice that the anchor element wraps around the text, and it sits entirely inside the paragraph <p> element.
<p><a href="../index.html">[Back to the home page]</a></p>
</body>
</html>
Step 4
Save the tapenade.html file back into the recipes folder that's in the jenskitchen folder.
Step 5
Using File Explorer, navigate to the tapenade.html file in the recipes folder. Double left-click on it to open it in your web browser.
You should be able to click your new link and get back to the home page. If the link doesn’t take you there, go back and make sure that you didn’t miss anything in the markup.
Step 1
Open your text editor, then navigate to the jenskitchen directory, then open the recipes subdirectory, and finally open the pasta subdirectory. Open the linguine.html file from the pasta subdirectory into your text editor.
Step 2
We want to make the text"[Back to the home page]” into a link that will take you back to the home page (index.html), located two directories up.
Step 3
Add an <a> anchor element in the linguine.html file in the pasta directory to the text "[Back to the home page]" as shown here in bold text. Notice that the anchor element wraps around the text, and it sits entirely inside the paragraph <p> element.
<p><a href="../../index.html">[Back to the home page]</a></p>
</body>
</html>
Step 4
Save the linguine.html file back into the pasta folder that's in the recipes folder.
Step 5
Using File Explorer, navigate to the linguine.html file in the pasta folder. Double left-click on it to open it in your web browser.
You should be able to click your new link and get back to the home page. If the link doesn’t take you there, go back and make sure that you didn’t miss anything in the markup.
It is presented in the book for informational purposes only.
Writing Path Names to Images
1. The src attribute in the img element works the same as the href attribute in anchor elements (<a>...</a>).
2. Using the Jen's Kitchen website, the following markup will add an image to the index.html page:
<img src="images/jenskitchen.gif" alt="">
3. The jenskitchen.gif image is in the images subdirectory in the jenskitchen folder.
4. This next one is sort of complicated. Using the same Jen's Kitchen index.html page, the following markup will add the spoon.gif image to the couscous.html file:
<img src="../../images/spoon.gif" alt="">
5. This is what is happening here. The ../../ moves two levels up from the pasta directory to the jenskitchen directory. Then the images/spoon.gif moves down to the images directory and inserts the spoon.gif image located there.
Step 1
n your Class folder, navigate to the Ch6 subdirectory, open the Exercise 6-1 to 6-7 subdirectory and then open the jenskitchen folder. From there, go to the recipes subdirectory and open the salmon.html file into your text editor.
Step 2
From the salmon.html file we want to create a link to tapenade.html which is also in the same recipes directory. We want to make the text "Go to the Tapenade recipe” into a link that will take you back to the tapenade.html page
Step 3
Add an <a> anchor element link that will take you to tapenade.html to the text "Go to the Tapenade recipe" in the salmon.html file in the recipes subdirectory as shown here in bold text. Notice that the anchor element wraps around the text, and it sits entirely inside the paragraph <p> element.
<p><a href="tapenade.html">Go to the tapenade recipe</a></p>
<p>[Back to the home page]</p>
</body>
</html>
Step 4
Save the salmon.html file back into the recipes folder that's in the jenskitchen folder.
Step 5
Using File Explorer, navigate to the salmon.html file in the recipes folder. Double left-click on it to open it in your web browser.
You should be able to click your new link and get to the tapenade.html page. If the link doesn’t take you there, go back and make sure that you didn’t miss anything in the markup.
Step 1
Open your text editor, then navigate to the jenskitchen directory, then open the recipes subdirectory, and finally open the pasta subdirectory. Open the couscous.html file from the pasta subdirectory into your text editor.
Step 2
From the couscous.html file we want to create a link back to salmon.html which is one level up in the recipes directory. Use the text "Try this with Garlic Salmon" in the link.
Step 3
Add an <a> anchor element link that will take you to salmon.html to the text "Try this with Garlic Salmon" in the couscous.html file in the pasta subdirectory as shown here in bold text. Notice that the anchor element wraps around the text, and it sits entirely inside the paragraph <p> element.
<p><a href="../salmon.html">Try this with Garlic Salmon.</a></p>
<p>[Back to the home page]</p>
</body>
</html>
Step 4
Save the couscous.html file back into the pasta folder that's in the recipes folder.
Step 5
Using File Explorer, navigate to the couscous.html file in the pasta folder. Double left-click on it to open it in your web browser.
You should be able to click your new link and get back to the salmon.html page. If the link doesn’t take you there, go back and make sure that you didn’t miss anything in the markup.
Step 1
Open your text editor, then navigate to the jenskitchen directory. From there, go to the recipes subdirectory and open the tapenade.html file into your text editor.
Step 2
From the tapenade.html file we want to create a link to linguine.html which is one level down in the pasta subdirectory. Use the text "Try the Linguine with Clam Sauce" in the link.
Step 3
Add an <a> anchor element link that will take you to linguine.html to the text "Try the Linguine with Clam Sauce" in the tapenade.html file in the recipes subdirectory as shown here in bold text. Notice that the anchor element wraps around the text, and it sits entirely inside the paragraph <p> element.
<p><a href="pasta/linguine.html">Try the Linguine with Clam Sauce</a></p>
<p><a href="../index.html">[Back to the home page]</a></p>
</body>
</html>
Step 4
Save the tapenade.html file back into the recipes folder that's in the jenskitchen folder.
Step 5
Using File Explorer, navigate to the tapenade.html file in the recipes folder. Double left-click on it to open it in your web browser.
You should be able to click your new link and get back to linguine.html . If the link doesn’t take you there, go back and make sure that you didn’t miss anything in the markup.
Step 1
Open your text editor, then navigate to the jenskitchen directory, then open the recipes subdirectory, and finally open the pasta subdirectory. Open the linguine.html file from the pasta subdirectory into your text editor.
Step 2
From the linguine.html file we want to create a link back to about.html which is two levels up in the jenskitchen directory. Use the text "About Jen's Kitchen" in the link.
Step 3
Add an <a> anchor element link that will take you to about.html to the text "About Jen's Kitchen" in the linguine.html file in the pasta subdirectory as shown here in bold text. Notice that the anchor element wraps around the text, and it sits entirely inside the paragraph <p> element.
<p><a href="../../about.html">About Jen's Kitchen</a></p>
<p><a href="../../index.html">[Back to the home page]</a></p>
</body>
</html>
Step 4
Save the linguine.html file back into the pasta folder that's in the recipes folder.
Step 5
Using File Explorer, navigate to the linguine.html file in the pasta folder. Double left-click on it to open it in your web browser.
You should be able to click your new link and get back to the about.html page. If the link doesn’t take you there, go back and make sure that you didn’t miss anything in the markup.
Step 1
Open your text editor, then navigate to the jenskitchen directory. From there, go to the recipes subdirectory and open the tapenade.html file into your text editor.
Step 2
From the tapenade.html file we want to create a link to www.allrecipes.com. Use the text "Go to Allrecipes.com" in the link.
Step 3
Add an <a> anchor element link that will take you to www.allrecipes.com to the text "About Jen's Kitchen" as shown here in bold text. Notice that the anchor element wraps around the text, and it sits entirely inside the paragraph <p> element.
<p><a href="pasta/linguine.html">Try the Linguine with Clam Sauce</a></p>
<p><a href="http://www.allrecipes.com">Go to Allrecipes.com</a></p>
<p><a href="../index.html">[Back to the home page]</a></p>
</body>
</html>
Step 4
Save the tapenade.html file back into the recipes folder that's in the jenskitchen folder.
Step 5
Using File Explorer, navigate to the tapenade.html file in the recipes folder. Double left-click on it to open it in your web browser.
You should be able to click your new link and get back to the www.allrecipes.com website. If the link doesn’t take you there, go back and make sure that you didn’t miss anything in the markup.
Linking to a Specific Point in a Page
1. Linking to a specific point in the page is also known as linking to a document fragment.
2. The first step is to identify where you want the link to go, its destination. For example, suppose we want to create a bookmark to the Chapter 4 heading. To do this the id attribute is used (remember, the id attribute can only be used once):
<h2 id="C4">Chapter 4</h2>
3. The next step is to create a link to the desired destination. We used an id of C4, so to create a link ("Jump to Chapter 4") to that location from within the same page, use an <a> anchor element:
<a href="#C4">Jump to Chapter 4</a>
More information on linking to a specific point in a page can be found here:
https://www.w3schools.com/html/html_links_bookmarks.asp
Linking to a Fragment in Another Document
4. Or, add a link to the bookmark ("Jump to Chapter 4"), from another page (in this example the other page is html_demo.html):
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Targeting a new browser tab
5. To link to a new browser tab or window, using the target attribute with the "_blank" value.
6. For example,
<a href="http://www.oreilly.com" target="_blank">O'Reilly</a>
Did you know that there are several other values for the target attribute? More information on this can be found here:
Step 1
Open your text editor, and open the glossary.html file from the Exercise 6-8 subdirectory.
Step 2
Identify the markup <h2>A</h2> in the glossary.html file as a destination for a link by naming it “startA” with an id attribute:
<h2 id="startA">A</h2>
<dl>
<dt>aliasing</dt>
<dd>The jagged stair-stepped edges that can appear between colors in a bitmapped graphic.</dd>
Step 3
Make the letter A at the top of the page a link to the identified fragment. Don’t forget the #.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Glossary</title>
</head>
<body>
<h1 id="top">Glossary</h1>
<p><a href="#startA">A</a> | B | C | D | E | F | G | <a href="#startH">H</a> | I | J | L | M | N | O | P | Q | R | S | T | U | V | W | X</p>
Step 4 (This is already provided for you)
The heading “Glossary” has a destination named “top”. This is already provided for you:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Glossary</title>
</head>
<body>
<h1 id="top">Glossary</h1>
Step 5
Add a paragraph element <p> containing “TOP” at the end of the "A" lettered section. Make the text “TOP” a link to the identifier that you just made at the top of the page, i.e. <h1 id="top">Glossary</h1>. Be sure to put <p><a href="#top">TOP</a></p> above the line with <h2>B</h2>.
<h2 id="startA">A</h2>
<dl>
<dt>aliasing</dt>
<dd>The jagged stair-stepped edges that can appear between colors in a bitmapped graphic.</dd>
<dt>anchor</dt>
<dd>The HTML element responsible for making hyperlinks.</dd>
<dt>applet</dt>
<dd>A self-contained, mini-executable program, such as one written in the Java programming language.</dd>
<dt>attribute</dt>
<dd>Parameters that extend or modify an HTML element</dd>
</dl>
<p><a href="#top">TOP</a></p>
<h2>B</h2>
Step 6
Save the glossary.html file back into the Exercise 6-8 folder.
Step 7
Using File Explorer, navigate to the glossary.html file in the Exercise 6-8 folder. Double left-click on it to open it in your web browser.
You should be able to click your new "A" link and get back to the "A" section on the page. If the link doesn’t take you there, go back and make sure that you didn’t miss anything in the markup.