HTML Kya Hai

First Page
Next Page

HTML हाइपर टेक्स्ट मार्कअप लैंग्वेज पर स्थिर है जो वेब पेज विकसित करने के लिए वेब पर सबसे अधिक उपयोग की जाने वाली भाषा है. HTML को 1991 के अंत में बर्नर्स-ली द्वारा बनाया गया था लेकिन "HTML 2.0" पहला मानक HTML विनिर्देशन था जो 1995 में प्रकाशित हुआ था. HTML 4.01 HTML का एक प्रमुख Version था और इसे 1999 के अंत में प्रकाशित किया गया था. हालाँकि HTML 4.01 Version व्यापक रूप से है उपयोग किया जाता है. लेकिन वर्तमान में हमारे पास HTML-5 Version है जो HTML 4.01 का विस्तार है और यह Version 2012 में प्रकाशित हुआ है

HTML विभिन्न प्रकार के Tag और Attributes का उपयोग करके एक Web Document के Structure और Layout को Define करती है. HTML Files जो Webpage को Produce करती है यह केवल .html या .htm File Extensions वाले Text Documents मे उपयोग की जाती है. 1991 के अंत में प्रारंभिक परिचय के बाद से HTML मे कई Changes हुए है.

HTML मूल रूप से Scientific Documents का Actual रूप से वर्णन करने के लिए एक Language के रूप में तैयार की गई थी. हालांकि कई वर्षों से इसका सामान्य Design और Adaptations ने इसे कई अन्य प्रकार के Documents का वर्णन करने के लिए उपयोग किया है. लेकिन ये Hypertext Markup Language है क्या आइए इसे भी जानते है.

Hypertext

हाइपर टेक्स्ट को अगर हम सरल शब्दो में कहे तो इसको Text With in Text कहा जाता है यानी के टेक्स्ट के अंदर टेक्स्ट. एक टेक्स्ट के अंदर एक लिंक को हाइपरटेक्स्ट कहा जाता है. जब भी आप किसी एक लिंक पर क्लिक करते हैं जो आपको एक नए वेबपेज पर लेके जाता है तो इसका मतलब यह हुआ आपने एक हाइपरटेक्स्ट पर क्लिक किया है. हाइपर टेक्स्ट दो या दो से अधिक वेब पेज HTML डॉक्यूमेंट को एक दूसरे से लिंक करने का एक तरीका कहलाता है.

Markup Language

एक मार्कअप लैंग्वेज एक कंप्यूटर लैंग्वेज होती है जिसका उपयोग टेक्स्ट डॉक्यूमेंट में लेआउट और फॉर्मेटिंग कॉन्फरेन्सेस को लागू करने के लिए किया जाता है. मार्कअप लैंग्वेज टेक्स्ट को अधिक इंटरैक्टिव और गतिशील बनाती है. मार्कअप लैंग्वेज टेक्स्ट को इमेज, टेबल, लिंक आदि में बदल सकती है.

HTML का वर्णन

<DOCTYPE> Tag

जब भी आप कोई HTML में डॉक्यूमेंट बनाते हैं तो सबसे पहले DOCTYPE डॉक्यूमेंट लिखा जाता है. यह HTML के संस्करण के बारे में वेब ब्राउज़र को बताता है की इस पृष्ठ पर क्या लिखा गया है.

<HTML> Tag

HTML <HTML> टैग वह कंटेनर होता है जिसमें <DOCTYPE> टैग को छोड़कर अन्य सभी HTML एलिमेंट्स होते हैं जो ओपनिंग से पहले स्थित होता है <HTML> टैग. अन्य सभी HTML एलिमेंट्स को <HTML> और </ HTML> टैग के बीच नेस्ट किया गया है.

<Title> Tag

HTML डॉक्यूमेंट के लिए Title सेट करने के लिए HTML <Title> टैग का उपयोग किया जाता है. Body का Title <head> और </ head> टैग के बीच रखा गया है. HTML डॉक्यूमेंट Title वेब ब्राउज़र Title Row पर दिखाई देता है. इसे SEO के लिए अच्छा माना जाता है.

<Body> Tag

HTML में <Body> टैग का उपयोग वेब पेज की Body को सेट करने के लिए किया जाता है जिसमें चित्र, वीडियो पाठ आदि जैसी सभी सामग्री होती है.

<h1> Tag

HTML में <h1> से लेकर <h6> टैग का उपयोग किया जाता है. HTML डॉक्यूमेंट में हेडिंग को परिभाषित करने के लिए <h1> टैग का उपयोग किया जाता है. <h1> सबसे बड़ी हेडिंग को परिभाषित करता है और <h6> सबसे छोटी हेडिंग को परिभाषित करता है.

<p> Tag

HTML डॉक्यूमेंट में Paragraph को परिभाषित करने के लिए <p> टैग का उपयोग किया जाता है.

HTML Versions

HTML जब से बाजार में आया है तब से इसके बाजार में बहुत सारे संस्करण आ गये है. HTML के हर Version मे कुछ नए Elements Add किये जाते है. HTML के सभी Versions के बारे मे नीचे विस्तार से बताया जा रहा है. ये सभी Versions HTML के इतिहास और समय के साथ किये गए सुधार को दर्शाते है.

  • HTML 1.0 − यह HTML का Barebones Version था और यह Language मे सबसे पहले Release हुआ था.

  • HTML 2.0 − यह Version 1995 मे पेश किया गया था और इसे धीरे-धीरे अतिरिक्त क्षमताओं को शामिल करने के लिए विकसित किया गया है form-based File Upload, Tables, Client-side Image Maps और Internationalization मे उपयोग किया जाता है.

  • HTML 3.2 − यह World Wide Web के मानकों के विकास को सुनिश्चित करने के प्रयास मे World Wide Web Consortium (W3C) 1994 मे Tim Berners-Lee द्वारा स्थापित किया गया था. 1997 तक उन्होंने HTML 3.2 को Published किया था.

  • HTML 4.0 − यह बाद मे 1997 मे W3C ने HTML 4.0 Released किया यह एक ऐसा Edition है जो कई Browser-specific Elements प्रकारो और Attributes को अपनाया गया है.

  • HTML 4.01 − यह 4.01 Version दिसंबर 1999 को जारी किया गया था और यह HTML भाषा का एक बहुत ही स्थिर Version माना जाता है.

