Class 10: Web design and development (menu bar তৈরি করা। )

 WEB DESIGN AND DEVELOPMENT

আজকের 10ম ক্লাসে আমরা শিখবোঃ Menu bar তৈরি করা।

Menu bar তৈরি করতে গিয়ে যে সকল বিষয় গুলো আসবেঃ

Topic 18: Class attribute এর পরিবর্তে id এর বেবহার।

Topic 19: Box shadow.

Topic 20: Text decoration.

Topic 21: List style (CSS এর মাধ্যমে।)

Topic 22: Hover Effect.

Topic 23: Background image.

Topic 24: Button তৈরি।

Topic 25: Padding (Top, Right, Bottom, Left )

Topic 18

Class attribute এর পরিবর্তে id এর বেবহার।

1. HTML এ আমরা div নেই। div এর starting এবং closing টেগ দেবো।

                    <div> </div>

2. Starting টেগ এর ভিতরে আমরা id attribute নিবো class attribute বাদ দিয়ে।

                      <div id=" "></div>

3. id এর ভিতরে একটা কিছু লিখে কল করবো। যেমন:"topic". আগে যেমন class attribute এর ভিতরে কল করতাম ঠিক তেমনি id এর ভিতরে কল করলাম।

                        <div="topic"> </div>

4. CSS এর ভিতরে আমরা # দিবো, তারপর যেটা দিয়ে আমরা id কল করেছিলাম সেটা লিখবো তারপরে সেকেন্ড ব্রেকট।

                        #topic{}

5. এই সেকেন্ড ব্রেকেট এর ভিতরে আমরা height, width, background ইত্যাদি edit option নিয়ে আমরা

    edit করবো।

                        #topic{height:200px; 

                                   width:100%; 

                                    background:gray;}

id নেওয়ার অনেক সুবিধা আছে। অনেকটা dynamic হয়ে যায়।

Topic 19

CSS এ Box-shadow property এর ব্যবহার।

1. আমরা CSS এ box-shadow নিব। আমরা তিনবার pixel নেবো। প্রথম যে পিক্সেল টা নেব সেটা লম্বা-লম্বিভাবে যে shadow টা আসে সেটা। আমরা যেকোন pixel নিতে পারি 10px, 5px ইত্যাদি। তারপর দুই নাম্বার যে পিক্সেলটা নিবো সেটা horizontal ছায়া। এবং তিননাম্বারটা হচ্ছে shadow effect কতটুকু আসবে সেটা। এবং আমরা color select করে দিবো, কি রং নিয়ে shadow হবে সেটা।

#topic{

             box-shadow: 10px; 10px; 5px; gray;

            }

2. এ কাজটি করতে আমরা margin কে auto করে দিবো।

আমরা এই topic নামের id এর div এর ভিতরে আরেকটা div নেব, তার id নেব।এটাকে আমি header হিসাবে নিব। আমারা web page এর উপরে menu bar বানাব এই div দিয়ে।  

<div="topic">

<div id="header"></div>

 </div>

এখন css এ # চিহ্ন দিয়ে header তারপর second bracket এবং এর ভিতরে edit option গুলা নিব।

#topic{ height: 80px;

             width: 100%;

             background: 

           }

Topic 20