Type Here to Get Search Results !

HTML Kya Hai - HTML Ki Puri Jankari Hindi Me


HTML Introduction

HTML क्या है ?

HTML Web pages को बनाने के लिए standard markup language है .
  • HTML का मतलब होता है : Hyper Text Markup Language
  • HTML वेबपेज के structure का वर्णन करता है
  • HTML में elements की एक series(श्रंखला ) होती है
  • HTML elements browser को कंटेंट प्रदर्शित करने का तरीका है
  • HTML elements को tags द्वारा दर्शाया जाता है
  • HTML tags में "heading", "paragraph", "table", इत्यादि जैसे कंटेंट के लेबल होते है
  • ब्राउज़र HTML टैग प्रदर्शित नहीं करते हैं, लेकिन page की सामग्री को प्रस्तुत करने के लिए उनका उपयोग करते हैं

Simple HTML Document

उदहारण

<!DOCTYPE html>
<html>
<head>
<title>Page का Title</title>
</head>
<body>

<h1>मेरी पहली हैडिंग है </h1>
<p>मेरा पहला पैराग्राफ है .</p>

</body>
</html>
स्वयं से प्रयास करें »

उदहारण Explained

  • <!DOCTYPE html> declaration document के HTML5 होने के लिये परिभाषित करती है
  • <html> element HTML का root element होता है page
  • <head> element में document की meta information होती है
  • <title> element document के लिए टाइटल specify करती है
  • <body> element पेज में दिखाई देने वाले भाग को कंटेंन करता है
  • <h1> element सबसे बड़ी heading को दर्शाता है
  • <p> element paragraph के लिए प्रयोग किया जाता है

HTML Tags

HTML tags element का नाम हो जो angle brackets से घिरा होता है :
<टैग का नाम >कंटेंट यहाँ होगा ...</टैग का नाम >
  • HTML tags अधिकांशतः pairs में जैसे <p> और </p>
  • pair में से पहला टैग start tag, और second tag end tag कहलाता है
  • end tag start tag जैसे ही लिखा जाता है ,लेकिन tag name के पहले forward slash लगाया जाता है
Tip: start tag opening tag, और end tag को closing tagभी कहा जाता है .

Web Browsers

web browser (Chrome, Edge, Firefox, Safari) का उद्देश्य HTML documents पढना और उन्हें display करना होता है .
browser HTML tags प्रदर्शित नही करते है , लेकिन उनका प्रयोग ये निर्धारित करने के लिए करता है कि कैसे document को कैसे प्रदर्शित करना है :

HTML Page Structure

HTML page structure को आप नीचे से दिए स्ट्रक्चर से अनुमान लगा सकते है :
<html>
<head>
<title>Page का title</title>
</head>
<body>
<h1>यह हैडिंग है </h1>
<p>यह पैराग्राफ है .</p>
<p>यह एक दूसरा पैराग्राफ है .</p>
</body>
</html>
Note: केवल ब्राउज़र में <body> section (ऊपर प्रदर्शित white area ) के अन्दर का कंटेंट प्रदर्शित होता है .

<!DOCTYPE> Declaration

<!DOCTYPE> declaration document type को प्रदर्शित करता है , और browsers को web pages को correctly प्रदर्शित करने में मदद करता है .
यह केवल एक बार सबसे ऊपर लिखा जाना चाहिए , (किसी भी HTML tags के पहले ).
<!DOCTYPE> declaration case sensitive(A या a सामान है) नही है .
HTML5 के लिए <!DOCTYPE> declaration :
<!DOCTYPE html>

HTML Versions

वेब के शुरुआती दिनों से आज तक में , HTML के कई संस्करण आए हैं:
Versionवर्ष
HTML1991
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML2000
HTML52014

HTML बेसिक उदाहरण

चिंता न करें यदि आप ने इन प्रयोग किये गये टैग के बारे में नही पढ़ा है तो .
आप इन टैग्स के बारें में हमारे अगले चैप्टर में पढने वाले है .

HTML डाक्यूमेंट्स

सभी HTML document को document type की declaration के साथ शुरू करना चाहिए >.
HTML document खुद <html> से शुरू होता है और </html> से ख़त्म होता है .
HTML document का दिखने वाला भाग <body> और </body> के बीच का भाग होता है .

उदहारण

<!DOCTYPE html>
<html>
<body>

<h1>मेरा पहला हैडिंग है </h1>
<p>मेरा पहला पैराग्राफ है .</p>

</body>
</html>
खुद से सीखिए »

HTML हैडिंग्स

HTML headings को <h1> से <h6> टैग्स . के साथ डिफाइन किया जाता है |
<h1> most important heading को डिफाइन करता है . <h6> least important heading:  को डिफाइन करता है

उदहारण

<h1>यह हैडिंग है 1</h1>
<h2>यह हैडिंग है 2</h2>
<h3>यह हैडिंग है 3</h3>
खुद से सीखिए »

HTML Paragraphs

HTML Paragraphs को डिफाइन किया जाता है <p> tag से :

उदहारण

<p>यह पैराग्राफ है .</p>
<p>यह दूसरा पैराग्राफ है .</p>
आइये खुद सीखिए »

HTML Links

लिंक्स को डिफाइन किया जाता है <a> tag से :

उदहारण

<a href="https://www.learnsa2z.com"> यह लिंक है </a>
खुद से सीखिए »
Link's destination को href attribute.  द्वारा specified किया जाता है
Attributes का प्रयोग HTML elements के बारे में अतिरिक्त information देने के लिए किया जाता है .
आने वाले चैप्टर में आपको attributes के बारें में ज्यादा जानकारी मिलने वाली है |.

HTML Images

HTML images को डिफाइन किया जाता है <img> tag. से
Source file (src), alternative text (alt), width, और height attributes के रूप में दिए जाते है :

उदहारण

<img src="HTMLINHINDI.jpg" alt="leanrsa2z.com" width="104" height="142">
खुद से सीखिए »

HTML Buttons

HTML buttons डिफाइन किये जाते है <button> tag से :

उदहारण

<button>क्लिक करें </button>
खुद से सीखिए »

HTML Lists

HTML lists को डिफाइन किया जाता है <ul> (unordered/bullet list) या<ol> (ordered/numbered list) टैग्स से , <li> tags (list items) को फॉलो करते हुए :

उदहारण

<ul>
  <li>काफी </li>
  <li>दूध </li>
  <li>चाय </li>
</ul>
खुद से सीखिए »

HTML Comments



