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

Posted by Manjula Chetty
Manjula Chetty
1,546 Points

html for linking img

html for linking image

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 logo">
          <a href="http://www.facebook.com"></a>
          <img src="img/twitter-wrap.png" alt="twitter logo">
          <a href="http://www.twitter.com"></a>
      <p>&copy; 2013 Nick Pettit.</p>
    </footer>
  </body>
</html>
Chris McKirgan
Chris McKirgan
5,666 Points
Chris McKirgan
Chris McKirgan
5,666 Points

Do you have a question? If you would like others to help you, you will need to state what your problem is, what you've tried and share something which will help us. (the last part you've done perfectly).

Please edit your question and supply:

  1. A question with correct grammar and punctuation.
  2. What you've tried so far.

Then myself, and others will be happy to help. Until then no-one will be able to effectively help you.

Manjula Chetty
Manjula Chetty
1,546 Points

I've done exactly as asked but still get the wrong answer. Don't know how to continue.

Chris McKirgan
Chris McKirgan
5,666 Points
Chris McKirgan
Chris McKirgan
5,666 Points

You haven't asked a question yet, which is probably why people here are struggling to understand your problem.

"html for linking image" is a statement not a question. Your question could be: "How can I add a link to all the images in the following code?", or "How can I change my portfolio list items to use images instead of text?"

5 Answers

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

I assume you are asking how to make an image into a link? (It is not clear from your original question).

To do this surround your img tag with a href tag like in the following example:

<a href="http://teamtreehouse.com"><img src="img/numbers-06.jpg" alt=""></a>
Chris McKirgan
Chris McKirgan
5,666 Points
Chris McKirgan
Chris McKirgan
5,666 Points

You've accidentally missed the closing quote from the href attribute - its breaking the mark-up. It should read:

<a href="http://teamtreehouse.com"><img src="img/numbers-06.jpg" alt="Your alt attribute here"></a>
Samuel Glister
Samuel Glister
12,471 Points
Samuel Glister
Samuel Glister
12,471 Points

Hi Manjula,

I don't think anyone is totally sure what you are looking for here, however if you are asking how to turn all of the above images to links it should looks something like this...

         <li>
            <a href="img/img/numbers-01.jpg">
              <img src="img/img/numbers-01.jpg" alt="">
            </a>
          </li>
          <li>
            <a href="img/img/numbers-02.jpg">
              <img src="img/img/numbers-02.jpg" alt="">
            </a>
          </li>
          <li>
            <a href="img/img/numbers-06.jpg">
              <img src="img/img/numbers-06.jpg" alt="">
            </a>
          </li>

Hope this helps you on your adventures :)

Samuel Glister
Samuel Glister
12,471 Points
Samuel Glister
Samuel Glister
12,471 Points

sorry - correction, like this

   <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
            </a>
          </li>
Manjula Chetty
Manjula Chetty
1,546 Points
Manjula Chetty
Manjula Chetty
1,546 Points

I'm speaking of linking social media icons. Thanks for helping.

Diane Houghton
Diane Houghton
5,773 Points
Diane Houghton
Diane Houghton
5,773 Points

Put the img src inside the < a href > < /a > tags just like Samuel did in his answer.

Manjula Chetty
Manjula Chetty
1,546 Points
Manjula Chetty
Manjula Chetty
1,546 Points

Sorry guys. It's my first day on this site. How do I link my social media icons? How do I take a screenshot of what I've done as I can't see where I'm going wrong? I'm on windows 8.