HTML, pre, br, and code, पैराग्राफ से आगे. अपनी वेब पेज पर कोड और कविता कैसे दिखाएँ, #10

the TRANSCENDENT

HTML, pre, br, and code, पैराग्राफ से आगे. अपनी वेब पेज पर कोड और कविता कैसे दिखाएँ, #10   पैराग्राफ से आगे: अपनी वेब पेज पर कोड और कविता कैसे दिखाएँ   सामग्री को ठीक वैसे ही प्रस्तुत करने के लिए "code", "pre", और "br" टैग्स में महारत हासिल करें जैसा आप चाहते हैं।   क्या आपने कभी वेब डेवलपमेंट के बारे में एक ब्लॉग पोस्ट लिखने या सिंटैक्स के एक टुकड़े को समझाने की कोशिश की है, लेकिन आपके वेबपेज ने आपकी सावधानीपूर्वक फ़ॉर्मेटिंग को पूरी तरह से अनदेखा कर दिया? आप स्पष्टता के लिए अपने कोड को इंडेंट करते हैं, लेकिन ब्राउज़र इसे एक साथ जोड़ देता है। आप एक खूबसूरत कविता पेस्ट करते हैं, और यह एक एकल, अस्त-व्यस्त पैराग्राफ में बदल जाती है।     Continue reading:  https://thetranscendent-official.blogspot.com/2025/09/html-pre-br-and-code.html    https://youtu.be/bGwxtZfLC0E    Free Full Course:  https://thetranscendent.org/courses/html-ai-युग-के-युग-हिंदी-में   Chapter Resources:  https://codepen.io/the-Transcendent/pen/QwwYKWB   All Resources:  https://codepen.io/collection/KwdZdm          1. Hello and Welcome! (0:00:10)  2. HTML "code" Tag (0:00:23)  3. HTML Entities (0:01:45)  4. HTML "br" Tag (0:03:30)  5. HTML "pre" Tag (0:04:55)  6. "pre" and "code" Together (0:05:15)  7. Key Takeaways and Conclusion (0:05:54)  8. Files and Practice (0:06:03)         ===    Connect with The TRANSCENDENT:   🌍 Visit our Website: https://thetranscendent.org  👍Facebook: https://www.facebook.com/Transcendentofficials  🐦 X (Twitter): https://x.com/tttranscendent  📸 Instagram: https://www.instagram.com/transcendent.officials/  ▶️ YouTube: https://www.youtube.com/@theTranscendent-official  ▶️ Rumble: https://rumble.com/c/c-6380966  ▶️ Dailymotion:  https://dailymotion.com/transcendent.officials  🎵 TikTok: https://www.tiktok.com/@thetranscendent.org  📌 Pinterest: https://in.pinterest.com/transcendentofficials  💬 Discord Server: https://thetranscendent.org  📢 Threads: https://www.threads.net/@transcendent.officials  👻 Snapchat: https://thetranscendent.org  🖼️ Behance: https://www.behance.net/thetranscendentorg   ===     #transcendent #thetranscendent #thetranscendentorg  #ट्रान्सेंडैंट #दीट्रान्सेंडैंट  #ট্রান্সসেন্ডেন্ট #দাট্রান্সসেন্ডেন্ট       #HTML #WebDev #SEO #FrontEnd #CodingTips  #HTML #HTML5 #WebDevelopment #SEO #Accessibility #TimeElement #DatetimeAttribute #HTMLTutorial #FrontendDevelopment #WebStandards #CodingTips #TheTranscendent #SemanticHTML #MachineReadableData    #एचटीएमएल #एचटीएमएल5 #वेबडेवलपमेंट #एसईओ #एक्सेसिबिलिटी #टाइमएलिमेंट #डेटटाइमएट्रिब्यूट #एचटीएमएलट्यूटोरियल #फ्रंटएंडडेवलपमेंट #वेबमानक #कोडिंगटिप्स #दट्रांसेंडेंट #सिमेंटिकएचटीएमएल #मशीनपठनीयडेटा     thetranscendent.org  Beyond Sense!

