Create your first web page wit easy to follow steps.

HTML5 with CSS3 in Hindiये Article इस वेबसाईट पर Selling हेतु उपलब्‍ध EBook HTML5 with CSS3 in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी। 

HTML5 with CSS3 in Hindi | Page: 481 | Format: PDF

BUY NOW DOWNLOAD READ ONLINE

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

  • सबसे पहले Notepad Open करें अथवा यदि आप MS-FrontPage या Dreamweaver जैसे किसी Web Authoring Tool  का प्रयोग कर रहे हैं, तो उसे Start करके उसके Code Window में जाएं। बेहतर यही है कि आप Notepad से शुरूआत करें।
  • अब सबसे पहले Transitional XHTML 1.0 Version के XML Declaration व DOCTYPE Declaration Statements लिखें, क्‍योंकि हम हमारे सभी Pages इसी XHTML Version में Create करेंगे ताकि नए व पुराने सभी Web Browsers हमारे Web Page को Render यानी Display कर सकें। एक बात ध्‍यान रखें कि XML Statement किसी भी Web Page का सबसे पहला Statement होना जरूरी होता है, यहां तक कि इस Statement से पहले एक Blank Space तक नहीं होता। ये काम हम निम्‍नानुसार कर सकते हैं:
<?xml version=”1.0” ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
  • DOCTYPE Declarations के तुरन्‍त बाद में <html> Tag को लिखना होता है और Document के अन्तिम Statement के रूप में </html> Tag को लिखना होता है। हम हमारे <html> Tag को निम्‍नानुसार भी लिख सकते हैं और इस <html> Tag के बारे में हम आगे जानेंगे।
<?xml version=”1.0” ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=”http://www.w3.org/1999/xhtml”>
</html>
<?xml version=”1.0” ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head> </head>
<body> </body>
</html>
  • <head> Element के अन्‍दर ही हमारे Web Page के Title को Specify करने के लिए हमें <title> Element को Use करना होता है। Title Element में हम अपने Web Page का नाम देते हैं, जो कि हमारे Web Page के Content को Represent करता है।
<?xml version=”1.0” ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>HTML – Fast Track Course</title>
</head>
<body> </body>
</html>
  • <head> Element के बाद हमें <body> Element लिखना होता है। इस Element में वे Contents होते हैं, जो एक Web Surfer यानी हमारे User को दिखाई देते हैं।
<?xml version=”1.0” ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>HTML – Fast Track Course</title>
</head>
<body>
<h1>Why Should Learn HTML and Other Web Languages</h1>
<p>
आज बहुत सारे एसे Softwares उपलब्‍ध हैं, जिनका प्रयोग करके बहुत ही आसानी से Web Pages Create किए जा सकते हैं। Microsoft FrontPage व Macromedia Dreamweaver दो ऐसे ही Professional Web Site Development Tools हैं, जिनका प्रयोग हम ना केवल Web Pages Create करने के लिए बल्कि पूरी की पूरी Web Site Create करने व उन्‍हें Manage करने के लिए उपयोग में ले सकते हैं। लेकिन इन Softwares को खरीदने की जरूरत नहीं है। हम बडी ही आसानी से Notepad का प्रयोग करके भी अपने Web Pages Create कर सकते हैं।
</p>
</body>
</html>
  • अब हमारा Web Page पूरी तरह से तैयार है। इस Page को अपने localhost के inetpub या htdocs या www नाम के Folder में “FirstWebPage.htm” नाम से Save करें और Web Browser Open करके http://localhost/firstwebpage.htm Type करें। File Save करते समय यदि चित्रानुसार कोई Dialog Box Display होता है, तो इसका मतलब ये है कि हमने हमारे Page में Simple English के अलावा किसी Unicode Language के Characters को भी उपयोग में लिए हैं, इसलिए Web Browser में उन Characters को भी अच्‍छी तरह से Display करने के लिए जरूरी है कि हम File को Save करते समय “Save As…” Dialog Box में Encoding Combo Box से “UTF-8” की Encoding को चुनें।

चलिए, अब हम समझने की कोशिश करते हैं, कि ये Example Run कैस होता है। इस Example की सबसे पहली Line Web Browser को बताती है, कि ये एक XML Document है, क्‍योंकि सभी XHTML Documents XML Document भी होते हैं। इसके बाद की DOCTYPE Declaration द्वारा ये बताया गया है कि हम XHTML के किस Version का प्रयोग कर रहे हैं।

हमारे उदाहरण में हम Transitional XHTML 1.0 Document को उपयोग में ले रहे हैं। एक बात ध्‍यान रखने वाली ये है कि हालांकि XML Declaration एक Optional Declaration Statement है, जिसे हम ना लिखें, तो भी कोई फर्क नहीं पडता है, लेकिन DOCTYPE Declaration Statement एक Required Declaration Statement है और इस Statement को हमें अपने हर Document में लिखना जरूरी होता है।

अब आगे का सारा Document <html> Element के बीच है, जिसमें <head> Section के अन्‍दर <title> Element का प्रयोग किया है, जो कि Document के Title को Web Browser के Title Bar में Display करता है और यदि हम इस Document को अपने Favorites में Add करें, तो यही नाम Default रूप से Save होता है। <body> Element में Page से सम्‍बंधित Contents हैं, जिनमें सबसे पहले एक Heading 1 है, जो Page के Topic को Represent करता है और एक Paragraph है, जिसमें Web Page का Actual Content है।

जब हम किसी Web Page को Web Browser में Open करते हैं, तब हम उस Web Page का Source भी देख सकते हैं। Source देखने की सुविधा हमें सभी प्रकार के Browsers प्रदान करते हैं। Source देखने के लिए हमें हमारे Web Page पर Right Click करना होता है और Popup होने वाले Menu से View Source नाम के Option को चुनना होता है। (Creating First Web Page)

Why you must learn Manual Coding of Web Languages?
Basic HTML Template - Basic HTML Structure

******

ये पोस्‍ट Useful लगा हो, तो Like कर दीजिए।

HTML5 with CSS3 in Hindiये Article इस वेबसाईट पर Selling हेतु उपलब्‍ध EBook HTML5 with CSS3 in Hindi से लिया गया है। इसलिए यदि ये Article आपके लिए उपयोगी रहा, तो निश्चित रूप से ये पुस्तक भी आपके लिए काफी उपयोगी साबित होगी। 

HTML5 with CSS3 in Hindi | Page: 481 | Format: PDF

BUY NOW DOWNLOAD READ ONLINE

Download All Hindi EBooks

सभी हिन्दी EBooks C, C++, Java, C#, ASP.NET, Oracle, Data Structure, VB6, PHP, HTML5, JavaScript, jQuery, WordPress, etc... के DOWNLOAD LINKS प्राप्‍त करें, अपने EMail पर।

Register करके Login करें। इस Popup से छुटकारा पाएें।