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 करें। परिणामस्वरूप आज के सभी नए Web Pages में केवल HTML Document का Structure होता है और HTML Web Page से सम्बंधित सभी Stylizing Markup एक अलग CSS File में होते हैं। हालांकि हम आज भी इन Style Markups को अपने HTML Document में HTML Structure के साथ उपयोग में ले सकते हैं, लेकिन हमें ऐसा करना नहीं चाहिए।

HTML के 4.1 Version को Release करने के बाद W3C ने HTML का 5.0 Version Release नहीं किया, बल्कि उन्होंने HTML को एक नए रूप में Release किया जिसका नाम उन्होंने XHTML रखा, ठीक उसी तरह से जिस तरह से Microsoft ने Window 2000 Release करने के बाद Windows 2001 Release नहीं किया बल्कि Windows XP Release किया था।

HTML के नाम के पहले X अक्षर को इसलिए लगाया गया, क्योंकि ये अक्षर एक नई Language XML (eXtensible Markup Language) से आया था। इस इस Language ने विभिन्न Programming क्षैत्रों में बहुत ही जल्दी बहुत ज्यादा प्रसिद्धि प्राप्त कर ली थी, क्योंकि इस Language का प्रयोग करके हम हमारी जरूरत के अनुसार अपने स्‍वयं के HTML Elements Create कर सकते हैं। इसीलिए W3C ने तय किया कि वह HTML के अगले Version को XML में लिखकर Release करेगा और उन्होंने ऐसा ही किया।

प्रायोगि‍क रूप से इसका मतलब ये हुआ कि जो लोग Web Pages लिखते हैं, उन लोगों को अब अपने HTML Codes को लिखने के बारे में ज्यादा सावधान रहना जरूरी है, क्योंकि XML एक Strict Language है, इसीलिए XHTML भी एक Strict Language बन गई है। Stricter Language का एक फायदा ये है कि Web Browser की Size छोटी हो गई है, जिससे Web Pages को अब ज्यादा छोटी Screen यानी Mobile जैसे Device पर भी आसानी से देखा जा सकता है। दूसरा फायदा ये है कि XML के लिए कई Tools को Develop किया गया है और हम उन सभी Tools को XHTML के साथ भी उपयोग में ले सकते हैं।

Web Programming सीखने वाले एक नए Developer के लिए फायदा ये है कि उसे HTML व  XHTML दोनों Languages को सीखने की जरूरत नहीं है। क्योंकि जब XHTML को Develop किया जा रहा था, तब इस बात का ध्यान रखा गया था कि XHTML उन Web Browsers के Compatible रहे, जो केवल HTML Pages को ही Display कर सकते हैं। कहने का मतलब ये है कि हम जितने भी XHTML Elements को उपयोग में लेना सीखेंगे, उनमें से लगभग सभी Elements HTML के 4.1 Version में भी उपलब्ध हैं। HTML से XHTML के बीच XHTML के तीन Versions को हमें ध्यान में रखना होता है।

Transitional XTHML 1.0

XHTML के इस Version में एक Developer उन HTML Markup को भी उपयोग में ले सकता है, जिन्हें HTML के 4.01 Version में Deprecated Declare कर दिया गया था, लेकिन इस Version में भी Developer को Stricter Syntax Use करने का ध्यान रखना होता है।

Strict XHTML 1.0

XHTML के इस Version में एक Developer उन HTML Markup को उपयोग में नहीं ले सकता है, जिन्हें HTML के 4.01 Version में Deprecated Declare कर दिया गया था, साथ ही इस Version में भी Developer को Stricter Syntax Use करने का ध्यान रखना होता है।

Frameset XHTML 1.0

XHTML के इस Version में एक Developer उस Technology का प्रयोग कर सकता है, जिसे Frames कहते हैं। यानी इस Version में हम एक ही Browser में एक से ज्यादा Web Pages को Open कर सकते हैं। इसके बारे में हम बाद में पढेंगे। इस Version में भी Developer को Stricter Syntax Use करने का ध्यान रखना होता है।

