BCA Web Technology Notes 2026 in Hindi

परिचय (Introduction)

वेब टेक्नोलॉजी (Web Technology) आधुनिक डिजिटल दुनिया की सबसे महत्वपूर्ण तकनीकों में से एक है। आज हम जिन वेबसाइटों का उपयोग करते हैं, जैसे Google, YouTube, Amazon, Facebook और सरकारी पोर्टल, वे सभी Web Technology की सहायता से विकसित की जाती हैं।

वेब टेक्नोलॉजी क्या है?

वेब टेक्नोलॉजी उन तकनीकों, भाषाओं और टूल्स का समूह है जिनकी सहायता से वेबसाइट और वेब एप्लिकेशन बनाए जाते हैं। एक साधारण वेब पेज से लेकर बड़े ई-कॉमर्स प्लेटफॉर्म तक, सभी Web Technology पर आधारित होते हैं।

BCA प्रथम सेमेस्टर में यह विषय विद्यार्थियों को वेबसाइट की मूलभूत संरचना, HTML, CSS, JavaScript, XML, Domain Name, Web Hosting और Web Development की पूरी प्रक्रिया से परिचित कराता है।

यदि आप Web Technology को अच्छी तरह समझ लेते हैं, तो आप स्वयं की वेबसाइट बना सकते हैं, Freelancing कर सकते हैं, Startup शुरू कर सकते हैं तथा Frontend Developer, Web Designer या Full Stack Developer के रूप में अपना करियर बना सकते हैं।

वास्तविक जीवन उदाहरण

मान लीजिए आप एक घर बनाना चाहते हैं।

HTML घर का ढांचा (Structure) बनाता है।
CSS घर को सुंदर बनाता है और सजावट करता है।
JavaScript घर के उपकरणों को कार्य करने योग्य बनाता है।
Database आवश्यक जानकारी को सुरक्षित रखता है।
Server पूरे सिस्टम को संचालित करता है।

ठीक इसी प्रकार एक वेबसाइट भी HTML, CSS, JavaScript, Database और Server के संयोजन से कार्य करती है।

इस विषय का महत्व

वेबसाइट डिजाइनिंग की मजबूत नींव तैयार करता है।
Frontend Development सीखने की शुरुआत कराता है।
Freelancing एवं Startup के अवसर प्रदान करता है।
Software Industry में रोजगार की संभावनाएं बढ़ाता है।
आधुनिक डिजिटल बिजनेस को समझने में सहायता करता है।
Professional Web Developer बनने की दिशा में पहला कदम है।

सीखने के उद्देश्य (Learning Objectives)

इस अध्याय को पढ़ने के बाद विद्यार्थी निम्नलिखित उद्देश्यों को प्राप्त कर सकेंगे:

1. WWW को समझना

World Wide Web, Browser, Server, Website और Webpage की मूल अवधारणाओं को समझना।

2. Website Development

Static एवं Dynamic Website के बीच अंतर समझना और वेबसाइट निर्माण की प्रक्रिया जानना।

3. HTML सीखना

HTML Tags, Attributes और Document Structure का प्रयोग करके Web Pages बनाना।

4. CSS का उपयोग

वेबसाइट को आकर्षक एवं Responsive बनाने के लिए CSS का प्रयोग करना।

5. JavaScript समझना

Web Pages में Functionality और User Interaction जोड़ने की प्रक्रिया सीखना।

6. Domain और Hosting

वेबसाइट को इंटरनेट पर प्रकाशित करने की प्रक्रिया और Hosting के महत्व को समझना।

Web Technology क्या है? तथा World Wide Web (WWW)

वेब टेक्नोलॉजी आधुनिक इंटरनेट की नींव है। किसी भी वेबसाइट, वेब एप्लिकेशन या ऑनलाइन सेवा को बनाने और चलाने के लिए जिन तकनीकों का उपयोग किया जाता है, उन्हें सामूहिक रूप से Web Technology कहा जाता है।

Web Technology क्या है?

Web Technology उन तकनीकों, प्रोग्रामिंग भाषाओं, प्रोटोकॉल और टूल्स का समूह है जिनकी सहायता से वेबसाइट और वेब एप्लिकेशन बनाए जाते हैं।

जब भी आप Google पर कुछ खोजते हैं, YouTube पर वीडियो देखते हैं, Amazon पर खरीदारी करते हैं या किसी सरकारी वेबसाइट पर फॉर्म भरते हैं, तब आप Web Technology का उपयोग कर रहे होते हैं।

Web Technology मुख्य रूप से HTML, CSS, JavaScript, Database, Server, Domain Name और Hosting जैसी तकनीकों पर आधारित होती है।

उदाहरण:
यदि आप अपना ऑनलाइन पोर्टफोलियो बनाना चाहते हैं तो HTML से उसका ढांचा तैयार करेंगे, CSS से उसे आकर्षक बनाएंगे और JavaScript से उसमें इंटरैक्टिव फीचर्स जोड़ेंगे।

World Wide Web (WWW) क्या है?

World Wide Web (WWW) इंटरनेट पर उपलब्ध वेब पेजों और वेबसाइटों का विशाल संग्रह है, जिसे वेब ब्राउज़र की सहायता से एक्सेस किया जाता है।

WWW का आविष्कार 1989 में Tim Berners-Lee ने किया था। इसका मुख्य उद्देश्य दुनिया भर की जानकारी को एक दूसरे से जोड़ना और इंटरनेट उपयोगकर्ताओं तक पहुंचाना था।

WWW इंटरनेट का एक भाग है। इंटरनेट नेटवर्क का विशाल समूह है जबकि WWW उस नेटवर्क पर उपलब्ध वेबसाइटों और वेब पेजों का संग्रह है।

WWW का पूरा नाम World Wide Web है।
यह Hyperlinks की सहायता से वेब पेजों को जोड़ता है।
वेब ब्राउज़र के माध्यम से एक्सेस किया जाता है।
HTTP और HTTPS प्रोटोकॉल पर कार्य करता है।
आज की सभी आधुनिक वेबसाइटें WWW का हिस्सा हैं।

Internet और WWW में अंतर

Internet	WWW
पूरी दुनिया के नेटवर्क का समूह	वेब पेजों और वेबसाइटों का संग्रह
हार्डवेयर और नेटवर्क इंफ्रास्ट्रक्चर	इंटरनेट पर उपलब्ध जानकारी
ई-मेल, FTP, VoIP आदि भी शामिल	केवल Web आधारित सेवाएं
इंटरनेट के बिना WWW नहीं चल सकता	WWW इंटरनेट का एक भाग है

WWW कैसे कार्य करता है?

जब कोई उपयोगकर्ता ब्राउज़र में किसी वेबसाइट का पता (URL) दर्ज करता है, तब निम्नलिखित प्रक्रिया होती है:

उपयोगकर्ता URL दर्ज करता है।
ब्राउज़र सर्वर को Request भेजता है।
सर्वर HTML, CSS और अन्य डेटा भेजता है।
ब्राउज़र प्राप्त डेटा को प्रोसेस करता है।
अंत में वेबसाइट उपयोगकर्ता की स्क्रीन पर दिखाई देती है।

उदाहरण:
जब आप www.google.com लिखते हैं, तो आपका ब्राउज़र Google के सर्वर से संपर्क करता है और आवश्यक डेटा प्राप्त करके वेब पेज आपकी स्क्रीन पर दिखा देता है।

परीक्षा की दृष्टि से महत्वपूर्ण तथ्य

WWW का आविष्कार Tim Berners-Lee ने किया था।
WWW और Internet एक समान नहीं हैं।
WWW Hyperlinks के माध्यम से वेब पेजों को जोड़ता है।
Web Browser WWW को एक्सेस करने का माध्यम है।
HTML वेब पेज का मूल ढांचा प्रदान करता है।
WWW इंटरनेट का सबसे लोकप्रिय उपयोग है।

Website, Web Page, Home Page, Browser और Server

वेब टेक्नोलॉजी को समझने के लिए Website, Web Page, Home Page, Browser और Server जैसी मूलभूत अवधारणाओं को समझना अत्यंत आवश्यक है।

Website क्या होती है?

Website कई Web Pages का एक समूह होता है जो आपस में Hyperlinks द्वारा जुड़े होते हैं और एक ही Domain Name के अंतर्गत उपलब्ध होते हैं।

जब कोई संगठन, कंपनी, विद्यालय या व्यक्ति इंटरनेट पर अपनी जानकारी उपलब्ध कराना चाहता है, तो वह एक Website बनाता है।

उदाहरण:
www.google.com, www.amazon.in, www.youtube.com, www.wikipedia.org आदि सभी Websites हैं।

Website कई Web Pages से मिलकर बनती है।
Website का अपना Domain Name होता है।
इसे Internet के माध्यम से Access किया जाता है।
Website Static या Dynamic हो सकती है।

Web Page क्या होता है?

Web Page किसी Website का एक व्यक्तिगत पृष्ठ (Page) होता है जिसे HTML की सहायता से बनाया जाता है।

एक Website के अंदर कई अलग-अलग Pages हो सकते हैं जैसे Home Page, About Us Page, Contact Us Page, Services Page आदि।

उदाहरण:
यदि IndiaDada.com एक Website है, तो उसका Home Page, Current Affairs Page और Contact Page अलग-अलग Web Pages होंगे।

Home Page क्या होता है?

Home Page किसी Website का मुख्य और पहला पृष्ठ होता है जो उपयोगकर्ता को Website खोलते ही दिखाई देता है।

यह Website का प्रवेश द्वार (Entry Point) माना जाता है क्योंकि यहीं से उपयोगकर्ता अन्य Pages तक पहुंचता है।

उदाहरण:
जब आप Google खोलते हैं और Search Box दिखाई देता है, वही Google का Home Page है।

Home Page Website का मुख्य पृष्ठ होता है।
यह उपयोगकर्ता को Navigation प्रदान करता है।
Website की सबसे महत्वपूर्ण जानकारी Home Page पर होती है।
अधिकांश Websites में Home Page को Index.html कहा जाता है।

Web Browser क्या होता है?

Web Browser एक Software Application है जिसकी सहायता से हम Websites और Web Pages को देख सकते हैं।

Browser HTML, CSS और JavaScript को पढ़कर उन्हें उपयोगकर्ता के लिए सुंदर Web Page के रूप में प्रदर्शित करता है।

लोकप्रिय Browsers:
Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera

Browser Web Pages को Render करता है।
Browser Server से Data प्राप्त करता है।
Browser URL के माध्यम से Website खोलता है।
HTML, CSS और JavaScript को समझकर Display करता है।

Server क्या होता है?

Server एक शक्तिशाली Computer होता है जो Websites, Applications और Data को Store करके रखता है तथा Internet उपयोगकर्ताओं को उपलब्ध कराता है।

जब कोई उपयोगकर्ता Website खोलता है, तो Browser Server को Request भेजता है। Server उस Request का Response देता है और Website उपयोगकर्ता की स्क्रीन पर दिखाई देती है।

उदाहरण:
जब आप YouTube खोलते हैं, तो YouTube के Server से वीडियो और अन्य Data आपके Browser तक पहुंचता है।

Browser और Server के बीच कार्य प्रक्रिया

किसी Website को खोलने पर निम्नलिखित प्रक्रिया होती है:

उपयोगकर्ता Browser में URL दर्ज करता है।
Browser Server को Request भेजता है।
Server आवश्यक Data खोजता है।
Server Response भेजता है।
Browser HTML, CSS और JavaScript को Process करता है।
Website स्क्रीन पर दिखाई देती है।

Website और Web Page में अंतर

Website	Web Page
कई Pages का समूह	एक अकेला Page
Domain Name होता है	Website का हिस्सा होता है
अनेक Sections होते हैं	विशिष्ट जानकारी देता है
उदाहरण: Amazon	Amazon का Product Page

परीक्षा हेतु महत्वपूर्ण बिंदु

Website कई Web Pages का समूह है।
Home Page Website का मुख्य पृष्ठ होता है।
Browser Web Pages को प्रदर्शित करता है।
Server Website का Data Store करता है।
Browser Request भेजता है और Server Response देता है।
Index.html सामान्यतः Website का Home Page माना जाता है।

Web Development, Frontend, Backend और Full Stack Development

आज की डिजिटल दुनिया में Web Development सबसे अधिक मांग वाले कौशलों में से एक है। लगभग हर कंपनी, संस्था और व्यवसाय को अपनी वेबसाइट या वेब एप्लिकेशन की आवश्यकता होती है।

Web Development क्या है?

Web Development वह प्रक्रिया है जिसमें Website या Web Application को डिजाइन, विकसित (Develop), परीक्षण (Testing) और इंटरनेट पर प्रकाशित (Deploy) किया जाता है।

एक Professional Website बनाने के लिए कई तकनीकों का उपयोग किया जाता है जैसे HTML, CSS, JavaScript, Database, Server और Hosting।

उदाहरण:
जब Amazon, Flipkart या IndiaDada.com जैसी वेबसाइट बनाई जाती है, तो उसके निर्माण की पूरी प्रक्रिया को Web Development कहा जाता है।

Web Development के मुख्य भाग

सामान्यतः Web Development को तीन भागों में विभाजित किया जाता है:

Frontend Development
Backend Development
Full Stack Development

Frontend Development क्या है?

Website का वह भाग जिसे User सीधे अपनी स्क्रीन पर देखता और उपयोग करता है, Frontend कहलाता है।

Frontend Developer Website का Design, Layout, Colors, Menus, Buttons, Images और User Interface तैयार करता है।

Frontend Technologies:
HTML, CSS, JavaScript, Bootstrap, React.js

यदि किसी Website का Home Page सुंदर दिखाई देता है, Menu सही काम करता है और Buttons आकर्षक दिखते हैं, तो यह Frontend Developer का कार्य होता है।

Frontend को आसान भाषा में समझें

मान लीजिए आप एक घर बनवा रहे हैं।

घर की दीवारों का रंग, खिड़कियाँ, दरवाजे, सजावट और बाहरी सुंदरता Frontend के समान है।

जो चीज User को दिखाई देती है, वही Frontend कहलाती है।

Backend Development क्या है?

Website का वह भाग जो User को दिखाई नहीं देता लेकिन Website को कार्य करने योग्य बनाता है, Backend कहलाता है।

