Skip to main content

Writing Your First HTML program

Writing Your First HTML Program

HTML में web pages create करना बहुत ही आसान है। जैसा की मैने आपको पहले बताया एक HTML program text और tags का combination होता है। इसलिए ये जरुरी है की यदि आपने अब तक HTML tags के बारे में नहीं पढ़ा है तो इस tutorial को आगे पढ़ने से पहले एक बार HTML tags के बारे में जरूर जान लें।
Tutorial के इस section में आप अपना पहला HTML program लिखना सीखेंगे। इसके बाद के section में आपको लिखे गए program को HTML webpage के रूप में run करना बताया जाएगा।

Choosing Text Editor For Writing HTML Program 

HTML के द्वारा web pages create करने के लिए आपको एक text editor की आवश्यकता होती है। इसके लिए आप कोई भी text editor use कर सकते है। कुछ popular text editors की list निचे दी जा रही है।
  • Notepad – यह text editor windows operating system द्वारा by default provide किया जाता है। इसे आप start menu से open कर सकते है। यह text editor बिलकुल simple है। लेकिन इसमें line numbers और code color जैसे features नहीं है। 
  • Notepad++ – यह text editor notepad-plus-plus.org website द्वारा provide किया गया है। यह notepad का advanced version माना जाता है। यह एक free source code editor है। इस editor में programming से संबधित कई useful features provide किये गए है। 
  • Sublime Text – Sublime text एक sophisticated text editor है। इस editor का user interface बहुत ही अच्छा है। ये text editor आपको IDE के equivalent features provide करता है। इसे आप sublimetext.com से download कर सकते है।  

Common Structure of HTML Program

सभी HTML file एक common structure को follow करती है। यह structure basic tags द्वारा form किया जाता है। हर HTML file में सभी basic tags को use करना अनिवार्य है। HTML का basic structure निचे बताया जा रहा है। 
<!DOCTYPE html>
<html>

<head>
<title>Title of your webpage</title>
</head>
<body>
Main content of your webpage here
</body>
</html>

 हर HTML file की starting और ending <html> tag से होनी चाहिए। HTML tag के बाद <head> tag define किया जाता है। <head> tag के अंदर आप web page का title <title> tag द्वारा define करते है।
Webpage का title browser में menu बार के ऊपर show किया जाता है। <head> tag के बाद <body> tag define किया जाता है। <body> tag में webpage का मुख्य content लिखा जाता है।

A Simplest HTML Program 

निचे एक simple HTML program दिया गया है।
<!DOCTYPE html>
<html>
<head>

<title>My First Webpage</title>
</head>
<body>
<h1>My First Webpage</h1>
</body>
</html>
इस program में basic tags के आलावा <body> tag में सिर्फ <h1> tag add किया गया है। यह tag text को heading के रूप में show करता है। इस program को आप अपने text editor में लिख लीजिये।

Interpreting a HTML Program

किसी भी HTML program/code को webpage के रूप में देखने के लिए सबसे पहले आपको उसे .html extension के साथ save करना होता है। By default text editor में जब आप किसी file को save करते है तो वह .txt extension के साथ save होती है। इसलिए HTML file को save करते समय ही आपको उसके नाम के आगे .html extension लगाना होता है।
First-HTML-script-in-Hindi
Web browser interpreter उसी file को webpage के रूप में interprete करता है जिसका extension .html होता है। इस extension से interpreter को पता चल जाता है की file एक HTML file है। इसलिए HTML file को .html extension के साथ save करना अनिवार्य होता है।
Saving-HTML-document-in-Hindi
जैसे ही आप file को .html extension के साथ save करेंगे तो interpreter आपकी file को interpret कर देगा और आपकी file save की गयी location पर browser icon के साथ show होगी। Icon आपके computer में default browser का ही show होगा। इसका मतलब ये होता है की यह एक webpage है।
HTML-webpage-in-Hindi

जैसे ही आप इस file को open करेंगे तो HTML page आपको show हो जाएगा।
First-HTML-webpage-in-Hindi

यदि आपके code में कोई error है तो HTML page आपको show नहीं होगा। एक बात आपको ध्यान रखनी चाहिए की HTML में error reporting feature नहीं है। इसलिए यदि आपके code में कोई error है तो आपको उसे खुद ही ढूँढ कर ठीक करना होगा। 

Comments

Popular posts from this blog

कम्प्यूटर की पीढियाँ (Generation of Computer in Hindi)

