সহজে HTML শিখুন। পর্ব:-০৩
 |
| সহজে HTML শিখুন। পর্ব:-০৩, Taza Trick |
হাই বন্ধুরা কেমন আছেন আপনারা? আশা করি সকলেই ভালো আছেন।কারন Taza Trick ব্লগ সাইটের সাথে থাকলে সবাই ভালো থাকে।আজকে আমি আপনাদের সাথে শেয়ার করবো"সহজে HTML শিখুন" শিরোনামের টিউটোরিয়ালের তৃতীয় পর্ব।তো চলুন শুরু করা যাক। প্রথমে দেখা যাক
HTML Paragraphs
ওয়েব পেজে সাধারণ কোন কিছু লিখতে <p> ট্যাগ ব্যবহার করা হয়।
যা আমরা পূর্বেই দেখেছি। এখন বিস্তারিত দেখবো। প্রথমে একটা বিষয় খেয়াল করে দেখুন, আপনি HTML এ কোন কিছু লেখার সময় একের অধিক স্পেস দিলে অথবা ইন্টার দিয়ে নিচে নামলেও আপনি যখন কোড ওপেন করবেন তখন শুধুমাত্র একটা স্পেস দেখাবে।আপনি দেখে নিতে পারেন।এখন আপনাদের মনে প্রশ্ন আসতে পারে।
প্রশ্নঃ তাহলে কি নিচের লাইনে আসা যাবে না?
অথবা,
প্রশ্নঃ কীভাবে নিচের লাইনে আসবো?
উঃ দুইটি প্রশ্নের একটিই উত্তর, হ্যাঁ যাবে এর জন্য রয়েছে <br> ট্যাগ।এর অর্থ হলো line break। এই ট্যাগ ব্যবহার করে লেখার মাঝে নিচের লাইনে আসা যায়।
<!DOCTYPE html>
<html>
<body>
<p>This is<br>a paragraph<br>
with line<br>break</p>
</body>
</html>
এই কোড টুকু নিজে লিখে দেখুন। যেখানে যেখানে <br> ট্যগ দেওয়া হয়েছে সেখান থেকে নতুন লাইনে লেখা শুরু হয়েছে।
<br> ট্যাগের কোন ইন্ড ট্যাগ নেই।
HTML <pre> Element
<pre> ট্যাগ এমন একটি ট্যাগ যে ট্যাগের ভেতর যেমন খুশি স্পেস দিন, নিচের লাইনে আসুন যা খুশি তাই করেন। অর্থাৎ,যা দিবেন তাই থাকবে।
উদাহরণ:-
<!DOCTYPE html>
<html>
<body>
<pre>Taza Trick is a
educational blog site.
It provides many kinds of Tricks
and Tips, make
money online Tricks,
many kinds
of tutorials etc.</pre>
</body>
</html>
এই কোডটি দেখুন,
<pre>ট্যাগের ভেতর যেমন দিয়েছি তেমন দেখাচ্ছে।এই ট্যাগের ইন্ড ট্যাগ আছে। তাই, ইন্ড ট্যাগ দিতে হবে।
HTML Styles
এখন আমাদের টিভি দেখতে যেমন ভালো লাগে না, তেমনি সাদা কালো ওয়েব পেইজ দেখতে ও ভালো লাগে না। শুধু ইচ্ছা করে রঙিন দেখতে। যদিও ওয়েব সাইটকে স্টাইল দিতে CSS ব্যবহার করা হয়,তবুও আমরা CSS ছাড়া কিভাবে সাইটকে রঙিন স্টাইল করা যায় সেটাই শিখবো। এর জন্য রয়েছে,
Style Attribute
আমরা পর্বে জেনেছি Attribute কি।এই স্টাইল এট্রিবিউট দিয়ে কোন প্যারাগ্রাফ,লিংক বা যেকোন লেখার স্টাইল দেয়া যায়।style attribute লেখার নিয়ম হলো,
style=”property:value;” এরকম।
প্রথমে style attribute দিয়ে তারপর সমান দিয়ে যে স্টাইল করবেন সেটার নাম তারপর কোলন দিয়ে ভ্যালু দিতে হবে।সমান এর পর থেকে পুরোটা কোটেশন এর ভেতর রাখতে হবে।যেমন,
<!DOCTYPE html>
<html>
<body style="background-color: green;">
<h1>Your Heading Here</h1> <p>Your Paragraph Here</p>
</body>
</html>
এখানে দেখুন <body> ট্যাগের মাঝে style attribute দিয়ে স্টাইলের নাম দিয়েছি background-color এটা নিজের ইচ্ছে মতো দিলে হবে না।
যে Attribute গুলো HTML এ আছে সেগুলো দেওয়া যাবে।এখানে background-color দিয়ে সম্পূর্ণ বডি ট্যাগের ব্যাকগ্রাউন্ড কালার এর কথা বুঝিয়েছি।
এরপর কোলন দিয়ে কালার লিখে দিয়েছি। এখানে আমরা কালার দিয়েছি green। green মানে সবুজ। অর্থাৎ ব্যাকগ্রাউন্ড কালার হবে সবুজ।
HTML Text Color
লেখাকে কালার করার জন্যও রয়েছে style এট্রিবিউট।যেমন,
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red;">This is a red color heading</h1>
<p style="color: blue;">This is a blue color paragraph.</p>
</body>
</html>
এখানে স্টাইল দিয়েছি color.শুধু কালার দিলেই হবে text color দিতে হবে না। তারপর কোলন দিয়ে কি কালার হবে সেটা বলে দিয়েছি।আমরা যেই ট্যাগ এর স্টাইল করব সেই ট্যাগের ভেতর style attribute দিয়ে স্টাইল করব।
HTML Fonts
লেখার ফন্ট চেঞ্জ করতে font-family স্টাইল ব্যবহার করা হয়।যেমন,
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">This is a heading 1</h1>
<p style="font-family:courier;">This is a Paragraph</p>
</body>
</html>
HTML Text Size
লেখার সাইজ ছোট বা বড় করতে font-size স্টাইল ব্যবহার করা হয়। যেমন,
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">This is a heading 1</h1>
<p style="font-size:160%;">This is a Paragraph</p>
</body>
</html>
আমরা এখানে % এর পরিবর্তে px বা cm ব্যবহার করতে পারবো।
HTML Text Alignment
কোন লেখা পেজের বামে থাকবে নাকি মাঝে থাকবে নাকি ডানে সেটা ঠিক করে দিতে ব্যবহৃত হয় text-align স্টাইল। যেমন,
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">This heading in center</h1>
</body>
</html>
এই text-align এর পর কোলন দিয়ে যদি left লেখা হয় তাহলে লেখা বামে যাবে,center দিলে মাঝখানে এবং right দিলে লেখা ডানে চলে যাবে।
HTML Text Formatting Elements
পূর্বে আমরা স্টাইল এট্রিবিউট দিয়ে লেখা স্টাইল করা শিখেছি।এখন আমরা শিখবো কীভাবে লেখাকে ফরম্যাটিং করা যায়?তো HTML এ লেখাকে ফরম্যাটিং করার জন্য বিভিন্ন ট্যাগ রয়েছে।এখন আমরা সেগুলোর ব্যবহার দেখবো।
HTML Bold and Strong Text
কোন লেখাকে বোল্ড করতে <b> ইলিমেন্ট বা ট্যাগ ব্যবহার করা হয়। b দিয়ে Bold বুঝানো হয়।যেমন,
<!DOCTYPE html>
<html>
<body>
<p>This is a normal text</p>
<p><b>This a is bold text</b></p>
</body>
</html>
দেখুন,
যে লেখাতে <b> ট্যাগ ব্যবহার করা হয়েছে সেটা বোল্ড হয়েছে।
এই বোল্ড দিয়ে লেখাকে হাইলাইট করা হয় কিন্তু গুরত্তপুর্ণ বোঝাতে ব্যবহার করা হয় <strong> ট্যাগ। যেমন,
<!DOCTYPE html>
<html>
<body>
<p>This is a normal text</p>
<p><strong>This is a strong text</strong></p>
</body>
</html>
দেখতে এক হলেও একটা গুরত্তপুর্ন বোঝায় অন্যটা নয়।
HTML Italic and Emphasized Text
কোন লেখাকে ইটালিক অর্থাৎ বাকা করতে
<i> ট্যাগ ব্যবহার করা হয়। যেমন,
<!DOCTYPE html>
<html>
<body>
<p>This is a normal text</p>
<p><i>This is a italic text</i></p>
</body>
</html>
ইটালিক লেখাকে হাইলাইট করলেও গুরুত্বপুর্ণ বোঝাতে ব্যবহৃত হয় <em> ট্যাগ। যেমন,
<!DOCTYPE html>
<html>
<body>
<p>This is a normal text</p>
<p><em>This is a emphasized text</em></p>
</body>
</html>
প্রত্যেকটি ট্যাগের ইন্ড ট্যাগ আছে। কয়েক টা ট্যাগ ব্যতীত।
HTML Marked Formatting
আমরা পড়ার সময় বই এর কোন লাইনকে গুরুত্বপুর্ণ মনে করলে মার্কার দিয়ে মার্ক করে রাখি। তেমনি কোন লেখাকে মার্ক করতে <mark> ট্যাগ ব্যবহার করা হয়। যেমন,
<!DOCTYPE html>
<html>
<body>
<h2>My blog site name is<mark>Taza Trick</mark> And same name of my YouTube channel</h2>
</body>
</html>
HTML Deleted Formatting
যখন কোন লেখাকে আপডেট করা হয় তখন আগের লেখাটা না কেটে সেটাকে ডিলেটেড মার্ক করে দেই।যাতে,সবাই বুঝতে পারে যে এটা আগে ছিল এখন নেই। এজন্য <del> ট্যাগ ব্যবহার করা হয়।যেমন,
<!DOCTYPE html>
<html>
<body>
<p>The price of Symphony i97 is
<del>7490</del>7200 Taka</p>
</body>
</html>
HTML Inserted Formatting
আপডেট লেখা গুলোকে আন্ডারলাইন করতে <ins> ট্যাগ ব্যবহার করা হয়। যেমন,
<!DOCTYPE html>
<html>
<body>
<p>Green is my favorite<ins>color</ins></p>
</body>
</html>
HTML Subscript Formatting
আমরা অনেক ক্ষেত্রে সাবস্ক্রিপ্ট ট্যাগ ব্যবহার করি।যেমন কোন কিছুর রাসয়নিক সংকেত লেখার সময় <sub> ট্যাগ ব্যবহার করা হয়। যেমন,
<!DOCTYPE html>
<html>
<body>
<p>H<sub>2</sub>O It is a simple of Water</p>
</body>
</html>
HTML Superscript Formatting
বিভিন্ন বীজগাণিতিক সুত্র লেখার সময় <sup> ট্যাগ ব্যবহার করা হয়। যেমন,
<!DOCTYPE html>
<html>
<body>
<p>(a+b)<sup>2</sup> =a<sup>2</sup>+2ab+b<sup>2</sup></p>
</body>
</html>
আজকে এই পর্যন্তই।
বাড়ীর কাজ:
এমন একটি ওয়েবসাইট বা এইচটিএমএল ফাইল তৈরি করুন যেখানে টাইটেল থাকবে this is my third website এবং হেডিং h2 তে সবুজ রঙে লেখা থাকবে this is a Mathematical formula
এবং তার নিচে থাকবে,
(a+b)^2=a^2+2ab+b^2 এই সূত্র।
তার পর আপনার সাইটের নাম বা এইচটিএমএল ফাইল
আমার ইমেইল এড্রেসে পাঠিয়ে দিন।
শেষ কথা:
মানুষ মাত্রই ভুল করে।তাই ভুল ত্রুটিগুলো ক্ষমা সুন্দর দৃষ্টিতে দেখবেন। আগামীকাল দেখা হবে চতুর্থ পর্ব নিয়ে।এই বিষয়ে কোনো মন্তব্য থাকলে মন্তব্য করুন কমেন্ট বক্সে। প্রতিদিন নতুন নতুন ট্রিক আপনাদের ইমেইলে পেতে সাবস্ক্রাইব করুন। পোস্টটি শেয়ার করে সবাইকে জানার সুযোগ করে দিন। আপনার জীবনকে সহজ ও সুন্দর করতেই আমাদের এই Taza Trick ব্লগ সাইটের যাত্রা। প্রতিদিন নতুন নতুন ট্রিক জানতে এবং আপনার জীবনকে সহজ করতে আমাদের সাইটের সাথেই থাকুন। সবাই ভালো থাকবেন সুস্থ থাকবেন সবাইকে ভালো রাখার চেষ্টা করবেন ধন্যবাদ।
No comments