HTML, CSS & JavaScript · Chapter 1.0 · Start Here level

Start Here: What is a Website? (Your first edit)

शुरुआत: वेबसाइट क्या है? (आपका पहला बदलाव)

A website is just a text file that a browser (Chrome, Edge) reads and turns into a page. The language of that file is HTML. On this page you have an editor (left — where you type) and a preview (right — what the browser shows). You don't need to install anything. Your only job today: change one word and press ▶ Run. That's coding!

वेबसाइट बस एक टेक्स्ट फ़ाइल है जिसे ब्राउज़र (Chrome, Edge) पढ़कर पेज बना देता है। उस फ़ाइल की भाषा है HTML। इस पेज पर बाईं तरफ़ एडिटर है (जहाँ आप लिखते हो) और दाईं तरफ़ प्रिव्यू (ब्राउज़र क्या दिखाएगा)। कुछ भी इंस्टॉल नहीं करना। आज का काम बस इतना: एक शब्द बदलो और ▶ Run दबाओ। यही कोडिंग है!

In the classroom you can run and edit this code in your browser, get hints and mark the chapter as done. क्लास में यह code ब्राउज़र में चलाकर बदल सकते हो।

Words and symbols in this chapter

Editor

The box where you type code (like a notebook).

वह डिब्बा जहाँ आप कोड लिखते हो (कॉपी जैसा)।

Preview / Browser

Shows what your code looks like as a real web page.

दिखाता है कि आपका कोड असली वेबपेज बनकर कैसा दिखेगा।

▶ Run

Tells the computer: "read my code now and show the result".

कंप्यूटर को कहता है: "अभी मेरा कोड पढ़ो और नतीजा दिखाओ"।

<h1> ... </h1>

A tag: words inside angle brackets that tell the browser what something is (here: a big heading).

टैग: < > के अंदर लिखे शब्द जो ब्राउज़र को बताते हैं कि यह क्या है (यहाँ: बड़ी हेडिंग)।

Ready example

<h1>Hello Duniya!</h1>
<p>Yeh meri pehli website hai.</p>

What you will see: Change any word in the editor and press ▶ Run — the page on the right changes instantly.

एडिटर में कोई भी शब्द बदलो और ▶ Run दबाओ — दाईं तरफ़ का पेज तुरंत बदल जाएगा।

Line by line

<h1>Hello Duniya!</h1>

Shows "Hello Duniya!" as a big heading.

"Hello Duniya!" को बड़ी हेडिंग में दिखाता है।

<p>Yeh meri pehli website hai.</p>

Shows a normal sentence (paragraph).

एक सामान्य वाक्य (पैराग्राफ) दिखाता है।

Common mistake

h1 Mera Naam h1

<h1>Mera Naam</h1>

Tags need angle brackets < > and the closing tag needs /.

टैग को < > ब्रैकेट चाहिए और बंद करने वाले टैग में / लगता है।

Your task

Replace Mera Naam with your own name inside <h1> and press ▶ Run.

<h1> के अंदर Mera Naam की जगह अपना नाम लिखो और ▶ Run दबाओ।

1. Click inside the editor on the words Mera Naam.
   एडिटर में Mera Naam शब्दों पर क्लिक करो।
2. Delete them and type your own name (keep <h1> and </h1> as they are).
   उन्हें मिटाकर अपना नाम लिखो (<h1> और </h1> वैसे ही रहने दो)।
3. Press ▶ Run & Live Preview and see your name on the page!
   ▶ Run & Live Preview दबाओ और पेज पर अपना नाम देखो!

<!-- Neeche "Mera Naam" ki jagah apna naam likho, phir ▶ Run dabao -->
<h1>Mera Naam</h1>
<p>Main coding seekh raha/rahi hun.</p>

Do this task in the classroom: your code is checked automatically and you get hints if something is missing.

Recap

• A website is an HTML text file that the browser turns into a page.
• Type in the editor, press ▶ Run, look at the preview.
• Changing code and re-running is how every coder learns.

• वेबसाइट एक HTML टेक्स्ट फ़ाइल है जिसे ब्राउज़र पेज बना देता है।
• एडिटर में लिखो, ▶ Run दबाओ, प्रिव्यू देखो।
• कोड बदलकर दोबारा चलाना — हर कोडर ऐसे ही सीखता है।

Quick quiz

Which program reads an HTML file and shows it as a web page?

कौन-सा प्रोग्राम HTML फ़ाइल पढ़कर वेबपेज दिखाता है?

1. Calculator
2. Browser (Chrome/Edge)
3. Paint
4. Keyboard

More practice at this level

• Fix the Cricket Score Page (closing tags) · Basic · Fix the bug
  क्रिकेट स्कोर पेज ठीक करो (closing tags)
• Predict: What Will the Page Show? · Basic · Predict the output
  बताओ: पेज पर क्या दिखेगा?
• Kirana Shop Signboard (h1 + p + list) · Basic · Write the code
  किराना दुकान का साइनबोर्ड (h1 + p + लिस्ट)

Solve them in the Practice Zone, where each answer is checked automatically and two hints are available.