सामान्यतया हम Transitional XTHML 1.0 Version के Elements को ही उपयोग में लेंगे, क्योंकि ये Version HTML 4.01 Version के Elements को भी Support करता है। लेकिन जहां तक हो सके हमें XHTML के Elements का ही प्रयोग करना चाहिए। जब हम केवल Pure XHTML के Elements ही उपयोग में लेते हैं और Deprecated Elements व Attributes का प्रयोग नहीं करते हैं, तब हमारा Page स्‍वयं ही Strict XHTML 1.0 का Page बन जाता है।

XHTML और HTML में अंतर

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

Include XML Declaration

HTML की तुलना में XHTML के Syntax ज्यादा Strict होते हैं। चूंकि XHTML को XML में लिखा गया है, इसलिए जब हम एक XHTML Document बनाते हैं, तब वास्तव में हम एक XML Document भी बना रहे होते हैं। इसलिए हम हमारे Document की शुरूआत निम्नानुसार एक Optional Line से भी कर सकते हैं, जो कि सभी XML Documents में एक Optional Declaration होता है।

<?xml version=”1.0” encoding=”UTF-8” ?>

 

यदि हम हमारे Document में इस XML Declaration को Include करते हैं, तो ये Statement हमारे Document का सबसे पहला Statement होना जरूरी होता है, यहां तक कि इस Statement से पहले एक Blank Space भी नहीं होना चाहिए। इस Statement द्वारा हम अपने Web Browser को ये बताते हैं कि हम हमारे Document में XML के 1.0 Version के Standards के आधार पर नए Elements भी Create करने की सुविधा प्राप्त करना चाहते हैं और encoding Attribute द्वारा हम ये बताते हैं कि हम हमारे Document में किस Encoding को Support करवाना चाहते हैं। उदाहरण के लिए यदि हम हमारे Web Page में हिन्दी भाषा में भी Contents लिखना चाहते हैं और हम चाहते हैं कि इस भाषा में लिखे गए Content को दुनियां के सभी नए Web Browsers बिना किसी परेशानी के दिखा सकें, तो हमें Encoding के रूप में “UTF-8” को चुनना होता है, क्योंकि हिन्दी भाशा के Unicode इसी Encoding के अन्‍तर्गत Defined हैं।

Include a DOCTYPE Declaration

DOCTYPE Declaration इस बात को Indicate करता है कि हम HTML/XHTML के कौनसे Version को उपयोग में ले रहे हैं। इसे Opening <html> Tag को Use करने से पहले Specify किया जाता है। यदि हम हमारे Document में Transitional XHTML 1.0 Version के आधार पर Coding कर रहे हैं, जिसमें हम पुराने HTML 4.01 Version के Elements को Use करना चाहते हैं, तो हमें हमारे Web Browser को ये बात निम्नानुसार बतानी होती है:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

इसके बजाय यदि हम Strict XHTML 1.0 Version के आधार पर अपने Web Pages तैयार कर रहे हों, तो हमें अपने Web Page में निम्न DOCTYPE Declaration Statement को उपयोग में लेना होता है:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

जबकि यदि हम हमारे Document में Frameset का प्रयोग करना चाहते हैं, तो हमें हमारे Web Page में निम्न DOCTYPE Declaration Statement को Use करना होता है:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

 

Strict XHTML Documents में हमें DOCTYPE Declaration Statement को <html> Tag से पहले Use करना जरूरी होता है, जबकि यदि हम Transitional अथवा Frameset Document Create कर रहे हों, तो हम इस Declaration को छोड भी सकते हैं।

HTML के Versions और <!DOCTYPE> Declaration

                         <!DOCTYPE> declaration किसी वेब पेज को browser में सही तरीके से प्रदर्शित करने मे सहायता करता है।

HTML के विभिन्न वर्जनों के सामान्य Declarations है –

Version	Year	<!DOCTYPE> declaration
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01 Strict	1999	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional	1999	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset	1999	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict	2000	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional	2000	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset	2000	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1	2000	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML5	2012	<!DOCTYPE html>
XHTML5	2013

Use Lowercase Names