Backend Developer Database, Server, Login System, Data Processing और Business Logic को संभालता है।

Backend Technologies:
PHP, Python, Java, Node.js, MySQL, MongoDB

जब कोई User Login करता है, Registration करता है या Online Payment करता है, तब Backend कार्य करता है।

Backend को आसान भाषा में समझें

यदि Frontend घर की सजावट है, तो Backend घर की बिजली, पानी की पाइपलाइन और सुरक्षा व्यवस्था है।

यह दिखाई नहीं देता, लेकिन पूरे सिस्टम को चलाने का काम करता है।

Full Stack Development क्या है?

जो Developer Frontend और Backend दोनों पर कार्य कर सकता है, उसे Full Stack Developer कहा जाता है।

Full Stack Developer Website के Design से लेकर Database और Server तक सभी भागों को संभाल सकता है।

Full Stack Developer:
HTML + CSS + JavaScript + Backend Language + Database + Hosting

Frontend, Backend और Full Stack में अंतर

Frontend Developer	Backend Developer	Full Stack Developer
User Interface बनाता है	Server और Database संभालता है	दोनों कार्य करता है
User को दिखाई देता है	User को दिखाई नहीं देता	पूरे सिस्टम को संभालता है
HTML, CSS, JS	PHP, Python, Java	Frontend + Backend दोनों
Design पर ध्यान	Logic पर ध्यान	Complete Project पर ध्यान

Web Development में Career Opportunities

Web Development सीखने के बाद विद्यार्थी विभिन्न क्षेत्रों में रोजगार प्राप्त कर सकते हैं।

Frontend Developer
Backend Developer
Full Stack Developer
UI/UX Designer
Web Designer
Freelancer
Software Engineer
Startup Founder

Freelancing और Business Opportunities

आज लाखों छोटे व्यवसाय, स्कूल, कोचिंग संस्थान और दुकानदार अपनी वेबसाइट बनवाना चाहते हैं।

यदि आपको Web Development आती है, तो आप Freelancing Platforms पर Projects लेकर आय अर्जित कर सकते हैं या स्वयं का Web Development Business शुरू कर सकते हैं।

परीक्षा के लिए महत्वपूर्ण तथ्य

Frontend Developer User Interface तैयार करता है।
Backend Developer Database और Server संभालता है।
Full Stack Developer Frontend और Backend दोनों जानता है।
HTML, CSS और JavaScript Frontend Technologies हैं।
PHP, Python और Java Backend Technologies हैं।
Web Development वर्तमान समय का अत्यधिक मांग वाला Career है।
BCA परीक्षा में Frontend और Backend के अंतर पर प्रश्न पूछे जाते हैं।

HTML (HyperText Markup Language) का परिचय

वेब डेवलपमेंट की शुरुआत HTML से होती है। यदि Website एक घर है, तो HTML उसका ढांचा (Structure) तैयार करता है। प्रत्येक Web Developer के लिए HTML सीखना पहला और सबसे महत्वपूर्ण कदम माना जाता है।

HTML क्या है?

HTML का पूरा नाम HyperText Markup Language है। यह एक Markup Language है जिसका उपयोग Web Pages का Structure तैयार करने के लिए किया जाता है।

HTML हमें यह बताती है कि Website पर कौन-सा Content कहाँ दिखाई देगा। जैसे Heading कहाँ होगी, Paragraph कहाँ होगा, Image कहाँ होगी और Button कहाँ दिखाई देगा।

सरल शब्दों में:
HTML Website की हड्डियों (Skeleton) की तरह कार्य करती है। जैसे शरीर का ढांचा हड्डियाँ बनाती हैं, वैसे ही Website का ढांचा HTML तैयार करती है।

HTML का पूरा नाम (Full Form)

शब्द	अर्थ
HyperText	ऐसा Text जो दूसरे Pages से Link हो सके
Markup	Tags के माध्यम से Structure बनाना
Language	Web Page बनाने की भाषा

HTML का इतिहास

HTML का विकास World Wide Web के निर्माता Tim Berners-Lee द्वारा किया गया था।

सन् 1991 में HTML का पहला संस्करण प्रस्तुत किया गया। इसके बाद समय-समय पर नए Versions आए और वर्तमान में HTML5 सबसे लोकप्रिय संस्करण है।

Version	वर्ष
HTML 1.0	1991
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
HTML5	2014

HTML की प्रमुख विशेषताएँ

सीखने में सरल और आसान।
सभी Web Browsers द्वारा समर्थित।
Website Structure तैयार करने के लिए उपयोगी।
Open Source Technology है।
Platform Independent है।
CSS और JavaScript के साथ आसानी से कार्य करती है।
Responsive Websites बनाने की नींव प्रदान करती है।

HTML क्यों सीखें?

आज लगभग हर Website HTML का उपयोग करती है। यदि आपको Web Development, Blogging, Freelancing या Software Development में Career बनाना है, तो HTML सीखना अनिवार्य है।

वास्तविक जीवन उदाहरण:
Google, YouTube, Facebook, Amazon, Wikipedia और IndiaDada.com जैसी सभी Websites का Frontend HTML से शुरू होता है।

HTML5 क्या है?

HTML5 HTML का नवीनतम और उन्नत संस्करण है। यह आधुनिक Websites और Web Applications को विकसित करने के लिए बनाया गया है।

HTML5 में Multimedia, Forms, Audio, Video और Responsive Design के लिए कई नई सुविधाएँ जोड़ी गई हैं।

Audio और Video Support
Canvas Graphics
Responsive Web Design
Geolocation Support
Improved Forms
Better SEO Structure
Mobile Friendly Development

HTML, CSS और JavaScript का संबंध

एक Website बनाने में सामान्यतः तीन मुख्य Technologies का उपयोग किया जाता है:

Technology	कार्य
HTML	Structure बनाता है
CSS	Design और Styling करता है
JavaScript	Functionality और Interaction प्रदान करता है

घर का उदाहरण:
HTML = घर की दीवारें और कमरे
CSS = घर की सजावट और रंग
JavaScript = बिजली, पंखा और अन्य कार्यशील सुविधाएँ

HTML के उपयोग (Applications of HTML)

Web Pages बनाना
Landing Pages बनाना
Portfolio Websites बनाना
Blogs और News Websites बनाना
E-Commerce Websites का Frontend तैयार करना
Forms और Registration Pages बनाना
Educational Websites बनाना

परीक्षा के लिए महत्वपूर्ण बिंदु

HTML का पूरा नाम HyperText Markup Language है।
HTML एक Programming Language नहीं बल्कि Markup Language है।
HTML Website का Structure तैयार करती है।
HTML का नवीनतम Version HTML5 है।
HTML का विकास Tim Berners-Lee ने किया था।
HTML, CSS और JavaScript मिलकर आधुनिक Websites बनाते हैं।
BCA परीक्षा में HTML की परिभाषा और Full Form अक्सर पूछी जाती है।

HTML Document Structure, Boilerplate Code, DOCTYPE, Head और Body Tag

किसी भी HTML Web Page को बनाने से पहले उसके मूल ढांचे (Structure) को समझना आवश्यक है। प्रत्येक Professional Website एक निश्चित HTML Structure का पालन करती है।

HTML Document Structure क्या है?

HTML Document Structure वह आधारभूत ढांचा होता है जिसके ऊपर पूरा Web Page बनाया जाता है।

जिस प्रकार किसी भवन के निर्माण से पहले उसका नक्शा तैयार किया जाता है, उसी प्रकार Website बनाने से पहले HTML Structure तैयार किया जाता है।

HTML Document एक Root Element से शुरू होता है।
उसके अंदर Head और Body Section होते हैं।
Head में Metadata रखा जाता है।
Body में Website का वास्तविक Content रखा जाता है।

Boilerplate Code क्या होता है?

Boilerplate Code वह बेसिक HTML Code होता है जिसे लगभग हर HTML File की शुरुआत में लिखा जाता है।

Visual Studio Code में केवल ! टाइप करके Enter दबाने पर यह Boilerplate Code स्वतः Generate हो जाता है।

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
</head>
<body>
    Hello World
</body>
</html>

DOCTYPE Declaration क्या है?

HTML Document की सबसे पहली लाइन DOCTYPE Declaration होती है।

<!DOCTYPE html>

यह Browser को बताती है कि Document HTML5 Version का उपयोग कर रहा है।

HTML Document की पहली लाइन होती है।
Browser को HTML Version की जानकारी देती है।
HTML5 में केवल एक लाइन पर्याप्त होती है।

HTML Tag क्या है?

HTML Tag पूरे Document का Root Element होता है।

Website का सम्पूर्ण Content इसी Tag के अंदर लिखा जाता है।

HTML Tag Website का सबसे बड़ा Container माना जाता है।

lang Attribute क्या है?

HTML Tag के साथ lang Attribute का उपयोग किया जाता है।

यह Browser और Search Engine को बताता है कि Website की मुख्य भाषा कौन-सी है।

Attribute Value	भाषा
en	English
hi	Hindi
fr	French
de	German

Head Tag क्या होता है?

Head Tag में वह जानकारी रखी जाती है जो Browser और Search Engine के लिए महत्वपूर्ण होती है लेकिन सीधे User को दिखाई नहीं देती।

<head>
<title>My Website</title>
</head>

Head Section में निम्नलिखित चीजें रखी जाती हैं:

Title Tag
Meta Tags
CSS Files
JavaScript Files
SEO Information

Title Tag क्या है?

Title Tag Browser Tab पर दिखाई देने वाला नाम निर्धारित करता है।

<title>IndiaDada Web Technology Notes</title>

जब User Browser में Page खोलता है तो यही Text Tab के ऊपर दिखाई देता है।

Meta Tag क्या होता है?

Meta Tags Web Page के बारे में अतिरिक्त जानकारी प्रदान करते हैं।

Meta Tag	कार्य
charset	Character Encoding निर्धारित करता है
viewport	Mobile Responsive Design में सहायता करता है

Body Tag क्या होता है?

Body Tag HTML Document का सबसे महत्वपूर्ण भाग होता है।

जो भी Content User को दिखाई देता है वह Body Tag के अंदर लिखा जाता है।

<body>
<h1>Welcome</h1>
<p>This is my first webpage.</p>
</body>

Head Browser के लिए होता है जबकि Body User के लिए होती है।

Head और Body में अंतर

Head Tag	Body Tag
User को दिखाई नहीं देता	User को दिखाई देता है
Metadata रखता है	Content रखता है
SEO और Browser Settings	Text, Image, Video, Forms
Background Processing	Visible Interface

परीक्षा हेतु अत्यंत महत्वपूर्ण तथ्य

DOCTYPE HTML5 Version को घोषित करता है।
HTML Tag पूरे Document का Root Element है।
Head Tag में Metadata रखा जाता है।
Body Tag में Visible Content रखा जाता है।
Title Tag Browser Tab पर दिखाई देता है।
Meta Viewport Responsive Design के लिए उपयोग किया जाता है।
HTML Structure BCA परीक्षा का अत्यंत महत्वपूर्ण Topic है।

HTML Tags, Elements, Opening Tag, Closing Tag और Comments

HTML सीखने का सबसे महत्वपूर्ण भाग Tags और Elements को समझना है। HTML पूरी तरह Tags पर आधारित भाषा है और Website का पूरा Structure इन्हीं Tags की सहायता से तैयार किया जाता है।

HTML Tag क्या होता है?

HTML Tag एक विशेष निर्देश (Instruction) होता है जो Browser को बताता है कि Web Page पर कौन-सा Content कैसे प्रदर्शित किया जाए।

Tags हमेशा Angle Brackets (< >) के अंदर लिखे जाते हैं।

उपरोक्त सभी HTML Tags के उदाहरण हैं।

HTML Element क्या होता है?

जब Opening Tag, Content और Closing Tag मिलकर एक पूर्ण इकाई बनाते हैं, तो उसे HTML Element कहा जाता है।

<p>Welcome to HTML</p>

ऊपर दिए गए उदाहरण में पूरा Paragraph एक HTML Element है।

भाग	विवरण
<p>	Opening Tag
Welcome to HTML	Content
</p>	Closing Tag

Opening Tag क्या होता है?

Opening Tag किसी Element की शुरुआत को दर्शाता है।

<h1>

यह Browser को बताता है कि अब एक Heading शुरू होने वाली है।

Closing Tag क्या होता है?

Closing Tag Element के समाप्त होने को दर्शाता है।

</h1>

Closing Tag में Forward Slash ( / ) का उपयोग किया जाता है।

यह Browser को बताता है कि Heading यहीं समाप्त हो गई है।

Container Concept क्या है?

HTML Tags को हम Containers भी कहते हैं क्योंकि ये अपने अंदर Content को Store करते हैं।

जिस प्रकार किसी डिब्बे में सामान रखा जाता है, उसी प्रकार HTML Tags के अंदर Text, Images, Buttons और अन्य Elements रखे जाते हैं।

<p>
This is a paragraph.
</p>

यहाँ Paragraph Tag एक Container की तरह कार्य कर रहा है।

Nested Elements क्या होते हैं?

जब एक HTML Element के अंदर दूसरा Element रखा जाता है, तो उसे Nested Element कहते हैं।

<body>
<h1>My Website</h1>
<p>Welcome Student</p>
</body>

यहाँ h1 और p Elements, Body Element के अंदर मौजूद हैं।

Parent और Child Elements

HTML Structure में Elements के बीच Parent और Child का संबंध होता है।

Parent Element	Child Element
HTML	Head
HTML	Body

HTML Parent Element है जबकि Head और Body उसके Child Elements हैं।

Empty Tags क्या होते हैं?

कुछ Tags ऐसे होते हैं जिनमें Closing Tag की आवश्यकता नहीं होती।

इन्हें Empty Tags या Self Closing Tags कहा जाता है।

Tag	कार्य
<br>	नई लाइन शुरू करता है
<hr>	Horizontal Line बनाता है

HTML Comments क्या होते हैं?

Comments वह टेक्स्ट होता है जो केवल Developer को दिखाई देता है लेकिन Browser उसे Web Page पर प्रदर्शित नहीं करता।

Comments का उपयोग कोड को समझाने और Documentation के लिए किया जाता है।

Browser इस Comment को Ignore कर देता है।

Comments का उपयोग क्यों किया जाता है?