HTML in Hindi Introduction

HTML एक बहुत ही पॉपुलर लैंग्वेज है. इस लैंग्वेज को वेब पेज ओर वेब डॉक्यूमेंट बनाने के लिए डेवेलोप किया गया है. HTML का पूरा नाम Hyper Text Markup Language होता है. इस लैंग्वेज की सहयता से आप अपनी खुद की वेबसाइट बना सकते है.

HTML Language मे लिखा गया Code एक सुंदर अच्छी तरह से Well-Formatted Text या एक ब्राउज़र के माध्यम से देखे जाने पर Text और Media का Combination होता है.

HTML को पहली बार 1990 मे British Physicist Tim Berners-Lee ने Developed किया था.

HTML मे आप Text को Headings, Paragraphs, List इत्यादि के रूप मे Define करके Pure Text मे Content को Describe कर सकते है.

HTML मे एक Tag एक Angle Brackets से घिरा हुआ Text होता है.

HTML मे Tags आमतौर पर एक Beginning Tag और एक Endinning Tag होता है और इन Tag के बीच में आप अपना कुछ Text लिखते है.

HTML मे Web Page के सभी Content को <body> </body> Tag के बीच रखा गया है और <head> </head> Tag मे Web Page के बारे मे सामान्य जानकारी Define को किया जाता है.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Basic Example</title>
   </head>	
   <body>
      <h1>HTML Basic Example</h1>
      <p>This is basic example in HTML at Tutorialsroot</p>
   </body>
</html>

Output

HTML in Hindi Basic Tags

HTML टैग कीवर्ड के जैसे होते हैं जो यह परिभाषित करते हैं कि वेब ब्राउज़र कैसे सामग्री को प्रारूपित और प्रदर्शित करता है. HTML टैग की सहयता से एक वेब ब्राउज़र एक HTML सामग्री और एक साधारण सामग्री के बीच अंतर कर सकता है. HTML में सभी डॉक्यूमेंट को HTML Tags द्वारा ही परिभाषित किया जाता है. एक HTML फाइल को बनाने के लिए HTML Tags का ही उपयोग किया जाता है.

सभी Tags के 2 भाग होते है Open Tag और Close Tag. Open Tag को शुरू में लगाया गया जाता है जिसके स्पष्टीकरण से यह मालूम होता है कि हम क्या करने वाले है Open Tag के बाद कुछ Text लिखा जाता है जिस पर यह Tag लागू होता है और फिर बाद मे Close Tag लिखा जाता है.

For Example

इस उदाहरण में आप देख सकते हैं कि हम कैसे Tag को Open करते है और फिर उसमे कुछ Text लिखते है और फिर Tag को Close करते है नीचे उदाहरण मे आप देख सकते है कि HTML Tag कैसे काम करते है.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Basic Tag</title>
   </head>	
   <body>
      <h1>HTML Basic Tag</h1>
      <p>This is basic Tag in HTML at Tutorialsroot</p>
   </body>
</html>

अब हम आपको HTML के कुछ Basic Tag के बारे मे बताते है .

Heading Tags

HTML में <h1> से लेकर <h6> टैग का उपयोग किया जाता है. HTML डॉक्यूमेंट में हेडिंग को परिभाषित करने के लिए <h1> टैग का उपयोग किया जाता है. <h1> सबसे बड़ी हेडिंग को परिभाषित करता है और <h6> सबसे छोटी हेडिंग को परिभाषित करता है. HTML मे Heading Tag को छह प्रकार से उपयोग किया जा सकता है जैसे की -<h1>, <h2>, <h3>, <h4>, <h5>, <h6>.

For Example −

इस उदाहरण में आप देख सकते हैं कि कैसे Heading Tag का उपयोग करते है और कैसे Heading Tag से Font Size में परिवर्तन होता है.

<html>
   <head>
      <title>Heading Tags Example</title>
   </head>
   <body>
      <h1>Tutorialsroot heading 1</h1>
      <h2>Tutorialsroot heading 2</h2>
      <h3>Tutorialsroot heading 3</h3>
      <h4>Tutorialsroot heading 4</h4>
      <h5>Tutorialsroot heading 5</h5>
      <h6>Tutorialsroot heading 6</h6>
   </body>
</html>

Output

Paragraph Tag

Paragraph Tag का उपयोग Text को अलग अलग Paragraph मै लिखने के लिए किया जाता है.

For Example −

इस उदाहरण मे आप देख सकते हैं कि कैसे <p> Tag का उपयोग करते है और कैसे <p> Tag अलग-अलग Paragraph मैं लिखने के लिए उपयोग किया जाता है.

<html>
   <head>
      <title>Paragraph Tag Example</title>
   </head>
   <body>
      <p>Tutorialsroot Paragraph Example 1</p>
      <p>Tutorialsroot Paragraph Example 2</p>
      <p>Tutorialsroot Paragraph Example 3</p>
      <p>Tutorialsroot Paragraph Example 4</p>
      <p>Tutorialsroot Paragraph Example 5</p>
   </body>
</html>

Output

HTML in Hindi Elements

एक HTML Elements मे एक आमतौर पर एक Opening Tag और Closing Tag होता है इनके बीच में हम कुछ भी Content लिख सकते है इसी को HTML Elements कहते हैं.

हालांकि Opening Tag Content और Closing Tag सहित सब कुछ एक Element है.

इसलिए जब भी किसी Tag को Open किया जाता है और सामग्री शुरू की जाती है और Tag Close हो जाता है इसके लिये हमारे पास एक Element है.

एक Element सबसे basic रूप मे या सबसे complex form में हो सकता है .

