HTML اور CSS: ڈھانچہ اور جلد

تین طریقے

1. 1

   HTML ڈھانچہ ہے۔ CSS انداز ہے۔ JavaScript، جو ہم اگلے سبق میں ملیں گے، رویہ ہے۔ یہ ذہنی فاصلہ قائم رکھیں اور باقی تفصیلات ہیں۔ HTML کا مطلب ہائپر ٹیکسٹ مارک اپ لینگوئج ہے۔ آپ مواد کو ٹیگز میں لپیٹ کر اسے معنی دیتے ہیں۔ سرخی h1 تا h6 میں آتی ہے۔ پیراگراف p میں۔ لنک a میں۔ بٹن button میں۔ فہرست ul یا ol میں li کے ساتھ۔ صرف اسٹائلنگ کے لیے ایک ٹکڑا span میں۔ ایک ترتیبی حصہ div میں۔ سیمنٹک ٹیگز header, nav, main, article, section, aside, footer براؤزرز اور اسکرین ریڈرز دونوں کو بتاتے ہیں کہ ہر حصہ کس لیے ہے۔ انہی کا استعمال کریں۔ FBR میں بیٹھا اسکرین ریڈر استعمال کرنے والا بلال آپ کا شکر گزار ہوگا۔

2. 2

   پہلا طریقہ، سیمنٹک ڈھانچہ۔ NADRA جیسا ہیرو صرف HTML میں: header پوری اوپری پٹی کو لپیٹتا ہے؛ nav میں مینو؛ h1 میں عنوان 'اپنا CNIC آن لائن بنوائیں'؛ p میں معاون جملہ؛ form میں ایک input اور ایک button۔ ابھی کوئی انداز نہیں۔ صفحہ بدصورت ہے مگر معنی مکمل ہے۔ اسکرین ریڈر والا نابینا صارف پہلے ہی اسے استعمال کر سکتا ہے۔ سرچ انجن اسے انڈیکس کر سکتا ہے۔ یہی وجہ ہے کہ HTML پہلے سوچنا اختیاری نہیں، یہ ریڑھ کی ہڈی ہے۔

3. 3

   دوسرا طریقہ، CSS سے رنگ بھرنا۔ CSS قواعد کی فہرست ہے، شکل: selector { property: value }۔ header کو سبز کرنے کے لیے: header { background: #006633; color: white; padding: 24px }۔ عنوان کو درمیان میں لانے کے لیے فلیکس باکس: header { display: flex; align-items: center; justify-content: space-between }۔ فلیکس باکس جدید CSS کا سب سے اہم لے آؤٹ اوزار ہے۔ یہ پرانے ٹیبل اور فلوٹ پر مبنی الجھن کی جگہ لیتا ہے۔ ایک ہفتہ flex-direction, justify-content, align-items, اور gap میں مہارت پر لگائیں۔ اس کے بعد گرڈ دو جہتی لے آؤٹ کے لیے دوسرا اوزار ہے۔

کیوں؟

Claude کے ساتھ آزمائیں

Claude کے ساتھ پرامپٹ: 'NADRA Pak-ID پورٹل کے ہیرو کے لیے سیمنٹک HTML اور Tailwind CSS بنائیں۔ سبز برانڈنگ والی چپچپی اوپر کی نیویگیشن، عنوان، ذیلی عنوان، CNIC ان پٹ اور بنیادی CTA بٹن شامل کریں۔ پہلے موبائل، قابلِ رسائی، اور rounded-2xl بٹن shadow-md کے ساتھ ہوں۔ ایک ہی فائل، ساٹھ سطروں سے کم۔' جواب کا اپنے ہاتھ سے بنائے ورژن سے موازنہ کریں۔ ماڈل نے کیا بہتر کیا؟ کیا چھوڑا؟