<!-- About MDN
MDN Web Docs is an open-source, collaborative project documenting Web platform technologies, including CSS, HTML, JavaScript, and Web APIs. We also provide an extensive set of learning resources for beginning developers and students.

MDN's mission is to provide a blueprint for a better internet and empower a new generation of developers and content creators to build it. -->


<!-- The aim of this skill test is to assess whether you understand how to implement hyperlinks in HTML. -->


<h4><u> Task 1 </u></h4>
<!-- In this task, we want you to help fill in the links on our Whales information page:

The first link should be linked to a page called whales.html, which is in the same directory as the current page.
We'd also like you to give it a tooltip when moused over that tells the user that the page includes information on Blue Whales and Sperm Whales.
The second link should be turned into a link you can click to open up an email in the user's default mail application, with the recipient set as "whales@example.com".
You'll get a bonus point if you also set it so that the subject line of the email is automatically filled in as "Question about Whales".  

Try updating the live code below to recreate the finished example: -->

<h1>Information on Whales</h1>

<p>For more information on our conservation activities and which Whales we study,
see our <a target="_blank">Whales page</a>.</p>

<p>If you want to ask our team more questions, feel free to <a target="_blank">email us</a>.</p>


<!-- Anwser 1 -->
<h4><u> Done </u></h4> <!-- title  -->

<p>For more information on our conservation activities and which Whales we study,
see our <a href="https://mdn.github.io/learning-area/html/introduction-to-html/tasks/links/whales.html" title="Blue Whales and Sperm Whales"  target="_blank">Whales page</a>.</p>

<p>If you want to ask our team more questions, feel free to <a href="mailto:whales@example.com?subject=Question%20about%20Whales" target="_blank">email us</a>.</p><br>

<hr> <!-- line -->


<h4><u> Task 2 </u></h4>
<!-- In this task, we want you to fill in the four links so that they link to the appropriate places:

The first link should link to an image called blue-whale.jpg, which is located in a directory called blue inside the current directory.
The second link should link to an image called narwhal.jpg, which is located in a directory called narwhal, which is located one directory level above the current directory.
The third link should link to the UK Google Image search. The base URL is https://www.google.co.uk, and the image search is located in a subdirectory called imghp.
The fourth link should link to the paragraph at the very bottom of the current page. It has an ID of bottom.

Try updating the live code below to recreate the finished example: -->

<h1>List path tests</h1>

<ul>
  <li><a target="_blank">Link me to the blue whale image</a></li>
  <li><a target="_blank">Link me to the narwhal image</a></li>
  <li><a target="_blank">Link me to Google image search</a></li>
  <li><a>Link me to the paragraph at the bottom of the page</a></li>
</ul>


<!-- Answer 2 -->
<h4><u> Done </u></h4> <!-- title -->

<ul>
  <li><a href="blue/blue-whale.jpg" target="_blank">Link me to the blue whale image</a></li>
  <li><a href="../narwhal/narwhal.jpg" target="_blank">Link me to the narwhal image</a></li>
  <li><a href="https://www.google.co.uk/imghp" target="_blank">Link me to Google image search</a></li>
  <li><a href="#bottom2">Link me to the paragraph at the bottom of the page</a></li>
</ul><br>

<hr> <!-- line -->


<h4><u> Task 3 </u></h4>
<!-- The following links link to an info page about Narwhals, a support email address, and a PDF factfile that is 4MB in size. In this task, we want you to:
Take the existing paragraphs with poorly-written link text, and rewrite them so that they have good link text.
Add a warning to any links that need a warning added.

Try updating the live code below to recreate the finished example: -->

<p>We do lots of work with Narwhals. To find out more about this work, <a href="narwhals.html" target="_blank">click here</a>.</p>

<p>You can email our support team if you have any more questions — <a href="mailto:whales@example.com">click here</a> to do so.</p>

<p>You can also <a href="factfile.pdf" target="_blank">click here</a> to download our factfile, which contains lots more information, including an FAQ.</p>

    
<!-- Answer 3 -->
<h4><u> Done </u></h4> <!-- title -->

<p>We do lots of work with Narwhals. To find out more about this work, <a href="narwhals.html" target="_blank"> visit our work</a>.</p>

<p>You can email our support team if you have any more questions — <a href="mailto:whales@example.com">send email</a> to do so.</p>

<p>You can also <a href="factfile.pdf" target="_blank">factfile (PDF, 4MB)</a> to download our factfile, which contains lots more information, including an FAQ.</p><br>


<div></div>
<p id="bottom2">The bottom of the page!</p> <!-- Task 2 bottom -->

/* Task 1 and 3  CSS */

p {
  color: gray;
  margin: 0.5em 0;
}    

/* Task 2 CSS */

h1 {
  font-size: 2rem;
  margin: 0;
  color: purple;
}

li {
  color: gray;
  margin: 0.5em 0;
}

div {
  height: 500px; 
}