সহজে HTML শিখুন। পর্ব:-০২
 সহজে HTML শিখুন। পর্ব:-০২ Taza Trick |
HTM Elements
HTML এ আমরা যা কিছু লিখি সেগুলো আসলে ইলিমেন্ট এর সমষ্টি। যেমন
এখানে,
এখানে,
<!Doctype html>
<html>
<body>
<h1>
</h1>
</body>
</html>
<html> এবং </html> একটি ইলিমেন্ট। <body> এবং </body> একটি ইলিমেন্ট। <h1> এবং </h1> একটি ইলিমেন্ট।এখানে মোট ৩ টি ইলিমেন্ট আছে। আর,HTML এর ট্যাগ বা ইলিমেন্ট গুলো সবসময় ছোট হাতের অক্ষরে লিখবেন।
HTML Attributes
প্রথমে একটি কোড দেখি।
<!DOCTYPE html>
<html>
<body>
<img src="Taza Trick.jpg" alt="tazatrick.blogspot.com" width="142" height="104"/>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<img src="Taza Trick.jpg" alt="tazatrick.blogspot.com" width="142" height="104"/>
</body>
</html>
এখানে <img হচ্ছে একটি ট্যাগ। এই ট্যাগের মাঝ খানে যে src, alt, width ও height দেখছেন এগুলোকে বলা হয় HTML Attribute.আমরাHTML ইলিমেন্ট এর বিভিন্ন কাজের জন্য বিভিন্ন Attribute ব্যবহার করে থাকি। অর্থাৎ Attribute কাজ হচ্ছে ট্যাগের বা ইলিমেন্ট এর কার্য ক্ষমতা বৃদ্ধি করা।এখানে ইমেজ সাইজ, ইমেজ সোর্স ঠিক রাখার জন্য src,width ও height Attribute ব্যবহার করেছি।
Title Attribute
আমরা<p> ট্যাগের ভিতর title এট্রিবিউট ব্যবহার করতে পারি। যেমন,
আমরা<p> ট্যাগের ভিতর title এট্রিবিউট ব্যবহার করতে পারি। যেমন,
<!DOCTYPE html>
<html>
<body>
<p title="Taza Trick Know For Easy Life">
Taza Trick is an educational blog site. It provides many Tricks and Tips, make money online Tricks, many kinds of tutorials etc.</p>
Taza Trick is an educational blog site. It provides many Tricks and Tips, make money online Tricks, many kinds of tutorials etc.</p>
</body>
</html>
</html>
এখানে <p> ট্যাগের ভিতর title এট্রিবিউট ব্যবহার করেছি। কিন্তু এতে লাভ কী?এই কোডটুকু ব্রাউজারে দেখুন।সাধারণ লেখা দেখা যাচ্ছে।আপনি ঐ লেখাগুলোর উপর মাউস পয়েন্টার নিয়ে রেখে দিন এবং দেখুন কি হয়।
Href Attribute
এই Attribute নিয়ে পূর্বে আলোচনা করা হয়েছে।এখন দেখুন,
width=”250″ এখানে width হচ্ছে Attribute এবং 250 হচ্ছে ভ্যালু।
যখন আমরা একটি এট্রিবিউট এর ভ্যালু দিবো তখন সেটা কোটেশন এর ভেতর দিবো।যেমনঃ- width=”250″
এই Attribute নিয়ে পূর্বে আলোচনা করা হয়েছে।এখন দেখুন,
width=”250″ এখানে width হচ্ছে Attribute এবং 250 হচ্ছে ভ্যালু।
যখন আমরা একটি এট্রিবিউট এর ভ্যালু দিবো তখন সেটা কোটেশন এর ভেতর দিবো।যেমনঃ- width=”250″
HTML Heading
আমরা পূর্বের পর্বে দেখেছি হেডিং কিভাবে লেখা হয়।এখন আমরা বিস্তারিত জানবো। প্রশ্নঃ হেডিং কেন ব্যবহার করা হয়?
উঃ হেডিং নির্দেশ করে কোন লেখাটা কতটা গুরুত্বপুর্ণ।তাই হেডিং ব্যবহার করা হয়। যেমন,
<h1> দ্বারা সবথেকে বেশি গুরত্তপুর্ণ এবং <h6>দ্বারা সবথেকে কম গুরুত্বপুর্ণ লেখা বোঝায়।
উঃ হেডিং নির্দেশ করে কোন লেখাটা কতটা গুরুত্বপুর্ণ।তাই হেডিং ব্যবহার করা হয়। যেমন,
<h1> দ্বারা সবথেকে বেশি গুরত্তপুর্ণ এবং <h6>দ্বারা সবথেকে কম গুরুত্বপুর্ণ লেখা বোঝায়।
HTML Horizontal Line:
Horizontal Line বলতে বোঝায়
আড়াআড়ি দাগ। কোনো লেখার শেষে আড়াআড়ি দাগ দিতে আমরা <hr> ট্যাগ ব্যবহার করব। এটার কোন ইন্ড ট্যাগ নেই।
Horizontal Line বলতে বোঝায়
আড়াআড়ি দাগ। কোনো লেখার শেষে আড়াআড়ি দাগ দিতে আমরা <hr> ট্যাগ ব্যবহার করব। এটার কোন ইন্ড ট্যাগ নেই।
উদাহরণ:-
<!DOCTYPE html>
<html>
<body>
<p>Taza Trick</p><hr>
<p>Know For Easy Life</p><hr>
<p>Know For Easy Life</p><hr>
</body>
</html>
</html>
এখানে,
প্রত্যেক <p> ট্যাগের শেষে একটি করে আড়াআড়ি দাগ আছে।এটা খুব সহজ একটি বিষয়।
প্রত্যেক <p> ট্যাগের শেষে একটি করে আড়াআড়ি দাগ আছে।এটা খুব সহজ একটি বিষয়।
HTML <head> Element
এই হেড ইলিমেন্ট এর ভিতর যা থাকবে তা ওয়েব পেজে দেখা যাবে না।এটা ওয়েব পেজের টাইটেল,সিএসএস এর লিংক,মেটা ট্যাগ, জাভাস্ক্রিপ্ট এর লিংক ইত্যাদি লেখার জন্য ব্যবহার করা হয়। আমরা <title><link> ইত্যাদি ট্যাগ <head> ইলিমেন্ট এর ভিতর রাখবো।
HTML <title> Element
যখন আমরা কোন ওয়েব পেজে ঢুকি তখন দেখি আমাদের ব্রাউজারের ট্যাব এ কিছু লেখা থাকে।সেটাই হলো পেজের টাইটেল। এই টাইটেল লেখার জন্য <title> ট্যাগ ব্যবহার করা হয়।
HTML <meta> Element
এই মেটা ইলিমেন্ট ব্যবহার করা হয় পেজের কন্টেন্ট এর ভাষা এবং পেজের বিভিন্ন তথ্য প্রকাশ করার জন্য। যেমন,
এই মেটা ইলিমেন্ট ব্যবহার করা হয় পেজের কন্টেন্ট এর ভাষা এবং পেজের বিভিন্ন তথ্য প্রকাশ করার জন্য। যেমন,
<!DOCTYPE html>
<html>
<head>
<title>Taza Trick</title>
<meta charset="UTF-8">
</head>
<body>
<p>Know For Easy Life</p>
</body>
</html>
<html>
<head>
<title>Taza Trick</title>
<meta charset="UTF-8">
</head>
<body>
<p>Know For Easy Life</p>
</body>
</html>
<title>ও<head> ট্যাগ এর ব্যবহার আমরা আগেই দেখেছি।
এখন দেখবো<meta>
<meta এটা দিয়ে বোঝিয়েছি যে মেটা ট্যাগ শুরু হয়েছে।এরপর charset দিয়ে ওয়েব পেজে কোন ধরনের ক্যারেক্টার সেট করা আছে তা বোঝানো হয়েছে।এবং “UTF-8” দিয়ে ইউরোপিয়ান ভাষা বোঝানো হয়েছে। এই ট্যাগের কোন ইন্ড ট্যাগ নেই।
তো আজকে এই পর্যন্তই থাক।
এখন দেখবো<meta>
<meta এটা দিয়ে বোঝিয়েছি যে মেটা ট্যাগ শুরু হয়েছে।এরপর charset দিয়ে ওয়েব পেজে কোন ধরনের ক্যারেক্টার সেট করা আছে তা বোঝানো হয়েছে।এবং “UTF-8” দিয়ে ইউরোপিয়ান ভাষা বোঝানো হয়েছে। এই ট্যাগের কোন ইন্ড ট্যাগ নেই।
তো আজকে এই পর্যন্তই থাক।
বাড়ীর কাজ:
এমন একটি ওয়েবসাইট বা এইচটিএমএল ফাইল তৈরি করুন যেখানে টাইটেল থাকবে my second website এবং হেডিং h1 এ লেখা থাকবে Thank for visit my website এবং তার নিচে থাকবে একটি পিকচার যার height=150px, width=200px এবং নিচে থাকবে this is my picture.
তার পর আপনার সাইটের নাম বা এইচটিএমএল ফাইল
আমার ইমেইল এড্রেসে পাঠিয়ে দিন।
এমন একটি ওয়েবসাইট বা এইচটিএমএল ফাইল তৈরি করুন যেখানে টাইটেল থাকবে my second website এবং হেডিং h1 এ লেখা থাকবে Thank for visit my website এবং তার নিচে থাকবে একটি পিকচার যার height=150px, width=200px এবং নিচে থাকবে this is my picture.
তার পর আপনার সাইটের নাম বা এইচটিএমএল ফাইল
আমার ইমেইল এড্রেসে পাঠিয়ে দিন।
শেষ কথা:
মানুষ মাত্রই ভুল করে।তাই ভুল ত্রুটিগুলো ক্ষমা সুন্দর দৃষ্টিতে দেখবেন।
প্রতিদিন একটি একটি করে পর্ব দিব। আগামীকাল দেখা হবে তৃতীয় পর্ব নিয়ে।এই বিষয়ে কোনো মন্তব্য থাকলে মন্তব্য করুন কমেন্ট বক্সে। প্রতিদিন নতুন নতুন ট্রিক আপনাদের ইমেইলে পেতে সাবস্ক্রাইব করুন। পোস্টটি শেয়ার করে সবাইকে জানার সুযোগ করে দিন। আপনার জীবনকে সহজ ও সুন্দর করতেই আমাদের এই Taza Trick ব্লগ সাইটের যাত্রা। প্রতিদিন নতুন নতুন ট্রিক জানতে এবং আপনার জীবনকে সহজ করতে আমাদের সাইটের সাথেই থাকুন। সবাই ভালো থাকবেন সুস্থ থাকবেন সবাইকে ভালো রাখার চেষ্টা করবেন ধন্যবাদ।
মানুষ মাত্রই ভুল করে।তাই ভুল ত্রুটিগুলো ক্ষমা সুন্দর দৃষ্টিতে দেখবেন।
প্রতিদিন একটি একটি করে পর্ব দিব। আগামীকাল দেখা হবে তৃতীয় পর্ব নিয়ে।এই বিষয়ে কোনো মন্তব্য থাকলে মন্তব্য করুন কমেন্ট বক্সে। প্রতিদিন নতুন নতুন ট্রিক আপনাদের ইমেইলে পেতে সাবস্ক্রাইব করুন। পোস্টটি শেয়ার করে সবাইকে জানার সুযোগ করে দিন। আপনার জীবনকে সহজ ও সুন্দর করতেই আমাদের এই Taza Trick ব্লগ সাইটের যাত্রা। প্রতিদিন নতুন নতুন ট্রিক জানতে এবং আপনার জীবনকে সহজ করতে আমাদের সাইটের সাথেই থাকুন। সবাই ভালো থাকবেন সুস্থ থাকবেন সবাইকে ভালো রাখার চেষ্টা করবেন ধন্যবাদ।
Informative Post
ReplyDelete