📘 Day 4 – HTML Links, Images & Lists

📥 Want the Notes as PDF?

🔗 1. HTML Links – The `<a>` Tag

✅ Definition:

An HTML link (or hyperlink) allows users to navigate from one page to another, either within your website or to an external site.

✅ Syntax:

✅ Attributes:

href: Specifies the URL of the page the link goes to.
target="_blank": Opens the link in a new tab.
title: Adds a tooltip when hovering.

✅ Example:

✅ Use Case:

Used for menus, navigation bars, linking to other sites or documents (PDFs, downloads).

🖼️ 2. HTML Images – The `<img>` Tag

✅ Definition:

The <img> tag is used to display images on a webpage. It is a self-closing tag.

✅ Syntax:

✅ Attributes:

src: Path to the image file.
alt: Text shown when the image is not available.
width and height: Resize the image.

✅ Example:

✅ Use Case:

Used to visually enhance web pages, add logos, product images, etc.

📋 3. HTML Lists – Displaying Multiple Items

HTML supports 3 types of lists:

🔹 A. Unordered List (`<ul>`)

Displays items with bullets.

🔹 B. Ordered List (`<ol>`)

Displays items with numbers.

🔹 C. Description List (`<dl>`)

Used to list terms and definitions.

✅ Use Case:

<ul>: For navigation menus, feature lists.
<ol>: For step-by-step instructions, ranked items.
<dl>: For glossaries, FAQs.

🛠 Complete Example – Links, Images & Lists

<!DOCTYPE html>

<html>

<head>

  <title>Day 4 - Links, Images & Lists</title>

</head>

<body>

  <h1>Day 4: Links, Images & Lists</h1>

  <h2>1. Link to Google</h2>

  <a href="https://www.google.com" target="_blank">Visit Google</a>

  <h2>2. Display an Image</h2>

  <img src="https://via.placeholder.com/250" alt="Placeholder Image" width="250">

  <h2>3. Unordered List</h2>

  <ul>

    <li>Apple</li>

    <li>Banana</li>

    <li>Cherry</li>

  </ul>

  <h2>4. Ordered List</h2>

  <ol>

    <li>Login</li>

    <li>Learn HTML</li>

    <li>Build Websites</li>

  </ol>

  <h2>5. Description List</h2>

  <dl>

    <dt>Frontend</dt>

    <dd>The part of website you see and interact with.</dd>



    <dt>Backend</dt>

    <dd>The server-side logic and database handling.</dd>

  </dl>

</body>

</html>

✅ Key Takeaways

Use <a> to create clickable links.
Use <img> to display images.
Use <ul>, <ol>, and <dl> for listing content.
Always use alt with <img> for accessibility and SEO.
Lists and links are essential for structuring website content.

🧪 Practice Tasks

Create a web page with:
- One clickable link
- One image
- One list of your favorite 5 movies
Try combining all three elements into a single mini project page.

❓ Practice Questions

What is the difference between <ul> and <ol>?
What is the role of alt in an <img> tag?
Write the HTML code to open “https://example.com” in a new tab.
Create an unordered list of your 3 hobbies.
Explain the difference between <dl> and <ol> with an example.