سی ایس ایس کے ساتھ فینسی عنوانات بنائیں

عنوانات کو سجانے کے لئے فانٹ، سرحدوں، اور تصاویر کا استعمال کریں

سب سے زیادہ ویب صفحات پر عام عنوانات ہیں. دراصل، بہت زیادہ متن دستاویز میں کم سے کم ایک عنوان ہے، لہذا آپ کو آپ پڑھ رہے ہیں کا عنوان جانتے ہیں. یہ عنوانات ایچ ٹی ایم ایل سرخی عناصر کا استعمال کرتے ہوئے کوڈت ہیں - H1، H2، H3، H4، H5، اور H6.

کچھ سائٹس پر، آپ یہ محسوس کرسکتے ہیں کہ ان عنوانات کو بغیر کسی عناصر کا استعمال کرتے ہوئے کوڈت نہیں ہیں. اس کے بجائے، عنوانات ان میں شامل کردہ مخصوص کلاس صفات کے ساتھ پیراگراف کا استعمال کرسکتے ہیں، یا کلاس عناصر کے ساتھ تقسیم ہوتے ہیں. اس غلط پریکٹس کے بارے میں اکثر میں سنبھالنے کا سبب یہ ہے کہ ڈیزائنر "راستے کی طرح نظر نہیں آتی". پہلے سے طے شدہ طور پر، عنوانات بولڈ میں ظاہر کئے جاتے ہیں اور وہ سائز میں بڑے ہوتے ہیں، خاص طور پر H1 اور H2 عناصر جو باقی صفحے کے باقی حصے سے زیادہ بڑے فونٹ سائز میں ظاہر ہوتے ہیں. ذہن میں رکھو یہ صرف ان عناصر کی ڈیفالٹ نظر ہے! سی ایس ایس کے ساتھ، آپ ہی سرنگ نظر بنا سکتے ہیں تاہم آپ چاہتے ہیں! آپ فونٹ کا سائز تبدیل کر سکتے ہیں، بولڈ کو ہٹا دیں، اور بہت زیادہ. عنوانات ایک صفحہ کے عنوانات کو کوڈ بنانے کے لئے مناسب طریقے ہیں. یہاں کچھ وجوہات ہیں.

ڈی ویز اور اسٹائل کے مقابلے میں سرخی ٹیگز کیوں استعمال کرتے ہیں

تلاش کے انجن کی طرح ٹیگز تلاش کریں

یہ عنوانات کا استعمال کرنے کا بہترین ذریعہ ہے، اور صحیح حکم میں استعمال کریں (یعنی H1، پھر H2، پھر H3، وغیرہ). تلاش کے انجن ٹیگ سرخی میں شامل ہونے والے متن میں سب سے زیادہ وزن لگاتے ہیں کیونکہ اس متن میں ایک بنیادی قدر موجود ہے. دوسرے الفاظ میں، آپ کے صفحے کے عنوان H1 کی لیبل کرکے، آپ تلاش انجن مکڑی کو بتائیں کہ وہ صفحہ کا # 1 توجہ ہے. H2 عنوانات # 2 زور، اور اسی طرح.

آپ کو اپنے ہیڈ لائنوں کی وضاحت کرنے کے لئے کیا کلاسز استعمال کرنے کی ضرورت نہیں ہے

جب آپ جانتے ہیں کہ آپ کے تمام ویب صفحات H1 جو جرات مندانہ، 2em اور پیلے رنگ ہیں وہ آپ کو ایک بار آپ کے سٹائل شیٹ میں بیان کر سکتے ہیں اور کیا جا سکتا ہے. 6 مہینے کے بعد، جب آپ کسی دوسرے صفحہ کو شامل کررہے ہیں، تو آپ اپنے صفحے کے سب سے اوپر H1 ٹیگ میں شامل کرتے ہیں، آپ کو دیگر صفحات پر واپس جانے کی ضرورت نہیں ہے کہ یہ پتہ چلیں کہ کون سا سٹائل ID یا کلاس جس نے آپ کو بنیادی طور پر متعارف کرایا عنوان اور ذیلی سر.

وہ ایک مضبوط صفحہ آؤٹ لائن فراہم کرتے ہیں

خطوط کو متن پڑھنا آسان ہے. لہذا زیادہ تر امریکی اسکولوں نے طالب علموں کو ایک تحریر لکھنے سے پہلے کہ وہ کاغذ لکھیں. جب آپ ایک آؤٹ لائن کی شکل میں سرخی ٹیگ کا استعمال کرتے ہیں تو، آپ کے متن میں ایک واضح ڈھانچہ ہے جو ظاہر ہوتا ہے. اس کے علاوہ، ایسے وسائل موجود ہیں جو صفحہ بندی کا جائزہ لینے کے لئے جائزہ لے سکتے ہیں، اور یہ آؤٹ لائن ڈھانچے کے لئے ٹیگ کی سرخی پر متفق ہیں.

