আজকে ২য় দিন এবং ২য় পর্ব। অনেকে শিখছেন দেখে লেখার ইচ্ছা বেড়ে গেলো। অনেকেই ভাবছেন গত দিনে কিছুই বুঝলাম না। তাতে, ক্ষতি নেই গত দিন ছিল HTML এর সাথে পরিচয়। কিন্তু, বিস্তারিত শুরু আজ থেকে। তবে, গতদিনের টাও বোঝা উচিৎ। যারা যেকোন প্রব্লেম এ পড়েছেন তারা কমেন্ট অথবা মেসেজ করুন। আমি, উত্তর দেয়ার চেষ্টা করব। ধন্যবাদ!!
আর, অনেকে বলছেন ভিডিও এর কথা, ভাই আপনারা ইউটিউব এ একটু খোঁজ করুন অনেক পাবেন। ভিডিও দেয়া আপাতত সম্ভব না। বড় প্রজেক্ট যেদিন করব সেদিন পোষ্ট এর সাথে একটা ভিডিও ও পাবেন।
প্রথমেই ঘোষণা করছি গত পর্বের এক্সারসাইজ যারা কমপ্লিট করেছেন এবং আমাকে পাঠিয়েছেন। মোট ১০ জনের নাম প্রকাশ করা হবে।
- Md Al-Hadi
- Md Sakib PK
- Muhin Ahmed Monwar
- Forhad Islam
- Sajeeb Khan
আপনারা এখনো যদি করতে পারেন তাহলে সেটার স্ক্রিনশট আমাকে পাঠান। তাহলে, আপনাদের নাম ঘোষণা করা হবে।
এবং, আরো ধন্যবাদ দিতে চায় OndhoKobi ভাইকে। উনি আমার পাইথন প্রোগ্রামিং সিরিজের একটা পোষ্ট এ একটা ভুল ধরিয়ে দিয়েছিলেন। এজন্য, উনাকে ধন্যবাদ দিলাম। আবারো একটা ভুল গতকাল ধরিয়ে দিয়েছেন সেটার জন্য আবারো ধন্যবাদ!! আশা করি পাশে থাকবেন। ভুল গুলো নিচে বলে দিচ্ছি।
ভুলঃ- ১
আমরা প্রথমে দেখেছিলাম ব্রাউজারকে বোঝানোর জন্য <!Doctype html> ব্যবহার করেছিলাম। এটা দিলে ব্রাউজার বুঝতে পারে যে এটা HTML ডকুমেন্ট। আর, এই <!Doctype html> লিখতে গিয়ে আপনি সবগুলো অক্ষর ছোট হাতের বা বড় হাতের বা যেরকম খুশি দিতে পারেন তাতে কোন সমস্যা নেই। তবে, <!Doctype html> দেয়াই ভালো। এটাই দেয়া উচিৎ।
ভুলঃ- ২
আমরা <img> ট্যাগ এর ব্যবহার শেখার সময় বলেছিলাম যে এটার কোন ইন্ড ট্যাগ নেই। তাই, এটাকে বলে সেলফ ইন্ড ট্যাগ। তার জন্য এভাবে লিখতে হয় <img src=”logo.png” width=”140px” height=”250px”/> মানে, এটাই শুরু এটাই শেষ। শেষের /> এটা দেয়ার জন্য বলা হচ্ছে সেলফ ইন্ড ট্যাগ।
আর কোন ভুল থাকলে সবাইকে ধরিয়ে দেয়ার জন্য বলছি।
এখন শুরু ২য় দিনের ১ম অধ্যায়।
HTML Heading:—
আমরা আগের পর্বে দেখেছি হেডিং কিভাবে লেখে। <h1> থেকে <h6> অবধি হেডিং এর উদাহরণ ও দেখেছি। কিন্তু, আরো বিস্তারিত এখন জানবো।
প্রথমত হেডিং কেন??
সুন্দর প্রশ্ন। হেডিং নির্দেশ করে কোন লেখাটা কতটা গুরত্তপুর্ণ। <h1> বোঝায় সবথেকে গুরত্তপুর্ণ। এবং <h6> সবথেকে কম গুরত্তপুর্ণ। এভাবে মাঝের গুলো দ্বারাও ক্রমে বেশি থেকে কম গুরত্তপুর্ণ এর দিকে যায়।
তাহলে, এখন বুঝলেন কেন হেডিং এবং লিখতে হয় হেডিং।
HTML Horizontal Line:—
মাঝে মাঝে আমার লেখাগুলোতে খেয়াল করে দেখবেন আমি এই Horizontal line ব্যবহার করি। এটা আসলে একটা দাগ। ধরুন, আমরা আমাদের ব্লগ এ কোন পোস্ট লিখছি, পোষ্ট টা মুলত ৫ টি এপ নিয়ে রিভিউ। এখন একেকটা কন্টেন্ট বা এপ এর রিভিউ শেষে একটা করে আড়াআড়ি দাগ দিয়ে ওই কন্টেন্ট শেষ বোঝাচ্ছি। এই Horizontal line দিতে আমরা <hr> ট্যাগ ব্যবহার করব। এটার কোন ইন্ড ট্যাগ নেই। চলুন, দেখে নেই উদাহরণ।
<!DOCTYPE html>
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
</body>
</html>
এখানে আমরা প্রত্যেক <p> ট্যাগের শেষে একটা করে Horizontal Line আছে। মানে, আড়াআড়ি দাগ। এটা খুব সিম্পল একটা বিষয়। এখানে, না বোঝার কিছুই নাই। আশা করি বুঝতে পেরেছেন।
HTML <head> Element:—
এই হেড ইলিমেন্ট এর আসলে ওয়েব পেজে দেখানোর কোন কাজ নেই। এটা ওয়েব পেজ এর পেছনে কাজ করে। এটা পেজের টাইটেল, মেটা ট্যাগ, সিএসএস এর লিংক, জাভাস্ক্রিপ্ট এর লিংক ইত্যাদি লেখার জন্য কাজে লাগে। আমরা এসব আনুষাঙ্গিক জিনিস গুলো <head> ইলিমেন্ট এর মাঝে রাখবো।
HTML <title> Element:—
আমরা যখন কোন ওয়েব পেজে ঢুকি তখন দেখবেন আপনার ব্রাউজারের ট্যাব এ সাইটের নাম লেখা থাকে। এটাই হল পেজের টাইটেল। এই টাইটেল লিখতেই ব্যবহৃত হয় <title> ইলিমেন্ট।
উপরের <head> এবং <title> ইলিমেন্ট এর কাজ তো আমরা আগেই দেখেছি। গত পর্বে এটার শুধু ব্যবহার দেখেছিলাম। এখন বিস্তারিত জেনে নিলাম।
HTML <meta> Element:—
এই মেটা ইলিমেন্ট ব্যবহৃত হয় পেজের কন্টেন্ট এর ভাষা এবং পেজের বিভিন্ন তথ্য প্রকাশ করতে।
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
<p>The HTML head element contains meta data.</p>
<p>Meta data is data about the HTML document.</p>
</body>
</html>
এখানে এই মেটা ট্যাগ এর ব্যবহার দেখছি। <meta এটা দিয়ে বোঝালাম যে এটা মেটা ট্যাগ শুরু। তারপর charset দিয়ে ওয়েব পেজে কি ধরনের ক্যারেক্টার সেট আছে তা দেখাচ্ছি। “UTF-8” দিয়ে ইউরোপিয়ান ভাষা গুলো বোঝাচ্ছি। আমরা অনেক সময় ASCII বা UNICODE ব্যবহার করি। এটার কোন ইন্ড ট্যাগ নেই।
More HTML <meta> Element:—
<style>, <link> ইত্যাদি সহ আরো অনেক এরকম মেটা ট্যাগ বা ইলিমেন্ট আছে। সেগুলো নিয়ে পরে আলোচনা হবে।
এখন এই অধ্যায় এখানেই শেষ।
এবারে দ্বিতীয় অধ্যায় HTML Paragraphs :—
আমরা ওয়েব পেজে সাধারণ কোন কিছু লিখতে গিয়ে <p> বা প্যারাগ্রাফ ট্যাগ ব্যবহার করি। এটার ব্যবহার তো আগেই দেখেছি।
এখন এটার কিছু বিস্তারিত দেখে নেব।
প্রথমে একটা তথ্য দিয়ে নেই, আপনি HTML এ কোন কিছু লিখতে গেলে একের বেশি স্পেস দিলে বা ইন্টার দিয়ে নিচের লাইনে চলে আসলেও সেখানে শুধু একটা স্পেস দেখাবে। ব্রাউজারে চেষ্টা করে দেখুন।
সাধারণত কোথাও কোন ট্যাগের ইন্ড ট্যাগ দিতে ভুলে গেলে কিছুই হয় না, তবে যেহেতু এটা ভুল তাই আমরা করব না। অনেক্ষেত্রে এটা ঝামেলার সৃষ্টি করতে পারে।
HTML Line Breaks :—
আমরা আগেই বলেছি ইন্টার দিয়ে নতুন লাইনে আসলেও HTML সেটাকে ব্রাউজারে একাট স্পেস হিসেবে ধরে নিবে। তাই, বলে কি নিচের লাইনে আসা যায় না?? কেন যাবে না? তার জন্য আছে <br> ট্যাগ। এটা অর্থ line break। এটা দিয়ে লেখার মাঝে নিচের লাইনে আসা যায়।
<!DOCTYPE html>
<html>
<body>
<p>This is<br>a para<br>graph with line breaks</p>
</body>
</html>
এই যে এই কোড টুকু নিজে হাতে লিখে দেখুন। যেখানে যেখানে <br> ট্যগ দিয়েছি সেখান থেকে নতুন লাইনে লেখা শুরু হয়েছে। এটার কোন ইন্ড ট্যাগ নেই।
HTML <pre> Element :—
এখন মনে করুন আপনি আপনার সাইটে মাইকেল মধুসূদন এর সনেট কবিতা পোষ্ট করবেন। কিন্তু, সমস্যা হল বার বার <br> ট্যাগ দিয়ে নিচের লাইনে আসা লাগছে। যেখান এ একের বেশি স্পেস দিচ্ছি সেখানে একটা স্পেস হয়ে যাচ্ছে এরকম অনেক সমস্যা। তাই, আমাদের সমাধান হচ্ছে <pre> ট্যাগ। এই ট্যাগের ভেতর যেমন খুশি স্পেস দিন, নিচের লাইনে আসুন যা খুশি করেন HTML কিছুই বলবে না। মানে, যা দেবেন তাই থাকবে। নিচের উদাহরণ টা দেখুন।
<!DOCTYPE html>
<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
</body>
</html>
বুঝতে পেরেছেন?? আমরা <pre> ট্যাগের ভেতর যা দিয়েছি তাই দেখাচ্ছে। এটার ইন্ড ট্যাগ আছে। তাই, ইন্ড ট্যাগ দিবেন।
এবারে তৃতীয় অধ্যায় HTML Styles :—
আমরা কি শুধু সাদা কালো ওয়েব পেইজ বানাবো?? কোন স্টাইল হবে না তা কি হয়?? যদিও স্টাইল এর কাজ CSS এর তবে, এখন আমরা CSS ছাড়া কিভাবে সাইটকে সুন্দর করা যায় সেটাই শিখবো।
Style Attribute :—
আগের পর্বে বলেছি Attribute কি। এখন দেখবো style attribute. এই স্টাইল এট্রিবিউট দিয়ে কোন প্যারাগ্রাফ, বা লিংক এর বা যেকোন লেখার স্টাইল দেয়া যায়। এই style attribute লেখার নিয়ম style=”property:value;” এরকম। প্রথমে style attribute দিয়ে তারপর সমান দিয়ে যে স্টাইল করবেন সেটার নাম কোলন এবং তার ভ্যালু দিয়ে দিতে হবে। তারপর ; দিয়ে ওই স্টাইল শেষ করতে হবে। এখন আবার অন্য স্টাইলের নাম দিয়ে সেটার ভ্যালু দিতে হবে। সমান এর পরে থেকে পুরোটা কোটেশন এর ভেতর থাকবে।
<!DOCTYPE html>
<html>
<body style="background-color:grey;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
এখানে দেখুন <body> ট্যাগের মাঝে style attribute দিয়ে সেটার প্রোপার্টি বা স্টাইলের নাম দিয়েছি background-color এটা নিজের মতো দিলেই হয় না। যেগুলো HTML এ আছে সেগুলো দিতে হয়। যেমন এখানে background-color দিয়ে পুরো বডি ট্যাগের ব্যাকগ্রাউন্ড কালার এর কথা বুঝিয়েছি। এখন কোলন দিয়ে কালার লিখে দিয়েছি। এখানে আমরা কালার দিয়েছি gray। gray মানে ধূসর। দেখুন কেমন হয়ে গেছে ব্যাকগ্রাউন্ড কালার।
কি?? সহজ মনে হচ্ছে না?? খুব সহজে অনেক সুন্দর কিছু করা যায় এভাবে।
HTML Text Color :—
আমরা তো শুধু ব্যাকগ্রাউন্ড এর কালার চেঞ্জ করেছি লেখার কালার ও তো চেঞ্জ করার দরকার। তার জন্য আছে color style.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a 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</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</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;">Centered heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
এই text-align এর পর কোলন দিয়ে যদি center লেখা হয় তাহলে মাঝখানে লেখা হয়, left দিলে বামে, right দিলে ডানে লেখা চলে যায়। বিভিন্ন রকম দিয়ে প্র্যাকটিস করতে থাকেন।
এবারে চতুর্থ অধ্যায়ঃ- HTML Text Formatting Elements
তৃতীয় অধ্যায়ে আমরা স্টাইল এট্রিবিউট দিয়ে লেখা স্টাইল করা শিখেছি। কিন্তু, HTML এ লেখাকে ফরম্যাটিং করার জন্য বিভিন্ন এলিমেন্ট বা ট্যাগ আছে। আমরা এখন সেগুলোর ব্যবহার দেখব।
HTML Bold and Strong Text :—
আমরা কোন লেখা বোল্ড করতে <b> ইলিমেন্ট বা ট্যাগ ব্যবহার করব। b দিয়ে Bold বোঝায়।
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
</body>
</html>
এখানে দেখুন <b> এর পরের লেখাগুলো বোল্ড হয়েছে। ইন্ড ট্যাগ দিতে ভুলে যাবেন না যেন।
এই বোল্ড দিয়ে লেখাকে হাইলাইট করা হয় কিন্তু গুরত্তপুর্ণ বোঝাতে ব্যবহার করা হয় <strong>
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><strong>This text is strong.</strong></p>
</body>
</html>
দেখতে এক হলেও একটা গুরত্তপুর্ন বোঝায় অন্যটা নয়। এটাতেও ইন্ড ট্যাগ আছে।
HTML Italic and Emphasized Text :—
আমরা কোন লেখাকে ইটালিক করতে <i> ব্যবহার করি। এটা দিয়ে যেকোন লেখাকে ইটালিক মানে বাকা করা যায়।
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><i>This text is italic.</i></p>
</body>
</html>
এটারও ইন্ড ট্যাগ আছে।
এই ইটালিক লেখাকে হাইলাইট করলেও গুরত্তপুর্ন বোঝাতে ব্যবহৃত হয় <em>
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><em>This text is emphasized.</em></p>
</body>
</html>
আগের বোল্ড এবং স্ট্রং এর মতো। এবং এটার ইন্ড ট্যাগ আছে।
HTML Small Formatting :—
কোন লেখাকে স্বাভাবিক এর থেকে ছোট করে দেখাতে ব্যবহৃত হয় <small>
<!DOCTYPE html>
<html>
<body>
<h2>HTML <small>Small</small> Formatting</h2>
</body>
</html>
এটার ইন্ড ট্যাগ আছে।
HTML Marked Formatting :—
আমরা যেমন পড়ার সময় বই এর কোন লাইনকে গুরত্তপুর্ন মনে করলে হাইলাইটার বা মার্কার দিয়ে মার্ক করে রাখি এখানেও কোন লেখাকে সেরকম মার্ক করতে <mark> ব্যবহার করা হয়।
<!DOCTYPE html>
<html>
<body>
<h2>HTML <mark>Marked</mark> Formatting</h2>
</body>
</html>
HTML Deleted Formatting :—
আমরা যখন কোন লেখাকে আপডেট করি তখন আগের লেখাটা না কেটে দিয়ে সেটাকে ডিলেট করে মার্ক করে দেই। যেন, সবাই বুঝতে পারে যে এটা আগে ছিল। এজন্য ব্যবহার করা হয় <del>
<!DOCTYPE html>
<html>
<body>
<p>The del element represents deleted (removed) text.</p>
<p>My favorite color is <del>blue</del> red.</p>
</body>
</html>
এটার ইন্ড ট্যাগ আছে।
HTML Inserted Formatting :—
আগের বার যেমন আপডেত করার সময় আগের লেখা ডিলেট মার্ক করে দিলাম এবারো সেরকম যে লেখাগুলো আপডেট করা হল সেগুলো কে আন্ডারলাইন করে দেই <ins>
<!DOCTYPE html>
<html>
<body>
<p>The ins element represent inserted (added) text.</p>
<p>My favorite <ins>color</ins> is red.</p>
</body>
</html>
এটার ইন্ড ট্যাগ আছে।
HTML Subscript Formatting :—
আমরা বিশেষ বিশেষ ক্ষেত্রে সাবস্ক্রিপ্ট ব্যবহার করি। যেমন কোন কিছুর রাসয়নিক সংকেত লেখার সময় ব্যবহার হয় <sub>
<!DOCTYPE html>
<html>
<body>
<p>H<sub>2</sub>O --- It is a Hotel of Dhaka :) :)</p>
</body>
</html>
এটার ও ইন্ড ট্যাগ আছে।
HTML Superscript Formatting :—
আমরা বিভিন্ন বীজগাণিতিক সুত্র লেখার সময় সুপারস্ক্রিপ্ট ব্যবহার করি। সুপারস্ক্রিপ্ট ব্যবহার করতে <sup> লেখা হয়।
<!DOCTYPE html>
<html>
<body>
<p>(a+b)<sup>2</sup> = ??</p>
</body>
</html>
এটার ও ইন্ড ট্যাগ আছে।
অনেক মজার এবং সহজ কিছু বিষয় এইমাত্র আমরা শিখে নিলাম। এখন দেখবো
৫ম অধ্যায় ঃ- HTML Quotation and Citation Elements
আমরা আমাদের পেজে কোন কিছু লেখার সময় কারো উক্তি দিতেই পারি। আর উক্তি দেয়ার সময় সাধারণ ভাবে না দিয়ে সেটা কোটেশন এর ভেতর দিতে হয়। এরকম কিছু কাজ নিয়ে এই অধ্যায়।
HTML <q> for Short Quotations :—
আমরা যখন ছোট খাটো কোন উক্তি দিয়ে থাকি তখন এই কোটেশন ব্যবহার করি। <q> ট্যাগ ব্যবহার করলে লেখার আগে এবং পরে কোটেশন হয়ে যায়।
<!DOCTYPE html>
<html>
<body>
<p>Here is an example:- <q>Never belive anyone quotation and it's also</q -- Unknown></p>
</body>
</html>
এখানে কোটেশন না দিয়ে <q> ব্যবহার করায় অটোমেটিক কোটেশন হয়ে গেছে।
এটার ইন্ড ট্যাগ আছে।
HTML <blockquote> for Long Quotations :—
কোন বড় উক্তির ক্ষেত্রে <blockquote> ব্যবহার করা হয়।
<!DOCTYPE html>
<html>
<body>
<p>Browsers usually indent blockquote elements.</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
</body>
</html>
এটার ইন্ড ট্যাগ আছে।
HTML <abbr> for Abbreviations :—
আমরা অনেক সময় দেখেছি বিভিন্ন সাইটের কোন একটা ওয়ার্ড এর উপর মাউস রাখলেই বা মোবাইলে টাচ করলে সেটা থেকে একটা বিস্তারিত লেখা ভেসে ওঠে। এটা করা হয় <abbr> দিয়ে।
<!DOCTYPE html>
<html>
<body>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p>Marking up abbreviations can give useful information to browsers, translation systems and search-engines.</p>
</body>
</html>
এখন ওই WHO এর উপর মাউস রাখুন বা মোবাইলে টাচ করুন দেখুন ওখানে একটা লেখা ভেসে উঠবে যেটা WHO এর পুর্ণরুপ।
এটার ইন্ড ট্যাগ আছে।
HTML <address> for Contact Information :—
আমরা আমাদের সাইটে আমাদের ঠিকানা দিতে পারি। সেখানে ঠিকানা স্পেশাল ভাবে দিতে <address> ব্যবহৃত হয়।
<!DOCTYPE html>
<html>
<body>
<p>The HTML address element defines contact information (author/owner) of a document or article.</p>
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>
এটার ইন্ড ট্যাগ আছে।
HTML <cite> for Work Title :—
আমরা গণিত এর জ্যামিতি করার সময় দেখেছি চিত্রের নিচে লেখা থাকে চিত্র ১ ঃ- একটি ত্রিভুজ।
এগুলোকে বলে work title বা কাজের শিরোনাম। এজন্য ব্যবহার করা হয় <cite>
<!DOCTYPE html>
<html>
<body>
<p>The HTML cite element defines the title of a work.</p>
<p>Browsers usually display cite elements in italic.</p>
<img src="triangle.jpg" width="220" height="277" alt="The Scream">
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
</body>
</html>
এখানে আমার একটা ত্রিভুজের চিত্র আছে triangle নামের। আপনারা আপনাদের চিত্রের সঠিক ঠিকানা দিয়ে দিবেন এবং <cite> দিয়ে দিলে সেটা ওই চিত্রের টাইটেল হিসেবে কাজ করবে।
এটার ইন্ড ট্যাগ আছে।
HTML <bdo> for Bi-Directional Override :—
এটা খুব মজার একটা ইলিমেন্ট বা ট্যাগ। আমরা কোন লেখাকে উল্টিয়ে লিখতে পারি।
<!DOCTYPE html>
<html>
<body>
<p>Example</p>
<bdo dir="rtl">This line will be written from right to left</bdo>
</body>
</html>
এখানে <bdo dir এর ভ্যালু দিয়েছি rtl মানে হলো right to left সেজন্য লেখাটা ডান দিকে থেকে বাম দিকে হয়ে গেছে। এবার এই উল্টা লেখাকে আগের মতো করতে ltr দিলে বাম থেকে ডানে হবে। মানে, left to right.
এখন আজকের মতো এখানেই শেষ। অনেক কষ্ট করে লিখলাম। বুজতেই পারছেন কতবড় পোস্ট এইটা। আপনারা যদি আমার দেয়া এক্সারসাইজ গুলো করেন তবুও ভালো লাগে মনে হয় স্বার্থক। কেউ তোও শিখলো।
আজকের এক্সারসাইজঃ-
এমন একটা সাইট বানাবেন যেখানে ব্যাকগ্রাউন্ড হবে আপনার প্রিয় একটা রঙ এর। সাইটের একটা টাইটেল দিবেন। এবং charset এর মেটা ট্যাগ থাকবে। হেডিং দিবেন একটা এবং তার নিচে একাট আড়াআড়ি দাগ।
তারপর, ৫/৬ লাইনের একটা প্যারাগ্রাফ লিখবেন। এবং এক লাইনে সর্বোচ্চ ৫ টা ওয়ার্ড থাকবে। লেখাগুলোর প্রথম লাইন থাকবে হলুদ রং এর লেখা। লেখাগুলো সাইটের বাম সাইটে থাকবে। লেখার সাইজ দিবেন ২৪। এবং লেখাগুলো Arial ফন্টের হবে। গুরত্তপুর্ণ লেখাগুলো স্ট্রং এবং বোল্ড করবেন। প্রয়োজন মতো ইটালিক করবেন। কমপক্ষে একটি শব্দ ইটালিক করবেন। তারপরে, একটা লেখা আপডেট করবেন। এবং শেষে পানির রাসয়নিক সংকেত এবং (a+b)2 এর সুত্র লিখবেন। এবং পুরো প্যারাগ্রাফ এর উপর যেকোন লেখার উপর মাউস নিলেই যেন আপনার নাম দেখায়।
আপনার একটা পছন্দের উক্তিও দিতে পারেন।
এই এক্সারসাইজ টি সম্পুর্ন না পারলেও যতদিন লাগে লাগুক যেটুকু পারেন আমাকে পাঠিয়ে দেবেন। এই পোস্ট টি একদিনে না পারলেও আস্তে আস্তে শিখবেন। ধন্যবাদ!!
যেকোন সমস্যা হলে কমেন্ট করুন।