कोड को समझने में सहायता मिलती है।
टीम के अन्य Developers को जानकारी देने के लिए।
बड़े Projects में Documentation के लिए।
Testing और Debugging में सहायता के लिए।
भविष्य में Code Maintenance आसान बनाने के लिए।

HTML Case Sensitivity

HTML Case Sensitive Language नहीं है।

अर्थात यदि आप Tag को Capital या Small Letters में लिखते हैं तो Browser दोनों को स्वीकार कर लेता है।

<H1>Welcome</H1>

<h1>Welcome</h1>

दोनों का Output समान होगा।

हालाँकि Professional Coding Standards के अनुसार Small Letters का उपयोग करना चाहिए।

परीक्षा हेतु अत्यंत महत्वपूर्ण बिंदु

HTML Tag Browser को निर्देश देता है।
Opening Tag और Closing Tag मिलकर Element बनाते हैं।
HTML Elements Container की तरह कार्य करते हैं।
Nested Elements Parent-Child संबंध बनाते हैं।
Comments Browser में दिखाई नहीं देते।
HTML Case Sensitive Language नहीं है।
<br> और <hr> Empty Tags के उदाहरण हैं।
BCA परीक्षा में Tag और Element का अंतर अक्सर पूछा जाता है।

HTML Attributes, Lang Attribute, Heading Tags और Paragraph Tag

HTML Tags को और अधिक उपयोगी तथा प्रभावशाली बनाने के लिए Attributes का उपयोग किया जाता है। इसी प्रकार Heading Tags और Paragraph Tag Web Page के Content को व्यवस्थित रूप से प्रदर्शित करने में सहायता करते हैं।

HTML Attribute क्या होता है?

HTML Attribute किसी Tag के बारे में अतिरिक्त जानकारी (Additional Information) प्रदान करता है।

Attribute हमेशा Opening Tag के अंदर लिखा जाता है और यह Browser को बताता है कि Tag कैसे व्यवहार करेगा।

ऊपर दिए गए उदाहरण में lang एक Attribute है तथा en उसकी Value है।

Attribute की संरचना (Syntax)

किसी भी Attribute के दो भाग होते हैं:

भाग	विवरण
Attribute Name	Attribute का नाम
Attribute Value	Attribute की Value

Lang Attribute क्या है?

Lang Attribute HTML Document की भाषा (Language) निर्धारित करता है।

यह Search Engines, Browsers और Screen Readers को बताता है कि Web Page किस भाषा में लिखा गया है।

यहाँ en का अर्थ English Language है।

Code	Language
en	English
hi	Hindi
fr	French
de	German
es	Spanish

Search Engine Optimization (SEO) में सहायता करता है।
Accessibility को बेहतर बनाता है।
Browser सही भाषा पहचान पाता है।
Professional HTML Coding का महत्वपूर्ण भाग है।

Heading Tags क्या होते हैं?

HTML में Heading प्रदर्शित करने के लिए H1 से H6 तक कुल 6 प्रकार के Heading Tags उपलब्ध हैं।

H1 सबसे महत्वपूर्ण तथा सबसे बड़ी Heading होती है जबकि H6 सबसे छोटी Heading होती है।

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading Tags की महत्वता

Tag	उपयोग
H1	मुख्य शीर्षक (Main Title)
H2	मुख्य उपशीर्षक
H3	उप-विषय
H4	छोटा उप-विषय
H5	कम महत्वपूर्ण Heading
H6	सबसे कम महत्वपूर्ण Heading

शिक्षक की विशेष सलाह

बहुत से विद्यार्थी H1, H2 और H3 Tags का उपयोग केवल Text को बड़ा या छोटा दिखाने के लिए करते हैं।

यह गलत तरीका है। Heading Tags का उपयोग केवल Content की Importance दर्शाने के लिए किया जाना चाहिए।

Text का आकार बदलने के लिए CSS का उपयोग करना चाहिए।

SEO में Heading Tags का महत्व

Search Engines Heading Structure को पढ़कर यह समझते हैं कि Web Page में कौन-सा विषय सबसे महत्वपूर्ण है।

H1 Tag पूरे Page में सामान्यतः एक बार उपयोग किया जाता है।
H2 और H3 उप-विषयों के लिए उपयोग किए जाते हैं।
सही Heading Structure SEO Ranking को बेहतर बनाता है।
Google Content को बेहतर ढंग से समझ पाता है।

Paragraph Tag क्या होता है?

Paragraph प्रदर्शित करने के लिए HTML में P Tag का उपयोग किया जाता है।

<p>Welcome to Web Technology.</p>

Paragraph Tag लंबे Text को व्यवस्थित रूप से प्रदर्शित करने में सहायता करता है।

Paragraph Tag की विशेषताएँ

Text को Paragraph के रूप में प्रदर्शित करता है।
Browser स्वतः Margin प्रदान करता है।
Content को पढ़ने योग्य बनाता है।
Web Pages में सबसे अधिक उपयोग होने वाला Tag है।

Heading और Paragraph का संयुक्त उदाहरण

<h1>Web Technology</h1>

<p>
Web Technology आधुनिक इंटरनेट की आधारभूत तकनीक है।
</p>

इस उदाहरण में H1 मुख्य शीर्षक प्रदर्शित करेगा तथा Paragraph Tag उसके नीचे विवरण प्रदर्शित करेगा।

परीक्षा हेतु महत्वपूर्ण बिंदु

Attribute Tag को अतिरिक्त जानकारी प्रदान करता है।
Lang Attribute Document की भाषा निर्धारित करता है।
H1 सबसे महत्वपूर्ण Heading Tag है।
H6 सबसे छोटी Heading होती है।
Paragraph प्रदर्शित करने के लिए P Tag का उपयोग किया जाता है।
Heading Tags SEO के लिए अत्यंत महत्वपूर्ण हैं।
Attribute हमेशा Opening Tag के अंदर लिखा जाता है।
BCA परीक्षा में Lang Attribute और Heading Tags पर प्रश्न अक्सर पूछे जाते हैं।

VS Code Installation, Index.html, Live Server और First HTML Program

HTML सीखने के लिए हमें एक Code Editor की आवश्यकता होती है। आधुनिक Web Development में सबसे लोकप्रिय Code Editor Visual Studio Code (VS Code) है।

VS Code क्या है?

Visual Studio Code (VS Code) Microsoft द्वारा विकसित एक Free और Powerful Source Code Editor है जिसका उपयोग HTML, CSS, JavaScript तथा अन्य Programming Languages के लिए किया जाता है।

यह Web Developers के बीच सबसे अधिक लोकप्रिय Editor माना जाता है क्योंकि इसमें Extensions, Auto Complete, Syntax Highlighting और Live Preview जैसी सुविधाएँ उपलब्ध होती हैं।

Microsoft द्वारा विकसित।
पूर्णतः Free Software।
HTML, CSS, JavaScript Support।
Extensions की सुविधा।
Professional Development के लिए उपयुक्त।

VS Code Download कैसे करें?

VS Code डाउनलोड करने के लिए आधिकारिक वेबसाइट पर जाएँ और अपने Operating System के अनुसार Software डाउनलोड करें।

Operating System	Support
Windows	Supported
Linux	Supported
MacOS	Supported

VS Code Install करने के चरण

VS Code Installer डाउनलोड करें।
Installer Run करें।
Next Button पर क्लिक करें।
सभी आवश्यक Checkboxes Tick करें।
Install Button पर क्लिक करें।
Installation Complete होने के बाद VS Code Open करें।

Project Folder बनाना

किसी भी Website Project को शुरू करने से पहले एक Project Folder बनाना चाहिए।

उदाहरण के लिए हम "Portfolio Website" नाम का Folder बना सकते हैं।

Portfolio Website

इसके अंदर Website की सभी HTML, CSS और JavaScript Files रखी जाएँगी।

HTML File कैसे बनाएं?

VS Code खोलने के बाद Project Folder Open करें और नई File Create करें।

index.html

यह Website की मुख्य HTML File होगी।

Index.html क्या है?

Index.html Website का Default Home Page माना जाता है।

जब कोई User Website खोलता है तो Server सबसे पहले Index.html File को खोजता है और उसे Browser में प्रदर्शित करता है।

Website का Home Page।
Default Entry Point।
सभी Websites में सामान्यतः मौजूद।
Professional Development Standard।

Emmet क्या है?

Emmet VS Code में उपलब्ध एक विशेष Tool है जो HTML Code को तेजी से Generate करने में सहायता करता है।

केवल Exclamation Mark (!) लिखकर Enter दबाने पर पूरा Boilerplate Code स्वतः Generate हो जाता है।

HTML Boilerplate Generate करना

Index.html File में केवल Exclamation Mark लिखकर Enter दबाएँ।

VS Code स्वतः Complete HTML Structure तैयार कर देगा।

Live Server Extension क्या है?

Live Server एक VS Code Extension है जिसकी सहायता से HTML Page को Browser में तुरंत देखा जा सकता है।

जब भी आप Code Save करते हैं, Browser अपने आप Refresh होकर नवीनतम Output दिखाता है।

Automatic Refresh
Fast Testing
Real-Time Preview
Developer Productivity बढ़ाता है

Live Server Install कैसे करें?

VS Code में Extensions Icon पर क्लिक करें।
Search Box में "Live Server" लिखें।
Live Server Extension Install करें।
VS Code Restart करें।
नीचे दिखाई देने वाले "Go Live" Button पर क्लिक करें।

First HTML Program

अब हम अपना पहला HTML Program बनाएंगे।

<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

यह Program Browser पर "Hello World" प्रदर्शित करेगा।

Output

Hello World

यह Web Development में बनाया जाने वाला सबसे पहला Program माना जाता है।

शिक्षक की विशेष सलाह

HTML सीखते समय केवल Theory पढ़ना पर्याप्त नहीं है। प्रत्येक Concept को स्वयं VS Code में लिखकर Practice करनी चाहिए।

जितना अधिक आप Coding करेंगे, उतनी जल्दी Web Development में Expertise प्राप्त करेंगे।

परीक्षा हेतु महत्वपूर्ण बिंदु

VS Code Microsoft द्वारा विकसित Code Editor है।
Index.html Website का Default Home Page होता है।
Emmet Boilerplate Code Generate करता है।
Live Server Real-Time Output दिखाता है।
Go Live Button Browser Preview शुरू करता है।
Hello World पहला HTML Program माना जाता है।
BCA परीक्षा में Index.html और Live Server पर प्रश्न पूछे जा सकते हैं।

HTML Heading Tags, Paragraph Tag, BR Tag, HR Tag और Text Formatting Tags

HTML में Text को व्यवस्थित और आकर्षक तरीके से प्रदर्शित करने के लिए विभिन्न प्रकार के Text Tags का उपयोग किया जाता है। यह सभी Tags Website के Content को पढ़ने योग्य और Professional बनाते हैं।

Heading Tags (H1 - H6)

Heading Tags का उपयोग Web Page के शीर्षक और उपशीर्षक लिखने के लिए किया जाता है। HTML में कुल 6 प्रकार की Headings होती हैं।

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Tag	महत्व
H1	सबसे महत्वपूर्ण Heading
H2	मुख्य उपशीर्षक
H3	उप-विषय
H4	छोटा उप-विषय
H5	कम महत्वपूर्ण Heading
H6	सबसे कम महत्वपूर्ण Heading

Paragraph Tag (P Tag)

Paragraph Tag का उपयोग सामान्य Text या विवरण (Description) लिखने के लिए किया जाता है।

<p>
Welcome to Web Technology.
</p>

Paragraph Tag Browser में Text को व्यवस्थित तरीके से प्रदर्शित करता है और स्वतः उचित Spacing प्रदान करता है।

BR Tag (Line Break Tag)

BR Tag का उपयोग नई लाइन (New Line) शुरू करने के लिए किया जाता है।

यह एक Empty Tag है, इसलिए इसका Closing Tag नहीं होता।

Welcome Students<br>
Welcome to BCA Course

Output:

Welcome Students
Welcome to BCA Course

HR Tag (Horizontal Rule)

HR Tag का उपयोग Web Page में एक Horizontal Line बनाने के लिए किया जाता है।

यह विभिन्न Sections को अलग-अलग दिखाने में सहायता करता है।

<hr>

यह भी एक Empty Tag है और इसका Closing Tag नहीं होता।

Bold Text Tag

किसी Text को मोटा (Bold) दिखाने के लिए B Tag का उपयोग किया जाता है।

<b>IndiaDada</b>

Output: IndiaDada

Strong Tag

Strong Tag Text को महत्वपूर्ण (Important) दर्शाने के लिए उपयोग किया जाता है।

<strong>Important Topic</strong>

Output: Important Topic

SEO और Accessibility के दृष्टिकोण से Strong Tag, B Tag से अधिक उपयोगी माना जाता है।

Italic Tag

Text को तिरछा (Italic) दिखाने के लिए I Tag का उपयोग किया जाता है।

<i>Web Technology</i>

Output: Web Technology

Emphasis Tag (EM)

किसी Text पर विशेष जोर (Emphasis) देने के लिए EM Tag का उपयोग किया जाता है।

<em>Important Concept</em>

Output: Important Concept

Underline Tag

Text के नीचे रेखा (Underline) खींचने के लिए U Tag का उपयोग किया जाता है।

<u>Web Development</u>

Output: Web Development

Big Tag और Small Tag

Text का आकार बड़ा या छोटा करने के लिए Big और Small Tags का उपयोग किया जाता था। आधुनिक HTML में CSS का उपयोग अधिक किया जाता है।

<big>Big Text</big>
<small>Small Text</small>

Subscript Tag (SUB)

Subscript Tag का उपयोग रासायनिक सूत्रों और गणितीय अभिव्यक्तियों में नीचे लिखने के लिए किया जाता है।

H<sub>2</sub>O

Output: H₂O

Superscript Tag (SUP)

Superscript Tag का उपयोग घात (Power) या ऊपर लिखे जाने वाले Text के लिए किया जाता है।

X<sup>2</sup>

Output: X²

HTML Text Formatting का वास्तविक उपयोग

Heading से Content को Structure मिलता है।
Paragraph से जानकारी व्यवस्थित होती है।
BR से नई लाइन बनाई जाती है।
HR से Sections अलग किए जाते हैं।
Bold और Strong से महत्वपूर्ण Text Highlight होता है।
Subscript और Superscript वैज्ञानिक सूत्रों में उपयोगी हैं।

