# तकनीकी मंच > कंप्यूटर (संगणक) > प्रोग्रामिंग लेंग्वेज >  एच टी एम एल (HTML) हायपर टेक्स्ट मार्कअप लेंग्वेज - Teach Guru

## Teach Guru

*HTML
एच टी एम एल*



 ** परिचय* 

एच टी एम एल या 'हायपर टेक्स्ट मार्कअप लेंग्वेज' किसी भी वेबपेज का आधार है। यहाँ एक प्रोग्रामिंग लेंग्वेज है जिसमे वेब पेजों को बनाने और दिखाने के लिए विभिन्न 'टेग्स' का प्रयोग किया जाता है। एच टी एम एल कोड को किसी भी टेक्स्ट एडिटर जैसे नोटपेड आदि में लिखा जा सकता है। इसमें लिखे गये कोड का आउटपुट देखने के लिए हमें ब्राउज़र का प्रयोग करना होता है। इन्टरनेट एक्स्प्लोरर, नेट्स्केप नेविगेटर, ओपेरा या फायरफोक्स आदि प्रचलित ब्राउज़र (सोफ्टवेयर) है। इनमे से अपनी सुविधानुसार कोई भी ब्राउज़र इस्तेमाल किया जा सकता है। 

एच टी एम एल के माध्यम से हम विभिन्न प्रकार के डाक्यूमेंट्स को आपस में जोड़ सकते है तथा विभिन्न इमेज भी इन्सर्ट कर सकते हैं। इस प्रकार एक ही पेज पर विभिन्न मल्टीमीडिया अवयवों को प्रस्तुत किया जा सकता है। 

इन मल्टीमीडिया अवयवों को वेब पेज पर दर्शाने के लिए हमें जो टेग प्रयोग करने होंगे उसकी जानकारी मैंने आपको अगली पोस्ट में देता रहूँगा। टेग्स के बारे में जानने के लिए मुख्य शब्दों से परिचय कर लें:  

HTTP: Hyper Text Transfer Protocol
URL: Uniform(universal) Resource Locator (वेबसाइट का एड्रेस)
www: Word Wide Web


उदाहरण के लिए यदि किसी कम्पनी का वेबसाइट एड्रेस http://www.google.com है तो तो इसका आशय है की यहाँ वर्ड वाइड वेब का हिस्सा है तथा एच टी टी पी प्रोटोकॉल का प्रयोग किया जा रहा है। अंत में .com यह बताता है की यह वेबसाइट व्यवसायिक (commercial) प्रयोग हेतु है। यह सम्पूर्ण वेबसाइट एड्रेस URL कहलाता है।

----------


## Teach Guru

*



उपरोक्त वेबपेज के पीछे जो एच एम टी एल कोड है, इसका अनुमान आपको निम्न चित्र से लग जायेगा।*

----------


## Teach Guru

**एलिमेंट* 

एलिमेंट वेब पेज पर सूचनाओं के प्रदर्शित होने के तरीके को दर्शाता है। हेडिंग, पेराग्राफ, हाईपरलिंक, लिस्ट आदि एलिमेंट्स के कुछ उदहारण हैं। 
HTML एलिमेंट में निम्न अवयव होते हैं :-

* ओपनिंग टैग (Opening Tag)
* ऐट्रिब्यूट्स (attributes)
* कुछ सुचना अथवा जानकारी 
* क्लोजिंग टैग (closing tag)

उदाहरण  :

<p align="center">This is demo.</p>

एलिमेंट्स कई प्रकार के होते हैं। जैसे ब्लाक आधारित एलिमेंट्स (<p>...</p>, <hr>, list etc.)
इनलाइन एलिमेंट्स (<b>...</b>, <sup>...</sup>, <strike>...</strike>  etc.) 
तथा अन्य (<img>...</img>, <marquee>...</marquee> etc.)

इस विभिन्न प्रकार के अलिमेंट्स का जिक्र आगे विस्तार से करूँगा।

----------


## Teach Guru

** टेग
*

वेबपेज पर विभिन्न प्रकार के अवयवों जैसे टेबल, लिस्ट, इमेज आदि को प्रदर्शित करने के लिए टेग का प्रयोग किया जाता है, किसी टेग को < से प्रारम्भ और > से समाप्त किया जाता है।

टेग मुख्यत: दो प्रकार के होते हैं: पेयर्ड (paired) टेग्स तथा सिंगुलर (singular) टेग। पेयर्ड टेग्स में ओपनिंग तथा क्लोजिंग दोनों ही टेग्स होते हैं जैसे <b>...</b> जबकि सिंगुलर में क्लोजिंग टेग नहीं होता जैसे <br> ।

निम्न उदाहरण में <p> तथा </p> टेग के उदाहरण हैं:

<p align="center">This is a demo.</p>

----------


## jeet6162

मित्र 
यह सब तो हमे पता ही नही था
आप बहुत ही अच्छी जानकारी दे रहे हो

----------


## Teach Guru

**एट्रिब्यूट* 

एट्रिब्यूट का प्रयोग किसी टेग की विभिन्न प्रोपर्टीज को निर्धारित करने के लिए किया जाता है। उदहारण के लिए <p> टेग के align एट्रिब्यूट का प्रयोग करके पैराग्राफ का अलाइमेंट left, right अथवा center सेट किया जा सकता  

है। इसी प्रकार <body> टेग के bgcolor एट्रिब्यूट का प्रयोग करके ब्राउज़र की बॉडी का बेकग्राउंड कलर सेट किया जा सकता है। 

नीचे दिए गए उदाहरण में <body> टेग के bgcolor तथा <p> टेग के align एट्रिब्यूट का प्रयोग करके बॉडी का बेकग्राउंड रंग नीला तथा पैराग्राफ का center अलाइमेंट सेट किया है।


<html>
<head>
<title>Demo</title>
</head> 
<body bgcolor="lightblue">
<p align="center">   

Hello, this is a demo of html  - Teach Guru

