Learn HTML in Hindi – Beginner to Website Creator Journey

Working with Links and Images in HTML

In this section, you'll learn how to use two key HTML elements: links and images.

HTML Links

Links allow users to navigate to other pages or websites.

Basic Example:

Other Examples:

HTML Images

Images make your website visually appealing.

Basic Example:

<img src="photo.jpg" alt="Sample Photo">

Other Examples:

<img src="logo.png" alt="Logo" width="200">

<img src="https://via.placeholder.com/150" alt="Placeholder">

Tips:

• Always use alt text for accessibility.

• Use href for links and src for images.

• You can also link an image using the <a> tag.

By mastering links and images, you'll add navigation and visual elements that improve your site’s usability and design.

Let me know if you want this formatted as a downloadable handout or slide!

Here are short notes on HTML lists including <ul>, <ol>, and <dl>:

Unordered List (<ul>)

• Displays a bulleted list.

• Each list item is defined with the <li> tag.

• Used when the order of items doesn't matter.

Example:

<ul>

  <li>Apple</li>

  <li>Banana</li>

  <li>Mango</li>

</ul>

Ordered List (<ol>)

• Displays a numbered list.

• Each item is defined with the <li> tag.

• Used when the order of items matters.

Example:

<ol>

  <li>Wake up</li>

  <li>Brush teeth</li>

  <li>Have breakfast</li>

</ol>

Description List (<dl>)

• Used for terms and their descriptions.

• <dt> defines the term, and <dd> defines the description.

Example:

<dl>

  <dt>HTML</dt>

  <dd>HyperText Markup Language</dd>

  <dt>CSS</dt>

  <dd>Cascading Style Sheets</dd>

</dl>

HTML Tables – Quick Notes

What is an HTML Table?

An HTML table is used to display data in rows and columns, much like a spreadsheet.

Basic Structure:

<table>

  <tr>       <!-- Table Row -->

    <th>Heading 1</th>   <!-- Table Header Cell -->

    <th>Heading 2</th>

  </tr>

  <tr>

    <td>Data 1</td>      <!-- Table Data Cell -->

    <td>Data 2</td>

  </tr>

</table>

Key Tags:

• <table> – Creates the table

• <tr> – Defines a row

• <th> – Defines a header cell (bold and centered by default)

• <td> – Defines a standard data cell

Optional Attributes:

• border: Adds a border to the table

  <table border="1">

  
  

• colspan: Merge cells horizontally

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

  
  

• rowspan: Merge cells vertically

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

  
  

Styling Tables:

Use CSS to style tables:

table {

  width: 100%;

  border-collapse: collapse;

}

th, td {

  border: 1px solid #ddd;

  padding: 8px;

}

Pro Tips:

• Always use <thead>, <tbody>, and <tfoot> for better structure and accessibility.

• Responsive tables can be achieved using CSS and media queries.

HTML <div> Element - Quick Notes

1. What is <div>?

• <div> stands for "division".

• It's a block-level container used to group HTML elements.

• Commonly used for layout and styling.

2. Why use <div>?

• Helps organize content.

• Works well with CSS and JavaScript.

• Makes web pages easier to structure and style.

3. Syntax:

<div>

  <!-- Your content here -->

</div>

4. Example Use:

<div class="header">

  <h1>Welcome to My Website</h1>

</div>

5. Styling with CSS:

<div class="box">Content</div>

<style>

  .box {

    width: 200px;

    padding: 20px;

    background-color: lightblue;

  }

</style>

6. Best Practices:

• Use classes or IDs for targeting (class="container", id="main").

• Avoid excessive nesting of <div>s (a.k.a. "div soup").

• Use semantic elements when possible (like <header>, <section>, etc.).

ID and Class in HTML

id Attribute

• The id attribute is used to uniquely identify a single HTML element.

• Each id must be unique within a page.

• It’s commonly used with CSS and JavaScript to apply styles or manipulate that specific element.

Example:

<p id="intro">Welcome to the course!</p>

In CSS:

#intro {

  color: blue;

  font-weight: bold;

}

class Attribute

• The class attribute is used to define a group of elements with the same style or behavior.

• Multiple elements can share the same class.

• An element can also have multiple classes.

Example:

<div class="card highlight">This is a card.</div>

In CSS:

.card {

  padding: 10px;

  border: 1px solid #ccc;

}

.highlight {

  background-color: yellow;

}

Key Differences:

