Week 5 Learn & Practice - Links

Textbook

Chapter 6: Adding Links

Links

The `<a>` Element

The web is all about linking documents together. We accomplish this with the anchor element. In the below text, I want to make the text, "Madison College" become a link to the Madison College website.

<p>Welcome to Madison College.</p>

First, wrap the Madison College text in an anchor tag.

<p>Welcome to <a>Madison College.</a></p>

Next, specify where the link should go.

We accomplish this with the href attribute and using the location of the website as the value.
href stands for hypertext reference.
Remember, attributes are placed in the opening tag. They provide additional information about the element, in this case, the location of the link.

<p>Welcome to <a href="https://madisoncollege.edu/">Madison College.</a></p>

External Links

Download the week05Demo_links.zip and open the website in VS Code and your browser.
- Spend a few moments reviewing the HTML code and document structure.
- Some links go to webpages outside of our website. These links point to another server and are called external links.
Underneath the <h1>How to pick a dog breed</h1> we will start building a navigation. Add a navigation element <nav>, and nested in the nav add an unordered list <ul> with one list item <li> and the text, "Pet Finder".
```
<header>
    <h1>How to pick a dog breed</h1>
    <nav>
        <ul>
            <li>Pet Finder</li>
        </ul>
    </nav>
</header>
```
Place anchor tags around “Pet Finder”.
```
<li><a>Pet Finder</a></li>
```
Insert the href="" attribute into the opening <a> tag. View the results in your browser, or HTML preview. It should look like a link, but it doesn’t go anywhere yet.
```
<li><a href="">Pet Finder</a></li>
```
Copy the Pet Finder URL: https://www.petfinder.com/ and paste it into your href value (between the quotes).
Test to make sure the link works in your browser. Always test your links!
```
<li><a href="https://www.petfinder.com/">Pet Finder</a></li>
```
External links must include the full URL (the absolute path).
Locate the text, “VetBabble” in the <footer>. Make this a link to https://www.vetbabble.com/dogs/breeds-dogs/choosing-dog-breed/

Internal Links

Often, we need to link to webpages within our site. To do this, we need to understand our file directory structure.

Relative Pathways

When we need to locate a resource within our website, we use relative paths. Relative paths locate a resource based on the current location. While it’s possible to navigate a directory path based on a root folder or source folder, for this course we will use relative paths to reinforce navigating the directory tree and to ensure all projects, exercises, and work submitted will function properly no matter where they are uploaded / downloaded.

Same Directory

Create a new list item in our unordered list and enter the text "Puppy Care".
- This will be a link to the puppyCare.html file in our website.
Place anchor tags around the "Puppy Care" text along with an empty href attribute.
```
<li><a href="">Puppy Care</a></li>
```
To link to the puppyCare.html we need to determine the correct path to get there. Since the puppyCare.html document is in the same folder as our current document (index.html), there is no need to leave the directory. We can “see” it, so we can refer to it by name directly.
```
<li><a href="puppyCare.html">Puppy Care</a></li>
```
Open the puppyCare.html page, create a navigation, unordered list, and list item after the <h1> (the same as we did on the index document). Add an anchor with href attribute pointing to the index.html and test that you can click back and forth between the two documents

Directory Down

On the index.html page, we need a link in our navigation to the airedaleTerrier.html page. I will need to navigate down a directory to the breeds folder.

On the index.html page, create a new list item in our unordered list and enter the text "Airedale Terrier". Add the anchor tags and an empty href attribute.
```
<li><a href="">Airedale Terrier</a></li>
```
Add the href value with the correct relative path to the airedaleTerrier.html file. To create the path to this document, we need to first go into the breeds directory and then access the airedaleTerrier.html file.
```
<li><a href="breeds/airedaleTerrier.html">Airedale Terrier</a></li>
```
1. Create a new link in the navigation pointing to the goldenRetriever.html and saintBernard.html pages.

Directory Up

When we’re on the airedaleTerrier.html page, we need a link to back to the index.html page. I will need to navigate up a directory to accomplish this. Going “back” and going “up” means the same thing.

On the airedaleTerrier.html page under the <h1> element add a link reading, "Homepage", with an empty href attribute.
```
<a href="">Homepage</a>
```
This link needs to go up to the index.html file in another directory. To create the path to this document, we need to leave the breeds directory first (where the airedaleTerrier.html page is) to go up the directory.
- The syntax to go back (or up) a directory is: ../
Add the ../ value to the href attribute to go back one directory level, then access the index.html file.
```
<a href="../index.html">Homepage</a>
```
Create homepage links on both the goldenRetriever.html and saintBernard.html pages.

Document Fragment to Same Page

We can also link to specific places on a webpage.

