HTML Tutorial

➤ HTML HOME
➤ HTML Introduction
➤ HTML Editors
➤ HTML Basic
➤ HTML Elements
➤ HTML Attributes
➤ HTML Headings
➤ HTML Paragraphs
➤ HTML Styles
➤ HTML Formatting
➤ HTML Quotations
➤ HTML Comments
➤ HTML Colors
➤ HTML CSS
➤ HTML Links
➤ HTML Images
➤ HTML Favicon
➤ HTML Tables
➤ HTML Lists
➤ HTML Block & Inline
➤ HTML Div
➤ HTML Classes
➤ HTML Id
➤ HTML Iframes
➤ HTML JavaScript
➤ HTML File Paths
➤ HTML Head
➤ HTML Layout
➤ HTML Responsive
➤ HTML Computercode
➤ HTML Semantics
➤ HTML Style Guide
➤ HTML Entities
➤ HTML Symbols
➤ HTML Emojis
➤ HTML Charset
➤ HTML URL Encode
➤ HTML vs. XHTML

HTML Forms

➤ HTML Forms
➤ HTML Form Attributes
➤ HTML Form Elements
➤ HTML Input Types
➤ HTML Input Attributes
➤ HTML Input Form Attributes

HTML Graphics

➤ HTML Canvas
➤ HTML SVG

HTML Media

➤ HTML Media
➤ HTML Video
➤ HTML Audio
➤ HTML Plug-ins
➤ HTML YouTube

HTML APIs

➤ HTML Geolocation
➤ HTML Drag/Drop
➤ HTML Web Storage
➤ HTML Web Workers
➤ HTML SSE

HTML Examples & Tools

➤ HTML Examples
➤ HTML Editor
➤ HTML Quiz
➤ HTML Exercises
➤ HTML Bootcamp
➤ HTML Certificate

HTML Editors

HTML Editors – HTML लिखने का तरीका

 

📌 इस चैप्टर में आप सीखेंगे:-

 

  • HTML लिखने के लिए किन Editors का इस्तेमाल होता है

  • Notepad (Windows) और TextEdit (Mac) में HTML कैसे लिखें

  • HTML फाइल को सेव करना और ब्राउज़र में चलाना

  • .html और .htm में अंतर

  • W3Schools का Online Editor और Spaces का उपयोग कैसे करें

 

🔹 1. HTML Editor क्या होता है?

 

HTML Editor वो सॉफ्टवेयर होता है जिसकी मदद से आप HTML कोड लिख सकते हैं।

✅ आप दो तरीकों से HTML सीख और लिख सकते हैं:

➤ Professional Editors:-

 

  • Visual Studio Code (VS Code)

  • Sublime Text

  • Atom

  • Brackets

➤ Simple Text Editors (बेस्ट for Beginners):-

 

  • Notepad (Windows)

  • TextEdit (Mac)

⚠️ हम Learning के लिए Basic Editors का इस्तेमाल करने की सलाह देते हैं, ताकि आप HTML के Core Concepts को बिना किसी distraction के समझ सकें।

 

🪟 2. Notepad में HTML कैसे लिखें (Windows)

 

🔹 Step 1: Notepad Open करें

 

Windows 8 या बाद में:

  • Start बटन (Windows symbol) पर क्लिक करें, फिर “Notepad” टाइप करें

Windows 7 या पहले के वर्जन में:

  • Start > Programs > Accessories > Notepad

Step 2: HTML Code लिखें





 

🍎 3. TextEdit में HTML कैसे लिखें (Mac)

 

🔹 Step 1: TextEdit Open करें

 

  • Finder > Applications > TextEdit

🔹 Step 2: Preferences बदलें

 

  1. Format > Plain Text चुनें

  2. Open and Save में जाकर “Display HTML files as HTML code instead of formatted text” ✔️ करें

अब एक नया Document open करें और HTML code लिखें:

