🔗 Links & Images

Connecting Pages and Adding Visuals

Hyperlinks and Images

Links and images are fundamental to the web. Links connect pages together, while images make content visually engaging.

💻 HTML Links

<!-- Basic link -->
<a href="https://example.com">Visit Example</a>

<!-- Link to another page in same site -->
<a href="about.html">About Us</a>
<a href="pages/contact.html">Contact</a>

<!-- Open in new tab -->
<a href="https://example.com" target="_blank">Open in New Tab</a>

<!-- Email link -->
<a href="mailto:hello@example.com">Send Email</a>

<!-- Phone link -->
<a href="tel:+1234567890">Call Us</a>

<!-- Link to section on same page -->
<a href="#section1">Jump to Section 1</a>

<!-- Link with title -->
<a href="page.html" title="Go to page">Click here</a>

🖼️ HTML Images

<!-- Basic image -->
<img src="photo.jpg" alt="A beautiful photo">

<!-- Image with size -->
<img src="logo.png" alt="Company Logo" width="200" height="100">

<!-- Image from URL -->
<img src="https://example.com/image.jpg" alt="Online image">

<!-- Image in subfolder -->
<img src="images/banner.jpg" alt="Banner">

<!-- Image with title (tooltip) -->
<img src="cat.jpg" alt="Cat" title="My pet cat">

<!-- Responsive image -->
<img src="photo.jpg" alt="Photo" style="max-width: 100%; height: auto;">

🔧 Image as Link

<!-- Clickable image -->
<a href="https://example.com">
    <img src="banner.jpg" alt="Click to visit">
</a>

<!-- Clickable logo -->
<a href="index.html">
    <img src="logo.png" alt="Home" width="150">
</a>

🎨 Advanced Link Types

<!-- Download link -->
<a href="document.pdf" download>Download PDF</a>

<!-- Link with rel attribute (external) -->
<a href="https://external.com" rel="noopener noreferrer" target="_blank">
    External Site
</a>

<!-- Bookmark link -->
<h2 id="section1">Section 1</h2>
<a href="#section1">Go to Section 1</a>

<!-- Button-style link -->
<a href="signup.html" style="padding: 10px 20px; background: blue; color: white;">
    Sign Up
</a>

📸 Picture Element (Responsive Images)

<!-- Different images for different screen sizes -->
<picture>
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source media="(min-width: 400px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Responsive image">
</picture>

🎯 Key Takeaways