প্রিয় পাঠক, এত দিন ত আমরা বিভিন্ন ট্যাগ সম্পর্কে জানলাম আর এদের ব্যবহারও জানলাম। এবার চলো আমরা ঐ ট্যাগ গুলোর মাঝে বিভিন্ন এট্রিবিউট প্রয়োগ করি। এবং নতুন নতুন আকর্ষণীয় স্টাইলের কোডিং গুলো দেখি।
আজকে যে যে বিষয় গুলো নিয়ে আলোচনা করব-
- HTML-এ কিভাবে বিভিন্ন স্টাইলের ফন্ট ব্যবহার করা যায়?
- HTML-এ কিভাবে স্টাইলিশ লেখা এবং বিভিন্ন রং এর লেখা ব্যবহার করা যায়?
প্রিয় পাঠক আমরা প্রথমেই দেখব কিভাবে HTML এ বিভিন্ন স্টাইলের ফন্ট ব্যবহার করা যায়। তারপর দেখব কিভাবে ফন্ট গুলোকে রং করা যায়।
তাহলে শুরু করি-
লেখা গুলো স্টাইল করার জন্য প্রথমেই আমাদের কে পছন্দ করা স্টাইল এর একটা লিংক html এর <head> ট্যাগ এর ভিতরে যোগ করতে হবে। এরজন্য একটি ফন্ট পছন্দ করতে আমাদের Google এসে সহায়তা নিতে হবে।
STEP:1
Google এ সার্চ করব - Google Font লিখে তারপর সবচেয়ে উপরে প্রদর্শিত ওয়েবসাইটে ক্লিক করলে এরকম অনেক ফন্ট পেয়ে যাব। এখান হতে পছন্দ মতো ইংরেজি বাংলা ফন্ট সিলেক্ট করার জন্য Filter অপশনে গিয়ে যেকোনো ভাষার ফন্ট খুঁজা যায়। নিচে দেখুন-
STEP:2
এরপর আপনি All language এ ক্লিক করলে বিভিন্ন ভাষা পেয়ে যাবেন, আপনার যে দেশের ভাষা নিতে মন চায় সেটি সিলেক্ট করবেন।
STEP:3
অথবা আপনার যদি কোনো ফন্ট আগেই পছন্দ করা থাকে অথবা সেটির নাম জানেন ত সার্চ করে নিতে পারেন। আমি আমার পছন্দ মত একটি ফন্ট সার্চ করলাম।
STEP:4
এখন আমি এই ফন্টির উপর ক্লিক করে Font-weight 400 + ব্যবহার করলাম। এখানে অসংখ্য weight থাকতে পারে আপনার যতটি লাগবে ততটি + করবেন। weight এর মানে হলো আপনি ফন্টের উপর কত গাঢ় লেয়ার বা কত টুকু বোল্ড করতে চান। নরমালি ফন্ট গুলোর weight 400 থাকে এর উপরে 700 পর্যন্ত এনাফ। আপনি যদি 700 করেন তাহলে লেখাটি বোল্ড দেখাবে এরকমঃ (700)।
STEP:4
এরপর আমরা নিচে বক্সের ভিতরে এরকম কিছু কোড দেখতে পাব। আমি হলুদ আর লাল রং দিয়ে চিহ্নিত করে দিয়েছি। এখান হতে আপনারা হলুদ অংশ টুকু কপি করে নিবেন। আর লাল অংশ টুকু মনে রাখবেন আর ফন্টের নাম টিও মনে রাখবেন। কারণ এটি আমরা ফন্ট স্টাইল দেয়ার সময় ব্যবহার করব।
STEP:5
এরপর আমরা সোজা চলে যাব আমাদের html পেজে, যেখানে আমরা html লিখিতছি। উদাহরণ সরূপ আমি একটি html পেজ নিলাম এবং এখানে <head> সেকশনের পর </head >শেষ ট্যাগ এর আগেএটি পেস্ট করলাম।
যেমনঃ
উপরে দেখতে পাচ্ছেন যে head ট্যাগ এর পরে এই ফন্ট লিংক যোগ করা হয়েছ। আপনারাও এটি পেস্ট করবেন।
তারপর পরের স্টে পটি গুরুত্বপূর্ণ ভাবে দেখুন-এখানে অনেকে ভুল করে।
STEP:6
নিচের ফটোতে কিছু দেখছেন? এখানে লাল রং দিয়ে মার্ক করে দিয়েছি, আপনারা & এর পর amp; লেখাটি যোগ করে দিবেন, মানে amp আর একটা সেমি কোলন(;) যোগ করে দিতে হবে। নাহলে লিংক কাজ করবে না।
এতটুকু করে ফেললে আমাদের ফন্ট স্টাইলের লিংক যোগ করা সফল হবে। তারপর আমাদের এডিটিং করার পালা।
STEP:7
আমরা এখন একটি টাইটেল ট্যাগ এর ভিতর কিছু লেখব এবং এটিকে ঐ ফন্ট স্টাইল দেবার চেষ্টা করব। এরপর Color ব্যবহার করব। এখন বডি <body> ট্যাগ এর ভিতর <title > ট্যাগ ব্যবহার করে একটি লেখা লেখি।
ইনপুটঃ
<html>
<head> <link href="https://fontgoogleapis.com/css2? family=Righteous&display=swap" rel="stylesheet"> </head>
<body><title> Artificial intelligence </title></body>
</html>
আউটপুটঃ
Artificial intelligence
উপরে ইনপুটে দেখতে পাচ্ছি যে <title> ট্যাগ এর ভিতরে আমরা Artificial intelligence লিখেছি। কিন্তু আউটপুটে ত লেখাটি স্টাইলিশ হয় নি। লেখাটিকে স্টাইল দিতে হলে আমাদের কে ঐ <title> ট্যাগ এর ভিতরে style="" এট্রিবিউট যোগ করতে হবে এবং এতে font-family উপাদান যোগ করে আমাদের ফন্টের নামটি বসাতে হবে। আমাদের নেয়া ফন্টের নাম টি ছিল Righteous.নিচে লক্ষ্য করি।
STEP:8
ইনপুটঃ
<html>
<head> <link href="https://fontgoogleapis.com/css2? family=Righteous&display=swap" rel="stylesheet"> </head>
<body><title style ="fontRighteous:Righteous; " > Artificial intelligence </title></body>
</html>
আউটপুটঃ
Artificial intelligence
উপরে ইনপুটে দেখতে পাচ্ছি style এট্রিবিউট এর ভিতরে কিভাবে font-family যোগ করেছি। মূলত এভাবেই স্টাইল এর কাজ করতে হবে। একটি সেমিকোলন বা কমা দিতে ভুল হলে কোডিং এ কাজ করবে না। তাই সতর্ক থাকতে হবে। প্রতিটি উপাদানের পর (;) সেমি কোলন ব্যবহার করতে হবে।
এখন আউটপুটে আমরা ঐ ফন্টের লেখাটি দেখতে পাচ্ছি। তার মানপত্র আমাদের মিশন সফল হয়েছে। এভাবে আপনি যেকোনো লেখাকে স্টাইলে রূপান্তর করতে পারেন।
যাদের বুঝতে সমস্যা হ একনজরে সংক্ষিপ্ত ভিডিও টা দেখে নিন-
এবার দেখব কিভাবে ঐ লেখাটিকে একটি রঙিন লেখাতে রূপান্তর করা যায়।
তার জন্য আমাদের কে ঐ style ="" এর ভিতরে color উপাদান যোগ করতে হবে। যেমন-
STEP:9
ইনপুটঃ
<html>
<head> <link href="https://fontgoogleapis.com/css2? family=Righteous&display=swap" rel="stylesheet"> </head>
<body><title style ="fontRighteous:Righteous;color:green " > Artificial intelligence </title></body>
</html>
আউটপুটঃ
Artificial intelligence
উপরের ইনপুটে title ট্যাগ এর ভিতরে style এট্রিবিউট এর ভিতর color উপাদানে green color ব্যবহার করায় আউটপুটের লেখাটি সবুজ দেখাচ্ছে। এবার নিশ্চই শিখে ফেলেছি যে কিভাবে স্টাইল ব্যবহার করা যায়।
এখন যদি আপনি চান যে স্টাইলে আরো কিছু উপাদান যোগ করে লেখাটিকে আরো আকর্ষণী করে তুলবেন তাহলে তা করতে পারেন। আপনি style="" এর ভিতরে আরো কিছু এট্রিবিউট যোগ করতে পারেন।
যেমনঃ
- টেক্সট ব্যাকগ্রাউন্ডের জন্য background: anycolor;
- ফন্ট সাইজের জন্য font-size: 20px;
- ফন্ট স্টাইলের জন্য font-style:italic-bold;
- এলাইনের জন্য text-align :center/left/right ;
ইত্যাদি ইত্যাদি,
পরে আরো এট্রিবিউট নিয়ে আলোচনা করব।
HTML এর যাবতীয় ব্যবহার জানতে অবশ্যই সাথে থাকবেন।।
ধন্যবাদ।
0 Comments
আপনার মন্তব্য লিখুন!