HTML Links and Images
Links allow users to navigate between pages and websites.
Images can be used to display photos, logos and graphics on a webpage.
Creating a Link
Use the a element to create a hyperlink.
<a href="page.html">Go to Page</a>
Result:
When clicked, the browser will open the specified page.
Linking to Another Website
Use a full web address when linking to an external website.
<a href="https://www.google.com">
Visit Google
</a>
Result:
Opening a Link in a New Tab
Add the target="_blank" attribute.
<a href="https://www.google.com"
target="_blank"
rel="noopener noreferrer">
Visit Google
</a>
Result:
The rel attribute improves security when opening new tabs.
Linking to an Email Address
Use the mailto: protocol.
<a href="mailto:teacher@school.com">
Email Teacher
</a>
Result:
When clicked, the user's email program will open.
Creating an Image
Use the img element.
<img src="images/dog.jpg"
alt="Photo of a dog">
The src attribute specifies the image location.
The alt attribute provides alternative text if the image cannot be displayed.
Setting Image Width
Use the width attribute.
<img src="images/dog.jpg"
width="100"
alt="Photo of a dog">
The image will be displayed at 100 pixels wide.
Responsive Images
A responsive image automatically scales to fit different screen sizes.
<img src="images/dog.jpg"
style="max-width:100%;"
alt="Photo of a dog">
This is useful for:
- Phones
- Tablets
- Laptops
- Desktop computers
Using an Image as a Link
Images can also be used as buttons.
<a href="dogs.html">
<img src="images/dog.jpg"
alt="Dog">
</a>
When the image is clicked, the browser will open the specified page.
Displaying a Logo
A common use of images is displaying a website logo.
<img src="images/logo.png"
width="200"
alt="Company Logo">
Creating an Image Gallery
Multiple images can be displayed together.
<img src="images/dog1.jpg"
width="200"
alt="Dog 1">
<img src="images/dog2.jpg"
width="200"
alt="Dog 2">
<img src="images/dog3.jpg"
width="200"
alt="Dog 3">
Complete Example
<!DOCTYPE html>
<html>
<head>
<title>Links and Images</title>
</head>
<body>
<h1>Links and Images</h1>
<a href="page.html">
Internal Page
</a>
<br><br>
<a href="https://www.google.com"
target="_blank"
rel="noopener noreferrer">
Google
</a>
<br><br>
<a href="mailto:teacher@school.com">
Email Teacher
</a>
<br><br>
<img src="images/dog.jpg"
width="300"
alt="Photo of a dog">
</body>
</html>
Quick Reference
Internal Link
<a href="page.html">
External Link
<a href="https://website.com">
New Tab
target="_blank"
Email Link
<a href="mailto:someone@email.com">
Image
<img src="image.jpg"
alt="Description">
Image Width
width="300"
Responsive Image
style="max-width:100%;"
Image Link
<a href="page.html">
<img src="image.jpg">
</a>
You now know how to create hyperlinks and display images in HTML.
Next tutorial: HTML Lists and Tables