HTML-XHTML सीखिए Step by Step – आसान Tutorial के माध्‍यम से।

Professional Web Development

एक समय एसा था जब हमें Web Pages Write करने के लिए केवल एक Language HTML को ही सीखना होता था। लेकिन आज समय बदल चुका है। आज विभिन्‍न प्रकार के Effective व Attractive Web Pages Create करने के लिए हमें कई नई Technologies को सीखना जरूरी हो गया है। आज के समय में एक अच्‍छा Web Page Create करने के लिए हमें HTML, XHTML, CSS व थोडा बहुत JavaScript जरूर सीखना पडता है। Click the Title to read more…

Web Development Environment

HTML (Hypertext Markup Language) Internet या World Wide Web पर सबसे ज्‍यादा उपयोग में ली जाने वाली भाषा है। Internet पर दिखाई देने वाला हर Web Page मूल रूप से HTML में ही बना हुआ है। जैसाकि इसके नाम से ही हमें पता चलता है कि ये एक Markup Language है, जो कि किसी Document के Contents की Markingकरने का काम करता है। इस Language को सीखना उतना ही सरल है, जितना किसी Paper Document मे किसी जरूरी जानकारी को Underline, Bold या Italic करके Mark करना। Click the Title to read more…

Local Web Server Setup with XAMPP

जब Website अथवा Web Application Development का काम किया जाता है, तब हर Page को Test करने के लिये Web Server पर Store करना जरूरी होता है, ताकि हम जान सकें कि हमारा Web Page, Online होने पर कैसा दिखाई देगा और किस तरह से Behave करेगा। लेकिन किसी भी Webpage को Local Computer पर Test करना उपयुक्त रहता है क्योंकि हर Testing के लिये बार-बार पेज को Online Web Server पर Upload करने में काफी समय लगता है। इसलिये यदि आप Web Development Technology को सीख रहे हैं, तो सबसे पहले अपना Localhost Set कीजिये। Click the Title to read more…

Creating First HTML Page

चलिए, अब हम पहला HTML Web Page बनाते हैं। इस Page द्वारा हम विभिन्‍न प्रकार के Basic Concepts को समझ सकते हैं। Click the Title to read more…

HTML Tags and Elements

यदि हम अपने Example की पहली व आखिरी Code Line को देखें, तो हम एक HTML Tag Pair को देख सकते हैं जिसमें <html></html> लिखा गया है। दो Opening and Closing Angle Brackets व उसमें लिखे गए Texts को Tagकहा जाता है। हम देख सकते हैं कि हमारे Example में बहुत सारे Tags का प्रयोग किया गया है। Click the Title to read more…

Head and Body Section of Web Page

हम जब भी कभी कोई Web Page Create करते हैं, तब हमारे Page के हमेंशा दो मुख्‍य हिस्‍से होते हैं, जिन्‍हें Head Section व Body Section कहते हैं। ये दोनों ही हिस्‍से <html></html> Element के Child Sections होते हैं और इनमें हमेंशा <head> व <body> Elements होते हैं। Click the Title to read more…

Why Style Sheet is Important

जब W3C (World Wide Web Consortium) जो कि विभिन्‍न Web Standard तय करने का काम करता है, ने जब HTML का तीसरा Version Release किया था, तब उन्‍होंने किसी Web Document को Stylish बनाने से सम्‍बंधित सभी Markups को इसमें Include किया था, ताकि एक Web Page को अच्‍छा दिखाया जा सके। Click the Title to read more…

What is XHTML 

जब W3C ने HTML का 4.1 Version Release किया, तब उन्‍होंने Document के Style से सम्‍बंधित सभी Markup को Deprecated Mark कर दिया यानी उन्‍होंने तय कर लिया कि HTML के Future Versions में इन HTML Markups को Remove कर दिया जाएगा। एसा उन्‍होंने इसलिए किया था, ताकि लोग Web Pages के Structure को Web Pages के Style से अलग Develop करें।  Click the Title to read more…

HTML V/s XHTML

XHTML के नियमों को समझ लें, तो हम इन दोनों Languages के बीच के आपसी अन्‍तर को भी समझ सकते हैं। XHTML के विभिन्‍न Restrictions व विशेषताएं निम्‍नानुसार हैं: Click the Title to read more…

