Adding Images in HTML and Connecting Webpages with Hyperlinks

Now let’s look at two essential elements of any webpage: images and links. So far, you’ve only seen the text. Time to add some visual appeal and interactivity now.

Images

Images can explain concepts, convey an emotion or add aesthetic appeal. We use the <img> tag to add an image.

The <img> tag

The image you wish to display can be in your system or elsewhere on the web. That location is specified using src attribute for the <img> tag.

Take note that the <img> tag doesn’t need a closing tag. Add this above line to your HTML file and view it in the browser. Finally, you’re able to see something colourful on your page.

This is an image from the internet. If you want to display an image that you have on your system instead, copy and paste that image file in the same folder as your HTML file. And then you can display it using the image name like so:

Or, you can put the image inside a folder “images” in the same folder as your web page:

Then you can use the relative path to display the image:

Size of the image

By default, the image appears in its original size on the web page. You can use the width and/or height attributes to change that.

Now the image takes up 650px width and 400px height. But be careful when you specify both width and height; this way, you might mess up the aspect ratio, and the image will appear distorted. So, you can specify only the width OR the height as you wish. The other parameter will be calculated automatically, retaining the aspect ratio.

The ALT attribute

If the image you linked cannot load for some reason - low internet or missing file, the browser displays a broken image icon. That’s not really useful to the person viewing your page. So, you must always provide an alternative text for each image that shows up when the image cannot be loaded. This is done using the alt attribute.

Now you’ll see this if the image doesn’t load.

The alt attribute also helps screen readers describe the image to visually impaired users and is helpful for search engines too.

Hyperlinks

The “web” is nothing without inter-connected web pages. Hyperlinks (or simply links) combine multiple web pages to make a website and help users navigate to other websites for more information.

Linking web pages

Linking is done using the <a> tag and its href attribute.

Add this code to your webpage, and you’ll see the text Join Showwcase in blue colour with underlined text. Clicking on it will take you to the URL specified in the href attribute.

The Target Attribute

When you click on a link, the linked web page will open in the same window/tab by default. You can change this behaviour using the target attribute.

This value _blank will open the web page in a new tab/window, keeping your web page as it is.

Linking sections within the web page

Links are not only used for linking other web pages. You can also link to sections within the same web page. This is especially useful for long pages like documentation.

For this, you must first specify an ID for the target section.

And then, you can use the ID contact to navigate to this heading.

Notice the # symbol before the ID name. That is how you reference elements by ID. You’ll see more of this when we get to CSS.

Conclusion

You can now add images and links to your web pages using their respective attributes. It’s important to practise this enough before you move on to learning more. Go ahead and create your own recipe page or talk about your favourite movie adding images and links.