अभी हमने उदाहरण नही दिए सभी के लिए लेकिन जल्द अपडेट कर देंगे


Comment tags HTML source कोड में comments डालने के लिए उपयोग किया जाता है।

HTML Comment टैग्स

आप निम्नलिखित सिंटैक्स का उपयोग करके अपने HTML source में comments जोड़ सकते हैं::
<!-- अपना कमेंट यहाँ लिखें -->
ध्यान दें कि opening टैग में एक विस्मयादिबोधक बिंदु (exclamation point) (!) है, लेकिन closing टैग में नहीं।
Note: Comments ब्राउज़र द्वारा प्रदर्शित नहीं की जाती हैं, लेकिन वे आपके HTML source कोड को document करने में मदद कर सकती हैं।
Comments के साथ आप अपने HTML में notifications और अनुस्मारक (reminders) रख सकते हैं::

उदहारण

<!-- यह एक कमेन्ट है -->

<p>यह एक पैराग्राफ है .</p>

<!--याद रखने के लिए यहां अधिक जानकारी जोड़ सकते है -->
खुद से प्रयास करें »
HTML को डीबग करने के लिए कमेंट भी बहुत उपयोगी होती हैं, क्योंकि आप त्रुटियों की खोज करने के लिए एक बार में HTML कोड की कई लाइन्स पर कमेन्ट कर सकते हैं:

उदहारण

<!-- फिलहाल इस छवि को प्रदर्शित न करें
<img border="0" src="commented.jpg" alt="comment img उदाहरण">
-->
खुद से प्रयास करें »

HTML Links


अभी हमने उदाहरण नही दिए सभी के लिए लेकिन जल्द अपडेट कर देंगे


लिंक लगभग सभी वेब पेजों में पाए जाते हैं। लिंक उपयोगकर्ताओं को एक पेज से दूसरे पेज पर जाने के लिए क्लिक करने की अनुमति देते हैं।

HTML Links - Hyperlinks

HTML links , hyperlinks(a link from a hypertext file or document to another location or file, typically activated by clicking on a highlighted word or image on the screen.) होते है .
आप एक लिंक पर क्लिक करके दूसरे डॉक्यूमेंट पर जा सकते हैं।
जब आप माउस को किसी लिंक पर ले जाते हैं, तो माउस एरो एक छोटे से हाथ में बदल जाएगा।
Note: लिंक टेक्स्ट नहीं होना चाहिए। यह एक image या कोई अन्य HTML element हो सकता है।

HTML Links - Syntax(the arrangement of words and phrases to create well-formed sentences in a language.)

हाइपरलिंक को HTML ke <a> टैग के साथ परिभाषित किया गया है::
<a href="url">"लिंक के लिए प्रयोग किये जाने वाला " </a>

उदाहारण

