Links and images


Now we're getting into the fun stuff!

Links

To make a link, use the anchor (<a>) tag:

<a href="http://google.com">Google</a>

Google

The <a> tag has an attribute named href that you set to the place where you want the link to go.

To make links open in a new window or tab, set the target attribute to _blank:

<a href="http://google.com" target="_blank">Google in a new window</a>

Google in a new window

Images

To include images in your page, first you need a public URL for an image.

I found a page on The Art of Cat Breading that has some good pictures:

Screen Shot 2016-07-24 at 1.00.29 PM

To get the URL for one of the pictures, right click on it and select "Copy Image Address":

Screen Shot 2016-07-24 at 1.00.44 PM

Once you have the public URL for an image, you can include it in your page like this:

<img src="http://i.imgur.com/AIRHuFR.jpg" />

To make it smaller, define width and/or height attributes:

<img src="http://i.imgur.com/AIRHuFR.jpg" width="100px" />

If you use the CSS style attribute (we'll learn more about it later), you can stretch out your image:

<img src="http://i.imgur.com/AIRHuFR.jpg" style="width: 300px; height: 100px" />


Challenge

Make a web page about your favorite animal. Include pictures and links. Bonus points if I can click an image to see more images.


Resources


Solutions

Try this challenge on your own first, then come back here to see other people's solutions.

Try this challenge on your own first, then come back here to see other people's solutions.