परीक्षा हेतु महत्वपूर्ण बिंदु

HTML में कुल 6 Heading Tags होते हैं।
H1 सबसे महत्वपूर्ण Heading है।
Paragraph लिखने के लिए P Tag उपयोग किया जाता है।
BR Tag नई लाइन शुरू करता है।
HR Tag Horizontal Line बनाता है।
Strong Tag SEO के लिए B Tag से बेहतर माना जाता है।
Subscript का उदाहरण H₂O है।
Superscript का उदाहरण X² है।
BR और HR दोनों Empty Tags हैं।

HTML Comments, Attributes, View Page Source और Inspect Element

Professional Web Development में केवल HTML लिखना ही पर्याप्त नहीं होता। Developer को Code Documentation, Browser Inspection तथा Developer Tools का उपयोग करना भी आना चाहिए।

HTML Comments क्या होते हैं?

Comments HTML Code का वह भाग होते हैं जिन्हें Browser Execute नहीं करता और न ही User को दिखाता है।

Comments केवल Developers के लिए होते हैं ताकि Code को समझना और Maintain करना आसान हो सके।

ऊपर दिया गया Comment Browser पर दिखाई नहीं देगा।

Comments की आवश्यकता क्यों होती है?

Code को समझाने के लिए।
Project Documentation के लिए।
Team Work में सहयोग हेतु।
Debugging को आसान बनाने के लिए।
बड़े Projects को व्यवस्थित रखने के लिए।

Comment लिखने का Syntax

इस प्रकार बड़े Projects में प्रत्येक Section को पहचानना आसान हो जाता है।

HTML Attributes क्या होते हैं?

Attributes HTML Tags को अतिरिक्त जानकारी प्रदान करते हैं।

Attributes हमेशा Opening Tag के अंदर लिखे जाते हैं।

यहाँ lang एक Attribute है और en उसकी Value है।

Attribute Structure

भाग	विवरण
Attribute Name	Attribute का नाम
Value	Attribute का मान

सामान्य HTML Attributes

Attribute	कार्य
lang	Document Language निर्धारित करता है
href	Hyperlink Address देता है
src	Image या Media Source निर्धारित करता है
alt	Image Description प्रदान करता है
title	Tooltip Text दिखाता है
id	Unique Identifier प्रदान करता है
class	CSS Styling के लिए उपयोग होता है

View Page Source क्या है?

View Page Source Browser की वह सुविधा है जिसके माध्यम से किसी भी Website का HTML Source Code देखा जा सकता है।

यह सुविधा Web Developers को यह समझने में सहायता करती है कि कोई Website किस प्रकार बनाई गई है।

Website का HTML Structure दिखाता है।
SEO Tags देखने में सहायता करता है।
Learning और Research के लिए उपयोगी है।
Source Code Analysis में मदद करता है।

View Page Source कैसे खोलें?

Website पर Right Click करें।
View Page Source विकल्प चुनें।
या Ctrl + U दबाएँ।

इसके बाद Browser उस Page का HTML Source Code प्रदर्शित करेगा।

Inspect Element क्या होता है?

Inspect Element Browser Developer Tools का एक महत्वपूर्ण भाग है।

यह किसी Website के HTML Structure, CSS Styling और JavaScript Components को देखने तथा परीक्षण करने की सुविधा प्रदान करता है।

HTML Elements देखने के लिए।
CSS Styling Analyze करने के लिए।
Responsive Testing के लिए।
Debugging के लिए।

Inspect Element कैसे खोलें?

Website पर Right Click करें।
Inspect विकल्प चुनें।
या Keyboard से F12 दबाएँ।
या Ctrl + Shift + I दबाएँ।

Inspect Element का वास्तविक उपयोग

मान लीजिए आप किसी Website के Button का Color देखना चाहते हैं।

Inspect Tool की सहायता से आप उस Button का HTML और CSS Code देख सकते हैं।

इसी प्रकार Developer किसी भी Web Page के Layout और Design को Analyze कर सकता है।

Developer Tools क्या होते हैं?

Developer Tools Browser में उपलब्ध विशेष Tools होते हैं जो Website Development, Testing और Debugging के लिए उपयोग किए जाते हैं।

Tool	कार्य
Elements	HTML और CSS देखना
Console	JavaScript Errors देखना
Network	Page Loading Analysis
Sources	Source Files देखना
Application	Cookies और Storage देखना

Responsive Mode क्या है?

Inspect Tool में Responsive Mode उपलब्ध होता है जिसकी सहायता से Website को Mobile, Tablet और Desktop पर Test किया जा सकता है।

Mobile Testing
Tablet Testing
Desktop Testing
Responsive Design Verification

शिक्षक की विशेष सलाह

यदि आप Web Development जल्दी सीखना चाहते हैं तो प्रतिदिन किसी लोकप्रिय Website को Inspect करके उसका Structure समझने का प्रयास करें।

Google, YouTube, Amazon और Wikipedia जैसी Websites को Analyze करना एक उत्कृष्ट Learning Technique है।

परीक्षा हेतु महत्वपूर्ण बिंदु

Comments Browser में दिखाई नहीं देते।
Comments का Syntax  होता है।
Attributes अतिरिक्त जानकारी प्रदान करते हैं।
View Page Source का Shortcut Ctrl + U है।
Inspect Element का Shortcut F12 है।
Developer Tools Debugging के लिए उपयोग किए जाते हैं।
Responsive Testing Inspect Tool से की जा सकती है।
BCA परीक्षा में Comments और Inspect Element पर प्रश्न पूछे जाते हैं।

HTML Lists (Ordered List, Unordered List और Description List)

जब हमें Website पर कई Items को व्यवस्थित रूप से प्रदर्शित करना होता है, तब HTML Lists का उपयोग किया जाता है। Lists Content को पढ़ने में आसान और आकर्षक बनाती हैं।

HTML List क्या होती है?

HTML List संबंधित Items के समूह को व्यवस्थित तरीके से प्रदर्शित करने की सुविधा प्रदान करती है।

उदाहरण के लिए Subjects List, Course List, Shopping List, Menu List आदि HTML Lists की सहायता से बनाई जाती हैं।

Content को व्यवस्थित करती है।
Readability बढ़ाती है।
Navigation Menus में उपयोग होती है।
SEO Friendly Structure प्रदान करती है।

HTML Lists के प्रकार

List Type	Tag	उपयोग
Ordered List	<ol>	क्रमबद्ध सूची
Unordered List	<ul>	बुलेट सूची
Description List	<dl>	विवरण सूची

Ordered List (OL) क्या होती है?

जब Items को किसी निश्चित क्रम (Sequence) में दिखाना हो तब Ordered List का उपयोग किया जाता है।

इसमें Items के सामने Numbers, Letters या Roman Numbers दिखाई देते हैं।

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

Output:

HTML
CSS
JavaScript

Ordered List में Type Attribute

Type Attribute की सहायता से Numbering Style बदली जा सकती है।

Type	Output
1	1,2,3,4...
A	A,B,C,D...
a	a,b,c,d...
I	I,II,III,IV...
i	i,ii,iii,iv...

Unordered List (UL) क्या होती है?

जब Items को बिना किसी क्रम के केवल Bullet Points के रूप में दिखाना हो तब Unordered List का उपयोग किया जाता है।

<ul>
  <li>Computer</li>
  <li>Laptop</li>
  <li>Mobile</li>
</ul>

Output:

Computer
Laptop
Mobile

Unordered List में Type Attribute

Bullet Style बदलने के लिए Type Attribute का उपयोग किया जा सकता है।

Type	Bullet Style
disc	●
circle	○
square	■

Description List (DL) क्या होती है?

Description List का उपयोग किसी शब्द और उसके विवरण को प्रदर्शित करने के लिए किया जाता है।

इसमें तीन Tags उपयोग किए जाते हैं:

<dl> → Description List
<dt> → Description Term
<dd> → Description Definition

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Nested List क्या होती है?

जब एक List के अंदर दूसरी List बनाई जाती है तो उसे Nested List कहा जाता है।

<ul>
  <li>Web Development
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
</ul>

Nested Lists का उपयोग Menu Systems और Multi-Level Navigation में किया जाता है।

वास्तविक जीवन में उपयोग

Website Navigation Menu
Course Syllabus
Shopping List
Product Categories
FAQ Sections
Dropdown Menus
Educational Notes

शिक्षक की विशेष सलाह

BCA Practical Exam में Ordered List, Unordered List और Nested List बनाने के Programs अक्सर पूछे जाते हैं।

इसलिए केवल Theory न पढ़ें बल्कि VS Code में स्वयं Lists बनाकर अभ्यास अवश्य करें।

परीक्षा हेतु महत्वपूर्ण बिंदु

Ordered List के लिए OL Tag उपयोग किया जाता है।
Unordered List के लिए UL Tag उपयोग किया जाता है।
List Item के लिए LI Tag उपयोग किया जाता है।
Description List के लिए DL Tag उपयोग किया जाता है।
DT Description Term को दर्शाता है।
DD Description को दर्शाता है।
Nested List एक List के अंदर दूसरी List होती है।
BCA Practical में Lists पर Program अवश्य पूछा जाता है।

HTML Links (Anchor Tag) और Hyperlinks

Hyperlink क्या होता है?

Internet की सबसे महत्वपूर्ण विशेषता Hyperlink है। Hyperlink एक Web Page को दूसरे Web Page से जोड़ता है।

जब User किसी Link पर Click करता है तो Browser उसे दूसरे Page, Website, Image, PDF या किसी अन्य Resource पर ले जाता है।

Anchor Tag (A Tag) क्या है?

HTML में Link बनाने के लिए Anchor Tag (<a>) का उपयोग किया जाता है।

<a href="https://www.google.com"> Google Visit Kare </a>

यह Link Google Website खोलेगा।

Href Attribute क्या है?

Href का अर्थ Hypertext Reference होता है।

यह बताता है कि Click करने पर User को कहाँ जाना है।

<a href="https://www.youtube.com"> YouTube </a>

Absolute URL क्या है?

जब किसी Website का पूरा Web Address लिखा जाता है तो उसे Absolute URL कहते हैं।

https://www.google.com

प्रकार	उदाहरण
Absolute URL	https://www.google.com
Absolute URL	https://www.amazon.in

Relative URL क्या है?

जब हम उसी Website के किसी दूसरे Page पर Link देते हैं तो Relative URL का उपयोग किया जाता है।

<a href="about.html"> About Us </a>

यह Website के Internal Page को Open करेगा।

New Tab में Link कैसे खोलें?

Target Attribute का उपयोग किया जाता है।

<a href="https://www.google.com" target="_blank"> Open Google </a>

यह Link नए Browser Tab में खुलेगा।

Email Link बनाना

<a href="mailto:info@example.com"> Send Email </a>

Click करते ही Email Application Open हो जाएगी।

Phone Call Link

Mobile Device पर Click करने पर Call Dialer Open हो जाएगा।

Navigation Menu क्या होता है?

Navigation Menu Website के विभिन्न Pages तक पहुँचने का माध्यम होता है।

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

Anchor Tag के मुख्य Attributes

Attribute	कार्य
href	Link Address
target	Link कहाँ खुलेगा
title	Tooltip दिखाता है
download	File Download कराता है

परीक्षा हेतु महत्वपूर्ण बिंदु

Link बनाने के लिए Anchor Tag उपयोग किया जाता है।
Href Attribute Link का Address निर्धारित करता है।
Absolute URL पूरा Address होता है।
Relative URL Internal Pages के लिए उपयोग होता है।
Target="_blank" नया Tab खोलता है।
Hyperlink WWW की आधारभूत विशेषता है।
BCA Practical Exam में Anchor Tag Program अक्सर पूछा जाता है।

HTML Images (IMG Tag), Image Attributes और Image Paths

किसी भी Website को आकर्षक और User Friendly बनाने में Images की महत्वपूर्ण भूमिका होती है। HTML में Images जोड़ने के लिए IMG Tag का उपयोग किया जाता है।

HTML Image क्या होती है?

Image किसी Website पर दिखाई देने वाला Graphic Element होता है जो जानकारी को अधिक प्रभावशाली और आकर्षक बनाता है।

Web Pages पर Photos, Logos, Icons, Banners और Illustrations सभी Images की श्रेणी में आते हैं।

Website को आकर्षक बनाती है।
User Engagement बढ़ाती है।
Content को समझने में सहायता करती है।
Professional Appearance प्रदान करती है।

IMG Tag क्या है?

HTML में Image प्रदर्शित करने के लिए IMG Tag का उपयोग किया जाता है।

यह एक Empty Tag है अर्थात इसका Closing Tag नहीं होता।

Browser Image File को Load करके Web Page पर प्रदर्शित कर देता है।

Image का Basic Syntax

यह Code student.jpg नामक Image को Browser में प्रदर्शित करेगा।

SRC Attribute क्या है?

SRC का अर्थ Source होता है।

यह Browser को बताता है कि Image किस Location पर उपलब्ध है।

यदि SRC Attribute नहीं दिया जाएगा तो Browser Image नहीं दिखा पाएगा।

ALT Attribute क्या है?

ALT (Alternative Text) Attribute Image का Text Description प्रदान करता है।

यदि किसी कारण से Image Load नहीं होती, तो Browser ALT Text प्रदर्शित करता है।

SEO में सहायता करता है।
Accessibility बढ़ाता है।
Screen Readers के लिए उपयोगी।
Image Missing होने पर Description दिखाता है।

Width और Height Attribute

Image का आकार निर्धारित करने के लिए Width और Height Attributes का उपयोग किया जाता है।

Attribute	कार्य
width	चौड़ाई निर्धारित करता है
height	ऊँचाई निर्धारित करता है

Image Path क्या होता है?

Image Path वह Location होती है जहाँ Image File Stored होती है।

HTML में मुख्य रूप से दो प्रकार के Paths उपयोग किए जाते हैं।

Path Type	उदाहरण
Relative Path	images/logo.png
Absolute Path	https://example.com/logo.png

Relative Path

जब Image Project Folder के अंदर मौजूद हो तो Relative Path का उपयोग किया जाता है।

यह Method Professional Web Development में सबसे अधिक उपयोग किया जाता है।