हम एक Element के भीतर Element को बना सकते है. इस मामले में, हमारा सरल उदाहरण जिसमे हम bold का Use करेंगे वह Software Engineer है ( वह software engineer है ) यह एक Element है.

हालांकि आप ध्यान दे कि हमने पहले कहा था कि HTML Documents मे Content Begins होने से पहले <body> Tag होता है.

Content मे Hundreds विभिन्न Elements शामिल हो सकते हैं. लेकिन ये सभी Element <body> Element का हिस्सा होते है.

For Example

Start TagContentEnd Tag
<h1>It is an heading content. </h1>
<p>It is an paragraph content.</p>
<div>It is an division content.</div>

Nested HTML Elements

Nested Elements एक Element के अंदर अन्य Elements को रखने की अनुमति देता है.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Nested Elements Tag</title>
   </head>
   <body>
      <h1>It is an <i>italic</i> heading</h1>
      <p>It is an <u>underlined</u> paragraph</p>
   </body>
</html>

Output

Empty HTML Element

<!DOCTYPE html>
<html>
   <head>
      <title>Empty HTML Element</title>
   </head>
   <body>
      <h1>It is an heading content</h1>
      <p>It is an paragraph content</p>
      <hr>
      <h1>It is an heading content</h1>
      <p>It is an paragraph content</p>
   </body>
</html>

Output

Empty HTML Element

It is an heading content

It is an paragraph content

It is an heading content

It is an paragraph content

HTML in Hindi Attributes

HTML मे Attribute वह Technique है जिसके माध्यम से हम अपने Elements की Additional Information प्रदान कराते है. यह Start Tag के साथ Specify होता है. Attributes भी जोड़े के रूप मे आते है पहले Attribute का नाम और दुसरी Attribute की Value आती है. Attribute की Value को आम तौर पर हम Double Quote मे Close करते है. आप इसमे Single Quote का भी उपयोग कर सकते है.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Attribute Example</title>
   </head>
   <body>
      <a href="http://tutorialsroot.com/">Click Here</a>
   </body>
</html>

Output

Attribute Example Click Here

इस उदाहरण मे <a> एक Tag है जिसका उपयोग हम HTML मे Hyperlink के लिए करते है यहाँ पर <a> Tag के बाद जो href शब्द लिखा है वही <a> Tag का Attribute है जो <a> Tag को अतिरिक्त जानकारी प्रदान करता है. href Attribute का उपयोग लक्ष्य Address Set करने के लिए किया जाता है. इस Address मे आप किसी भी Website का पेज Address Set कर सकते है साथ ही साथ आप अपनी Website का पेज Address भी Set कर सकते है.

हम कभी-कभी एक Element के अंदर अतिरिक्त Information का Communication करना चाहते है तो इस मामले मे हम एक Attributes का उपयोग करते है.

Attributes का उपयोग Element की विशेषताओं को Define करने के लिए किया जाता है और इसका उपयोग Element के Opening Tag के अंदर किया जाता है.

Attributes HTML Elements के बारे मे अधिक जानकारी प्रदान करते है. HTML मे जितने भी Tag है उन सब के Attributes होते है. Attributes सिर्फ प्रारंभिक Tag मे परिभाषित किया जाता है. और ये नाम और मान की जोड़ी में लिखे जाते है जैसे कि name="value".

Common HTML Attributes

Attribute Options Example
align right, left, center <p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
style Cascading Style Sheet <p style="font-family:arial; color:#FF0000;">Some text...</p>
bgcolor numeric, hexidecimal, RGB values <body style="background-color:#FF0000;"></body>
id User Defined <p id="htm">Some text...</p>
class User Defined <p class="important">This is important paragraph</p>
title User Defined <p title="welcome">Some text...</p>

The xml:lang Attribute

xml:lang Attribute जो कि Lang Attribute के लिये XHTML Replacement है. इसका Purpose सभी अलग-अलग XML Document Types को भाषा पहचान के लिए एक ही Attribute का उपयोग करने की अनुमति देना होता है.

xml:lang Attribute सभी Attributes पर उनके आदेश पर ध्यान दिए बिना और उस Element के Content पर लागू होती है.

Generic Attributes

यहां कुछ अन्य Attributes की एक Table है जो कि बहुत से HTML Tags के साथ आसानी से प्रयोग करने योग्य है.

Attribute Options Example
align right, left, center यह एक horizontally aligns tags होता है जिससे हम content को right, left, center से set कर सकते है.
valign top, middle, bottom यह एक Vertically aligns tags होता है जिससे हम content को top, middle, bottom से set कर सकते है.
bgcolor numeric, hexidecimal, RGB values इसका उपयोग एक element के पीछे के background को different color देने के लिये करते है.
background URL यह एक element के पीछे एक background image को रखता है.
id User Defined Id का उपयोग Cascading Style Sheets मे User define करने के लिये किया जाता है.
class User Defined Class का उपयोग Cascading Style Sheets User define करने के लिये किया जाता है.
width Numeric Value Width का उपयोग tables, images, table cells को specifies करने के लिये किया जाता है.
height Numeric Value Height का उपयोग tables, images, table cells को specifies करने के लिये किया जाता है.
title User Defined Title HTML के webpage मे top पर define किया जाता है.

HTML in Hindi Formatting

HTML में फॉर्मेटिंग टैग किसी भी टेक्स्ट को बेहतर दिखने और फील करने के लिए एक प्रक्रिया है.फॉर्मेटिंग टैग का उपयोग किसी भी Presentation को अच्छे से अच्छा बनाने के लिए किया जाता है. उदाहरण के लिए मान लीजिये अगर आपको किसी Text को Bold या Underline करना है तो आप Formatting Tags का उपयोग कर सकते है.

HTML Formatting Tags HTML Element को Organized करने के लिए Capable होते है जिससे Webpage की Readability बढ़ती है. Formatting Tags आपको Webpage पर प्रस्तुत की जाने वाली जानकारी के लिए उचित Format या Structure को Define करने की अनुमति देता है. Formatting Tags Organized information के Title, Paragraph, Listing Element आदि के Combination होते है.

