Links, Images and Attributes

Links

What are links? How do you use them? Here's a short dialog on the topic.

Learneroo: The defining aspect of HTML is the ability to create links. Humanity's information is no longer alone on a page, but connected together on the world-wide web.

You: This isn't an Epistemology course. I just want to know how to make links.

Learneroo: We're getting there. This is a link to Google.com in HTML:

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

Which looks like this in a browser: Google

A link uses a pair of opening and closing <a> tags around the text that is displayed.

You: What's that weird href="http://www.google.com" part?

Learneroo: That's an attribute. Attributes provide additional information about an element. In a link, the href attribute states the destination to open when clicked. Other attributes can be used to define other properties, and they're always placed in the opening tag with the syntax attributeName="value".

You: Thanks for the background, but I just wanted to know how to make links.

Learneroo: So go ahead and create one!

Images

Unlike most HTML elements, images just use one tag, <img>:

<img src="URLofIMAGE">

The src attribute states the address of the image. For example, here's an image tag for Learneroo's logo:

<img src="http://www.learneroo.com/assets/color-logo.png">

Which displays:

In general, you should only embed images hosted on your website or server.

Image Links

Since HTML tags can be nested, you can create an image that links to another webpage. Simply replace the text inside a link with an image:

<a href="http://www.learneroo.com">
<img src="http://www.learneroo.com/assets/color-logo.png">
</a>

This creates the following image-link: