HTML Adventure with Rohit Negi Sir

Introduction to HTML Lists

Lists are used to group related items together in a structured format. HTML supports two main types of lists:

Ordered Lists – items are numbered.
Unordered Lists – items are marked with bullets.

Types of Lists (Ordered & Unordered)

Unordered List <ul>

Items are displayed with bullet points.


    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
     </ul>

Ordered List <ol>

Items are displayed with bullet points.


                <ol>
              <li>Step One</li>
              <li>Step Two</li>
              <li>Step Three</li>
                </ol>

Creating Hyperlinks

Hyperlinks allow navigation between pages or websites.
The anchor tag <a> is used.


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

href → specifies the destination URL.
Text between <a>...</a> is clickable.

Adding Comments in HTML

Comments are notes inside code that the browser ignores.


            <!-- This is a comment -->
            <p>Hello World</p>

Useful for leaving instructions or explanations.

The Anchor Tag (<a>)

The anchor tag is the base for hyperlinks.


            <a href="page2.html">Go to Page 2</a>

It supports multiple attributes: - href → link destination. - target="_blank" → opens in a new tab. - title="..." → shows tooltip when hovered.


            <a href="https://youtube.com" target="_blank" title="Visit YouTube">
              YouTube
            </a>

Attributes Explained

Attributes provide extra information about HTML elements.

Examples:

src (image source)
alt (image description)
href (link destination)
id / class (styling hooks in CSS)

General format:


            <tagname attribute="value">Content</tagname>

Adding Images (<img>)

Images are added using the <img> tag.
It is self-closing.


            <img src="flower.jpg" alt="A red flower" width="300" height="200">

- src → path to the image file. - alt → alternate text if image fails to load (important for accessibility). - width & height → resize the image.

Mini Project

A simple webpage combining lists, links, and an image.


<!DOCTYPE html>
<html>
<head>
  <title>Mini Project</title>
</head>
<body>
  <h2>My Favorite Websites</h2>
  <ul>
    <li><a href="https://google.com" target="_blank">Google</a></li>
    <li><a href="https://wikipedia.org" target="_blank">Wikipedia</a></li>
    <li><a href="https://youtube.com" target="_blank">YouTube</a></li>
  </ul>

  <h2>My Favorite Image</h2>
  <img src="nature.jpg" alt="Nature View" width="400">
</body>
</html>