सोमवार, 22 दिसंबर 2014

एचटीएमएल सीखें - 9 (HTML Tutorials in Hindi)

एचटीएमएल एट्रीब्यूट्स

एचटीएमएल एलिमेंट्स के गुण को दर्शाने के लिए एट्रीब्यूट्स का प्रयोग किया जाता है तथा इन एट्रीब्यूट्स को एलिमेंट के ओपनिंग टैग के साथ रखा जाता है। एट्रिब्यूट को दो भागों में बाँटा गया है, पहला name दूसरा value।
  • अपने डाकुमेंट में आप जिस प्रकार का गुण दर्शाना चाहते हैं उसे name नाम कहा जाता है। जैसे कि पैराग्राफ <p> एलिमेंट को आप एलाइन करना चाहते हैं तो align एट्रिब्यूट का प्रयोग करना होगा
  • जिस प्रकार से आप एलाइमेंट करना चाहेंगे वह value कहलायेगा। align values हो सकते हैं,: left, center और right.

उदाहरण

<html>
<head>
<title>Align Attribute  का उदाहरण</title>
</head>
<body>
<p align="left">यह left aligned है।</p>
<p align="center">यह center aligned है।</p>
<p align="right">यह right aligned है।</p>
</body>
</html>
उपरोक्त कोड वेब पेज में ऐसे दिखेगा -
यह left aligned है।
यह center aligned है।
यह right aligned है।
प्रस्तुतकर्ता पर 1 टिप्पणी:
लेबल:

शनिवार, 20 दिसंबर 2014

एचटीएमएल सीखें - 8 (HTML Tutorials in Hindi)

एचटीएमएल एलिमेंट

आरम्भ के टैग को एचटीएमएल एलिमेंट (HTML element) कहा जाता है। एलिमेंट के बाद का कांटेंट को क्लोजिंग टैग से बंद किया जाता है, जैसे किः
आरम्भ का टैगकांटेंटअंत का टैग
<p>यह पैराग्राफ कांटेंट है।</p>
<h1>यह हैडिंग कांटेट है।</h1>
<div>यह डिव्हीजन कांटेंट है।</div>
<br />
यहाँ पर <p>....</p> एचटीएमएल एलिमेंट है। इसी प्रकार से <h1>...</h1> भी एक एचटीएमएल एलिमेंट है। कुछ एचटीएमएल एलिमेंट्स ऐसे होते हैं जिन्हें कि बंद नहीं किया जाता, जैसे कि <img.../>, <hr /> and <br /> आदि। इन्हें void elements के नाम से जाना जाता है।
तो हम कह सकते हैं कि एचटीएमएल डाकुमेंट एक एलिमेंट वृक्ष जैसा होता है जिसके एलिमेंट्स यह बताते हैं कि डाकुमेंटे के किस चीज को कैसा दिखना चाहिए।

टैग और एलिमेंट में अन्तर

न्यन कोण कोष्ठक के भीतर लिखा गया कोई भी एचटीएमएल कोड टैग होता है जबकि स्टार्टिंग टैग, कांटेंट और क्लोजिंग टैग, यदि हो तो, का पूरा सेट जैसे कि <p>....</p> एलिमेंट होता है।

नेस्टेड एचटीएमएल एलिमेंट्स (Nested HTML Elements)

किसी एचटीएमएल एलिमेंट के भीतर के दूसरे एलिमेंट्स नेस्टेड एचटीएमएल एलिमेंट्स कहलाते हैं।

उदाहरण

<!DOCTYPE html>
<html>
<head>
<title>नेस्टेड एचटीएमएल एलिमेंट्स का उदाहरण</title>
</head>
<body>
<h1>यह एक <i>इटालिक</i> हेडिंग है।</h1>
<p>यह एक <u>अंडरलाइंड</u> पैराग्राफ है।</p>
</body>
</html>
उपरोक्त कोड वेब पेज में ऐसे दिखेगा -

यह एक इटालिक हेडिंग है।

This is अंडरलाइंड पैराग्राफ है।
प्रस्तुतकर्ता पर कोई टिप्पणी नहीं:
लेबल:

शुक्रवार, 19 दिसंबर 2014

एचटीएमएल सीखें - 7 (HTML Tutorials in Hindi)

विभाजक रेखा (Horizontal Lines)

कांटेंट के दो सेक्शन्स को अलग करने के लिए प्रायः विभाजक रेखा का प्रयोग किया जाता है जिसके लिए एचटीएमएल में <hr> टैग का प्रयोग किया जाता है।

उदाहरण

<html>
<head>
<title>विभाजक रेखा उदाहरण</title>
</head>
<body>
<p>यह पहला सेक्शन है।</p>
<hr />
<p>यह दूसरा सेक्शन है।</p>
</body>
</html>
उपरोक्त कोड वेब पेज में ऐसे दिखेगा -
यह पहला सेक्शन है।
यह दूसरा सेक्शन है।
<hr /> एक ऐसा टैग है जिसे कि बंद नहीं किया जाता।
प्रस्तुतकर्ता पर कोई टिप्पणी नहीं:
लेबल:

एचटीएमएल सीखें - 6 (HTML Tutorials in Hindi)

टेक्स्ट को सेंटर करना

टेक्स्ट को सेंटर करने के लिए <center> टैग का प्रयोग किया जाता है।

उदाहरण

<html>
<head>
<title>सेंटर टेक्स्ट का उदाहरण</title>
</head>
<body>
<p>यह टेक्स्ट सेंटर में नहीं है।</p>
<center>
<p>यह टेक्स्ट सेंटर में है।</p>
</center>
</body>
</html>
उपरोक्त कोड वेब पेज में ऐसे दिखेगा -
यह टेक्स्ट सेंटर में नहीं है।
यह टेक्स्ट सेंटर में है।
प्रस्तुतकर्ता पर कोई टिप्पणी नहीं:
लेबल: ,