</p>
</body>
</html>



*ये ब्राउजर में ऐसा दिखेगा*

----------


## Teach Guru

> मित्र 
> यह सब तो हमे पता ही नही था
> आप बहुत ही अच्छी जानकारी दे रहे हो



*सूत्र आगमन के लिए धन्यवाद मित्र ....
अभी तो बहुत कुछ बाकी है जितना लिखता हूँ उतना पोस्ट किये जा रहा हूँ......
*

----------


## Teach Guru

** एच टी एम एल प्रोग्राम का प्रारूप* 

एचटीएमएल पेज मुख्यत: दो भागों में विभाजित किया जा सकता है।

-: head सेक्शन तथा 
-: body सेक्शन 

इसे समझने के लिए निम्न उदाहरण देखिये:

<html>
<head>
     <title>
   HTML basics
   </title>
</head>
<body>
       my frist web page.
</body>
</html>




उपरोक्त कोड अपने आप में पूर्ण है, इसे किसी भी टेक्स्ट एडिटर के माध्यम से सेव किया जा सकता है, इसे सेव करते समय फाइल के नाम के आगे .htm या .html एक्स्टेंशन अवश्य लगायें।
उदाहरण के लिए यदि आप फाइल का नाम index देना चाहते हैं तो सेव करते समय यह नाम इस प्रकार लिखे "index.htm"

फाइल को सेव करने के पश्चात इसे डबल क्लिक कर दें ये निचे दिए गए चित्रानुसार ब्राउज़र में प्रदर्शित हो जायेगा।
यह ध्यान रखें की एचटीएमएल टेग कैश इंसेंसिटिव है, अर्थात html और HTML दोनों के अर्थ समान है।

----------


## Teach Guru

* <html> टैग 

यह टैग एचटीएमएल पेज के प्रारम्भ में होता है तथा इसे </HTML> टैग से पेज के अंत में बंद किया जाता है।
यह टैग ब्राउज़र को यह बताता है की इन टैग्स के बीच में एचटीएमएल कोड है।

----------


## Teach Guru

*** *<head>** टैग* 

इस टैग में टाइटल बार पर नजर आने वाला टेक्स्ट, स्क्रिप्ट अन्य डाक्यूमेंट हैडर तथा मेटा टैग आदि लिखें जाते हैं, इसे पेज के <body> के शुरू होने से पूर्व </head> से बंद किया जाता है।
टाइटल बार पर किसी टेक्स्ट को प्रदर्शित करने के लिए इस टैग में <title> टैग का प्रयोग किया जाता है।

----------


## Teach Guru

**** <body>** टैग* 

इस टैग का प्रयोग ब्राउज़र में टेक्स्ट, इमेज आदि प्रदर्शित करने के लिए किया जाता है, इसे </body> टैग से बंद किया जाता है, इस टैग के साथ निम्नलिखित ऐट्रिब्यूट्स का प्रयोग किया जा सकता है।



*ऐट्रिब्यूट्स*
*विवरण* 

background 
बेकग्राउंड इमेज सेट करने के लिए। उदाहरण  - 
<body background="c:\image\demo.jpg">

bgcolor 
बेकग्राउंड कलर सेट करने के लिए। उदाहरण - <body bgcolor="blue"> 

text 
टेक्स्ट का कलर सेट करने के लिए। उदाहरण - <body text="white">

topmargin 
टॉप तथा बोटम मार्जिन सेट करने के लिए। उदाहरण - 
<body topmargin="50">

leftmargin 
लेफ्ट तथा राइट मार्जिन सेट करने के लिए। उदाहरण - 
<body leftmargin="30">

scroll  
स्क्रोलिंग सुविधा को बंद (डिसेबल) या इनेबल करने के लिए। उदाहरण - <body scroll="no">,  <body scroll="yes">  डिफाल्ट वैल्यू yes

----------


## mamta007

*बहुत अच्छा सूत्र बनया है गुरूजी काफी लाभदायक साबित होगा............*

----------


## Krishna

बहुत अच्छे भाई .... 
ये वास्तव में काम का सूत्र है | 
कभी सहायता की आवश्यकता हो तो अपने अनुज स्मार्टी को याद करना | .....

----------


## Teach Guru

> बहुत अच्छे भाई .... 
> ये वास्तव में काम का सूत्र है | 
> कभी सहायता की आवश्यकता हो तो अपने अनुज स्मार्टी को याद करना | .....


*आपका तहेदिल से स्वागत है भाई ...........

*

----------


## Rajeev

बहुत उम्दा सूत्र का निर्माण किया है गुरु जी। मैं कब से इसी प्रकार की जानकारी का प्रतीक्षा कर रहा था।
ये जानकारी मेरे लिए कारगार सिद्ध होगी इस बहुमूल्य जानकारी के लिए आपका बहुत-बहुत आभार।
और बताये जीटॉक में देखाई नहीं देते है क्या बात है ?

----------


## Saroz

ज्ञानवर्धक सूत्र का निर्माण किया है मित्र आपने....
मै आपसे Language C & C++ की जानकारियों से भरे सूत्र कि अपेक्षा करूँगा.... +repo

----------


## Rajeev

> ज्ञानवर्धक सूत्र का निर्माण किया है मित्र आपने....
> मै आपसे Language C & C++ की जानकारियों से भरे सूत्र कि अपेक्षा करूँगा.... +repo


बहुत अच्छा सुझाव है सरोज जी |
मैं भी ऐसी जानकारियों की प्रतीक्षा में हूँ |

----------


## Teach Guru

** <p> टैग  (पैराग्राफ टैग)*


इस टैग का प्रयोग पैराग्राफ लिखने के लिए किया जाता है, जब इस टैग का प्रयोग किया जाता है तो पैराग्राफ के ऊपर तथा नीचे की तरफ एक खाली लाइन जुड़ जाती है, 
इस टैग के साथ निम्नलिखित एट्रिब्यूट का प्रयोग किया जाता है.....