Formatting Tags के द्वारा आप किसी भी Text को Underlined और Bold या फिर Italic कर सकते है. HTML मे कुछ Tags सिर्फ Formatting Text को ही उपलब्ध कराए गए है. इनकी सूची आप नीचे देख सकते है.

Formatting Tags

  • <b>

  • <strong>

  • <i>

  • <em>

  • <mark>

  • <small>

  • <del>

  • <ins>

  • <sub>

  • <sup>

इन Tags का उपयोग आप नीचे Table मे देख सकते है.

Tags Description Example Result
<b> <b> Tag का उपयोग किसी भी प्रकार के टेक्स्ट को bold करने के लिये किया जाता है. <b>This paragraph is bold</b> This paragraph is bold
<strong> <strong> Tag का उपयोग किसी भी प्रकार के टेक्स्ट को strong करने के लिये किया जाता है. <strong>This paragraph is strong</strong> This paragraph is strong
<i> <i> Tag का उपयोग किसी भी प्रकार के टेक्स्ट को italic करने के लिये किया जाता है. <i>This paragraph is Italic text</i> This paragraph is Italic text
<em> <em> Tag का उपयोग किसी भी प्रकार के टेक्स्ट को Emphasized करने के लिये किया जाता है. <em>This paragraph is Emphasized text</em> This paragraph is Emphasized text
<mark> <mark> Tag का उपयोग किसी भी प्रकार के टेक्स्ट को Marked करने के लिये किया जाता है. <mark>This paragraph is Marked text</mark> This paragraph is Marked text
<small> <small> Tag का उपयोग किसी भी प्रकार के टेक्स्ट को small करने के लिये किया जाता है. <small>This paragraph is Small text</small> This paragraph is Small text
<del> <del> Tag का उपयोग किसी भी प्रकार के टेक्स्ट को Delete करने के लिये किया जाता है. <del>This paragraph is Deleted text</del> This paragraph is Deleted text
<ins> <ins> Tag का उपयोग किसी भी प्रकार के टेक्स्ट को Inserte करने के लिये किया जाता है. <ins>This paragraph is Inserted text</ins> This paragraph is Inserted text
<sub> <sub> Tag का उपयोग किसी भी प्रकार के टेक्स्ट को Subscript करने के लिये किया जाता है. <sub>This paragraph is Subscript text</sub> This paragraph is Subscript text
<sup> <sup> Tag का उपयोग किसी भी प्रकार के टेक्स्ट को Superscript करने के लिये किया जाता है. <sup>This paragraph is Superscript text</sup> This paragraph is Superscript text

HTML in Hindi Images

Image टैग का उपयोग वेबसाइट अच्छी बनाने के लिए किया जाता है जिससे वेबसाइट यूजर को अपनी और आकर्षित करे. इसके लिए <img> Tag का उपयोग किया जाता है. <img> Tag बहुत से Attributes प्रदान करता है जिनसे आप Image की Presentation को नियंत्रण कर सकते है. <img> Tag एक Empty Tag है इसलिए इसे Close करने की आवश्यकता नही होती है. <img> Tag मे बहुत से Attributes होते है जिनके बारे में आप नीचे देख सकते है.

Including Images in Web Page

Web Page मे Images को Include करने के लिए <img> Tag का उपयोग किया जाता. <img> Tag के साथ Src Attribute उपयोग करना ज़रूरी होता है बाकि सभी Attributes Optional होते है इसका उदाहरण आप नीचे देख सकते है.

Alternative Text With Images

अगर किसी वजह से Image show नही होती है तो Alternative Text उस जगह पर Show होता है. यह Attribute Search Engines को ये बताने के लिए भी उपयोग किया जाता है. अगर किसी कारण से Picture Load नहीं होती है तो उसकी जगह Alternate Text Show होता है.

Height and Width of Images

Height और Width Set करने के लिए आप Height और Width Attributes कर सकते है. इनकी Values आप Integers मे Define कर सकते है.

Attributes Description
src src से आप वेब पेज में कोई भी Image प्रदर्शित कर सकते है.
alt Alt Attributes Text की Value दिखाता है वेब पेज में यदि Image दिखाता है तो यह Text Value दिखाता है. इसलिए ये Image का वैकल्पिक कहलाता है.
width इससे से आप Image की Width सेट करते है.
height इससे आप Image की Height सेट करते है.
style इस Attributes के द्वारा आप Images पर CSS Rules Apply कर सकते है.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Image Example</title>
   </head>	
   <body>
      <h2>HTML Image Example</h2>
      <img src="tutorialsroot.jpg" alt="Tutorialsroot"/>
   </body>
</html>

Output

HTML in Hindi Layouts

एक Website मे Layouts बनाना विभिन्न Elements की स्थिति की गतिविधि है जो एक अच्छी तरह से Structured तरीके से एक Webpage बनाते है और Website को Attractive रूप देते है.

आप देख सकते है Internet पर अधिकांश Websites ने अपने Content को Multiple Rows और Columns मे रख दिया है.

एक Magazine या Newspaper की तरह Formatted सामान्य Web Users को बेहतर Reading और Writing Environment देने के लिये HTML Layouts का उपयोग करते है.

HTML मे Website को बेहतर दिखने के लिए Layouts बहुत महत्वपूर्ण होता है. Layouts से Website को बनाने के लिए काफी समय लगता है. लेकिन इससे आपकी Website बहुत अच्छी दिखती है.

HTML में Website को बनाने के लिए सबसे सरल और लोकप्रिय Layouts <table> <div> Tag होते है.

HTML Layout with Tables

HTML Table मे Layout को बनाने के लिए सबसे आसान तरीका है कि Table की Rows और Columns और उनके Attribute जैसे Colspan और Rowspan के उचित उपयोग के साथ हम अच्छे Layout प्राप्त कर सकते है.