Absolute Path

जब Image किसी अन्य Website या Server पर उपलब्ध हो तो Absolute Path का उपयोग किया जाता है।

Browser Internet से Image प्राप्त करके प्रदर्शित करेगा।

Image को Clickable Link बनाना

Anchor Tag और Image Tag को एक साथ उपयोग करके Image को Link बनाया जा सकता है।

अब Image पर Click करने से Google Website खुल जाएगी।

Student Profile Image Program

<html>
<body>

<h1>Student Profile</h1>
<img src="student.jpg"
width="250"
alt="Student Photo">

<p>Name : Ravi</p>
</body>
</html>

यह Program Student Profile Page तैयार करेगा।

Web Development में Images का उपयोग

Company Logo
Website Banner
Product Images
Profile Photos
Blog Feature Images
Educational Diagrams
E-Commerce Products

शिक्षक की विशेष सलाह

Professional Websites में हमेशा Meaningful ALT Text का उपयोग करें। इससे SEO और Accessibility दोनों बेहतर होते हैं।

Image का आकार Optimize रखें ताकि Website की Loading Speed प्रभावित न हो।

परीक्षा हेतु महत्वपूर्ण बिंदु

Image दिखाने के लिए IMG Tag उपयोग किया जाता है।
IMG एक Empty Tag है।
SRC Attribute Image का Source निर्धारित करता है।
ALT Attribute Image Description प्रदान करता है।
Width और Height Image Size निर्धारित करते हैं।
Relative और Absolute दो प्रकार के Image Paths होते हैं।
SEO के लिए ALT Attribute अत्यंत महत्वपूर्ण है।
BCA Practical Exam में Image Program अक्सर पूछा जाता है।

HTML Images (IMG Tag), Image Attributes और Image Paths

HTML Image क्या होती है?

Web Pages पर Photos, Logos, Icons, Banners और Illustrations सभी Images की श्रेणी में आते हैं।

Website को आकर्षक बनाती है।
User Engagement बढ़ाती है।
Content को समझने में सहायता करती है।
Professional Appearance प्रदान करती है।

IMG Tag क्या है?

HTML में Image प्रदर्शित करने के लिए IMG Tag का उपयोग किया जाता है।

यह एक Empty Tag है अर्थात इसका Closing Tag नहीं होता।

Browser Image File को Load करके Web Page पर प्रदर्शित कर देता है।

Image का Basic Syntax

यह Code student.jpg नामक Image को Browser में प्रदर्शित करेगा।

SRC Attribute क्या है?

SRC का अर्थ Source होता है।

यह Browser को बताता है कि Image किस Location पर उपलब्ध है।

यदि SRC Attribute नहीं दिया जाएगा तो Browser Image नहीं दिखा पाएगा।

ALT Attribute क्या है?

ALT (Alternative Text) Attribute Image का Text Description प्रदान करता है।

यदि किसी कारण से Image Load नहीं होती, तो Browser ALT Text प्रदर्शित करता है।

SEO में सहायता करता है।
Accessibility बढ़ाता है।
Screen Readers के लिए उपयोगी।
Image Missing होने पर Description दिखाता है।

Width और Height Attribute

Image का आकार निर्धारित करने के लिए Width और Height Attributes का उपयोग किया जाता है।

Attribute	कार्य
width	चौड़ाई निर्धारित करता है
height	ऊँचाई निर्धारित करता है

Image Path क्या होता है?

Image Path वह Location होती है जहाँ Image File Stored होती है।

HTML में मुख्य रूप से दो प्रकार के Paths उपयोग किए जाते हैं।

Path Type	उदाहरण
Relative Path	images/logo.png
Absolute Path	https://example.com/logo.png

Relative Path

जब Image Project Folder के अंदर मौजूद हो तो Relative Path का उपयोग किया जाता है।

यह Method Professional Web Development में सबसे अधिक उपयोग किया जाता है।

Absolute Path

जब Image किसी अन्य Website या Server पर उपलब्ध हो तो Absolute Path का उपयोग किया जाता है।

Browser Internet से Image प्राप्त करके प्रदर्शित करेगा।

Image को Clickable Link बनाना

Anchor Tag और Image Tag को एक साथ उपयोग करके Image को Link बनाया जा सकता है।

अब Image पर Click करने से Google Website खुल जाएगी।

Student Profile Image Program

<html>
<body>

<h1>Student Profile</h1>
<img src="student.jpg"
width="250"
alt="Student Photo">

<p>Name : Ravi</p>
</body>
</html>

यह Program Student Profile Page तैयार करेगा।

Web Development में Images का उपयोग

Company Logo
Website Banner
Product Images
Profile Photos
Blog Feature Images
Educational Diagrams
E-Commerce Products

शिक्षक की विशेष सलाह

Image का आकार Optimize रखें ताकि Website की Loading Speed प्रभावित न हो।

परीक्षा हेतु महत्वपूर्ण बिंदु

Image दिखाने के लिए IMG Tag उपयोग किया जाता है।
IMG एक Empty Tag है।
SRC Attribute Image का Source निर्धारित करता है।
ALT Attribute Image Description प्रदान करता है।
Width और Height Image Size निर्धारित करते हैं।
Relative और Absolute दो प्रकार के Image Paths होते हैं।
SEO के लिए ALT Attribute अत्यंत महत्वपूर्ण है।
BCA Practical Exam में Image Program अक्सर पूछा जाता है।

HTML Tables (Table Tag, TR, TD, TH, Rowspan और Colspan)

जब Website पर डेटा को Rows और Columns के रूप में व्यवस्थित करना होता है, तब HTML Tables का उपयोग किया जाता है। School Result, Employee Records, Product Details और Time Table जैसी सूचनाएँ Table के माध्यम से आसानी से प्रदर्शित की जाती हैं।

HTML Table क्या होती है?

HTML Table Rows (पंक्तियों) और Columns (स्तम्भों) से मिलकर बनी एक संरचना होती है जिसका उपयोग Data को व्यवस्थित रूप में दिखाने के लिए किया जाता है।

Table की सहायता से बड़ी मात्रा में जानकारी को आसानी से पढ़ा और समझा जा सकता है।

Data को व्यवस्थित रूप में दिखाती है।
Rows और Columns का उपयोग करती है।
Reports और Records में उपयोगी।
Educational Websites में अत्यंत महत्वपूर्ण।

Table बनाने के लिए आवश्यक Tags

Tag	कार्य
<table>	Table बनाता है
<tr>	Table Row बनाता है
<td>	Table Data Cell बनाता है
<th>	Table Heading बनाता है

Basic Table Program

सबसे पहले हम एक साधारण Table बनाएंगे।

<table border="1">
  <tr>
    <th>Name</th>
    <th>Course</th>
  </tr>

  <tr>
    <td>Ravi</td>
    <td>BCA</td>
  </tr>
</table>

Output

Name	Course
Ravi	BCA

TR Tag (Table Row)

TR Tag का उपयोग Table में नई Row बनाने के लिए किया जाता है।

प्रत्येक नई Row के लिए अलग TR Tag लिखा जाता है।

TD Tag (Table Data)

TD Tag का उपयोग Table Cell के अंदर Data लिखने के लिए किया जाता है।

यह Table के सामान्य Data को प्रदर्शित करता है।

TH Tag (Table Heading)

TH Tag Table के Header या Heading को प्रदर्शित करता है।

<th>Student Name</th>

Browser सामान्यतः TH Text को Bold और Center में दिखाता है।

Student Record Table Program

<table border="1">
  <tr>
    <th>Roll No</th>
    <th>Name</th>
    <th>Marks</th>
  </tr>

  <tr>
    <td>101</td>
    <td>Ravi</td>
    <td>88</td>
  </tr>
</table>

Rowspan क्या है?

जब किसी Cell को कई Rows में फैलाना हो तब Rowspan Attribute का उपयोग किया जाता है।

यह Cell दो Rows तक फैला रहेगा।

Rowspan Example

Colspan क्या है?

जब किसी Cell को कई Columns में फैलाना हो तब Colspan Attribute का उपयोग किया जाता है।

<th colspan="3">Student Information</th>

यह Heading तीन Columns तक फैलेगी।

Colspan Example

<table border="1">
<tr>
<th colspan="3">Student Details</th>
</tr>

<tr>
<td>101</td>
<td>Ravi</td>
<td>BCA</td>
</tr>
</table>

Table का वास्तविक जीवन में उपयोग

Student Result Sheet
College Time Table
Employee Database
Product Price List
Attendance Register
Examination Records
Inventory Management

शिक्षक की विशेष सलाह

BCA Practical Exam में सामान्य Table, Student Record Table, Rowspan और Colspan आधारित Programs बहुत अधिक पूछे जाते हैं।

इसलिए इन सभी Programs को स्वयं VS Code में बनाकर Practice अवश्य करें।

परीक्षा हेतु महत्वपूर्ण बिंदु

Table बनाने के लिए TABLE Tag उपयोग किया जाता है।
TR Table Row बनाता है।
TD Data Cell बनाता है।
TH Heading Cell बनाता है।
Rowspan कई Rows को Merge करता है।
Colspan कई Columns को Merge करता है।
Table Data को व्यवस्थित रूप में प्रदर्शित करती है।
BCA Practical में Rowspan और Colspan अत्यंत महत्वपूर्ण हैं।

HTML Forms, Form Tag, Labels और User Registration Form

Website पर User से जानकारी प्राप्त करने के लिए HTML Forms का उपयोग किया जाता है। Login Page, Registration Form, Contact Form, Admission Form और Online Applications सभी Forms के माध्यम से बनाए जाते हैं।

HTML Form क्या होता है?

HTML Form एक ऐसा Container होता है जिसकी सहायता से User से Data प्राप्त किया जाता है।

User द्वारा भरी गई जानकारी Server या Database तक भेजी जा सकती है।

Registration Form
Login Form
Contact Form
Admission Form
Online Examination Form
Feedback Form

FORM Tag क्या है?

HTML में Form बनाने के लिए FORM Tag का उपयोग किया जाता है।

सभी Input Fields FORM Tag के अंदर लिखी जाती हैं।

FORM Tag के मुख्य Attributes

Attribute	कार्य
action	Data कहाँ भेजना है
method	Data भेजने का तरीका

Action Attribute क्या है?

Action Attribute यह निर्धारित करता है कि Form Submit होने के बाद Data किस Page या Server File पर भेजा जाएगा।

Method Attribute क्या है?

Method Attribute यह निर्धारित करता है कि Data Server तक किस प्रकार भेजा जाएगा।

Method	उपयोग
GET	URL में Data भेजता है
POST	सुरक्षित रूप से Data भेजता है

Professional Websites में सामान्यतः POST Method का उपयोग किया जाता है।

Label Tag क्या है?

Label Tag Input Field का नाम प्रदर्शित करता है।

<label>Student Name</label>

Label उपयोग करने से Form अधिक User Friendly बनता है।

Input Field क्या होती है?

Input Field वह स्थान है जहाँ User अपनी जानकारी दर्ज करता है।

Input Tag HTML Forms का सबसे महत्वपूर्ण Tag माना जाता है।

Simple Registration Form Program

<form>

<label>Name</label>
<input type="text">

<label>Email</label>
<input type="email">

<label>Password</label>
<input type="password">

<input type="submit">

</form>

Student Admission Form Example

<form>

<label>Student Name</label>
<input type="text">

<label>Father Name</label>
<input type="text">

<label>Mobile Number</label>
<input type="text">

<label>Course</label>
<input type="text">

<input type="submit" value="Submit">

</form>

Form का कार्य करने का तरीका

जब User Form भरता है और Submit Button दबाता है, तब निम्न प्रक्रिया होती है:

User Data दर्ज करता है।
Browser Data एकत्र करता है।
Form Submit होता है।
Data Server तक पहुँचता है।
Server Data Process करता है।
Database में Data Store किया जा सकता है।

वास्तविक जीवन में Forms का उपयोग

College Admission Portal
Online Exam Registration
Bank Account Opening Form
E-Commerce Checkout Form
Government Application Forms
Contact Us Page
Job Application Portal

शिक्षक की विशेष सलाह

BCA Practical Exam में Registration Form, Student Form और Contact Form आधारित Programs लगभग हर वर्ष पूछे जाते हैं।

Form Tag, Action Attribute और Method Attribute के Concepts को अच्छी तरह समझना आवश्यक है।

परीक्षा हेतु महत्वपूर्ण बिंदु

Form बनाने के लिए FORM Tag उपयोग किया जाता है।
Action Attribute Data Destination निर्धारित करता है।
Method Attribute Data भेजने की विधि निर्धारित करता है।
GET और POST दो प्रमुख Methods हैं।
Input Tag Form का सबसे महत्वपूर्ण Tag है।
Label Tag User Guidance प्रदान करता है।
Registration Form Practical Exam का महत्वपूर्ण प्रश्न है।
BCA परीक्षा में GET और POST का अंतर अक्सर पूछा जाता है।

HTML Input Types एवं Complete Form Controls

HTML Forms का सबसे महत्वपूर्ण भाग Input Controls होते हैं। इनके माध्यम से User विभिन्न प्रकार की जानकारी जैसे नाम, ईमेल, मोबाइल नंबर, पासवर्ड, जन्मतिथि, फाइल आदि दर्ज कर सकता है।

Input Type क्या होता है?

Input Tag का Type Attribute यह निर्धारित करता है कि User किस प्रकार की जानकारी दर्ज करेगा।

ऊपर दिए गए उदाहरण में User सामान्य Text दर्ज कर सकता है।

मुख्य Input Types

Input Type	उपयोग
text	नाम या सामान्य टेक्स्ट
password	पासवर्ड दर्ज करना
email	ईमेल पता दर्ज करना
number	संख्यात्मक डेटा
radio	एक विकल्प चुनना
checkbox	एक से अधिक विकल्प चुनना
date	तिथि चुनना
file	फाइल अपलोड करना
submit	Form Submit करना
reset	Form Reset करना

Text Input

नाम, पता या सामान्य जानकारी दर्ज करने के लिए उपयोग किया जाता है।

Password Input

पासवर्ड दर्ज करने के लिए उपयोग किया जाता है। टाइप किए गए अक्षर छिपे रहते हैं।

Email Input

