ট্যাগ (Tag)
৩। ট্যাগ কি ? Tag গুলোর নাম লেখ ।
HSC ICT-তে HTML ট্যাগগুলিকে সাধারণত তাদের কার্যক্রম বা ব্যবহারের ভিত্তিতে বিভিন্ন শ্রেণিতে ভাগ করা হয়। নিচে HTML ট্যাগগুলির শ্রেণিবিভাগ এবং উদাহরণ দেওয়া হলো:
1. Structural Tags (গঠনমূলক ট্যাগ):
- এই ট্যাগগুলো একটি ওয়েব পেজের কাঠামো নির্ধারণ করে।
- উদাহরণ:
<html>
: HTML ডকুমেন্টের মূল ট্যাগ।<head>
: ডকুমেন্টের শিরোনাম অংশ।<body>
: ডকুমেন্টের মূল বিষয়বস্তু ধারণকারী অংশ।
2. Formatting Tags (ফরম্যাটিং ট্যাগ):
- এই ট্যাগগুলো টেক্সট বা বিষয়বস্তুকে ফরম্যাট করার জন্য ব্যবহৃত হয়।
- উদাহরণ:
<b>
: টেক্সটকে গাঢ় (Bold) করে।<b> Bold </b><i>
: টেক্সটকে তির্যক (Italic) করে। <i> Ittalic </i><u>
: টেক্সটকে আন্ডারলাইন করে। <u> Underline me </u>- <del> Delete করে।
- <sup> Example :(a+b)2
- <sub> Example : H2O
- <p>
3. Heading Tags (শিরোনাম ট্যাগ):
- টেক্সটকে শিরোনাম বা হেডিং আকারে প্রদর্শনের জন্য ব্যবহৃত হয়।
- উদাহরণ:
<h1>
থেকে<h6>
: যেখানে<h1>
সবচেয়ে বড় এবং<h6>
সবচেয়ে ছোট।
4. List Tags (তালিকা তৈরি করার ট্যাগ):
- তালিকা তৈরি করতে ব্যবহৃত হয়। দুই প্রকার। (i) ordered (ii) Unordered
- উদাহরণ:
<ul>
: আনঅর্ডার্ড লিস্ট (বুলেট পয়েন্টে তালিকা)।<ol>
: অর্ডার্ড লিস্ট (সংখ্যায়িত তালিকা)।<li>
: তালিকার প্রতিটি আইটেম।
5. Link and Navigation Tags (লিংক এবং নেভিগেশনের ট্যাগ):
- হাইপারলিংক তৈরি এবং নেভিগেশনের জন্য ব্যবহৃত হয়।
- উদাহরণ:
<a>
: হাইপারলিংক তৈরি। <a href=”link”> ——</a><nav>
: নেভিগেশন বার তৈরি।
6. Image and Multimedia Tags (ছবি এবং মাল্টিমিডিয়া ট্যাগ):
- ছবি, ভিডিও এবং অন্যান্য মিডিয়া সংযুক্ত করতে ব্যবহৃত হয়।
- উদাহরণ:
<img>
: ছবি সংযুক্ত করতে। <img src=”image Name”><audio>
: অডিও ফাইল সংযুক্ত করতে।<video>
: ভিডিও ফাইল সংযুক্ত করতে।
7. Table Tags (টেবিল তৈরি করার ট্যাগ):
- টেবিল তৈরি করতে ব্যবহৃত হয়।
- উদাহরণ:
<table>
: টেবিলের জন্য।<tr>
: টেবিলের সারি।<td>
: টেবিলের সেল।<th>
: টেবিলের হেডার সেল।
8. Form Tags (ফর্ম তৈরি করার ট্যাগ):
- ইউজার ইনপুট নেওয়ার জন্য ব্যবহৃত হয়।
- উদাহরণ:
<form>
: ফর্ম তৈরি করতে।<input>
: ইউজার ইনপুট নেওয়ার জন্য।- <input type=”text”>
- <input type=”password”>
- <input type=”radio”>
- <input type=”submit”>
<button>
: একটি বোতাম তৈরি করতে।<textarea>
: বড় ইনপুট ফিল্ড তৈরি করতে।
9. Semantic Tags (অর্থপূর্ণ ট্যাগ):
- বিষয়বস্তু সম্পর্কে পরিষ্কার অর্থ প্রদান করে।
- উদাহরণ:
<header>
: শিরোনাম অংশের জন্য।<footer>
: ফুটার অংশের জন্য।<article>
: একটি স্বতন্ত্র বিষয়বস্তু।<section>
: ওয়েব পৃষ্ঠার বিভিন্ন অংশ।
10. Empty Tags (শূন্য ট্যাগ):
- এই ট্যাগগুলোর কোনো শেষ ট্যাগ নেই।
- উদাহরণ:
<img>
: ছবি প্রদর্শনের জন্য।<br>
: লাইন ব্রেক।<hr>
: অনুভূমিক রেখা তৈরি করতে।
CSS
html হলো কঙ্কাল আর হল কান,নাক,চোখ ইত্যাদি। মুলত পেজকে সুন্দর করার জন্য এটি ব্যবহার করা হয়। বার্ডে খুবই কম এসেছে। তাই আমি বলব এটা বাদ দিয়ে দিতে।
CSS (Cascading Style Sheets) এর শ্রেণিবিভাগ সাধারণত ব্যবহারের পদ্ধতি এবং এর প্রয়োগের স্থান অনুযায়ী বিভক্ত করা হয়। নিচে CSS-এর প্রধান শ্রেণিবিভাগ এবং তাদের বৈশিষ্ট্য আলোচনা করা হলো:
1. Inline CSS
- সংজ্ঞা: HTML এলিমেন্টের মধ্যে সরাসরি স্টাইল প্রয়োগ করা হয়।
- প্রয়োগের পদ্ধতি: HTML ট্যাগে
style
অ্যাট্রিবিউট ব্যবহার করে। - উদাহরণ:
<p style="color: blue; font-size: 16px;">This is an inline styled paragraph.</p>
- বৈশিষ্ট্য:
- শুধুমাত্র নির্দিষ্ট একটি এলিমেন্টের জন্য কার্যকর।
- দ্রুত এবং সহজে নির্দিষ্ট স্টাইল প্রয়োগ করা যায়।
- কোডের পুনঃব্যবহার কঠিন এবং অগোছালো হতে পারে।
Internal CSS ট্যাগের গঠন:
<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Internal CSS Example</title> <style> /* Internal CSS starts here */ body { background-color: lightblue; } h1 { color: green; font-size: 36px; } p { font-family: Arial, sans-serif; color: darkgray; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph styled with internal CSS.</p> </body> </html>
2. Internal CSS
- সংজ্ঞা: HTML ডকুমেন্টের
<head>
ট্যাগে একটি<style>
ট্যাগ ব্যবহার করে স্টাইল লেখা হয়। - প্রয়োগের পদ্ধতি: HTML পৃষ্ঠার জন্য আলাদা স্টাইল ব্লক তৈরি।
- উদাহরণ:
<head> <style> p { color: red; font-size: 18px; } </style> </head>
- বৈশিষ্ট্য:
- শুধুমাত্র নির্দিষ্ট HTML পৃষ্ঠার জন্য প্রযোজ্য।
- কোড সহজে পড়া যায় এবং স্টাইল আলাদা রাখা যায়।
- বড় প্রকল্পের জন্য ব্যবহার অপ্রাসঙ্গিক হতে পারে।
3. External CSS
- সংজ্ঞা: একটি আলাদা
.css
ফাইলে স্টাইল লেখা হয় এবং HTML ডকুমেন্টে লিঙ্ক করা হয়। - প্রয়োগের পদ্ধতি:
<link>
ট্যাগ ব্যবহার করে CSS ফাইল সংযুক্ত করা হয়। - উদাহরণ: HTML ফাইল:
<head> <link rel="stylesheet" href="styles.css"> </head>
CSS ফাইল (styles.css):p { color: green; font-size: 20px; }
- বৈশিষ্ট্য:
- বড় ও জটিল প্রকল্পের জন্য কার্যকর।
- একাধিক HTML পৃষ্ঠায় একই স্টাইল প্রয়োগ করা যায়।
- স্টাইল পৃথক থাকায় কোড পরিষ্কার এবং পুনরাবৃত্তি সহজ।
4. Embedded CSS
- এটি Internal CSS-এর সমার্থক এবং একইভাবে
<style>
ট্যাগের মাধ্যমে লেখা হয়। HSC ICT-তে এটি সাধারণত Internal CSS নামেই পরিচিত।
CSS শ্রেণির তুলনা:
প্রকার | স্থান | ব্যাপ্তি | অগ্রাধিকার | উপযুক্ত ক্ষেত্র |
---|---|---|---|---|
Inline CSS | HTML এলিমেন্টে style অ্যাট্রিবিউট | শুধুমাত্র নির্দিষ্ট এলিমেন্ট | সর্বোচ্চ (High) | ছোট পরিবর্তন বা দ্রুত প্রয়োগ |
Internal CSS | <style> ট্যাগে | নির্দিষ্ট HTML পৃষ্ঠা | মাঝারি (Medium) | একক পৃষ্ঠার স্টাইলিং |
External CSS | আলাদা .css ফাইল | একাধিক HTML পৃষ্ঠা | সর্বনিম্ন (Low) | বড় এবং পুনরাবৃত্ত প্রকল্প |
5. CSS-in-JS (Modern Approach)
- সংজ্ঞা: জাভাস্ক্রিপ্ট কোডের মধ্যে CSS প্রয়োগ করা।
- ব্যবহার: React, Angular ইত্যাদি ফ্রেমওয়ার্কে।
- উদাহরণ:
const styles = { color: 'blue', fontSize: '18px' };
উপরের শ্রেণিবিভাগ অনুযায়ী CSS-কে সঠিকভাবে ব্যবহার করলে ওয়েব ডেভেলপমেন্ট আরো সহজ ও কার্যকর হয়।