Wednesday , 16 October 2019
Home » Web Design » HTML বাংলা টিউটোরিয়াল (পর্ব-৭),এইচটিএমএল টেক্সট ফরম্যাটিং।

HTML বাংলা টিউটোরিয়াল (পর্ব-৭),এইচটিএমএল টেক্সট ফরম্যাটিং।

হ্যালো বন্ধুরা

আসসালামু আলাইকুম

সবাই কেমন আছেন<আজকে আম আপনাদের জন্য নিয়ে এসেছি HTML বাংলা টিউটোরিয়াল (পর্ব-৭),এইচটিএমএল টেক্সট ফরম্যাটিং। চলুন দেখেনেই আজকের পর্ব-

আমরা যখন কোন ওয়েবসাইট ভিজিট করি, তখন সেখানে বিভিন্ন ধরণের টেক্সট (লেখা) দেখতে পাই।

বিভিন্ন ধরণের টেক্সট বলতে – টেক্সটকে বিভিন্নভাবে সাজানো হয়ে থাকে। যেমন ঃ লেখাকে বোল্ড করা, আন্ডারলাইন করা, প্যারাগ্রাফ আকারে লিখা, লেখার কালার পরিবর্তন করা, ফন্ট পরিবর্তন করা ইত্যাদি। আপনারা যারা মাইক্রোসফট ওয়ার্ড এ কাজ করেছেন, তারা জানেন – লেখাকে এমন বিভিন্ন আঙ্গিকে প্রকাশ করা কেবল কিছু অপশনে ক্লিক করা মাত্র। যেমন ঃ ” b ” বাটনে ক্লিক করে লেখাকে বোল্ড করা, ” Font color” অপশন থেকে বিভিন্ন কালার নির্বাচন করা, ” Font size ” অপশন থেকে লেখার আকার পরিবর্তন করা ইত্যাদি। এইচটিএমএল এও বিষয়গুলো অনেকটা একই, তবে পার্থক্য হলো মাইক্রোসফট ওয়ার্ড এ যেমন কাজগুলো আমরা ক্লিক করে করে করেছি, আর এখানে ম্যানুয়ালী কোড লিখে লিখে করতে হবে। প্রয়োজন হবে বিভিন্ন ইলিমেন্ট ব্যবহার করার। ব্যবহারের দিক থেকে এসব ইলিমেন্টসমূহকে আবার বিভিন্ন ভাগে
ভাগ করা হয়েছে। এখন আমরা এসব ইলিমেন্টস সম্পর্কে বিস্তারিত জানবো।

Heading ( <h1> থেকে <h6>) Elements

আমরা যখন পত্র-পত্রিকায় কোন লেখা পড়ি, তখন লেখার উপর শিরোনাম দেখে থাকি। ঠিক তেমনি ওয়েবসাইটেও বিভিন্ন আর্টিকেল, পোস্ট, ইমেজ অ্যালবাম ইত্যাদির উপর শিরোনাম ব্যবহার করা হয়ে থাকে, যাতে করে পাঠকরা এক নজরে পুরো বিষয়বস্তুটি বুঝে নিতে পারে। আর ওয়েবপেজে এসব বিষয়ে শিরোনাম ব্যবহার করার ক্ষেত্রে এইচটিএমএল এর হেডিং ইলিমেন্ট (< h1 > থেকে < h6 >) ব্যবহৃত হয়ে থাকে। এইচটিএমএল এ ছয় ধরণের হেডিং ইলিমেন্ট রয়েছে। যথা ঃ

1. h1 (Heading 1)

2. h2 (Heading 2)

3. h3 (Heading 3)

4. h4 (Heading 4)

5. h5 (Heading 5)

6. h6 (Heading 6)

এক্ষেত্রে ব্রাউজার Heading 1 (< h1 >) ইলিমেন্ট এর ভিতর এর লেখাকে সবচেয়ে বড় আকারে প্রদর্শিত করে এবং ক্রমানুসারে এ আকার ছোট হতে থাকে। নিচের উদাহরণের মাধ্যমে বিষয়টি সম্পর্কে পরিষ্কার হওয়া যাক।

চিত্রঃ(এইচটিএমএল হেডিং ১ ইলিমেন্ট ব্যবহার করে ব্রাউজারে তার আউটপুট দেখা)।

কোড বিশে- ষণ ঃ

উপরের প্রোগ্রামে এইচটিএমএল এর সকল হেডিং ইলিমেন্ট (< h1 > থেকে < h6 >) এর ব্যবহার দেখানো হয়েছে। এখানে হেডিং ১ ইলিমেন্ট (< h1 >……</ h1 > ) এর ভিতর ” This is Heading 1–The largest o।।” লেখাটুকু ব্রাউজারে সবচেয়ে বড় আকারে প্রদর্শিত হবে। হেডিং ২ ইলিমেন্ট (< h2 >………</ h2 > ) এর ভিতর ” “This is Heading 2 – The larger one ” লেখাটুকু ব্রাউজারে হেডিং ১ ইলিমেন্ট এর চাইতে ছোট আকারে প্রদর্শিত হবে। এভা। ক্রমানুসারে লেখার আকার ছোট হয়ে আসবে।এখন ফাইলটি ব্রাউজারে রান করালে নিচের মতো আউটপুট প্রদর্শিত হবে।