<a href="https://www.learnsa2z.com/">Visit our educational tutorial</a>
स्वयं प्रयास करें »
href attribute link के destination address (https://www.learnsa2z.com/) को specifies करता है .
link text visible part होता है ( जैसे के ऊपर की लिंक में Visit our educational tutorial).
लिंक टेक्स्ट पर क्लिक करने पर आपको specified address पर भेज दिया जाएगा।
Note: सबफ़ोल्डर addresses के अंत में फ़ॉरवर्ड स्लैश के बिना, आप सर्वर से दो requests generate कर सकते हैं।आप पाएंगे की कई सर्वर स्वचालित रूप से address के अंत में फ़ॉरवर्ड स्लैश जोड़ देंगे, और फिर एक नया requests बना सकते हैं।

Local Links

ऊपर दिए गए उदाहरण में एक absolute URL (एक पूर्ण वेब पता) का उपयोग किया गया है।
एक local link (उसी वेब साइट से लिंक) एक relative URL (https: // www .... के बिना) के साथ specified होती है।

उदाहारण

<a href="html_images.asp">HTML Images</a>
स्वयं प्रयास करें »

HTML Link Colors

डिफ़ॉल्ट रूप से, एक लिंक इस तरह दिखाई देगा (सभी ब्राउज़रों में):
  • unvisited link , underlined और blue दिखाई देगा
  • visited link, underlined और purple दिखाई देगा
  • active link, underlined और red दिखाई देगा
आप सीएसएस का उपयोग करके डिफ़ॉल्ट रंग बदल सकते हैं:

उदाहारण

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>
स्वयं प्रयास करें »
सीएसएस का उपयोग करके लिंक को अक्सर बटन के रूप में स्टाइल किया जाता है:
यह एक लिंक है

उदाहारण

<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>
स्वयं प्रयास करें »
CSS के बारे में अधिक जानने के लिए, अगर आप लोगो का सपोर्ट रहा तो हम जल्द ही css का app लांच कर देंगे .

HTML Links - का target Attribute

target attribute specifies करती है कि linked document को कहाँ पर ओपन करना है .
target attribute में निम्नलिखित values हो सकती है :
  • _blank - लिंक किए गए document को एक नई विंडो या टैब में खोलता है
  • _self - लिंक किए गए document को उसी विंडो / टैब में खोलता है, जिस पर क्लिक किया गया था (यह डिफ़ॉल्ट है अर्थात कुछ न सेट करने पर यही टारगेट एट्रिब्यूट वर्क करता है )
  • _parent - Parent frame में फ्रेम लिंक किए गए document को खोलता है
  • _top - लिंक किए गए document को विंडो के पूर्ण body में खोलता है
  • framename - लिंक किए गए document को एक named frame में खोलता है |
यह उदाहरण एक नई ब्राउज़र विंडो / टैब में लिंक किए गए document को खोलेगा:

उदाहारण

<a href="https://www.learnsa2z.com/" target="_blank">Visit learnsa2z!</a>
स्वयं प्रयास करें »
Tip: यदि आपका webpage frame में locked है तो , आप target="_top" का use करके frame को break out कर सकते है :

उदाहारण

<a href="https://www.learnsa2z.com/" target="_top">educational tutorial!</a>
स्वयं प्रयास करें »

HTML Links - Link के रूप में Image

लिंक के रूप में images का उपयोग करना आम(common) है:

उदाहारण

<a href="default.asp">
  <img src="logo.gif" alt="HTML INHIDI" style="width:42px;height:42px;border:0;">
</a>
स्वयं प्रयास करें »
Note: border:0;को IE9 (और पहले के ब्राउज़र) को छवि के चारों ओर एक border प्रदर्शित करने से रोकने के लिए जोड़ा जाता है (जब image एक लिंक होती है)।.

Link Titles

The title attribute किसी element के बारे में अतिरिक्त जानकारी(extra information) specifies करती है . जानकारी को अक्सर एक टूलटिप(a message that appears when a cursor is positioned over an icon, image, hyperlink, or other element in a graphical user interface.) टेक्स्ट के रूप में दिखाया जाता है जब माउस एलिमेंट के ऊपर चलता है।

उदाहारण

<a href="https://www.learnsa2z.com/" title="Go to learnsa2z educational section">Visit our educational Tutorial</a>
स्वयं प्रयास करें »

HTML Links - bookmark बनायें

HTML बुकमार्क का उपयोग पाठकों को किसी वेब पेज के विशिष्ट(specific) भागों में जाने के लिए किया जाता है।
यदि आपका वेबपेज बहुत लंबा है तो बुकमार्क उपयोगी हो सकते हैं।
बुकमार्क करने के लिए, आपको पहले बुकमार्क बनाना होगा, और फिर उसमें एक लिंक जोड़ना होगा।
जब लिंक पर क्लिक किया जाता है, तो पेज बुकमार्क के साथ वाले स्थान पर स्क्रॉल करेगा।

उदाहारण

सबसे पहले , id attribute के साथ बुकमार्क बनाइये :
<h2 id="L14">लाइन 14</h2>
फिर, उसी पृष्ठ के भीतर बुकमार्क ("लाइन 14 पर जाएं") के लिए एक लिंक जोड़ें :
<a href="#L14"> लाइन 14& पर जाएँ </a>
या,दूसरे पृष्ठ से बुकमार्क के लिए एक लिंक जोड़ें ("लाइन 14 पर जाएं"), :

उदाहारण

<a href="html_demo.html#L14">लाइन 14 पर जाएं</a>
स्वयं प्रयास करें »

External Paths

External pages को पूर्ण URL या वर्तमान वेब पेज के relative path के साथ referenced किया जा सकता है।
यह उदाहरण वेब पेज से लिंक करने के लिए एक पूर्ण URL का उपयोग करता है:

उदाहारण

<a href="https://www.learnsa2z.com/">educational tutorial</a>
यह उदाहरण वर्तमान वेब साइट पर gk फ़ोल्डर में स्थित एक page से लिंक है

उदाहारण

<a href="/gk/hindigk1.html ">GK tutorial</a>
यह उदाहरण वर्तमान PAGE के same फ़ोल्डर में स्थित page से लिंक करता है::

उदाहारण

<a href="hindigk1.html">GK tutorial</a>
हम जल्द से जल्द अपडेट करने वाले है आप पेज HTML फ़ाइल PATHS में फ़ाइल PATHS के बारे में अधिक पढ़ सकेंगे .

Chapter Summary

  • लिंक को define करने के लिए <a> element का उपयोग करें
  • href attribute का उपयोग करें link address को डिफाइन करने के लिए
  • target attribute का उपयोग करें linked document को ओपन करने के लिए
  • लिंक के रूप में इमेज को प्रयोग करने के लिए <img> element ( <a>) के अन्दर का प्रयोग करने
  • वेबपेज में बुकमार्क को डिफाइन करने के लिए id attribute (id="value") का प्रयोग करें
  • बुकमार्क से लिंक करने के लिए href attribute (href="#value") का उपयोग करें

HTML Link Tags

Tagविवरण
<a>hyperlink को Defines करने के लिए
सभी उपलब्ध html टैग्स की पूरी सूची के लिए , क्लिक करें HTML टैग Reference.


HTML Styles - CSS


अभी हमने उदाहरण नही दिए सभी के लिए लेकिन जल्द अपडेट कर देंगे


CSS = Styles और Colors

Text को Manipulate करना
Colors,  Boxes

HTML की Styling करना CSS के साथ

CSS का मतलब होता है Cascading Style Sheets.
CSS यह describes करता है की HTML elements को स्क्रीन, पेपर या अन्य मीडिया में कैसे प्रदर्शित किया जाए।.
CSS बहुत काम बचाता है .यह एक साथ कई वेब पेजों के लेआउट को नियंत्रित कर सकता है।
CSS को HTML तत्वों में 3 तरीकों से जोड़ा जा सकता है:
  • Inline - HTML तत्वों में style attribute का उपयोग करके
  • Internal - <head> section में <style> element का उपयोग करके
  • External - External CSS file का उपयोग करके
CSS को add करने का सबसे आम तरीका है, styles को अलग-अलग CSS फाइलों में रखना । हालांकि, यहां हम इनलाइन और इंटरनल स्टाइल का उपयोग करेंगे, क्योंकि यह प्रदर्शित करना आसान है, और आपके लिए स्वयं इसे आज़माना आसान है।
सुझाव : अगर आप लोग कहेंगे तो हम जल्द ही CSS के लिए app लांच करना चाहेंगे | जहाँ से आप हमारे CSS Tutorial में CSS के बारे में बहुत कुछ जान सकेंगे हैं। .

Inline CSS

इनलाइन सीएसएस का प्रयोग सिंगल HTML एलिमेंट के लिए एक unique style को लागू करने के लिए किया जाता है।
एक इनलाइन सीएसएस HTML element की style attribute का उपयोग करता है।
यह उदाहरण <h1> element के टेक्स्ट का रंग नीला सेट कर देगा :

उदाहारण

<h1 style="color:blue;">यह एक ब्लू हेडिंग है</h1>
स्वयं प्रयास करें »

Internal CSS

एक HTML page के लिए style को परिभाषित करने के लिए एक आंतरिक CSS का उपयोग किया जाता है।.
internal CSS को <style> एलिमेंट के अन्दर HTML पेज के <head> section में परिभाषित किया जाता है :

उदाहारण

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>यह हैडिंग है </h1>
<p>यह पैराग्राफ है .</p>

</body>
</html>
स्वयं प्रयास करें »

External CSS

कई HTML PAGES के लिए style को परिभाषित करने के लिए एक external style शीट का उपयोग किया जाता है।
With an , you can change the look of an entire web site, by changing one file! External style sheet के साथ , आप एक फ़ाइल को बदलकर, संपूर्ण वेब साइट का रूप बदल सकते हैं!
External style sheet,का उपयोग करने के लिए, HTML पेज के section में इसके लिए एक लिंक जोड़ें: <head> section of the HTML page:

उदाहारण

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>यह हैडिंग है</h1>
<p>यह पैराग्राफ है .</p>

</body>
</html>
स्वयं प्रयास करें »
किसी भी टेक्स्ट एडिटर में एक external style sheet लिखी जा सकती है। फ़ाइल में कोई HTML कोड नहीं होना चाहिए, और उसे .css एक्सटेंशन के साथ सेव किया जाना चाहिए।.
यहाँ बताया गया है की "styles.css" कैसा दिखता है :
body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

CSS Fonts

CSS , color property का प्रयोग किये जाने वाले टेक्स्ट कलर को परिभाषित करता है
CSS font-family property का उपयोग किये जाने वाले फॉण्ट को परिभाषित करता है .
CSS font-size property का उपयोग किये जाने वाले टेक्स्ट आकार को परिभाषित करता है |

उदाहारण

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p  {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>यह हैडिंग है </h1>
<p>यह पैराग्राफ है .</p>

</body>
</html>
स्वयं प्रयास करें »

CSS Border

CSS border property HTML element के around बॉर्डर परिभाषित करता है :

उदाहारण

p {
  border: 1px solid powderblue;
}
स्वयं प्रयास करें »

CSS Padding

CSS padding property text और border के बीच padding (space) को परिभाषित करती है :

उदाहारण

p {
  border: 1px solid powderblue;
  padding: 30px;
}
स्वयं प्रयास करें »

CSS Margin

CSS margin property border के बाहर मार्जिन (स्थान)margin (space) को परिभाषित करती है :

उदाहारण

p {
  border: 1px solid powderblue;
  margin: 50px;
}
स्वयं प्रयास करें »

id Attribute

To define a for एक special element के लिए, specific style को परिभाषित करने के लिए , एलिमेंट में एक id एट्रिब्यूट जोड़े जाते है :
<p id="p01">मैं सबसे अलग हूँ </p>
then define a style for the element with the फिर specific id वाले एलिमेंट के लिए एक स्टाइल परिभाषित करते है :

उदाहारण

#p01 {
  color: blue;
}
स्वयं प्रयास करें »
नोट : एक element की आईडी एक page के अन्दर unique (अद्वितीय) होनी चाहिए, इसलिए एक अद्वितीय एलिमेंट का चयन करने के लिए आईडी सेलेक्टर का उपयोग किया जाता है!

class Attribute

Special types के elements के लिए एक स्टाइल को परिभाषित करने के लिए , एलिमेंट में एक class attribute को जोड़ा जाता है :
<p class="error">मै सबसे अलग हूँ </p>
फिर specific class वाले एलिमेंट के लिए एक स्टाइल परिभाषित करें:

उदाहारण

p.error {
  color: red;
}
स्वयं प्रयास करें »

External References

External style sheets को पूर्ण URL या वर्तमान वेब पेज के relative path के साथ referenced किया जा सकता है।
यह उदाहरण स्टाइल शीट से लिंक करने के लिए एक पूर्ण URL का उपयोग करता है:

उदाहारण

<link rel="stylesheet" href="https://www.example.com/html/styles.css">
यह उदाहरण वर्तमान वेब साइट पर HTML फ़ोल्डर में स्थित style sheet से लिंक करता है:

उदाहारण

<link rel="stylesheet" href="/html/styles.css">
यह उदाहरण वर्तमान पृष्ठ के समान फ़ोल्डर में स्थित style sheet से लिंक करता है:

उदाहारण

<link rel="stylesheet" href="styles.css">
आप अध्याय HTML फ़ाइल paths में फ़ाइल paths के बारे में अधिक पढ़ सकेंगे जो की हम जल्द अपडेट करने वाले हैं।.

Chapter Summary(सारांश)

  • HTML style attribute का प्रयोग inline styling के लिए
  • HTML <style> element का प्रयोग , internal CSS को डिफाइन करने के लिए
  • Use the HTML <link> बाहरी (external) CSS फ़ाइल को संदर्भित (refer) करने के लिए तत्व
  • HTML <head> element का उपयोग <style> और <link> elementsको store करने के लिए
  • CSS color property का प्रयोग text colors के लिए
  • CSS font-family property का उपयोग text fonts के लिए
  • CSS font-size property का उपयोग text sizes के लिए
  • CSS border property का उपयोग borders के लिए
  • CSS padding property का उपयोग border के इनसाइड स्पेस करने के लिए
  • CSS margin property border के बाहर तरफ स्पेस करने के लिए

HTML Style Tags

Tagविवरण
<style>एक HTML document के लिए style की जानकारी को परिभाषित करता है
<link>एक document और एक बाहरी resource के बीच एक लिंक को परिभाषित करता है

HTML Tables


Table उदाहरण

NAMEID NoAGE
JOHN232334
RAM356524
SALMAN266525
NARESH342343
MAHESH324532
SEKH334327
स्वयं प्रयास करें »

HTML Table को परिभाषित करना

HTML table को <table> tag के साथ डिफाइन किया जाता है .
प्रत्येक table row को is defined with the <tr> tag के साथ परिभाषित किया गया है . एक table header को <th> tag के साथ परिभाषित किया गया है . default रूप , table headings bold और centered होते है . एक table data/cell को <td> tag के साथ परिभाषित किया गया है .

उदाहरण

<table style="width:100%">
  <tr>
    <th>प्रथमनाम </th>
    <th>उपनाम </th>
    <th>आयु </th>
  </tr>
  <tr>
    <td>सलमान </td>
    <td>खान </td>
    <td>50</td>
  </tr>
  <tr>
    <td>राम </td>
    <td>सिंह </td>
    <td>94</td>
  </tr>
</table>
स्वयं प्रयास करें »
Note: <td> elements table के data containers है .
उनमे सभी प्रकार के HTML elements हो सकते है जैसे ; text, images, lists, अन्य tables, आदि .

HTML Table - Border जोड़ना

यदि आप table के लिए बॉर्डर SPECIFY नही करते है , तो यह बिना borders के प्रदर्शित किया जायेगा .
एक border CSS border property का प्रयोग कर सेट की जाती है :

उदाहरण

table, th, td {
  border: 1px solid black;
}
स्वयं प्रयास करें »
table और table cells दोने के लिए बॉर्डर्स को डिफाइन करना याद रखे .

HTML Table - Collapsed((of a structure) fall down or in) Borders

यदि आप चाहते है कि borders एक border में collapse हो जाएँ तो आपको , CSS border-collapse property जोड़ना होगा :

उदाहरण

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
स्वयं प्रयास करें »

HTML Table - Cell Padding जोड़ना

Cell padding cell content और उसके borders के बीच के स्पेस को specifies करता है .
a यदि आप padding specify नही करते है , तो table cells बिना padding के प्रदर्शित किया जायेगा .
padding को सेट करने के लिए , CSS padding property प्रयोग कीजिये :

उदाहरण

th, td {
  padding: 15px;
}
स्वयं प्रयास करें »

HTML Table - Left-align Headings

default रूप से , table headings bold और centered होते है .
table headings को left-align करने के लिए , CSS text-align property का प्रयोग करें :

उदाहरण

th {
  text-align: left;
}
स्वयं प्रयास करें »

HTML Table - Border Spacing जोड़ना

Border spacing cells के बीच के SPACE को specifies करती है .
table के लिए border spacing सेट करने के लिए , CSS border-spacing property का प्रयोग करें :

उदाहरण

table {
  border-spacing: 5px;
}
स्वयं प्रयास करें »
Note: If the यदि table borders से collapsed हो गई है , तो border-spacing का कोई प्रभाव नही पड़ेगा .

HTML Table - Cells जो कई Columns को Span करती है

To make a cell span को एक से अधिक कालम column बनाने के लिए , colspan attribute का प्रयोग करें :

उदाहरण

<table style="width:100%">
  <tr>
    <th>नाम </th>
    <th colspan="2">मोबाइल </th>
  </tr>
  <tr>
    <td>युसूफ </td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>
स्वयं प्रयास करें »

HTML Table - Cells जो कई Rows Span करे

cell span को एक से अधिक row बनाने के लिए , rowspan attribute का उपयोग करें :

उदाहरण

<table style="width:100%">
  <tr>
    <th>नाम :</th>
    <td>परमिंदर </td>
  </tr>
  <tr>
    <th rowspan="2">मोबाइल :</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>
स्वयं प्रयास करें »

HTML Table - Caption को जोड़ना

किसी table में caption जोड़ने के लिए , <caption> tag का प्रयोग करें :

उदाहरण

<table style="width:100%">
  <caption>परिचय पत्र </caption>
  <tr>
    <th>नाम </th>
    <th>आईडी </th>
  </tr>
  <tr>
    <td>रोहन </td>
    <td>4645</td>
  </tr>
  <tr>
    <td>सोहन </td>
    <td>6550</td>
  </tr>
</table>
स्वयं प्रयास करें »
Note: <table> tag के तुरंत बाद <caption> tag डाला जाना चाहिए .

एक Table के लिए Special Style

To define a for a एक special table के लिए ,special style को DEFINE करने के लिए टेबल में id attribute जोड़ें :

उदाहरण

<table id="t01">
  <tr>
    <th>प्रथमनाम </th>
    <th>उपनाम </th>
    <th>आयु </th>
  </tr>
  <tr>
    <td>राम </td>
    <td>जॉनसन</td>
    <td>64</td>
  </tr>
</table>

आप इस table के लिए एक special style को परिभाषित कर सकते है :

table#t01 {
  width: 100%;
  background-color: #f1f1c1;
}
स्वयं प्रयास करें »

और अधिक styles जोड़ें :

table#t01 tr:nth-child(even) {
  background-color: #eee;
}
table#t01 tr:nth-child(odd) {
  background-color: #fff;
}
table#t01 th {
  color: white;
  background-color: black;
}
स्वयं प्रयास करें »