एक HTML Document में हम Uppercase अथवा Lowercase किसी भी तरह के Case में HTML Elements व Attributes को लिख सकते हैं, लेकिन XHTML Document में हमें सभी Element व  Attribute को Lowercase में लिखना जरूरी होता है। हालांकि Elements के बीच के Contents व Attributes के मान Case Sensitive नहीं होते हैं।

Close All Tags Correctly

XHTML में हमें हर Open होने वाले Tag को ठीक तरह से Close करना जरूरी होता है। हम केवल उसी स्थिति में किसी Tag  को Close करने से बच सकते हैं, जबकि वह Tag एक Empty Tag हो। HTML में हम किसी Paragraph को निम्नानुसार लिख सकते हैं:

<p> This is a HTML Paragraph Element.

<p> HTML could leave the closing tag.

जबकि इसी Paragraph को यदि हम XHTML में लिखें, तो हमें ये Paragraph Element निम्नानुसार Use करना होगा:

<p> This is a XHTML Paragraph Element. </p>

<p> XHTML could not leave the closing tag. </p>

जितनी बार भी एक XHTML Browser एक नए <p> Tag  को Run करता है, वह पिछले </p> Tag के अन्‍त को स्‍वयं ही मान लेता है, लेकिन XHTML तब तक नए Paragraph को नहीं मानता, जब‍ तक कि उसे पहले वाले Paragraph का Closing Tag प्राप्त नहीं हो जाता। इसलिए XHTML में हमें हर Tag को ठीक तरह से Close करना जरूरी होता है।

कुछ Tags ऐसे होते हैं, जिनके Opening व Closing Tag के बीच कोई Content नहीं होता। इस प्रकार के Tags को Empty Tag कहा जाता है। <img> व  <br> एसे ही Empty Tags हैं। इन्‍हें HTML में तो एसे ही लिखा जाता है, लेकिन जब हम XHTML Document बनाते हैं, तब हमें इन Empty Tags को भी Forward Slash के साथ लिखना होता है। यानी हमें इन्‍हें <img /> व <br /> लिखना पडता है।

Attribute Values

जब हम XHTML Attributes को कोई मान प्रदान करते हैं, तब हमें तीन बातें ध्यान में रखनी होती हैं। सबसे पहली बात ये कि हर Value को Double Quotes के बीच Enclosed रखना जरूरी होता है। दूसरी बात ये कि हर Attribute को मान प्रदान करना जरूरी होता है और तीसरी बात ये कि Value के पहले व बाद के Spaces Remove हो जाते हैं, इसलिए हमें Spaces के सम्‍बं‍ध में ध्यान रखने की जरूरत नहीं होती है।

HTML Element Must Be The Root Element

किसी भी XHTML Document की शुरूआत हमेंशा <html> Opening Tag से होती है व अन्‍त हमेंशा </html> Closing Tag से होती है। <html> Tag से पहले केवल XML Declaration व  DOCTYPE Declaration Statements ही आ सकते हैं, क्योंकि सभी XML Documents में एक Unique Root Element होना जरूरी होता है, जो कि बाकी के पूरे Document को अपने में Included या Contained रखता है। हमारे XHTML Document के सन्‍दर्भ में वह Root Element <html> Tag है।

Tags Must Nest Properly

XHTML Document में हम जिस Tag को सबसे पहले Open करते हैं, उसे सबसे बाद में व जिस Tag को सबसे बाद में Open करते हैं, उसे सबसे पहले Close करना जरूरी होता है। यदि हम एक साथ एक से ज्यादा Tags को Open करते हैं, तो हमें इस बात का ध्यान रखना होता है। उदाहरण के लिए निम्न Statement में पहले <p> Tag को Open किया है और बाद में <em> Tag को इसलिए सबसे पहले हमें <em> Tag को Close करना होता है और बाद में <p> Tag को।

<p> This is a <em>HTML Paragraph Element. </em></p>

जिन उपरोक्‍त नियमों का हमें XHTML Document बनाते समय ध्यान रखना जरूरी होता है, HTML Document बनाते समय हमें इन नियमों को ध्यान में रखने की जरूरत नहीं होती है। HTML व XHTML Document Creation में ये ही मुख्य अन्‍तर हैं।

Creating First HTML Page - HTML Tags and Elements