Why Should Learn Web Languages

आज बहुत सारे एसे Software उपलब्‍ध हैं, जिनका प्रयोग करके बहुत ही आसानी से Web Pages Create किए जा सकते हैं। Microsoft FrontPage व Macromedia Dreamweaver दो ऐसे ही Professional Web Site Development Tools हैं, जिनका प्रयोग हम ना केवल Web Pages Create करने के लिए बल्कि पूरी की पूरी Web Site Create करने व उन्‍हें Manage करने के लिए उपयोग में ले सकते हैं। लेकिन इन Software को खरीदने की जरूरत नहीं है। हम बडी ही आसानी से Notepad का प्रयोग करके भी अपने Web Pages Create कर सकते हैं। Click the Title to read more…

Creating First Web Page Step By Step

एक Web Page बनाने से सम्‍बंधित सभी जरूरी बातों को हमने जान लिया है। अब हम एक Web Page बनाएंगे और किसी भी Web Page को बनाने के लिए जिन Steps को Follow किया जाता है, उन्‍हें जानेंगे।

  • सबसे पहले Notepad Open करें अथवा यदि आप MS-FrontPage या Dreamweaver जैसे किसी Web Authoring Tool  का प्रयोग कर रहे हैं, तो उसे Start करके उसके Code Window में जाएं। बेहतर यही है कि आप Notepad से शुरूआत करें।

 Click the Title to read more…

XHTML Webpage Basic Structure

अभी तक हमने एक Basic XHTML Document व उससे सम्‍बंधित विभिन्‍न जरूरी व Basic बातों को जाना। अब हम एक Basic XHTML Document के Structure को थोडा गहराई से समझेंगे। हर XHTML Document में एक मुख्‍य Elements <html></html> होता हैं, बाकि के सभी Elements इसी Tag Pair के अन्‍दर लिखे जाते हैं, इसलिए सामान्‍यतया इस Element को Root Element की कहा जाता है। Click the Title to read more…

XHTML Attribute Groups

Attributes किसी भी Element की कुछ Extra Properties को तय करने का काम करते हैं, तकि Element कुछ Extra काम कर सके। हर Attribute का एक नाम होता है और उसमें एक मान Store किया जाता है। उदाहरण के लिए xml:langनाम का Attribute उस Language को Describe करता है, जिसे Element में उपयोग में लिया जा रहा है, जबकि कोईमान EN-US इस बात को Indicate करता है कि Element में उपयोग में ली जाने वाली Language U. S. English है। Click the Title to read more…

Basic Text Formatting Elements

अभी तक हमने विभिन्‍न प्रकार की जरूरी Basic बातों को जाना। अब हम Web Browser में दिखाई देने वाले Contents के Texts को Format करने से सम्‍बंधित विभिन्‍न प्रकार के Tags को उपयोग में लेना सीखेंगे। Click the Title to read more…

Presentational Elements

जिस तरह से हम किसी Word Processor में अपने Text को अच्‍छी तरह से Display करने के लिए विभिन्‍न प्रकार के Formatting Options Use करते हैं और विभिन्‍न Texts को Highlight करने के लिए Bold, Italic, Underline आदि करते हैं, ठीक उसी तरह से हम हमारे Web Page के किसी Text को भी Bold, Italic, Underline आदि करने के लिए विभिन्‍न प्रकार के Elements का प्रयोग कर सकते हैं। इन सभी Formatting Elements को Presentational Elements कहते हैं। Click the Title to read more…

Phrase Elements

अब हम इसी तरह के विभिन्‍न Presentational Elements के बारे में जानेंगे। ये Elements मूल रूप से केवल Document के Presentation से सम्‍बंधित होते हैं और Document के Structure से इनका कोई सम्‍बंध नहीं होता है, फिर भी इन Elements को Transitional व Strict XHTML 1.0 दोनों में ही Available रखा गया है। ये सभी Elements सभी Universal व UI Event Attributes को उपयोग में ले सकते हैं। Click the Title to read more…

Ordered and Unordered Lists

