📄 Lesson 4: Links & Images
Hyperlinks (<a> tag)
Links are the foundation of the web. They connect pages and resources together. Use the <a> tag with the href attribute to create links.
Basic Link Syntax
<a href="https://example.com">Click here</a>
<a href="about.html">About Us</a>
<a href="contact.html">Contact</a>
Link Attributes
href - The Link Destination
The href attribute specifies where the link goes:
- Absolute URLs: Full web address (https://google.com)
- Relative URLs: Files in your project (about.html, pages/contact.html)
- Anchor links: Sections within a page (#section)
- Email: mailto:example@email.com
- Phone: tel:+1-555-0000
<!-- Absolute URL -->
<a href="https://google.com">Google</a>
<!-- Relative URL -->
<a href="about.html">About</a>
<!-- Anchor link -->
<a href="#section-one">Go to Section 1</a>
<!-- Email -->
<a href="mailto:hello@example.com">Email Us</a>
<!-- Phone -->
<a href="tel:+1-555-0000">Call us</a>
target - Where to Open the Link
Control whether links open in the same tab or a new tab:
<a href="https://example.com">Same tab (default)</a>
<a href="https://example.com" target="_blank">New tab</a>
<a href="https://example.com" target="_self">Same tab (explicit)</a>
title - Hover Text
Provide additional information with the title attribute:
<a href="https://google.com" title="Search engine">Google</a>
Creating Anchor Links
Use anchor links to jump to sections within the same page:
<!-- Navigation -->
<a href="#about">Jump to About Section</a>
<!-- Target section with id -->
<section id="about">
<h2>About Us</h2>
<p>Our content here...</p>
</section>
Images (<img> tag)
Images make web pages more engaging. Use the <img> tag to display images:
Basic Image Syntax
<img src="image.jpg" alt="Description of image">
Important Attributes
- src: Path to the image file (required)
- alt: Alternative text if image can't load (required for accessibility)
- width: Image width in pixels or percentage
- height: Image height in pixels
- title: Hover text
<img src="photo.jpg"
alt="A sunset over the ocean"
width="400"
height="300"
title="Beautiful sunset">
Image File Types
- JPG: Good for photographs and complex images
- PNG: Good for icons and images needing transparency
- GIF: Good for animations
- SVG: Scalable vector graphics (perfect for logos)
- WebP: Modern format with better compression
Image Optimization Tips
✓ Always use the alt attribute
✓ Resize images before uploading (don't rely on HTML width/height)
✓ Use the correct format for the image type
✓ Compress images to reduce file size
✓ Use descriptive alt text (not "image" or "picture")
Linking Images
You can wrap an image in a link to make it clickable:
<a href="https://example.com">
<img src="logo.png" alt="Company Logo">
</a>
Responsive Images
Make images responsive to different screen sizes:
<!-- CSS way (most common) -->
<img src="image.jpg" alt="Description" style="max-width: 100%; height: auto;">
<!-- HTML picture element (advanced) -->
<picture>
<source media="(min-width: 800px)" srcset="large-image.jpg">
<img src="small-image.jpg" alt="Description">
</picture>
Key Takeaways
- Use <a> tags to create links with
href attribute
- Use relative URLs for internal links, absolute for external
- Use
target="_blank" to open in new tab
- Always include
alt text for images
- Use appropriate image formats for different purposes
- Optimize images for web to improve performance