Chapter Summary

  • table को डिफाइन करने के लिए HTML <table> element का उपयोग करें
  • table row को डिफाइन करने के लिए HTML <tr> element का प्रयोग करें
  • HTML <td> element to define a table data
  • table heading को डिफाइन करने के लिए HTML <th> element का प्रयोग करें
  • table caption को डिफाइन करने के लिए HTML <caption> element का प्रयोग करें
  • border को डिफाइन करने के लिए CSS border property का प्रयोग करें
  • cell borders collapse करने के लिए CSS border-collapse property का प्रयोग करें
  • cells में padding जोड़ने के लिए CSS padding property का प्रयोग करें
  • cell text को align करने के लिए CSS text-align property का प्रयोग करें
  • cells के बीच spacing सेट करने के लिए CSS border-spacing property का प्रयोग करें
  • कई columns को cell span बनाने के लिए colspan attribute का प्रयोग करें
  • कई rows को cell span बनाने के लिए rowspan attribute का प्रयोग करें
  • table को uniquely define करने के लिए id attribute का प्रयोग करें

HTML Table Tags

Tagविवरण
<table>table को Defines करने के लिए
<th>header cell table में Defines करने के लिए
<tr>table में row Defines करने के लिए
<td>table में cell Defines करने के लिए
<caption>table caption Defines करने के लिए
<colgroup>formatting के लिए टेबल में एक या अधिक columns का एक group Specifies करता है
<col><colgroup> element के भीतर प्रत्येक column के लिए column properties Specifies करता है
<thead>header content को किसी table में Groups करता है
<tbody>body content को किसी table में Groups करता है
<tfoot>footer content को किसी table में Groups करता है

