हेल्लो दोस्तों! इस पोस्ट में आपको HTML Notes in Hindi – एचटीएमएल के सभी नोट्स हिंदी में मिलेंगे. नीचे आपको सभी topics दिए गये है

HTML Notes in Hindi

HTML का फुल फॉर्म

H – Hyper
T – Text
M – Markup
L – Language

परिचय

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

HTML के तत्व

एक HTML तत्व किसी टेक्स्ट डॉक्युमेंट की संरचना का मूल-भूत घटक होता है इसके कुछ उदाहरण Head, Table, Paragraph तथा List है इन तत्वों में टेक्स्ट, अन्य एलिमेंट अथवा दोनों हो सकते हैं |

Document Layout

किसी HTML फाइल में कम से कम चार प्रकार के टैग शामिल होना आवश्यक है | ये टैग इस प्रकार है :

HTML
HEAD
TITLE
BODY

HTML Tag

HTML टैग आपके ब्राउज़र को यह बताता है कि फाइल में HTML कूटबद्ध सूचनाएँ संग्रहित है | फाइल एक्स्टेंशन .html भी या सूचित करता है कि यह एक HTML डॉक्यूमेंट है | यह <HTML> और </HTML> के जोड़े में होता है |

प्रारूप:

Head Tag

हेड टैग शीर्षक (Title) को संग्रहित रखने वाले आपके HTML कोडेड दस्तावेज के पहले हिस्से की पहचान करता है | इसमें शीर्षक टैग संग्रहित रहता है | यह भी ओपनिंग और क्लोजिंग टैग्स <Head> और </Head> के साथ आता है |

प्रारूप:

Title Tag

टाइटल टैग आपके दस्तावेज को संग्रहित रखता है और ग्लोबल सन्दर्भ में इसके Contents की पहचान करता है | टाइटल ब्राउज़र विण्डो के शीर्ष पर टाइटल बार में दिखाया जाता है, लेकिन विण्डो के अन्दर नहीं |

प्रारूप:

<html>
<head>
<title>Describe your Title</title>
</head>
</html>

Body Tag

आपके HTML दस्तावेज का दूसरा और सबसे बड़ा हिस्सा बॉडी है, जो आपके दस्तावेज के Contents को संग्रहित रखता है निचे वर्णित किए गए टैग्स आपके HTML दस्तावेज के अन्दर प्रयोग किए जाते है |

प्रारूप:

<html>
<head>
<title>Describe your Title</title>
</head>
<body>
——
</body>
</html>

Heading Tag

हम अपने वेब पेज में हेडिंग का उपयोग कर सकते हैं इससे वेब पेज को एक सुव्यवस्थित तरीके से संगठित किया जा सकता है। HTML में हेडिंग के छ: स्तर हैं जो 1 से लेकर 6 तक है जिसमें 1 सबसे बड़ा और 6 सबसे छोटा है।

प्रारूप:

<html>
<head>
<title>Describe your Title</title>
</head>
<body>
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>
</body>
</html>

Paragraph Tag

पैराग्राफ में एक या एक से ज्यादा वाक्य हो सकते हैं जिसमें संकेत चिन्ह और स्पेस शामिल होते हैं इसे <P> से प्रदर्शित करते हैं | यह कन्टेनर टैग है, परन्तु इसे केवल स्टार्ट टैग के द्वारा प्रदर्शित किया जाता है, एंड टैग का उपयोग इसे दर्शाने में नहीं किया जाता है | अर्थात किसी पैराग्राफ को प्रदर्शित करने के लिए <P> लिखना पड़ता है व ख़त्म होने के बाद <P> लिखना आवश्यक नही है |

प्रारूप:

<html>
<head>
<title>Describe your Title</title>
</head>
<body>
<p>
HTML stands for Hyper Text Markup Language.
</body>
</html>

Line Break Tag

इस टैग का प्रयोग हम पैराग्राफ में लाइन बदलने के लिए करते हैं इसको <BR> से निरूपित करते हैं इसका प्रयोग <P> टैग के साथ होता है इसे हम छोटी लाइन जैसे पता इत्यादि लिखने में प्रयोग कर सकते हैं।