एट्रिब्यूट  विवरण 
align    पैराग्राफ का अलाइनमेंट left, right, center या justyfy  सेट करने के लिए 
            उदाहरण -:<p algin ="left">  डिफाल्ट वैल्यू -: left



उदाहरण : नीचे दिए गए उदाहरण में ब्राउज़र के बॉडी सेक्शन में एक पैराग्राफ प्रिंट कराया गया है...

<html>

<head>
<title>Demo Paragraph</title>
</head>
<body>
<p>Hello, This Is A Demo Of Paragraph</p>

</body>

</html>

----------


## Teach Guru

*उदाहरण : नीचे दिए गए उदाहरण में एक पैराग्राफ प्रिंट कराया गया है, बॉडी टैग के साथ दो एट्रिब्यूट्स text तथा bgcolor का प्रयोग किया गया है, जिसमे बॉडी में प्रदर्शित होने वाला टेक्स्ट सफेत रंग में तथा बॉडी का बैकग्राउंड  काला प्रदर्शित होगा...

*
<html>

<head>
<title>Demo Paragraph</title>
</head>
<body text="white" bgcolor="black">
<p>Hello, This Is A Demo Of Paragraph</p>

</body>
</html>





*उदाहरण : नीचे दिए गए उदाहरण में एक पैराग्राफ को प्रिंट कराया गया है, इस पैराग्राफ को लिखते समय इनके शब्दों के बीच में कुछ स्पेस तथा इंटर बटन का प्रयोग किया गया है, 
किन्तु ब्राउज़र में ये खाली स्पेस तथा इंटर केवल एक स्पेस में परिवर्तित हो जाते हैं...*

<html>

<head>
<title>Demo Paragraph</title>
</head>
<body>
<p>Hello,           This Is             A Demo       


Of Paragraph</p>

</body>
</html>




*उदाहरण : नीचे दिए गए उदाहरण में पैराग्राफ टैग के अंतर्गत align एट्रिब्यूट को समझाया है...*


  <html>

<head>
<title>Demo Paragraph</title>
</head>
<body>
<p align="center">Hello, This Is A Demo Of Paragraph</p>
<p align="right">Hello, This Is A Demo Of Paragraph</p>
<p align="left">Hello, This Is A Demo Of Paragraph</p>

</body>

</html>

----------


## Teach Guru

** <pre> टैग (Pre Formatted Text)*


इस टैग का प्रयोग वहाँ किया जाता है जब हमें टाइप किया हुआ हुबहू देखना होता है...

नीचे दिए गए उदाहरण में <pre> का प्रयोग किया गया है, इस टैग का प्रयोग करने से पैराग्राफ के शब्दों को जिस प्रकार लिखा
 (खाली स्पेस, टैब,इंटर ) जाता है, वे उसी प्रकार ब्राउज़र में आउटपुट दिखाते हैं..


<html>
   <head>
<title>Demo</title>
</head>
<body>

<p>hello, this is 
           a demo </p>

<pre>hello, this is 
           a demo </pre>

</body>
</html>

----------


## Teach Guru

** <br> टैग  (Line Break)*

इस टैग का प्रयोग लाइन ब्रेक करने के लिए किया जाता है, अर्थात टैग के बाद दिया जाने वाला टेक्स्ट अथवा ग्राफिक अगली लाइन में आता है ..

उदाहरण : नीचे दिए गए उदाहरण में पैराग्राफ  टैग के अंदर <br> टैग का प्रयोग किया गया है..
<br> टैग जहाँ दिया गया है वहाँ से आगे का टेक्स्ट अगली लाइन में प्रिंट होगा अर्थात hello,पहली लाइन में तथा this is demo अगली 

लाइन में प्रिंट होगा... 


<html>
   <head>
      <title>Demo</title>
   </head>
    <body>
           <p>Hello, <br>this is a demo </p>

   </body>
</html>

----------


## Teach Guru

*HTML* *का पहला अध्याय समाप्त हो गया है अब कुछ ध्यान देंने योग्य बातें पढ़ें* 

: एचएमटीएल एक प्रोग्रामिंग लेंग्वेज है जिसमें वेब पेजों को बनाने और दिखने के लिए विभिन्न टैग्स का प्रयोग किया जाता है...
: एचएमटीएल कोड को किसी भी टेक्स्ट एडिटर जैसे नोटपेड आदि में लिखा जा सकता है...
: एचएमटीएल में लिखे गए कोड का आउटपुट देखने के लिए हमें ब्राउज़र का प्रयोग करना होता है...
: एचएमटीएल फाइल का एक्सटेंशन .htm या .html होता है...
: टैग को < से प्रारम्भ तथा > से समाप्त किया जाता है...
: एट्रीब्यूट का प्रयोग किसी टैग की विभिन्न प्रोपर्टीज की निर्धारित करने के लिए किया जाता है...
: एचएमटीएल पेज को मुख्यत: दो भागों में विभाजित किया जा सकता है: head सेक्शन तथा body सेक्शन ...
: यदि हमें आउटपुट में पैराग्राफ को वैसा ही देखना चाहतें है जैसा की हमने टाइप किया है तो इसके लिए
<pre> टैग का प्रयोग किया जाता है...
: <br> टैग के बाद दिया जाने वाला टेक्स्ट अथवा ग्राफिक अगली लाइन में आता है ..

----------


## Teach Guru

*अगला अध्याय है फोर्मेटिंग ....  
जिसके बारे में मैं कल बताऊंगा...*

----------


## donsplender

बहुत अच्छा एवं सराहनिय कार्य ! मित्र सूत्र को निरन्तर अपडेट करते हुए पुरा जरूर करना ! क्योंकी ये मेर लिए भले ही उपयोगी ना हो पर प्रोग्रामिंग लेंग्वेज आदि विषयों पर हिन्दी में सामग्री सहजता से उपलब्द्ध नहीं होती इसलिए सीखने वालों के लिए ये बहुमुल्य उपहार है ।

