सोमवार, 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
प्रस्तुतकर्ता पर कोई टिप्पणी नहीं:
लेबल:

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

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

अपना पहला वेब पेज बनायें (Create your first Web Page)

पिछला पोस्ट पढ़कर आप समझ ही गये होंगे कि एचटीएमएल (HTML) का आधार है टैग्स। आज हम टैग्स का प्रयोग करके अपना पहला वेबपेज बनाना सीखेंगे।

एचटीएमएल (HTML) आरम्भ होता है <html> टैग से और उसकी समाप्ति होती है </html> टैग से।

तो आप अपने कम्प्यूटर में नोटपैड खोल लें और उसमें टाइप करें -

<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<p>Welcome to my Web Page.</p>
<p>I am learning to create web pages. This is my first Web Page.</p>
</body>
</html>

इसे myfirstwebpage.html के नाम से सेव्ह कर लें।

जब आप इस सेव्ह किए गये फाइल को डबल क्लिक करके खोलेंगे तो यह ऐसा दिखाई देगा -

 




व्याख्याः

<html> टैग बताती है कि यह एचटीएमएल (HTML) डाकुमेंट का आरम्भ है।

<head> टैग का मतलब है यहाँ से हेड वाला भाग शुरु होता है। हेड वाले भाग में जो कुछ भी लिखा जाता है उसे सिर्फ ब्राउजर और सर्च इंजिन ही समझते हैं, इस भाग में लिखी गई चीजें वेब पेज में लिखी गई चीजें वेब पेज में दिखाई नहीं देता सिवाय टायटिल के।

<title> टैग बताता है कि ब्राउजर के सबसे ऊपर बायीं तरफ क्या शीर्षक दर्शाना है।

<body> टैग का मतलब है यहाँ से बॉडी वाला भाग शुरू हो रहा है। बॉडी वाले भाग में जो लिखा जाता है वह वेब पेज में दिखाई देता है।

<p> टैग पैराग्राफ शुरु करने के लिए होता है।

जो टैग्स </ से शुरू होते हैं वे टैग बंद करने के लिए होते हैं।
प्रस्तुतकर्ता पर कोई टिप्पणी नहीं:
लेबल:

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

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

एचटीएमएल (HTML) का पूरा नाम क्या है?

एचटीएमएल (HTML) का पूरा नाम है - हाइपर टेक्स्ट मार्कअप लेंग्वेज (Hyper Text Markup Language) ।

एचटीएमएल (HTML) का एक्स्टेंशन .htm या .html होता है।

मार्कअप टेक्स्ट का कार्य है यह बताना कि ब्राउजर पेज को कैसे डिस्प्ले किया जाये।

एचटीएमएल (HTML) फाइल का निर्माण किसी भी सिम्पल टेक्स्ट एडीटर का उपयोग करके किया जा सकता है। आप नोटपैड का प्रयोग करके एचटीएमएल (HTML) फाइल बड़ी आसानी के साथ बना सकते हैं।

परिचयः

एचटीएमएल (HTML) एक मार्कअप लेंग्वेज है जिसका काम है यह निर्धारित करना कि किसी वेब पेज को वेब ब्राउजर में कैसे डिस्प्ले किया जाए। एचटीएमएल (HTML) का आधार है टैग्स। टैग्स न्यूण कोण कोष्ठक (low angle brackets) के भीतर लिखे गये कोड्स होते हैं जो कि किसी कार्य को परिभाषित करते हैं, जैसे कि यदि हमें एक नया पैराग्राफ शुरू करना है तो हम <p> टैग से शुरू करके उस पैराग्राफ को </p> टैग से बंद करेंगे।

एचटीएमएल (HTML) में अधिकांश टैग्स को शुरू करने के बाद अन्त में बंद भी करना पड़ता है, किन्तु कुछ टैग्स ऐसे भी हैं जिन्हें बंद नहीं करना पड़ता, जैसे कि लाइन ब्रेक के लिए <br> टैग।

अगले पोस्ट में हम सीखेंगे कि अपना पहले वेब पेज कैसे बनाया जाये।

तो प्रतीक्षा कीजिए इस ब्लॉग के अगले पोस्ट का।
प्रस्तुतकर्ता पर कोई टिप्पणी नहीं:
लेबल:
सदस्यता लें संदेश (Atom)