प्रारूप:

<html>
<head>
<title>Describe your Title</title>
<head>
<body>
<p>
Drishti Computer Institute<br>
Main Road Near SBI, Takhatpur<br>
</body>
</html>

List Tag

HTML कई प्रकार के लिस्ट रूप को सपोर्ट करता है | इनमें Numbered List, Unnumbered List तथा Definition List शामिल है |

Numbered List

Numbered List को Ordered List भी कहते हैं जो कि <OL> टैग का पूर्ण रूप है <OL> टैग का प्रयोग <LI> टैग के साथ करते हैं <LI> का पूर्ण रूप List Item होता है।

<ol>
<li>Computer
<li>Modem
<li>Internet
<li>Telephone
</ol>

Unnumbered List

Unnumbered List को Unordered List भी कहते हैं |

<ul>
<li>Computer
<li>Modem
<li>Internet
<li>Telephone
</ul>

Definition List

Definition List को <DL> के द्वारा निरुपित किया जाता है | यह एक कन्टेनर टैग है तथा इसमे दो और टैग <DT> तथा <DD> का प्रयोग होता है | <DT> का पूर्ण रूप Definition Term तथा <DD> का पूर्ण रूप Definition Description है |

<dl>
<dt>Hardware
<dd>Examples of hardware are CPU.
</dl>

Type Attribute

Type Attribute को <OL> के साथ प्रयोग किया जाता है | इसके माध्यम से Ordered List को प्रदर्शित करने के तरीके को नियंत्रित किया जा सकता है |

Type A, a, I, i

प्रारूप:

<html>
<head>
<title>Describe your Title</title>
</head>
<body>
<ol type=”A”>
<li>Computer
<li>Modem
<li>Internet
<li>Telephone
</ol>
</body>
</html>

Preformatted Text

PRE टैग का प्रयोग एक मोनोस्पेस, फिक्सड-पिच फॉन्ट में “pre-formatted” टेक्स्ट के एक ब्लॉक को दिखाने के लिए होता है | आप PRE टैग का प्रयोग टेक्स्ट के एक ब्लॉक को “as it is” (जैसा यह हो वैसा ही) दिखाने के लिए करते है |

प्रारूप:

<html>
<head>
<title>Describe your Title</title>
</head>
<body>
<pre>
                     Salary Paid for Year 2023
                     JAN      FEB       MAR     TOTAL
HEMANT     500      500      400      1400
VIKAS          400      400      500      1300
RAJA           600      500      800      1900
RITESH        400      300       500      1200
</pre>
</body>
</html>

Using Links

HTML की प्रमुख शक्ति टेक्स्ट अथवा इमेज को किसी अन्य डॉक्यूमेंट अथवा एक डॉक्यूमेंट अथवा एक डॉक्यूमेंट के किसी भाग से जोड़ने की इसकी क्षमता से मिलती है |

<a href=”link”>YouTube</a>

A=Anchor

Mail To

आमतौर पर वेबसाइट बनाने के बाद उससे सम्बन्धित प्रश्न या किसी प्रकार की समस्या का निदान प्राप्त करने के लिए ई-मेल लिंक बनाई जाती है | प्रयोगकर्ता उस लिंक को क्लिक कर अपने इलेक्ट्रॉनिक सन्देश भेज सकते है |

<a href=”mailto:emailinfo@host”>Contact</a>

Inline Image

अधिकतर ब्राउज़र इनलाइन इमेज प्रदर्शित करने की क्षमता रखते है, जो GIF, XBM या JPEG फॉर्मेट में होती है |

प्रारूप:

<html>
<head>
<title>Describe your Title</title>
</head>
<body>
<IMG SRC=”Path\Name.Extention”>
</body>
</html>

Specifying size of inline Images

यदि हम इनलाइन इमेज की ऊंचाई व चौड़ाई निर्धारित न करें, तो किसी इमेज को वेब पेज पर डाउनलोड करते समय हमें तब तक इंतजार करना होगा, जब तक की इमेज डाउनलोड न हो जाए | इसलिए हम IMG टैग के साथ Height व Width एट्रिब्यूट का प्रयोग करके इमेज का आकार निश्चित कर देते है, जिससे ब्राउज़र उतनी जगह को छोड़कर बाकी पेज को दिखा देता है |

