Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Creating HTML Content Add Social Media Links

sahra Mohamed
sahra Mohamed
326 Points
Posted by sahra Mohamed
sahra Mohamed
326 Points

How do you put a link around the image wasn't it src? I'm confused!

This is for the activity for How to make a Website. Linking the Facebook and Twitter images.

index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit</title>
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <section>
      <ul>
        <li>
          <img src="img/numbers-01.jpg" alt="">
        </li>
        <li>
          <img src="img/numbers-02.jpg" alt="">
        </li>
        <li>
          <img src="img/numbers-06.jpg" alt="">
        </li>
      </ul>
    </section>
    <footer>
      <img src="img/facebook-wrap.png" alt="facebook">www.facebook.com/sahramohamed</img>
    <img src="img/twitter-wrap.png" alt="Twitter">www.twitter.com/sahrasurfs</img>
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>

2 Answers

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

The "src" attribute in an "img" element is the location of the image file.

Example: 

<img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />

The above code is an img element that points towards the src location of Google's homepage logo.

To create a link you need to surround the img element with an anchor.

Example:

<a href="http://www.google.co.uk">
<img src="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</a>

The "href" attribute of the anchor element points toward http://www.google.co.uk this is the locaton that the link will direct to.

Anything within the anchor tags will link to the href location.

This includes other html elements and even text like the following example:

<a href="http://www.google.co.uk">
This is a link to Google
</a>

Here is the full code to pass the challenge:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit</title>
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <section>
      <ul>
        <li>
          <img src="img/numbers-01.jpg" alt="">
        </li>
        <li>
          <img src="img/numbers-02.jpg" alt="">
        </li>
        <li>
          <img src="img/numbers-06.jpg" alt="">
        </li>
      </ul>
    </section>
    <footer>
      <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook" /></a>
      <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter" /></a>
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>
sahra Mohamed
sahra Mohamed
326 Points
sahra Mohamed
sahra Mohamed
326 Points

Thanks so much! This is very clear now! Much Gratitude:)

Shaun Moore
Shaun Moore
6,301 Points
Shaun Moore
Shaun Moore
6,301 Points

If you want to click the facebook/twitter icon and then it takes you to facebook/twitter do this:

<a href="www.facebook.com">
  <img src="img/facebook-wrap.png" alt="facebook">www.facebook.com/sahramohamed/>
</a>
<a href="www.twitter.com">
    <img src="img/twitter-wrap.png" alt="Twitter">www.twitter.com/sahrasurfs>
</a>
Shaun Moore
Shaun Moore
6,301 Points

SRC is the Source for an image or a object HREF is an attribute of the anchor tag, which is also used to identify sections within a document.

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

You haven't closed your anchor tags correctly, should be:

<a href="www.facebook.com">
  <img src="img/facebook-wrap.png" alt="facebook"></img>
</a>
<a href="www.twitter.com">
    <img src="img/twitter-wrap.png" alt="Twitter"></img>
</a>

Also closing img elements does not require closing tags, they are self closing void elements.

<img src="img/facebook-wrap.png" > <!-- Valid in HTML5 -->
<img src="img/facebook-wrap.png" />  <!-- Valid in HTML5, XHTML, and XML  -->
Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

I downvoted because the code is incorrect, I will happily revoke it when it is right :) Downvoting my answer however was unnecessary.