আসুন শিখি HTML [পর্ব-৬]

কেমন আছেন সবাই।আশা করি সবাই ভাল আছেন।

প্রথমেই মিনহাজুল হক শাওন ভাইকে অনেক ধন্যবাদ দিচ্ছি,কারন উনার সফটওয়্যার দিয়ে অনেক সুন্দরভাবে screen shot নিতে পেরেছি।শাওন ভাই আপনাকে অনেক ধন্যবাদ।

আজকে থেকে আমরা আস্তে আস্তে একটু কঠিন এর দিকে যাব।প্রতিদিন অনুশীলন করুন,দেখবেন এইসব কোডিং- ফোডিং  পানির মতন সহজ লাগবে।তো চলুন শুরু করে দেওয়া যাক।

***আজকে আমরা আলোচোনা করব heading element নিয়ে।

***প্রথমে আপনাদের মাথায় আসতে পারে heading element কী?

***ধরুন আপনি একটি paragraph লিখছেন।এখন এই পারাগ্রাফ এর শিরোনাম দিতে হবে।তারপর paragraph এর বিষয়বস্তু।আজকে আমরা শিখব কিভাবে এই শিরোনাম দিতে হয়।

***এই শিরোনাম দিতে যে ট্যাগ ব্যাবহার হরা হয় তা হচ্ছে <h1>…………………</h1>  ট্যাগ।তো আসুন দেখি কিভাবে এই ট্যাগ ব্যাবহার করা যায়।

***এই ট্যাগ ব্যাবহার করা খুবই simple.আপনি যেই লাইনকে শিরোনাম বানাতে চান,সেই লাইন এর শুরুতে <h1>  আর লাইন এর শেষে </h1>  অ্যাড করুন। আসুন এবার এই নিয়ম অনুসারে একটি কোডিং করি।


<html>

<head>

<title>

আমরাও পারি।

</title>

</head>

<body>

<h1>আমরাই পারি এই দেশের প্রতিটি মানুষের মুখে হাসি ফুটাতে।</h1>

<p>আমাদের ছোট দেশটির নাম বাংলাদেশ।এই বাংলার আনাচে কানাচে ছড়িয়ে ছিটিয়ে আছে কিছু উদ্দমি মানুষ।যারা দেশকে ভালবাসে নিজের জীবনের থেকেও বেশী।তারা দেশের জন্য কিছু করে সবার কাছে বলে বেড়ায়  না যে আমি দেশের জন্য এই কাজটা করেছি।তাদের এই অবদান শুধু দেশ জানে আর সে নিযে জানে।এরাই হল সত্তিকারের মানুষ।মানুষের মত মানুষ।আর কিছু মানুষ আছে যেমন আমাদের রাজনীতির রুই-কাতলারা,তারা দেশের জন্য কত কিছু করছে!!!!!!দেশের উন্নয়নের চিন্তায় তাদের নাকি ঘুম আসে না।এই সব রুই কাতলাদের যখন সত্যিকারের মানুষের পাশে দাড়া করাবেন তখন আপনারই অপমান লাগবে যে আপনি ফেরেশতাদের সাথে নরকের কীটকে দাড়া করিয়েছেন।</p>

</body>

</title>

***এখানে <h1>............</h1> দিয়ে heading আর <p>...........</p> দিয়ে paragraph indicate করেছে।

***এবার এটিকে নোটপ্যাড এ লিখে সেভ করে double click করে ওপেন করুন।

***এতক্ষন আমারা শিখলাম কিভাবে heading দেওয়া যায়।এবার আমরা শিখব heading এর নানা রুপ নিয়ে।

***এই লেখাটি মন দিয়ে পড়ুন।কারন পরবর্তীতে অনেক টিউন এ এটার ব্যাবহার রয়েছে।

আমরা যে heading নিয়ে আলোচোনা করেছি তার ৬টি রুপ আছে।আসুন দেখি সেগুলো কি কি?

  1. <h1>............</h1>
  2. <h2>............</h2>
  3. <h3>............</h3>
  4. <h4>............</h4>
  5. <h5>............</h5>
  6. <h6>............</h6>

***আপনাদের মনে প্রশ্ন আস্তে পারে h1,h2,h3,h4,h5,h6 কেন??এবার আসুন এই বিষইয়ে একটু কথা বলি।

***খুবই সহজ ব্যাপার। h1 হতে ক্রমানুসারে যত নিচের দিকে নামতে থাকবে heading তত ছোট হতে থাকবে।মানে <h1>........</h1>  হতে <h2>.......</h2> এর heading ছোট। আর <h6>.......</h6> এর heading সবছেয়ে ছোট।

***তাহলে আসুন এবার বাস্তব উদাহরন দেখি।আপ্নারা আমার সাথে এই কোডিংটুকু লিখুন।


<html>

<head>

<title>

আমরাও পারি।

</title>

</head>

<body>

