2.4.2 Exercises

1. Why might the images shown in Figure 2.11 not match your results exactly? Hint: It’s not a bug, it’s a feature.
2. The kitten image in Figure 2.9 is available under a Creative Commons license that requires attribution. We’ll fulfill this requirement by linking the image on our page to the original image’s URL, which involves nesting the a and img tags, as shown in Listing 2.13. (Be sure to replace FILL_IN with the right URL.) How does this change the page’s (a) appearance and (b) behavior?
3. Under the first paragraph on index.html, let’s add a link to the Learn Enough Twitter account. First, download the Twitter logo as shown in Listing 2.14. Then, add a link to both the text and the logo image, as shown in Listing 2.15. Be sure to replace FILL_IN with the right path to the image. Note that Listing 2.15 introduces inline styling, which is the subject of Chapter 4. Extra credit: Follow Learn Enough on Twitter here.

    <p>
      HTML was created by the original "web developer", computer scientist
      <a href="https://en.wikipedia.org/wiki/Tim_Berners-Lee">Tim
      Berners-Lee</a>. It's not true that Sir Tim invented HTML in order to
      share pictures of his cat, but it would be cool if it were.
    </p>

    <a href="FILL_IN">
      <img src="images/kitten.jpg" alt="An adorable kitten">
    </a>

$ curl -o images/small_twitter_logo.png \
>      -L https://cdn.learnenough.com/small_twitter_logo.png

Note that the backslash \ should be typed, but your shell will include > automatically, so don’t just copy and paste the whole thing.

      .
      .
      .
      for our official email list</a> now.
    </p>

    <p>
      <a href="https://twitter.com/learnenough" target="_blank"
      rel="noopener" style="text-decoration: none;">
        <img src="FILL_IN">
      </a>
      You should follow Learn Enough on Twitter
      <a href="https://twitter.com/learnenough"
         target="_blank" rel="noopener">here</a>.
    </p>
    .
    .
    .