अब हम पहला HTML Web Page बनाते हैं। इस Page द्वारा हम विभिन्‍न प्रकार के Basic Concepts को समझ सकते हैं।

<!DOCTYPE html> <html> <head> <title>HTML – Fast Track Course </title> </head> <body> <h1>HTML – Introduction </h1> <p> document type को पारिभाषित करता है । यह HTML5 वर्जन मे काम आता है । यह प्रदर्शित नही होता है यानि यह छुपा हुआ होता है । यहहमारे web page के सभी अन्य elements को लिखा जाता है। यह प्रदर्शित नही होता है यानि यह छुपा हुआ होता है । </p> </body> </html>

उपरोक्त उदाहरण को विस्तार से समझें -

• <!DOCTYPE html> - document type को पारिभाषित करता है । यह HTML5 वर्जन मे काम आता है । यह प्रदर्शित नही होता है यानि यह छुपा हुआ होता है ।
• <html> और </html>  के बीच में हमारे web page के सभी अन्य elements को लिखा जाता है। यह प्रदर्शित नही होता है यानि यह छुपा हुआ होता है ।
• <body> और </body> के बीच में जो page content लिखा जाता है वह हमे हमारे web page में दिखाई देता है ।
• <h1> और </h1>  के बीच जो लिखा जाता है वह heading की तरह दिखता है ।
• <p> और </p> के बीच जो लिखा जाता है वह paragraph की तरह दिखता है ।

इस Example को Notepad में Type करके sample.htm नाम के साथ IIS Local Host के wwwroot Folder में अथवा WAMP के www Folder में अथवा XAMPP के htdocs Folder में “mysite” नाम का एक Sub-Folder Create करके उसमें Save करें और Web Browser को Open करके उसके Address Bar में http://localhost/mysite/sample.htm Type करके Enter करें। 

इस Web Page पर हम Title Bar में Page का Title, Heading व Paragraph देख सकते हैं, जो कि हमने Notepad में Type किया था, लेकिन हमने Notepad में जिन HTML Tags को Use किया था, वे HTML Tags हमें दिखाई नहीं दे रहे हैं, क्योंकि वे सभी Tags Document को Browser में Structure या Organize करने के उपयोग में आ गए हैं। Web Page Create करते समय हमने जो Texts Angle Brackets के बीच लिखे थे, वे सभी HTML Tags थे जबकि अन्‍य Texts वे Information हैं, जिन्हें हम Browser में Render करना चाहते थे।

HTML Tags क्या होते है ?

1. HTML tags कुछ शब्द (tag names) होते है, जो किसी शब्द को दोनो और से Angle brackets (<……..>) से बाँधते है, जैसे -  <html>
2. HTML tags सामान्यत: जोडे मे होते है, जैसे <b> और </b>
3. जोडे का पहला tag - start tag, और दुसरा tag - end tag कहलाता है ।
4. end tag भी start tag की तरह ही लिखा जाता है, पर इसमें tag के नाम के पहले forward slash ( / )
5.  Start and end tags को opening tags और closing tags भी कहा जाता है ।

Example -  <tagname> आपका content </tagname>

HTML Elements क्या होते है ?

                                       "HTML tags" और "HTML elements" को सामान्यत: एक ही वस्तु कहा जाता है। पर असल में, एक HTML element वह सब कुछ है जो start tag और end tag के बीच लिखा जाता है:

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

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

हमारे उदाहरण में हर Tag एक जोडे के रूप में है। Opening Tag व Closing Tag में केवल इतना अन्‍तर होता है कि Closing Tag में हमेंशा एक Forward Slash का प्रयोग किया जाता है। जब एक HTML Tag Pair के बीच कुछ Information Texts को लिखा जाता है, तब बनने वाले पूरे Statement को Element कहा जाता है। 

HTML Tag and Element

पिछले उदाहरण में हमने सबसे पहले <html></html> Tag Pair को उपयोग में लिया है। किसी भी Web Page में लिखा जाने वाला ये एक जरूरी Element है, क्योंकि Web Page में जो कुछ भी दिखाई देता है, वह सबकुछ इसी Tag Pair में लिखा जाना जरूरी होता है।