<h1>আমরাই পারি এই দেশের প্রতিটি মানুষের মুখে হাসি ফুটাতে।</h1>

<h2>আমরাই পারি এই দেশের প্রতিটি মানুষের মুখে হাসি ফুটাতে।</h2>

<h3>আমরাই পারি এই দেশের প্রতিটি মানুষের মুখে হাসি ফুটাতে।</h3>

<h4>আমরাই পারি এই দেশের প্রতিটি মানুষের মুখে হাসি ফুটাতে।</h4>

<h5>আমরাই পারি এই দেশের প্রতিটি মানুষের মুখে হাসি ফুটাতে।</h5>

<h6>আমরাই পারি এই দেশের প্রতিটি মানুষের মুখে হাসি ফুটাতে।</h6>

</body>

</title>

***আমাদের কোডিং লেখা শেষ।এবার এটাকে aya.html নামে সেভ করে double click করে ওপেন করুন।

আশা করি আপনাদের বুঝাতে পেরেছি।আচ্ছা আমি এখন free,ঈদ পর্যন্ত ।তারপর varsity শুরু হবে।আমি চাচ্ছি প্রতিদিন দুটো করে টিউন দিতে।নাকি একটা করে টিউন করব।আমাকে জানাবেন।সবাই ভাল থাকবেন।

Level 0

আমি সাবিহা। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 14 বছর 5 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 98 টি টিউন ও 753 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 3 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

খুব সাধারন একটি মানুষ।সারাদিন কম্পিউটার নিয়ে পড়ে থাকি।মুভি দেখি,ব্লগ এ ব্লগ এ ঘুরাঘুরি করি।পড়ালেখা করতে বরাবরই ভয় লাগে। আর ফেসবুক এ একটা পেজ খুলেছি।যারা সময় পাবেন একটু ঢু মেরে আসবেন।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

Level 0

very good

Level 0

অনেক ধন্যবাদ। তাড়াতাড়ি শেষ করে দিন। আর তর সইছে না। পারলে তিনটাই কইরেন।

    আমি অত ভালো জানি না।যতটুকু জানি তা আপনাদের সাথে শেয়ার করতে ১৫-২০ দিনের বেশি লাগবে না।সাথে থাকবেন।

ভাই ২ টা করেই করতে হবে, প্লিজ ভাই।

    কোন সমস্যা নাই।একটা টিউন পাবেন সকালে আরেকটা পাবেন রাতে।

খুবই সুন্দর টিউন,ধন্যবাদ।২টা করুন তাহলে মনে হয় তাড়াতাড়ি হবে।আগামী পর্বের অপেক্ষায় থাকলাম…..

    কালকে সকালেই পেয়ে যাবেন।কমেন্ট করার জন্য ধন্যবাদ।

Very nice

যদিও ভাল বুঝি নাই তবুও ধন্যবাদ, আবারো ধন্যবাদ টিটি র সাথে থাকার জন্য, আপনাকে সহ মাত্র দুই জন মেয়ে কে দেখলাম টিটি তে, দেশের মেয়ে রা আসলেই টেকনলজিতে অনেক পিছিয়ে আছে।

    এই টিউনটা বুঝতে হলে আগের ৫টা পার্ট পরতে হবে।তাহলে easy লাগবে।

টিউন পড়তে এসে লজ্জা পেয়ে গেলাম :">

আচ্ছা শিরোনামের সাথে ট্যাগ লাগালে কেমন হয়? যেমন এইচটিএমএল পর্ব ৬ – হেড ট্যাগ <h1>
পর্ব ৫ – স্পেস ট্যাগ &nbsp

—–

পর্ব X – ডিভাইড ট্যাগ <div>

এরকম। তাহলে চেইনটা আরো সুন্দর হয়। আর হ্যা, ছবি কিছুটা শ্রিঙ্ক হয়ে গেছে। ছবি ইনসার্ট করার পর প্রোপারটিজে যাবেন, তারপর অ্যাডভান্সড > সিএসএস ক্লাস বক্সের লেখা মুছে দিন। এবার তাহলে ছবির পাশে হালকা ধূসর বর্ডার আসবেনা 🙂 সুন্দর লাগে তখন।

চেইন চালিয়ে যান।

যথারীতি ভালো হয়েছে, চালিয়ে যান। শুভেচ্ছা রইল।

এক সাথে ছয় পর্ব শেষ করলাম।আগামী কাল ইনসাল্লাহ ১৩ পর্ব শেষ হবে।সকালে অফিস আছে বিদায়।

Sis, 1.no coding ar 21 no line & 2.no coding ar 29 no line a hobe naki hobe? aktu bujhaiya dile vhalo hoito. apnar likha chaliye jaben asha kori..

বস যা ভালো হয় ১ম তা ভাল থাকে শেষ পর্যন্ত

মনিরুল মনা

vai eto sundor likhen kivabe? Daruner cheau darun.