----------


## Teach Guru

> बहुत अच्छा एवं सराहनिय कार्य ! मित्र सूत्र को निरन्तर अपडेट करते हुए पुरा जरूर करना ! क्योंकी ये मेर लिए भले ही उपयोगी ना हो पर प्रोग्रामिंग लेंग्वेज आदि विषयों पर हिन्दी में सामग्री सहजता से उपलब्द्ध नहीं होती इसलिए सीखने वालों के लिए ये बहुमुल्य उपहार है ।


*मित्र मैं यही चाहता हूँ की हिंदी में ये जानकारी अपनी इस फोरम पर हो ... जैसे जैसे समय मिलता है सूत्र अपडेट कर रहा हूँ......*

----------


## Teach Guru

*फोर्मेटिंग (Formating)*

वेब पेज पर प्रदर्शित होने वाले टेक्स्ट को कभी अलग-अलग फोर्मेट में प्रदर्शित करवाने की आवश्यकता पड़ सकती है, उदाहरण के लिए किसी हेडिंग को बड़े साइज़ में प्रदर्शित करना या किसी महत्वपूर्ण शब्द को बोल्ड या अंडरलाइन करके दिखाना आदि, इस प्रकार के कार्यों को करने के लिए HTML में कई टैग उपस्थित है जैसे <b>, <i>, <u>,<big>, <strike> आदि... इन टैग्स का प्रयोग करके किसी वेब पेज को अधिक प्रभावशाली बनाया जा सकता है...

----------


## Teach Guru

** <b>, <i>, <u>** टैग* 


इन टैग्स का प्रयोग टेक्स्ट या उसके किसी भाग को बोल्ड, इटेलिक तथा अंडरलाइन करने के लिए किया जाता है....

उदाहरण: नीचे दिए गए उदाहरण में <b>, <i> तथा <u> टैग को समझाया गया है...


<html>
    <head>
      <title>Demo</title>
    </head>
    <body>
        <p>
        <b>this is a bold</b> <br>
        <i>this is italic</i> <br>
        <u>this is underline</u><br>
        <b><i><u>this is a bold, italic and underline</b></i></u>
        </p>
     </body>
</html>

----------


## Teach Guru

** <big>* *टैग*


ब्राउज़र में जो टेक्स्ट प्रदर्शित होता है उसका फॉण्ट साइज़ 1 से 7 तक हो सकता है, जब हम फॉण्ट के साइज़ को निर्धरित नहीं करते तो उसका डिफॉल्ट फॉण्ट साइज़ 3 होता है, यदि हम टेक्स्ट या 

उसके किसी भाग को <big> टैग के बीच में लिखते हैं तो उसका फॉण्ट साइज़ 1 से बढ़ जाता है, इसी प्रकार <big> टैग का प्रयोग यदि दो बार किया जाये तो टेक्स्ट का साइज़ 2 से बढ़ जाता 

है अर्थात 5 हो जाता है ...



*** *<small>** टैग* 



जिस प्रकार <big> टैग का प्रयोग साइज़ को बढ़ाने के लिए किया जाता है उसी प्रकार <small> टैग का प्रयोग फॉण्ट साइज़ को घटाने के लिए किया जाता है..


उदाहरण: नीछे दिए गए उदाहरण में <big> तथा <small> टैग को समझाया गया है....


<html>
<head>
<title>Demo</title>
</head>
<body>
<p>

 this is normal<br>
  <big>this is big</big> <br>
  <big><big>this is big</big></big> <br>
  <small>this is small</small> <br>
  <small><small>this is smaller</small></small> <br>

</p>
</body>
</html>

----------


## Teach Guru

** <strike>, <sub>, <sup>* टैग 



strike टैग का प्रयोग टेक्स्ट को स्ट्राइक थ्रू प्रभाव देने के लिए किया जाता है, इसके लिए <s> टैग का प्रयोग भी किया जाता है...


<sub> और <sup> का प्रयोग टेक्स्ट पर सब स्क्रिप्ट या सुपर स्क्रिप्ट प्रभाव देने के लिए किया जाता है....


उदाहरण: नीछे दिए गए उदाहरण में इन तीनो टैग को समझाया गया है..


<html>
    <head>
      <title>Demo</title>
    </head>
    <body>
        <p>
        <strike>this is strike</strike> <br>
        <s>this is strike</s> <br>
        H<sub>2</sub> <br>
        X<sup>2</sup>+Y<sup>2</sup>
        </p>
     </body>
</html>

----------


## Teach Guru

** स्पेशल कैरेक्टर्स*

वेब पेज पर स्पेशल कैरेक्टर्स जैसे ®, © आदि को प्रदर्शित करवाया जाता है, इन स्पेशल कैरेक्टर्स को वेबपेज पर प्रदर्शित करने के लिए इनके कोड अथवा नेम वेल्यु का प्रयोग करना होता है, 
मुख्यत: स्पेशल कैरेक्टर्स की सारणी नीचे दी गयी है....





```
कोड         नेम वेल्यु           कैरेक्टर्स
&#034;    &QUOT;               "
&#169;    &COPY;              ©
&#174;    &REG;                ®
&#060;    &LT;                   <
&#062;     &GT;                   >
&#038;     &AMP;                &
```

*जारी है..........................*

----------


## Teach Guru

उदाहरण: नीचे दिए गए उदाहरण में कुछ स्पेशल कैरेक्टर्स को उसकी नाम वेल्यु के आधार पर दर्शाया गया है...

<html>
<head>
<title>Demo</title>
</head>
<body>
<p>
    see &quot; <br>
    see &copy; <br>
    see &reg; <br>
    see &copy; <br>

</p>
</body>
</html>

----------


## Teach Guru

उदाहरण: नीचे दिए गए उदाहरण में कुछ स्पेशल कैरेक्टर्स को उनके कोड आधार पर दर्शाया गया है..

----------


## Teach Guru

