HTML editor -Text-based editor,WYSIWYG editor.

Paper 2-Internet &Web design

Unit I
Unit II
Unit III
Unit IV
Unit V

Back
Internet-Unit-4
Next

HTML Editor

HTML Editor ऐसे कंप्यूटर सॉफ्टवेयर होते हैं, जिनकी सहायता से HTML Code लिखा, संपादित (Edit) तथा प्रबंधित (Manage) किया जाता है। इन सॉफ्टवेयर की मदद से संपूर्ण Web Development Project को आसानी से तैयार और व्यवस्थित किया जा सकता है।

Text-based HTML Editors में Developer सीधे Source Code को लिख और संशोधित कर सकता है।

HTML Editor के लाभ (Advantages of HTML Editors)

  • HTML Editors में Code लिखते समय ही Errors की जाँच करने की सुविधा होती है।
  • इन Editors में HTML Tags तथा सामान्यतः उपयोग होने वाले Structures को आसानी से Insert किया जा सकता है।
  • इनमें Auto-complete सुविधा उपलब्ध होती है, जिससे समय की बचत होती है।
  • HTML Editors द्वारा बनाए गए Code का उपयोग बाद में XML, CSS तथा JavaScript जैसी भाषाओं के साथ भी किया जा सकता है।
  • इन Editors का Design User-friendly तथा आकर्षक (Engaging) होता है।
  • Online HTML Editors की सहायता से Website को जल्दी तैयार किया जा सकता है।
  • HTML Editors Developers को Code पर पूर्ण नियंत्रण (Full Control) प्रदान करते हैं, जिससे वे जटिल (Complex) Code भी आसानी से बना सकते हैं।

HTML Editor के मुख्य Features

1. Syntax Highlighting

यह Feature विभिन्न HTML Codes को उनकी श्रेणी के अनुसार अलग-अलग रंगों में प्रदर्शित करता है, जिससे Code को समझना आसान हो जाता है।

2. Auto-completion

यह Feature HTML Elements तथा Attributes के सुझाव (Suggestions) प्रदान करता है, जिससे लंबे Code को जल्दी लिखा जा सकता है।

3. Error Detection

यह Feature गलत Code टाइप करते ही Error प्रदर्शित करता है तथा उसे सुधारने के सुझाव भी देता है।

4. Search and Replace

इस Feature की सहायता से किसी Document या Folder में Text को खोजकर (Search) बदला (Replace) जा सकता है।

5. Code Folding

यह Feature Code के किसी भाग को अस्थायी रूप से छिपाने (Hide) की सुविधा देता है, जिससे Developer महत्वपूर्ण भागों पर आसानी से ध्यान केंद्रित कर सकता है।

HTML Editors के प्रकार

HTML Editors मुख्य रूप से दो प्रकार के होते हैं –

  1. Text-based HTML Editor
  2. WYSIWYG Editor

1. Text-based HTML Editor

Text-based HTML Editor का उपयोग करने के लिए उपयोगकर्ता को HTML Language तथा HTML Tags का ज्ञान होना आवश्यक है।

इन Editors में Developer सीधे Source Code लिखता तथा संपादित करता है।

एक अच्छा Text-based Editor टाइप किए गए Code में Errors को अलग रंग में प्रदर्शित करता है तथा उन्हें सुधारने के सुझाव भी देता है।

वर्तमान में अनेक Online तथा Offline Text-based Editors उपलब्ध हैं।

उदाहरण –

  • Notepad
  • Notepad++
  • Sublime Text
  • Visual Studio Code
  • Atom

Windows में Notepad तथा Mac में TextEdit सामान्य रूप से उपयोग किए जाने वाले HTML Editors हैं। HTML सीखने तथा अभ्यास करने के लिए ये Editors बहुत उपयोगी माने जाते हैं।

2. WYSIWYG Editor

WYSIWYG Editor में Web Page बनाते समय ही उसका रूप उसी प्रकार दिखाई देता है, जैसा वह बाद में Browser में दिखाई देगा।

WYSIWYG का पूर्ण रूप है –

What You See Is What You Get

अर्थात — “जैसा दिखाई देता है, वैसा ही प्राप्त होता है।”

इन Editors में Developer को Code कम लिखना पड़ता है, क्योंकि अधिकांश कार्य Drag-and-Drop तथा Visual Interface के माध्यम से किए जाते हैं।