Lists का प्रयोग करके हम हमारे Text को ज्‍यादा बेहतर तरीके से Organize कर सकते हैं। हम XHTML में तीन तरह की Lists Create कर सकते हैं, जो निम्‍नानुसार हैं:

  • Unordered Lists, जो कि एक Bulleted List Create करता है।
  • Ordered Lists, जो कि Characters या Numbers की एक Sequencial List Create करता है।
  • Definition Lists, जो हमें किसी Term व उसकी Definition को Specify करने की सुविधा देता है।

 Click the Title to read more…

Special Elements

हम हमारे Document में विभिन्‍न प्रकार के Alphanumerical Characters को उपयोग में लेते हैं, लेकिन हम उन Characters को अपने Document में सामान्‍य तरीके से Use नहीं कर सकते हैं, जिनका XHTML Document के लिए Special Meaning होता है। Click the Title to read more…

Links and Navigation

Web को Link ही वह माध्‍यम है, जो अन्‍य Documents से अलग बनाता है, क्‍योंकि Web पर हम विभिन्‍न Documents को आपस में Connect कर सकते हैं और Directly वहां पहुंच सकते हैं, जहां जाना चाहते हैं। इस Links को Hyperlink का जाता है और ये Links ही Web की सफलता का मुख्‍य Secret हैं। Click the Title to read more…

Directories and Directory Structure

जिस तरह से हमारी Hard Disk पर विभिन्‍न प्रकार के Folders होते हैं, ठीक उसी तरह से विभिन्‍न प्रकार की Files को Hold करने के लिए हम हमारी Web Site में भी विभिन्‍न प्रकार के Folders बनाते हैं, जिन्‍हें Directories कहते हैं। सामान्‍यतया एक Web Site में कई Directories होती हैं और सभी Directories में विभिन्‍न प्रकार की Web Site Related Files होती हैं। Click the Title to read more…

What a URL Is Made Up Of

एक Web URL कई चीजों से मिलकर बना होता है और URL का हर हिस्‍सा Web Browser को किसी Web Page को Internet पर Find करने में मदद करता है। URL की संरचना को समझना काफी आसान है और हम इसे एक सामान्‍य से उदाहरण द्वारा समझ सकते हैं। Click the Title to read more…

Absolute and Relative URL

जैसाकि हम जानते हैं कि एक URL Internet पर स्थित किसी Resource को Locate करने का काम करता है। हर Web Page और Image यहां तक कि Internet पर स्थित हर File का एक Unique URL होता है, जो कि उस Particular File को प्राप्‍त करने का एक Address होता है। Internet पर स्थित किन्‍हीं भी दो Resources का URL एक समान नहीं होता है। Click the Title to read more…

Base and Anchor Elements

जैसाकि हमने पहले भी कहा कि जब हम Relative Addresses उपयोग में लेते हैं, तब भी हमारा Browser उस Relative URL को Absolute URL में Convert करके ही Actual Resource को Uniquely Identify करता है। <base> Element हमें उस Base URL को Specify करने की सुविधा प्रदान करता है, जिससे हमारे सारे Relative URL Related होते हैं। हमें Base URL को भी href Attribute के मान के रूप में Specify करना होता है।  Click the Title to read more…

Color and Webpages

Web Pages में हम कई तरीकों से Color को उपयोग में ले सकते हैं। हम विभिन्‍न Headings, Paragraphs के Text, Page Backgrounds, Borders आदि का Color Change कर सकते हैं। Web Pages में Color को Add करने के लिए हमें Hexa Decimal Codes का प्रयोग करना पडता है। Colors का प्रयोग करने के लिए हमें color व bgcolor Attributes को उपयोग में लेना पडता है। ये दोनों Deprecated Attributes हैं, जिन्‍हें हम Strict XHTML में उपयोग में नहीं ले सकते हैं। Click the Title to read more…

Adding Images – img Element

Web Pages में Images को Add करने के लिए हमें <img> Element को उपयोग में लेना होता है। मूलत: Web Pages में GIF, JPEG या PNG Format की Image Files को उपयोग में लिया जाता है, क्‍योंकि इनकी Size कम होती है, इसलिए इन्‍हें Web Browser में Download होने में कम समय लगता है।  Click the Title to read more…

Adding Objects – object Element

W3C ने HTML 4 में इस Element को उपयोग में लिया था, ताकि Web Document में विभिन्‍न प्रकार के Media जैसे कि MP3 Files, Flash Movies, QuickTime Movies, JavaScript Objects, Java Applets आदि को Embed किया जा सके। Click the Title to read more…