प्रारूप:

<html>
<head>
<title>Describe your Title</title>
</head>
<body>
<IMG SRC=”Path\Name.Extention” height=”5” width=”5”>
</body>
</html>

Links to Images

हम किसी हाइपर टेक्स्ट लिंक में टेक्स्ट के साथ साथ इनलाइन इमेज को भी जोड़ सकते है | इस पर क्लिक करते ही ये कार्य करने लगता है |

प्रारूप:

<html>
<head>
<title>Describe your Title</title>
</head>
<body>
<a href=”link”>
<IMG SRC=”Path\Name.Extention”>
</a>
</body>
</html>

Horizontal Rules

HR टैग एक स्टैंड एलोन टैग है, जो की हमें वेब पेज पर क्षैतिज रूलर को जोड़ने में सहायता करता है |

प्रारूप:

<html>
<head>
<title>Describe your Title</title>
</head>
<body>
<p> This is a Normal Rule
<hr>
<p> This is a 10-pixel thick horizontal
<hr size=”10”>
</body>
</html>

Character Formatting

हम पैराग्राफ में या पूरा पेज लिखते समय किसी विशेष शब्द, वाक्यांश या वाक्य पर जोर देने के लिए कुछ विशेष प्रकार के Formatting एट्रिब्यूट का प्रयोग करते है | इनमे से कुछ निम्नलिखित है –

<B>…</B>	इस टैग का प्रयोग टेक्स्ट को बोल्ड करने के लिए करते है
<U>…</U>	इस टैग का प्रयोग टेक्स्ट को अंडरलाइन करने के लिए करते है
<I>…</I>	इस टैग का प्रयोग टेक्स्ट को तिरछा (Italic) करने के लिए करते है \|
<SUB>…</SUB>	इस टैग का प्रयोग टेक्स्ट को सबस्क्रिप्ट के रूप में लिखने के लिए करते है \|
<SUP>…</SUP>	इस टैग का प्रयोग टेक्स्ट को सुपरस्क्रिप्ट के रूप में लिखने के लिए करते है \|
<STRIKE>…</STRIKE>	इस टैग का प्रयोग टेक्स्ट के बिच के कटा हुआ दर्शाने के लिए करते है \|

Text Alignment

हम Align एट्रिब्यूट का प्रयोग कर Paragraph, Heading व अन्य टेक्स्ट को अलाइन कर सकते है |

हम टेक्स्ट तो तीन तरह से अलाइन कर सकते है :

केंद्र में (Center)
दायीं ओर (Right)
बायीं ओर (Left)

प्रारूप:

<html>
<head>
<title>Describe your Title</title>
</head>
<body>
<p align=”center”>I am in the Center
<p align=” Left”>I am in the Left
<p align=” Right”>I am in the Right
</body>
</html>

Specifying the size of Fonts

<Font> टैग ke साथ Size एट्रिब्यूट की सहायता से फॉन्ट का आकार निर्धारित किया जा सकता है या बदला जा सकता है | सामान्यतः फॉन्ट साइज़ सात तरह का होता है | इनको 1 से ७ तक का नंबर दिया जाता है | इन्हें हम Size एट्रिब्यूट की सहायता से निश्चित कर सकते है | 1 सबसे छोटा और ७ सबसे बड़ा फॉन्ट का आकार होता है |

प्रारूप:

<html>
<head>
<title>Describe your Title</title>
</head>
<body>
<p>
<font size=”1”>Drishti</font>
<font size=”2”>Drishti</font>
<font size=”3”>Drishti</font>
<font size=”4”>Drishti</font>
<font size=”5”>Drishti</font>
<font size=”6”>Drishti</font>
<font size=”7”>Drishti</font>
</body>
</html>

Changing the FONT COLOR