गुरुवार, 18 दिसंबर 2014

एचटीएमएल सीखें - 5 (HTML Tutorials in Hindi)

पैराग्राफ और लाइन ब्रेक (Paragraph & Line break tags)

पैराग्राफ (Paragraph Tag)

अपने टैक्स्ट को अलग अलग पैराग्राफ्स में व्यक्त करने के लिए <p> टैग का प्रयोग किया जाता है। प्रत्येक पैराग्राफ <p> टैग से शुरू होकर </p> टैग द्वारा बंद होता है।

उदाहरण

<html>
<head>
<title>पैराग्राफ का उदाहरण</title>
</head>
<body>
<p>यह पहला पैराग्राफ है।</p>
<p>यह दूसरा पैराग्राफ है।</p>
<p>और यह तीसरा पैराग्राफ है।</p>
</body>
</html>
उपरोक्त कोड वेब पेज में ऐसे दिखेगा -
यह पहला पैराग्राफ है।
यह दूसरा पैराग्राफ है।
और यह तीसरा पैराग्राफ है।

लाइन ब्रेक (Line Break Tag)

बगैर पैराग्राफ बदले यदि किसी टेक्स्ट को अगली लाइन से शुरू करना होता है तो <br /> टैग का प्रयोग किया जाता है।

उदाहरण

<html>
<head>
<title>लाइन ब्रेक का उदाहरण</title>
</head>
<body>
<p>प्रिय मित्रों!<br />
इस ब्लॉग में आकर आपने मुझे बहुत सहयोग दिया है।<br />
धन्यवाद!<br />
जी.के. अवधिया</p>
</body>
</html>
उपरोक्त कोड वेब पेज में ऐसे दिखेगा -
प्रिय मित्रों!
इस ब्लॉग में आकर आपने मुझे बहुत सहयोग दिया है।
धन्यवाद!
जी.के. अवधिया
प्रस्तुतकर्ता पर कोई टिप्पणी नहीं:
लेबल:

सोमवार, 15 दिसंबर 2014

एचटीएमएल सीखें - 4 (HTML Tutorials in Hindi)

अपने वेब पेज पर बैकग्राउंड जोड़ना

प्रत्येक वेब पेज को मनमोहक दिखना चाहिये, और वेबपेज को मनमोहक बनाता है उसका बैकग्राउंड। यह बैकग्राउंड कलर या इमेज कुछ भी हो सकता है। जब आप कोई वेब पेज बनाते हैं तो उसका डिफॉल्ट बैकग्राउंड ग्रे या सफेद कलर होता है। आइये जानें कि अपने वेब पेज में बैकग्राउंड कलर कैसे जोड़ा जाये?

वेब पेज में बैकग्राउंड कलर जोड़ने के लिए <body> टैग के अन्दर निम्न कोड जोड़ा जाता है -

<body bgcolor="#XXXXXX">

उपरोक्त कोड में XXXXXX चाहे गए कलर का हैक्स कोड है। कुछ सामान्य कलर्स के हैक्स कोड्स हैं -

#000000 - काला

#FFFFFF - सफेद

#800080 - जामुनी

#0000FF - नीला

#FFFF00 - पीला

#FF0000 - लाल

#008000 - हरा

#00FF00 - लाइम

#C0C0C0 - सिल्वर

उदाहरण के लिए <body bgcolor="#0000FF"> टैग हमारे वेब पेज को नीले रंग का बैकग्राउंड कलर देगा।

>
कोडऐसे दिखेगा
 <html>
<body bgcolor="#0000FF">
<h1>Hello world!</h1>
<p><a href="http://agoodplace4all.com">ज्ञान सागर हिन्दी वेबसाइट</a></p>
</body>
</html>		 

मेरा पहला वेब पेज!


ज्ञान सागर हिन्दी वेबसाइट


किसी वेब पेज को इमेज बैकग्राउंड देने के लिए निम्न सिंटेक्स का प्रयोग किया जाता है -

<body background="xxx.jpg">

उपरोक्त कोड में xxx.jpg इमेज फाइल है।

और अपने वेब पेज को कलर के साथ ही इमेज बैकग्राउंड देने के लिए सिंटेक्स है


<body bgcolor="#0000FF" background="xxx.jpg">
प्रस्तुतकर्ता पर 1 टिप्पणी:
लेबल:

शनिवार, 13 दिसंबर 2014

एचटीएमएल सीखें - 3 (HTML Tutorials in Hindi)


.htm या .html?

आपने देखा होगा कि कुछ एचटीएमएल (HTML) फाइल्स के एक्स्टेंशन नाम .htm होता है तो कुछ के .html, हमने स्वयं अपनी बनाई फाइल को .html एक्स्टेंशन नाम दिया है। वास्तव में  .htm एक्स्टेंशन नाम का प्रयोग उस समय होता था जब एक्स्टेंशन नाम सिर्फ तीन कैरेक्टर्स का प्रयोग हुआ करता था। आजकल एचटीएमएल (HTML) फाइल्स के एक्स्टेंशन नाम के लिए .html का ही प्रयोग किया जाता है।

हेडर्स

एचटीएमएल (HTML) में निम्न छः प्रकार के हेडर्स का प्रयोग होता है -

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

वेब पेज में ये ऐसे दिखाई देंगे -

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6
प्रस्तुतकर्ता पर कोई टिप्पणी नहीं:
लेबल:
सदस्यता लें संदेश (Atom)