हर <html></html> Tag Pair के हमेंशा दो हिस्से होते हैं, जिनमें पहला हिस्सा Web Browser व Search Engines से सम्बंधित जानकारियों के लिए होता है। इस हिस्से को <head></head> Tag Pair के रूप में Identify किया जाता है, जबकि दूसरा हिस्सा <body></body> Tag Pair के रूप में होता है और हम अपने Web Page को Structure करने के लिए जितने भी Tags उपयोग में लेते हैं उन सभी Tags को यहीं Use करना होता है।

उदाहरण के लिए Web Page का Title Web Browser के Title Bar में दिखाई देता है, इसलिए <title></title> Tag Pair को हमने <head> Element में उपयोग में लिया है, जबकि अपने Web Page के Contents की Heading को Web Browser में Render करने के लिए हमने <h1> Element का प्रयोग <body> Element में किया है।

हमने पहले भी उल्लेख किया था कि Markup Tags Documents में किसी Text को Highlight करने अथवा उसे Special Meaning देने का काम करते हैं। ये Tags Browser को जो Special Meaning देते हैं, वे Description ही Document को Structure करते हैं। हमारे उदाहरण में जब हम <h1> Opening Tag User करते हैं, तो ये Tab Web Browser को बताता है कि यहां से Heading 1 का Text शुरू हो रहा है, जबकि </h1> Closing Tag Web Browser को बताता है, कि यहां पर Heading 1 का Text समाप्त हो रहा है। यदि हम इन Tags का प्रयोग ना करें, तो सारे Texts Web Browser के लिए सामान्य Texts होंगे और Browser किसी भी Text को अलग तरह से Markup या Highlight नहीं करेगा।

                 विभिन्न प्रकार के HTML Tags ही Web Browser को बताते है, कि किस Text को Heading के रूप में Render करना है और किस Text को सामान्य Paragraph क रूप में। कई बार हमें एक Element के अन्दर दूसरे Element की Nesting करनी पडती है। इस स्थिति में Outer Element Parent Element कहलाता है, जबकि Inner Element Child Element कहलाता है।

Access your xampp Web Server from anywhere in thr world

आपके XAMPP वेब-सर्वर को दुनिया मे कही भी Access करना

आप अपने Web Server का प्रयोग करके बडी File को बडी ही आसानी से उसे भेज सकते हैं, जिसे भेजना चाहते हैं। साथ ही आपकी फाईल बिल्कुल Secure तरीके से उसके पास पहुंचती है क्योंकि कोई दूसरा व्यक्ति आपकी उस File को किसी भी तरीके से तब तक प्राप्त नहीं कर सकता, जब तक कि आप न चाहें।

                                  जब भी आप अपने Computer पर Internet Connect करते हैं, आपके कम्प्यूटर को Internet पर Uniquely Identify करने के लिये उसे एक Unique IP Address दिया जाता है, जो कि सामान्यत: 000.000.000.000 Format में होता है। यदि आपका Web Server ON है, तो आप इस Address को Web Browser के Address Bar में लिख कर भी अपने Web Server के Data को Locally अथवा Remotely Access कर सकते हैं।

                             अपने Computer के Unique IP Address का पता लगाने के लिये सबसे पहले अपने Computer को Internet से Connect करें और Control Panel में Network Connections Option को Select करें तथा Connected Connection के Icon को Double Click करें। निम्नानुसार एक Dialog Box Display होगा, जिसके “Details” Tab में आपके Computer का Unique IP Address दिखाई देगा:

        इस IP Address को निम्नानुसार Web Browser के Address Bar में Type करके Enter Key Press करें। आप देखेंगे कि आपको वही Output दिखाई दे रहा है, जो “http://localhost” या “http://127.0.0.1” से दिखाई देता है, लेकिन अन्तर केवल इतना है कि इस IP Address से दुनियां के किसी भी कौने में बैठा व्यक्ति आपके Computer के उन Resources को Access कर सकता है, जिन्हें आपने अपने Web Server के “htdocs” Folder में Store किया है।

                 यानी आज जिसे जो File भेजना चाहते हैं, उसे अपने Web Server के “htdocs” नाम के Folder में एक नया Folder Create करके उसमें Store कर दीजिये इस तरह से हमने ‘HTML‘ नाम का Folder Create किया है और फिर Email अथवा SMS के Through उसे अपने Local Web Server का IP Address भेज दीजिये। वह व्यक्ति आपके द्वारा भेजे गए IP Address का प्रयोग करके अपने Web Browser के Through आपके Web Server में पहुंच जाएगा और उस File को प्राप्त कर लेगा जिसे आप उसे भेजना चाहते हैं।

