HTML Tutorial Part 4
Working with Links and Images
HTML Links (Hyperlinks)
Links allow users to navigate between pages. The <a> (anchor) tag creates hyperlinks.
<a href="https://www.example.com">Visit Example</a>
Link Attributes
- href - Specifies the URL destination
- target - Controls where to open the link
- title - Adds a tooltip on hover
Types of Links
1. External Links:
<a href="https://www.google.com" target="_blank">Google</a>
2. Internal Links:
<a href="/about.html">About Us</a>
3. Email Links:
<a href="mailto:info@example.com">Email Us</a>
4. Anchor Links (Same Page):
<a href="#section1">Jump to Section 1</a>
HTML Images
The <img> tag embeds images. It's a self-closing tag with required attributes.
<img src="image.jpg" alt="Description" width="300" height="200">
Image Attributes
- src - Image file path (required)
- alt - Alternative text for accessibility (required)
- width - Image width in pixels
- height - Image height in pixels
- title - Tooltip text on hover
Image as a Link
You can make images clickable by wrapping them in anchor tags:
<a href="https://www.example.com">
<img src="logo.png" alt="Company Logo">
</a>
<img src="logo.png" alt="Company Logo">
</a>
Complete Example
<!DOCTYPE html>
<html>
<head>
<title>Links and Images</title>
</head>
<body>
<h1>My Webpage</h1>
<p>Visit <a href="https://www.w3schools.com" target="_blank">W3Schools</a> to learn more.</p>
<img src="photo.jpg" alt="Beautiful sunset" width="500">
</body>
</html>
<html>
<head>
<title>Links and Images</title>
</head>
<body>
<h1>My Webpage</h1>
<p>Visit <a href="https://www.w3schools.com" target="_blank">W3Schools</a> to learn more.</p>
<img src="photo.jpg" alt="Beautiful sunset" width="500">
</body>
</html>
Best Practices
- Always include descriptive alt text for images
- Use target="_blank" sparingly for external links
- Optimize image sizes for faster page loading
- Use relative paths for internal links
- Make link text descriptive (avoid "click here")
- Test all links to ensure they work
Well Done!
You've completed Part 4 of the HTML Tutorial!
Next up: HTML Lists and Tables
0 Comments