HTML বাংলা টিউটোরিয়াল পর্ব ০৩। Use of element
HTML বাংলা টিউটোরিয়াল ০৩ পর্বে আপনাদের সবাইকে ঢাকা আইটি ক্লাব এর পক্ষ হতে স্বাগতম। আজকে আমরা element বিষয় নিয়ে আলোচনা করবো। ওয়েবসাইট তৈরী করতে আমরা বিভিন্ন element ব্যবহার করে থাকি। এইচটিএমএল এর মধ্যে যে সকল element ব্যবহার হয়ে থাকে তা নিচে আলোচনা করা হলো।
বিভিন্ন ধরনের Element এর ব্যবহারঃ
Title Element : ডকুমেন্ট বা ওয়েব পেজের একটি নির্ধারিত নাম দেওয়ার জন্য টাইটেল এলিমেন্ট ব্যবহার করা হয়। এই এলিমেন্ট <HEAD> এলিমেন্টের ভিতরে অবস্থান করে থাকে।
এলিমেন্টের ফরম্যাটঃ <title>………………………….</title>
কোডিং পদ্ধতিঃ
Notpad খুলে নিন্মোক্ত কোডিং লিখে নিদিষ্টি ফাইল নামে সেভ করুন।
<html>
<head>
<title>Dhaka IT Club</title>
</head>
<body>
</body>
</html>
ব্রাউজার দিয়ে ওয়েব পেজটি ওপেন করলে নিম্নরূপ ফলাফল পাওয়া যাবে।
element
০১। body Element এর ব্যবহারঃ
</head> এলিমেন্ট শেষ হবার পর <body> এলিমেন্ট শেষ হয়। ওয়েব পেজ বা ডকোমেন্টের মূল অংশ <body> অংশে থাকে। এটি একটি ডাবল ট্যাগ হওয়ার কারনে <body> দিয়ে শুরু হবে এবং </body> দিয়ে এই ট্যাগ শেষ হয়।
এলিমেন্টের ফরম্যাটঃ <body>………………………….</body>
২। Comments কমেন্ট এর ব্যবহারঃ
আমরা বিভিন্ন সময় প্রোগ্রামের মধ্যে কোন মন্তব্য লিখতে চাইলে ট্যাগের চিহেৃর সাথে বিস্ময়বোধক চিহৃ (!) ও (–) ড্যাস ব্যবহার করে কমেন্ট লিখে থাকি।
কোডিং পদ্ধতিঃ
<– This is comments Option–>
# # # এ পর্যায়ে আমরা Body Option এ Element ব্যবহার করে কোডিং করা শিখবো। # # #
কোডিং পদ্ধতিঃ
ব্রাউজার দিয়ে ওয়েব পেজটি ওপেন করলে নিম্নরূপ ফলাফল পাওয়া যাবে।
একইভাবে নিচে যে সকর Element নিয়ে আলোচনা করা হয়েছে তা কোড এডিটর ওপেন করে বডি অপশনে কোডিং করুন এবং ফলাফল দেখুন। এভাবে প্যাকটিকস করতে খাকুন। অবশ্যই প্রতিটি Element এর শেষে লাইন ব্রেক <br /> ব্যবহার করুন। এতে করে আপনি প্রতিটি Element এর ফলাফল নিচে নিচে আলাদা লাইনে দেখতে পারবেন।
৩। BR বা Line Break Element ব্যবহার
কোন Text বা লেখা কয়েকটি লাইনে লেখার পরও ব্রাউজারে সমস্ত Text বা লেখা এক লাইনে প্রদর্শন করে। Text বা লেখা বিভিন্ন লাইনে প্রদর্শন করার জন্য এই <br> নামে Empty ট্যাগ ব্যবহার করা হয়।
ওপেনিং ট্যাগ হিসেবে এর ব্যবহার হয় না, এটিকে ক্লোজিং ট্যাগ হিসেবে ব্যবহার করা হয়। কোডিং হবে
<br /> অর্থাৎ শেষে Greater than এর আগে একটি ফাঁকা ঘর (Black Space) এবং একটি ব্যাক স্লাস ব্যবহার করতে হবে। অর্থাৎ HTML4 হতে শুরু করে XHTML,XML, HTML5 এ ক্লোজিং ট্যাগ ছাড়া কোন এলিমেন্ট গ্রহণযোগ্য নহে।
কোডিং পদ্ধতিঃ
Md Akash Ahmed <br />
Rony Ahmed <br />
Midhul Mahamdu <br />
এখানে প্রতিটি লেখা বা নামের শেষে <br /> ট্যাগ ব্যবহার করা হয়েছে।
৪। Bold Element
লেখার কোন বিশেষ অংশকে Bold বা গাঢ় করার জন্য এই ট্যাগ ব্যবহার করা হয়।
কোডিং পদ্ধতিঃ
<b>………………………….</b>
৪। Italics Element
লেখার কোন বিশেষ অংশকে সামান্য বাঁকানো ভাবে উপস্থাপন করার জন্য এই ট্যাগ ব্যবহার করা হয়।
কোডিং পদ্ধতিঃ
<i>………………………….</i>
৫। Strong Element
লেখার কোন বিশেষ অংশকে আরও গাঢ় করার জন্য এই ট্যাগ ব্যবহার করা হয়।
কোডিং পদ্ধতিঃ
< Strong>………………………….</Strong>
৬। Big Element
লেখার কোন বিশেষ অংশকে নরমার সাইজের তুলনায় বড় করে উপস্থাপন করার জন্য এই ট্যাগ ব্যবহার করা হয়। (এটি HTML5 এ সাপোর্ট করে না)
কোডিং পদ্ধতিঃ
<big>………………………….</big>
৭। Small Element
লেখার কোন বিশেষ অংশকে নরমার সাইজের তুলনায় ছোট করে উপস্থাপন করার জন্য এই ট্যাগ ব্যবহার করা হয়।
কোডিং পদ্ধতিঃ
<small>………………………….</small>
৮। Subscript Element
লেখার কোন বিশেষ অংশকে মূল লাইনের একঘর নিচে স্থাপনের জন্য এই ট্যাগ ব্যবহার করা হয়।
কোডিং পদ্ধতিঃ
<sub>………………………….</sub>
Example: A<sub>2</sub>
৯। Superscript Element
লেখার কোন বিশেষ অংশকে মূল লাইনের একঘর উপরে স্থাপনের জন্য এই ট্যাগ ব্যবহার করা হয়।
কোডিং পদ্ধতিঃ
<super>………………………….</super>
Example: A<super>2</super>
১০। Emphasis Element
লেখার কোন বিশেষ অংশকে একটু ইটালিক একটু গাঢ় ইফেক্ট দেওয়ার জন্য এই ট্যাগ ব্যবহার করা হয়।
কোডিং পদ্ধতিঃ
<em>………………………….</em>
১১। Delete Element
লেখার কোন বিশেষ অংশকে কেটে দেওয়া বা মাঝ বরাবর দাগ থাকা অবস্থার ইফেক্ট আনার জন্য এই ট্যাগ ব্যবহার করা হয়।
কোডিং পদ্ধতিঃ
<del>………………………….</del>
১২। Insert Element
লেখার কোন বিশেষ অংশকে আন্ডারলাইন করা বা লেখার নিচে দাগ দেওয়ার জন্য এই ট্যাগ ব্যবহার করা হয়।
কোডিং পদ্ধতিঃ
<ins>………………………….</ins>
১৩। Underline Element
লেখার কোন বিশেষ অংশকে আন্ডারলাইন করা বা লেখার নিচে দাগ দেওয়ার জন্য এই ট্যাগ ব্যবহার করা হতো। এই ট্যাগের ফরম্যাট ছিল <u>………………………….</u> . এটি বদলে এখন সিএসএস এ স্টাইল হিসাবে {text-decoration: underline;} ব্যবহার করা হয়। পরবর্তীতে আমরা যখন সিএসএস শিখবো তখন এ বিষয়ে বিস্তারিত আলোচনা করবো।
১৪। Code Element
লেখার কোন বিশেষ অংশকে যদি ফিক্সড-উইডথ ফরম্যাট অর্থাৎ প্রোগ্রামিং এর সময় যে স্টাইলে কোড লেখা হয় সেই স্টাইলে লিখতে চাইলে এই ট্যাগ ব্যবহার করা হয়।
কোডিং পদ্ধতিঃ
<code>………………………….</code>
১৫। Cite Element
লেখার কোন বিশেষ অংশকে নরমার ফন্ট থেকে একটু আলাদা ভাবে প্রকাশ করার জন্য এই ট্যাগ ব্যবহার করা হয়। এটি সাধারণত রেফারেন্স হিসাবে উপস্থাপনের জন্য ব্যবহার করা হয়ে থাকে।
কোডিং পদ্ধতিঃ
<cite>………………………….</cite>
১৬। Definition Element
লেখার কোন বিশেষ অংশকে নরমার ফন্ট থেকে একটু আলাদা ভাবে প্রকাশ করার জন্য এই ট্যাগ ব্যবহার করা হয়। এটি সাধারণত ডেফিনেসন বা সঙ্গা উপস্থাপনের জন্য ব্যবহার করা হয়ে থাকে।
কোডিং পদ্ধতিঃ
<dfn>………………………….</dfn>
১৭। Address Element
এই ট্যাগ ব্যবহার করে আমরা ওয়েব পেজের অথরের নাম, ঠিকানা নির্দিষ্ট করে দিতে পারি। এতে অক্ষর গুলো ইটালিক দেখা যাবে। এতে করে সম্পূর্ণ ডকোমেন্ট হতে কিছু লেখা বা অংশকে আলাদা ভাবে চেনার উপায় থাকে।
কোডিং পদ্ধতিঃ
<address>………………………….</address>
১৮। Paragraph Element
ডকোমেন্টে নির্দিষ্ট সময় অন্তর অন্তর প্যারাগ্রাফ বা ফাঁকা লাইন দরকার হয় বিধায় এই ট্যাগ ব্যবহার করা হয়। সাধারণত আমরা কোন ডকোমেন্টকে প্যারাগ্রাফ আকারে উপস্থাপন করতে এই ট্যাগ ব্যবহার করে থাকি।
কোডিং পদ্ধতিঃ
<p>………………………….</p>
১৯। Heading Element
এই ট্যাগ দ্বারা লেখাকে বিভিন্ন আকৃতির শিরোনাম দেওয়া যায়। যেমন: h1 হতে h6 পর্যন্ত মোট ছয়টি লেবেল রয়েছে। আমরা আমাদের ডকোমেন্টের প্রয়োজন মত শিরোনাম দিতে পারি।
কোডিং পদ্ধতিঃ
<h1>………………………….</h1>
<h2>………………………….</h2>
<h3>………………………….</h3>
<h4>………………………….</h4>
<h5>………………………….</h5>
<h6>………………………….</h6>