آپ کا صفحہ بھی شیلیوں کے ساتھ بند ہوسکتا ہے

ہر کوئی بھی سٹائل شیٹ دیکھنے نہیں یا استعمال کرسکتا ہے (اور یہ # 1 پر آتا ہے - تلاش کے انجن آپ کے صفحے کے مواد (متن) کو نظر انداز نہیں کرتا، طرز شیٹ نہیں). اگر آپ سرخی ٹیگ کا استعمال کرتے ہیں تو، آپ اپنے صفحات کو مزید تک رسائی حاصل کر رہے ہیں کیونکہ سرٹیفیکیشن معلومات فراہم کرتی ہیں جو ڈی وی ٹی ٹی نہیں ہوتی.

یہ سکرین کے قارئین اور ویب سائٹ تک رسائی کے لئے مددگار ہے

عنوانات کا مناسب استعمال ایک دستاویز میں ایک منطقی ساخت پیدا کرتا ہے. یہ وہی ہے جو اسکرین قارئین کو صارف کو بصری معذوری کے ساتھ سائٹ پر "پڑھنے" کا استعمال کرے گا، معذور لوگوں کو آپ کی سائٹ تک رسائی حاصل ہے.

متن اور آپ کے عنوانات کا فونٹ

ٹیگ سرخی کے "بڑے، جرات مندانہ، اور بدسورت" مسئلہ سے دور جانے کا سب سے آسان طریقہ یہ ہے کہ وہ اس متن کو جس طرح آپ دیکھے. اصل میں، جب میں نئی ​​ویب سائٹ پر کام کر رہا ہوں، میں عام طور پر پیراگراف، H1، H2، اور H3 سٹائل پہلی چیز لکھتا ہوں. میں عام طور پر صرف فونٹ خاندان اور سائز / وزن کے ساتھ رہتا ہوں. مثال کے طور پر، یہ نئی ویب سائٹ کے لئے ایک ابتدائی سٹائل شیٹ ہوسکتا ہے (یہ صرف کچھ مثالیں شیلیوں جو استعمال کیا جا سکتا ہے):

جسم، ایچ ٹی ایم ایل (مارجن: 0؛ بھرتی: 0؛ } p {فونٹ: 1em ایریری، جنیوا، ہیلیویٹیکا، سینسر سیرف؛ } h1 {فونٹ: بولڈ 2em "ٹائم نیو رومن"، ٹائمز، سیرف؛ } h2 {فونٹ: بولڈ 1.5em "ٹائم نیو رومن"، ٹائمز، سیرف؛ } H3 {فونٹ: بولڈ 1.2em ایریری، جنیوا، ہیلیویٹا، سینسر سیرف؛ }

آپ اپنے سر کے فانٹ میں ترمیم کرسکتے ہیں یا ٹیکسٹ سٹائل یا ٹیکسٹ رنگ کو بھی تبدیل کرسکتے ہیں. یہ سب آپ کے "بدسورت" عنوان کو زیادہ متحرک اور آپ کے ڈیزائن کو برقرار رکھنے میں کچھ بدل جائے گا.

H1 {فونٹ: بولڈ اطالوی 2em / 1em "ٹائم نیو رومن"، "ایم ایس سیرف"، "نیویارک"، سیرف؛ مارجن: 0؛ بھرتی: 0؛ رنگ: # e7ce00؛ }

سرحدوں کو سرے سے تیار کر سکتے ہیں

آپ کے سر کی نشاندہی کو بہتر بنانے کے لئے سرحدوں کا بہترین طریقہ ہے. اور سرحدیں شامل کرنے میں آسان ہے. لیکن سرحدوں کے ساتھ استعمال کرنے کے لئے مت بھولنا - آپ کو آپ کے عنوان کے ہر طرف پر سرحد کی ضرورت نہیں ہے. اور آپ صرف سادہ بورنگ سرحدوں سے کہیں زیادہ استعمال کرسکتے ہیں.

H1 {فونٹ: بولڈ اطالوی 2em / 1em "ٹائم نیو رومن"، "ایم ایس سیرف"، "نیویارک"، سیرف؛ مارجن: 0؛ بھرتی: 0؛ رنگ: # e7ce00؛ سرحد کے اوپر: ٹھوس # e7ce00 درمیانے درجے کی؛ سرحد کے نیچے: ڈاٹٹ # e7ce00 پتلی؛ چوڑائی: 600px؛ }

میں نے اپنے نمونے کے عنوان میں کچھ دلچسپ بصری شیلیوں کو متعارف کرانے کیلئے ایک اوپر اور نیچے کی سرحد شامل کی. آپ سرحدوں کو کسی طرح بھی شامل کرسکتے ہیں جو آپ چاہتے ہیں کہ ڈیزائن سٹائل حاصل کریں.

یہاں تک کہ زیادہ سے زیادہ Pizazz کے لئے اپنے ہیڈکوارٹر میں پس منظر کی تصاویر شامل کریں

بہت سے ویب سائٹس کے صفحے کے سب سے اوپر ایک ہیڈر سیکشن ہے جس میں ایک عنوان شامل ہے - عام طور پر سائٹ کے عنوان اور گرافک. زیادہ سے زیادہ ڈیزائنرز اس کے بارے میں سوچتے ہیں کہ دو الگ الگ عناصر ہیں، لیکن آپ کو یہ نہیں ہونا چاہئے. اگر گرافک صرف عنوان کو سجانے کے لئے ہے، تو اس عنوانات میں کیوں شامل نہیں ہے؟

H1 {فونٹ: بولڈ اطالوی 3em / 1em "ٹائم نیو رومن"، "ایم ایس سیرف"، "نیویارک"، سیرف؛ پس منظر: #fff url ("fancyheadline.jpg") دو بار دہرائیں؛ بھرتی: 0.5em 0 90px 0؛ متن - سیدھ: مرکز؛ مارجن: 0؛ سرحد کے نیچے: ٹھوس # e7ce00 0.25em؛ رنگ: # e7ce00؛ }

اس عنوان کے لئے چال یہ ہے کہ میں جانتا ہوں کہ میری تصویر 90 پکسلز قد ہے. لہذا میں نے 90px کے عنوان کے نچلے حصے میں پیٹرن شامل کردی (پیٹرن: 0.5 0 90px 0p؛). آپ مارجن، لائن اونچائی، اور بھرتی کے ساتھ کھیل سکتے ہیں تاکہ عنوان کا متن آپ کو یہ چاہتے ہیں کہ آپ بالکل چاہتے ہیں.

تصاویر کا استعمال کرتے وقت یاد رکھنا ایک بات یہ ہے کہ اگر آپ کے پاس ایک ترتیب کے ساتھ ایک ذمہ دار ویب سائٹ (جو آپ کو کرنا چاہئے) اس کی سکرین کے سائز اور آلات پر مبنی تبدیلیاں کرتے ہیں تو، آپ کو ہمیشہ ہی ایک ہی سائز نہیں ملے گا. اگر آپ کو اپنے عین مطابق سائز بننے کی ضرورت ہوتی ہے تو، اس سے مسائل پیدا ہوسکتے ہیں. یہ ایک وجوہات میں سے ایک ہے کیوں کہ میں عام طور پر ایک عنوان میں پس منظر کی تصاویر سے بچتا ہوں، جیسا کہ ٹھنڈا ہوتا ہے.

عنوانات میں تصویر تبدیلی

یہ ویب ڈویلپرز کے لئے ایک اور مقبول تکنیک ہے کیونکہ یہ آپ کو ایک گرافیکل عنوان بنانے اور اس تصویر کے ساتھ سر ٹیگ کا متن تبدیل کرنے کی اجازت دیتا ہے. یہ سچ ہے کہ ویب ڈویلپرز سے سچا قدیم عمل بہت کم فونٹ تک رسائی رکھتا تھا اور ان کے کام میں مزید غیر ملکی فونٹ استعمال کرنا چاہتا تھا. ویب فانٹ کے عروج نے واقعی میں تبدیل کر دیا ہے کہ ڈیزائنر سائٹس سے کیسے نکلتے ہیں. اب ہیڈ فون کو وسیع قسم کے فانٹ اور تصاویر میں شامل کیا جاسکتا ہے جن کے ساتھ سرایت ہوئے ان فونٹ کے ساتھ کوئی ضرورت نہیں ہے. اس طرح، آپ صرف بڑی عمر کے سائٹس پر سر سائٹس کے لئے صرف سی ایس ایس تصاویر متبادل تلاش کریں گے جنہیں مزید جدید طریقوں سے اپ ڈیٹ نہیں کیا گیا ہے.

جینیفر کریین کی طرف سے اصل مضمون. 9/6/17 پر جیریمی Girard کی طرف سے ترمیم