یہ مضمون HTML اور CSS میں جوابی ویب سائٹ ڈیزائن بنانے کے اقدامات کو ظاہر کرتا ہے:
ایچ ٹی ایم ایل اور سی ایس ایس کے ساتھ ریسپانسیو ویب سائٹ ڈیزائن کیسے بنایا جائے؟
ایچ ٹی ایم ایل اور سی ایس ایس کے ساتھ ایک ذمہ دار ویب سائٹ ڈیزائن بنانے میں ایک ایسا لے آؤٹ بنانا شامل ہے جو اسکرین کے مختلف سائز اور ریزولوشنز کے مطابق ہو۔ جوابی ویب سائٹ ڈیزائن بنانے کے لیے آپ یہ اقدامات کر سکتے ہیں:
مرحلہ 1: ویو پورٹ میٹا ٹیگ
' ویو پورٹ میٹا ٹیگ ریسپانسیو ویب ڈیزائن کی تخلیق میں اہم کردار ادا کرتا ہے۔ یہ اندر داخل کیا جاتا ہے ' مندرجہ ذیل صفات پر مشتمل HTML فائل کا ٹیگ:
< میٹا نام = 'ویو پورٹ' مواد = 'چوڑائی = ڈیوائس کی چوڑائی، ابتدائی پیمانہ = 1' / >
مندرجہ بالا میٹا ٹیگ میں دو صفات ہیں:
- ' نام ” وصف اس فعالیت کا نام بتاتا ہے جس کے لیے یہ ٹیگ بنایا/استعمال کیا گیا ہے۔ مثال کے طور پر، 'کی ترتیب ویو پورٹ ' کرنے کے لئے ' نام مختلف آلات کے ویو پورٹ سے نمٹنے کے لیے خصوصیت۔
- ' مواد ” وصف پچھلے انتساب کی قدر کی وضاحت کرتا ہے۔ یہ ہر ڈیوائس کی چوڑائی سیٹ کرتا ہے اور دستاویز/ویب پیج کو 100% تک پیمانہ کرتا ہے۔
مرحلہ 2: ریسپانسیو امیجز
چونکہ تصویر کا سائز ایک دوسرے سے مختلف ہوتا ہے، اس لیے ایک جیسا سیٹ کرنا مشکل ہے۔ اونچائی 'یا' چوڑائی ہر تصویر کے لیے پراپرٹی۔ جب تصویر کا سائز طے ہو جاتا ہے تو صارفین اسکرین کے ساتھ ویب پیج کی تصویر کا سائز تبدیل نہیں کرتے ہیں۔ تاہم، صارف مندرجہ ذیل کوڈ کے ذریعے ریسپانسیو امیج سیٹ کر سکتے ہیں۔
img {
زیادہ سے زیادہ چوڑائی : 100 %;
}
' زیادہ سے زیادہ چوڑائی CSS پراپرٹی تصویر کو اس کی مختص جگہ کے اندر ظاہر کرنے سے روکتی ہے۔ قدر کو '%' میں سیٹ کرنے سے، تصویر اس کے بنیادی عنصر کے سائز کے ساتھ ساتھ سائز تبدیل کرتی ہے۔ یہ تصویر کے لیے ایک ذمہ دار اثر پیدا کرتا ہے۔
مرحلہ 3: فلیکس باکس لے آؤٹ
ایک ذمہ دار ویب سائٹ ڈیزائن بنانے کے لیے Flexbox لے آؤٹ کی انتہائی سفارش کی جاتی ہے۔ یہ HTML عناصر کو ایک مخصوص پوزیشن پر ظاہر کرنے اور والدین کی طرف سے دستیاب سائز کے مطابق ہر بچے کے لیے دستیاب جگہ کا سائز تبدیل کرنے کی اجازت دیتا ہے۔ Flexbox لے آؤٹ میں کئی خصوصیات شامل ہیں جو ڈویلپر کو بہت زیادہ آزادی فراہم کرتی ہیں جیسے کہ ذیل کے کوڈ میں:
< انداز >
.والدین {
ڈسپلے: فلیکس؛
}
.بچہ {
flex: 1 ;
متن- سیدھ میں لانا : مرکز
}
< / انداز >
< جسم >
< div کلاس = 'والدین' >
< div کلاس = 'بچہ' انداز = 'بارڈر: 3px ٹھوس نیلا وایلیٹ؛' خوش آمدید< / div >
< div کلاس = 'بچہ' انداز = 'بارڈر: 3px ٹھوس گہرا سبز؛' >سے< / div >
< div کلاس = 'بچہ' انداز = 'بارڈر: 3px ٹھوس سرخ؛' >Linuxint< / div >
< / div >
< / جسم >
مندرجہ بالا کوڈ کے ٹکڑوں میں:
- سب سے پہلے، ایک id کے ساتھ پیرنٹ div عنصر بنائیں والدین ' کے اندر ' 'ٹیگ۔
- اگلا، متعدد چائلڈ ڈیو عناصر بنائیں اور انہیں 'کی کلاس تفویض کریں۔ بچہ '
- پھر، منتخب کریں ' والدین 'کلاس کریں اور' کی قدر فراہم کریں فلیکس 'سی ایس ایس کے لیے' ڈسپلے ' جائیداد.
- اس کے بعد، 'کی قدر فراہم کریں 1 ' کرنے کے لئے ' فلیکس 'ہر ایک کی جائیداد' بچہ ” کلاس جو چائلڈ عنصر کو فلیکس کے طور پر ڈسپلے کرتی ہے۔
مندرجہ بالا کوڈ پر عمل کرنے کے بعد، ویب صفحہ اس طرح نظر آتا ہے:
مندرجہ بالا آؤٹ پٹ ظاہر کرتا ہے کہ براؤزر کا سائز تبدیل کرنے پر چائلڈ عنصر کی چوڑائی برابر ہو رہی ہے۔
مرحلہ 4: گرڈ لے آؤٹ
گرڈ لے آؤٹ ایک گرڈ بناتا ہے اور گرڈ کے حصے کے اندر HTML عناصر کو تفویض کرتا ہے۔ گرڈ عناصر ویب پیج کی سکرین کے سائز کے مطابق تبدیل ہوتے ہیں۔ یہ ایک ذمہ دار ڈیزائن بناتا ہے کیونکہ آلہ کی سکرین کے مطابق HTML عنصر کا سائز تبدیل ہوتا ہے:
< انداز >کنٹینر {
ڈسپلے: گرڈ؛
grid-template-columns: 1fr 1fr 1fr;
}
< / انداز >
< جسم >
< div کلاس = 'جزو' >
< div انداز = 'بارڈر: 3px ٹھوس جنگلاتی سبز؛' >Linuxint< / div >
< div انداز = 'بارڈر: 3px ٹھوس گہرا سبز؛' >Linuxint< / div >
< div انداز = 'بارڈر: 3px ٹھوس سرخ؛' >Linuxint< / div >
< / div >
< / جسم >
مندرجہ بالا کوڈ میں:
- سب سے پہلے، پیرنٹ ڈیو بنائیں اور اسے 'کی کلاس تفویض کریں جزو ' کے اندر ' 'ٹیگ۔ اس کے بعد اس میں تین چائلڈ ڈیو عناصر بنائیں۔
- پھر، CSS فائل میں تفویض کریں ' گرڈ 'قدر' ڈسپلے 'کے لئے جائیداد' کنٹینر ' div
- اس کے بعد، ویب پیج پر تین مساوی سائز کے حصے بنائیں ' grid-template-column 'پراپرٹی اور اس کے برابر سیٹ کریں' 1fr 1fr 1fr 'جہاں fr کا مطلب ہے' حصہ '
مندرجہ بالا کوڈ کو مرتب کرنے کے بعد، آؤٹ پٹ اس طرح لگتا ہے:
آؤٹ پٹ دکھاتا ہے کہ divs برابر تناسب کے ساتھ اسکرین کے سائز کے مطابق خود کا سائز تبدیل کر رہے ہیں۔
مرحلہ 5: میڈیا کے سوالات
رسپانسیو ڈیزائن بنانے کے لیے میڈیا کے سوالات کا استعمال پرانے اسکول کی چیز ہے لیکن پھر بھی، زیادہ تر ویب سائٹس میڈیا کے سوالات کا استعمال کرتی ہیں۔ میڈیا کے سوالات کو منتخب HTML عنصر کے لیے ڈیفالٹ اسٹائل شامل کرنے کے بعد براہ راست CSS فائل میں شامل کیا جا سکتا ہے۔ میڈیا کا استفسار کوڈ کو تھوڑا سا لمبا اور گندا بنا دیتا ہے۔ کیونکہ ڈویلپر کو ہر سکرین سائز کے لیے الگ الگ کوڈ داخل کرنے کی ضرورت ہوتی ہے۔
مثال کے طور پر، ذیل میں کوڈ کا ٹکڑا دیکھیں:
@ میڈیا سکرین اور ( منٹ- چوڑائی : 640px ) {.component {
پس منظر- رنگ : جنگل سبز
}
}
مندرجہ بالا کوڈ کے ٹکڑوں میں:
- سب سے پہلے، میڈیا استفسار مرتب کریں جو CSS کی خصوصیات کو منتخب عنصر کلاس پر لاگو کرتا ہے ' جزو 'جب اسکرین کے سائز کی چوڑائی' سے زیادہ ہو جائے 640px '
- اگلا، 'اجزاء کلاس کو منتخب کریں اور 'کی قدر مقرر کریں جنگل سبز ' کے لئے ' پس منظر کا رنگ ' جائیداد.
.component {
پس منظر- رنگ : dodgerblue
}
}
پھر مندرجہ بالا کوڈ کے ٹکڑوں کے لیے:
- جب چوڑائی کا سائز 'سے چھوٹا ہو تو اسٹائل لاگو کرنے کے لیے میڈیا استفسار کو سیٹ کریں۔ 1000px '
- اب، منتخب کریں ' جزو 'کلاس اور ایک قدر فراہم کریں' ڈوجر بلیو ' کے لئے ' پس منظر کا رنگ جائیداد:
مندرجہ بالا کوڈ کے ٹکڑوں پر عمل کرنے کے بعد، آؤٹ پٹ اس طرح نظر آتا ہے:
آؤٹ پٹ دکھاتا ہے کہ میڈیا سوال اسکرین کے سائز کی بنیاد پر پس منظر کو تبدیل کر رہا ہے۔ فونٹ کا سائز، چوڑائی، اونچائی، اور دیگر CSS خصوصیات کو بھی اسی پیٹرن پر عمل کرتے ہوئے لاگو کیا جا سکتا ہے۔
میڈیا سوالات کا استعمال کرتے ہوئے ممکنہ بریک پوائنٹس اسکرین کے سائز پر غور کیا جانا ہے:
- کے لیے چھوٹا 'اسکرین کا سائز، چوڑائی' سے چھوٹی سیٹ کریں 640px '
- کے لیے درمیانہ ویو پورٹ اسکرین کا سائز، چوڑائی کی حدود کے درمیان 641px 'اور' 1007px '
- کے لیے بڑا 'اسکرین کا سائز، چوڑائی کو' پر سیٹ کریں 1008px 'یا اس سے زیادہ۔
نتیجہ
ایک ذمہ دار ویب سائٹ ڈیزائن بنانے کے لیے، ڈویلپرز کو شامل کرنے کی ضرورت ہے ' viewport 'میں ٹیگ کریں' ٹیگ سیکشن۔ اگلا، استعمال کریں ' فلیکس باکس 'اور' گرڈ ' ترتیب. یہ لے آؤٹ ماڈیول ایک ذمہ دار ڈیزائن بنانے میں مدد کرتے ہیں۔ آخر میں، ' میڈیا کے سوالات ڈیولپر کو مختلف اسکرین سائزز کے لیے ایک ہی ویب سائٹ کے مختلف ورژن اسٹائل کرنے میں مدد کریں۔ اس مضمون نے ان اقدامات کا مظاہرہ کیا ہے جن کے ذریعے ایک ذمہ دار ویب سائٹ ڈیزائن بنایا جا سکتا ہے۔