HTML TUTORIAL IN DETAIL STEP BY STEP || FULL COURSE OF HTML TO BULIT A WEBPAGE

AI WITH ANSHU Thursday, May 29, 2025
HTML TUTORIAL IN DETAIL STEP BY STEP || FULL COURSE OF HTML TO BULIT A WEBPAGE


Module 1: Introduction to HTML

✅ 1. What is HTML?

HTML stands for HyperText Markup Language.
It is used to create the structure of webpages using elements like headings, paragraphs, links, images, etc.

  • HyperText = Text with links.
  • Markup Language = Uses tags to define elements.

✅ 2. Basic Structure of an HTML Document

<!DOCTYPE html>
<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first HTML page.</p>
  </body>
</html>

Explanation:

  • <!DOCTYPE html> → Tells the browser this is an HTML5 document.
  • <html> → The root element of the page.
  • <head> → Contains page metadata like title, CSS, scripts.
  • <title> → Title of the page shown in the browser tab.
  • <body> → Main content shown on the screen.

✅ 3. Headings and Paragraphs

Headings:

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Sub-sub Heading</h3>

HTML has 6 heading levels: <h1> (largest) to <h6> (smallest).

Paragraph:

<p>This is a paragraph of text.</p>

✅ 4. Line Breaks and Horizontal Lines

Line Break:

<p>This is first line.<br>This is second line.</p>

Horizontal Line:

<hr>

Creates a horizontal rule across the page.

✅ 5. Comments in HTML

<!-- This is a comment -->
<p>This is visible content.</p>

Comments are not displayed in the browser.

🎯 Practice Task:

Try typing this in https://jsfiddle.net or any online HTML editor:

<!DOCTYPE html>
<html>
  <head>
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to HTML</h1>
    <p>This is a paragraph.</p>
    <hr>
    <p>Another line <br> with a break.</p>
    <!-- This is a comment -->
  </body>
</html>

📄 Module 2: Formatting and Text Elements in HTML

In this module, you’ll learn how to style and format text using simple HTML tags.

✅ 1. Bold, Italic, and Underline

🔹 Bold Text:

<b>This is bold text</b>

🔹 Italic Text:

<i>This is italic text</i>

🔹 Underlined Text:

<u>This is underlined text</u>

💡 Note: Modern HTML prefers <strong> for bold and <em> for italic, especially for accessibility.

<strong>This is important (bold)</strong>
<em>This is emphasized (italic)</em>

✅ 2. Superscript and Subscript

🔹 Superscript (like powers):

<p>10<sup>2</sup> = 100</p>

🔹 Subscript (like chemical formulas):

<p>H<sub>2</sub>O is water</p>

✅ 3. Preformatted Text

Preserves spaces and line breaks exactly as typed.

<pre>
  This    is
    preformatted
      text.
</pre>

📝 Use it to display code or aligned text blocks.

✅ 4. Quotation Tags

🔹 Block Quote (big quote):

<blockquote>
  "The best way to get started is to quit talking and begin doing."
</blockquote>

It indents the quoted text.

🔹 Inline Quote:

<p>He said, <q>Practice makes perfect.</q></p>

🎯 Practice Task:

Try this code in an online editor:

<!DOCTYPE html>
<html>
  <head>
    <title>Formatting Example</title>
  </head>
  <body>
    <h1>Text Formatting in HTML</h1>
    
    <p><b>Bold Text</b>, <i>Italic Text</i>, <u>Underlined Text</u></p>
    
    <p>Water Formula: H<sub>2</sub>O</p>
    <p>Area Formula: A = l<sup>2</sup></p>
    
    <pre>
      Code Example:
      for i in range(5):
          print("Hello")
    </pre>
    
    <blockquote>“Be the change that you wish to see in the world.”</blockquote>
    <p><q>This is a short quote inside a paragraph.</q></p>
  </body>
</html>


🔗 Module 3: Links and Images in HTML

This module teaches you how to add hyperlinks and images to your webpage — two essential elements of any modern site.

✅ 1. Anchor Tag – <a> (Links)

The <a> tag is used to create links.

<a href="https://www.google.com">Visit Google</a>
  • href → Specifies the URL of the page.
  • The clickable text is placed between the <a> and </a>.

Open link in new tab:

<a href="https://www.google.com" target="_blank">Open Google in new tab</a>

target="_blank" opens the link in a new browser tab.

✅ 2. Linking to Other Pages (Internal Links)

<a href="about.html">Go to About Page</a>

This is useful when you're linking to another HTML file in the same project.


✅ 3. Image Tag – <img>

The <img> tag is used to display an image.

