Up next in 10
Inline & Block Elements in HTML _ Sigma Web Development Course - Tutorial #8
12 views
Mar 11, 2024
In Tutorial #8 of the Sigma Web Development Course, we unravel the distinctions between inline and block elements in HTML. Understanding the nature of these elements is crucial for structuring and styling web content effectively. This tutorial provides a comprehensive exploration of the characteristics and use cases of both inline and block elements, offering practical insights into how they impact the layout and presentation of web pages. Whether you're a novice looking to strengthen your HTML skills or an experienced developer aiming to optimize your coding practices, this session is a valuable resource for mastering the intricacies of inline and block elements. Join us as we navigate through the nuanced world of HTML, uncovering the versatility of these elements for creating visually appealing and well-structured web content.
View Video Transcript
0:00
इन लाइन और ब्लॉक एलिमेंट्स का कॉंसेप्ट HTML पर सीखना बहुत ज़्यादा इंपोर्टेंट है�
0:03
इन लाइन एलिमेंट्स वो होते हैं जो सिर्फ इतनी विट्ट लेते हैं जितनी रिक्वायट हैं। और block elements वो होते हैं
0:08
जो screen की पूरी width ले लेते हैं, इसको display property भी कहते हैं, जो की CSS के थूँ सेट की जा सकती है
0:13
अगर so far आप लोगों को मज़ा आ रहा है इस वीडियो में, तो इस वीडियो को like जरूर कर देना, तो चलते हैं computer screen में
0:18
और inline and block elements को closely देखेंगे, एक बहुत अच्छे examples के थ्रू let's roll the intro
0:23
तो guys अब time आच्छुका है हमारे पास inline और block elements को देखने क�
0:35
अगर आपने playlist access नहीं करी है और code access नहीं किया है तो दोनों access कर लें क्योंकि जैसे ऐसे videos बनते जाते हैं वैसे वैसे जो code है videos का और जो हमारा video है वो add होता जाना है playlist मे�
0:50
नाम से तो सेवन वीडियो मैंने आलरेडी यहाँ पर डाल दिए हैं यह फोल्डर करके मैं यहाँ पर एक वीडिय�
0:55
एड बनाऊंगा इसको वीएस कोड में खोलूंगा और यह इस कोड में खोलने के बाद मैं क्या करूंगा कि आप लो�
1:01
index.html बनवाक कर index और block element के बारे में बताओंगा तो exclamation mark मारके enter मारा मैंन�
1:07
और ये मैं type भी कर सकता था लेकिन मैं करूँगा नहीं क्योंकि why type जब मैं ये कर सकता हूँ त�
1:11
मैं यहाँ पर लिखूँगा inline and block elements इसके बारे में मैंने आप लोगों क�
1:15
थोड़ा बहुत बताया था लेकिन मैं आप लोगों को अभी इस पर और प्रकाज डाल कर बताऊंगा कि क्या होते हैं लाइ�
1:20
एलिमेंट्स और क्यों मैं उनको यूज करना चाहूंगा तो देखो इन लाइन एलिमेंट्स वह एलिमेंट्स होते हैं जो कि सिर्�
1:25
इतनी विट्थ लेते हैं जितनी जरूरी हो क्या block elements उतनी विट्थ नहीं लेते हैं जितनी जरूरी ह�
1:29
नहीं, वो कहते हैं हमें पूरी विट्थ चाहिए वो कहते हैं हमारी पूरी विट्थ है कुछ लोग होते हैं न फैल के बैठते है�
1:34
बस उनकी तरह होते हैं ये block elements, मैं आप लोगों को बताता हूँ कि क्या difference है
1:38
और इस difference को समझाने के लिए, मैं यापर थोड़ी सी cheating करूँगा
1:41
और वो cheating क्या है कि मैं CSS add करूँगा, आपको ओ यार CSS तो पढ़ा ही नहीं यार, CSS क्यों add कर रहे हो
1:46
अरे भाई CSS आड़ कर रहा हूँ सिर्फ इतनी जितनी जरूरी है और यहां पर बस मैं एक चीज करूंगा कि जो मेर�
1:52
पी है यहां पर मैं लिखूंगा पी एंटर बार हूंगा और यहां पर मैं लिख दूंगा लेटर से है आई एम आफ पेरा ठीक है और मैं यहा�
2:00
आपको बैकग्राउन कलर दे दो लेट ऐसे ब्लू ठीक है यह कोई अच्छा से देता हूं यार दिखाओ लो को यार कल�
2:07
चॉइस तो अच्छी कर लो अपनी अरीबाई क्या चल रहा है ठीक है अब यहां पर देख सकते हैं मैंने पर आपको ए�
2:11
दे दिया और उसी के साथ साथ मैं क्या करूंगा एक एंकर टैक लगाऊंगा है जरेफ इसी कोल टू हो जाएग�
2:15
गूगल डॉट कॉम लेटर से उन्हें इस टीपीएस लगाना पड़ेगा इस टीपीएस कोल डबल स्टाइज तभी ए�
2:21
पर जाएगा और मैं यहां पर लिखूंगा गूगल और जो एंकर टैग है उसका बैकग्राउन कलर में पता है क्या दूंग�
2:28
मैं दूंगा बैकग्राउन कलर रेड लेकिन रेड नहीं मैं यहां पर करूंगा होबर और इस तरह से मैं कोई सभी कल�
2:51
तो चेंज करता हूं इसको रेड इश करता हूं थोड़ा हां यह रेड और इंच की तरफ मैंने कर दिया और यह कर दिय�
2:56
लूं अब आप डिफरेंस देखना मैं यहां पर क्लिक करूंगा और जैसे मैं आपको क्लिक करूंगा आप देखो कि इसक�
3:02
जो बैकराउंट कलर मिला हो तो पूरी विट को मिल गया लेकिन इसको मिला सिर्फ जितना यह एलिमेंट है उस उतन�
3:07
वह ऐसा ऐसा इसलिए हुआ क्योंकि यह है पैराग्राफ एक ब्लॉक एलिमेंट और जो हमारा एंकर टेक है वह इन लाइन एलिमेंट इन लाइन एलिमेंट सिर्फ उतनी जगह लेते हैं जितनी उनको चाहिए होती है ब्लॉक एलिमेंट पूरी विट्थ ले लेते हैं और जो �
3:37
इन लाइन ठीक है और इसके बाद अगर मैं मारो एक एंकर टेक लगा दूं और लिख दूं यह इस इन लाइन तो आप यहा�
3:43
पर देखो कि हुआ गया मैं तरह आपको खोड़ दिखा दूं सही से जो मौट करके तो अगर मैं इसको नई लाइन में भी लिखू�
3:48
बाय दे वे मैं आपको बता दूँ यहाँ पर मैं कितनी भी spaces दे दूँ यह मेरे content में add नहीं होग�
3:53
क्योंकि HTML जो होता है वो एक से जाता space होती है उसको वैसे भी include नहीं करता ह�
3:57
आप लोगों को spaces वगैरा देनी है तो आप लोग यहाँ तो amp% nbsp
4:01
लिख सकते हो उसके बारे में मैं आप लोगों को बताऊंगा बट अभी मैं यहाँ पर आपको दिखाना चाहता हूँ कि यह कि�
4:05
तरह से काम कर रहा है तो देखो हुआ क्या मैंने यहाँ पर लिखा है आईम आप पैराज पैराग्राफ्ट क्या है एक ब्लॉ�
4:10
ले ली तो इस पूरी भी लिली अगला पॉइंट नीचे आएगा यह लिखा मैंने तो इसने सिर्फ उतनी लिए जितनी इसको जरूर�
4:17
है और इसने सिर्फ इतनी विड्ड ले ली लेकिन अगला कॉंटेंट जो था वह कह रहा था कि मुझे तो पूरी विड्ड चाहि�
4:21
यहां पर नहीं आएगा वह अगली ही लाइन में आएगा क्योंकि वह कहता है कि मुझे तो पूरी विट चाहिए तो वह अगल�
4:26
लाइन में आएगा इस लाइन में नहीं आ सकता क्योंकि इस लाइन में आएगा तो पूरी विट कैसे लेकर गूगल भी तो ल�
4:30
तो यह पूरी विड़्थ ले लेगा इसको मैं अगर कोई बैकग्राउन कलर दूंगा तो यह clean विड़्थ में मुझे दिखाई पड़ेग�
4:35
एक काम करता हूं यल्लू कलर का दे देता हूं यार इसको एक बैकग्राउन कलर और मैं आपको बैकग्राउन कलर को यल्ल�
4:42
देता हूँ और आप देखो यहाँ पर यह यलो पूरा इसने जो है विट्थ ले ली उसी के साथ से स्पैन को और एंकर टैक क�
4:48
मैं एक ही लाइन में रख सकता हूँ क्योंकि इन लाइन एलिमेंट है तो इन लाइन एलिमेंट सिर्फ उतनी विट्थ लेते हैं जितन�
4:53
जरूरी है और अपनी width में और elements को आने का भी मौका देते है�
4:58
जैसे कि आप लोगों ने यहाँ पर देखा कि इस span ने anchor tag को भी आने क�
5:01
मौका दिया अब क्या हमेशा जो anchor tag है वो inline होगा क्या हमेशा paragraph
5:05
tag block होगा क्या यह चीज हमेशा होगी
5:30
नाम के फोल्डर में डाल दिया है तो मैं इसको वीडियो सेवन करूंगा और अभी जो है वो है वीडियो एट ठीक ह�
5:36
जो अभी हम कर रहे हैं वो वीडियो एट है और वीडियो सेवन के अंदर कुछ भी नहीं है तो अम मैं अभी यहां पर इसक�
5:42
जल्दी से structure कर दूँगा, आप उसकी tension बिलकुल मत लेना, I hope कि learnings आप लोगों क�
5:45
बहुत बढ़िया मिल रही हैं, बहुत सारे लोगों ने यार इस चीज़ को point किया comments में, मैं इसको fix कर दूँगा
5:49
but I think that doesn't affect us in any way, क्योंकि आप लोगों समझ में आ रहे हैं और मैं अब आपको जो folder मिलेगा notes का sorry source code का वो आप लोगों को बिल्कुल सही से मिलेगा ठीक है उसी के साथ साथ codewithari.com पर जाकर आप notes पर click करके notes download कर लेना और वो एक complementary source हो जाएंगे आप लोगों के लिए बट मैं आपको सब कुछ स�
6:21
block elements की. यहाँ पर block elements की ये list है जिसमें की मैंने जो most commonly used
6:26
elements है उनको सबसे पहले लिखा हुआ है जैसे की div सबसे ज्यादा used होता है फिर paragraph होत�
6:30
है और आप end तक आएँगे तो आपको ऐसे ऐसे elements मिलेंगे जो की शायद बहुत used भी ना होते आपको पता भी ना होने के बारे में लेकिन आगे आपको पता चल जाएगा और सारे एलिमेंट्स को बताना यहां पर मेरे लि�
6:39
पॉसिबल नहीं है तो आप लोग कुछ सेल्फ लर्निंग भी करना डेफिनेटली बहुत सारे ऐसे एलिमेंट्स है जो कि आ�
6:44
लोगों को बहुत कम यूज में आएंगे बट जो मोस्ट कामल यूज तो आपको दिखेंगे फिर नीचे मैंने लाइन एलिमेंट क�
6:50
पूरी लिस्ट बना रखी है तो यह कॉंप्रीएंसिव लिस्ट को आप रेफर करना यहां पर मैंने कॉंप्रीएंसिव लिस्ट औ�
6:55
एक फाइल बना दिया तो यह फाइल आप रेफर करना उसके साथ साथ जो दोस्तों कोड है आपको उसमें फालतु स्पेस बिल्कु�
7:02
नहीं होनी चाहिए इसमें आपको बता रहा था कि इस पर पार्स नहीं होती है इन फैक्ट आप राइट लिख करके फॉरमें�
7:07
करेंगे ना तो आपका document फॉरमेट हो जाएगा यार code अच्छा लिखो code ऐसा लिखो कि आन�
7:12
वाले time में आपके पोते जब आपका जंखीला laptop खोल के देखें और उनको एक code मिले तो व�
7:17
बाई दादा जी अच्छा को लिखा करते थे ये ना कहें कि ये दादा जी कभी ऐसे space लगा देते थे फिर दादा जी कभी ऐसे कर देते थे ये ये कर देते थे तो आप ये ही चाहोगे कि आपको अच्छे शब्दों में हाथ किया जाए तो अच्छे से लिखें code अपना ठीक ह�
7:47
नेम सिटी एंड पिन कोड ऑफ यूजर फॉर्म लिखना जो कि पिछले वीडियो में हम लोगों ने पड़ा था फॉर्म के बारे मे�
7:51
आपको यह फॉर्म लिखना है किस तरह से आप बनाओगी कि आपको पता होना चाहिए और उसी के साथ साथ मैं चाहता हू�
7:58
comment section में सब लोग इसको एक quiz का answer दे सब लोग यह हमारी पहली quiz ह�
8:02
two interaction comment section code comment element use inline element if yes inline element
8:14
block element का किया, if yes कौन से block element का मुझे आप अपनी explanation comment section में बता सकते ह�
8:19
आने वाले वीडियोस में हम लोग यह भी देखेंगे कि CSS का इस्तेमाल करके आप लोग किस तरह स�
8:22
इन लाइन फ्लेक्स, इन लाइन ब्लॉक, इस तरह की डिस्प्लेव पॉपर्टी सेट कर सकते है�
8:26
और उन्हें क्या डिफरेंस होता है तो ये सब चीजें हम आने वाले वीडियोस में देखेंगे आप लोगों मैं बताना चाहता हूँ कि यार आप लो�
8:32
अगर इस course को follow कर रहे हो तो आप एक बहुत बढ़िया वेब डेवलोफर बनने वाले हो औ�
8:36
आप लोग बिलकुल भी यह मत सोचने कि यार वीडियोस लम्मे हैं और हमारा हसल बहुत लम्मा चल रहा है और ऐसा ऐस�
8:40
मैं चाहता हूँ बिगिनर फ्रेंडली रहें कोर्सेस जो भी मैं कोर्स बना रहा हूँ और उसी के साथ आप लोगों भी बताना चाहूँग�
8:45
लोग आप लोगों सिंदेगी में बताएंगे कि यार आप ये कर रहे हो, हम तो मस्ती कर रहे हैं, आप पढ़ाई कर रहे हो
8:50
आप ऐसे कर रहे हो, ऐसे कर रहे हो, पता है क्या चीज है जो आप लोगों कभी नहीं बोलेंगे
8:54
वो ये है कि यार you are blessed, कोई आपको यह नहीं बोलेगा कि आपको सिंग्मा वेब डेवलप्मेंट कोर्स मिल�
8:58
आप एक ऐसे टाइम पर जी रहे हो जिसमें आपको इतना अच्छा comprehensive course फ्री में इंदी में देखने को मिल रहा है यह आपको कोई नहीं बताएगा you are blessed
9:04
लोग आपसे यही कहेंगे यार मैं तो movie देखने जा रहा हूँ मैं तो यही देखने जा रहा हूँ यार तुम पढ़ा रहे ह�
9:08
क्या यार तुम मतलब इतने boring हो लोग आपको यह बोलेंगे लेकिन यह आपको वोई नहीं बोलेग�
9:13
कि यार you are blessed to find this course and you are blessed कि आप watch कर रहे हो पूरा you are blessed कि आप distract नहीं हो रहे ह�
9:19
और आने वाले time में जब आप पीछे मुड़के देखोगे ना तब आपको खुद realize होगी यह चीज कि यार मैं कितना blessed हूँ कि या�
9:24
मैं खुद कहता हूँ कि यार मैं कितना blessed हूँ कि यार मैंने IIT JEE के time पे पड़ा
9:28
IIT JEE निकाली, इतना कुछ हुआ, साली चीजें बदली, तो यार ये चीज आपको कोई नहीं बताएगा
9:33
कोई आपसे ये नहीं कहेगा कि यार it's worth the sacrifice that you are doing, मैं आप लोगों को बता रहा हूँ कि भाई जितने भी लोगों को सक्सेस मिले ना लाइफ में उन्होंने सेक्रीफाइस किया ह�
9:40
कोई भी किसी का भी नाम ले लो कहीं ना कहीं सेक्रिफाइस किया है बड़ा सेक्रिफाइस किया और लोग आपको यह कभ�
9:45
नहीं बताएंगे कि यार यह जो सेक्रिफाइस है यह वर्त एट है तो आप लोग मेहनत करते रहो बिल्कुल सही जा रहे हो आ�
9:50
लोurm अभी यह मत सोचो कि यह अमिय मिस आउट कर रहे हैं वह मिस आउट कर रहे हैं सब जीत हो जाती है यार इ�
9:54
एडवाइस के मुझे मिलने चाहिए थे चार पान बन सो रुपए नोट जो कि मुझे नहीं मिले लेकिन कोई बात नहीं आग�
9:59
बढ़ते हैं यहां पर मैं काम करूंगा जल्दी से जो स्पैन इन उसमें भी कलर ऐड कर दूंगा तो मैं यहां प�
10:03
लिखूंगा स्पैन और यहां पर मैं बैकग्राउंड कलर डाल दूंगा कोई जा भी डाल दूंगा ब्लू वॉयलेट डा�
10:08
इसको थोड़ा सा मैं कम कर दूंगा क्लिक करके या मैं होवर करके इस तरह से और अब आप लोग यहाँ पर देखोगे तो यह देखो इसने यह इस तरह से हाइलाइट कर दिया है इसक�
10:15
So अभी के लिए इस वीडियो में इतना है I hope आप लोग समझ गए होंगे कि inline of block elements पर क्या difference ह�
10:20
playlist को access करें वीडियो को like करें प्रीस को भी access करे�
10:23
code को अपने गाउं की जबीन मेरे नाम करें Thank you so much guys for watching this video
10:27
And I will see you next time करते है