চিত্র : (এইচটিএমএল এর সকল হেডিং ইলিমেন্ট ব্যবহার করে ব্রাউজারে তার আউটপুট দেখা)।

উপরে আমরা এইচটিএমএল এর সকল হেডিং ইলিমেন্টসমূহের আউটপুট দেখতে পাচ্ছি। এখন প্রশ্ন হচ্ছে, কোন ক্ষেত্রে কোন হেডিংটি ব্যবহার করবো?? হ্যা !! মূলত বিষয়বস্তুর গুরূত্বপূর্ণতার ক্রম অনুসারে এসব হেডিং ইলিমেন্ট এর ব্যবহা হয়ে থাকে। কোন বিষয়বস্তুর প্রধান সেকশন/শিরোনামকে হেডিং ১ (<h1>) ইলিমেন্ট এর মধ্যে লেখা হয়ে থাকে।

তার চেয়ে একটু কম গুরুত্বপূর্ণ সেকশনকে হেডিং ২ (<h2>) ইলিমেন্ট এর মধ্যে লেখা হয়ে থাকে।

আবার তার চেয়েও একটু কম গুরূত্বপূর্ণ সেকশনকে হেডিং ৩ (<h3>) ইলিমেন্ট এর মধ্যে লেখা হয়ে থাকে। তবে এখানে লক্ষ্যনীয় বিষয় হচ্ছে, উপরের প্রোগ্রামে ব্যবহার করা (<h4>, <h5> এবং <h6>) হেডিংসমূহের আউটপুট অনেকটা স্বাভাবিক টেক্সট এর
মতোই প্রদর্শিত হচ্ছে। এক্ষেত্রে ভিজিটর বুঝতে পারবে না যে, কোনটি আসলে হেডিং আর কোনটি নরমাল টেক্সট।

তাছাড়া, সার্চ ইঞ্জিন অপটিমাইজেশন এর ক্ষেত্রেও যথাযথ হেডিং ইলিমেন্ট এর ব্যবহার একটি গুরূত্বপূর্ণ বিষয়। তাই হেডিং ইলিমেন্ট ব্যবহারে যথাযথ কৌশল ব্যবহার করা যেতে পারে। আর এমন বিভিন্ন কৌশলসমূহ আমাদের এস ই ও টিউটোরিয়ালে বিস্তারিত ভাবে বোঝানো হচ্ছে,যেগুলো অনুসরন করে আপনিও আপনার ওয়েবসাইটকে সার্চ ইঞ্জিন রেজাল্টের শীর্ষে নিয়ে আসতে পারেন।নিচে হেডিং ইলিমেন্ট এর আরো একটি উদাহরণ এর মাধ্যমে বিষয়টি সম্পর্কে পরিষ্কার হওয়া যাক ঃ

উপরের প্রোগ্রামটিতে আমি ” Web Designing ” লেখাটিতে হেডিং ১ (<h1>) ব্যবহার করেছি, কারণ-এই লাইনটিকে আমি প্রধান শিরোনাম হিসেবে উল্যেখ করতে চাচ্ছি। পরবর্তীতে আমি ” HTML (HyperText Markup Language ” এবং ” “CSS (Cascading Style Sheet) ” এই দুটি জায়গায় হেডিং ২ (<h2>) ব্যবহার করেছি, কারণএই লেখা দু’টিকে আমি ” Web Designing ” এর উপ-শিরোনাম হিসেবে উল্যেখ করতে চাচ্ছি। আশা করি বিষয়টি বুঝতে পেরেছেন।

এখন উপরের প্রোগ্রামটি ব্রাউজারে রান করালে নিচের মতো আউটপুট প্রদর্শিত হবে।

“Web Designing” লেখাটিতে হেডিং ১ ব্যবহার করার কারণে এটি ব্রাউজারে সবচেয়ে বড় আকারে প্রদর্শিত হচ্ছে। অন্যদিকে, “HTML (HyperText Markup Language)”
এবং “CSS (Cascading Style Sheet)” লেখা দু’টিতে হেডিং ২ ব্যবহার করার কারণে এটি ব্রাউজারে হেডিং ১ এর চাইতে কিছুটা ছোট আকারে প্রদর্শিত হচ্ছে।

তাহলে বন্ধুরা আমরা আজকের পর্বে এইটুকু জানলাম যে কীভাবে এইচটিএমএল এ হেডিং লিখতে হয় পরবর্তি পর্বে আমরা জানব কিভাবে হেডিং এলিমেন্ট এ এট্রিবিউট ব্যবহার করতে হয়।

আজকের পর্ব অনেক বড় হয়ে যাচ্ছে তাই আজকের মত বিদায় নিচ্ছি এখানেই।

আল্লাহ হাফেজ

About Mir Md Aminul Haque

প্রযোক্তিকে ভালবাসি ,নিত্য জানতে চাই নতুন কিছু,ছড়িয়ে দিতে চাই উজার করে নিজের জ্ঞান সবার মাঝে।

Check Also

বাজেটের মধ্যে Core i3 ডেস্কটপ নিজ হাতে তৈরী করুন

হ্যলো বন্ধুরা,আজকে আমি আপনাদের জন্য নিয়ে এসেছি একদম সুপার ডুপার একটা পোস্ট,পোস্ট টা হচ্ছে বাজেটের…

Leave a Reply

Your email address will not be published.