1. यदि आप किसी को कोई Resource Available करवाना चाहते हैं, तो केवल वही User आपके Computer के Resource को Access कर सकता है, जिसके पास आपके Computer का Current IP Address Available है। यानी आपका Resource पूरी तरह से सुरक्षित रहता है।
2. जब आप ईमेल के Through किसी को कोई Resource भेजते हैं, तो पहले आपका Resource उस Mail Company के Web Server पर Upload होता है, जिसकी Mail Service आप Use कर रहे हैं जैसे कि Gmail, Yahoo, Hotmail आदि और जब User उस Resource को प्राप्त करना चाहता है, तब वह Resource User के Computer में Download होता है। यानी Upload व Download दोनों काम होते हैं जिससे User तक Resource पहुंचने में दुगुना समय लगता है। जबकि जब आप अपने Local Web Server से किसी को कोई Resource भेजना चाहते हैं, तब आपको अपना Resource कहीं पर Upload करने की जरूरत नहीं होती है क्योंकि Resource पहले से ही आपके Computer में Uploaded है और User Directly आपके Computer से Resource को प्राप्त कर रहा होता है।

                               इस तरीके से किसी को कोई Resource Available करवाने का नुकसान ये है कि आप जितनी बार भी अपने Computer को Internet से Connect करते हैं, आपके Computer को एक अलग IP Address प्राप्त होता है। यानी आपके Computer को Dynamically हर बार एक नया IP Address प्राप्त होता है। इसलिये यदि आपके User ने आपके द्वारा Provide किये गए IP Address के Through आपके Computer से किसी Resource को 99% Download कर लिया हो, और किसी कारण से आपका Internet Connection Disconnect हो जाए, तो आपको पूरी प्रक्रिया फिर से दोहरानी होगी। यानी आपको Net Reconnect करके फिर से अपने User को अपने Computer का IP Address Available करवाना होगा और आपके User को फिर से पूरे Resource को 100% Download करना होगा।

 

 आप चाहें तो www.noip.com साइट के द्वारा अपने IP Address को डोमेन-नेम में भी बदल सकते है जिससे आपको  अपने User को बार बार बदला हुआ IP Address ना देना पडे आप एक छोटा सा डोमेन-नेम देकर User से जुड सकते है।
 

how to install XAMPP in pc to make a Web Server

अपने कम्प्युटर पर 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 कीजिये।

XAMPP सबसे अच्छा Web Server है और क्योंकि इसे Install व Setup करना काफी आसान है। इसे http://www.apachefriends.org/ से Free Download किया जा सकता है। चूंकि हम Windows Platform पर काम कर रहे हैं, इसलिये हम यहां पर Windows Operating System पर XAMPP Web Server को Setup करने के बारे में बात करेंगे।

