3. HTML Links, Images, Favicons & Page Titles
Theory & Practical Manual: Hyperlinks, target attributes, image alt text & favicons
Module 1: Hyperlinks (<a>) & Target Attributes Theory
Connecting web pages across the internet.
Core Theory & Principles
- Syntax: <a href="URL">Anchor Text</a>
- href specifies the destination URL.
- target="_blank" opens destination in a new browser tab.
- target="_self" opens destination in current frame (default).
- mailto: protocol opens user email client.
Practical Key Takeaways
Mastering Hyperlinks (<a>) & Target Attributes Theory builds fundamental development capability. Review practical code and outputs carefully.
💻 Practical Code Example - Hyperlinks (<a>) & Target Attributes Theory
<p><a href="https://www.example.com" target="_blank">Visit Instructor Notes (New Tab)</a></p>
<p><a href="mailto:gagan@example.com">Email Instructor</a></p>📤 Expected Output / Browser Rendered Result:
Clickable links for web navigation and email client opening.
Module 2: HTML Images (<img>) & Favicons Theory
Embedding graphic images and browser tab icons.
Core Theory & Principles
- <img> is a self-closing void tag requiring src and alt attributes.
- alt attribute provides textual replacement if image fails to load (essential for accessibility and SEO).
- width and height specify pixel dimensions preventing layout shifts.
- Favicon added in <head> via <link rel="icon" type="image/x-icon" href="favicon.ico">.
Practical Key Takeaways
Mastering HTML Images (<img>) & Favicons Theory builds fundamental development capability. Review practical code and outputs carefully.
💻 Practical Code Example - HTML Images (<img>) & Favicons Theory
<img src="https://via.placeholder.com/300x200" alt="Chania City Landscape" width="300" height="200" style="border-radius: 8px;">📤 Expected Output / Browser Rendered Result:
Image rendered with 300x200 dimensions and rounded corners.