<img src="image.jpg" alt="A beautiful scene">
  • src → The path to the image (URL or file name).
  • alt → Alternate text (shown if image doesn't load or for screen readers).

Example with size:

<img src="https://via.placeholder.com/150" alt="Sample" width="150" height="150">

✅ 4. Clickable Image (Image as a Link)

<a href="https://www.google.com">
  <img src="https://via.placeholder.com/100" alt="Google Logo">
</a>

🎯 Practice Task

Try this example in an HTML editor:

<!DOCTYPE html>
<html>
  <head>
    <title>Links and Images</title>
  </head>
  <body>
    <h1>Learn Links and Images</h1>

    <p><a href="https://www.wikipedia.org" target="_blank">Visit Wikipedia</a></p>

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

    <h2>Clickable Image:</h2>
    <a href="https://www.google.com" target="_blank">
      <img src="https://via.placeholder.com/100" alt="Google">
    </a>
  </body>
</html>


📷 Module 4: Multimedia in HTML

Learn how to add audio, video, and YouTube embeds to your webpage.

✅ 1. Audio Tag – <audio>

Used to embed sound/music in a webpage.

<audio controls>
  <source src="audio-file.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
  • controls shows the play/pause buttons.
  • You can add multiple <source> tags for different formats (.ogg, .mp3).

Example:

<audio controls>
  <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>

✅ 2. Video Tag – <video>

Used to add videos to your webpage.

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Autoplay, Loop, and Mute:

<video width="320" height="240" controls autoplay loop muted>
  <source src="video.mp4" type="video/mp4">
</video>

✅ 3. Embed a YouTube Video

Use the <iframe> tag:

<iframe width="560" height="315" 
  src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
  title="YouTube video player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen>
</iframe>

🔹 Change the src URL to embed any video from YouTube.

🎯 Practice Code:

<!DOCTYPE html>
<html>
  <head>
    <title>Multimedia Example</title>
  </head>
  <body>
    <h1>HTML Multimedia</h1>

    <h2>Audio:</h2>
    <audio controls>
      <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
    </audio>

    <h2>Video:</h2>
    <video width="320" height="240" controls>
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    </video>

    <h2>YouTube Video:</h2>
    <iframe width="560" height="315" 
      src="https://www.youtube.com/embed/tgbNymZ7vqY" 
      title="YouTube Video" 
      frameborder="0" allowfullscreen>
    </iframe>
  </body>
</html>


🧱 Module 5: Lists in HTML

Lists are used to display a collection of related items. HTML supports 3 types of lists:

✅ 1. Ordered List – <ol>

Displays items in a numbered sequence (1, 2, 3…).

<ol>
  <li>Wake up</li>
  <li>Brush teeth</li>
  <li>Take bath</li>
</ol>

Change number type:

<ol type="A">
  <li>Option A</li>
  <li>Option B</li>
</ol>

Other types:

  • 1 (default),
  • A, a (Upper/Lower Alpha),
  • I, i (Roman numerals)

✅ 2. Unordered List – <ul>

Displays items with bullets.

<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Butter</li>
</ul>

Change bullet style:

<ul style="list-style-type: square;">
  <li>Pen</li>
  <li>Paper</li>
</ul>

Other styles:

  • disc (default),
  • circle,
  • square,
  • none

✅ 3. Definition List – <dl>

Used for definitions like in a dictionary or glossary.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>
  • <dt> = Definition Term
  • <dd> = Definition Description

✅ Nested Lists (List inside a List)

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Mango</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

🎯 Practice Example:

<!DOCTYPE html>
<html>
<head>
  <title>HTML Lists</title>
</head>
<body>

  <h1>List Examples</h1>

  <h2>Ordered List</h2>
  <ol type="I">
    <li>Start computer</li>
    <li>Open browser</li>
    <li>Visit website</li>
  </ol>

  <h2>Unordered List</h2>
  <ul style="list-style-type: square;">
    <li>Tea</li>
    <li>Coffee</li>
    <li>Juice</li>
  </ul>

  <h2>Definition List</h2>
  <dl>
    <dt>HTTP</dt>
    <dd>Hypertext Transfer Protocol</dd>
    <dt>URL</dt>
    <dd>Uniform Resource Locator</dd>
  </dl>

</body>
</html>


📐 Module 6: Tables in HTML

Tables are used to organize data in rows and columns, like in Excel.

✅ 1. Basic Table Structure

<table>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>
  • <table> – defines the table.
  • <tr> – table row.
  • <td> – table data/cell.

✅ 2. Table Headings – <th>

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>25</td>
  </tr>
</table>
  • <th> makes the cell bold and centered by default.

✅ 3. Table Borders

<table border="1">
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Pen</td>
    <td>10</td>
  </tr>
</table>

Or using CSS:

<table style="border: 1px solid black; border-collapse: collapse;">
  <tr>
    <th style="border: 1px solid black;">Item</th>
    <th style="border: 1px solid black;">Price</th>
  </tr>
  <tr>
    <td style="border: 1px solid black;">Pencil</td>
    <td style="border: 1px solid black;">5</td>
  </tr>
</table>

✅ 4. Rowspan and Colspan

Merge columns:

<td colspan="2">Merged Columns</td>

Merge rows:

<td rowspan="2">Merged Rows</td>

🎯 Practice Table:

<!DOCTYPE html>
<html>
<head>
  <title>HTML Table</title>
</head>
<body>

  <h1>Student Details</h1>

  <table border="1">
    <tr>
      <th>Name</th>
      <th>Class</th>
      <th>Marks</th>
    </tr>
    <tr>
      <td>Amit</td>
      <td>10</td>
      <td>85</td>
    </tr>
    <tr>
      <td>Sita</td>
      <td>10</td>
      <td>92</td>
    </tr>
  </table>

  <h2>Merged Cells Example</h2>
  <table border="1">
    <tr>
      <th colspan="2">Combined Heading</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </table>

</body>
</html>


📝 Module 7: Forms in HTML

HTML forms allow users to enter data like names, emails, passwords, etc., and submit it to a server.

✅ 1. Form Tag – <form>

<form action="submit.php" method="post">
  <!-- Form elements go here -->
</form>
  • action: URL where form data is sent.
  • method: GET or POST (usually use POST for sensitive data).

✅ 2. Input Types

🔹 Text Field:

<input type="text" name="username" placeholder="Enter your name">

🔹 Password Field:

<input type="password" name="password" placeholder="Enter password">

🔹 Email Field:

<input type="email" name="email" placeholder="Enter email">

🔹 Number Field:

<input type="number" name="age" placeholder="Enter age">

🔹 Date Picker:

<input type="date" name="dob">

✅ 3. Radio Buttons

Allow only one option to be selected.

<p>Gender:</p>
<input type="radio" name="gender" value="male"> Male  
<input type="radio" name="gender" value="female"> Female

✅ 4. Checkboxes

Allow multiple selections.

<p>Hobbies:</p>
<input type="checkbox" name="hobby" value="music"> Music  
<input type="checkbox" name="hobby" value="sports"> Sports

✅ 5. Dropdown (Select Box)

<select name="country">
  <option value="india">India</option>
  <option value="usa">USA</option>
</select>

✅ 6. Textarea (Multiline Input)

<textarea name="message" rows="4" cols="30">Enter your message...</textarea>

✅ 7. Submit and Reset Buttons

<input type="submit" value="Submit">
<input type="reset" value="Reset">

🎯 Practice Form:

<!DOCTYPE html>
<html>
<head>
  <title>HTML Form Example</title>
</head>
<body>

  <h1>Registration Form</h1>

  <form action="#" method="post">

    <label>Name:</label>
    <input type="text" name="name" placeholder="Enter your name"><br><br>

    <label>Password:</label>
    <input type="password" name="password"><br><br>

    <label>Email:</label>
    <input type="email" name="email"><br><br>

    <label>Gender:</label>
    <input type="radio" name="gender" value="male"> Male
    <input type="radio" name="gender" value="female"> Female<br><br>

    <label>Hobbies:</label>
    <input type="checkbox" name="hobby" value="reading"> Reading
    <input type="checkbox" name="hobby" value="traveling"> Traveling<br><br>

    <label>Country:</label>
    <select name="country">
      <option value="india">India</option>
      <option value="usa">USA</option>
    </select><br><br>

    <label>Message:</label><br>
    <textarea name="message" rows="4" cols="40"></textarea><br><br>

    <input type="submit" value="Submit">
    <input type="reset" value="Reset">

  </form>

</body>
</html>


🧩 Module 8: HTML Semantic Elements

Semantic HTML introduces elements that clearly describe their meaning to both the browser and developers. It helps with SEO, accessibility, and better code structure.

✅ 1. What is Semantic HTML?

Semantic elements clearly define their purpose.
For example:

Non-Semantic Semantic
<div id="header"> <header>
<div id="nav"> <nav>
<div id="content"> <main>
<div id="footer"> <footer>

✅ 2. Common Semantic Tags

Tag Purpose
<header> Top section of a page (logo, title, etc.)
<nav> Navigation links
<main> Main content of the document
<article> Independent article/content (e.g. blog)
<section> Thematic section within a page
<aside> Side content like ads or tips
<footer> Bottom area (copyright, links, etc.)
<figure> & <figcaption> Image with caption

✅ 3. Example Page with Semantic HTML

<!DOCTYPE html>
<html>
<head>
  <title>Semantic HTML Example</title>
</head>
<body>

  <header>
    <h1>My Website</h1>
    <p>Welcome to my awesome site!</p>
  </header>

  <nav>
    <a href="#">Home</a> |
    <a href="#">About</a> |
    <a href="#">Contact</a>
  </nav>

  <main>
    <section>
      <h2>About Me</h2>
      <p>I am learning HTML step by step.</p>
    </section>

    <article>
      <h2>Blog Post Title</h2>
      <p>This is a blog post example using semantic HTML.</p>
    </article>

    <aside>
      <h4>Tip:</h4>
      <p>Use semantic tags for better SEO!</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 Learn With Anshu. All rights reserved.</p>
  </footer>

</body>
</html>

🎯 Why Use Semantic HTML?

✅ Improves SEO
✅ Better for screen readers
✅ Clean, readable code
✅ Helps browsers and developers understand layout


🔳 Module 9: HTML Block vs Inline Elements

Understanding the difference between block-level and inline-level elements is essential for proper webpage layout and design.

✅ 1. Block-Level Elements

  • Start on a new line
  • Take up full width of the parent container
  • Can contain other block and inline elements

Examples:

  • <div>
  • <p>
  • <h1> to <h6>
  • <section>, <article>, <header>, <footer>
  • <ul>, <ol>, <li>
  • <form>
  • <table>

Example:

<p>This is a paragraph (block element)</p>
<div>This is a div (block element)</div>

✅ 2. Inline-Level Elements

  • Do not start on a new line
  • Take up only as much width as needed
  • Can contain text or other inline elements

Examples:

  • <span>
  • <a>
  • <img>
  • <strong>, <em>, <b>, <i>
  • <label>
  • <input>

Example:

<span>This is a span (inline element)</span>
<a href="#">Click me (inline link)</a>

✅ 3. Visual Difference

<div style="background:lightblue;">Block Element</div>
<span style="background:lightgreen;">Inline Element</span>

The div will take the full width, while the span only wraps the text.

✅ 4. Custom Example Mixing Both

<!DOCTYPE html>
<html>
<head>
  <title>Block vs Inline</title>
</head>
<body>

  <h2>Block Elements</h2>
  <div style="background-color: lightcoral;">This is a DIV</div>
  <p style="background-color: lightblue;">This is a Paragraph</p>

  <h2>Inline Elements</h2>
  <p>This is a <span style="color: red;">SPAN</span> inside a paragraph.</p>
  <p>Click <a href="#">here</a> to visit.</p>

</body>
</html>

🎯 Quick Summary

Block Elements Inline Elements
Start on a new line   Stay in same line
Take full width Take only needed width
Can have any content Usually text or small elements


🌐 Module 10: HTML Iframe and Embeds

This module teaches how to embed other web pages, videos, maps, or content into your HTML page.

✅ 1. <iframe> – Embed Another Web Page

The <iframe> tag is used to embed another webpage within your webpage.

<iframe src="https://example.com" width="600" height="400"></iframe>
  • src: URL of the page you want to embed.
  • width and height: Set the size of the frame.

Example:

<iframe src="https://www.wikipedia.org" width="800" height="500"></iframe>

✅ 2. YouTube Video Embed Example

To add a YouTube video:

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  frameborder="0"
  allowfullscreen>
</iframe>

You can get this code directly from the YouTube "Share > Embed" option.

✅ 3. Google Maps Embed Example

To embed a location:

<iframe
  src="https://www.google.com/maps/embed?pb=..."
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen
  loading="lazy">
</iframe>

Get the full embed code from Google Maps → Share → Embed a Map

✅ 4. Other Embeds – Audio and Video

🎵 Embed Audio

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

📹 Embed Video

<video width="400" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

🎯 Practice Example

<!DOCTYPE html>
<html>
<head>
  <title>Embedding Examples</title>
</head>
<body>

  <h2>Embedded Webpage</h2>
  <iframe src="https://www.example.com" width="600" height="300"></iframe>

  <h2>YouTube Video</h2>
  <iframe width="560" height="315"
    src="https://www.youtube.com/embed/tgbNymZ7vqY"
    frameborder="0" allowfullscreen>
  </iframe>

  <h2>Audio</h2>
  <audio controls>
    <source src="audio.mp3" type="audio/mpeg">
  </audio>

  <h2>Video</h2>
  <video width="400" controls>
    <source src="movie.mp4" type="video/mp4">
  </video>

</body>
</html>


AI WITH ANSHU

Posted by AI WITH ANSHU