'বা' <বিভাগ> 'ট্যাগগুলিও ব্যবহার করা যেতে পারে তবে এটি ব্যবহার করা একটি ভাল অভ্যাস' <হেডার> ট্যাগ পরবর্তী, একটি বরাদ্দ করুন ' হেডার হেডার বিভাগে CSS শৈলী প্রয়োগ করার জন্য ক্লাস। এর পরে, যোগ করুন '

'এটিতে ট্যাগ করুন এবং এটিকে 'এর একটি ক্লাস বরাদ্দ করুন শিরোনাম 'কন্টেন্ট প্রদর্শন করতে 'লিনাক্সহিন্টে স্বাগতম!':

<হেডার ক্লাস = 'শিরোনাম' >

< h1 ক্লাস = 'শিরোনাম' > Linuxhint-এ স্বাগতম! < / h1 >

< / হেডার>

এর পরে, নির্বাচন করুন ' <হেডার> ট্যাগ ক্লাস এবং নিম্নলিখিত শৈলী বরাদ্দ করুন:

---

---

.হেডার {

ব্যাকগ্রাউন্ড-ইমেজ: url ( '../bg.jpg' ) ;

পটভূমি- আকার : আবরণ;

background-repeat: no-repeat;

রঙ : সাদা ধোঁয়া;

ব্যাকগ্রাউন্ড-অবস্থান: শীর্ষ;

প্যাডিং: 0px 20px 20px 20px;

}

উপরের কোডের ব্যাখ্যা নিচে উল্লেখ করা হলো:

• প্রথমে ছবিটি সেট করুন ' bg.jpg ' ব্যবহার করে হেডার বিভাগের জন্য একটি পটভূমি হিসাবে ব্যাকগ্রাউন্ড-ইমেজ 'সম্পত্তি।
• পরবর্তী, ' ব্যাকগ্রাউন্ড সাইজ ' এবং ' পটভূমি পুনরাবৃত্তি ” বৈশিষ্ট্যগুলি যথাক্রমে চিত্রের আকার সেট করতে এবং চিত্রের পুনরাবৃত্তি বন্ধ করতে ব্যবহৃত হয়।
• এর পরে, 'এর সাহায্যে টেক্সট এবং ছবির অবস্থানের রঙ শীর্ষে সেট করুন রঙ ' এবং ' ব্যাকগ্রাউন্ড-অবস্থান ' বৈশিষ্ট্য।
• শেষ পর্যন্ত, ' প্যাডিং হেডার বিষয়বস্তু এবং সীমানার মধ্যে একটি স্থান নির্ধারণের জন্য সম্পত্তি ব্যবহার করা হয়।

উপরের কোডটি কার্যকর করার পরে, ওয়েবপৃষ্ঠাটি এইরকম দেখায়:

উপরের আউটপুটটি দেখায় যে হেডার বিভাগটি তৈরি করা হয়েছে এবং এটিতে CSS শৈলী প্রয়োগ করা হয়েছে।

ধাপ 2: একটি নেভিগেশন বার তৈরি করুন

শিরোনামে বেশিরভাগ ক্ষেত্রে একটি নেভিগেশন বারও থাকতে পারে। নববার তৈরির জন্য HTML “ <কোনও> ” ট্যাগ খুব দরকারী হতে পারে। তাই, ' ব্যবহার করে navbar আইটেম যোগ করুন ট্যাগ করুন এবং একটি ক্লাস বরাদ্দ করুন আইন ”:

<হেডার ক্লাস = 'শিরোনাম' >

<কোনও>

< ক ক্লাস = 'আইন' href = '#' >বাড়ি< / ক >

< ক ক্লাস = 'আইন' href = '#' >পরিষেবা< / ক >

< ক ক্লাস = 'আইন' href = '#' >আমাদের সম্পর্কে< / ক >

< ক ক্লাস = 'আইন' href = '#' >আমাদের সাথে যোগাযোগ করুন< / ক >

< ক ক্লাস = 'আইন' href = '#' >নতুন আগমন< / ক >

< / না>

< br < br >

< h1 ক্লাস = 'শিরোনাম' লিনাক্সহিন্টে স্বাগতম! < / h1 >

< / হেডার>

উপরের কোডটি কার্যকর করার পরে, ওয়েবপৃষ্ঠাটি এইরকম দেখায়:

উপরের আউটপুটটি ব্যাখ্যা করে যে নেভিবার আইটেমগুলি ' বাড়ি ', ' সেবা ', ' আমাদের সম্পর্কে ', ' যোগাযোগ করুন ' এবং ' নতুন আগমন ' তৈরী করা হয়েছে.