नीचे आप देख सकते है की HTML Layout मे हमने यहाँ 3 Rows और 2 Columns वाले Tables का उपयोग करके Layout को प्राप्त किया है. Header और Footer Column Full Spans और Colspan Attribute का उपयोग करके फैला हुआ है.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Layout Table</title>
   </head>
   <body>
      <table width="100%" border="0">
         <tr>
            <td colspan="2" bgcolor="red">
            <h1 style="text-align:center;">This is Web Page</h1>
            </td>
         </tr>
         <tr valign="top">
            <td bgcolor="blue" width="70">
            <b>Main Menu</b><br />
            HTML<br />
            HTML5<br />
            CSS<br />
            PHP...
            </td>
            <td bgcolor="Orange" width="100" height="250">
            Web Development Tutorials
            </td>
         </tr>
         <tr>
            <td colspan="2" height="50" bgcolor="Cyan">
            <center>
            Copyright © Tutorialsroot.com 2017. All Rights Reserved
            </center>
            </td>
         </tr>
      </table>
   </body>
</html>

Output

HTML Layout with DIV, SPAN and CSS

CSS की सहायता से हम DIV और SPAN जैसे Block Elements का उपयोग करके एक Layout को प्राप्त कर सकते है.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Layout with DIV, SPAN and CSS</title>
   </head>
   <body>
      <div style="width:100%">
         <div style="background-color:#F52807">
            Tutorialsroot Header
         </div>
         <div style="background-color:#B8FF33;height:200px;
         width:30%;float:left;">
            Left menu
         </div>
         <div style="background-color:#33FF77;height:200px;
         width:70%;float:right;">
            Main body
         </div>
         <div style="background-color:#F52807;clear:both">
            Tutorialsroot Footer
         </div>
      </div>
   </body>
</html>

Output

HTML in Hindi Tables

किसी भी Data को Structured Form मे दरसाने के लिये आप Tables का उपयोग करते है. अपने वेब पेज मे Tables को शामिल करके आप उसे ओर भी Structured ओर Attractive बना सकते है. HTML मे Tables Create करने के लिये आप <table> Tag का उपयोग करते है. इस Tag का एक Sub Tag होता है जिसे <tr> Table Row Tag कहते है <tr> Tag का भी एक Sub Tag होता है जिसे <td> Table Data Tag कहते है.

किसी भी अन्य Tables की तरह HTML सारणी एक या कई Rows और Rows से एक या कई Cells से बनते है. Table Cells मे Actual Information हो सकती है यह Text, Image, HTML Element और या HTML Table भी ही हो सकती है. Data को Structured रूप मे अच्छे से प्रदर्शित करने के लिए Table का उपयोग करते है आप अपनी Website मे Table को शामिल करके उसको और भी आकर्षक बना सकते है.

कुछ आम Table Tags की List आप नीचे देख सकते है.

Point to Remember

  • <table> Tag का उपयोग Table को परिभाषित करने के लिए किया जाता है.

  • <td> Tag का उपयोग Table Data को परिभाषित करने के लिए किया जाता है.

  • <tr> Tag का उपयोग Table Row को परिभाषित करने के लिए किया जाता है.

  • <th> Tag का उपयोग Table Heading को परिभाषित करने के लिए किया जाता है.

  • <caption> Tag का उपयोग Table Caption को परिभाषित करने के लिए किया जाता है.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Table </title>
   </head>
   <body>
   <table style="width:100%" border="2px">
      <tr>
         <th>Name</th>
         <th colspan="2">cell phone</th>
      </tr>
      <tr>
         <td>Saharaukh</td>
         <td>66644973</td>
         <td>23452397</td>
      </tr>
      <tr>
         <td>Salman</td>
         <td>66644973</td>
         <td>23452397</td>
      </tr>
      <tr>
         <td>Amir</td>
         <td>66644973</td>
         <td>23452397</td>
      </tr>
      <tr>
         <td>Akshay</td>
         <td>66644973</td>
         <td>23452397</td>
      </tr>
      <tr>
         <td>Amit</td>
         <td>66644973</td>
         <td>23452397</td>
      </tr>
   </table>
</body>
</html>

Output

Table Border

Table Border Attribute का उपयोग करते हुए Table और Table Cells की Outside Boundaries के लिए Grids/Borders को Set किया जा सकता है.

हम इस Attribute के लिए एक Numerical Value दे सकते है और Borders की Thickness को Specifies कर सकते है Value "0" निर्धारित करने के लिए कोई Borders नही Specifies करता है.

<!DOCTYPE html>
<html>
   <head>
      <title>Table Border Example</title>
   </head>
   <body>
      <table border="2">
         <tr > 
            <td>cell one</td> 
            <td>cell two</td> 
            <td>cell one</td> 
            <td>cell two</td> 
         </tr>
         <tr> 
            <td>cell three</td> 
            <td>cell four</td> 
            <td>cell three</td> 
            <td>cell four</td> 
         </tr>
         <tr > 
            <td>cell one</td> 
            <td>cell two</td>
            <td>cell one</td> 
            <td>cell two</td>				
         </tr>
         <tr> 
            <td>cell three</td> 
            <td>cell four</td> 
            <td>cell three</td> 
            <td>cell four</td>
         </tr>
         <tr > 
            <td>cell one</td> 
            <td>cell two</td>
            <td>cell one</td> 
            <td>cell two</td>				
         </tr>
         <tr> 
            <td>cell three</td> 
            <td>cell four</td>
            <td>cell three</td> 
            <td>cell four</td>				
         </tr>
      </table>
   </body>
</html>

Output

Table Heading

Table Heading <th> ... </ th> Tag का उपयोग करके Table मे Columns के लिए Heading को Set किया जा सकता है. इसके लिए Columns के लिए Heading Cells को Define किया जा सकता है.

Heading Cell Table मे अन्य Cells के समान होता है और इसको उसी तरह Manipulation किया जा सकता है. Heading Tag के बीच का Text Bold मे Display होता है और Table Cells के भीतर Centered होता है.