Table Creation

जब हमें हमारे Document में किसी Data या Information को Tabular Form में Display करने की जरूरत होती है, तब हम Tables Element का प्रयोग करते हैं। Table Element में Table विभिन्‍न जानकारियों को Rows व Columns के समूह के रूप में लिखा जाता है। Click the Title to read more…

Table Element and Attributes

पिछले उदाहरण में हमने Table Element को उपयोग में लेने की प्रक्रिया को जाना। अब हम इस Table Element के साथ उपयोग में लिए जा सकने वाले विभिन्‍न Attributes को विस्‍तार से समझेंगे। Click the Title to read more…

Web Forms and Form Element

Web Pages को Interactive बनाने के लिए विभिन्‍न प्रकार की Web Sites पर User से विभिन्‍न प्रकार की Information को प्राप्‍त करने के लिए हमें Form बनाना होता है, जिस पर विभिन्‍न प्रकार के User Interface Controls जैसे कि TextBox, Command Buttons, CheckBox, Option Buttons आदि होते हैं। Click the Title to read more…

Text Input Elements

हम एक Form पर User से Input प्राप्‍त करने के लिए विभिन्‍न प्रकार के Controls का प्रयोग कर सकते हैं। Form पर प्रयोग किए जाने वाले इन Controls को Form Controls कहा जाता है। अब हम Form पर प्रयोग किए जा सकने वाले विभिन्‍न Controls के बारे में जानेंगे: Click the Title to read more…

Button Creation on Web Form

Buttons का सबसे ज्‍यादा प्रयोग किसी Form को Send या Submit करने के लिए किया जाता है। हालांकि हम इसका प्रयोग Form को Reset अथवा Clear करने के लिए भी कर सकते हैं या फिर किसी Client-Side Script को Trigger करने के लिए भी कर सकते हैं।  Click the Title to read more…

CheckBox Input Element

Checkboxes छोटे Box की तरह ही होते हैं, जिन्‍हें Form पर Check किया जा सकता है। ये केवल On या Off ही किए जा सकते हैं। जब इन्‍हें Click किया जाता है, तब ये On हो जाते हैं और जब फिर से इन्‍हें Click किया जाता है, तब ये Toggle होकर Off हो जाते हैं। Checkboxes को उनके स्‍वतंत्र नाम के साथ Define किया जा सकता है अथवा हम ऐसे Checkboxes भी Create कर सकते हैं, जो Checkboxes के एक Group के रूप में होते हैं और सभी Controls एक ही नाम को Share करते हैं साथ ही User को ये सुविधा प्रदान करते हैं कि वह एक से ज्‍यादा Checkboxes को Check कर सके। Click the Title to read more…

Radio Button

Radio Buttons भी Checkboxes की तरह ही Toggle रूप से On या Off हो सकते हैं, लेकिन इन दोनों तरह के Controls में दो मुख्‍य अन्‍तर हैं।

  • जब हमारे पास बहुत सारे Radio Buttons का एक Group होता है, तब वे सभी Radio Buttons समान नाम को Share करते हैं, लेकिन उन सभी में से केवल एक ही Button को Click करके On किया जा सकता है। एक बार किसी Radio Button को Click कर लेने के बाद यदि हम किसी दूसरे Radio Button को Click कर देते हैं, तो पहले वाला Radio Button Automatically Off हो जाता है और Newly Selected Radio Button On हो जाता है। Click the Title to read more…

Select Box – Select Element

Drop-Down Select Box User को एक Drop-Down Menu से किसी एक Item को Select करने की सुविधा प्रदान करता है। ये Control Web Page पर कम Space लेता है, इसलिए जब Web Page पर Space कम हो तब हम इस Control को उपयोग में लेते हैं। Click the Title to read more…

Grouping Options – optgroup Element

यदि हमारे Select Box में बहुत सारे Items हों, तो हम हमारे सभी Items का एक Group बना सकते हैं। Group बनाने के लिए हमें <optgoup> Element का प्रयोग करना होता है, जो कि सभी Container Element के एक Group की तरह काम करता है। <optgroup> Element में हम label Attribute का प्रयोग कर सकते हैं, जिसका मान Options के Group के Label का काम करता है। Click the Title to read more…