HTML Code लिखें





 

💾 4. HTML Page Save कैसे करें?

 

🔹 Step 3: Save करें

 

  1. File > Save As पर जाएं

  2. File का नाम रखें: index.html या index.htm

  3. Encoding चुनें: UTF-8 (यह HTML के लिए सबसे अच्छा है)

⚠️ .html और .htm दोनों Extensions valid हैं। कोई फर्क नहीं, बस .html ज़्यादा इस्तेमाल होता है।

 

🌐 5. HTML Page Browser में कैसे चलाएं?

 

  1. Saved HTML file पर Double Click करें
    या

  2. Right Click > “Open With” > अपने पसंदीदा Browser में खोलें

✅ अब आपका ब्राउज़र HTML को Parse करके Page Render कर देगा।

 

🔧 Step 6: SparkTechny Try It Editor में HTML Code कैसे चलाएं?

 

SparkTechny Try It Editor एक Online HTML Code Editor है जो खासकर Beginners और Students के लिए बनाया गया है। इसकी मदद से आप HTML, CSS, और JavaScript का Code लिख सकते हैं और तुरंत उसका Output देख सकते हैं — वो भी बिना किसी Software के।

🟢 Features of SparkTechny Try It Editor:

  • ✅ Live Output Preview

  • ✅ Real-time Code Execution

  • ✅ Syntax Highlighting (Colorful Code)

  • ✅ Easy to Use Interface

  • ✅ Shareable Code Snippets

  • ✅ कोई Installation की ज़रूरत नहीं

📌 Example Code:

 
 

👉 अब ऊपर दिया गया कोड आप सीधे SparkTechny Try It Editor में चला सकते हैं और तुरंत नतीजा देख सकते हैं।

🔗 SparkTechny Try It Editor Link:

 

🌐 https://sparktechny.com/html/editor (Example link for your platform)

 

🔄 कैसे करें उपयोग?

 

  1. ऊपर दिए गए Link पर क्लिक करें

  2. Code Editor में HTML Code लिखें

  3. नीचे दिए गए “Run” बटन पर क्लिक करें

  4. Output तुरंत नीचे दिखेगा — Just like a Browser!

 

🎯 SparkTechny Try It Editor उन Students के लिए Perfect है जो तेज़ी से HTML सीखना चाहते हैं और Code लिखते ही Output देखना चाहते हैं।

⚠️ यह Editor आपको बिना किसी Setup के कोड रन करने देता है — एकदम Zero Installation!

✅ Summary

FeatureNotepad (PC)TextEdit (Mac)SparkTechny Editor
Beginner Friendly✅✅✅
Code Highlighting❌❌✅
Save Locally✅✅❌ (online save only)
Live Output View❌❌✅

🧠 Top 5 MCQ Questions from this Chapter

 

  1. HTML files को किस Extension से Save किया जाता है?
    A. .doc
    B. .exe
    C. .html ✅
    D. .css

  2. Notepad का क्या उपयोग होता है?
    A. Word Processing
    B. HTML कोड लिखने के लिए ✅
    C. फोटो Editing
    D. विडियो Editing

  3. Mac पर कौन सा Editor HTML के लिए यूज़ होता है?
    A. Final Cut
    B. Xcode
    C. TextEdit ✅
    D. iTunes

  4. HTML का सही Encoding क्या है?
    A. ASCII
    B. UTF-16
    C. Binary
    D. UTF-8 ✅

  5. SparkTechny Try It Editor में क्या Advantage है?
    A. Ads देखने को मिलते हैं
    B. Live code output मिलता है ✅
    C. Files download होती हैं
    D. कोई feature नहीं है

 

🔚 Conclusion

 

इस चैप्टर के बाद आप HTML को शुरू से लिखने और Local या Online Platform पर रन करने के लिए तैयार हैं। अब आप अपना पहला HTML Page खुद बना सकते हैं।

Scroll to Top