HTML Lists


अभी हमने उदाहरण नही दिए सभी के लिए लेकिन जल्द अपडेट कर देंगे


 HTML लिस्ट उदाहरण

Unordered लिस्ट:

  • आइटम
  • आइटम
  • आइटम
  • आइटम

Ordered लिस्ट:

  1. First आइटम
  2. Second आइटम
  3. Third आइटम
  4. Fourth आइटम
स्वयं प्रयास करें »

Unordered HTML लिस्ट

एक unordered list <ul> tag से शुरू होती है . प्रत्येक list आइटम <li> tag से शुरू होती है .
The list items को डिफ़ॉल्ट रूप से bullets (small black circles) क्र साथ marked किया किया जाता है :

उदाहरण

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Unordered HTML लिस्ट - लिस्ट आइटम Marker चुने

CSS list-style-type property का उपयोग list आइटम marker स्टाइल को परिभाषित करने के लिए किया जाता है :
Valueविवरण
discबुलेट के लिए सूची आइटम मार्कर सेट करता है (डिफ़ॉल्ट अगर कुछ सेट नही किया गया तो ये अपने आप लागू हो जाता है
circleसूची आइटम मार्कर को एक सर्कल में सेट करता है
squareसूची आइटम मार्कर को एक वर्ग में सेट करता है
noneसूची आइटम को चिह्नित नहीं किया जाएगा

उदाहरण - Disc

<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
स्वयं प्रयास करें »

उदाहरण - Circle

<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
स्वयं प्रयास करें »

उदाहरण - Square

<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
स्वयं प्रयास करें »

उदाहरण - None

<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
स्वयं प्रयास करें »

Ordered HTML लिस्ट

एक ordered list <ol> tag से starts होती है . प्रत्येक list आइटम <li> tag से शुरू होता है .
list items default रूप से NUMBERS के साथ MARKED किया जाता है :

उदाहरण

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
स्वयं प्रयास करें »

Ordered HTML लिस्ट - Type Attribute

The type attribute of the <ol> tag, defines the type of the list आइटम marker:
Typeविवरण
type="1"लिस्ट आइटम्स number के साथ numbered(क्रमांकित, संख्यांकित) होंगे (डिफ़ॉल्ट; अगर कुछ सेट नही किया गया तो ये अपने आप लागू हो जाता है )
type="A"list items uppercase letters में numbered होंगे
type="a"list items lowercase letters में numbered होंगे
type="I"list items uppercase roman numbers में numbered होंगे
type="i"list items lowercase roman numbers में numbered होंगे

Numbers:

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
स्वयं प्रयास करें »

Uppercase Letters:

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
स्वयं प्रयास करें »

Lowercase Letters:

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
स्वयं प्रयास करें »

Uppercase Roman Numbers:

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
स्वयं प्रयास करें »

Lowercase Roman Numbers:

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
स्वयं प्रयास करें »

HTML विवरण Lists

HTML description lists को भी support करता है .
एक description list प्रत्येक term के विवरण के साथ terms की लिस्ट है |
<dl> tag description list को डिफाइन करता है , <dt> tag term (name को डिफाइन करता है , और <dd> tag पप्रत्येक term का वर्णन करता है :

उदाहरण

<dl>
  <dt>Coffee</dt>
  <dd>- काला गर्म पेय </dd>
  <dt>Milk</dt>
  <dd>- सफ़ेद ठंडा पेय </dd>
</dl>
स्वयं प्रयास करें »

Nested (fit (an object or objects) inside a larger one.) HTML Lists

लिस्ट can be nested (lists inside lists):

उदाहरण

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
स्वयं प्रयास करें »
Note:list आइटम में नई list और अन्य HTML element शामिल हो सकते हैं, जैसे चित्र और लिंक, आदि।

Control लिस्ट Counting

डिफ़ॉल्ट रूप से, एक ordered list 1 से गिनना शुरू कर देगी। यदि आप एक specified संख्या से गिनती शुरू करना चाहते हैं, तो आप पstart attribute का उपयोग कर सकते हैं:

उदाहरण

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
स्वयं प्रयास करें »

Horizontal लिस्ट CSS के साथ

HTML lists को CSS के साथ कई अलग-अलग तरीकों से स्टाइल किया जा सकता है।.
नेविगेशन मेनू बनाने के लिए एक लोकप्रिय तरीका क्षैतिज(horizontal) रूप से एक सूची(list) बनाना है:

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>
स्वयं प्रयास करें »
Tip: यहाँ पर ज्यादातर अब css प्रयोग देखने को मिलने लगा है तो अगर आप लोग का सपोर्ट रहा तो हम जल्द ही css का एप भी लाना चाहेंगे | .

Chapter Summary

  • HTML <ul> element का प्रयोग कीजिये unordered list के लिए
  • CSS list-style-type property का प्रयोग कीजिये list आइटम marker के लिए
  • HTML <ol> element का प्रयोग कीजिये ordered list के लिए
  • HTML type attribute का प्रयोग कीजिये numbering type के लिए
  • HTML <li> element का प्रयोग कीजिये list आइटम के लिए
  • HTML <dl> element का प्रयोग कीजिये description list के लिए
  • HTML <dt> element का प्रयोग कीजिये description term के लिए
  • HTML <dd> element का प्रयोग कीजिये description list में टर्म को describe
  • Lists को lists के अन्दर nested करने के लिए
  • लिस्ट items अन्य HTML elements को शामिल कर सकता है
  • CSS property float:left या display:inline का प्रयोग कीजिये list को horizontally प्रदर्शित करने के लिए

HTML लिस्ट Tags

Tagविवरण
<ul>unordered list
<ol>Defines an ordered list को परिभाषित करने के लिए
<li>Defines a list आइटम को परिभाषित करने के लिए
<dl>Defines a description list को परिभाषित करने के लिए
<dt>Defines a term in a description list को परिभाषित करने के लिए
<dd>Describes the term in a description list को परिभाषित करने के लिए
सभी उपलब्ध html टैग्स की पूरी सूची के लिए , क्लिक करें HTML टैग Reference

HTML एलिमेंट्स


HTML element ज्यादातर बार start टैग और end टैग से मिलकर बना होता है , साथ ही साथ start टैग और end के बीच कुछ लिखा भी जा सकता है ताकि उस टैग का effect बीच में लिखे टेक्स्ट पर पद सके | :
<टैग का नाम >आप यहाँ कुछ लिख सकते है ...</टैग का नाम >
HTML element के start टैग और end के बीच में सभी अन्य टैग और भी बहुत कुछ लिखा जाता है :
<p>मेरा पहला पैराग्राफ .</p>
start टैगElement का कंटेंटEnd टैग
<h1>मेरी पहली हैडिंग</h1>
<p>मेरा पहला पैराग्राफ .</p>
<br>
जिस HTML elements के साथ कोई content नही होता है उसे empty elements कहा जाता है . Empty elements का end tag नही होता है , जैसे <br> element (जो की एक line break देने के लिए प्रयोग किया जाता है ).

Nested HTML एलेमेंट्स

HTML elements nested हो सकता है (elements के अन्दर elements को लिखा जा सकता है ).
सभी HTML documents nested HTML elements से मिलकर बना होता है .
इस उदाहरण में चार HTML elements है :

उदाहरण

<!DOCTYPE html>
<html>
<body>

<h1>मेरी पहली हैडिंग </h1>
<p>मेरा पहला पैराग्राफ .</p>

</body>
</html>
खुद से सीखिए »

आइये उदाहरण को समझते है

The <html> element सम्पूर्ण document को डिफाइन करता है .
इसमें start tag <html> और end tag </html> होता है .
element content एक और HTML element है (<body> element).
<html>
<body>

<h1>मेरी पहली हैडिंग </h1>
<p>मेरी पहली पैराग्राफ .</p>

</body>
</html>
<body> element the document body को डिफाइन करता है |.
इसमें start टैग <body> और end टैग </body> होता है .
element content में दो और HTML elements है (<h1> और <p>).
<body>

<h1>मेरी पहली हैडिंग </h1>
<p>मेरी पहली पैराग्राफ .</p>

</body>
<h1> element headingहैडिंग को डिफाइन करता है .
start टैग <h1> और end टैग </h1>.
element content है : मेरी पहली हैडिंग .
<h1>मेरी पहली हैडिंग </h1>
<p> element paragraph को डिफाइन करता है .
start टैग <p> और end टैग </p> होता है .
यह element content है : मेरी पहली पैराग्राफ .
<p>मेरी पहली पैराग्राफ .</p>

END टैग को कभी नही भूलना है |

कुछ HTML elements सही से दिखते है , यह तक कि यदि आप END टैग लगाना भूल भी जाते है :

उदाहरण

<html>
<body>

<p>यह पैराग्राफ है
<p>यह पैराग्राफ है

</body>
</html>
खुद से सीखिए »
ऊपर दिया गया उदाहरण सभी ब्राउज़र में काम करता है , क्योकि closing टैग को optional माना जाता है .
लेकिन ऐसा आप कभी करने का प्रयास न करिए न कभी इस पर विश्वाश करिए , हो सकता है यह unexpecte परिणाम और/या errors दे दे | यदि आप end टैग भूल जाएँ तो .

Empty HTML एलेमेंट्स

बिना किसी कंटेंट वाले HTML elements को empty elements कहा जाता है।
बिना क्लोजिंग टैग के<br> एक empty element है ( <br> टैग line break को डिफाइन करता है ):

उदाहरण

<p>यह एक <br> paragraph है line break के साथ .</p>
खुद से सीखिए »
Empty elements को opening tag में ही "closed" कर सकते है इस प्रकार से : <br />.
HTML5 में empty elements को closed करना आवश्यक नही होता है . लेकिन यदि आप stricter validation चाहते हो , या आप चाहते है की आपका document XML parsers द्वारा readable हो , तो आपको सभी HTML elements को properly क्लोज करना चाहिए .

Use Lowercase टैग्स

HTML टैग case sensitive नही होते है : <P> और <p> का मतलब एक सामान है .
HTML5 standard में lowercase टैग्स की आवश्यकता नही होती है , लेकिन hihC HTML को lowercase में लिखने के लिए recommends करता है , और stricter document types में lowercase में लिखने के लिए demands होती है जैसे की XHTML.

HTML हेडिंग्स


हेडिग

हेडिंग 1

हेडिंग 2

हेडिंग 3

हेडिंग 4

हेडिंग 5
हेडिंग 6
खुद से सीखे »

HTML हेडिंग्स

हेडिंग्स को डिफाइन किया जाता है <h1> से <h6> टैग्स के द्वारा .
<h1> सबसे ज्यादा महत्वपूर्ण हेडिंग को डिफाइन करने के लिए किया जाता है . <h6> least important हेडिंग को डिफाइन करता है .

उदाहरण

<h1>हेडिंग 1</h1>
<h2>हेडिंग 2</h2>
<h3>हेडिंग 3</h3>
<h4>हेडिंग 4</h4>
<h5>हेडिंग 5</h5>
<h6>हेडिंग 6</h6>
खुद से सीखें »
नोट : Browsers अपने आप हेडिंग के आगे पीछे कुछ वाइट स्पेस(मार्जिन) दे देता है .

हेडिंग्स महत्वपूर्ण है

आपके वेब पेजेज के स्ट्रक्चर और कंटेंट को इंडेक्स करने के लिए Search engines हेडिंग्स का प्रयोग करते है .
उपयोगकर्ता आपके पेजेज को इसकी हेडिंग्स द्वारा स्किम(An act of reading something quickly or superficially) करते है |. Document के स्ट्रक्चर को दिखाने के लिए यह महत्वापूर्ण है कि हेडिंग्स का प्रयोग किया जाये |
<h1> हेडिंग्स को main हेडिंग्स के रूप में प्रयोग करना चाहिए , इसके बाद <h2> हेडिंग्स, less important के रूप में <h3>,इसी प्रकार क्रमशः h6 तक .
नोट : HTML हेडिंग्स को केवल हेडिंग्स देने के लिए प्रयोग करिए . ना कि हेडिंग्स का प्रयोग अक्षर ,शब्द या वाक्य को BIG या bold करने के लिए .

Bigger हेडिंग्स

प्रत्येक HTML हेडिंग कि default size होती है . हलांकि , आप कोई भी साइज़ specify कर सकते है किसी भी हेडिंग की | style attribute के द्वारा , CSS का प्रयोग करते हुए font-size property:

उदाहरण

<h1 style="font-size:60px;">हेडिंग 1</h1>
खुद से सीखें »

HTML हॉरिजॉन्टल रूल्स (क्षैतिज नियम )

<hr> टैग defines a thematic break , HTML page में डिफाइन करता है , और यह ज्यादातर हमेशा horizontal rule के रूप में दिखाया जाता है |.
The <hr> element का प्रयोग HTML page में कंटेंट को अलग( या किसी बदलाव को डिफाइन करने के लिए) करने के लिए किया जाता है :

उदाहरण

<h1>This is हेडिंग 1</h1>
<p>यह कुछ टेक्स्ट है .</p>
<hr>
<h2>यहाँ है हेडिंग 2</h2>
<p>यह कुछ अन्य टेक्स्ट है .</p>
<hr>
खुद से सीखें »

HTML <head> Element

HTML <head> element का HTML हेडिंग्स से कोई लेना देना नही है .
<head> element metadata के लिए container का कार्य करता है . HTML metadata , HTML document के बारे में data है . Metadata प्रदर्शित नही किया जाता है .
<head> element को <html> टैग और <body> टैग के लगाया जाता है :

उदाहरण

<!DOCTYPE html>
<html>

<head>
  <title>मेरा पहला HTML </title>
  <meta charset="UTF-8">
</head>

<body>
.
.
.
खुद से सीखें »
नोट : Metadata आमतौर पर डॉक्यूमेंट का title, character set, styles, links, scripts, और अन्य meta information को डिफाइन करता है .

HTML Source को कैसे देखे ?

क्या आपने कभी ऐसा को वेब पेज देखा है और आप यह आश्चर्य से यह कहने को मजबूर हुए हो "अरे ! उन्होंने ऐसा कैसे किया ?"

आइये देखते है कैसे :

HTML page में Right-click कीजिये और "View Page Source" को सेलेक्ट कीजिये (क्रोम में ) या "View Source" (इन्टरनेट एक्स्प्लोरर में ), या इसी प्रकार अन्य ब्राउज़र में . यह एक window खोलेगा जिसमे उस पेज के HTML सोर्स कोड होंगे

एक HTML Element की जाँच करना :

Element में Right-click करने (या खाली स्थान में ), और "Inspect" चुने या "Inspect Element" ये देखेने के लिए लिए कि किस एलिमेंट से क्या बना है (आप HTML और CSS दोनों को देख सकते है ). आप HTML या CSS को खुलने वाले Elements या Styles panel में on-the-fly एडिट भी कर सकते है .

HTML टैग Reference

HTMLINHINDI' टैग reference इन टैग्स और उनके attributes के बारे मे अतिरिक्त जानकारी दे रहा है .
आप HTML टैग्स और attributes के बारें में ज्यादा जानकारी इस टुटोरिअल के आने वाले चैप्टर में पाने वाले है .
टैगडिस्क्रिप्शन
<html>HTML document के रूट को डिफाइन करता है
<body>Document के body को डिफाइन करता है
<head>यह सभी हेड एलेमेंट्स के लिए एक container होता है (title, scripts, styles, meta information, और अन्य )
<h1> to <h6>HTML हेडिंग्स को डिफाइन करता है
<hr>कंटेंट में thematic change को Defines करता है

 HTML पैराग्राफ्स 


अभी हमने उदहारण नही दिए सभी के लिए लेकिन जल्द अपडेट कर देंगे


HTML पैराग्राफ्स

HTML का <p> एलिमेंट पैराग्राफ को डिफाइन करता है :

उदाहारण

<p>यह पैराग्राफ है .</p>
<p>यह दूसरा पैराग्राफ है .</p>
स्वयं से सीखें »
कृपया ध्यान दे!: Browsers अपने आप कुछ वाइट स्पेस(या कुछ मार्जिन ) जोड़ देता है पैराग्राफ के पहले और बाद में .

HTML डिस्प्ले

आप sure नही हो सकते है की HTML कैसे डिस्प्ले होगा .
बड़ी या छोटी स्क्रीन्स और विन्डो को छोटा या बड़ा या रीसाइज़ करने पर विंडो अलग अलग परिणाम क्रिएट करेगा
HTML के साथ, आप अपने HTML कोड में अतिरिक्त स्थान या अतिरिक्त लाइनें जोड़कर आउटपुट नहीं बदल सकते इसलिए फार्मेटिंग HTML एलिमेंट के द्वारा इसी एप से सीखिए ।
जब पेज डिस्प्ले किया जायेगा तब ब्राउज़र स्वयं से एक्स्ट्रा स्पेस या लाइन को निकाल देगा इसलिए एक्स्ट्रा स्पेस देकर आप टेक्स्ट की फार्मेटिंग करने की कोशिश न कीजिये बस इस एप में विजित करते रहिये फार्मेटिंग खुद सीख जायेंगे :

उदाहारण

<p>
देखिये यहाँ
पर मैं कई लाइनों में
टेक्स्ट को लिख रहा हूँ ,
लेकिन इसका मतलब
यह नही है इसी फोरमैट में आउटपुट देखेगा
ब्राउज़र इसको इगनोरे कर देगा और केवल
एक लाइन में पूरा आउटपुट देखायेगा इसलिए फोर्मेटिंग सीखिए इसी एप से .
</p>

<p>
इस पैराग्राफ
में बीच में          कई स्पेस दिए
गये है          लेकिन ,
यह स्पेसेस         ब्राउज़र
अनदेखा कर देगा .
</p>
स्वयं से सीखें »

क्लोजिंग टैग लगाना न भूलें

कई ब्राउज़र HTML को कोरेक्ट्ली प्रदर्शित करते हैं यहाँ तक कि यदि आप क्लोजिंग टैग लगाना भूल भी गये होतो | :

उदाहारण

<p>यह पैराग्राफ है .
<p>यह दूसरा पैराग्राफ है .
स्वयं से सीखें »
ऊपर दिया गया उदाहारण ज्यादातर ब्राउज़र में वर्क करेगा , पर इस पर भरोशा मत करिए .
ध्यान दीजिये : क्लोजिंग टैग को छोड़ने से उस टैग के विपरीत परिणाम या त्रुटियाँ उत्पन्न हो सकती हा

HTML लाइन ब्रेक्स

HTML <br> एलिमेंट line break को डिफाइन करता है .
आप <br> टैग का प्रयोग कर सकते है यदि आप लाइन ब्रेक (एक नई लाइन ) देना चाहते है बिना नया पैराग्राफ प्रारंभ किये ही :

उदाहारण

<p>यह लाइन ब्रेक के साथ एक <br>a पैराग्राफ<br>है .</p>
स्वयं से सीखें »
<br> टैग एक एम्प्टी टैग(बिना क्लोजिंग टैग के) है , इसका मतलब है कि इस टैग में क्लोजिंग टैग नही होता है .

HTML में कविता लिखने की समस्या

यह पूरी कविता एक सिंगल लाइन में दिखेगी :

उदाहारण

<p>
 हे प्रभू ज्ञान दाता ,

  ज्ञान हमको दीजिये ,

  शीघ्र सारे दुर्गुणों से दूर हमको कीजिये,

  हम सदाचारी बने .....
</p>
स्वयं से सीखें »

HTML का <pre> एलिमेंट

HTML का <pre> एलिमेंट preformatted text को डिफाइन करता है .
<pre> एलिमेंट के अन्दर लिखे टेक्स्ट fixed-width फॉण्ट में दिखाई देते है (आमतौर पर Courier फॉण्ट में ), और यह लाइन ब्रेक्स और स्पेसेस जैसे दिए जाते है वैसे ही आउटपुट में दिखता है :
तब तो <pre> ने फोर्मेटिंग की पूरी समस्या ही ख़त्म कर दी नही भाई इतनी ही फोर्मेटिंग थोड़े न होती है :

उदाहारण

<pre>
  हे प्रभू ज्ञान दाता .

  ज्ञान हमको दीजिये .

  शीघ्र सारे दुर्गुणों से दूर हमको कीजिये,

  हम सदाचारी बने .....,
</pre>
स्वयं से सीखें »

HTML टैग रिफरेन्स

HTMLINHINDI टैग रिफरेन्स HTML एलिमेंट और उनके एट्रीब्यूट के बारे में आपको अतिरित जानकारी यहाँ दे रहा है
Tagवर्णन
<p>पैराग्राफ को डिफाइन करता है
<br>एक सिंगल लाइन ब्रेक डालने के लिए
<pre>पहले से फ़ॉर्मेट text को डिफाइन करता है
सभी उपलब्ध html टैग्स की पूरी सूची के लिए , क्लिक करें HTML टैग Reference.