File Box and Hidden Input Elements

यदि हम User को ये सुविधा प्रदान करना चाहते हैं कि वह अपने Computer से किसी File को Web Server पर Upload कर सके, तो हमें एक File Upload Box Create करने की जरूरत पडती है, जिसे सामान्‍यतया File Select Box कहा जाता है। इस Control को भी हम <input> Element द्वारा Create कर सकते हैं, जिसके type Attribute में मान के रूप में हमें “file” शब्‍द को उपयोग में लेना होता है। Click the Title to read more…

Label Control

जब हम Form Create करते हैं, तब ये जरूरी होता है कि हम हर Control को एक उचित Label प्रदान करें, ताकि User उस Control की जरूरत वाले Data को ठीक तरह से जान सके और उचित Data प्रदान कर सके। यदि एक Form के Control User को सही व उचित तरीके से ये जानकारी नहीं दे पाते हैं कि उन्‍हें किस तरह के Data की जरूरत है, तो User कभी भी सही Data Input नहीं कर सकता। Click the Title to read more…

Structuring Forms: fieldset and legend Elements

बडे Forms User के लिए Confusing हो सकते हैं, इसलिए ये जरूरी होता है कि हम Related Form Controls को Group कर लें। ये काम हम इन दोनों Elements का प्रयोग करके कर सकते हैं। <fieldset> Element आपस में Logically Related Group Controls के चारों ओर एक Border Create कर देता है, जबकि <legend> Element हमें ये सुविधा प्रदान करते हैं कि हम <fieldset> Element को एक Caption प्रदान कर सकें, जो कि Group Form Controls के एक Title की तरह काम करे। Click the Title to read more…

Focus and Tabbing Order

जब हमारे Web Page पर बहुत सारे Form Controls होते हैं अथवा बहुत सारे Links होते हैं, तब हम इन Controls या Links के बीच Navigation करने के लिए Tab / Shift+Tab Keys का प्रयोग कर सकते हैं। जब हम Navigation करते हैं, तब एक Highlighted Border द्वारा हम ये समझ पाते हैं कि हम Currently कहां पर हैं। इसी Highlighted Border को Focus कहा जाता है। Web Page पर दिखाई देने वाले सभी Elements Focus Receive करने में सक्षम नहीं होते हैं। केवल वे ही Elements Focus Receive कर सकते हैं, जिनसे User Interact कर सकता है। Click the Title to read more…

accesskey, disabled, readonly Attributes

Access Keys Keyboard Shortcut को Represent करता है। ये एक ऐसा Single Character होता है, जिसे Alt Key के साथ Press किया जाता है। जब हम किसी Element के Access Key को Press करते हैं, तो Browser Automatically उस Control पर चला जाता है। Click the Title to read more…

Sending Form Data to Webserver

जैसाकि हम जानते हैं कि Form के Data को Web Server  पर भेजने के दो HTTP Methods get व post होते हैं, जिन्‍हें <form> Element के method Attribute में Specify किया जाता है। method Attribute इन दोनों मानों में से किसी एक मान को प्राप्‍त कर सकता है। Click the Title to read more… 

(HTML in Hindi)

कुछ अच्‍छा लगे, तो Share करना चाहिए। Share कीजिए।

ये Article "HTML5 with CSS# in Hindi" पुस्‍तक से लिया गया है।

HTML5 with CSS3 in Hindi इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी। यदि आप चाहें तो इस पुस्तक को खरीद भी सकते हैं अथवा DEMO EBOOK के रूप में इस पुस्तक के कुछ CHAPTERS Download करके पढ सकते हैं।

HTML5 with CSS3 in Hindi | Page: 481 | Format: PDF
BUY NOW DOWNLOAD

Download All Hindi EBooks

अपना Email Address लिखकर Download Button पर कीजिए व C, C++, Java, VB6, Oracle, C#.NET, ADO.NET, HTML5, CSS3, JavaScript, jQuery, PHP, WordPress आदि सभी पुस्‍तकों के Download Links प्राप्‍त कीजिए अपने Email पर

Register करके Login कीजिए और इस Popup से छुटकारा पाईए।