कम्प्यूटर की पीढियाँ (Generation of Computer in Hindi) कंप्यूटर का विकास 16 वीं शताब्दी से शुरू हो गया था तथा आज का आधुनिक कंप्यूटर्स इसका परिणाम है। हालांकि, कंप्यूटर के विकास में तेज़ी से बदलाव आया। प्रत्येक पीढ़ी के बाद, कंप्यूटर के आकार-प्रकार, कार्यप्रणाली और कार्यशीलता में बहुत सुधार हुआ है। वर्तमान के कंप्यूटर काफी आधुनिक और विकशित है। इस क्रम-विकास की अवधि के दौरान, कंप्यूटर में काफी परिवर्तन आये जिसने कंप्यूटरों की नई पीढीयों को जन्म तथा विभिन्न प्रकार की कंप्यूटर का आविष्कार हुआ। जिससे हम  जनरेशन ऑफ कंप्यूटर   (Generation of Computer in Hindi)  के रूप में जानते है तथा इसे पांच अलग चरणों में विभाजित किया गया है। पहली पीढ़ी के कंप्यूटर (1940 – 1956) दूसरी पीढ़ी के कंप्यूटर (1956 – 1963) तीसरी पीढ़ी के कंप्यूटर (1964 – 1971) चौथी पीढ़ी के कंप्यूटर (1971 – 1980) पांचवीं पीढ़ी के कंप्यूटर (वर्तमान और भविष्य) फर्स्ट जनरेशन ऑफ कंप्यूटर (1940 – 1956) पहले पीढ़ी के कंप्यूटरों में  वैक्यूम ट्यूब  का इस्तेमाल किया गया था। वैक्यूम ट्यूब एक नाजुक कांच का यंत्र था, जो फिलाम

कंप्यूटर कि-बोर्ड के कुछ अनोखे शॉर्टकट्स

      👇 कंप्यूटर कि-बोर्ड के कुछ अनोखे शॉर्टकट्स 👇  हैल्लो दोस्तों मैं सर्वेश शर्मा , आज हम जानेंगे कुछ कंप्यूटर शॉर्टकट्स के बारे में तो जितने ज्यादा शॉर्टकट आपके दिमाग में रहते हैं, आप उतनी ही तेज़ी से कंप्यूटर पर काम कर सकते हैं। तो आप सुनिश्चित करें कि अधिकतम शॉर्टकट आपको पता हों। यहाँ हम कुछ ऐसे ही शॉर्टकट की बात करेंगे जिनके इस्तेमाल से आप काफी हद तक अपना समय बचा सकते हैं, सामान्य शॉर्टकट: किसी भी फाइल या फोल्डर को बिना रीसायकल बिन में पहुंचाए डिलीट करें (परमानेंट डिलीट करें): शॉर्टकट:  Shift + Delete किसी विंडो, डेस्कटॉप या डॉक्यूमेंट के सभी आइटम सेलेक्ट करें: शॉर्टकट:  Ctrl + A ( संपूर्ण टेक्स्ट सेलेक्ट करने के लिए ) शॉर्टकट:  Alt + Enter खुली विंडोज़(या एप्लीकेशन) को आपस में स्विच करे । शॉर्टकट:  Alt + Tab खुली हुई विंडोज (या एप्लीकेशन) को आपस में स्विच करें (विंडोज फ्लिप एरो द्वारा): शॉर्टकट:  Windows logo key + Tab वर्तमान विंडो से पहले जो विंडो आपने खोली थी उसपर जाएँ: शॉर्टकट:  Alt + Esc 'टास्क मेनेजर' को ओपन करें: शॉर्टकट:

10 सिक्रेट कंप्यूटर टिप्स् एंड ट्रिक्स: नहीं जानेंगे तो नहीं बन पाएंगे पॉवर यूजर

10 सिक्रेट कंप्यूटर टिप्स् एंड ट्रिक्स: नहीं जानेंगे तो नहीं बन पाएंगे पॉवर यूजर ||SHARMA COMPUTE GYAN Hindi Computer Tips: कई कट्टर कंप्यूटर यूजर्स को लग सकता हैं की, उन्‍हे अब नई ट्रिक सीखने की जरूरत नहीं हैं, लेकिन कंप्‍यूटर में हमेशा सीखने के लिए नई चीजें होती हैं जो आपके स्‍कील को बेहतर बनाने में मदद करती हैं। मेरी शर्त हैं इस आर्टिकलमें आपको कम से कम एक उपयोगी ट्रिक मिलेगी, जिसे आप पहले नहीं जानते थे। मेरा अंतिम लक्ष्य है की आप अपने वर्कफ़्लो से हर एक मूल्यवान सेकंड सेव करने के लिए अधिक प्रॉडक्टिव बनें। ये छोटे, लेकिन अभी तक अव्यक्त विंडोज टिप्स और ट्रिक्स आपके वर्कफ़्लो में बहुत बड़ा अंतर कर सकते हैं- और प्रोसेस में आपका बहुत समय बचा सकते हैं। बेशक, आप हमेशा इन Computer Tips Tricks Hindi को फ्रेंडस् और फैमेली मेंबर्स के साथ शेयर कर सकते हैं ताकि वे भी बेहतर पीसी यूजर्स बन सके। Computer Tips Tricks Hindi: PC Tips and Tricks in Hindi: Computer Tricks and Secrets in Hindi: 1) Problem Steps Recorder : Problem Steps Recorder का उपयोग करें यह आसान टूल ऑटो