तो बस मित्रों आज के लिए इतना ही अभी आप बताये गए अध्याय को दोहराईये खुद करके देखिये 
-- धन्यवाद

----------


## Rajeev

गुरु जी, आपने ये कैसे बनाया ?

----------


## Teach Guru

[QUOTE=Rajeev;1772782]गुरु जी, आपने ये कैसे बनाया ?

ये बोर्डर है बोर्डर के लिए बी बी कोड है --->>


  [TABLE="class: outer_border, width: 500"]
[TR]
[TD] 
यहाँ जो लिखना है वो लिखो 
[/TD]
[/TR]
[/TABLE]

----------


## ramsingh111

उम्दा जानकारी हे मित्र आप का शुक्रिया इस सूत्र के निर्माण के लिया आप का धन्यवाद 
और लैंग्वेज की जानकारी का सूत्र भी निर्मित केरे मित्र एक बार फिर शुक्रिया इस सूत्र क्र निर्माण के लिए 
रेपो + कबूल केरे और इसे ज्ञानवर्धक सूत्रों का निर्माण जारी रखे

----------


## Teach Guru

** <blink>* *टैग* 


इस टैग के बिच में लिखा गया टेक्स्ट ब्लिंक करता हुआ दिखाई देता है...

उदाहरण: नीचे दिए गए उदाहरण में <blink> टैग को समझाया गया है..

<html>
<head>
<title>Demo</title>
</head>
<body>
<blink>this is blink</blink>
</body>
</html>




आप खुद इस कोड को नोटपेड पर लिखें और कोई भी नाम देकर .html या .htm से सेव करे फिर फाइल को ओपन करे और खुद अनुभव करें...

----------


## Teach Guru

** <Hn> टैग (Heading Tag)*


इस टैग का प्रयोग हेडिंग देने के लिए किया जाता है, हेडिंग h1 से लेकर  h6 तक हो सकते हैं, इस टैग के साथ निम्नलिखित एट्रीब्यूट का प्रयोग किया जाता है.. 

*एट्रीब्यूट * 
*विवरण*

align
हैडिंग का अलाइनमेंट left, right, center या justify सेट करने के लिए..
उदाहरण: h1 align<"center">
डिफाल्ट वेल्यु: left



उदाहरण:नीचे दिए गए उदाहरण में h1 से h6 तक टैग को दर्शाया गया है..
 <html>
<head>
<title>Demo</title>
</head>
<body>
<h1>Heading Tag</h1>
<h2>Heading Tag</h2>
<h3>Heading Tag</h3>
<h4>Heading Tag</h4>
<h5>Heading Tag</h5>
<h6>Heading Tag</h6>
</body>
</html>

----------


## Teach Guru

** <hr> टैग (Horizontal Rule Tag)*


इस टैग का प्रयोग उर्ध्वाकार(आडी) लाइन बनाने के लिए किया जाता है, इस टैग के साथ निम्नलिखित एट्रीब्युट्स  का प्रयोग किया जाता है:

*एट्रीब्युट * 
*विवरण* 

size 
लाइन की मोटाई निर्धारित करने के लिए  उदाहरण: <hr size=20>

width
लाइन की चौड़ाई निर्धारित करने के लिए,चौड़ाई को प्रतिशत अथवा पिक्सेल में दिया जाता है  उदाहरण: <hr width="20%">, <hr width="20">

noshade
लाइन का शेड हटाने के लिए  उदाहरण: <hr width="20%" noshade>

align 
लाइन का अलाइनमेंट left, right या  center करने के लिए  
उदाहरण: <align="center">

color 
लाइन का कलर सेट करने के लिए उदाहरण: <hr width="20" color="red">



उदाहरण: नीचे दिए गए उदाहरण में hr टैग को समझाया गया है...

<html>
<head>
<title>Demo</title>
</head>
<body>

<p>Horizontal Rule Tag</p>
<hr>

<p align="center">Horizontal Rule Tag</p>
<hr width="40%" size="20" color="blue">

<p>Horizontal Rule Tag</p>
<hr width=120 size="10" color="green" align="left">

<p align="right">Horizontal Rule Tag</p>
<hr width=120 size="10" noshade align="right">

</body>
</html>

----------


## Rajeev

गुरु जी, ये कौन-सा Addons है ?
इसका नाम और सम्पूर्ण जानकारी मिल सकती है ?

----------


## Teach Guru

> गुरु जी, ये कौन-सा Addons है ?
> इसका नाम और सम्पूर्ण जानकारी मिल सकती है ?


*
ये avast! WebRep है, ये avast एंटीवायरस के साथ इंस्टाल होता है ... ये किसी भी वेबसाइट को रेपुटेशन देने के काम आता है...*

----------


## Teach Guru

** <!--comment-->* *टैग* 

इस टैग का प्रयोग भी कमेन्ट लिखने के लिए किया जाता है, किन्तु इसमें कमेन्ट टैग के अंदर ही लिखना होता है...

उदाहरण: नीचे दिए गए उदाहरण में  <!--comment--> टैग को समझाया गया है..


<html>
   <!--paragraph>
   <body>
       <!--paragraph-->
       <p>This is demo</p>
    </body>
</html>

----------


## Teach Guru

** <div> टैग(Division Tag)*

इस टैग का प्रयोग नया सेक्शन बनाने के लिए किया जाता है, इस प्रकार बनाये गए सेक्शन के अलाइनमेंट अलग-अलग हो सकते है, 
इस टैग के साथ निम्नलिखित एट्रीब्यूट का प्रयोग किया जाता है..

*एट्रीब्यूट* 
 *विवरण* 

align
नए सेक्शन का अलाइनमेंट  left,right या  center सेट करने के लिए..
उदाहरण: <div align="center">
डिफाल्ट वेल्यु:left



उदाहरण: नीचे दिए गए उदाहरण में <div> टैग को समझाया गया है..