WYSIWYG Editors सामान्यतः Integrated Development Environment (IDE) का भाग होते हैं।

उदाहरण –

  • Adobe Dreamweaver
  • Google Web Designer

WYSIWYG Editor के लाभ

  • HTML का ज्ञान कम होने पर भी Web Page बनाया जा सकता है।
  • Web Page का Live Preview दिखाई देता है।
  • Images, Text तथा Layout को आसानी से व्यवस्थित किया जा सकता है।
  • तेज़ी से Web Design तैयार किया जा सकता है।

WYSIWYG Editor की सीमाएँ

  • Generated Code कई बार अनावश्यक (Extra) हो सकता है।
  • सभी Browsers में Output बिल्कुल समान नहीं दिखाई देता।
  • Professional Developers अधिक नियंत्रण के लिए Text-based Editors को प्राथमिकता देते हैं।

लोकप्रिय HTML Editors

निम्नलिखित HTML Editors काफी लोकप्रिय हैं –

  • NetBeans
  • Sublime Text
  • Atom
  • Notepad++
  • Visual Studio Code
  • Adobe Dreamweaver
  • Google Web Designer
  • Bluefish
  • Brackets

Web Hosting

Web Hosting एक Online Service है, जिसकी सहायता से किसी Website की सामग्री (Content) को Internet पर उपलब्ध कराया जाता है।

जब हम कोई Hosting Plan खरीदते हैं, तब हमें अपनी Website की Files तथा Data को Store करने के लिए Server पर स्थान (Space) प्राप्त होता है।

Web Hosting कंपनियाँ Server को लगातार चालू रखती हैं तथा उसकी सुरक्षा सुनिश्चित करती हैं, जिससे Website Visitors के Browser में सही प्रकार से प्रदर्शित हो सके।

Domain Name

Domain Name किसी Website का विशिष्ट (Unique) नाम होता है, जिसके माध्यम से उपयोगकर्ता Website तक पहुँचते हैं।

उदाहरण –

www.google.comwww.wikipedia.org

प्रत्येक Domain Name अद्वितीय होता है तथा इसे एक समय में केवल एक ही Website उपयोग कर सकती है।

ईमेल Address में @ चिन्ह के बाद तथा Website Address में www. के बाद दिखाई देने वाला भाग Domain Name कहलाता है।

उदाहरण –

student@gmail.com

यहाँ gmail.com Domain Name है।

DNS (Domain Name System)

DNS (Domain Name System) Internet की “Phone Book” के समान कार्य करता है।

मनुष्य Domain Names जैसे –

google.comyoutube.com

को आसानी से याद रख सकते हैं, जबकि Computer वास्तव में IP Address के माध्यम से कार्य करते हैं।

DNS Domain Name को IP Address में परिवर्तित (Translate) करता है, जिससे Browser Website को Load कर पाता है।

Domain Name Register करने की प्रक्रिया

  1. उपयुक्त Domain Name चुनें।
  2. Domain की Availability जाँचें।
  3. किसी Domain Registrar का चयन करें।
  4. Domain Name खरीदकर Register करें।
  5. आवश्यकता अनुसार Domain Renewal कराएँ।

Exam Questions – MCU 2019

निम्न कार्यों को करने के Steps लिखिए –

  1. Inserting Images in a Webpage
  2. Creating Email Link
  3. Linking to Other Websites
  4. Inserting and Formatting Text
Back
Next

1-WYSIWG एडिटर क्या है ? इसको क्यों इस्तेमाल किया जाता है ? किन्ही दो WYSIWG एडिटर को समझाइए। जून 2019

2 – निम्न को कैसे करेंगे ? Steps बताइये :june 2019

(i) Inserting images in a webpage

(ii) Creating Email Link

(iii) Linking to other websites

(iv) Inserting and formating text

3- WYSIWG HTML Editor को विस्तार से समझाइए। जून 2023

4 – एक वेबसाइट में एक नया पेज बनाने और एक वेबसाइट को दूसरे वेबसाइट से लिंक करने के चरण लिखिए। जून 2023

5 – एक्सप्रेशन वेब क्या है ? Inserting text and formatting text को उपयुक्त उदाहरण के साथ समझाइए। जून 2026

6 – ईमेल लिंक बनाने के क्या तरीके है ? दूसरी वेबसाइट को लिंक करने की प्रक्रिया क्या है ? जून 2026

error: Content is protected !!