🟢 Foundation · Lesson 02

HTML Editors and First File

HTML Editors और पहली File

What Do You Need? (spoiler: nothing new)

HTML needs only two things, and both are already on your computer: 1) a text editor (even Notepad works) to write the code, and 2) a browser (Chrome/Edge/Firefox) to see the result. No compiler, no installation, no internet required. This is why HTML gives the fastest first result of any language.

Method 1: Notepad — first page in 2 minutes

Step 1: Open Notepad (Windows key → type "notepad" → Enter).

Step 2: Type this:

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>I made this page myself.</p>
</body>
</html>

Step 3: File → Save As → filename: index.html → "Save as type": All Files → Save on Desktop.

Step 4: Double-click the file on Desktop — it opens in your browser:

Hello World! (big heading) I made this page myself.

The one step everyone gets wrong: in Notepad's Save dialog, if "Save as type" stays on Text Documents (*.txt), the file silently becomes index.html.txt and opens in Notepad, not the browser. Always switch to All Files before saving.

Method 2: VS Code — the editor you will actually use

Notepad proves the point; VS Code (free, by Microsoft) is what real developers use. Download from code.visualstudio.com → install with default options.

Step	Action
1	File → Open Folder → create/select a folder like `my-website`
2	New File icon → name it `index.html`
3	Type `!` and press Tab → full HTML skeleton appears automatically (Emmet shortcut!)
4	Write inside <body>, save with Ctrl+S

VS Code gives you colour-coded tags, auto-closing tags, and error hints — like writing with a teacher looking over your shoulder.

Live Server — see changes instantly

Extensions icon (left bar) → search "Live Server" → Install → then right-click your index.html → "Open with Live Server".

Now every time you press Ctrl+S, the browser refreshes itself automatically. Change a heading → save → watch it update instantly. This edit-save-see loop is exactly how you will work for the rest of this tutorial, so set it up now.

4 beginner mistakes to avoid from day one

.txt trap: file must END with .html — check the extension if the page opens in Notepad.
Spaces in filenames: use about-us.html, never about us.html — spaces break links later.
Capital letters: keep filenames lowercase (index.html, not Index.HTML) — web servers are case-sensitive, Windows is not, and that mismatch bites at upload time.
Homepage name: the main file is always index.html — servers open it automatically when someone visits your site.

क्या-क्या चाहिए? (spoiler: कुछ नया नहीं)

HTML को सिर्फ दो चीज़ें चाहिए, और दोनों आपके computer में पहले से हैं: 1) एक text editor (Notepad भी चलेगा) code लिखने के लिए, और 2) एक browser (Chrome/Edge/Firefox) result देखने के लिए. न compiler, न installation, न internet. इसीलिए HTML किसी भी language का सबसे तेज़ पहला result देता है.

तरीका 1: Notepad — 2 minute में पहला page

Step 1: Notepad खोलिए (Windows key → "notepad" लिखिए → Enter).

Step 2: यह type कीजिए:

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>I made this page myself.</p>
</body>
</html>

Step 3: File → Save As → filename: index.html → "Save as type": All Files → Desktop पर Save.

Step 4: Desktop पर file को double-click कीजिए — browser में खुलेगी:

Hello World! (बड़ी heading) I made this page myself.

वह एक step जहां सब गलती करते हैं: Notepad के Save dialog में "Save as type" अगर Text Documents (*.txt) पर रहा, तो file चुपचाप index.html.txt बन जाती है और browser की जगह Notepad में खुलती है. Save से पहले हमेशा All Files चुनिए.

तरीका 2: VS Code — जो editor आप असल में use करेंगे

Notepad बात साबित करता है; VS Code (free, Microsoft का) वह है जो असली developers use करते हैं. code.visualstudio.com से download → default options से install.

Step	Action
1	File → Open Folder → `my-website` जैसा folder बनाकर चुनिए
2	New File icon → नाम दीजिए `index.html`
3	`!` type करके Tab दबाइए → पूरा HTML skeleton अपने आप आ जाता है (Emmet shortcut!)
4	<body> के अंदर लिखिए, Ctrl+S से save

VS Code आपको रंगीन tags, अपने आप बंद होते tags और error hints देता है — जैसे कोई teacher कंधे के पीछे से देखते हुए लिखवा रहा हो.

Live Server — बदलाव तुरंत देखिए

Extensions icon (बाईं पट्टी) → "Live Server" search → Install → फिर अपनी index.html पर right-click → "Open with Live Server".

अब हर बार Ctrl+S दबाते ही browser खुद refresh हो जाएगा. Heading बदलिए → save → तुरंत update देखिए. यही edit-save-see loop आगे पूरे tutorial में आपका काम करने का तरीका होगा, इसलिए अभी set कर लीजिए.

पहले दिन से बचने वाली 4 गलतियां

.txt trap: file का अंत .html से होना ज़रूरी — page Notepad में खुले तो extension check कीजिए.
Filenames में spaces: about-us.html लिखिए, कभी about us.html नहीं — spaces आगे links तोड़ते हैं.
Capital letters: filenames lowercase रखिए (index.html, न कि Index.HTML) — web servers case-sensitive हैं, Windows नहीं, और यही mismatch upload के समय काटता है.
Homepage का नाम: main file हमेशा index.html — कोई आपकी site खोले तो server इसे अपने आप दिखाता है.

← Back to HTML Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.