<!DOCTYPE html>
<html>
   <head>
      <title>Table Heading Example</title>
   </head>
   <body>
      <table>
         <tr> 
            <th>Column One</th> 
            <th>Column two</th>
            <th>Column three</th>
            <th>Column four</th>
         </tr>	
         <tr> 
            <td>cell one</td> 
            <td>cell two</td> 
            <td>cell three</td> 
            <td>cell four</td> 
         </tr>
         <tr> 
            <td>cell one</td> 
            <td>cell two</td> 
            <td>cell three</td> 
            <td>cell four</td> 
         </tr>
         <tr> 
            <td>cell one</td> 
            <td>cell two</td> 
            <td>cell three</td> 
            <td>cell four</td> 
         </tr>
         <tr> 
            <td>cell one</td> 
            <td>cell two</td> 
            <td>cell three</td> 
            <td>cell four</td> 
         </tr>
         <tr> 
            <td>cell one</td> 
            <td>cell two</td> 
            <td>cell three</td> 
            <td>cell four</td> 
         </tr>
         <tr> 
            <td>cell one</td> 
            <td>cell two</td> 
            <td>cell three</td> 
            <td>cell four</td> 
         </tr>
      </table>
   </body>
</html>

Output

Table Colspan

Colspan Attribute Columns की संख्या को Define करता है जो Cell को Horizontally रूप से और या Merge होना चाहिए.

अगर आप सिंगल Cell में Row मे दो या अधिक Cell को Merge करना चाहते है तो आप Colspan के उपयोग से कर सकते है.

Colspan (Column Span) को Horizontally रूप से Merged किया गया जो Cell के Left से Right है Colspan की Default Value 1 है.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Table Colspan/Rowspan</title>
   </head>
   <body>
      <table border = "1">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
</html>

Output

HTML in Hindi Lists

HTML मे आप किसी भी जानकारी को Lists के द्वारा भी Represent कर सकते है. Lists के द्वारा आप अपने वेब पेज को Well Ordered बना सकते है. HTML से आप 3 तरह की List बना सकते है.

HTML मे Lists का उपयोग Information के Related Pieces को एक साथ मिलाने के लिए किया जाता है. HTML मे तीन प्रकार की Lists उपलब्ध होती है.

HTML Lists Example

  • <ul>...</ul> Tag का उपयोग Unordered List बनाने के लिए किया जाता है.

  • <ol>.../ol> Tag का उपयोग Ordered List बनाने के लिए किया जाता है.

  • <dl>...</dl> Tag का उपयोग Definition List बनाने के लिए किया जाता है.

Unordered List Example

Unordered List को <ul>...</ul> Tag के द्वारा Define किया जाता है. ये List Unordered Form मे होती है. और ये Items Bullets से Define की जाती है.

<!DOCTYPE html>
<html>
   <head>
      <title>Unordered List Example</title>
   </head>
   <body>
      <h3>Unordered List Example</h3>
      <ul>
         <li>Shahrukh Khan</li>
         <li>Salman Khan</li>
         <li>Amir Khan</li>
         <li>Ranbir Singh</li>
      </ul>
   </body>
</html>

Output

Ordered List Example

Ordered List को <ol>...</ol> Tag के द्वारा Define किया जाता है. ये List Ordered Form मे होती है. इसको आप Numbers(1,2,3,4,5,6,7,8,9) और Alphabets(a,b,c,d,e,f,g.h.i) दोनो तरह से Define कर सकते है.

<!DOCTYPE html>
   <html>
      <head>
         <title>Ordered List</title>
      </head>
      <body>
         <ol>
            <li>Shahrukh Khan</li>
            <li>Salman Khan</li>
            <li>Amir Khan</li>
            <li>Ranbir Singh</li>
         </ol>
      </body>
</html>

Output

Definition List Example

Definition List को <dl>...</dl> Tag के द्वारा Define किया जाता है. और ये List तीन प्रकार से काम करती है.

  • <dl> Tag Description List को परिभाषित करता है.

  • <dt> Tag Term (name) को परिभाषित करता है.

  • <dd> Tag Describes को परिभाषित करता है.

<!DOCTYPE html>
<html>
   <head>
      <title>Definition List Example</title>
   </head>
   <body>
      <h3>Definition List Example</h3>
      <dl>
         <dt><b>Tutorialsroot</b></dt>
         <dd>Learn HTML, PHP, HTML5 with examples</dd>
         <dt><b>CSS</b></dt>
         <dd>CSS3</dd>
      </dl>
   </body>
</html>

Output

HTML in Hindi Links

लिंक टैग का उपयोग एक पेज दूसरे पेज पे जाने के लिए किया जाता है. हालांकि ज्यादतर लिंक टैग का उपयोग एक वेबसाइट से दुसरी वेबसाइट पे जाने के लिए भी किया जाता है. लिंक टैग का उपयोग टेक्स्ट या इमेज या दोनों में किया जा सकता है. Hyperlink एक HTML Document से दूसरे पर एक Pointer होता है यह Internet पर एक ही Website या कुछ अन्य स्थान पर हो सकता है. Links का उपयोग मूल रूप से एक पेज से दूसरे पेज पर जाने के लिए किया जाता है.

Link बनाने के लिए <a> Tag का उपयोग किया जाता है. और इसको Anchor Tag कहा जाता है. इस Tag के सबसे Basic Attributes Href और Target होते है. इन दोनो Attributes के बारे मे आप नीचे देख सकते है.

Href - इस Attribute के द्वारा आप उस Page का Address परिभाषित करते है जो आप Link के Click होने पर दिखाना चाहते है.


href = "page-Address"

Target - इस Attribute के द्वारा आप वह Frame परिभाषित करते है जँहा पर आप Page को दिखाना चाहते है. Target Attribute वैकल्पिक होता है यदि आप इसे परिभाषित नहीं करते है तो Page New Tab मे Open होता है. इस Attribute की कुछ Predefined Values होती है जिन्हें आप उपयोग कर सकते है.