Document fragment links provide shortcuts and quickly go back to the top of a page.
We accomplish this by completing 2 steps:
- Identify the destination by giving it id
- Connect with the destination by creating an anchor that connects its href to the id

Open the puppyCare.html document. You will create links at the top of the page to link to the different sections of the page: vet, food, bathroom, and obedience.

Create id attributes for each of the <h2> elements. The id for the first <h2> is already done for you. Just add the id’s for the remaining 3 subheadings
```
<h2 id="vet">Find a Good Vet</h2>
```

Now, go back to the <nav> unordered list (<ul>). Add four new links after the Home Page link:

<li><a>Vet</a></li>
<li><a>Food</a></li>
<li><a>Bathroom Training</a></li>
<li><a>Obedience Training</a></li>

Add the href values to each link. Yours may be different from my example since you may have different id values.

<a href="#vet">Vet</a>
<a href="#food">Food</a>
<a href="#bathroom">Bathroom Training</a>
<a href="#obedience">Obedience Training</a>

Test to make sure the links take you to the different headings. You may need to zoom in, or reduce the viewport so you can see the links work

Document Fragment to Another Page

We can also link to a specific location on a page in another document.

Open the index.html page and locate the <h2> Temperament subheading. Give this heading an id
```
<h2 id="temperament">Temperament</h2>
```
On the puppyCare.html document, add a paragraph and text just after the "Teach Obedience" heading
```
<p>Learn More about Temperament</p>
```
Make the word Temperament a link by providing anchor tags and an href.
The link needs to point to the index.html page and the Temperament heading. Notice there are no spaces.
```
<p>Learn More about <a href="index.html#temperament">Temperament</a></p>
```
Test to make sure you link works.

Other Types of Links

New Tab or Window

You need to carefully consider when you want your link to open in a new browser window or tab. Users that have many tabs open tend to become lost, and it is also problematic for accessibility.

Locate the link we created to Pet Finder on the index.html page.
Add the target attribute to the opening <a> tag.

Give the target attribute the value of _blank

<a href="https://www.petfinder.com/" target="_blank">Pet Finder</a>

Test this in your browser, does the link open in a new tab?
Locate the link at the bottom of index.html that goes to VetBabble and make this link open in a new tab also.
- Now, when the user clicks on these links, new tabs open.
- This can get a little messy if we have lots of tabs open.
To make both these links use the same tab, give both target attribute’s a value other than_blank, but make sure it’s the same value.
- It can be any value.
For example, set the target="monkeyBanana" (or whatever you would like) on both the Vetbabble and the Petfinder anchors. In the browser, select Petfinder. The Petfinder page opens on a new tab. Now scroll down to the Vetbabble link and click on it. The Petfinder page content is replaced with the content of the Vetbabble page without additional tabs opening.

E-mail Links

The mailto Protocol. You can provide links that open the user's default email software and begins an email message! However, use these with caution, putting mailto in the document source makes it susceptible to junk mail (bots scan the web for these).

At the bottom of the index.html in the <footer>, after the paragraph and link to Vetbabble, add the below text. The <address> element is a block level semantic element, and the default browser style renders its content in italics.
```
<address>Contact the webmaster</address>
```
Enclose the email address in anchor tags and empty href attribute
```
<address>Contact the <a href="">webmaster</a></address>
```
To make this a mail link, we use the mailto protocol in the href and provide the email address.
```
<address>Contact the <a href="mailto:webmaster@web.com">webmaster</a></address>
```

Telephone Links

The tel Protocol. You can also provide links that work with mobile phones and desktop telephony devices. Just like the mailto protocol, the tel protocol works with an end users default system setup.

In the <address> element, after the anchor element, add a <br>
Add the text “Prefer talking? Call (608) 123-4567”
- The text is already in the <address> element, so additional elements are not needed.

Enclose “Call (608) 123-4567” in a link with an empty href attribute

<address>
Contact the <a href="mailto:webmaster@web.com">webmaster</a>
<br>
Prefer talking? <a href="">Call (608) 123-4567</a>
</address>

Next, we’ll add the tel value
- Not everyone visiting a website will be local or from the United States. Dialing a 10-digit phone number may not be enough. We need to make sure we include the country code too.
- We want the content of the link to be the same as whatever number is dialed in case the link doesn’t work for an end user, so they are able to manually dial the number.
- You can opt to include or exclude the dashes or extensions, but not spaces!
- I recommend writing the number without dashes
```
<address>
Contact the <a href="mailto:webmaster@web.com">webmaster</a>
<br>
Prefer talking? <a href="tel:+16081234567">Call (608) 123-4567</a>
</address>
```
The anchor element can be placed anywhere in the <body>.
The anchor <a> element can stand alone
Meaning you don’t need to place <a> elements inside a list item, paragraph, span, nav, div, etc. Don’t add unnecessary markup to your document