Posts

Showing posts from January, 2020

HTML ID Selector

Image
HTML ID selector बिल्कुल क्लास की तरह ही define किया जाता है बस केवल ID name के पहले "." की जगह पर आपको "#" का प्रयोग करना होता है।

उदाहरण देखें-


 यहां पर लाईन 6 में class define किया गया है. जबकि लाईन 14 में ID define की गई है।

इसी प्रकार से आप ब्लाक बना सकते हैं।

यहां पर कुछ HTML के इनलाईन ब्लाक के element दिये जा रहे है जिनका प्रयोग ब्लाक बनाने में किया जा सकता है।

<a>,    <abbr>,    <var>,  <time>,   <b> ,  <big>,   <br>,   <button>,  <city>,  <code>,  <input>,   <kbd>,  <label>,  <object>, <output>,  <strong>,  <samp>,  <script>,  <select>, <div>

उदाहरण देखें-


इसी प्रकार आप अलग-अलग तरह के ब्लाक अपने वेब पेज पर बना सकते हैं।

लाईन 18- में float: none; से आप ब्लाक को vertically align कर सकते हैं।

यहां पर लाईन  23 एवं 28 के <div id="list"> आवश्यकता नहीं हैं। यदि आप ब्लाक की नेस्टिंग करना चाहते हैं तभी आपको इसकी आवश्यकता होगी।

HTML Class

Image
HTML Class
HTML Class एक ही प्रकार की स्टाईल कई जगह पर प्रयोग करन करने के लिए किया जाता है। HTML Class  का Attribute "Class"  होता है। 
HTML Class का Syntax:

class="variable name"
 उदाहरण देखेंः


लाईन 5-11

Style Tag जिसमें क्लास को define किया गया है।
heading एक क्लास है। Inline Class Attribute का प्रयोग देखें।



 Inline Class किसी विशेष टैग के लिए होता है। जैसे h2.heading. यह inline class केवल h2 heading के साथ ही काम करेगा। <h1 class="heading"> मे भी heading क्लास का प्रयोग किया गया है पर इसका प्रभाव केवल h2 पर ही दिखा।

HTML Comments

Image
HTML Comments HTML Comment Tag से आप HTML Document में comment लिख सकते है। Comments ऐसे टेक्स्ट होते हैं जो वेब पेज पर नहीं दिखाई देते हैं।

HTML comment Syntax:

<!---- Comment ------>

उदाहरण देखें-


 यहां पर comment  नहीं दिख रहा है। केवल हेडिग ही दिख रही है।



इसीप्रकार हम कई लाईन का comment लिख सकते हैं।
जैसे-

<!----- this is multiple line comment where we can write many line comment and will not display at webpage----->

HTML Marquee

Image
HTML MarqueeHTML Marquee का प्रयोग text, line or paragraph, image etc को move कराने के लिए किया जाता है।इसके लिए <marquee > tag के साथ-साथ direction attribute का प्रयोग करना होता है। <marque direction=up><marque direction=down><marque direction=left><marque direction=right>  उदाहरण देखें


Creating HR

Image
HTML HR Tag
Horizontal Row  या लाइन बनाने के लिए <HR> tag  का प्रयोग करते हैं।
उदाहरण देखें


width और height attribute से लाईन की चौड़ाई और ऊंचाई सेट कर सकते है
Background-color से लाईन के background  का कलर सेट कर सकते है।
border-color से लाईन के बार्डर का कलर सेट किया जा सकता है।

Creating Links-लिंक बनाना

Image
HTML Links
HTML link  वेब साइट का सबसे महत्वपूर्ण फीचर होता है। HTML Links से ही एक पेज को दूसरे से जोड़ा जाता है। HTML Links ही वेबसाइट में नेविगेशन पासिबल है।
HTML Links बनाने के लिए <a> एंकर टैग के साथ पेज का URL देने के लिए href टैग का प्रयोग किया जाता है।
जैसे- <a href="..url.."> 
Example:





Creating List-लिस्ट बनाना

Image
HTML List
HTML में लिस्ट 2 प्रकार की होती है-
1-Numbered List क्रमांकित सूची
2-Bulleted List बुलेटेड सूची
1- Numbered List- क्रमांकित सूची क्रमांकित सूची में सूची तैयार करने के लिए संख्याओ तथा व्यंजनों का प्रयोग किया जाता है।क्रमांकित सूची के लिए <OL>...</OL> टैग का प्रयोग किया जाता है।क्रमांकित सूची के Item को <Li>..</Li> या <li>..<li> बनाते है।OL का तात्पर्य Ordered List तथा Li का तात्पर्य List item होता है।दोनो प्रकार की लिस्ट को Nested बनानाः लिस्ट को नेस्टेड करने के लिए List  अन्दर दूसरी List टैग लगाते हैं। जैसे <ol>     <li> पहली लिस्ट का कान्टेन्ट </li>      <ol>         <li> दूसरी लिस्ट का कान्टेन्ट </li>      </ol> </ol>