फॉन्ट का रंग बदलने के लिए Font टैग के साथ COLOR एट्रिब्यूट का प्रयोग करते है | हम किसी फॉन्ट को आकर्षक दिखाने के लिए कम से कम १6 रंगों का प्रयोग कर सकते है | ये रंग निम्नलिखित है :

Black
White
Aqua
Blue
Fuchsia
Grey
Green
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Yellow
Steal

Setting the Color of Body Background, Text and Link

हम बॉडी टैग के निम्न एट्रिब्यूट की सहायता से बैकग्राउंड, टेक्स्ट और लिंक का रंग बदल सकते है | ये एट्रिब्यूट इस प्रकार है :

BGCOLOR – बैकग्राउंड का रंग निश्चित करता है |
TEXT – टेक्स्ट का रंग निश्चित करता है |
LINK – लिंक का रंग निश्चित करता है |

Using a Background Image

ग्राफ़िक्स फाइलों को बैकग्राउंड इमेज में प्रयोग किया जाता है | इन फाइलों का Extension GIF या JPEG होता है | बॉडी टैग का बैकग्राउंड एट्रिब्यूट, बैकग्राउंड इमेज को प्रदर्शित करने के काम भी आता है |

Table Tag

टेबल टैग की आवश्यकता विशेषतः ब्राउज़र को बताने के लिए होती है कि वह क्या करें | टेबल टैग भी दुसरे टैग की तरह ही लिखा जाता है |

Adding Border to a Table

बॉर्डर जोड़ने के लिए Table टैग के अन्दर border शब्द का प्रयोग करते है

Adding Cells to a Table

आप तालिका में सेल इच्छानुसार जोड़ सकते है | इसके सेल के अनुसार <TD> टैग को जोड़ें |

प्रारूप:

<table border=”5”>
<td>This is first cell</td>
<td>This is first cell</td>
</table>

Adding Rows to a Table

इसी प्रकार अब तालिका में पंक्ति जोड़ने की आवश्यकता पड़ेगी, इसके लिए <TR> टैग प्रयोग होता है | TR का पूर्ण रूप Table Row है |

प्रारूप:

<table border=”5”>
<td>This is first cell</td>
<tr>
<td>This is first cell</td>
</table>

Adding Spaces to a Table

सेल के मध्य तथा तालिका के चारो ओर स्पेस देने के लिए दो महत्वपूर्ण कमाण्ड निम्नलिखित है |

Cellspacing=” ”

इस कमाण्ड का प्रयोग प्रत्येक सेल के चारो ओर जोड़ने के लिए होता है | इच्छानुसार स्पेस देने के लिए डबल कोटेशन चिन्ह में वांछित संख्या दें |

Cellpadding=” ”

इस कमाण्ड का प्रयोग प्रत्येक सेल के अन्दर रिक्त स्थान डालने के लिए करते है | इसके लिए डबल कोटेशन चिन्ह के अन्दर इच्छानुसार संख्या दें |

<table border=”2” cellspacing=”12”

Determining the Table Size

तालिका बनाते समय कभी कभी हमें आवश्यकता होती है कि इसका आकार निश्चित किया जाये इसके लिए हम निम्नलिखित प्रारूप का प्रयोग करते है – width=” ”

यह कमाण्ड भी <table> टैग के साथ ही जोड़कर प्रयोग की जाती है | इसके लिए आप इच्छानुसार डबल कोटेशन चिन्ह के अन्दर वांछित संख्या जोड़े |

Aligning the contents of the table

तालिका की विषय वस्तु को दायीं ओर से, बायीं ओर या केंद्र में सजाने के लिए Align=” ” कमाण्ड का प्रयोग होता है | इस कमाण्ड को हम <TD> टैग में जोड़ते है | इस कमाण्ड को निम्नलिखित तीन रूप में प्रयोग कर सकते है –

Align=”left”
Align=”right”
Align=”center”

उपरोक्त कमाण्ड के अतिरिक्त भी कुछ कमाण्ड है जो तालिका के विषय वस्तु को उदग्र दिशा (vertically) में भी अलाइन कर सकते है | इसके लिए हम <TD> टैग में ही valign=” ” कमाण्ड जोड़ सकते है | इन कमाण्ड की संख्या तीन है, जो निम्नलिखित है –