ईमेल दर्ज करने के लिए उपयोग किया जाता है। Browser ईमेल फॉर्मेट को Validate भी करता है।

Number Input

संख्यात्मक मान दर्ज करने के लिए उपयोग किया जाता है।

Radio Button

जब केवल एक विकल्प चुनना हो तब Radio Button का उपयोग किया जाता है।

Male <input type="radio" name="gender">
Female <input type="radio" name="gender">

User केवल एक विकल्प चुन सकता है।

Checkbox

जब एक से अधिक विकल्प चुनने हों तब Checkbox का उपयोग किया जाता है।

HTML <input type="checkbox">
CSS <input type="checkbox">
JavaScript <input type="checkbox">

Date Input

जन्मतिथि या किसी विशेष Date का चयन करने के लिए उपयोग किया जाता है।

File Upload Control

User से Photo, PDF या अन्य File Upload करवाने के लिए उपयोग किया जाता है।

Submit Button

Form को Server तक भेजने के लिए Submit Button उपयोग किया जाता है।

Reset Button

Form के सभी Fields को साफ करने के लिए Reset Button उपयोग किया जाता है।

Placeholder Attribute

Placeholder User को संकेत (Hint) प्रदान करता है कि Field में क्या भरना है।

Required Attribute

Required Attribute यह सुनिश्चित करता है कि User Field खाली न छोड़े।

Complete Student Registration Form

<form>

Name:
<input type="text" required>

Email:
<input type="email" required>

Password:
<input type="password">

DOB:
<input type="date">

Gender:
Male <input type="radio" name="g"> Female <input type="radio" name="g">

Skills:
HTML <input type="checkbox"> CSS <input type="checkbox"> JS <input type="checkbox">

Photo:
<input type="file">

<input type="submit"> <input type="reset">
</form>

शिक्षक की विशेष सलाह

BCA Practical Exam में Registration Form सबसे अधिक पूछा जाने वाला Program है। इसलिए प्रत्येक Input Type का प्रयोग स्वयं करके Practice अवश्य करें।

Radio Button, Checkbox, File Upload और Required Attribute पर विशेष ध्यान दें।

परीक्षा हेतु महत्वपूर्ण बिंदु

Input Tag Form का सबसे महत्वपूर्ण Tag है।
Password Type अक्षरों को छिपाता है।
Email Type Validation प्रदान करता है।
Radio Button में एक विकल्प चुना जाता है।
Checkbox में अनेक विकल्प चुने जा सकते हैं।
Date Type तिथि चयन के लिए उपयोग होता है।
File Type File Upload के लिए उपयोग होता है।
Required Attribute Field को Mandatory बनाता है।
BCA Practical Exam में Complete Registration Form अत्यंत महत्वपूर्ण है।

HTML Semantic Elements और Modern HTML5 Layout

HTML5 में Semantic Elements को Introduce किया गया ताकि Web Pages को अधिक Meaningful, SEO Friendly और User Friendly बनाया जा सके। आधुनिक Websites में Semantic Tags का उपयोग Professional Standard माना जाता है।

Semantic Elements क्या होते हैं?

Semantic Elements ऐसे HTML Tags होते हैं जो अपने अंदर मौजूद Content का अर्थ (Meaning) स्पष्ट रूप से बताते हैं।

इन Tags को देखकर Browser, Search Engine और Developer आसानी से समझ सकते हैं कि किसी Section का उद्देश्य क्या है।

Meaningful Structure प्रदान करते हैं।
SEO को बेहतर बनाते हैं।
Accessibility में सुधार करते हैं।
Code को पढ़ना और Maintain करना आसान बनाते हैं।

Non-Semantic और Semantic Elements में अंतर

Non-Semantic Tags	Semantic Tags
<div>	<header>
<span>	<nav>
Content का अर्थ स्पष्ट नहीं	Content का उद्देश्य स्पष्ट
SEO में कम उपयोगी	SEO Friendly

Header Element

Header Tag Website या Page के शीर्ष भाग (Top Section) को दर्शाता है।

<header>
<h1>My Website</h1>
</header>

Header में सामान्यतः Logo, Website Name और Navigation Menu रखा जाता है।

Nav Element

Navigation Menu को प्रदर्शित करने के लिए Nav Tag का उपयोग किया जाता है।

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

Search Engines Nav Section को Website Navigation के रूप में पहचानते हैं।

Section Element

किसी बड़े विषय को अलग-अलग भागों में विभाजित करने के लिए Section Tag का उपयोग किया जाता है।

<section>
<h2>About Us</h2>
</section>

एक Web Page में कई Sections हो सकते हैं।

Article Element

Article Tag स्वतंत्र (Independent) Content को प्रदर्शित करता है।

Blog Posts, News Articles और Educational Notes इसके सामान्य उदाहरण हैं।

<article>
<h2>HTML Introduction</h2>
<p>...</p>
</article>

Aside Element

Aside Tag मुख्य Content से संबंधित अतिरिक्त जानकारी प्रदर्शित करने के लिए उपयोग किया जाता है।

<aside>
Related Links
</aside>

Sidebars और Related Posts में इसका उपयोग किया जाता है।

Footer Element

Footer Tag Website के अंतिम भाग को दर्शाता है।

<footer>
Copyright 2027
</footer>

Footer में Copyright, Contact Details, Social Links आदि रखे जाते हैं।

HTML5 Semantic Layout Structure

<header>
  Website Header
</header>

<nav>
  Navigation Menu
</nav>

<section>
  <article>
    Main Content
  </article>
</section>

<aside>
  Sidebar Content
</aside>

<footer>
  Footer Information
</footer>

Modern Website Layout का उदाहरण

Section	कार्य
Header	Logo और Website Name
Nav	Menu Links
Section	मुख्य विषय
Article	Detailed Content
Aside	Sidebar Content
Footer	Copyright एवं Contact

SEO में Semantic Elements का महत्व

Search Engine Content को बेहतर समझता है।
Google Ranking में सहायता मिलती है।
Accessibility बेहतर होती है।
Screen Readers सही Structure पढ़ पाते हैं।
Professional HTML5 Standard माना जाता है।

शिक्षक की विशेष सलाह

आज के समय में केवल DIV आधारित Layout बनाना पर्याप्त नहीं है। Professional Websites में Semantic HTML5 Structure का उपयोग अवश्य किया जाता है।

यदि आप Frontend Development में Career बनाना चाहते हैं तो Semantic Tags की अच्छी समझ होना आवश्यक है।

परीक्षा हेतु महत्वपूर्ण बिंदु

Semantic Elements Content का अर्थ स्पष्ट करते हैं।
Header Website के शीर्ष भाग को दर्शाता है।
Nav Navigation Menu के लिए उपयोग होता है।
Section Content को भागों में विभाजित करता है।
Article स्वतंत्र Content को दर्शाता है।
Aside अतिरिक्त जानकारी के लिए उपयोग होता है।
Footer Website का अंतिम भाग होता है।
Semantic Elements SEO और Accessibility दोनों के लिए महत्वपूर्ण हैं।
BCA परीक्षा में Semantic Tags और उनके उपयोग पर प्रश्न पूछे जाते हैं।

CSS (Cascading Style Sheets) का परिचय

HTML Website का ढांचा (Structure) बनाता है जबकि CSS Website को सुंदर, आकर्षक और Professional रूप प्रदान करता है। आधुनिक Web Development में HTML और CSS दोनों का संयुक्त उपयोग किया जाता है।

CSS क्या है?

CSS का पूरा नाम Cascading Style Sheets है। यह एक Styling Language है जिसका उपयोग HTML Elements की Design, Color, Size, Layout और Appearance को नियंत्रित करने के लिए किया जाता है।

यदि HTML किसी घर की दीवारें और कमरे बनाता है तो CSS उस घर की Painting, Decoration और Interior Design का कार्य करता है।

CSS की आवश्यकता क्यों पड़ी?

HTML का मुख्य उद्देश्य केवल Content Structure बनाना है। HTML स्वयं आकर्षक Design प्रदान नहीं कर सकता।

इसी समस्या को हल करने के लिए CSS विकसित किया गया ताकि Websites को Professional Look दिया जा सके।

Website को सुंदर बनाना।
Colors जोड़ना।
Fonts नियंत्रित करना।
Layout Design बनाना।
Responsive Design तैयार करना।
User Experience बेहतर बनाना।

CSS का वास्तविक जीवन उदाहरण

कल्पना कीजिए आपने एक मकान बनाया।

कार्य	Technology
कमरे और दीवारें बनाना	HTML
रंग और सजावट करना	CSS
बिजली एवं मशीनें चलाना	JavaScript

इसी प्रकार Website में HTML Structure देता है, CSS Design देता है और JavaScript Functionality प्रदान करता है।

HTML और CSS का संबंध

HTML और CSS एक-दूसरे के पूरक हैं।

HTML बिना CSS के केवल साधारण Text दिखाता है जबकि CSS उसे आकर्षक Interface में बदल देता है।

<h1>Welcome Student</h1>

ऊपर दिया गया HTML केवल साधारण Heading दिखाएगा।

h1 {
color: blue;
font-size: 40px;
}

CSS जोड़ने पर वही Heading रंगीन और बड़ी दिखाई देगी।

CSS क्या-क्या नियंत्रित कर सकता है?

Property	उपयोग
Color	Text का रंग बदलना
Background	Background Color या Image
Font Size	Text Size नियंत्रित करना
Width	चौड़ाई नियंत्रित करना
Height	ऊँचाई नियंत्रित करना
Margin	बाहरी दूरी नियंत्रित करना
Padding	आंतरिक दूरी नियंत्रित करना
Border	सीमा रेखा बनाना

CSS की मुख्य विशेषताएँ

Website को आकर्षक बनाता है।
Code Reusability बढ़ाता है।
Website Management आसान बनाता है।
Responsive Design बनाने में सहायता करता है।
SEO Friendly User Experience प्रदान करता है।
Professional Web Development का आधार है।

CSS का उपयोग किन-किन Websites में होता है?

आज Internet पर मौजूद लगभग प्रत्येक Website CSS का उपयोग करती है।

E-Commerce Websites
Educational Portals
Government Websites
Banking Websites
Social Media Platforms
News Portals
Business Websites

CSS सीखना क्यों आवश्यक है?

यदि आप Frontend Developer, Web Designer, UI Designer या Full Stack Developer बनना चाहते हैं तो CSS सीखना अनिवार्य है।

केवल HTML जानने से Professional Website नहीं बनाई जा सकती।

HTML और CSS का संयुक्त उदाहरण

<h1>IndiaDada</h1>

h1 {
color:red;
text-align:center;
font-size:50px;
}

यह CSS Heading को लाल रंग, केंद्र में तथा बड़े आकार में प्रदर्शित करेगी।

शिक्षक की विशेष सलाह

HTML सीखने के बाद CSS सीखना सबसे महत्वपूर्ण चरण है। CSS में जितनी अधिक Practice करेंगे, उतनी बेहतर Websites बना पाएंगे।

प्रतिदिन छोटे-छोटे Design बनाकर CSS Properties का अभ्यास करें।

परीक्षा हेतु महत्वपूर्ण बिंदु

CSS का पूरा नाम Cascading Style Sheets है।
CSS Website की Styling करता है।
HTML Structure बनाता है जबकि CSS Design प्रदान करता है।
CSS Color, Font, Layout और Spacing नियंत्रित करता है।
Responsive Design बनाने में CSS महत्वपूर्ण है।
Professional Web Development में CSS अनिवार्य है।
BCA परीक्षा में CSS की परिभाषा और विशेषताएँ अक्सर पूछी जाती हैं।

CSS Types, CSS Syntax और CSS Selectors

CSS सीखने का सबसे महत्वपूर्ण भाग यह समझना है कि CSS को HTML में किस प्रकार जोड़ा जाता है तथा Selectors की सहायता से Elements को कैसे Target किया जाता है।

CSS Syntax क्या होता है?

CSS Syntax वह नियम है जिसके अनुसार Styling लिखी जाती है।

selector {
property : value;
}

यहाँ Selector बताता है कि किस Element को Style करना है, Property बताती है कि क्या बदलना है और Value बताती है कि कितना या कौन-सा Style लागू करना है।

CSS Syntax के भाग

भाग	कार्य
Selector	Element चुनता है
Property	Style का प्रकार
Value	Property का मान

h1 {
color:red;
}

यहाँ h1 Selector है, color Property है और red उसकी Value है।

CSS को HTML में जोड़ने के तरीके

HTML में CSS जोड़ने के तीन मुख्य तरीके हैं।

CSS Type	उपयोग
Inline CSS	एक ही Element पर Style
Internal CSS	एक HTML Page के लिए
External CSS	पूरी Website के लिए

Inline CSS

Inline CSS सीधे HTML Element के अंदर Style Attribute की सहायता से लिखी जाती है।

<h1 style="color:red;">
Welcome Student
</h1>

यह केवल उसी Heading पर लागू होगी।

छोटे Changes के लिए उपयोगी।
Code Reusability नहीं होती।
Professional Websites में कम उपयोग किया जाता है।

Internal CSS

Internal CSS HTML File के Head Section में Style Tag के अंदर लिखी जाती है।

<head>
<style>
h1 {
color:blue;
}
</style>
</head>

यह Style उसी HTML Page के सभी H1 Elements पर लागू होगी।

External CSS

Professional Websites में External CSS का उपयोग किया जाता है।

CSS को अलग File में लिखा जाता है और HTML से Link किया जाता है।

style.css File:

h1 {
color:green;
}

Professional Method
Code Reusability
Website Fast Management
Large Projects के लिए उपयुक्त

CSS Selectors क्या होते हैं?

Selectors यह निर्धारित करते हैं कि CSS Style किस HTML Element पर लागू होगी।

Selectors CSS का सबसे महत्वपूर्ण Concept हैं।

Element Selector

किसी HTML Tag को सीधे Target करने के लिए Element Selector का उपयोग किया जाता है।

p {
color:blue;
}

यह सभी Paragraphs का रंग नीला कर देगा।

ID Selector

किसी विशेष Element को Target करने के लिए ID Selector का उपयोग किया जाता है।

#heading {
color:red;
}

HTML:

<h1 id="heading">IndiaDada</h1>

ID पूरे Page में Unique होनी चाहिए।

Class Selector

एक ही Style कई Elements पर लागू करने के लिए Class Selector उपयोग किया जाता है।

