Adding Images and Links

Images and links are essential elements of any web page. They add visual interest and enhance the user experience, and they allow users to navigate between different pages and resources on the web. In this article, we’ll take a closer look at how to add images and links in HTML.

Adding Images

HTML provides the <img> tag for adding images to web pages. The <img> tag is a self-closing tag, meaning it doesn’t have a closing tag, and it requires the src attribute to specify the source of the image.

Here’s an example of how to add an image to a web page in HTML:

<img src="/images/my-image.jpg" alt="My Image">

In this example, we have added an image to the web page with the <img> tag. The src attribute specifies the source of the image, which is the file path to the image. The alt attribute is used to provide a text alternative for the image, which is important for accessibility and for search engines.

The <img> tag also supports a number of other attributes, such as width and height for specifying the size of the image, and title for providing a tooltip when the image is hovered over.

<img src="/images/my-image.jpg" alt="My Image" width="200" height="200" title="My Image">

In this example, we have added the width and height attributes to specify the size of the image, and the title attribute to provide a tooltip when the image is hovered over.

It’s important to use descriptive, relevant filenames for your images, and to specify the correct file path in the src attribute. You should also optimize your images for web by compressing them and sizing them appropriately.

Adding Links

HTML provides the <a> tag for creating links to other web pages or resources. The <a> tag is an inline element that requires the href attribute to specify the destination of the link.

Here’s an example of how to add a link to a web page in HTML:

<a href="https://www.example.com">Example</a>

In this example, we have added a link to the web page with the <a> tag. The href attribute specifies the destination of the link, which is the URL of the page. The text between the opening and closing tags is the text of the link.

You can also use the target attribute to specify how the link should be opened. For example, you can use _blank to open the link in a new window or tab.

<a href="https://www.example.com" target="_blank">Example</a>

In this example, we have added the target attribute to specify that the link should be opened in a new window or tab.

You can also use the rel attribute to specify the relationship between the current page and the linked page. For example, you can use nofollow to indicate that the link should not be followed by search engines.

<a href="https://www.example.com" rel="nofollow">Example</a>

In this example, we have added the rel attribute to indicate that the link should not be followed by search engines.

It’s important to use descriptive, relevant anchor text for your links, and to specify the correct destination in the href attribute. You should also avoid using broken or irrelevant links, as they can negatively impact the user experience and the credibility of your site.

Conclusion

Images and links are important elements of any web page, and they add visual interest and enhance the user experience. With the skills and knowledge you gain in this course, you’ll be able to add professional-quality images and links to your web pages.

Exercises

To review these concepts, we will go through a series of exercises designed to test your understanding and apply what you have learned.