সহজে HTML শিখুন। পর্ব:-০৫
 |
| সহজে HTML শিখুন। পর্ব:-০৫ Taza Trick |
আজকে আমি আপনাদের সাথে আলোচনা করবো"সহজে HTML শিখুন" শিরোনামের টিউটোরিয়ালের পঞ্চম পর্ব নিয়ে। তো চলুন শুরু করা যাক,
HTML Colors
পূর্বে আমরা দেখেছি কালারের নাম উল্লেখ করে কালার করার সিস্টেম। আরও দুটি উপায়ে কালার দেওয়া যায়। যেমন,
➡️RGB
এখানে RGB বলতে Red, Green, Blue বুঝানো হয়েছে। যেমন,(0,128,0) এটা দিয়ে সবুজ কালার বুঝানো হয়েছে।কোড লিখবেন এভাবে,
style="background-color: RGB(0,128,0)"
➡️RGB
এখানে RGB বলতে Red, Green, Blue বুঝানো হয়েছে। যেমন,(0,128,0) এটা দিয়ে সবুজ কালার বুঝানো হয়েছে।কোড লিখবেন এভাবে,
style="background-color: RGB(0,128,0)"
➡️Hexadecimal (হেক্সাডেসিম্যাল)। যেমন,
FF0000= লাল
FFFF00=হলুদ
0000FF=নীল
রং বুঝানো হয়েছে। এই কোড গুলো লেখার পূর্বে # দিতে হবে। নয়তো কাজ করবে না। যেমন,
style="background-color:#FF0000"
FF0000= লাল
FFFF00=হলুদ
0000FF=নীল
রং বুঝানো হয়েছে। এই কোড গুলো লেখার পূর্বে # দিতে হবে। নয়তো কাজ করবে না। যেমন,
style="background-color:#FF0000"
HTML CSS
আমরা ওয়েব সাইট ব্রাউজ করতে গিয়ে বিভিন্ন ধরনের রঙিন স্টাইল করা ওয়েব পেজ ও লেখা দেখতে পাই।যা সাধারণত CSS ব্যবহার করে করা হয়। চাইলে আপনারাও করতে পারবেন।আপনি যদি সাইটের সিএসএস ইন্টার্নাল হিসেবে ব্যবহার করতে চান ।তাহলে আপনাকে <style> ট্যাগ ব্যবহার করতে হবে। <style> ট্যাগ <head> ট্যাগের পর ব্যবহার করতে হবে এবং <style> ট্যাগের ভেতর আপনার CSS style দিতে হবে।নিচের মতো করে,
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:gray;}
p {color: green;}
</style>
</head>
</html>
<style>
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:gray;}
p {color: green;}
</style>
</head>
</html>
<style>
আপনি যদি সাইটে এক্সট্রানাল সিএসএস ব্যবহার করতে চান তাহলে <link> ট্যাগ ব্যবহার করতে হবে। এই ট্যাগ ও <head> ট্যাগের পর ব্যবহার করতে হবে। নিচের মতো করে,
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="my.css">
</head>
</html>
এই ট্যাগের ইন্ড দিতে হয় না।
এই এইচটিএমএল ফাইল যে ফোল্ডারে রাখবেন সেখানে my.css নামের ফাইলটি ও রাখতে হবে। নয়তো কাজ করবে না।
<html>
<head>
<link rel="stylesheet" type="text/css" href="my.css">
</head>
</html>
এই ট্যাগের ইন্ড দিতে হয় না।
এই এইচটিএমএল ফাইল যে ফোল্ডারে রাখবেন সেখানে my.css নামের ফাইলটি ও রাখতে হবে। নয়তো কাজ করবে না।
HTML Links
পূর্বে আমারা HTML Link এর ব্যবহার দেখেছি। কিন্তু সেখানে বিস্তারিত আলোচনা করা হয়নি।এখন বিস্তারিত আলোচনা করা হবে।লিংক এভাবে লেখা হয়।
<a href="url">link name</a>
এখানে <a> হলো লিংক ট্যাগ। এবং href হলো এট্রিবিউট।যেটা ঠিকানা নির্ধারণ করে দেয়। তারপর link name এর জায়গায় লিংকে কি নাম থাকবে সেটা লেখা হয়।শেষে ইন্ড ট্যাগ ব্যবহার করতে হয়। যেমন,
<a href="url">link name</a>
এখানে <a> হলো লিংক ট্যাগ। এবং href হলো এট্রিবিউট।যেটা ঠিকানা নির্ধারণ করে দেয়। তারপর link name এর জায়গায় লিংকে কি নাম থাকবে সেটা লেখা হয়।শেষে ইন্ড ট্যাগ ব্যবহার করতে হয়। যেমন,
<a href="https://www.tazatrick.blogspot.com">Taza Trick</a>
এখানে শুধু লিংক নাম নয় আপনারা চাইলে কিন্তু ইমেজ ও দিতে পারেন।
যেমন,
এখানে শুধু লিংক নাম নয় আপনারা চাইলে কিন্তু ইমেজ ও দিতে পারেন।
যেমন,
<!DOCTYPE html>
<html>
<body>
<html>
<body>
<p>This is an image link.you can click on it to go others link</p>
<a href="https://www.google.com"> <img src="Google.png"/></a>
</body>
</html>
</html>
এখানে Google.png ইমেজ এর উপর ক্লিক করলে Google search engine এ চলে যাবে।আমরা আগে যেখানে লিংকের নাম দিতাম সেখানে ইমেজ ট্যাগ ব্যবহার করে ইমেজ দিয়েছি। এবং শেষে ইন্ড ট্যাগ দিয়েছি।
Target Attribute
আমরা অনেক সময় দেখি কিছু লিংক এ ক্লিক করলে সেটা অন্য একটি ট্যাবে ওপেন হয়।এটা করা হয় Target Attribute দিয়ে। যেমন,
আমরা অনেক সময় দেখি কিছু লিংক এ ক্লিক করলে সেটা অন্য একটি ট্যাবে ওপেন হয়।এটা করা হয় Target Attribute দিয়ে। যেমন,
<!DOCTYPE html>
<html>
<body>
<html>
<body>
<p>click the link and see</p>
</body>
</html>
এখানে target এট্রিবিউট এর মধ্যে _blank ভ্যালু দিয়েছি।Target Attribute এ _blank ভ্যালু দিলে নতুন ট্যাবে ওপেন হবে। আরো কয়েকটি ভ্যালু আছে। যেমন,
</body>
</html>
এখানে target এট্রিবিউট এর মধ্যে _blank ভ্যালু দিয়েছি।Target Attribute এ _blank ভ্যালু দিলে নতুন ট্যাবে ওপেন হবে। আরো কয়েকটি ভ্যালু আছে। যেমন,
_self এটা দিলে নরমালি যেভাবে ওপেন হয় সেভাবে ওপেন হবে।
_parent বর্তমান ফ্রেমে অর্থাৎ যে ফ্রেমে থাকবে সেখানে ওপেন হবে।
_top সম্পূর্ণ ট্যাবে ওপেন হবে।
_parent বর্তমান ফ্রেমে অর্থাৎ যে ফ্রেমে থাকবে সেখানে ওপেন হবে।
_top সম্পূর্ণ ট্যাবে ওপেন হবে।
HTML Link with Bookmark
আমরা অনেক সাইটে দেখি Back to top লেখা থাকে সেখানে ক্লিক করলে পেজের উপরে চলে যায়। এটাকে বলা হয় বুকমার্ক।উপরে বুকমার্ক করা হয়েছিল তাই উপরে চলে যায়। আপনারা চাইলে কিন্তু ঐ পেজের যেকোনো স্থানে বুকমার্ক করতে পারবেন।
এজন্য যেখানে আমরা বুকমার্ক করতে চাই সেখানে একটি আইডি দিতে হবে।যাতে বোঝা যায় কোথায় বুকমার্ক হবে। যেমন,
আমরা অনেক সাইটে দেখি Back to top লেখা থাকে সেখানে ক্লিক করলে পেজের উপরে চলে যায়। এটাকে বলা হয় বুকমার্ক।উপরে বুকমার্ক করা হয়েছিল তাই উপরে চলে যায়। আপনারা চাইলে কিন্তু ঐ পেজের যেকোনো স্থানে বুকমার্ক করতে পারবেন।
এজন্য যেখানে আমরা বুকমার্ক করতে চাই সেখানে একটি আইডি দিতে হবে।যাতে বোঝা যায় কোথায় বুকমার্ক হবে। যেমন,
<!DOCTYPE html>
<html>
<body>
<html>
<body>
<p id="top"> Taza Trick</p>
<p>Example 1</p>
<p>Example 2</p>
<p>Example 3</p>
<p>Example 4</p>
<p>Example 5</p>
<p>Example 6</p>
<p>Example 7</p>
<p>Example 8</p>
<p>Example 9</p>
<p id="10">Example 10</p>
<p>Example 11</p>
<p>Example 12</p>
<p>Example 13</p>
<p>Example 14</p>
<p>Example 15</p>
<p>Example 16</p>
<p>Example 17</p>
<p>Example 18</p>
<p>Example 19</p>
<p>Example 20</p>
<p>Example 21</p>
<p>Example 22</p>
<p>Example 23</p>
<p>Example 24</p>
<p>Example 25</p>
<a href="#top">Back to top</a>
</body></html>
এখানে p ট্যাগের সাথে id এট্রিবিউট দিয়ে দুইটি id দেয়া হয়েছে। id="top" এবং
id="10"
এবং নিচে একটি লিংক আছে, লিংকের যে যায়গায় লিংক এর ঠিকানা দেয়া হয় সেই যায়গায় একটি আইডির নাম দেয়া এবং নাম দেওয়ার আগে # দেয়া হয়েছে।যেমন এখানে দেয়া #top এবং লিংকের নাম দেওয়া হয়েছে Back to top অর্থাৎ ঐ লিংকে ক্লিক করলে আইডি top এ চলে যাবে।এখন যদি #top এর জায়গায় #10 দেওয়া হয় তাহলে আইডি 10 চলে যাবে।
কোডটুকু নিজে লিখে ব্রাউজারে দেখুন তাহলে বুঝতে পারবেন।এটা খুব মজার একটা ইলিমেন্ট।আজকের জন্য এই পর্যন্তই শেষ।
id="10"
এবং নিচে একটি লিংক আছে, লিংকের যে যায়গায় লিংক এর ঠিকানা দেয়া হয় সেই যায়গায় একটি আইডির নাম দেয়া এবং নাম দেওয়ার আগে # দেয়া হয়েছে।যেমন এখানে দেয়া #top এবং লিংকের নাম দেওয়া হয়েছে Back to top অর্থাৎ ঐ লিংকে ক্লিক করলে আইডি top এ চলে যাবে।এখন যদি #top এর জায়গায় #10 দেওয়া হয় তাহলে আইডি 10 চলে যাবে।
কোডটুকু নিজে লিখে ব্রাউজারে দেখুন তাহলে বুঝতে পারবেন।এটা খুব মজার একটা ইলিমেন্ট।আজকের জন্য এই পর্যন্তই শেষ।
বাড়ীর কাজ:
এমন একটি ওয়েবসাইট বা এইচটিএমএল ফাইল তৈরি করুন যেখানে একটি টাইটেল থাকবে এবং একটি হেডিং থাকবে। যেখানে background color থাকবে লাল। এবং কিছু লেখা থাকবে যা হলুন রঙের। পিকচারের সাথে একটি লিংক করা থাকবে যাতে পিকচারে ক্লিক করলে ঐ লিংকে চলে যায়। আরেকটি লিংক থাকবে যেখানে ক্লিক করলে একটি নতুন ট্যাবে ওপেন হবে। একটি বুকমার্ক করবেন যেখানে ক্লিক করলে উপরে চলে যাবে।
তার পর আপনার সাইটের নাম বা এইচটিএমএল ফাইল
আমার ইমেইল এড্রেসে পাঠিয়ে দিন।
এমন একটি ওয়েবসাইট বা এইচটিএমএল ফাইল তৈরি করুন যেখানে একটি টাইটেল থাকবে এবং একটি হেডিং থাকবে। যেখানে background color থাকবে লাল। এবং কিছু লেখা থাকবে যা হলুন রঙের। পিকচারের সাথে একটি লিংক করা থাকবে যাতে পিকচারে ক্লিক করলে ঐ লিংকে চলে যায়। আরেকটি লিংক থাকবে যেখানে ক্লিক করলে একটি নতুন ট্যাবে ওপেন হবে। একটি বুকমার্ক করবেন যেখানে ক্লিক করলে উপরে চলে যাবে।
তার পর আপনার সাইটের নাম বা এইচটিএমএল ফাইল
আমার ইমেইল এড্রেসে পাঠিয়ে দিন।
শেষ কথা:
মানুষ মাত্রই ভুল করে।তাই ভুল ত্রুটিগুলো ক্ষমা সুন্দর দৃষ্টিতে দেখবেন। আগামীকাল দেখা হবে ষষ্ঠ পর্ব নিয়ে।এই বিষয়ে কোনো মন্তব্য থাকলে মন্তব্য করুন কমেন্ট বক্সে। প্রতিদিন নতুন নতুন ট্রিক আপনাদের ইমেইলে পেতে সাবস্ক্রাইব করুন। পোস্টটি শেয়ার করে সবাইকে জানার সুযোগ করে দিন।সবাই ভালো থাকবেন।
মানুষ মাত্রই ভুল করে।তাই ভুল ত্রুটিগুলো ক্ষমা সুন্দর দৃষ্টিতে দেখবেন। আগামীকাল দেখা হবে ষষ্ঠ পর্ব নিয়ে।এই বিষয়ে কোনো মন্তব্য থাকলে মন্তব্য করুন কমেন্ট বক্সে। প্রতিদিন নতুন নতুন ট্রিক আপনাদের ইমেইলে পেতে সাবস্ক্রাইব করুন। পোস্টটি শেয়ার করে সবাইকে জানার সুযোগ করে দিন।সবাই ভালো থাকবেন।
No comments