S:5 Adding links and images in HTML

After text elements, the HTML elements you'll see most often are links and images. Almost every time you navigate to a new page on a website or a new website altogether, you click on a link to do it, and nearly every website you visit is likely covered with images, this one included. They may seem unrelated at first, but both are set apart from the text elements you've seen so far because they rely on HTML attributes to be useful.

HTML attributes

Any HTML element can have attributes, and there are a variety of different HTML attributes with different functions, but we'll get into them later. The big thing that sets links and images apart is that they must have HTML attributes to do anything at all.

Links

The HTML element for a link is actually called an anchor element. An anchor element with no HTML attribute might look like this:

<a>Click me</a>

If you wanted, you could add that to your index.html page, and you'd see the text when you loaded it in the browser. However, without an HTML attribute, your anchor element wouldn't do anything. It would be nothing but text.

Let's say you wanted your anchor element to link back to this website, so if anybody were to click on it, their browser would be redirected to our homepage. That anchor element would look more like this:

<a href="https://edu.gcfglobal.org/">Click me</a>

Two pieces have been added here:

• The attribute name: In this case, the name is href, and it would be the same for any anchor element, no matter where you wanted it to go. It is short for Hypertext Reference, but all you need to remember is href. As with most attributes, it's followed by an equals sign before the value.

• The attribute value: This varies depending on where you want the link to go. Any value you put in here should be in quotes, and for this example is the homepage of this site: "https://edu.gcfglobal.org/".

The part you'd actually see on the page would be unchanged: just the words "Click me." If somebody were to click on it, though, they would be taken to our homepage. You could put the URL for any website as the value of an href attribute—whatever web address you see in the address bar of your browser—to make a link that navigates to it.

Try this!

You can add an HTML anchor element on its own, or nested within another element, like the text formatting elements in the previous lesson. For example:

<p>I certainly do love <a href="https://edu.gcfglobal.org/en/programming/">learning to code</a>. I'll be a startup hot shot in no time!</p>

Try it out on codepen:

Images

An image element with no attributes looks like this:

<img>

Notice that the <img> tag doesn't have a corresponding </img> tag. That's because the image element isn't really a container the way the text elements you've seen so far have been; it has no associated text, and there is nothing to put inside of it. Instead, it uses an HTML attribute to point to the URL of an image, like this:

<img src="https://media.gcflearnfree.org/global/coding/basketballdog.png">

Like the anchor element, two pieces have been added: a name and value. In this case, though, the value is a URL pointing to an image somewhere on the Internet, which tells the browser to load it into the <img> element. The image could be on another website or your own, but as long as it exists at the address you provided, your browser will automatically load it in and display it on the page where you put the <img> element.

An image URL is no different from the URLs you might use to visit a regular website. For example, this link leads to the exact same URL as the image element above. Click it and you'll see the image open in your browser like a webpage. Almost any time you see an image on a webpage, you can right-click and press "Open image in new tab" to view an image this way.

Try this!

You can enter whatever image you can find into an image element to try it out. For example, you can use the image we've been using:

<img src="https://media.gcflearnfree.org/global/coding/basketballdog.png">

Try adding that in the input codepen.

Do it yourself!

Open the index.html file of your Programming Tutorials project in your text editor, and let's add some links and images.

1. Your file should have a number of text elements in it, but we won't be changing any of those. Instead, find the <h2> header you entered earlier:<h2>Review: Basketball Dog (2018)</h2>

2. Let's add an image. Below that <h2> element, before any of the paragraph elements, enter this image element:<img src="https://media.gcflearnfree.org/global/coding/basketballdog.png">

3. That will serve as an introductory image for your in-progress lesson. Next, find the final paragraph element you included:<p>Find the full cast listing at the Basketball Dog website.</p>

4. Let's make the words "Basketball Dog" link back to the homepage of this site. To do that, you'll want to wrap an anchor element around just those words, then give it an href attribute with a value of this site's address. It should look like this:<p>Find the full cast listing at the <a href="https://edu.gcfglobal.org">Basketball Dog</a> website.</p>

Once you've done all of this, your full HTML document should look like this:

<html>

<body>

<h2>Review: Basketball Dog (2018)</h2>

<img src="https://media.gcflearnfree.org/global/coding/basketballdog.png">

<p><i>4 out of 5 stars</i>

<p>From director <b>Vicki Fleming</b> comes the heartwarming tale of a boy named Pete (Trent Dugson) and his dog Rover (voiced by Brinson Lumblebrunt). You may think a boy and his dog learning the true value of friendship sounds familiar, but a big twist sets this flick apart: Rover plays basketball, and he's doggone good at it.</p>

<p>This movie has everything you could ask for:</p>

<ul>

<li>Basketball</li>

<li>A dog</li>

<li>Nail-biting suspense</li>

</ul>

<p>While it may not have been necessary to include all 150 minutes of Rover's championship game in real time, Basketball Dog will keep your interest for the entirety of its 4-hour runtime, and the end will have any dog lover in tears. If you love basketball or sports pets, this is the movie for you.</p>

<p>Find the full cast listing at the <a href="https://edu.gcfglobal.org">Basketball Dog</a> website.</p>

</body>

</html>

Open the File Explorer or Finder and navigate to your Programming Tutorials project, then double-click your index.html file. Your webpage should open in your default browser, and you should see something like this.

The image will probably look pretty large by default, but once we start working with CSS, you'll be able to control that, too. Congratulations, your webpage now has a shiny new image, along with some basic functionality!