'یا' <سیکشن> ٹیگز بھی استعمال کیے جا سکتے ہیں لیکن استعمال کرنا ایک اچھا عمل ہے۔ <ہیڈر> 'ٹیگ۔ اگلا، تفویض کریں ' ہیڈر ہیڈر سیکشن پر سی ایس ایس اسٹائل لگانے کے لیے کلاس۔ اس کے بعد، شامل کریں '

'اس میں ٹیگ کریں اور اسے ایک کلاس تفویض کریں' سرخی مواد کو ظاہر کرنے کے لیے 'Welcome to Linuxhint!':

<ہیڈر کلاس = 'ہیڈر' >

< h1 کلاس = 'سرخی' > Linuxhint میں خوش آمدید! < / h1 >

< / ہیڈر>

اس کے بعد، منتخب کریں ' <ہیڈر> ٹیگ کلاس اور درج ذیل طرزیں تفویض کریں:

---

---

.ہیڈر {

پس منظر کی تصویر: یو آر ایل ( '../bg.jpg' ) ;

پس منظر- سائز : احاطہ

background-repeat: no-repeat؛

رنگ : سفید دھواں

پس منظر کی پوزیشن: اوپر؛

پیڈنگ: 0px 20px 20px 20px؛

}

مندرجہ بالا کوڈ کی وضاحت ذیل میں ذکر کی گئی ہے:

• سب سے پہلے، تصویر سیٹ کریں ' bg.jpg ' کا استعمال کرتے ہوئے ہیڈر سیکشن کے پس منظر کے طور پر پس منظر کی تصویر ' جائیداد.
• اگلا، ' پس منظر کا سائز 'اور' پس منظر دوبارہ ” خصوصیات کو بالترتیب تصویر کا سائز سیٹ کرنے اور تصویر کی تکرار کو روکنے کے لیے استعمال کیا جاتا ہے۔
• اس کے بعد، 'کی مدد سے ٹیکسٹ اور تصویر کی پوزیشن کا رنگ سب سے اوپر سیٹ کریں۔ رنگ 'اور' پس منظر کی پوزیشن خصوصیات
• آخر میں، ' بھرتی ” پراپرٹی کا استعمال ہیڈر کے مواد اور بارڈر کے درمیان جگہ بنانے کے لیے کیا جاتا ہے۔

مندرجہ بالا کوڈ پر عمل کرنے کے بعد، ویب صفحہ اس طرح نظر آتا ہے:

مندرجہ بالا آؤٹ پٹ دکھاتا ہے کہ ہیڈر سیکشن بنایا گیا ہے، اور اس پر CSS اسٹائل لاگو ہوتے ہیں۔

مرحلہ 2: نیویگیشن بار بنائیں

ہیڈر میں زیادہ تر معاملات میں نیویگیشن بار بھی شامل ہو سکتا ہے۔ نوبار کی تخلیق کے لیے HTML ' <کوئی نہیں> ٹیگ بہت مفید ہو سکتا ہے۔ اسی لیے، 'کا استعمال کرتے ہوئے navbar آئٹمز شامل کریں 'ٹیگ کریں اور ایک کلاس تفویض کریں' عمل ”:

<ہیڈر کلاس = 'ہیڈر' >

<کوئی نہیں>

< a کلاس = 'عمل' href = '#' >گھر< / a >

< a کلاس = 'عمل' href = '#' >خدمات< / a >

< a کلاس = 'عمل' href = '#' >ہمارے بارے میں< / a >

< a کلاس = 'عمل' href = '#' >ہم سے رابطہ کریں< / a >

< a کلاس = 'عمل' href = '#' >نئے آنے والے< / a >

< / نہیں>

< بی آر >< بی آر >

< h1 کلاس = 'سرخی' > Linuxhint میں خوش آمدید! < / h1 >

< / ہیڈر>

مندرجہ بالا کوڈ پر عمل کرنے کے بعد، ویب صفحہ اس طرح نظر آتا ہے:

مندرجہ بالا آؤٹ پٹ واضح کرتا ہے کہ navbar آئٹمز ' گھر '،' خدمات '،' ہمارے بارے میں '،' ہم سے رابطہ کریں۔ 'اور' نئے آنے والے 'بنائے گئے ہیں۔

مرحلہ 3: نوبار آئٹمز پر طرزیں لاگو کریں۔

نیوبار آئٹمز کو اسٹائل کرنے کے لیے، ' عمل 'کلاس کریں اور درج ذیل سی ایس ایس اسٹائل کی خصوصیات کو تفویض کریں:

ایکٹ {

متن کی سجاوٹ: کوئی نہیں؛

رنگ : سفید؛

ڈسپلے: بلاک؛

پیڈنگ: 15px؛

فونٹ- سائز : بڑا

float: بائیں؛

مارجن: 0px 20px؛

}

مندرجہ بالا کوڈ کی وضاحت یہ ہے:

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

مندرجہ بالا کوڈ پر عمل کرنے کے بعد، ویب صفحہ اس طرح نظر آتا ہے:

مندرجہ بالا آؤٹ پٹ واضح کرتا ہے کہ نوبار آئٹمز اب اسٹائل شدہ ہیں۔

مرحلہ 4: نیوبار آئٹمز میں ہوور ایفیکٹ شامل کریں۔

جیسا کہ اوپر کی آؤٹ پٹ میں ہے، ہوور اثر نیوبار آئٹم پر دستیاب نہیں ہے۔ دونوں کو شامل کرنے کے لیے، ' سرخی 'کلاس جو تفویض کی گئی ہے'

'ٹیگ۔ اس کے بعد، شامل کریں ' : ہوور ' کے ساتھ سلیکٹر ' عمل نوبار آئٹمز پر ہوور اثر لاگو کرنے کے لیے کلاس:

.act:ہوور {

سرحد : 2px ٹھوس سفید؛

رنگ : نیلے بنفشی

}

سرخی {

متن- سیدھ میں لانا : مرکز

مارجن: 18 %0px;

}

مندرجہ بالا کوڈ کی وضاحت ذیل میں فراہم کی گئی ہے:

• سب سے پہلے، سیٹ کریں ' سرحد '2px قسم کا ٹھوس اور ایک سفید تفویض کریں' رنگ ' اس کے ساتھ، سیٹ کریں ' نیلے بنفشی ” رنگ صرف اس صورت میں جب صارف کی طرف سے نیوبار آئٹمز پر ماؤس ہوور کیا جاتا ہے۔
• اگلا، منتخب کریں ' سرخی 'کلاس کریں اور اس کی سیدھ کو' پر سیٹ کریں مرکز اور سیکشن کو بڑا بنانے کے لیے کچھ مارجن فراہم کریں۔

مندرجہ بالا کوڈ پر عمل کرنے کے بعد، ہیڈر کی حتمی شکل اس طرح نظر آتی ہے:

مندرجہ بالا آؤٹ پٹ دکھاتا ہے کہ ہیڈر HTML اور CSS کا استعمال کرتے ہوئے بنایا گیا ہے۔

نتیجہ

HTML فائل میں، '

' ٹیگ ہیڈر کے لیے ایک سیکشن بنانے کے لیے استعمال ہوتا ہے۔ اس کے بعد، صارف ہیڈر سیکشن کو بڑھانے کے لیے سی ایس ایس خصوصیات جیسے پیڈنگ اور بیک گراؤنڈ امیجز کا اطلاق کر سکتے ہیں۔ یہ تمام ہیڈر عناصر پر لاگو ہوتا ہے جیسے نیویگیشن بار۔ نیویگیشن بار بنانے کے لیے، صارفین '