Editors (Text & Code Editors) – NIELIT O Level (M2-R5)

इस section में हम सीखेंगे कि Editors क्या होते हैं, कैसे Notepad++, Sublime Text जैसे free editors को download किया जाता है, और उनका प्रयोग file creation, editing व saving के लिए कैसे किया जाता है। साथ ही हम useful shortcut keys और tips भी detail में समझेंगे जो web designing में efficiency बढ़ाते हैं।

🏠 Home 📘 Paid PDF 🧩 Mock Test

Chapter 1: Introduction to Web Design Chapter 2: Editors Chapter 3: HTML Basics Chapter 4: CSS Chapter 5: CSS Framework Chapter 6: JavaScript & AngularJS Chapter 7: Photo Editor Chapter 8: Web Publishing & Browsing

👉 Swipe to see more

1️⃣ What are Editors (एडिटर्स क्या हैं?)

Editor एक ऐसा software tool होता है जिसकी मदद से हम code या text files लिखते, edit करते और save करते हैं। Web designing में HTML, CSS, JavaScript files लिखने के लिए editors का प्रयोग किया जाता है।

🔹 Definition:

“An editor is a program used to create and modify text or source code files.”

सरल शब्दों में — Editor एक workspace है जहाँ हम अपने web page का code (जैसे HTML tags या CSS styles) लिखते हैं।

📘 Example: आप Windows में “Notepad” खोलकर HTML code लिख सकते हैं या “Notepad++”, “Sublime Text” जैसे editors में professional coding कर सकते हैं।

💡 Remember: Basic editors plain text editing के लिए होते हैं, जबकि code editors syntax highlighting, auto-completion और multi-file management जैसी सुविधाएँ देते हैं।

2️⃣ Types of Editors (एडिटर्स के प्रकार)

Editors को broadly दो categories में बाँटा जा सकता है:

Text Editors: Basic text-based editors जैसे Windows Notepad या TextEdit, जिनमें plain text coding की जाती है।
Code Editors: Advanced editors जैसे Notepad++, Sublime Text, VS Code — जो syntax highlighting, themes, plugins और multi-tab support देते हैं।

⚙️ Tip: Web development में हमेशा “code editors” का प्रयोग करें ताकि आप syntax errors आसानी से पहचान सकें।

3️⃣ Downloading Free Editors (फ्री एडिटर्स डाउनलोड करना)

🔹 Notepad++ Installation:

Visit official website – https://notepad-plus-plus.org
Latest version download करें (Windows installer).
Setup file run करें → “Next → Install”.
Installation के बाद “Notepad++” launch करें।

🔹 Sublime Text Installation:

Go to https://www.sublimetext.com
Windows/Linux/Mac के अनुसार installer चुनें।
Install करने के बाद Sublime Text open करें।

📘 Example: Notepad++ lightweight होता है और beginners के लिए perfect है। Sublime Text advanced users के लिए powerful features देता है जैसे “Goto Anything” और “Multiple Selection”.

4️⃣ Using Editors (एडिटर का उपयोग)

Editors का मुख्य कार्य HTML/CSS/JS जैसी files को create, edit और save करना है। नीचे एक example दिया गया है:


<!DOCTYPE html>
<html>
<head>
  <title>My First Page</title>
</head>
<body>
  <h1>Welcome to Web Design!</h1>
</body>
</html>

Steps:

Notepad++ या Sublime Text में ऊपर का code टाइप करें।
File → Save As → File Name: index.html
File Type: All Files चुनें और Encoding: UTF-8 रखें।
Browser (Chrome/Edge) में open करें।

💡 Remember: File extension का ध्यान रखें — HTML files हमेशा “.html” में और CSS “.css” में save की जाती हैं।

5️⃣ File Creation, Editing & Saving Process (फाइल बनाना, एडिट करना और सेव करना)

🔹 File Creation:

New File बनाने के लिए → Ctrl + N
HTML Template जल्दी insert करने के लिए snippets/plugins का प्रयोग करें।

🔹 Editing:

Syntax highlighting से errors पहचानें।
Find/Replace feature से bulk editing करें।
Multiple tabs से कई files एक साथ खोल सकते हैं।

🔹 Saving:

Ctrl + S → Save current file.
Ctrl + Shift + S → Save As (नया नाम से save करें)।
Encoding हमेशा “UTF-8” रखें ताकि special characters सही दिखें।

⚙️ Example: Suppose आपने "style.css" में background-color बदला → Ctrl + S दबाएँ → Browser refresh करें → तुरंत updated design दिखेगा।

6️⃣ Shortcut Keys (महत्वपूर्ण शॉर्टकट कीज)

🔹 Notepad++ Shortcut Keys:

Shortcut	Function
Ctrl + N	New file
Ctrl + O	Open existing file
Ctrl + S	Save file
Ctrl + F	Find text
Ctrl + H	Replace text
Ctrl + /	Comment/Uncomment line
Ctrl + Shift + ↑/↓	Move line up/down
Ctrl + D	Duplicate current line
Ctrl + W	Close current tab

🔹 Sublime Text Shortcut Keys:

Shortcut	Function
Ctrl + N	New File
Ctrl + Shift + P	Command Palette (run commands)
Ctrl + D	Select next same word (multi-cursor)
Ctrl + /	Comment line
Ctrl + Shift + D	Duplicate line
Ctrl + P	Goto Anything (file, symbol, line)
Ctrl + Shift + ↑/↓	Move line up/down
Alt + Shift + 2	Split view (2 columns)

💡 Tip: Shortcut keys सीखने से coding speed 2x बढ़ जाती है — practice करते रहें।

7️⃣ Tips & Best Practices (महत्वपूर्ण सुझाव)

Always keep auto-save या backup plugins enable करें।
Use themes (Dark/Light) to reduce eye strain.
Indent code properly (Tab/Spaces) for readability.
Install HTML/CSS/JS linting plugins for error detection.
Use Project Folder in editor for managing multiple files.

📘 Example: Sublime Text में project folder open करने के लिए → File → Open Folder → सभी HTML/CSS files एक साथ दिखेंगी।