Transcript

00:00موسيقى

00:10موسيقى

00:12موسيقى

00:14موسيقى

00:20ترجمة نانسي قنقر

00:50ترانت ہی اس کی اپستتی بدل جاتی ہے

00:53یہ مونو سپیس فونٹ میں پریورتت ہو جاتا ہے

00:57جس سے سپشتہ بڑھتی ہے

00:59اور ہم اس کی سٹائلنگ کو آوشک تانوسار کسٹمائز کر سکتے ہیں

01:03ڈیفولٹ روپ سے کوڈ ایلیمنٹ ان لائن ہوتا ہے

01:07جس کا ارث ہے کہ css اسی واقعے کی سنگرچنا میں بنی رہتی ہے

01:11اب کیا اگر ہم واسطتو میں کچھ html کے بارے میں لکھنا چاہتے ہیں

01:17ہم اس شبد h1 کو کوشتھکوں میں لپیٹ کر پریورتت کرنے کا پریورتت کرتے ہیں

01:23پرنتو

01:24افسوس اس نے اس ایلیمنٹ شبد کو h1 شیرشک میں پریورتت کر دیا

01:29اس نے پریشت پر h1 پردرشت کرنے کے بجائے کارے کریانویت کیا

01:34ہم اسے کوڈ ایلیمنٹ میں لپیٹنے کا پریورتت کرتے ہیں

01:38پرنتو نہیں

01:39اس سے براوزر h1 کو h1 کے روپ میں پارس کرنے سے نہیں روکتا

01:44اپیوکت روپ سے پرابت کرنے ہی تو ہمیں ampersand lt semicolon type کرنا چاہیے

01:50یہ ایک روچک سنگرچنا ہے جسے html entity کہا جاتا ہے

01:55جب ہم ampersand lt semicolon type کرتے ہیں

01:59تو ہمیں ایک less than chin prompt ہوتا ہے

02:02یہ دی ہم ampersand gt semicolon type کرتے ہیں

02:06تو ہمیں انیوارے روپ سے ایک greater than chin prompt ہوتا ہے

02:10ہم بھوششے کے ویڈیو میں html entities پر اور چرچہ کریں گے

02:15ان میں سے اسیم سنگھیا ویدیمان ہے

02:18کنتو ورتمان میں یہ دو نہائی اپیوگی صدھ ہوتے ہیں

02:22جب آپ درطہ سے html syntax کو صحیح ڈھنگ سے دستاویز کرنا چاہتے ہیں

02:27تاکہ وہ پریشت پر سپشت روپ سے دکھائی دے بجائے اس کے کی اسے نشفادت کیا جائے

02:32اگلے چرن میں چلیے ہم بی آر اور پری elements پر وچار کرتے ہیں

02:37سامانیتا ہم اپنے code میں جتنے بھی spaces اور new line characters کی آوشکتہ ہو

02:44type کر سکتے ہیں اور browser انہیں پوری طرح اندیکھا کرتا ہے

02:48ہم نے اس وشے پر ایک ویڈیو میں جہاں سوچی یا lists پر چرچہ کی گئی تھی

02:54بتایا کی کس پرکار code کو indent کرنے سے پٹنیتا بڑھتی ہے

02:58بنا web page کی سامگری کو پربھاوت کیے

03:01لیکن یدی ہم سامگری میں پربھاوت ڈالنا چاہیں

03:04یدی ہمارا اُددیشش شبدوں یا لائنوں کے بیچ ان ایکوں spaces ڈالنا ہے

03:09اور انہیں مانیتا دینا ہے

03:11ایک قویتہ کے اُدھاہرن میں ہم نے اسے پی element میں لپیٹا ہے

03:16قویتہ دو واقعوں سے مل کر بنتی ہے

03:19جس سے یہ سمپون روپ سے ایک پیراگراف پرتیت ہوتی ہے

03:23لیکن پریشت پر اس کا پردرشن صحیح نہیں ہوتا

03:26براوزر قویتہ میں موجود لائن بریکس کو اندیکھا کر دیتا ہے

