Working with Links and Images in HTML Objective
Working with Links and Images
Hey there, Web Explorer! Have you ever wondered how some folks make their web pages pop with links and images? Well, you’re in the right place. Today, we’re diving into a simple yet powerful trick to jazz up your webpage using the link tags. Ready? Let’s roll!
Learn how to insert hyperlinks and images into a webpage using the <a> (anchor) and <img> (image) tags.
- A text editor (e.g., Notepad++, VS Code, Sublime Text)
- A web browser (e.g., Google Chrome, Mozilla Firefox)
- An image file (optional, but recommended)
Open your text editor.
Click > to create a new document.
Save the file as exer2.
Type the following code into your text editor:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Working with Links and Images</title>
</head>
<body>
<h1>Working with Links and Images</h1>
</body>
</html>
<!DOCTYPE html> → Declares the document as an HTML5 file.
<title> → Sets the title of the webpage.
<body> → Contains the main content of the webpage.
<h1> → A heading element to label the page.
Modify the <body> section to include a link:
<body>
<h1>Working with Links and Images</h1><h2>Visit My Favorite Website</h2>
<p>Click the link below to visit Google:</p>
<a href=”https://www.google.com” target=”_blank”>Go to Google</a>
</body>
<a href=”https://www.google.com”>Go to Google</a> → Creates a clickable link.
href=”URL” → Specifies the destination URL.
target=”_blank” → Opens the link in a new tab.
Modify the <body> section to include an image:
<body>
<h1>Working with Links and Images</h1><h2>Visit My Favorite Website</h2>
<p>Click the link below to visit Google:</p>
<a href=”https://www.google.com” target=”_blank”>Go to Google</a><h2>Adding an Image</h2>
<p>Here is an image displayed on the webpage:</p>
<img src=”image.jpg” alt=”A beautiful scenery” width=”500″>
</body>
<img src=”image.jpg”> → Displays an image.
src=”image.jpg” → Specifies the file name of the image.
alt=”A beautiful scenery” → Alternative text if the image doesn’t load.
width=”500″ → Adjusts the image width to 500 pixels.
Instead of using a local file, you can use an online image by modifying the <img> tag:
<img src=”https://via.placeholder.com/500″ alt=”Placeholder Image” width=”500″>
The src attribute contains a direct link to an image hosted online.
This method ensures the image is accessible without needing a local file.
Modify the code to make the image a clickable link:
<a href=”https://www.google.com” target=”_blank”>
<img src=”https://via.placeholder.com/500″ alt=”Clickable Image” width=”500″>
</a>
The <img> tag is placed inside an <a> tag.
Clicking the image redirects the user to Google.
Click > in your text editor.
Open and navigate to your file.
Double-click the file to open it in a web browser.
You should see a webpage with a hyperlink, an image, and a clickable image!
You have successfully learned how to:
✅ Create hyperlinks using the <a> tag.
✅ Add images using the <img> tag.
✅ Make an image a clickable link.
