Home » Exercises » HTML Exercises » HTML Links and Images

HTML Links and Images

Write an HTML program to create links (new tab and email)

Description: Create a web page with a link that opens a website in a new tab, a link to another page of your site, and a link to send an email.

Hint:

  • Use the <a> tag with href.
  • Use target="_blank" for a new tab and mailto: for an email link.

HTML program to create links

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Links</title>
</head>
<body>
  <p><a href="https://www.example.com" target="_blank" rel="noopener">Visit Example (new tab)</a></p>
  <p><a href="about.html">About us</a></p>
  <p><a href="mailto:info@example.com">Send an email</a></p>
</body>
</html>

Output in the browser:

Output in the browser

Visit Example (new tab)

About us

Send an email

How it works

  • target="_blank" opens the link in a new tab, and rel="noopener" keeps it safe.
  • about.html is a relative link to a file in the same folder.
  • mailto: opens the email app of the visitor.

Read HTML Links.

Write an HTML program to display an image

Description: Create a web page that shows an image of size 120 x 80 pixels, and another copy of the image that opens a website when clicked.

Hint:

  • Use the <img> tag with src, alt, width and height.
  • Put the image inside an <a> tag to make it a link.

HTML program to display an image

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Image</title>
</head>
<body>
  <img src="orange.png" alt="Orange sample picture" width="120" height="80">

  <a href="https://www.example.com">
    <img src="orange.png" alt="Go to Example" width="120" height="80">
  </a>
</body>
</html>

Output in the browser:

Output in the browser

How it works

  • src is the path of the picture. Keep the file in the same folder as the HTML file, or write the right path.
  • alt is shown if the picture cannot load.
  • Inside <a> the image becomes clickable.

Read HTML Images.

Write an HTML program to create a navigation menu

Description: Create a navigation menu with the links Home, About, Services and Contact, shown in one line.

Hint:

  • A menu is a list of links, so use ul, li and a inside a nav tag.
  • Use CSS to remove the bullets and show the items in one line.

HTML navigation menu

<nav>
  <ul class="menu">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

<style>
  .menu { list-style: none; padding: 0; }
  .menu li { display: inline-block; margin-right: 15px; }
</style>

Output in the browser:

Output in the browser

How it works

  • The nav tag tells that this block has navigation links.
  • list-style: none removes the bullets, and display: inline-block puts the items in a row.

Read HTML Semantic Elements.