Creating Heading | html coding basics

Image
Headings कुल 6 प्रकार की होती है-
H1 , H2, H3, H4, H5 और h6.
H1 प्रकार की हेडिंग सबसे बड़ी हेडिंग होती है और h6 सबसे छोटी हेडिंग है। 
हेडिंग को आप css का प्रयोग करके बेहतर कर सकते हैं.



Background में Picture लगाना

Image
Background में पिक्चर लगानें के लिए -
<body> tag में background attribute लागाकर आप image लगा सकते हैं.background का url डालने पर या याद रखें कि notepad file और image एक ही स्थान पर होना चाहिए।




Web Page बनाना

Image
HTML  web page बनाने को लिए Notepad ओपन कर लें




लाईन 1- Document टाईप को define करता है. लाईन 4- पेज के टाईटल को define करता है. लाईन 8-मुख्य पेज के एरिया को define करता है जिसमे bgcolor से बैकग्राउन्ड का कलर डाला जाता है। लाईन 10-15 <div> .. </div> HTML section है जिसमें style का प्रयोग करके फार्मेटिंग किया गया है. font-size: 50px से font की साईज दिया जाता है।  text-align: center से Text के पोजिसन दिया जाता है। <a href="address"> से टेंक्ट को हाइपरलिंक किया जाता है।

आईए देखते हैं कि Background में image कैसे लगाते हैं।

Image
दिये गये कोड ध्यानपूर्वक देखें-


background में image लगाने के लिए background="image का url" प्रयोग करते हैं-

 लाईन-8 में alt="Alter text" डाल सकते है जो image support ना करने पर display होता है.
width का प्रयोग करके background image की चौड़ाई ज्यादा या कम कर सकते हैं। जैसे width=500px.height का प्रयोग करके background image की ऊंचाई ज्यादा या कम कर सकते हैं। जैसे height=300px. background-repeat:repeat या no repeat लगाकर background repeat property सेट कर सकते हैं।

आईए पेज के Background का कलर बदलना सीखें

Image
पेज के background को बदलनें के लिए हमें "bgcolor" attribute का प्रयोग <body> tag में करना पड़ेगा। निम्नवत उदाहरण को ध्यान पूर्वक देखें-


परिणाम निम्नवत है-


इस प्रकार हम background में image भी लगा सकते है. आगे हम देखेंगे कि कैसे अलग-अलग प्रकार से picture लगाया जाता है।

================================== अगले पेज पर जाएं>>> ==================================

आईए HTML में Font Color बदलना सीखें

Image
नीचे दिये गये उदाहरण को समझें-


 उपर दिये गये उदाहरण में आप देख सकते है कि Line 8 में <font color="red">  का प्रयोग करके हम Font को कोई भी कलर दे सकते हैं। font tag के अन्य Attributes के लिए आगे देखें-

========================= अगले पेज पर जाएं>>>  =========================

आईए HTML में Comments के बारे में जानें

Image
HTML Comments
 ये एैसे स्टेटमेंट होते हैं जो लिखें तो जाते हैं कोडिंग में लेकिन पेज पर नहीं दिखाई देते हैं, इनका प्रयोग developer कोडिंग सेक्सन में instructions लिखनें में करता हैं।
comment कैसे - कैसे लिखा जा सकता है?
 /* .....statements......*/ एक से अधिक लाईन का comment लिखने में प्रयोक किया जाता है।// एक लाईन comment के लिए।<!-------------Comment-----------> ये भी एक या एक से अधिक लाईन के लिए होता है। उदाहरण देखें-



आईए HTML के Paragraph Tag के बारे में जानें

Image
Paragraph Tag <p>

Html Web page पर paragraph बनाने के लिए <p> टैग का प्रयोग किया जाता है।
 उदाहरण देखें-


आईए HTML के Heading Tag के बारे में जानें

Image
HTML Heading:
 ये कुल 6 प्रकार की होती है, h1, h2, h3, h4, h5 और h6.
जिसमें h1 सबसे बड़ी हेडिंग होती है, और h6 सबसे छोटी।
उदाहरण को देखें- 




आईए HTML के बेसिक टैग के बारे में जानें

HTML के बेसिक एवं महत्वपुर्ण Tags:

<html></html><head></head><title></title><body></body><br><hr><b></b><i></i> <u></u><center></center><p>

आइए HTML को समझते हैं....

Image
HTML के लिए कोई Text Editor खोल लें जैसे- Notepad, Sublime Text, या TextEdit.
Notepad(Windows)   और  TextEdit (MAC) पहले से होता है. लेकिन यदि आप Sublime Text download कर लें।


हम आपको Sublime Text में देखेंगे।
HTML की कोडिगं <html></html> के बीच में की जाती है।
Notepad या sublime text ओपेन करें.<!DOCTYPE hyml> टाईप करें.<html>  टाईप करें.content टाईप करें.</html>  टाईप करें.फाईल को .html के साथ सेव करें। 
=========================
अगला पेज>>>
=========================