WDI Fundamentals

WDI Fundamentals Unit 4


Your Turn Your Turn

Now it's time to work with images. Our goal in this exercise will be to use HTML image tags to put a picture on the web.

Instructions

If you don't see the JS Bin below, please refresh the page.

  1. Take a look at the starter code below. Yep, it's your HTML boilerplate!

    Grumpy Cat on jsbin.com

  2. Write in an img tag between the body tags.

  3. Add src="http://i.imgur.com/z9gGd0t.jpg" to your image tag. (Grumpy Cat has strong opinions about visual design!)

  4. Add alt="grumpy cat hates bad design" to your image tag.

  5. Add title="grumpy cat" to your image tag.

Important to Remember

  • Image elements are self-closing; they don't need a closing tag.
  • Image URLs must end with an image extension; usually .jpg, .gif, or .png.
  • Images require a src. Including title and alt is strongly recommended.

Think about all the awesome stuff you can build online using images! Are you excited yet?

Stuck? Check out the solutions for assistance.


On to the next lesson.