html শেখার সহজ উপায় : অধ্যায় ৩

Monday, August 26, 2013

আমার পূর্ববর্তী পোষ্টগুলো না দেখে থাকলে দেখে চট করে একবার চোখ বুলিয়ে আসুন ,আশা করি বুঝতে পারবেন । না বুঝতে পারলে মন্তব্যে বলবেন বুঝিয়ে দেবার চেষ্টা করব ।
আজকে আমি আলোচনা করব html-এর Comments, Heading এবং Formatting Tags নিয়ে ।বিষয় গুলো খুবই মজার একটু ভালভাবে দেখলেই বুঝতে পারবেন ।

HTML Comments:-

Comments বা মন্তব্য হল সেইসব বাক্য বা বাক্যাংশ যা html পেজের গঠনগত কোন কাজে ব্যবহৃত হয় না কিন্তু সাহায্য করে ।কমান্ট শুরু হয় “<!–”-এই চিহ্ন দিয়ে আর শেষ হয় “–>”-চিহ্ন দিয়ে অর্থাত্‍ “<!–” চিহ্ন আর “–>” চিহ্নের মাঝে থাকে মন্তব্যটি ।
প্রয়োজোনীয়তা

কোন কাজ, কোড বা স্কীপটকে পেজের মধ্যে মনে রাখার জন্য ।
পেজের মধ্যে কোন কাজকে অসম্পূর্ণ রাখে পরে শেষ করার জন্য ।

HTML Heading:-

ওয়েব পেজের কোন বাক্য বা বাক্যাংশকে শিরোণাম হিসেবে ব্যবহার করার জন্য এই HTML Heading ট্যাগটি ব্যবহৃত হয় ।ওয়ার্ডপ্রেসের যেকোন ব্লগে পোস্ট করার সময় এই ট্যাগটি সরাসরি ব্যবহার করা যায় ।HTML Heading-এর প্রধান কাজ হল পেজ মধ্যস্হ কোন বাক্য বা বাক্যাংশকে মোটা(bold) এবং আকারে বড় করা । এই ট্যাগটি শুরু হয় “<h1>”-এই চিহ্ন দিয়ে আর শেষ হয় “</h1>” -চিহ্ন দিয়ে ।ট্যাগটির h-এর পাশের 1-এর মান 1 থেকে 6 পর্যন্ত হতে পারে ।অর্থাত্‍ <h1> …… </h1>,<h2> …… </h2>,<h3>……</h3>,<h4>……</h4>,<h5>……</h5>,<h6>……</h6> এই রূপে হয়ে থাকে ।এর মধ্যে <h1>-এর লেখার আকার সবচেয়ে বড় আর সবচেয়ে ছোট হল <h6>-এর লেখার আকার ।

HTML Formatting Tags:-

ওয়েব পেজের প্রদর্শিত অক্ষরের গঠন কেমন হবে তা নিয়ন্ত্রন করা যাবে Formatting ট্যাগের মাধ্যমে ।Formatting-ট্যাগের সংখ্যা অনেক এখানে সচারাচর ব্যবহৃত হয় এমন কয়েকটি ট্যাগকে তুলে ধরলাম ।

<b> Tag:-
স্বাভাবিক আকারের কিন্তু bold বা মোটা হরফের অক্ষর প্রদর্শন করার জন্য এই ট্যাগটি ব্যবহৃত হয় । এর গঠন <b> …. </b> -এই ধরনের হয় ।
<i> Tag:-
ইটালিক্স বা বাকানো হরফের অক্ষর প্রদর্শন করার জন্য এই ট্যাগটি ব্যবহৃত হয় । এর গঠন <i> …. </i> -এই ধরনের হয় ।
<em> Tag:-
ট্যাগটির ব্যবহার <i> Tag-এর মত ।এর গঠন <em> …. </em> -এই ধরনের হয় ।
<u> Tag:-
Underline বা নিম্নরেখাযুক্ত হরফের অক্ষর প্রদর্শন করার জন্য এই ট্যাগটি ব্যবহৃত হয় । এর গঠন <u> …. </u> -এই ধরনের হয় ।
<ins> Tag:-
ট্যাগটির ব্যবহার <u> Tag-এর মত ।এর গঠন <ins> …. </ins> -এই ধরনের হয় ।
<del> Tag:-
Strikethrough বা মধ্যরেখাযুক্ত হরফের অক্ষর প্রদর্শন করার জন্য এই ট্যাগটি ব্যবহৃত হয় । এর গঠন <del> …. </del> -এই ধরনের হয় ।
<sup> Tag:-
Superscript বা বাক্য উপরিস্হ (আর বাংলা পেলাম না) অক্ষর প্রদর্শন করার জন্য এই ট্যাগটি ব্যবহৃত হয় । এর গঠন <sup> …. </sup> -এই ধরনের হয় ।
<sub> Tag:-
Subscript বা বাক্যনিম্নস্হ অক্ষর প্রদর্শন করার জন্য এই ট্যাগটি ব্যবহৃত হয় । এর গঠন <sub> …. </sub> -এই ধরনের হয় ।
<kbd> Tag:-
Keyboard বা লেখনীয় যন্ত্র( typwriter) সদৃশ লেখার জন্য এই ট্যাগটি ব্যবহৃত হয় । এর গঠন <kbd> …. </kbd> -এই ধরনের হয় ।
<tt> Tag:-
ট্যাগটির ব্যবহার <kbd> Tag-এর মত ।এর গঠন <tt> …. </tt> -এই ধরনের হয় ।
<pre> Tag:-
ওয়েব পেজে যখন কোন বড় বাক্য লেখা হয় তখন শেষে এটি নিজে থেকে নতুন অনুচ্ছেদ তৈরি করে ।একে নিয়ন্ত্রন করা যায় <pre> Tag দিয়ে ।এর গঠন <pre> …. </pre> -এই ধরনের হয় ।
<blink> Tag:-
blinking বা নেভা-জ্বলা অক্ষর প্রদর্শন করার জন্য এই ট্যাগটি ব্যবহৃত হয় । এর গঠন <blink> …. </blink> -এই ধরনের হয় ।(আমার জানা মতে এটি Opera , Firefox কাজ করে)
<marquee> Tag:-
চলমান অক্ষর প্রদর্শন করার জন্য এই ট্যাগটি ব্যবহৃত হয় । এর গঠন <marquee> …. </marquee> -এই ধরনের হয় ।

অনুশীলন করুন :-
আজকের অলোচিত বিষয় গুলো সম্পর্কে ধারনা পরিস্কার করতে পাশের প্রদত্ত ছবিতে দেওয়া কোডগুলি নোডপ্যাডে লিখুন । লেখা শেষে নথিটিকে যেকোন নাম দিয়ে .html ফরম্যাট দিয়ে সংরক্ষণ করুন ।এবার সংরক্ষিত html নথিটিকে ক্লিক করে ব্রাউজারে খুলুন ।আমি এখানে notepad++ ব্যবহার করছি ।

বিশ্লেষণ:-
উপরের ছবিতে দেওয়া কোড গুলিতে আজকে আলোচিত বিষয়গুলো লক্ষ্য করুন ।