Links and Images in HTML » Learn The Web

Lesson Content

HTML Links and Images

Introduction

Alright so by now, you should understand how to put text on websites. You should know how to bold and italicize things along with making different sized headers. But websites are boring with just text. In this lesson, we will learn how to add links and images to our website and by the end of the lesson you can make basic sites like this:

You will learn the ins and outs of using links and images in HTML!

Overview

By the end of this lesson, you should be able to:

- The syntax of a link in HTML
- Explain the difference between absolute and relative linking
- How to add images from the internet to our website
- How to add images from our files to our website
- How to size our images accordingly
- Explain the “alt” and “href” attribute

Links

Almost every sophisticated website has some sort of linking. Whether it is to other websites or to other pages within the website. Links can be used in lists, buttons, headers, and basically any HTML element. Lets go ahead and look at the syntax of a link in HTML

Ok, let’s dive into the syntax. The first thing to notice is the <a> tag or the anchor tag. The anchor tag is an HTML element used to create a hyperlink to another webpage or location within the same webpage. It is often used to navigate to other pages on a website or to link to external websites.

What about the href attribute? The href attribute is used to specify the URL (web address) of the page the link should point to. href stands for hypertext reference if you’re curious.

In the next example, we will make a link pointing to youtube.com. Look at the syntax and make sure you understand how it works.

<body>
    <a href="https://www.youtube.com">Click for youtube videos</a>
</body>

Our link should look something like this:

Absolute and Relative Linking

Now that we‘ve reviewed the syntax for constructing links in HTML, let‘s explore the differences between absolute and relative linking.

Absolute Linking

Absolute linking is a type of linking that uses the full URL of a page or document. It is used to link to other websites, documents, images, videos, etc. The full URL is used to ensure that the link will always work, even if the page or document is moved to a different location. Here is an example:

<body>
    <!-- We are linking to another website, so it's an ABSOLUTE link -->
    <a href="https://learntheweb.org/">This is an absolute link!</a>
</body>

Relative Linking

Relative linking is a type of linking that uses only the relative path of a page or document. The relative path is used to link to other webpages and documents that are located in the same directory or are related in some way. Websites can contain a large number of pages, and relative linking makes it easy to navigate between them since they are all located in the same directory. Here is an example:

<body>
    <!-- We are linking to our own HTML page, so its a RELATIVE link -->
    <a href="aboutme.html">This is a relative link!</a>
</body>

In the example above, we are linking to another HTML file we created called aboutme.html. Understanding how to link webpages together is an important skill when constructing larger websites that need multiple pages connected.

Images

With links out of the way, it is finally time to move onto images! We will learn how you can take images directly from the web and put them in your code along with how to take images from your files directly.

Here is the basic image syntax:

So what is happening here? The first thing to understand is our <img> tag. The image tag is where we will have all our image attributes like the src and alt that you see above. The img src in HTML is used to define the source of an image. It is used within the <img> element and the src attribute should contain the URL of the image.

The alt attribute is a tag used in HTML for images. It provides an alternative text description for an image if the user for some reason can‘t view it. It can also help search engines understand the content of the image. It should be a concise and clear description of what the image is. We always want to add the alt attribute so that our websites are friendly to those that are impaired.

Images from the web

To use an image from the web, it is very simple. Start by finding a picture that you like. Right click it and copy image address. This is what you will put in your src attribute. (And yes, image addresses are very long! If yours is super long, it’s nothing to worry about).

Go ahead and put in a few images of your choice in your code! They can be about anything, but make sure you understand how to take images from the web

Images from files

Using images from our files is super easy as well! Let’s say we downloaded and image called cat.png and we wanted to put that in our website. In the src attribute, you can just have src=”cat.png” and it will show up on your website!

Image Sizing

By now, we should know how to the syntax for an image works, as well as how to get images from the internet/our files.

Sometimes the images we add are just too big/too small. HTML actually allows us to change the size of our images with a few attributes. Look at the picture down below:

<body>
    <img src="myimage.png" alt="This is my image" height="500px" width="500px">
</body>

You can easily adjust the size of an image on a web page by using the HTML attributes ‘height‘ and ‘width‘ in the image tag. For example, if you want the image to be 200 pixels high and 400 pixels wide, the HTML code would be:

<img src="image.jpg" height="200" width="400">

Something to note is that if you want to keep the aspect ratio of the image, only change one of the attributes, either height or width. If you want to give the image a custom size, then change both.

On your website, go ahead and change the sizing of an image or two. Also, we are using pixels in this example because it is easier to understand. In the CSS curriculum, you will be introduced to a lot of new units.

Practice

Now that you understand how to use links and images, let’s go ahead and create a basic website using what we learned!

- Create a header for your website and title it “my favorite hobby”.
- Add a paragraph explaining what your favorite hobby is and why you enjoy it so much
- Now, add two pictures of your hobby into the website. You can grab these from google if you’d like or download it and use it instead. One picture should be pretty small and the other should be quite big, so you might have to resize them if needed!
Let’s add onto the website a bit more!
- - Add in an absolute link that goes to another website which explains your hobby.
  - Create another html filed named hobby.html.
  - Create a relative link from index.html to hobby.html.
  - Feel free to put whatever you want in hobby.html, the purpose of this was to practice relative linking
  - Add a link back from hobby.html back to index.html. Make sure that both links work. You’re all done! Hopefully, you understand the concept of adding links and images by now.

Find an issue/typo/error with our content? Please report it here