সহজে HTML শিখুন। পর্ব:-০৪
 |
| সহজে HTML শিখুন। পর্ব:-০৪ Taza Trick |
আজকে আমি আপনাদের সাথে শেয়ার করবো"সহজে HTML শিখুন" শিরোনামের টিউটোরিয়ালের চতুর্থ পর্ব।তো চলুন শুরু করি।
HTML Quotation
আমরা কোন উক্তি লেখার সময় সাধারণ ভাবে না লেখে সেটা কোটেশন এর ভেতর লিখে থাকি। এভাবে লেখার জন্য এইচটিএমএল এ কিছু ট্যাগ রয়েছে। যেমন,
<q> ট্যাগ
আমরা যখন ছোট খাটো কোন উক্তি লিখবো তখন এই ট্যাগ ব্যবহার করবো। <q> ট্যাগ ব্যবহার করলে লেখার আগে এবং পরে কোটেশন হয়ে যাবে।
<q> ট্যাগ
আমরা যখন ছোট খাটো কোন উক্তি লিখবো তখন এই ট্যাগ ব্যবহার করবো। <q> ট্যাগ ব্যবহার করলে লেখার আগে এবং পরে কোটেশন হয়ে যাবে।
<!DOCTYPE html>
<html>
<body>
<html>
<body>
<p>here is an example:- <q>Know For Easy Life
</q></p>
</q></p>
</body>
</html>
এটার ইন্ড ট্যাগ আছে।
</html>
এটার ইন্ড ট্যাগ আছে।
<blockquote> ট্যাগ
কোন বড় উক্তি লেখার জন্য <blockquote> ট্যাগ ব্যবহার করা হয়। যেমন,
কোন বড় উক্তি লেখার জন্য <blockquote> ট্যাগ ব্যবহার করা হয়। যেমন,
<!DOCTYPE html>
<html>
<body>
<blockquote>If you want to be a real human.you have to be a helpful parson</blockquote>
<html>
<body>
<blockquote>If you want to be a real human.you have to be a helpful parson</blockquote>
</body>
</html>
এটার ইন্ড ট্যাগ আছে।
</html>
এটার ইন্ড ট্যাগ আছে।
<abbr> ট্যাগ এই ট্যাগ ব্যবহার করে কি করা হয় আপনি নিজেই দেখে নিন।
<!DOCTYPE html>
<html>
<body>
<html>
<body>
<p>The <abbr title="Information and Communication Technology">ICT</abbr> is the very important subject for class 11</p>
</body>
</html>
এখন ওই ICT এর উপর মাউস রাখুন বা মোবাইলে টাচ করুন দেখুন ICT এর পুর্ণরুপ দেখা যাবে।
এটার ইন্ড ট্যাগ আছে।
</html>
এখন ওই ICT এর উপর মাউস রাখুন বা মোবাইলে টাচ করুন দেখুন ICT এর পুর্ণরুপ দেখা যাবে।
এটার ইন্ড ট্যাগ আছে।
<address> ট্যাগ
সাইটে আমাদের ঠিকানা দিতে <address> ট্যাগ ব্যবহার করা হয়। যেমন,
সাইটে আমাদের ঠিকানা দিতে <address> ট্যাগ ব্যবহার করা হয়। যেমন,
<!DOCTYPE html>
<html>
<body>
<p>Here is my address</p>
<html>
<body>
<p>Here is my address</p>
<address>
Written by Md Sajib Hasan<br>
Visit us at:<br>
http://facebook.com/tazatrick<br>
Dhaka, 1200/4<br>
Bangladesh
</address>
Written by Md Sajib Hasan<br>
Visit us at:<br>
http://facebook.com/tazatrick<br>
Dhaka, 1200/4<br>
Bangladesh
</address>
</body>
</html>
এটার ইন্ড ট্যাগ আছে।
</html>
এটার ইন্ড ট্যাগ আছে।
<cite> ট্যাগ
কাজের শিরোনাম দেওয়ার জন্য এই ট্যাগ ব্যবহার করা হয়। যেমন,
কাজের শিরোনাম দেওয়ার জন্য এই ট্যাগ ব্যবহার করা হয়। যেমন,
<!DOCTYPE html>
<html>
<body>
<html>
<body>
<p>this is a title of work element.</p>
<img src="tazatrick.jpg" width="200" height="150" alt="Taza Trick">
<cite>Taza Trick</cite>
<img src="tazatrick.jpg" width="200" height="150" alt="Taza Trick">
<cite>Taza Trick</cite>
</body>
</html>
এটার ইন্ড ট্যাগ আছে।
</html>
এটার ইন্ড ট্যাগ আছে।
<bdo>ট্যাগ
কোন লেখাকে উল্টিয়ে লিখতে এই ট্যাগ ব্যবহার করা হয়। যেমন,
কোন লেখাকে উল্টিয়ে লিখতে এই ট্যাগ ব্যবহার করা হয়। যেমন,
<!DOCTYPE html>
<html>
<body>
<html>
<body>
<p>Example:</p>
<bdo dir="rtl">This is an example</bdo>
</body>
</html>
</html>
এখানে <bdo এরপর dir দিয়ে বুঝিয়েছি এর দিক এবং এর ভ্যালু দিয়েছি rtl অর্থাৎ right to left এটি দেওয়ার জন্য লেখাটা ডান দিক থেকে বাম দিকে হয়ে গেছে।
Computer Code Elements
<code>ট্যাগ
কোড দেখানোর জন্য এই ট্যাগ ব্যবহার করা হয়। যেমন,
কোড দেখানোর জন্য এই ট্যাগ ব্যবহার করা হয়। যেমন,
<!DOCTYPE html>
<html>
<body>
<html>
<body>
<code>
type="button" onclick="alert('Hello World!')">Click Me! </code>
</body>
</html>
type="button" onclick="alert('Hello World!')">Click Me! </code>
</body>
</html>
এখানে জাভাস্ক্রিপ্ট কোড এর উদাহরণ দিয়ে বুঝানো হয়েছে। দেখুন এখানে এক লাইনে কোড দেখাচ্ছে। কোড যেমন লিখেছি সেরকমই দেখাতে ব্যবহার করা হয় <pre> ট্যাগ। যেমন,
<!DOCTYPE html>
<html>
<body>
<html>
<body>
<pre>
<code>
type="button"
onclick="alert('HelloWorld!')">
Click Me!
</code>
</pre>
<code>
type="button"
onclick="alert('HelloWorld!')">
Click Me!
</code>
</pre>
</body>
</html>
এর ইন্ড ট্যাগ রয়েছে।
এর ইন্ড ট্যাগ রয়েছে।
<var> ট্যাগ
মূল লেখাকে অন্যভাবে দেখানোর জন্য এই ট্যাগ ব্যবহার করা হয়। যেমন,
মূল লেখাকে অন্যভাবে দেখানোর জন্য এই ট্যাগ ব্যবহার করা হয়। যেমন,
<!DOCTYPE html>
<html>
<body>
<html>
<body>
<p>We know: <var>E</var> = <var>m</var><var>c</var><sup>2</sup>.</p>
</body>
</html>
</html>
আউটপুট দেখলে পার্থক্য ধরতে পারার কথা।
HTML Comments
কোন কোড টুকু কেন লেখা হয়েছে তা জানার জন্য Comment elements. ব্যবহার করা হয়। কমেন্টে ভেতর যা লেখা থাকবে তা ব্রাউজারে দেখা যাবে না। কমেন্ট তিন প্রকার যথা:-
//------------------
For only one sentence.
/*-------------------
---------------------
---------------------*/
For more sentence.
<!---------->
For Own Comments.
যেমন,
<!DOCTYPE html> এটা own comment.
--------- চিন্হের স্থানে আপনাদের কমেন্ট লিখবেন।
কখনো আজেবাজে কমেন্ট করবেন না।
//------------------
For only one sentence.
/*-------------------
---------------------
---------------------*/
For more sentence.
<!---------->
For Own Comments.
যেমন,
<!DOCTYPE html> এটা own comment.
--------- চিন্হের স্থানে আপনাদের কমেন্ট লিখবেন।
কখনো আজেবাজে কমেন্ট করবেন না।
বাড়ীর কাজ:
এমন একটি ওয়েবসাইট বা এইচটিএমএল ফাইল তৈরি করুন যেখানে একটি টাইটেল থাকবে এবং একটি হেডিং থাকবে। একটি উক্তি থাকবে। নিচে একটি লেখা থাকবে যেখানে মাউস পয়েন্টার রাখলে বা ফোনে টাচ করলে আপনার নাম দেখাবে। একটি লেখা থাকবে যেটা উল্টো দিকে হবে। তার নিচে আপনার address থাকবে।আর হ্যাঁ কমেন্ট যেন থাকে।
তার পর আপনার সাইটের নাম বা এইচটিএমএল ফাইল
আমার ইমেইল এড্রেসে পাঠিয়ে দিন।
এমন একটি ওয়েবসাইট বা এইচটিএমএল ফাইল তৈরি করুন যেখানে একটি টাইটেল থাকবে এবং একটি হেডিং থাকবে। একটি উক্তি থাকবে। নিচে একটি লেখা থাকবে যেখানে মাউস পয়েন্টার রাখলে বা ফোনে টাচ করলে আপনার নাম দেখাবে। একটি লেখা থাকবে যেটা উল্টো দিকে হবে। তার নিচে আপনার address থাকবে।আর হ্যাঁ কমেন্ট যেন থাকে।
তার পর আপনার সাইটের নাম বা এইচটিএমএল ফাইল
আমার ইমেইল এড্রেসে পাঠিয়ে দিন।
শেষ কথা:
মানুষ মাত্রই ভুল করে।তাই ভুল ত্রুটিগুলো ক্ষমা সুন্দর দৃষ্টিতে দেখবেন। আগামীকাল দেখা হবে পঞ্চম পর্ব নিয়ে।এই বিষয়ে কোনো মন্তব্য থাকলে মন্তব্য করুন কমেন্ট বক্সে। প্রতিদিন নতুন নতুন ট্রিক আপনাদের ইমেইলে পেতে সাবস্ক্রাইব করুন। পোস্টটি শেয়ার করে সবাইকে জানার সুযোগ করে দিন।সবাই ভালো থাকবেন সুস্থ থাকবেন সবাইকে ভালো রাখার চেষ্টা করবেন ধন্যবাদ।
মানুষ মাত্রই ভুল করে।তাই ভুল ত্রুটিগুলো ক্ষমা সুন্দর দৃষ্টিতে দেখবেন। আগামীকাল দেখা হবে পঞ্চম পর্ব নিয়ে।এই বিষয়ে কোনো মন্তব্য থাকলে মন্তব্য করুন কমেন্ট বক্সে। প্রতিদিন নতুন নতুন ট্রিক আপনাদের ইমেইলে পেতে সাবস্ক্রাইব করুন। পোস্টটি শেয়ার করে সবাইকে জানার সুযোগ করে দিন।সবাই ভালো থাকবেন সুস্থ থাকবেন সবাইকে ভালো রাখার চেষ্টা করবেন ধন্যবাদ।
No comments