Feature id class Uniqueness Unique per page Can be reused Selector in CSS #idName .className Purpose Target one element Target multiple elements

HTML Form Tags – Introduction

HTML forms are essential for collecting user input on websites. Whether you're signing up for a newsletter, submitting contact details, or completing a checkout process, HTML forms make it possible.

<form> Tag

The <form> tag defines the form itself. It acts as a container for all input elements.

<form action="/submit" method="post">

</form>

• action: URL where the form data is sent.

• method: HTTP method (GET or POST).

Common Input Tags

• <input> – Used for text fields, checkboxes, radio buttons, etc.

  <input type="text" name="username">

  
  

• <textarea> – For multi-line text input.

  <textarea name="message"></textarea>

  
  

• <select> and <option> – For dropdowns.

  <select name="country">

    <option value="IN">India</option>

    <option value="US">USA</option>

  </select>

  
  

• <button> – For form submission or actions.

  <button type="submit">Submit</button>

  
  

Input Types Examples

• Text: <input type="text">

• Email: <input type="email">

• Password: <input type="password">

• Checkbox: <input type="checkbox">

• Radio: <input type="radio">

• File: <input type="file">

• Date: <input type="date">

Tip:

Always use the name attribute—it ensures the input value is included in the submitted data.

Multimedia in HTML – Short Description

Multimedia in HTML allows you to add audio, video, and images to make web pages more interactive and engaging.
Using simple tags like <img>, <audio>, and <video>, you can easily display media content without using any external software or plugins.

• Use <img> to show pictures.

• Use <audio> to play sound files (like MP3).

• Use <video> to show video clips with controls.

These tags support multiple formats and attributes like controls, autoplay, and loop, making it easy to manage playback.

Multimedia makes your website come alive and improves user experience.

Let me know if you want a Hindi version or need examples included too!

<iframe> in HTML

The <iframe> tag is used to embed another web page inside the current HTML page.

Use it for:

• Embedding websites

• YouTube videos

• Google Maps

Example:

<iframe src="https://www.google.com" width="600" height="400"></iframe>

<embed> in HTML

The <embed> tag is used to embed multimedia files or other external content like PDFs, videos, or Flash files.

Use it for:

• PDF documents

• HTML or SVG content

• Audio/Video (rare now; better to use <audio> or <video>)

Example:

<embed src="file.pdf" width="600" height="400" type="application/pdf">

Difference Between <iframe> and <embed>

Feature <iframe> <embed> Purpose Embeds a web page Embeds media or external files Common Use YouTube, Google Maps PDFs, Flash (old use), media Customization Highly customizable with CSS & JS Limited customization HTML5 Support Fully supported Supported but replaced by <video>/<audio> for media

Tip for Beginners:

• Use <iframe> when you want to show a web page inside a page.

• Use <embed> when you want to show a file like PDF or multimedia.

What are HTML Entities and Symbols?

HTML Entities are special codes used to display characters that have reserved meaning in HTML or cannot be typed directly using a keyboard.

For example, if you type < in HTML, the browser might think you're starting a tag. To show it as a symbol, you use:

&lt;  <!-- displays as < -->

Common HTML Entities:

Symbol Entity Code Meaning < &lt; Less than > &gt; Greater than & &amp; Ampersand " &quot; Double quote ' &apos; Single quote © &copy; Copyright ® &reg; Registered mark ₹ &#8377; Indian Rupee

Why Use HTML Entities?

• To display reserved characters like <, >, or &

• To show special symbols like currency (₹, $, €, ¥)

• To make content more readable and safe

Example in HTML:

<p>5 &lt; 10 is a true statement.</p>

<p>Copyright &copy; 2025 Kamlesh</p>

What are HTML Meta Tags?

Meta tags are special tags placed inside the <head> section of an HTML page.
They don’t appear on the web page, but they give information about the page to search engines, browsers, and other services.

Common Uses of Meta Tags:

? Example Meta Tags in HTML:

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta name="description" content="Learn JavaScript from scratch in Hindi.">

  <meta name="author" content="Kamlesh Kumar Jangir">

  <title>My HTML Page</title>

</head>

<body>

  <!-- Page content here -->

</body>

</html>

Why Meta Tags Matter?

• Help improve SEO (Search Engine Optimization)

• Make websites mobile responsive

• Control how your site appears on Google or social media

• Help browsers understand your content better

Here's a basic product catalog page and a single product page written in pure HTML and CSS. These are perfect for beginners and can be expanded into full eCommerce websites later.