1. XAMPP की Executable Setup File को Download कीजिये और Setup File पर Double Click करके Setup को Run कीजिये।
2. XAMPP के लिये Destination Folder “Browse” करने के बाद “Install” Button पर Click कीजिये। Web Server का Installation शुरू हो जाएगा और Specified Path पर “xampp” नाम का एक Folder बनेगा जिसमें Web Server की सभी Files Extract होंगी।
3. कुछ DOS Mode Screens Display होंगी, जहां “Y” Key को Press करना है व “Enter” Key को Press करना है।
4. अन्त में निम्न Screen आएगी, जहां “x” Press करके Installation का अन्त करना है।
5. Desktop पर एक Icon दिखाई देगा :
6. इसे Double Click करने पर निम्नानुसार XAMPP Control Panel Open होगा जहां “Apache” के सामने दिखाई दे रहे “Start” Button को Click करते ही Local Web Server Start हो जाएगा:
7. Local XAMPP Web Server Normal तरीके से काम कर रहा है या नहीं, इस बात का पता लगाने के लिये Web Browser Open करें और उसके Address Bar में http://localhost अथवा http://120.0.0.1 लिखकर Enter Key Press करें और चेक करें
8. अब जहां “XAMPP” Installed है, उस Folder में “htdocs” नाम का एक Folder होता है। जिस File को आप http://Localhost द्वारा Web Browser में Open करना चाहते हैं, उस File को इस Folder में Store कीजिये।
9. अब “htdocs” में index.html व index.php नाम की दोनों Files को Rename करें, ताकि इस Folder की सभी Files Web Browser में दिखाई दे सके। साथ ही इस Folder में “HTML” नाम का एक नया Folder बनाऐं और Web Browser में फिर से http://localhost अथवा http://120.0.0.1 लिखकर Enter Key Press करें। अब आपके Web Browser में चेक करें

अब आपका Local Web Server पूरी तरह से तैयार है और आप अपने Web Pages या Web Application को अपने Local Computer पर उसी तरह से Access कर सकते हैं, जिस तरह से आप उसे अपने Online Web Server पर Access करेंगे।

 

CSS How To... - सी एस एस सीखें

जब एक browser किसी style sheet को reads करता है,तो यह पेज को style sheet के अनुसार format कर देता है ।

---

CSS को Insert करने के 3 तरीके है:

किसी style sheet को Insert करने के निम्न 3 तरीके है:

• External style sheet
• Internal style sheet
• inline style

---

External Style Sheet

जब एक ही style कई पेजों पर लगानी हो तो external style sheet सबसे उपयुक्त विकल्प है। external style sheet के द्वारा, आप पूरी Web site का look सिर्फ़ एक file में बदलाव करके कर सकते हैं। बस हर पेज <link> tag  द्वारा style sheet को प्रयोग करते हुए लिंक होना चाहिए। <link> tag  को <head> section के अंदर डाला जाता है :

<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>

एक external style sheet किसी भी text editor (जैसे- नोटपेड) में लिखी जा सकती है। फ़ाइल मे किसी html tag का प्रयोग नही होता है। आपकी style sheet हमेशा .css extension मे ही सेव होनी चाहिए।  style sheet फ़ाइल का एक उदाहरण निम्न है:

hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");}

property value और unit के बीच रिक्त स्थान (space) ना रखें (जैसे कि- margin-left:20 px इसमें सही तरीका है- margin-left:20px)

---

Internal Style Sheet

internal style sheet का प्रयोग एक पूरे पेज में unique style देने के लिये किया जाता है। Internal styles को HTML page के <head> section में <style> tag का प्रयोग करकें लिखा जाता है, इस तरह:

<head> <style type="text/css"> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>

---

Inline Styles

inline style के द्वारा हम style sheets के कई फ़ायदें खो सकते है क्योकि यह का content को presentation के साथ मिक्स कर देती है ।
                    inline styles को प्रयोग करने के लिये हमें  style attribute को relevant tag के साथ प्रयोग करना होगा । style attribute को कोई भी CSS property दी जा सकती है।
जैसे किसी paragraph का left margin और text color कैसे बदला जाये :

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

---

Multiple Style Sheets

यदि कुछ properties एक ही selector के लिये अलग-अलग style sheets मे अलग-अलग सेट की जाती है, तो अधिक निर्दिष्ट style sheet से values प्राप्त की जाती है ।
उदाहरण के लिए, external style sheet मे h3 selector के लिए यह properties है:

h3 { color:red; text-align:left; font-size:8pt; }

और internal style sheet मे h3 selector के लिए यह properties है:

h3 { text-align:right; font-size:20pt; }

यदि internal style sheet के साथ पेज external style sheet के साथ भी लिंक है तो h3 के लिए prperties होंगी :

color:red; text-align:right; font-size:20pt;

यहाँ color external style sheet से लिया जायेगा और text-alignment और font-size internal style sheet के निर्देशानुसार बदली जायेगी।