03:30جس سے وچارپورن فارمیٹنگ اور اس میں نیہد گہرا ارث کھو جاتا ہے

03:34ہم پرتیک پنکتی کو الگ پیراگراف میں بدلنا نہیں چاہتے

03:39کیونکہ یہ سوتندر پیراگراف نہیں ہے

03:41بلکہ ہم چاہتے ہیں

03:43کہ پرتیک پنکتی کے انتھ میں ایک سرل لائن بریک ہو

03:46جسے براوزر مانیتا دیتا ہو

03:48یہی بی آر ایلیمنٹ کا مکھے اددیش ہے

03:52یا ہمیں ایک لائن بریک جوڑنے کا طریقہ پردان کرتا ہے

03:56پرتیک پنکتی کے انتھ میں بی آر ایلیمنٹ لگانے سے اب کویتہ صحیح دکھتی ہے

04:02بی آر ایک سرل ایکل ٹیگ ہے

04:05اسے کھولنے یا بند کرنے کی کوئی آوشکتہ نہیں ہوتی

04:10اس کے اندر کچھ بھی نہیں جاتا

04:12یہ کھول ایک لائن بریک کے ستھان کو چہنیت کرتا ہے

04:16آئیے ایک اور قویتہ دیکھیں

04:20جہاں سپیسنگ اور بھی انیمت اور ارث پورن ہے

04:23ابھی پوری قویتہ شبدوں کے ایک اویوستھت دھیر کی طرح دکھ رہی ہے

04:28ہم پرتیک پنکتی کے انتھ میں بی آر ایلیمنٹ جوڑ سکتے ہیں

04:33لیکن اس سے indentation یا پروہشیل سفید ستھان سنرکشت نہیں ہوگا

04:38جو قویتہ کی آتما کو درشاتا ہے

04:40ہمیں سپیسنگ کو سامگری میں ہی سماہت کرنا ہوگا

04:45کیونکہ یہ قویتہ کے ارث کا ابھن حصہ ہے

04:47یہ کیول فورمیٹنگ نہیں ہے

04:50یہ ابھی ویقتی کا ایک حصہ ہے

04:53تو چلیے اسے پری ایلیمنٹ کے مادھم سے html میں کرتے ہیں

04:58جب ہم قویتہ کو پری ٹیگز میں لپیٹتے ہیں

05:02تو براؤزر اب سپیسنگ

05:03لائن بریکس اور سمپون سنرچنا کا سمان کرتا ہے

05:07ہم یہاں ایک یادرچک اکشر کو کسی بھی ستھان پر جوڑ سکتے ہیں

05:12اور وہ وہیں بنا رہے گا

05:14پری اور کورڈ ایلیمنٹس کو اکثر ایک ساتھ اپیوگ کیا جاتا ہے

05:19تاکہ کورڈ کو سہی indentation کے ساتھ پردرشت کیا جا سکے

05:22یہاں ایک اداہرن ہے

05:25جو ان ایلیمنٹس کو ایک ساتھ لاتا ہے

05:27ہم نے html لکھا ہے جس میں html entities کا اپیوگ کیا گیا ہے

05:33پٹنیتہ بڑھانے کے لیے indentation جوڑا گیا ہے

05:37اور اس کے بعد کچھ css بھی indented ہے

05:40پورا سنپیٹ کوڈ ایلیمنٹ میں لپیٹا گیا ہے

05:43تاکہ براوزر سمجھ سکے کہ یہاں کورڈ ہے

05:46اس کے اترکت سب کچھ pre-element میں لپیٹا گیا ہے

05:50جس سے فارمیٹنگ اور سپیسنگ بنی رہتی ہے

05:53یہ تین ایلیمنٹس

05:56کورڈ, بی آر اور پری

05:58کورڈ اور انیس سنگرچت سامگری کے لیے مہتوپورن ہیں

06:01اس ویڈیو کے لیے سبھی آوشک فائلیں اٹیچڈ ہے

06:06اور ابھیاس کے لیے اپلبد ہیں

06:07موسیقی

Category

Transcript

Recommended