Rank AI Studio

এইচটিএমএল টিউটোরিয়াল | এইচটিএমএল হেডিং টিউটোরিয়াল
Part: 7
---------------------------------------------------------------------------------
শিরোনাম বা হেডিং আকারে বড় ফন্টের লেখা ব্রাউজারে প্রদর্শনের জন্য এইচটিএমএল এ রয়েছে ৬ ধরনের হেডিং ট্যাগ। এর মধ্যে সবচেয়ে বড় হচ্ছে

এভাবে , ... h6 পর্যন্ত

যেমন:
A long flow of text

Unbroken by title,

Subtitles, and other headers.

Crosses the eyes and numbs the mind.

Not to mention the fact that.

It makes it nearly impossible to scan the text for a specific topic

এইচটিএমএল টিউটোরিয়াল | এইচটিএমএল ট্যাগ টিউটোরিয়াল Part: 4
---------------------------------------------------------------------------------
আমরা যেকোন একটা এইচটিএমএল ডকুমেন্ট দেখি সেখানে অবশ্যই ট্যাগ থাকে। যেমন নিচের ডকুমেন্ট টি দেখুন এখানে , , , ইত্যাদি এক একটি ট্যাগ।

সোজা কথায় less than () চিহ্ন দিয়ে মোড়ানো একটা শব্দকে (যেটা এইচটিএমএল অনুমোদিত) ট্যাগ বলে। যেমন html শব্দটি এই দুই চিহ্ন দিয়ে মুড়িয়ে যখন HTML ডকুমেন্টে লিখি তখন এটার নাম html ট্যাগ। এরুপ শত শত ট্যাগ আছে এইচটিএমএল এ। যেমন প্যারাগ্রাফ ট্যাগ , হেডিং ট্যাগ ইত্যাদি।




HTML Tag tutorial in Business Development Hub.




Business Development Hub's Demo Heading

Demo content goes here.




প্রায় সব ট্যাগেরই একটা সমাপ্তি ট্যাগ থাকে যেমন উপরে ট্যাগটির সমাপ্তি ট্যাগ (closing tag বলা হয়) হচ্ছে আবার এর ক্লজিং ট্যাগ হল এভাবে বাকি সবগুলি।

টেকনিকাল শব্দ যেটা ব্যবহৃত হয় সেটা হচ্ছে শুরুর ট্যাগটিকে বলে opening tag বা start tag আর শেষের ট্যাগটিকে বলে closing tag বা end tag. দুটোই একই শুধু ক্লজিং ট্যাগে একটা ব্যাকস্লাস (/) চিহ্ন বেশি থাকে।

এই ওপেনিং এবং ক্লজিং ট্যাগের ভিতর কনটেন্ট দিতে হয়। যেমন উপরে দিয়েছি।

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

** কিছু কিছু ট্যাগ আছে এগুলির ক্লজিং ট্যাগ নেই যেমন ইনপুট ট্যাগ, ইমেজ ট্যাগ ইত্যাদি। এই ট্যাগগুলি সামান্য একটু ভিন্ন।




দেখুন ইমেজ ট্যাগ শুরু হয়েছে এই চিহ্ন দিয়ে। ইনপুট ট্যাগটিও তদ্রুপ। আর মাঝে যে জিনিসগুলি দেখছেন (src, type ইত্যাদি) এগুলি সংশ্লিষ্ট ট্যাগটির এট্রিবিউট।

* প্রতিটি ট্যাগেই নানান ধরনের এট্রিবিউট ব্যবহার করা যায়। এট্রিবিউট টিউটারিয়াল

* প্রত্যেকটি ট্যাগরই কাজ নির্দিষ্ট করা আছে যেমন আপনার এইচটিএমএল ডকুমেন্টে আপনি যদি প্যারাগ্রাফ দিতে চান তখন ট্যাগের ভিতর তা দিতে হবে, হেডিং দিলে ট্যাগের ভিতর দিতে হবে (বড় ফন্টের হেডিং হলে , সাইজ অনুযায়ী পর্যন্ত আছে)। টেক্সট ফিল্ড দিতে হলে input ট্যাগ, ছবি দিতে চাইলে