<html>
    <head>
        <title>Demo</title>
    </head>
   <body>
       <p> Hello, this IS a Demo.
       <div align="center">
       <p> Hello This Is a Demo <br>of div tag.

    </body>
</html>

----------


## Teach Guru

*आज दूसरा अध्याय समाप्त हो गया है अब कुछ ध्यान रखने योग्य बिंदु...*

* <b>, <i>, <u> टैग्स का प्रयोग टेक्स्ट या उसके किसी भाग को बोल्ड, इटेलिक, तथा अंडरलाइन करने के लिए किया जाता है..

* यदि हम टेक्स्ट या उसके किसी भाग को <big> टैग के बीच में रखते हैं तो उसका फॉण्ट साइज़ 1 से बढ़ जाता है..

* <small> टैग का प्रयोग फॉण्ट साइज़ को घटाने के लिए किया जाता है..

* <sub> तथा <sup> टैग्स को स्ट्राइक थ्रू प्रभाव देने के लिए किये जाता है ..

* स्पेशल करेक्टर को प्रदर्शित करने के लिए इनके कोड अथवा नाम वेल्यु का प्रयोग करना होता है..

* <Hn> टैग का प्रयोग हैडिंग देने के लिए होता है, हैडिंग h1 से h6 तक हो सकते है..

* <hr> टैग का प्रयोग उर्ध्वाकार (आड़ी) लाइन बनाने के लिए किया जाता है...

* <comment> टैग के बीच में लिखा गया टेक्स्ट आउटपुट (ब्राउज़र) में प्रदर्शित नहीं होता..

----------


## Teach Guru

*कल का अध्याय है* 

*फॉण्ट तथा इमेज* 



*तब तक आप बताये गए का रिविजन कीजिये...धन्यवाद ..*

----------


## PARIYAR

दिनेश जी ब्लॉग का पता जरुर दीजियेगा

----------


## Teach Guru

> दिनेश जी ब्लॉग का पता जरुर दीजियेगा


http://htmlhindime.blogspot.in

----------


## varunsah

> *आप हर सूत्र में एक हि प्रकार की पोस्ट करके स्पैम को बढ़ावा दे रहे हो मित्र*


ऐँसी कोइ बात नही हैँ मैँ आज यहाँ तीन महिने बाद आया ,, और इस बीच काफी फोरम बदल गया सभी और मैने कई सुत्र पढे जो अच्छा लगा उसपर प्रतिकृया दी इस सुत्र पर पहले कभी आया नही था ।

----------


## shankar52

*बहुत ही अछि ज्ञानवर्धक जानकारी आप ने दी है  आशा करता ही की आप ऐसे ही जानकारी देते रहंगे  आपका धन्यवाद*

----------


## anita

> *
> 
> Attachment 720509
> 
> उपरोक्त वेबपेज के पीछे जो एच एम टी एल कोड है, इसका अनुमान आपको निम्न चित्र से लग जायेगा।* 
> 
> Attachment 720510



बहुत ही अच्छा प्रयास है मित्र 

यहाँ पे HTML के साथ साथ  java script भी प्रयोग में लाई  गयी है 