valign=”top”
valign=”middle”
valign=”bottom”

प्रारूप:

<table width=”550” height=”500” border=”2” cellspacing=”7”>
<td align=”center” valign=”top”>
The cell is at Top
</td>
<td align=”center” valign=”middle”>
This cell is in the middle
</td>
<td align=”center” valign=”bottom”>
The cell is at Bottom
</td>
</table>

Spanning Rows and Columns

आप दो या दो से अधिक सेलों को एक पंक्ति या कॉलम में मिला कर इसका आकार बड़ा कर सकते है | इसका प्रयोग विशेषतः पंक्ति या कॉलम का शीर्षक लिखने के लिए किया जाता है |

rowspan=” ”

उर्ध्वाधार (vertical) पंक्तियों की संख्या परिभाषित करता है, जसको मिलाकर एक पंक्ति बनाना है | इसके लिए अपनी संख्या को डबल कोटेशन चिन्ह के अन्दर लिखें |

प्रारूप:

<table border=”2″>
<td>Drishti1</td>
<td rowspan=”2″>Drishti</td>
<tr>
<td>Drishti2</td>
</table>

colspan=” ”

क्षैतिज (horizontal) कॉलमो को परिभाषित करत है, जिसको मिलाकर एक सेल का निर्माण करन है |

प्रारूप :

<table border=”2″>
<th colspan=”2″>Courses</th>
<tr>
<th>S.No.</th>
<th>Course</th>
<tr>
<td>1</td>
<td>DCA</td>
</table>

Specifying Background colour of the table

आप पुरे तालिका, प्रत्येक पंक्ति या प्रत्येक सेल का बैकग्राउंड का रंग बदल सकते है | बैकग्राउंड का रंग बदलने के लिए इस कमाण्ड का प्रयोग करें –

Creating Tables within Tables

कभी कभी ऐसी आवश्यकता होती है की एक ही लाइन पर दो तालिका बन सकते है | इसके लिए बड़ी तालिका के अंदर एक तालिका, जो उससे आकार में छोटी हो, बना सकते है |

प्रारूप:

<table width=”400” border=”6”>
<td align=”center”>
<table width=”300” border=”2”>
<td align=”center”>
This is a table within a bigger table
</td>
</table>
</td>
</table>

Using Frames

वेबसाइट पर फ्रेम का प्रयोग शुरू करने से पहले यह जान लेना आवश्यक है कि फ्रेम कैसे कार्य करता है | फ्रेम पर आधारित पेज वस्तुतः दो या उससे अधिक भागों में पेज को बांटता है तथा प्रत्येक भाग का अपना HTML डॉक्यूमेंट होता है |

प्रारूप:

<html>
<head>
<title>Frame</title>
</head>
<frameset cols=”50%, 50%”>
<frame src=”frame1.html”>
<frame src=”frame2.html”>
</frameset>
</html>

Adding Columns Horizontally And Vertically

यदि आप चाहते है कि स्क्रीन दो कॉलम में हो तथा दूसरे कॉलम में दो फ्रेम क्षैतिज रूप में जुड़े, तो इसके लिए cols के स्थान पर दूसरे कॉलम में row कमाण्ड का प्रयोग करते है |

प्रारूप:

<html>
<head>
<title>Drishti</title>
</head>
<frameset cols=”50%,50%”>
<frame src=”frame1.html”>
<frameset rows=”50%,50%”>
<frame src=”frame2.html”>
<frame src=”frame3.html”>
</frameset>
</html>

HTML Editor

HTML Notes in Hindi

HTML Notes in Hindi

प्रारूप:

प्रारूप:

प्रारूप:

प्रारूप:

प्रारूप:

प्रारूप:

प्रारूप:

प्रारूप:

प्रारूप:

प्रारूप:

प्रारूप:

प्रारूप:

प्रारूप:

प्रारूप:

प्रारूप:

प्रारूप:

प्रारूप:

प्रारूप :

प्रारूप:

प्रारूप:

प्रारूप:

Below Post Ad

Contact Form

Contact form