.title {
color:green;
}

HTML:

दोनों Elements पर समान Style लागू होगी।

Universal Selector

सभी Elements को Select करने के लिए Universal Selector (*) उपयोग किया जाता है।

* {
margin:0;
padding:0;
}

यह सभी Elements का Margin और Padding हटाएगा।

Selector Priority

Selector	Priority
Inline CSS	सबसे अधिक
ID Selector	उच्च
Class Selector	मध्यम
Element Selector	कम

शिक्षक की विशेष सलाह

यदि आप Frontend Development में विशेषज्ञ बनना चाहते हैं तो ID Selector और Class Selector को अच्छी तरह समझें क्योंकि Professional Websites में इनका सबसे अधिक उपयोग किया जाता है।

External CSS का अभ्यास अवश्य करें क्योंकि Industry में यही Standard Method है।

परीक्षा हेतु महत्वपूर्ण बिंदु

CSS के तीन प्रकार हैं – Inline, Internal और External।
External CSS Professional Websites में उपयोग की जाती है।
ID Selector # चिन्ह से शुरू होता है।
Class Selector . (Dot) से शुरू होता है।
Universal Selector * चिन्ह से लिखा जाता है।
Inline CSS की Priority सबसे अधिक होती है।
Selector CSS का सबसे महत्वपूर्ण भाग है।
BCA परीक्षा में CSS Types और Selectors पर प्रश्न अवश्य पूछे जाते हैं।

CSS Colors, Fonts, Background, Border, Margin और Padding

CSS की सहायता से Website को आकर्षक, Professional और User Friendly बनाया जाता है। Colors, Fonts, Borders तथा Spacing Properties Web Design का आधार मानी जाती हैं।

CSS Color Property

Color Property का उपयोग Text का रंग बदलने के लिए किया जाता है।

h1 {
color:red;
}

इस Code से Heading का रंग लाल हो जाएगा।

Colors लिखने के तरीके

Method	Example
Color Name	red, blue, green
Hex Code	#ff0000
RGB	rgb(255,0,0)
RGBA	rgba(255,0,0,0.5)

Background Color

Background Color Property किसी Element की Background बदलने के लिए उपयोग की जाती है।

body {
background-color:lightblue;
}

इससे पूरे Web Page का Background हल्का नीला हो जाएगा।

Background Image

Website की Background में Image लगाने के लिए Background Image Property उपयोग की जाती है।

body {
background-image:url("bg.jpg");
}

Font Family Property

Font Family Text का Style निर्धारित करती है।

p {
font-family:Arial;
}

Font	उपयोग
Arial	Professional Websites
Verdana	Readable Text
Times New Roman	Formal Documents
Poppins	Modern Websites

Font Size Property

Font Size Text का आकार निर्धारित करती है।

h1 {
font-size:40px;
}

इससे Heading का आकार 40 Pixels हो जाएगा।

Font Weight Property

Text को Bold या Normal बनाने के लिए Font Weight उपयोग किया जाता है।

h1 {
font-weight:bold;
}

Text Alignment

Text को Left, Right, Center या Justify करने के लिए Text Align Property उपयोग होती है।

h1 {
text-align:center;
}

Border Property

Border किसी Element के चारों ओर सीमा रेखा बनाती है।

div {
border:2px solid black;
}

Border के प्रकार

Border Style	उदाहरण
solid	सीधी रेखा
dashed	टूटी हुई रेखा
dotted	बिंदु रेखा
double	दोहरी रेखा

Width Property

Width किसी Element की चौड़ाई निर्धारित करती है।

div {
width:500px;
}

Height Property

Height किसी Element की ऊँचाई निर्धारित करती है।

div {
height:300px;
}

Margin Property

Margin Element के बाहर की दूरी (Outer Space) निर्धारित करता है।

div {
margin:20px;
}

यह Element के चारों ओर 20px का बाहरी Space बनाएगा।

Padding Property

Padding Element के अंदर की दूरी (Inner Space) निर्धारित करता है।

div {
padding:20px;
}

यह Border और Content के बीच Space बनाएगा।

Margin और Padding में अंतर

Margin	Padding
Element के बाहर Space	Element के अंदर Space
Outer Spacing	Inner Spacing
Layout Control	Content Spacing

Complete CSS Design Example

h1 {
color:white;
background-color:blue;
font-size:40px;
text-align:center;
padding:20px;
border:3px solid black;
}

यह Code एक Professional Styled Heading तैयार करेगा।

शिक्षक की विशेष सलाह

CSS सीखते समय केवल Properties याद न करें बल्कि प्रत्येक Property को VS Code में प्रयोग करके देखें।

Margin, Padding, Border और Font Properties का अभ्यास Frontend Development की मजबूत नींव बनाता है।

परीक्षा हेतु महत्वपूर्ण बिंदु

Color Property Text का रंग बदलती है।
Background Color Element का Background बदलती है।
Font Family Text Style निर्धारित करती है।
Font Size Text का आकार बदलती है।
Border सीमा रेखा बनाती है।
Width और Height Element का आकार नियंत्रित करते हैं।
Margin बाहरी दूरी है।
Padding आंतरिक दूरी है।
BCA Practical Exam में Margin और Padding का अंतर अक्सर पूछा जाता है।

CSS Box Model, Display Property और Layout Design

CSS का सबसे महत्वपूर्ण Concept Box Model है। Professional Website Design, Responsive Layout और Modern UI Development की नींव CSS Box Model पर आधारित होती है।

CSS Box Model क्या है?

CSS में प्रत्येक HTML Element को एक Box माना जाता है। Browser किसी भी Element को Box के रूप में Render करता है।

यह Box चार मुख्य भागों से मिलकर बनता है।

Content
Padding
Border
Margin

Box Model Structure

Margin

Border

Padding

Content

Content सबसे अंदर होता है जबकि Margin सबसे बाहर होता है।

Content Area

Content Area वह भाग है जहाँ वास्तविक Text, Image या अन्य Data दिखाई देता है।

div {
width:300px;
height:200px;
}

Width और Height Content Area का आकार निर्धारित करते हैं।

Padding क्या है?

Padding Content और Border के बीच की दूरी होती है।

div {
padding:20px;
}

Padding बढ़ाने पर Content Border से दूर चला जाता है।

Border क्या है?

Border Element के चारों ओर सीमा रेखा बनाता है।

div {
border:3px solid blue;
}

Margin क्या है?

Margin Element के बाहर की दूरी को नियंत्रित करता है।

div {
margin:30px;
}

Margin Layout में Elements के बीच Space बनाने के लिए उपयोग किया जाता है।

Complete Box Model Example

.box{
width:300px;
height:150px;
padding:20px;
border:2px solid black;
margin:30px;
}

Width और Height Property

Property	कार्य
Width	Element की चौड़ाई निर्धारित करता है
Height	Element की ऊँचाई निर्धारित करता है

div{
width:500px;
height:250px;
}

Display Property क्या है?

Display Property यह निर्धारित करती है कि कोई HTML Element Browser में किस प्रकार दिखाई देगा।

display:block;
display:inline;
display:inline-block;

Block Elements

Block Elements पूरी Width घेर लेते हैं और नई Line से शुरू होते हैं।

Block Elements
div
p
h1-h6
section

div {
display:block;
}

Inline Elements

Inline Elements केवल उतनी ही जगह लेते हैं जितनी उनके Content को आवश्यकता होती है।

Inline Elements
span
a
strong
em

span {
display:inline;
}

Inline-Block Elements

Inline-Block Element Inline की तरह एक ही Line में रहता है लेकिन Block की तरह Width और Height स्वीकार करता है।

.box{
display:inline-block;
width:200px;
height:100px;
}

Block और Inline में अंतर

Block	Inline
नई Line से शुरू होता है	नई Line नहीं लेता
Width बदल सकते हैं	Width सीमित रहती है
Height लागू होती है	Height सामान्यतः लागू नहीं होती
पूरी Row घेरता है	केवल Content जितनी जगह लेता है

Professional Card Layout Example

.card{
width:300px;
padding:20px;
border:1px solid #ddd;
margin:15px;
display:inline-block;
}

इसी Concept का उपयोग E-Commerce Websites, Blogs और Dashboard Cards में किया जाता है।

शिक्षक की विशेष सलाह

यदि आपको Frontend Development में Expert बनना है तो Box Model को पूरी तरह समझना अनिवार्य है।

90% Layout Problems Margin, Padding, Width, Height और Display Property से जुड़ी होती हैं।

परीक्षा हेतु महत्वपूर्ण बिंदु

CSS Box Model के चार भाग हैं – Content, Padding, Border, Margin।
Padding Content और Border के बीच Space है।
Margin Element के बाहर Space है।
Border सीमा रेखा बनाता है।
Block Element पूरी Width घेरता है।
Inline Element केवल Content जितनी जगह लेता है।
Inline-Block Width और Height स्वीकार करता है।
BCA Practical और Viva में Box Model सबसे महत्वपूर्ण Topic माना जाता है।

Position Property क्या है?

Position Property यह निर्धारित करती है कि किसी HTML Element को Web Page पर किस स्थान पर प्रदर्शित किया जाएगा।

position:static;
position:relative;
position:absolute;
position:fixed;
position:sticky;

Position Types

Position	कार्य
Static	Default Position
Relative	मूल स्थान से Move
Absolute	Parent के अनुसार Position
Fixed	Screen पर स्थिर रहता है
Sticky	Scroll होने पर चिपक जाता है

Position

कार्य

Static

Default Position

Relative

मूल स्थान से Move

Absolute

Parent के अनुसार Position

Fixed

Screen पर स्थिर रहता है

Sticky

Scroll होने पर चिपक जाता है

Static Position

यह सभी Elements की Default Position होती है।

.box{
position:static;
}

इस Position में Top, Left, Right, Bottom कार्य नहीं करते।

Relative Position

Relative Position Element को उसकी मूल स्थिति से Move करने की सुविधा देती है।

.box{
position:relative;
top:20px;
left:30px;
}

Absolute Position

Absolute Position Parent Element के अनुसार कार्य करती है।

.box{
position:absolute;
top:50px;
left:100px;
}

Menus, Popups और Custom Layouts में इसका उपयोग किया जाता है।

Fixed Position

Fixed Element Screen पर स्थिर रहता है चाहे User Scroll करता रहे।

.navbar{
position:fixed;
top:0;
width:100%;
}

Sticky Navigation Bars में इसका उपयोग किया जाता है।

Sticky Position

Sticky Position सामान्य Element की तरह कार्य करती है लेकिन Scroll करने पर निर्धारित स्थान पर चिपक जाती है।

.menu{
position:sticky;
top:0;
}

Flexbox क्या है?

Flexbox CSS Layout System है जिसका उपयोग Responsive और Flexible Layout बनाने के लिए किया जाता है।

आज लगभग सभी आधुनिक Websites Flexbox का उपयोग करती हैं।

Flex Container

.container{
display:flex;
}

Display Flex लिखते ही Container के सभी Child Elements Flex Items बन जाते हैं।

Flex Direction

.container{
display:flex;
flex-direction:row;
}

Value

कार्य

row

Horizontal Layout

column

Vertical Layout

Justify Content

Main Axis पर Elements की Position निर्धारित करता है।

.container{
justify-content:center;
}

Value

कार्य

center

Center Alignment

space-between

बराबर दूरी

space-around

चारों ओर Space

Align Items

Cross Axis पर Elements को Align करता है।

.container{
align-items:center;
}

Complete Flexbox Example

.container{
display:flex;
justify-content:space-between;
align-items:center;
}

.box{
width:200px;
height:100px;
}

Navigation Bar Layout

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px;
}

Professional Navigation Menus इसी Concept पर बनाए जाते हैं।

Card Layout Example

.cards{
display:flex;
gap:20px;
}

.card{
width:300px;
padding:20px;
}

E-Commerce Websites और Blogs में Card Layout का उपयोग किया जाता है।

Modern Website Layout Structure

Header
Navigation Bar
Hero Section
Content Section
Cards Section
Sidebar
Footer

इन सभी Layouts को Flexbox और Position Properties की सहायता से बनाया जाता है।

शिक्षक की विशेष सलाह

आज Industry में Float Layout लगभग समाप्त हो चुका है। Flexbox और CSS Grid आधुनिक Web Development के Standard Layout Systems हैं।

यदि आप Frontend Developer बनना चाहते हैं तो Flexbox का प्रतिदिन अभ्यास करें।

परीक्षा हेतु महत्वपूर्ण बिंदु

Position Property Element की Location नियंत्रित करती है।
Static Default Position है।
Relative मूल स्थान से Move करती है।
Absolute Parent के अनुसार कार्य करती है।
Fixed Screen पर स्थिर रहती है।
Sticky Scroll पर चिपक जाती है।
Flexbox Responsive Layout बनाने के लिए उपयोग होता है।
Display:flex Flex Container बनाता है।
Justify Content Main Axis को नियंत्रित करता है।
Align Items Cross Axis को नियंत्रित करता है।
BCA Practical और Viva में Flexbox पर प्रश्न अक्सर पूछे जाते हैं।

Responsive Web Design क्या है?

Responsive Design वह तकनीक है जिसमें Website सभी Screen Sizes पर सही तरीके से दिखाई देती है।

Website का Layout, Images, Text और Navigation Screen Size के अनुसार स्वतः Adjust हो जाते हैं।

Mobile Friendly Design
Tablet Compatible Layout
Desktop Optimization
Better User Experience
Google SEO Friendly

Responsive Design की आवश्यकता

आज Internet Users का बड़ा हिस्सा Mobile Devices का उपयोग करता है। यदि Website Mobile Friendly नहीं होगी तो Users Website छोड़ सकते हैं।

Responsive Website	Non Responsive Website
हर Device पर सही दिखती है	Layout टूट जाता है
SEO Friendly	Google Ranking प्रभावित
बेहतर User Experience	Poor User Experience

Viewport क्या होता है?

Viewport Browser को बताता है कि Website विभिन्न Devices पर कैसे Render होगी।

Responsive Website बनाने के लिए यह Meta Tag अनिवार्य माना जाता है।

Media Query क्या होती है?

Media Query CSS की ऐसी तकनीक है जो Screen Size के अनुसार अलग-अलग Styles लागू करती है।

