HTML Notes in Hindi
Table of Contents
HTML NOTES
HTML Notes in Hindi:- वेब पेजों को विकसित करने के लिए इस्तेमाल की जाने वाली भाषा को हाइपरटेक्स्ट मार्कअप लैंग्वेज (HTML)
कहा जाता है। वेब पेजों को HTML दस्तावेज़ भी कहा जाता है। HTML को HTML दस्तावेज़ में टैग के रूप में निर्दिष्ट किया
जाता है। HTML Tags:- सभी HTML टैग एक ओपन एंगल ब्रैकेट (<) से शुरू होते हैं और एक क्लोज एंगल ब्रैकेट (>)
के साथ खत्म होते हैं।
HTML टैग दो प्रकार के हो सकते हैं।
- Paired Tags Ex: <B> ——- </B>
- Singular tags Ex: <Br>
Commonly used HTML document
Page Header Area
1. <Head>:- HTML टैग्स हेड सेक्शन के प्रारंभ और अंत को इंगित (pointed) करने के लिए उपयोग
किए जाते हैं।
<Head >
<Title >—————- </title>
</Head >
2. <Title>:- शीर्षक बार पर संदेश प्रदर्शित करने के लिए उपयोग किए जाने वाले html टैग।
Page Body Area
3. <Body>:-टेक्स्ट की जानकारी के मुख्य भाग के प्रारंभ और अंत को इंगित करने के लिए उपयोग किए जाने वाले टैग। <Body> ……………………………… </Body>
<body> टैग की विशेषता है।
Bgcolor:- डिफ़ॉल्ट पृष्ठभूमि रंग को इस टैग के साथ निर्दिष्ट किए गए किसी भी रंग में बदल सकते है। उपयोगकर्ता नाम या उसके समकक्ष hexadecimal number द्वारा रंग निर्दिष्ट करता है।
जैसे –<body bgcolor=”Red”>
Background: –इस कमांड का इस्तेमाल हमारे डॉक्यूमेंट बैकग्राउंड में पिक्चर चेंज करने के लिए किया जाता है। जैसे:- <Body background = “URL Address”>
Text: – बॉडी टेक्स्ट का रंग बदलने के लिए टेक्स्ट का इस्तेमाल करते है, जैसे कि:- <Body Text= “green”>
Title and footer
Title: - टैग ब्राउज़र विंडो के टाइटल बार में दिखाई देता है।
<Title> ---------------------</title> Footer:-
<address>--------------------</address>
Text Formatting
Paragraph Breaks: – एक blank line बनाने के लिए paragraph Breaks का Use करते है ।
< p>----------------- </p>
Line Break: - यह टैग बस लाइन को तोड़ने के लिए Use किया जाता है।
<Br>
Heading styles:- HTML में 6 Heading विभिन्न स्तरों के शीर्षकों का समर्थन करती है।
उच्चतम स्तर का हेडर प्रारूप
<H1> है और निम्नतम स्तर <H6> है।
<H1>————————- </H1>
…………………………………
<H6>—————————-</H6>
Drawing line:- टैग <HR> रेखाएँ और क्षैतिज नियम बनाते हैं।
<HR> टैग की विशेषताएँ।
ब्राउज़र स्क्रीन पर लाइन संरेखित करें। (Align the line on the browser screen.)
Align = left Align = right Align = center
Size:- नियमों का आकार बदलता है। आकार = "4"
Size =”4”
चौड़ाई-नियम की चौड़ाई निर्धारित करती है। उपलब्ध स्क्रीन चौड़ाई का प्रतिशत।
चौड़ाई = 10% सिंटैक्स: -
<HR Align =”left” width =10% size=4 color =”red”>
<एचआर संरेखित करें = "बाएं" चौड़ाई = 10% आकार = 4 रंग = "लाल">
Marquee Tag:- <marquee>——————</marquee>
Attributes:-
A.Direction
<marquee direction=”left”>———————-</marquee>
<marquee direction=”right”>——————–</marquee>
<marquee direction=”up”>———————–</marquee>
<marquee direction=”down”>——————-</marquee>
ए.दिशा
<मार्की दिशा = "बाएं">--------------------------</मार्की>
<मार्की दिशा = "दाएं">----------------------</मार्की>
<मार्की दिशा ="ऊपर">--------------------------</मार्की>
<मार्की दिशा = "नीचे">-------------------</मार्की>
b. Behavior:-
<marquee behavior=”slide”>——————–</marquee> <marquee behavior=”alternate”>————–</marquee> c. Scrollamount
<marquee scrollamout=”100”>——————</marquee>
d. scrolldelay
<marquee scrolldelay=”100”>——————-</marquee>
Text style:- Text style निम्नलिखित प्रकार के होते हैं
Bold:- बोल्ड फेस स्टाइल में टेक्स्ट प्रदर्शित करें। (Display text in bold face styles. )
<B>——————–</B>
Italics: – टेक्स्ट को इटैलिक में प्रदर्शित करता है। (Displays text in italics. )
<I>——————– </I>
Under lines: – टेक्स्ट को अंडरलाइन्स में डिस्प्ले करता है । (Display text in underlines.)
<U> ——————-</U>
HTML Notes in Hindi
OTHER TEXT EFFECTS
Center:- सेंटर टैग का इस्तेमाल उनके बीच पाए जाने वाले ओवरटाइपिंग को सेंटर करने के लिए
किया जाता है।
जैसे:- टेक्स्ट, लिस्ट, इमेज, नियम, टेबल आदि।
<Center>-----------------</Center >
Controlling Font Size and कलर (फ़ॉन्ट आकार और रंग को नियंत्रित करना)
<Font>-------------------< /Font > All text specified within the tags.
Attributes:-
Face: - - फ़ॉन्ट को निर्दिष्ट फ़ॉन्ट नाम पर सेट करता है।
<font face=”comic sans ms”>
Size: – टेक्स्ट का आकार निर्धारित करें। आकार 1 और 7 के बीच मान ले सकता है। डिफ़ॉल्ट आकार 3 है।
<font size=”4”>
Color:-टेक्स्ट का रंग सेट करता है। <font color=”red”>
List Tag:- सूची के प्रकार:-
Unordered list :-( Bullets)- (बुलेट) - एक अनियंत्रित सूची टैग से शुरू होती है
<UL>और समाप्त होती है </UL>.प्रत्येक सूची आइटम <LI> टैग से शुरू होता है।
विशेषताएँ जिन्हें <LI> के साथ निर्दिष्ट किया जा सकता है।
TYPE: – (प्रकार)
<UL TYPE=fillround> A solid round black bullet. (एक ठोस गोल काली गोली)
<UL TYPE=square> Solid square black bullets. (ठोस वर्गाकार काली गोलियां)
<UL TYPE=circle> circle black bullets. ( गोल काली गोलियां)
Ordered lists (Numbering)- एक आदेशित सूची <OL> टैग से शुरू होती है और </OL> पर समाप्त होती है।
प्रत्येक सूची आइटम <LI> टैग से शुरू होता है। विशेषताएँ जिन्हें <LI> के साथ निर्दिष्ट किया जा सकता है।
Type:-
| <OL Type =”1” > | Will give counting numbers. | |
| <OL Type =”A”> | Will give uppercase letters. | |
| <OL TYPE= “a”> | Will give lowercase letters. | |
| <OL Type = “I”> | Will give uppercase Roman numeral. | |
| <OL TYPE= “i” > | Will give lowercase Roman numeral. |
Start-Alters the numbering sequence. Can be set to only Numeric value.
Value:- क्रम सूची के बीच में नंबरिंग वर्ग बदलें। इसे <LI> के साथ निर्दिष्ट किया जाना है।
Definition lists:- परिभाषा सूची मान <DL> और </DL> टैग के साथ दिखाई देते हैं।
Definition (परिभाषा) सूची में दो भाग होते हैं।
Definition term ——–DT Definition Description ——–DD
Example: –
<DL>
<DT>key board
<DD> An input device
</DL>
Output:-
Key board
An input device
Linking document (Hyperlink):-एक वेब पेज में <a>————–</a>टैग का उपयोग करके लिंक बनाए जाते हैं।
<a>—-</a>टैग के बीच लिखी गई कोई भी चीज हाइपरलिंक बन जाती है।
Syntax:- <a href= “url address”>text name</a>
HTML Notes in Hindi
HTML दस्तावेज़ों में ग्राफ़िक्स जोड़ना (Img टैग)
HTML एचटीएमएल पेज पर स्थिर या एनिमेटेड छवियों को रखने की अनुमति देता है।
इसे टैग का उपयोग करके वेब पेज
में डाला जा सकता है। <आईएमजी>। <IMG> टैग निम्नलिखित विशेषताएँ लेता है।
Align:- छवि के बाद पाठ के संरेखण को नियंत्रित करें।
Align= Top:- शीर्ष छवि के आगे, छवि के आगे लिखे जाने वाले पाठ को इंगित करें।
Align = center :- केंद्र छवि के बगल में केंद्र में लिखी जाने वाली छवि के बाद पाठ को इंगित करें।
Align= बॉटम:- नीचे छवि के बगल में, नीचे दी गई छवि के पाठ को इंगित करें।
Border:- इमेज के चारों ओर लगाने के लिए बॉर्डर का आकार निर्दिष्ट करता है।
Width:- पिक्सेल में छवि की चौड़ाई निर्दिष्ट करता है।
Height:- पिक्सेल में छवि की ऊँचाई निर्दिष्ट करता है।
HSPACE:- छवि के बाएँ और दाएँ स्थान की मात्रा को दर्शाता है।
VSPACE:- इमेज के ऊपर और नीचे स्पेस की मात्रा को दर्शाता है।
Alt: - यदि ब्राउज़र SRC विशेषताओं में निर्दिष्ट छवि को प्रदर्शित करने में असमर्थ है, तो प्रदर्शित होने
वाले पाठ को
इंगित करता है।
<IMG width=440 Height=58 Border=1 HSPACE=20 VSPACE=50 ALT=”any name”
SRC= “URL Address” Align= “center”>
<IMG चौड़ाई = 440 ऊँचाई = 58 बॉर्डर = 1 HSPACE = 20 VSPACE = 50 ALT = "कोई भी नाम"
SRC = "URL पता" संरेखित करें = "केंद्र">
Table Tag:- एक टेबल एक दो आयामी मैट्रिक्स है जिसमें पंक्तियों और स्तंभों का समावेश होता है।
सभी टेबल संबंधित टैग <टेबल>------------------</टेबल>टैग के बीच शामिल होते हैं।
तालिका की प्रत्येक पंक्ति को <Tr>----------</Tr> टैग के बीच वर्णित किया गया है।
तालिका के प्रत्येक स्तंभ को <Td>-----</Td> टैग के बीच वर्णित किया गया है।
तालिका की पंक्तियाँ दो प्रकार की हो सकती हैं।
Header rows:-(शीर्षलेख पंक्तियाँ)
टेबल हेडर पंक्तियों को <TH>----------</TH>टैग का उपयोग करके परिभाषित किया गया है।
टेबल हेडर पंक्तियों की सामग्री स्वचालित रूप से केंद्रित होती है और बोल्डफेस में दिखाई देती है।
डेटा पंक्तियों को <TR>-----------</TR> टैग का उपयोग करके परिभाषित किया जाता है।
<तालिका> टैग में शामिल की जा सकने वाली विशेषताएँ हैं।
Align:- - इसे बाएँ, मध्य और दाएँ सेट किया जा सकता है।
Align= center
Valign:-- यह मान, शीर्ष मध्य, या नीचे स्वीकार करता है।
Valign=”top”
Width:-चौड़ाई को विशिष्ट संख्या में पिक्सेल या उपलब्ध स्क्रीन चौड़ाई के प्रतिशत पर सेट करें।
चौड़ाई Width= 25%
Border:- बॉर्डर के चारों ओर लगाए जाने वाले बॉर्डर को नियंत्रित करता है, जिसकी मोटाई पिक्सेल में
निर्दिष्ट होती है।
Border =4
Cellpadding:यह विशेषता सेल में डेटा और सेल के आसपास के क्षेत्रों के बीच की दूरी को
नियंत्रित करती है।
Cellpadding=30
Cellspacing:-आसन्न कोशिकाओं के बीच की दूरी को नियंत्रित करता है।
Exp- Cellspacing=40
Colspan:- <th> या <td> टैग के अंदर colspan विशेषता। यह विशेषता तब उपयोगी होती है
जब तालिका की एक पंक्ति को निश्चित संख्या में स्तंभों की चौड़ाई की आवश्यकता होती है।
Exp:- colspan =3
Rowspan:- एट्रीब्यूट्स को एक अंकीय मान देकर सेट किया जा सकता है।
Exp:-rowspan=3
Caption tag:-(कैप्शन टैग):- टेबल हेडिंग को कैप्शन टैग कहा जाता है।
<caption>………</caption>टैग का उपयोग करके तालिका को कैप्शन प्रदान किया जा सकता है।
यह जोड़ी टैग <table>----------</table>टैग के अंदर दिखाई देता है।
एट्रीब्यूट एलाइन की मदद से टेबल कैप्शन को टेबल स्ट्रक्चर के ऊपर या नीचे दिखाया जा सकता है।
Align:- यह तालिका के संबंध में कैप्शन रखने को नियंत्रित करता है।
Align =bottom
Align=top
HTML Notes in Hindi
Frames
ब्राउज़र स्क्रीन को अलग लेकिन संबंधित जानकारी दिखाते हुए दो अलग (अद्वितीय) अनुभागों में
विभाजित किया जा सकता है।ब्राउज़र स्क्रीन को दो या अधिक HTML पहचानने योग्य अद्वितीय
क्षेत्र में विभाजित करने वाले HTML टैग
<frameset>----------------</frameset> टैग हैं।
प्रत्येक अद्वितीय क्षेत्र को एक फ्रेम कहा जाता है। स्क्रीन को पंक्तियों या स्तंभों में विभाजित किया जाना है
या नहीं, इस पर निर्भर करते हुए <frameset>----------</frameset>
टैग को निम्नलिखित विशेषताओं में से एक की आवश्यकता होती है।
Rows:-(पंक्तियाँ)
इस विशेषता का उपयोग स्क्रीन को कई पंक्तियों में विभाजित करने के लिए किया जाता है।
इसे प्रत्येक पंक्ति के आवश्यक आकार के आधार पर मूल्य की सूची के बराबर सेट किया जा सकता है।
मान हो सकते हैं
- A number of pixels.
- expressed as percentage of the screen resolution 3. The symbol “*”, which indicates the remaining space.
Cols:-इस विशेषता का उपयोग स्क्रीन को कई स्तंभों में विभाजित करने के लिए किया जाता है। मान हो सकते हैं- कई पिक्सेल।
स्क्रीन रिज़ॉल्यूशन के प्रतिशत के रूप में व्यक्त किया गया। प्रतीक “*”, जो शेष स्थान को इंगित करता है।
Syntax:- <frameset rows=”33%, 33%, 33 %”>
ब्राउज़र स्क्रीन को तीन समान क्षैतिज खंडों में विभाजित करती है ।
<frameset cols=”50%, 50 %”>
क्षैतिज खंड को 2 समान ऊर्ध्वाधर खंडों में विभाजित करें।