कुछ computer की भाषायो में जैसे Java ,.net (C #,ASP.net  etc.) HTML ka प्रयोग वेब पेज पे लगाये हुए कंट्रोल्स के लिए भी होता है जैसे Text Box ,Combo Box

----------


## varunsah

दिनेश जी बहुत अच्ची जानकारी दे रहे कोइ मुझे बतायेगा कि टेमप्लेट इडिँटिग हिँदी मे कहाँ सिखने को मिलेगा

----------


## logical indian

अच्छा सूत्र है पर लंबे समय से अटका पड़ा है,,,,,,,,,,,,,,,,,,,,,,
सूत्र का इंतजार बड़ा है
बाहर मेरा ट्रक खड़ा है

----------


## Teach Guru

क्या इस सूत्र को अद्यतन किया जाये ??

----------


## Yadav

> क्या इस सूत्र को अद्यतन किया जाये ??


बिल्कुल मित्र किया जाये हम तो कब से इन्त्ज़ार कर रहे है मित्र बेबपेज का साइज क्या होना चाहिये जो कि सब जगह पुरे मोनिटर पर दिखाई दे
धन्यावाद

----------


## Teach Guru

> *कल का अध्याय है* 
> 
> *फॉण्ट तथा इमेज* 
> 
> 
> 
> *तब तक आप बताये गए का रिविजन कीजिये...धन्यवाद ..*



*फॉण्ट और इमेज* 

वेब पेज पर टेक्स्ट को विभिन्न फोंट्स, रंगो, तथा आकार में प्रदर्शित कराया जा सकता है, इसके लिए <font> टैग का प्रयोग किया जाता है, इस टैग के तीन एट्रीब्युट्स 

(face, color, size) की सहायता से वेब पेज पर प्रदर्शित होने वाले टेक्स्ट को अलग-अलग फोंट्स, रंग तथा आकार में दिखाया जा सकता है।

वेबपेज पर टेक्स्ट के अलावा इमेज को भी प्रदर्शित कराया जा सकता है, जिसके लिए <img> टैग का प्रयोग करना होता है, यदि इस टैग को हम एंकर टैग के बीच लगा देंगे तो 

इमेज पर क्लीक करने पर भी वह लिंक कार्य करेगा, लिंक सेट करना मैं आगे बताऊंगा।
*
<font> टैग* 
इस टैग का प्रयोग टेक्स्ट को निश्चित फॉण्ट, साइज़ (1 से 7) तथा कलर में प्रदर्शित करने के लिए किया जाता है, इस टैग के साथ निम्नलिखित एट्रीब्युट्स का प्रयोग किया जा 

सकता है।

एट्रीब्युट्स                 विवरण 
*face *         फॉण्ट का नाम निर्धारित करने के लिए। उदा. <font face="tahoma">    

*color  *       रंग (color) निर्धारित करने के लिए। उदा. <font color="red">

*size *          फॉण्ट का साइज़ निर्धारित करने के लिए। उदा. <font size=5>, <font size="+2">
                        डिफॉल्ट वेल्यु :3


उदाहरण :- नीचे दिए गए उदाहरण में <font> टैग तथा उसके एट्रीब्युट्स face, size एवं color को भी समझाया गया है।

<html>
  <head>
   <title>फॉण्ट का कलर और साइज</title>
</head>
<body>
<p>
<font face="tahoma" size=5 color= "red">
ये फॉण्ट का कलर और साइज प्रदर्शित करता है।
</font>
</p>
</body>
</html>


ब्राउज़र में इसका आउटपुट इस तरह दिखेगा।


क्रमशः ...

----------


## pkpasi

HTML मे िहनदी फांट की कोिडग कैसॆ होती ह

----------


## Krishna

> HTML मे िहनदी फांट की कोिडग कैसॆ होती ह



उसके लिए आपको हैपर टेक्स्ट के साथ हिंदी फॉण्ट में लिखना होगा | आपका काम हो जायेगा |
प्रयास कर के देखें |
धन्यवाद  |

----------


## logical indian

जनाब बेहद आचा सूत्र हें आपका <<<< आपको रेपों <<< हो हो हो <<<

----------


## INDIAN_ROSE22

टेक गुरु जी ...............................  मैंने एक ब्लॉग बनाया है :  लिंक .................  इस में होम पेज पर जो फोटो मर्कुए हो रही है ..................... मैं फोटो इस (लिंक ) वेब साईट की तरह चाहता हूँ .......... HTML कोड दे दीजिये .........

----------


## Krishna

> टेक गुरु जी ...............................  मैंने एक ब्लॉग बनाया है :  लिंक .................  इस में होम पेज पर जो फोटो मर्कुए हो रही है ..................... मैं फोटो इस (लिंक ) वेब साईट की तरह चाहता हूँ .......... HTML कोड दे दीजिये .........


भाई ये स्लाइडर है || यहाँ देखें |

----------


## Saroz

स्मार्टी जी नमस्कार.....मेरे कुछ प्रश्न....किसी वेबसाइट को बनाने के लिए बेसिक लैंग्वेज कौन सा है?सर्वर भी लैंग्वेज पर आधारित होते है जैसे windows, linux, unix.... कुछ और प्रश्न है... पहले इनके जवाब मिले तो अगली कड़ी सवालो की

----------


## anita

> स्मार्टी जी नमस्कार.....मेरे कुछ प्रश्न....किसी वेबसाइट को बनाने के लिए बेसिक लैंग्वेज कौन सा है?सर्वर भी लैंग्वेज पर आधारित होते है जैसे windows, linux, unix.... कुछ और प्रश्न है... पहले इनके जवाब मिले तो अगली कड़ी सवालो की



किसी भी वेबसाइट के लिए कोनसी बेसिक लैंग्वेज का प्रयोग करना है ये वेबसाइट किस प्रकार की है उस पे निर्भर करता है 


हा एक बात तो तय है की किस भी वेबसाइट HTML जरुरी है

----------


## Saroz

किसी वेबसाइट को किस लैंग्वेज पर built किया गया है इसकी जानकारी कैसे प्राप्त होगी......????

----------


## anita

कंप्यूटर लैंग्वेज वो माध्यम है जिस से हम उसे क्या करना है ये निर्देश देते है 




अन्यथा कंप्यूटर सिर्फ मशीन लैंग्वेज यानि की ० १ की ही भाषा समझ सकता है

----------


## Krishna

> स्मार्टी जी नमस्कार.....मेरे कुछ प्रश्न....किसी वेबसाइट को बनाने के लिए बेसिक लैंग्वेज कौन सा है?सर्वर भी लैंग्वेज पर आधारित होते है जैसे windows, linux, unix.... कुछ और प्रश्न है... पहले इनके जवाब मिले तो अगली कड़ी सवालो की



किसी स्टेटिक वेबसाइट को बनाने के लिए बेसिक लैंग्वेज  : एच टी एम् एल | 

सर्वर भी लैंग्वेज पर आधारित होते है जैसे windows, linux, unix  :  windows, linux, unix   ये लेंग्वेज नहीं ऑपरेटिंग सिस्टम हैं | 

हांजी सर्वर के ऑपरेटिंग सिस्टम अलग होते हैं | ये लिनिक्स या विंडोज हो सकते हैं  : ‎Server 2012 - ‎Server 2008 R2 - ‎Server 2003 - ‎Server 2008 UBUNTU RED-HAT आदि ...

----------


## Loka

> किसी वेबसाइट को किस लैंग्वेज पर built किया गया है इसकी जानकारी कैसे प्राप्त होगी......????


आजकल बहुत सारे प्लगइन और एक्सटेंशन उपलब्द है जो आपको बता देंगे की इस वेबसाइट में कोनसी लैंग्वेज या सॉफ्टवेर है जैसे अपना फोरम php में है तथा vbulltin इनस्टॉल है |

----------


## Saroz

किसी एक वेबसाइट में क्या 2 या इससे अधिक लैंग्वेज का इस्तेमाल किया जा सकता है?जैसे जानकारी के लिए फेसबुक किस लैंग्वेज पर बनाई गई है?

----------


## Krishna

> किसी वेबसाइट को किस लैंग्वेज पर built किया गया है इसकी जानकारी कैसे प्राप्त होगी......????



.JSP जिस URL के बाद लिखा होता है वो JAVA में 

.PHP जिस URL के बाद लिखा होता है वो PHP में  .. अभी मार्किट में बहुत कुछ है जो आपका URL हाइड कर सकता है | 

अपना फोरम : http://www.hindivichar.com/showthread.php?t=18548&page=7&p=2176574#post2176574

ये PHP में हैं |

----------


## Krishna

> किसी एक वेबसाइट में क्या 2 या इससे अधिक लैंग्वेज का इस्तेमाल किया जा सकता है?जैसे जानकारी के लिए फेसबुक किस लैंग्वेज पर बनाई गई है?


PHP में  ..........

----------


## Krishna

> किसी एक वेबसाइट में क्या 2 या इससे अधिक लैंग्वेज का इस्तेमाल किया जा सकता है?जैसे जानकारी के लिए फेसबुक किस लैंग्वेज पर बनाई गई है?



लेंगुएज तो कोई एक ही होगी क्योकि सर्वर की प्रोग्रामिंग के लिए आप एक ही लेंवेज आधारित सर्वर ले सकते हैं पर आप एक्टेंशन प्रयोग कर सकते हैं जैसे PHP की साईट में जावा स्क्रिप्ट और जे क्वेरी आदि ............

----------


## Loka

वैसे एक्सटेंशन से पता लगाना भी मुश्किल है क्यों की फ्रेंडली यूआरएल सॉफ्टवेर यूआरएल का एक्सटेंशन जो हम चाहते है कर सकते है |

----------


## Saroz

यानि कि कोई भी वेबसाइट बनाने के लिए HTML की जानकारी होनी चाहिए??

----------


## anita

> किसी स्टेटिक वेबसाइट को बनाने के लिए बेसिक लैंग्वेज  : एच टी एम् एल | 
> 
> सर्वर भी लैंग्वेज पर आधारित होते है जैसे windows, linux, unix  :  windows, linux, unix   ये लेंग्वेज नहीं ऑपरेटिंग सिस्टम हैं | 
> 
> हांजी सर्वर के ऑपरेटिंग सिस्टम अलग होते हैं | ये लिनिक्स या विंडोज हो सकते हैं  : ‎Server 2012 - ‎Server 2008 R2 - ‎Server 2003 - ‎Server 2008 UBUNTU RED-HAT आदि ...




ज्यादातर ऑपरेटिंग सिस्टम  C, C++ ya VC का इस्तेमाल करके बनाये गए

----------


## Krishna

> इस चीज़ का जानना थोड़ा सा टेढ़ा काम है 
> 
> 
> .net में बनी हुई वेबसाइट के पेजेस का एक्सटेंशन aspx होता है 
> 
> 
> जावा में बनी हुई वेबसाइट पे एक्सटेंशन नहीं दीखते है पर फिर भी गर पेज पे 
> 
> 
> ...




इस के बारे में बिगिनर वेबसाईट को ग्रेब कर के भी पता कर सकता है |

----------


## anita

> इस के बारे में बिगिनर वेबसाईट को ग्रेब कर के भी पता कर सकता है |



जी बिलकुल पर 






सर्वर साइड coding  की लैंग्वेज को जानना आसान  नहीं है

----------


## Krishna

> यानि कि कोई भी वेबसाइट बनाने के लिए HTML की जानकारी होनी चाहिए??



हाँ जी बहुत आसन है आप तो खुद अध्यापक हैं जल्दी ही सीख जायेंगे |

W3 SCHOOLS सर्च कर के आप बहुत कुछ सीख सकते हैं | जो आपके काम का है

----------


## Krishna

> जी बिलकुल पर 
> 
> 
> 
> 
> 
> 
> सर्वर साइड coding  की लैंग्वेज को जानना आसान  नहीं है



ये बात भी १०० आना और २५ टका सत्य है |

----------


## Krishna

अभी मैं चलता हूँ शुभ रात्रि  ...


मिलते हैं कल ....

----------


## anita

> हाँ जी बहुत आसन है आप तो खुद अध्यापक हैं जल्दी ही सीख जायेंगे |
> 
> W3 SCHOOLS सर्च कर के आप बहुत कुछ सीख सकते हैं | जो आपके काम का है



http://www.w3schools.com/html/html5_intro.asp



यहाँ से आप खुद भी सीख  सकते है 




और ये वेबसाइट क्लासिक asp में बनी हुई है

----------


## Saroz

बहुत बहुत धन्यवाद.... आप सभी तकनिकी एक्सपर्ट और नियामिका महोदया.... और हाँ loka जी का भी.... नया नाम प्रशासको में.... आपलोगों ने बिना देर किये मेरे प्रश्नों का जवाब दिया....

----------


## anita

> बहुत बहुत धन्यवाद.... आप सभी तकनिकी एक्सपर्ट और नियामिका महोदया.... और हाँ loka जी का भी.... नया नाम प्रशासको में.... आपलोगों ने बिना देर किये मेरे प्रश्नों का जवाब दिया....


अच्छा लगा आपको आपके प्रश्नो के उत्तर मिल गए 






कोशिश ये ही है की इस मंच को ज्ञान का अथाह सागर बनाया जाये 


*आपके सहयोग की आव्यशकता रहेगी मित्र*

----------


## Saroz

स्मार्टी जी आपने तो खुद मुखौटा चढ़ा रखा है और मेरी उतारने पर पड़े हैहुहुहूफिर भी मुझे HTML, C++, Java etc की जानकारी है बस जानकारी बढा रहा हूँ

----------


## Teach Guru

> किसी वेबसाइट को किस लैंग्वेज पर built किया गया है इसकी जानकारी कैसे प्राप्त होगी......????


मित्र builtwith नामक वेबसाइट पर किसी भी वेबसाइट के निर्माण में काम ली गयी तकनीक की जानकारी ले सकते हैं।

----------


## Yadav

namaskaar prabhu ji

ham new bussinus suru kiya hai ham apni website ko google par top potion par kaise la sakte hai jaise aap google me search karte hai barcode label manufacturers in ludhiana to yaha par superlabels.net aata hai kya free me bhi ho sakta hai ya paise lagege http://www.wdlwebservices.com/ sir ji ye website kaun se farmet me bani hai matlab php ta koi aur aisi 5 page ki website kitne me ban jaayegi sir ji ye link bhi chek kar lena ham aapke aabhari rahege dhanyaavaad mitr 

https://www.youtube.com/watch?v=m_hQEucnXB0

----------

