📑 Table of Contents

• Introduction
• Understanding File Paths
• Types of File Paths
• Relative Path
• Absolute Path
• Why Use Boilerplate Code
• UTF-8
• ASCII Values
• Why Use UTF-8
• div tag
• class & id
• Header, Main & Footer

1. Introduction

Jab hum HTML, CSS, JS ya kisi bhi web development kaam karte hain, toh hume files (HTML, CSS, images, JS scripts) ko link karna padta hai. Ye tabhi sahi chalti hain jab hum unke file paths (rasta) ko sahi likhte hain. Saath hi boilerplate code, encoding (UTF-8), aur semantic tags ka bhi use hota hai.

Understanding File Paths

File path ka matlab hota hai: file tak pahunchne ka address.
Jaise tumhare ghar ka address hota hai, waise hi system mein ek file ko dhoondhne ka address hota hai.

Types of File Paths

Do main types hote hain:

1. Relative Path
2. Absolute Path

Relative Path

Ye file ka address current HTML file ke respect (relative) hota hai.

Example - img src="images/logo.png">

Matlab HTML file ke folder ke andar images naam ka folder hai, aur usme logo.png image hai.

Absolute Path

Absolute path ka matlab hai poora address, jisme drive ya domain name bhi aata hai.

Internet par jab kisi external file ko use karna ho (jaise CDN, image URL), tab absolute path use hota hai.

Why Use Boilerplate Code

Boilerplate code ka matlab hai ready-made starting template.

Har baar HTML likhte waqt same basic structure type karne ki jagah ek boilerplate use karte hain.

UTF-8

UTF-8 ek character encoding system hai.

Ye batata hai ki computer characters (A, B, 1, @, emoji 😃) ko kaise samjhe.

ASCII Values

ASCII ek purana system hai jo sirf 0–127 numbers tak characters ko encode karta tha.

example A = 65, B = 66, a = 97.

Limitation: Sirf English alphabets aur kuch symbols ko hi support karta tha.

Why Use UTF-8

UTF-8 duniya ki sabhi languages aur emoji tak ko support karta hai

Isiliye meta charset="UTF-8"> likha jata hai HTML head me.

div tag

div ek container hai jo content ko group karta hai.

Ye non-semantic hota hai (matlab iska koi special meaning nahi hota).
Mostly layout banane ke liye use hota hai.

class & id

class

class: Ek naam jo multiple elements ko style ya target karne ke liye use hota hai.

Id

id: Ek unique naam (sirf ek element ke liye).

Semantic

Ye semantic tags hain:

• header>: Top section (logo, nav bar, title).
• main>: Page ka main content.
• footer>: Bottom section (copyright, links).