Embedded Files
You’ve probably visited websites where not all links were made up of text. Maybe the links you clicked on were images or some other form of content.
So far, we’ve added links that were made up of only text, like the following:
<a href="https://en.wikipedia.org/wiki/Opuntia" target="_blank">Prickly Pear</a>
Text-only links, however, would significantly decrease your flexibility as a web developer!
Thankfully, HTML allows you to turn nearly any element into a link by wrapping that element with an anchor element. With this technique, it’s possible to turn images into links by simply wrapping the <img> element with an <a> element.
<a href="https://en.wikipedia.org/wiki/Opuntia" target="_blank"><img src="https://www.Prickly_Pear_Closeup.jpg" alt="A red prickly pear fruit"/></a>
In the example above, an image of a prickly pear has been turned into a link by wrapping the outside of the <img> element with an <a> element.
Instructions
Instructions
1. In index.html, transform the image on your page into a link by wrapping the image element with an anchor element. Set the target attribute so that the link opens in a new window.
Your image element should be a nested tag inside your anchor element.
Use the same URL as before: https://en.wikipedia.org/wiki/Brown_bear
<!DOCTYPE html>
<html>
<head>
<title>Brown Bears</title>
</head>
<body>
<a href="./index.html">Brown Bear</a>
<a href="./aboutme.html">About Me</a>
<h1>The Brown Bear</h1>
<div id="introduction">
<h2>About Brown Bears</h2>
<p>The brown bear (<em>Ursus arctos</em>) is native to parts of northern Eurasia and North America. Its conservation status is currently <strong>Least Concern</strong>.<br /><br /> There are many subspecies within the brown bear species, including the
Atlas bear and the Himalayan brown bear.</p>
<a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank">Learn More</a>
<h3>Species</h3>
<ul>
<li>Arctos</li>
<li>Collarus</li>
<li>Horribilis</li>
<li>Nelsoni (extinct)</li>
</ul>
<h3>Features</h3>
<p>Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.</p>
</div>
<div id="habitat">
<h2>Habitat</h2>
<h3>Countries with Large Brown Bear Populations</h3>
<ol>
<li>Russia</li>
<li>United States</li>
<li>Canada</li>
</ol>
<h3>Countries with Small Brown Bear Populations</h3>
<p>Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.</p>
</div>
<div id="media">
<h2>Media</h2>
<img src="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg" />
<video src="https://content.codecademy.com/courses/freelance-1/unit-1/lesson-2/htmlcss1-vid_brown-bear.mp4" height="240" width="320" controls>Video not supported</video>
</div>
</body>
</html>
Page updated
Report abuse