এইচটিএমএল টিউটোরিয়াল | এইচটিএমএল এলিমেন্ট টিউটোরিয়াল Part: 3
--------------------------------------------------------
এর আগে এইচটিএমএল ট্যাগ নিয়ে আলোচনা করলাম। একটা start tag (যেমন ) এবং end tag (যেমন ) এর মাঝে যা থাকে তা সহ পুরোটি একটা এলিমেন্ট। একটা এলিমেন্টের ভিতর ট্যাগের মতই এক বা একাধিক এলিমেন্ট থাকতে পারে বা থাকে (এটাকে nested এলিমেন্ট বলে)। নিচের উদাহরনটি দেখুন





Business Development Hub's Demo Heading
Demo content goes here.



এখানে এর ভিতর যত কিছু আছে সব নিয়ে এটা একটা html এলিমেন্ট এরুপ body একটা এলিমেন্ট। একইভাবে বাকিগুলিও এক একটি এলিমেন্ট।

এলিমেন্টের ভিতর এলিমেন্ট থাকতে পারে আবার যেমন এর ভিতর কোন এলিমেন্ট নেই, যে লেখাটি আছে সেটি হচ্ছে এর কনটেন্ট। তাই এর ভিতরের লেখাটিসহ এটা h1 এলিমেন্ট।

এই উদাহরনটি DOC type এও দেয়া আছে, আমাদের অনলাইন এডিটরে কোডটি পেস্ট করে দেখতে পারেন বা নোটপ্যাডে লিখে .html এক্সটেনশন (যেমন index.html বা test.html) দিয়ে সেভ করে ব্রাউজারে খুলুন, এটিই হচ্ছে আউটপুট, একটা বেসিক এইচটিএমএল ডকুমেন্ট বা একটা ওয়েব পেজ।



এই উহরনটিতে মোট ৫টি এলিমেন্ট আছে html এলিমেন্ট, head এলিমেন্ট, body, h1 এবং p এলিমেন্ট।



* ট্যাগের মত এখানে html এলিমেন্টের চাইল্ড এলিমেন্ট হচ্ছে বাকি সবগুলি এলিমেন্ট। আবার body হচ্ছে প্যারেন্ট এবং এর চাইল্ড হচ্ছে h1 ও p এলিমেন্ট। যে এলিমেন্টের ভিতর অন্য এলিমেন্ট থাকে সেটা হচ্ছে প্যারেন্ট এবং ভিতরের গুলি চাইল্ড এলিমেন্ট।



* ট্যাগগুলির শব্দগুলি ছোটহাতের অক্ষরে লিখতে হবে, যেমন এভাবে না দিয়ে এভাবে দিলে এটা একটা গ্রামাটিকাল ভুল। সাথে সাথে end tag টিও দিতে হবে নাহলে একই ভুল হবে।



** যত এলিমেন্ট লেখি না কেন সব body এলিমেন্টের ভিতরই লিখতে হবে, বাকি এলিমেন্ট যেমন head ইত্যাদির ভিতর শুধু নির্দিষ্ট কিছু এলিমেন্ট লেখা যায়। ব্রাউজারে শুধু ঐটুকুরই আউটপুট আসে যেটা body এলিমেন্টের ভিতর থাকে।

ব্লক লেভেল এবং ইনলাইন এলিমেন্ট:

=========================

দুই ধরনের এলিমেন্ট আছে

ব্লকলেভেল এলিমেন্ট : যে এলিমেন্টগুলি বাই ডিফল্ট তার ডানে বামে পুরো জায়গা দখল করে থাকে সেগুলিকে ব্লক লেভেল এলিমেন্ট বলে। অন্যভাবে বলা যায় যে, যে এলিমেন্টগুলি শুরু হয় নতুন লাইনে (যখন ব্রাউজারে প্রদর্শন করবে) সেগুলি ব্লক লেভেল এলিমেন্ট।

div, p, h1, ul, li ইত্যাদি ব্লকলেভেল এলিমেন্ট।



ইনলাইন এলিমেন্ট : যে এলিমেন্টগুলির কারনে নতুন লাইন শুরু হয়না সেগুলি ইনলাইন এলিমেন্ট।

a, i, b, span, strong ইত্যাদি ইনলাইন এলিমেন্ট।








I am a block level element

I am block level element too

This is an inline element
Business Development Hub's link is an inline element