@media (max-width:768px){
h1{
font-size:24px;
}
}

जब Screen Width 768px या उससे कम होगी तब यह Style लागू होगी।

Media Query का Syntax

@media(condition){
CSS Code
}

Condition के आधार पर Browser तय करता है कि कौन-सी Styling लागू करनी है।

Common Breakpoints

Device	Screen Width
Mobile	0 - 767px
Tablet	768px - 1023px
Laptop	1024px - 1439px
Desktop	1440px+

Mobile First Design क्या है?

Mobile First Design में सबसे पहले Mobile Layout बनाया जाता है और उसके बाद Tablet तथा Desktop Layout विकसित किए जाते हैं।

Google भी Mobile First Indexing को प्राथमिकता देता है।

Google Recommended Method
Fast Loading Website
Better SEO Performance
Improved Mobile Experience

Mobile First Example

h1{
font-size:24px;
}

@media(min-width:768px){
h1{
font-size:36px;
}
}

यह Code Mobile पर छोटी तथा Tablet/Desktop पर बड़ी Heading दिखाएगा।

Responsive Images

Images को Responsive बनाने के लिए Width को Percentage में सेट किया जाता है।

img{
max-width:100%;
height:auto;
}

अब Image किसी भी Screen पर सही आकार में दिखाई देगी।

Responsive Navigation Menu

.navbar{
display:flex;
flex-wrap:wrap;
}

यह Navigation Menu को विभिन्न Screen Sizes पर व्यवस्थित रखता है।

Responsive Card Layout

.cards{
display:flex;
flex-wrap:wrap;
gap:20px;
}

Flex Wrap Property Cards को Mobile पर नीचे तथा Desktop पर एक Row में दिखाती है।

Modern Responsive Website Structure

Responsive Header
Mobile Navigation
Flexible Content Area
Responsive Images
Adaptive Cards
Responsive Footer

Google और Responsive Design

Google Mobile Friendly Websites को Search Results में अधिक प्राथमिकता देता है।

इसलिए Responsive Design केवल User Experience के लिए ही नहीं बल्कि SEO के लिए भी अत्यंत महत्वपूर्ण है।

शिक्षक की विशेष सलाह

आज के समय में Web Developer बनने के लिए Responsive Design सीखना अनिवार्य है।

हर HTML और CSS Project को Mobile, Tablet और Desktop तीनों Devices पर Test करने की आदत विकसित करें।

परीक्षा हेतु महत्वपूर्ण बिंदु

Responsive Design सभी Devices पर Website को सही दिखाती है।
Viewport Meta Tag Responsive Design के लिए आवश्यक है।
Media Query Screen Size के अनुसार Style बदलती है।
Google Mobile First Indexing का उपयोग करता है।
Mobile First Design आधुनिक Web Development का Standard है।
Responsive Images के लिए max-width:100% उपयोग किया जाता है।
Media Query BCA Practical और Viva का महत्वपूर्ण Topic है।
Responsive Website SEO Ranking को बेहतर बनाती है।

JavaScript, XML, Domain Name, Hosting और Website Publishing

Web Technology का अंतिम तकनीकी भाग JavaScript, XML, Domain Name System और Web Hosting से संबंधित है। किसी भी Website को Internet पर Publish करने के लिए इन Concepts को समझना आवश्यक है।

JavaScript क्या है?

JavaScript एक Client Side Scripting Language है जिसका उपयोग Website को Interactive बनाने के लिए किया जाता है।

HTML Structure बनाता है, CSS Design देता है और JavaScript Website में Functionality जोड़ता है।

Button Click Events
Form Validation
Popup Messages
Dynamic Content
Interactive User Interface

JavaScript जोड़ने का तरीका

यह Program Browser में Message Box प्रदर्शित करेगा।

Variables क्या होते हैं?

Variables Data को Store करने के लिए उपयोग किए जाते हैं।

let name = "Ravi";
let age = 20;

JavaScript Data Types

Data Type	उदाहरण
String	"IndiaDada"
Number	100
Boolean	true / false
Array	[1,2,3]

Functions क्या होते हैं?

Function एक ऐसा Block होता है जो किसी विशेष कार्य को पूरा करता है।

function welcome(){
alert("Welcome");
}

Events क्या होते हैं?

जब User कोई Action करता है तो Event Trigger होता है।

<button onclick="welcome()">
Click Me
</button>

Event	कार्य
onclick	Click होने पर
onchange	Value बदलने पर
onmouseover	Mouse ले जाने पर

DOM (Document Object Model)

DOM HTML Document का Tree Structure होता है जिसे JavaScript द्वारा नियंत्रित किया जा सकता है।

document.getElementById("demo");

DOM की सहायता से HTML Content को Dynamic बनाया जाता है।

XML क्या है?

XML का पूरा नाम Extensible Markup Language है।

इसका उपयोग Data को Store और Transfer करने के लिए किया जाता है।

HTML और XML में अंतर

HTML	XML
Data Display	Data Storage
Predefined Tags	User Defined Tags
Presentation	Data Exchange

Domain Name क्या है?

Domain Name किसी Website का Internet Address होता है।

google.com
wikipedia.org
indiadada.com
amazon.in

Domain Name याद रखने में आसान होता है जबकि वास्तविक Server Address IP Address होता है।

DNS (Domain Name System)

DNS Domain Name को IP Address में Convert करता है।

जब User Browser में Domain लिखता है तो DNS संबंधित Server का IP खोजता है।

indiadada.com
↓
Server IP Address

Web Hosting क्या है?

Web Hosting वह सेवा है जहाँ Website की Files Store की जाती हैं।

Hosting Type	उपयोग
Shared Hosting	Small Websites
VPS Hosting	Medium Projects
Dedicated Hosting	Large Websites
Cloud Hosting	Scalable Projects

Website Publishing Process

Website Publish करने के लिए निम्न चरण पूरे किए जाते हैं:

Website Design करना
Domain Name खरीदना
Web Hosting खरीदना
Domain को Hosting से Connect करना
Website Files Upload करना
Website Live करना

Complete Website Workflow

HTML + CSS + JavaScript
↓
Website Development
↓
Domain Purchase
↓
Hosting Setup
↓
Publishing
↓
Live Website

शिक्षक की विशेष सलाह

BCA विद्यार्थियों को केवल HTML और CSS तक सीमित नहीं रहना चाहिए। JavaScript, Domain और Hosting की मूलभूत समझ भी विकसित करनी चाहिए क्योंकि यही Professional Web Development का आधार है।

परीक्षा हेतु महत्वपूर्ण बिंदु

JavaScript Website को Interactive बनाती है।
Function किसी कार्य को बार-बार उपयोग करने योग्य बनाता है।
DOM HTML Document को नियंत्रित करता है।
XML Data Storage और Transfer के लिए उपयोग होता है।
Domain Name Website का Address होता है।
DNS Domain को IP Address में बदलता है।
Hosting Website Files को Store करती है।
Website Publish करने के लिए Domain और Hosting दोनों आवश्यक हैं।
BCA परीक्षा में HTML और XML का अंतर अक्सर पूछा जाता है।

Chapter Revision, Questions, MCQ, FAQ & SEO Package

Chapter Summary

इस अध्याय में हमने Web Technology की मूलभूत अवधारणाओं का अध्ययन किया। WWW, Website, Browser, Server, HTML, CSS, JavaScript, XML, Domain Name, DNS, Hosting तथा Website Publishing Process को विस्तार से समझा।

HTML Website का Structure बनाता है, CSS Design प्रदान करता है और JavaScript Website को Dynamic एवं Interactive बनाती है।

Memory Tricks

HTML = Structure
CSS = Design
JavaScript = Functionality
DNS = Domain → IP Conversion
Hosting = Website Storage
Domain = Website Address
WWW = World Wide Web

Short Answer Questions

WWW क्या है?
Web Browser क्या है?
HTML का पूरा नाम लिखिए।
CSS क्या है?
JavaScript का उपयोग क्या है?
Domain Name क्या है?
DNS क्या है?
Hosting क्या है?
XML क्या है?
Hyperlink क्या है?

Long Answer Questions

HTML और CSS में अंतर स्पष्ट कीजिए।
Static और Dynamic Website में अंतर लिखिए।
CSS Box Model का चित्र सहित वर्णन कीजिए।
HTML Forms एवं Input Types का वर्णन कीजिए।
Flexbox Layout क्या है? उदाहरण सहित समझाइए।
Responsive Design एवं Media Query पर विस्तृत टिप्पणी लिखिए।
JavaScript की विशेषताएँ लिखिए।
Domain Name और DNS को उदाहरण सहित समझाइए।
Website Publishing Process का वर्णन कीजिए।
XML एवं HTML में अंतर लिखिए।

Practical Viva Questions

HTML और CSS का संबंध क्या है?
DIV और SPAN में क्या अंतर है?
Class और ID Selector में अंतर बताइए।
Margin और Padding में अंतर बताइए।
GET और POST Method में अंतर बताइए।
Block और Inline Element क्या हैं?
Flexbox क्या है?
Media Query क्यों उपयोग की जाती है?
Domain और Hosting में अंतर बताइए।
JavaScript किस प्रकार की Language है?

Top 25 MCQ Test

प्रश्न	उत्तर
HTML का पूरा नाम क्या है?	HyperText Markup Language
CSS का पूरा नाम क्या है?	Cascading Style Sheets
WWW का पूरा नाम?	World Wide Web
HTML में Link बनाने का Tag?	A Tag
Image दिखाने का Tag?	IMG Tag
Table Heading Tag?	TH
Form Tag?	FORM
Password Field Type?	Password
CSS Selector जो # से शुरू होता है?	ID Selector
CSS Selector जो . से शुरू होता है?	Class Selector
JavaScript का उपयोग?	Interactivity
DNS का कार्य?	Domain को IP में बदलना
Hosting का कार्य?	Website Files Store करना
XML का उपयोग?	Data Storage
Responsive Design का उद्देश्य?	All Devices Support
Display Flex किस Layout के लिए?	Flexbox
Border Property क्या करती है?	Boundary बनाती है
Padding कहाँ होती है?	Content और Border के बीच
Margin कहाँ होती है?	Element के बाहर
Viewport Meta Tag किसलिए?	Responsive Design
DOM का पूरा नाम?	Document Object Model
External CSS किस Tag से जोड़ी जाती है?	Link Tag
Website Address क्या कहलाता है?	Domain Name
Google किस प्रकार की Website है?	Dynamic Website
HTML5 Semantic Tag का उदाहरण?	Header

Previous Year Exam Style Questions

HTML और XML में अंतर लिखिए।
CSS के प्रकार समझाइए।
HTML Form का उदाहरण दीजिए।
JavaScript के उपयोग लिखिए।
DNS एवं Hosting पर संक्षिप्त टिप्पणी लिखिए।

Frequently Asked Questions (FAQ)

Q1. HTML और CSS में कौन अधिक महत्वपूर्ण है?

दोनों समान रूप से महत्वपूर्ण हैं। HTML Structure बनाता है और CSS Design प्रदान करता है।

Q2. क्या JavaScript सीखना आवश्यक है?

हाँ, आधुनिक Web Development के लिए JavaScript आवश्यक है।

Q3. Domain और Hosting दोनों क्यों आवश्यक हैं?

Domain Address प्रदान करता है जबकि Hosting Files Store करती है।

Q4. Responsive Design क्यों जरूरी है?

Mobile Users को बेहतर अनुभव देने और SEO सुधारने के लिए।

Q5. Flexbox कहाँ उपयोग होता है?

Responsive Layout और Modern UI Design में।

Conclusion

Web Technology आधुनिक Internet की नींव है। HTML, CSS, JavaScript, XML, Domain Name, DNS और Hosting की समझ किसी भी विद्यार्थी को Professional Web Development की दिशा में आगे बढ़ने में सहायता करती है।

नियमित अभ्यास, Practical Projects और Coding Practice के माध्यम से आप Frontend Developer, Web Designer या Full Stack Developer के रूप में सफल करियर बना सकते हैं।

SEO Package

SEO Title: BCA Web Technology Notes in Hindi | HTML CSS JavaScript Complete Guide

Meta Description: BCA Web Technology Complete Notes in Hindi. HTML, CSS, JavaScript, XML, Domain, Hosting, MCQ, Viva Questions and Exam Notes.

Focus Keyword: BCA Web Technology Notes Hindi

Secondary Keywords: HTML Notes Hindi, CSS Tutorial Hindi, JavaScript Notes Hindi, BCA Computer Notes, Web Technology MCQ

Slug: bca-web-technology-notes-hindi

Feature Image Prompt

Ultra HD Educational Feature Image for "BCA Web Technology Complete Notes 2026". Show HTML, CSS, JavaScript, XML, Domain Name, DNS, Web Hosting, Responsive Design, Website Development Workflow, Laptop Screen with Coding Interface, Modern Blue-Purple Technology Theme, Digital Network Background, Professional Academic Design, Student Friendly Visuals, Hindi Typography "BCA Web Technology Complete Notes", IndiaDada.com Branding, YouTube Thumbnail Quality, 4K Resolution, Highly Detailed, Modern Educational Poster.

📚 INDIA DADA STUDY HUB

Continue Learning With IndiaDada

UPSC, SSC CGL, UPTET, Current Affairs, Government Jobs, School Education, Higher Education, Notes, PDF, MCQ, PYQ, Mock Tests और Exam Preparation की सम्पूर्ण सामग्री अब एक ही प्लेटफॉर्म पर।

📰

Daily Current Affairs

Daily Current Affairs Notes, PDF & Analysis

🎯

Current Affairs MCQ

Daily Quiz, Practice Sets & Mock Questions

🇮🇳

UPSC Preparation

Prelims, CSAT, Mains Notes & PYQs

📑

SSC CGL

Notes, Previous Papers & Mock Tests

🧠

UPTET Preparation

Latest Notes, MCQ & Practice Sets

💼

Government Jobs

Latest Sarkari Naukri & Recruitment Updates

🚀 Stay Connected With IndiaDada.com

Daily Current Affairs, UPSC, SSC CGL, UPTET, Government Jobs, Previous Year Papers, Notes, MCQ, Mock Tests तथा Latest Exam Updates प्राप्त करने के लिए IndiaDada.com के साथ जुड़े रहें।

Visit IndiaDada.com

```