target = "frame-Name"

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>Anchor Tag Example</title>
   </head>
   <body>
   <h3>Anchor Tag</h3>
   <a href="http://tutorialsroot.com/" target="_self">Tutorialroot</a>
   </body>
</html>

Output

How to HTML Link

आप HTML Link Tag के href Attribute का उपयोग करके एक और Document का Link बना सकते है साथ ही HTML Link Tag के नाम Attribute का उपयोग करके एक ही Document के अंदर एक Bookmark को बना सकते है.

HTML Image Links

Image के चारों ओर एक Hyperlink को Wrapping करके एक Image को दूसरे URL से जोड़ा जा सकता है. यह आपकी Images को Click करने योग्य बनाता है ताकि जब आप Image पर Click करेंगे तो वहां एक और URL खुल जाएगा.

<!DOCTYPE html>
<html>

   <head>
      <title>Image Hyperlink</title>
   </head>
	
   <body>
      <p>Click Following Image Hyperlink</p>
      <a href = "http://www.tutorialsroot.com" target = "_self"> 
         <img src = "tutorialsroot.png" alt = "Image Hyperlink" border = "0"/> 
      </a>
   </body>
	
</html>

Output

HTML in Hindi Frames

HTML Frames आपको एक HTML Documents में कई HTML Documents को Merge करने का एक तरीका प्रदान करता है.

HTML Frames Browser Window को कई Panes और Rectangular मे विभाजित करता है यह प्रत्येक Panel में अलग अलग HTML Documents हो सकता है.

HTML Frames Division Process मे HTML Table के समान होता है.

HTML Frameset <frameset> Element को HTML Panel <body> Tag के बजाय एक से अधिक Panel मे विभाजित करने के लिए उपयोग किया जाता है और प्रत्येक Panel HTML Frame <frame> Element द्वारा Define किया जाता है.

Iframes का उपयोग एक वेबपेज के अंदर दूसरे वेबपेज को प्रदर्शित करने के लिए किया जाता है.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Frames Example</title>
   </head>
   <body>
      <p>This page is displayed in an Frames...</p>
      <iframe src="/html/menu.htm">
      </iframe>
      <p>This page is displayed in an Frames</p>
   </body>
</html>

Output

HTML Frameset Attributes

Attribute Description
cols यह Attribute Frameset मे Columns की संख्या को Specifies करता है और यह साथ ही Comma से विभाजित Width Percentage और Pixels मे भी Specifies किया जा सकता है.
rows यह Attribute Frameset मे Rows की संख्या को अपनी Height के साथ Comma से अलग करता है. और यह साथ ही Height को Percentage और Pixels मे भी Specifies किया जा सकता है.
border यह Attribute Frames के लिए Border की Width को Specifies करता है.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Frames Example</title>
   </head>
   <frameset cols = "25%,50%,25%">
      <frame name = "left" src = "/html/top_frame.htm" />
      <frame name = "center" src = "/html/main_frame.htm" />
      <frame name = "right" src = "/html/bottom_frame.htm" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
</html>

Output

HTML Frame Attributes

Attribute Description
src यह Attribute Source HTML Document के URL को Specifies करता है.
frameborder यह Attribute Specifies करता है कि Frameborder को दिखाया गया है या नही.
noresize यह Attribute Specifies करता है कि User Frame का आकार बदलने में सक्षम होगा या नही.
scrolling यह Attribute Specifies करता है कि Frame के लिए Scrollbars दिखाई देंगे या नही.

HTML in Hindi Backgrounds

वेबसाइट के वर्ग के अनुसार उसका Background भी बदलना बहुत जरुरी होता है. अक्सर आपने देखा होगा कि कई वेबसाइट का Backgrounds अलग अलग Colors मे होता है या कुछ वेबसाइट के Backgrounds पर Images होते है. Backgrounds का उपयोग Website को और Attractive बनाने के लिए किया जाता है.

CSS का उपयोग करके आप अपनी Website की Body, Image, Font, Heading या किसी भी Element मे Background Color या image को Set सकते है. CSS Background Properties को Elements Background के Effect को Define करने के लिए उपयोग किया जाता है.

यह सभी web Browsers Color और Background Code को Displaye करने में सक्षम है और ध्यान रखें कि Color Enhancements Undesirable Result भी हो सकता है.

HTML आपको Webpage को सजाने के लिये दो अच्छे तरीके प्रदान करता है. जिससे आप अपने Webpage का Background Color या Background Image को आसानी से बदल सकते हो.

For Example

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Colors</title>
   </head>
	
   <body>
      <h2 style="background-color:red">
         Background-color set by using red
      </h2>

      <h2 style="background-color:orange">
         Background-color set by using orange
      </h2>

      <h2 style="background-color:yellow">
         Background-color set by using yellow
      </h2>

      <h2 style="background-color:blue;color:white">
         Background-color set by using blue
      </h2>

      <h2 style="background-color:cyan">
         Background-color set by using cyan
      </h2>
   </body>
	
</html>

Output

HTML Background with Images

Background Attribute का उपयोग किसी HTML Element मे विशेष रूप से Page Body और Table Backgrounds के Background को नियंत्रित करने के लिए भी किया जा सकता है.

आप अपने HTML Page या Table की के Background को Set करने के लिए एक Image को Specify कर सकते है.

For Example

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Background Images Example </title>
   </head>
   <body>
      <table background = "/images/html.gif" width = "100%" height = "100">
         <tr>
            <td>This background is filled up with HTML image.</td>
         </tr>
      </table>
   </body>
</html>

Output

HTML in Hindi Colors

HTML मे Colors के उपयोग से हम अपने वेब पेज पर कुछ Creating कर सकते है HTML Colors का उपयोग करके हम आपने Web Content को अलग अलग Types से Creative बना सकते है. आमतौर पर Websites और अन्य Software Applications मे उपयोग किया जाता है. इसमे Hex Color Code RGB और HSL Values और HTML के Color के नाम शामिल होते है.

HTML Colors आपको HTML Elements के लिए Color और HTML Entities के विभिन्न Attributes के लिए Set करने की अनुमति देता है. आप अपने Webpage मे Color, Text Color, Border, Background Set कर सकते है.

Website को Good Look देने के लिये सबसे ज्यादा Important Colors होते है. आप <body> Tag में Direct bgcolor को Specify कर सकते हो.

नीचे Table मे आप कुछ Colors के नाम देख सकते है.

ColorColor RGB
 rgb(0,255,255)
 rgb(255,0,255)
 rgb(0,0,0)
 rgb(255,0,0)
 rgb(255,255,0)
 rgb(192,192,192)
 rgb(255,255,255)
 rgb(0,255,0)
 rgb(0,0,255)

Color Keywords or Color Name

Basic Color Keyword या Color का नामांकन एक Color Value को परिभाषित करने के लिए सबसे आसान तरीका है और यह लंबे समय तक रहा है लेकिन Color का Name 16 Values तक सीमित है लेकिन विस्तारित Palette का उपयोग करके इसका विस्तार किया जा सकता है.

यहाँ पर 17 Official HTML Color Names की List है

Color Name Hex Code RGB Decimal Code RGB
Maroon 800000 128,0,0
Red FF0000 255,0,0
Orange FFA500 255,165,0
Yellow FFFF00 255,255,0
Olive 808000 128,128,0
Green 008000 0,128,0
Purple 800080 128,0,128
Fuchsia FF00FF 255,0,255
Lime 00FF00 0,255,0
Teal 008080 0,128,128
Aqua 00FFFF 0,255,255
Blue 0000FF 0,0,255
Navy 000080 0,0,128
Black 000000 0,0,0
Gray 808080 128,128,128
Silver C0C0C0 192,192,192
White FFFFFF 255,255,255

HTML in Hindi Forms

HTML मे Forms का उपयोग Data को Capture करने के लिए करते है. HTML मे Form को <form> Tag से Define करते है और इसे <body> Tag के अंदर रखा जाता है.

HTML Form एक User और एक Website या Application के बीच बातचीत के मुख्य Points मे से एक है. Form Users को Website पर Data भेजने की अनुमति देता है. Form से अधिकांश समय मे Web Server पर Data भेजा जाता है. लेकिन Web Page भी इसे स्वयं के उपयोग के लिए इसे Blocked कर सकता है.

HTML Form एक या एक से अधिक Widget का बना होता है यह Widget Text Field Box, Button, Checkbox या Radio Button हो सकते है अधिकांश समय उन Widgets को उनके उद्देश्य का वर्णन करने वाले Label के साथ रखा जाता है.

HTML Form को विभिन्न प्रकार के User से Inputs को इकट्ठा करने की आवश्यकता होती है जैसे Name, Email Address, Phone Numbers Credit Card की जानकारी आदि. HTML Form से आप किसी भी User से Data को Store करा सकते है.

HTML Form Syntax

<form action="server url" method="get|post">  
  //input controls e.g. textfield, textarea, radiobutton, button  
</form>

HTML Form Tags

TagDescription
<form>यह प्रयोग किए गए पक्ष द्वारा Inputs Enter करने के लिए एक HTML Form को Define करता है.
<input>यह Input Control को Define करता है.
<textarea>यह एक Multi-line Input Control को Define करता है.
<label>यह एक Input Element के लिए एक Label को Define करता है.
<fieldset>यह Related Rlement एक Form मे समूह करता है.
<legend>यह एक <fieldset> Element के लिए एक Caption को Define करता है.
<select>यह एक Drop-down List को Define करता है.
<optgroup>यह एक Drop-down List मे Related Options के समूह को Define करता है.
<option>यह एक Drop-down List में एक options को Define करता है.
<button>यह एक Clickable करने योग्य Button को Define करता है.

HTML Form Example

<!DOCTYPE>
<html> 
   <head>
      <title>HTML Form Example</title>
   </head> 
   <body>
      <h3>HTML Form Example</h3>  
      <form action="#">  
         <table>  
            <tr>  
               <td class="tdLabel">
                  <label for="register_name" class="label">Enter name:</label>
               </td>  
               <td>
                  <input type="text" name="name" value="" id="register_name" 
                  style="width:160px"/>
               </td>  
            </tr>  
            <tr>  
               <td class="tdLabel">
                  <label for="register_password" class="label">
                  Enter password:</label>
               </td>  
               <td>
                  <input type="password" name="password" id="register_password" 
                  style="width:160px"/></td>  
            </tr>  
            <tr>  
               <td class="tdLabel">
                  <label for="register_email" class="label">Enter Email:</label>
               </td>  
               <td>
               <input type="email" name="email" value="" id="register_email" 
               style="width:160px"/></td>  
            </tr>  
            <tr>  
               <td class="tdLabel">
                  <label for="register_gender" class="label">Enter Gender:
                  </label>
               </td>  
               <td>  
                 <input type="radio" name="gender" id="register_gendermale"
                 value="male"/>  
                 <label for="register_gendermale">male</label>  
                 <input type="radio" name="gender" id="register_genderfemale"
                 value="female"/>  
                 <label for="register_genderfemale">female</label>  
               </td>  
            </tr>  
            <tr>  
               <td class="tdLabel">
                  <label for="register_country" class="label">Select 
                  Country:</label></td>  
               <td><
                  <select name="country" id="register_country"
                     style="width:160px">  
                     <option value="india">india</option>  
                     <option value="pakistan">pakistan</option>  
                     <option value="africa">africa</option>  
                     <option value="china">china</option>  
                     <option value="other">other</option>  
                  </select>  
               </td>  
            </tr>  
            <tr>  
               <td colspan="2">
                  <div align="right"><input type="submit" id="register_0"
                     value="register"/>  
                  </div>
                </td>  
               </tr>  
         </table>  
      </form>  
   </body>
</html>

Output

First Page
Next Page