ধাপ 3: Navbar আইটেমগুলিতে শৈলী প্রয়োগ করুন

নেভিবার আইটেম স্টাইল করতে, ' আইন ” ক্লাস করুন এবং নিম্নলিখিত CSS শৈলী বৈশিষ্ট্যগুলি বরাদ্দ করুন:

.আইন {

পাঠ্য-সজ্জা: কোনোটিই নয়;

রঙ : সাদা;

প্রদর্শন ব্লক;

প্যাডিং: 15px;

হরফ- আকার : বড়;

float: বাম;

মার্জিন: 0px 20px;

}

উপরের কোডের ব্যাখ্যা হল:

• প্রথমত, ' পাঠ্য-সজ্জা ' এর পূর্বনির্ধারিত স্টাইলিং অপসারণ করতে ' সম্পত্তি 'কেউ নয়' এ সেট করা হয়েছে ট্যাগ
• ব্যবহারকারীর জন্য পাঠ্য দৃশ্যমানতা উন্নত করতে, ' সাদা ' এবং ' বড় ' মান প্রদান করা হয় ' রঙ ' এবং ' অক্ষরের আকার 'সম্পত্তি।
• এর পরে, ' প্রদর্শন ' এবং ' ভাসা 'বৈশিষ্ট্য সাহায্য করে' ” ট্যাগ একই লাইনে প্রদর্শিত হবে।
• শেষ পর্যন্ত, ' প্যাডিং ' এবং ' মার্জিন ' বৈশিষ্ট্য মান প্রতিটি ' ' ট্যাগের মধ্যে স্থান তৈরি করতে ব্যবহৃত হয়।

উপরের কোডটি কার্যকর করার পরে, ওয়েবপৃষ্ঠাটি এইরকম দেখায়:

উপরের আউটপুটটি দেখায় যে navbar আইটেমগুলি এখন স্টাইল করা হয়েছে।

ধাপ 4: Navbar আইটেমগুলিতে হোভার ইফেক্ট যোগ করুন

উপরের আউটপুটের মতো, নেভবার আইটেমে হোভার প্রভাব পাওয়া যায় না। উভয় যোগ করতে, নির্বাচন করুন ' শিরোনাম ' ক্লাস যা 'কে বরাদ্দ করা হয়েছে

ট্যাগ এর পরে, যোগ করুন ' : ঘোরা ' সহ নির্বাচক ' আইন ” ক্লাস নেভিবার আইটেমগুলিতে হোভার প্রভাব প্রয়োগ করতে:

.act: হোভার {

সীমান্ত : 2px কঠিন সাদা;

রঙ : নীল বেগুনি;

}

শিরোনাম {

পাঠ্য- সারিবদ্ধ : কেন্দ্র;

মার্জিন: 18 % 0px;

}

উপরের কোডের ব্যাখ্যা নিচে দেওয়া হল:

• প্রথমে সেট করুন ' সীমান্ত একটি 2px ধরনের কঠিন এবং একটি সাদা বরাদ্দ করুন রঙ ” এর সাথে, সেট করুন ' নীল বেগুনি ” শুধুমাত্র যখন মাউস নেভিবার আইটেমগুলিতে ব্যবহারকারী দ্বারা ঘোরানো থাকে তখনই রঙ।
• এরপরে, নির্বাচন করুন ' শিরোনাম ' ক্লাস করুন এবং এর প্রান্তিককরণ ' এ সেট করুন কেন্দ্র ” এবং বিভাগটিকে বড় দেখাতে কিছু মার্জিন প্রদান করুন।

উপরের কোডটি কার্যকর করার পরে, হেডারের চূড়ান্ত চেহারাটি এইরকম দেখায়:

উপরের আউটপুটটি দেখায় যে হেডারটি HTML এবং CSS ব্যবহার করে তৈরি করা হয়েছে।

উপসংহার

HTML ফাইলে, “

” ট্যাগটি হেডারের জন্য একটি বিভাগ তৈরি করতে ব্যবহৃত হয়। এর পরে, ব্যবহারকারীরা হেডার বিভাগকে উন্নত করতে প্যাডিং এবং ব্যাকগ্রাউন্ড ইমেজের মতো CSS বৈশিষ্ট্য প্রয়োগ করতে পারেন। এটি সমস্ত শিরোনাম উপাদান যেমন একটি নেভিগেশন বার প্রযোজ্য. একটি নেভিগেশন বার তৈরি করতে, ব্যবহারকারীরা '