HTML Editors
In this page:
Plain Text बनाम Code Editors
Notepad या TextEdit जैसे सरल tools भी HTML लिख सकते हैं, लेकिन dedicated code editors syntax highlighting, auto-completion, और error detection जैसी सुविधाएं देते हैं। bracket matching और linting जैसे features page reload करने से पहले ही typos पकड़ लेते हैं।
उदाहरण: Plain Text vs. Code Editors
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<p>Hello world</p>
</body>
</html>अपनी HTML Files को Save करना
जब तक आप सही extension के साथ file save नहीं करते, ब्राउज़र आपकी file को webpage के रूप में नहीं पहचानेगा। यह extension कंप्यूटर को बताता है कि file को ब्राउज़र में खोलना है। ज़्यादातर editors डिफ़ॉल्ट रूप से .txt चुनते हैं, इसलिए save करते समय आपको स्पष्ट रूप से .html चुनना होगा।
उदाहरण: Saving Your HTML Files
<!-- Save this file as: index.html -->
<!DOCTYPE html>
<html>
<body>
<p>This file must be saved with a .html extension, not .txt</p>
</body>
</html>ब्राउज़र में अपनी Files देखना
यह देखने के लिए कि आपका code कैसा दिखता है, आप अपनी saved HTML file को सीधे किसी भी ब्राउज़र में खोल सकते हैं। आप live, real-time preview के लिए code editor extensions भी इस्तेमाल कर सकते हैं। हर save के बाद browser tab को refresh करना beginners के लिए सबसे तेज़ feedback loop है।
उदाहरण: Viewing Your Files in a Browser
<!DOCTYPE html>
<html>
<body>
<p>Open this file in your browser to see it rendered.</p>
</body>
</html>Browser Developer Tools का उपयोग
हर modern ब्राउज़र में built-in developer tools होते हैं, जिन्हें F12 दबाकर या right-click > Inspect करके खोला जाता है, जो आपको किसी page की live HTML structure देखने, छोटे बदलावों को तुरंत test करने, और saved file को edit किए बिना errors देखने देते हैं।
उदाहरण: Using Browser Developer Tools
<!DOCTYPE html>
<html>
<body>
<p>Right-click this text and choose "Inspect" to open developer tools.</p>
</body>
</html>Code Editor चुनना
VS Code, Sublime Text जैसे लोकप्रिय मुफ़्त code editors, और CodePen या JSFiddle जैसे online editors, सभी syntax highlighting और live preview देते हैं, इसलिए सही चुनाव आमतौर पर इस बात पर निर्भर करता है कि आपको पूरा desktop application चाहिए या zero-install browser tool।
उदाहरण: Choosing a Code Editor
<!--
Desktop editors: VS Code, Sublime Text
Online editors: CodePen, JSFiddle
-->
<!DOCTYPE html>
<html>
<body>
<p>The same HTML works in any of these editors.</p>
</body>
</html>Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: