HTML in Hindi




HTML को हम Hypertext Markup Language कहते है. HTML एक कंप्यूटर की भाषा है जिसका उपयोग वेबसाइट बनाने मे किया जाता है. ये भाषा कंप्यूटर की अन्य भाषा जैसे C, C++, JAVA आदि के मुकाबले बहुत ही Simple होती है. HTML की मदद से वेबसाइट बन जाने के बाद उस वेबसाइट को दुनिया का कोई भी व्यक्ति इंटरनेट के जरिये देख सकता है. HTML की खोज Physicist Tim Berners-Lee ने सन 1980 में Geneva मे की थी. HTML एक Platform-independent Language है जिसका उपयोग किसी भी Platform मे किया जा सकता है जैसे Windows, Linux, Macintosh इत्यादि.

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

Hypertext वह तरीका है जिसके द्वारा Web को Explore किया जाता है. यह एक साधारण Text ही होता है. लेकिन Hypertext अपने साथ किसी अन्य Text को जोड़े रखता है जिसे Mouse Click, Touch से या Key Press द्वारा सक्रिय किया जाता है. इसकी यही विशेषता इसे साधारण Text से अलग करती है. Hypertext को Hyperlink कहते है.

Markup

HTML Web Document बनाने के लिए HTML Tags का उपयोग करती है. प्रत्येक HTML Tag अपने बीच आने वाले Text को किसी प्रकार में परिभाषित करता है. इसे ही Markup कहते है. <i> एक HTML Tag है जो अपने बीच आने वाले Text को तिरछा italic करता है. इसे एक उदाहरण से समझते है. हम एक शब्द लेते है TutorialRoot जिसे साधारण लिखा गया है जो हमें आम text की तरह ही सीधा TutorialRoot दिखाई दे रहा है. अब हम इसे HTML के द्वारा Markup करते है. और Markup मे हम इसे तिरछा करते है. जब TutorialRoot को इन दोनो चिन्हों <i> </i> के बीच इस तरह TutorialRoot लिखा जायगा तो यह शब्द इस तरह तिरछा TutorialRoot दिखाई देगा. अर्थात इसे तिरछा italic Markup किया गया है.

Language

HTML एक Language है क्योंकि यह Web Document बनाने के लिए Code Words का उपयोग करती है. जिन्हे Tags कहते है. इन Tags को लिखने के लिए HTML का Syntax भी है. इसलिए यह एक Language भी है. HTML Syntax के तीन संभावित भाग होते है जो क्रमश Element, Tags और Text है. HTML Element HTML Tag से मिलकर बनता है. Angel Bracket के बीच जो शब्द या अक्षर लिखा होता है इसे HTML Tag कहते है यह दो प्रकार का होता है. पहला Opening Tag और दूसरा Closing Tag. और अंतिम भाग होता है Text जो HTML Tag के बीच लिखा जाता है.

HTML Versions

HTML के बहुत से Version Industry मे आ चुके है. 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 − यह दिसंबर 1999 मे HTML 4.01 मे Released किया गया था.

HTML in Hindi Introduction

HTML एक Programming Language है जिसे Web Document और Web Page बनाने के लिए Developed किया गया है. HTML एक बहुत ही सरल Computer Language है. इसका विकास 90 के दशक में हुआ था. HTML एक Web Page का आधार होती है और Web Page एक Website का आधार होता है. HTML Web Document को बनाने के किए Tags का उपयोग करती है. 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 मे Webpage Content को <body> </body> Tag के बीच रखा गया है और <head> </head> Tag मे Webpage के बारे मे सामान्य जानकारी होती है.

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 Document को HTML Tags द्वारा ही परिभाषित किया जाता है. एक HTML File का निर्माण HTML Tags से ही होता है. HTML Tag एक साधारण शब्द या एक अक्षर होता है. जो Angular Brackets (< >) से घिरा रहता है. इस प्रकार एक साधारण शब्द या अक्षर और Angular Brackets से एक HTML Tag का निर्माण होता है.

HTML Tags को HTML Element भी कहते है. HTML Tag का कार्य Text को परिभाषित करना होता है. इसके बाद Interpreter Browser का एक Feature Tag द्वारा परिभाषित किये गये Rule को Read करता है. और Read करने के बाद Text को Rule के अनुसार प्रदर्शित करता है.

HTML Tag को जिस Text पर Apply किया जाता है. वह Text उसी Tag के नाम से Mark हो जाता है. अर्थात <p> … </p> के बीच लिखा गया Text को ब्राउज़र Paragraph के रूप में पहचानता है. इसलिए ही HTML को MarkUp Language कहा जाता है.

सभी 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 मे Heading Define करने के लिए Heading Element का उपयोग किया जाता है. Heading Tag को आप अलग अलग आकार में उपयोग कर सकते है. HTML Headings का उपयोग उनकी महत्व के आधार पर किया जाता है. सबसे अधिक महत्व की Heading के लिए <h1> Level Heading का उपयोग किया जाता है. और सबसे कम महत्व की Heading के लिए <h6> Level Heading का इस्तेमाल किया जाता है. 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 Element HTML Tags और Content का मिश्रण होता है. एक HTML Elements मे एक आमतौर पर एक Opening HTML Tag और Closing HTML Tag होता है इनके बीच मे आप कुछ भी Content लिख सकते है. एक Start HTML Tag और End HTML Tag और इनके बीच Content को सामुहिक रूप से HTML Element कहते है. एक Element सबसे Basic रूप मे या सबसे Complex Form मे हो सकता है.

हम एक Element के भीतर एक Element को बना सकते है. इस मामले मे हमारा सरल उदाहरण जिसमे हम Bold का उपयोग करेंगे वह Software Engineer है (वह Software Engineer है) यह एक 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

HTML Document की Brick HTML Tag होता है. एक HTML Tag के बीच में अन्य HTML Tags को लिखा जा सकता है. इस प्रक्रिया को HTML Elements को Nested करना कहते है. . 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

कुछ HTML Tags का साथी Tag यानि Closing Tag नही होता है. इनका सिर्फ Opening भाग या Start Tag ही होता है. इन Tags मे किसी Content को नही लिखा जाता है. ऐसे HTML Element को Empty Element कहा जाता है. Empty Element मे एक Tag के दोनो भाग यानि Opening Part और Closing Part एक ही Tag मे Include होते है. जैसे कि hr एक Empty Element है. जिसका उपयोग Document के End मे एक Horizontal Line लिखने के लिये किया जाता है.

For Example

<!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 मे कुछ Tags सिर्फ Text Formatting के लिए प्रदान किये गए है. इन Tags का उपयोग करते हुए आप वेब पेज पर Text की Presentation और स्थिति को नियंत्रण कर सकते है. जैसे की आप Text को Bold या Underline कर सकते है. किसी Text Editor मे आप ये काम एक बटन क्लिक से कर सकते है लेकिन HTML मे इसके लिए आप Tags उपयोग करते है. HTML मे कुछ Common Formatting Type है जो आप Text पर Apply करते है .

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 को Bold, Italic या Underlined कर सकते है. 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 का use text को bold करने के लिये किया जाता है. <b>This paragraph is bold</b> This paragraph is bold
<strong> <strong> tag का use text को strong करने के लिये किया जाता है. <strong>This paragraph is strong</strong> This paragraph is strong
<i> <i> tag का use text को italic करने के लिये किया जाता है. <i>This paragraph is Italic text</i> This paragraph is Italic text
<em> <em> tag का use text को Emphasized करने के लिये किया जाता है. <em>This paragraph is Emphasized text</em> This paragraph is Emphasized text
<mark> <mark> tag का use text को Marked करने के लिये किया जाता है. <mark>This paragraph is Marked text</mark> This paragraph is Marked text
<small> <small> tag का use text को small करने के लिये किया जाता है. <small>This paragraph is Small text</small> This paragraph is Small text
<del> <del> tag का use text को Delete करने के लिये किया जाता है. <del>This paragraph is Deleted text</del> This paragraph is Deleted text
<ins> <ins> tag का use text को Inserte करने के लिये किया जाता है. <ins>This paragraph is Inserted text</ins> This paragraph is Inserted text
<sub> <sub> tag का use text को Subscript करने के लिये किया जाता है. <sub>This paragraph is Subscript text</sub> This paragraph is Subscript text
<sup> <sup> tag का use text को Superscript करने के लिये किया जाता है. <sup>This paragraph is Superscript text</sup> This paragraph is Superscript text

HTML in Hindi Images

Images से एक वेब पेज Attractive और सुंदर लगता है. HTML के द्वारा वेब पेज मे आप कोई भी image Add कर सकते है. इसके लिए आप <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 को ये बताने के लिए भी उपयोग किया जाता है की ये image किसके बारे मे है. अगर किसी कारण से Picture Load नहीं होती है तो उसकी जगह Alternate Text Show होता है.

Height and Width of Images

Height और Width Set करने के लिए आप Height और Width Attributes का उपयोग करते है. इनकी Values आप Integers मे देते है.

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 कहते है.

कोई भी Table Row ओर Columns से मिलकर बनी होती है. इसलिये <table> Tag के बाद Row Create करने के लिये आप <tr> Tag का उपयोग करते है. आप जितनी Rows Create करना चाहते है उतने ही <tr> Tag परिभाषित करते है. Rows Create करने के बाद आप Rows मे Columns Create करते है. Columns Create करने के लिये <td> Tag का उपयोग किया जाता है. आप जितने Columns Create करना चाहते है उतने ही <td> Tags परिभाषित करते है.

किसी भी अन्य 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

किसी एक Row के column को एक से ज्यादा Columns मे भी विभाजित कर सकते है. इसके लिये आप उससे पहले वाले Column मे Colspan Attribute परिभाषित करते है. जिस Column मे आप Colspan परिभाषित करते है वो एक Column उतने ही Columns की जगह घेरता है.

अगर आप सिंगल 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 के द्वारा Create करते है. ये List Unordered Form मे होती है. और ये Items Bullets से Represent की जाती है.

<!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 के द्वारा Create करते है. ये List Ordered Form मे होती है. इसको आप Numbers(1,2,3,4,5) और Alphabets(a,b,c,d,e,f) दोनो तरह से Represent कर सकते है.

<!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 के द्वारा Create करते है. और ये 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

एक Link ऐसा Text या Image होता है जिस पर Click करते ही आप दूसरे पेज पर Redirect कर दिए जाते है. जब भी आप किसी Link पर अपना Cursor ले जाते है तो वह एक Clickable Hand Icon मे बदल जाता है. 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

किसी भी वेब पेज को कई Sections मे विभाजित किया जा सकता है. इन Sections को आप Frames भी कह सकते है. यह Sections एक दूसरे से स्वतंत्र होते है. हर Section एक अलग वेब पेज को Represent करता है. अगर आसान शब्दों में कहें तो एक वेब पेज को कई Sections मे विभाजित करके उन Sections मे दूसरे वेब पेज को दिखा सकते है. इस तरह एक वेब पेज के अंदर कई दूसरे वेब पेज Show किये जा सकते है. यानि यह कहये हर Section मे एक अलग वेब पेज Load किया जा सकता है.

HTML Frames आपको एक HTML Documents में कई HTML Documents को Merge करने का एक तरीका प्रदान करता है. HTML Frames Browser Window को कई Panel और 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

Internet Article in Hindi