HTML Basics
Click that image

Good work! Now you know how to add links and images to your website. Why not make that image a link? For example:

<a href="http://www.codecademy.com/">
    <img src="http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg"/>
  1. First we open our <a> tag and point the href to http://www.codecademy.com/ again.
  2. But this time, instead of using text inside the <a> tag, we use an <img> tag.
  3. Finally, we have our closing </a> tag.

Now when you click on the yellow duck, you will be taken to http://www.codecademy.com!

Placing one HTML tag inside of another is called nesting.

  1. In the body section, create an <a> tag.
  2. Choose a website to point your link to, like <a href="http://www.codecademy.com">.
  3. Now create your <img> tag between your opening <a> tag and closing </a> tag. Don't forget the src!
  4. Finally, close your </a> tag after your <img> tag.
Stuck? 看看提示! 提示

Make sure you put in a full web address, like "http://www.google.com". Oh yeah—make sure to put the address in quotes!

Your code should look something like this:

<a href="LINK url">
    <img src="IMAGE url" />

Try making one image link to "http://codecademy.com" and then click on it to see the link in action. If you use another URL there is a chance that clicking on it won't work because of security settings on the website!

View Preview