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

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

কাকতাড়ুয়া

সময় চলে আপন মনে । তার সাথে তাল মিলিয়ে চলতে হয় আমাদের । আমাদেরতালের সঙ্গে সময়ের তাল মেলানোর মধ্যে একটা সামনজস্য থাকা জরুরী । তাল মেলাতে গিয়ে কিছু কাজ অসমাস্ত থেকে যায়
যা নিজেকে থমকে রাখে কাকতাড়ুয়ার মত.................
html শেখার সহজ উপায় : অধ্যায় ৩

আমার পূর্ববর্তী পোষ্টগুলো না দেখে থাকলে দেখে চট করে একবার চোখ বুলিয়ে আসুন ,আশা করি বুঝতে পারবেন । না বুঝতে পারলে মন্তব্যে বলবেন বুঝিয়ে দেবার চেষ্টা করব ।

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

HTML Comments:-

Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

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> -এই ধরনের হয় ।

remmi html শেখার সহজ উপায় : অধ্যায় ৩ অনুশীলন করুন :-
আজকের অলোচিত বিষয় গুলো সম্পর্কে ধারনা পরিস্কার করতে পাশের প্রদত্ত ছবিতে দেওয়া কোডগুলি নোডপ্যাডে লিখুন । লেখা শেষে নথিটিকে যেকোন নাম দিয়ে .html ফরম্যাট দিয়ে সংরক্ষণ  করুন ।এবার সংরক্ষিত html নথিটিকে ক্লিক করে ব্রাউজারে খুলুন ।আমি এখানে notepad++ ব্যবহার করছি ।
বিশ্লেষণ:-
উপরের ছবিতে দেওয়া কোড গুলিতে আজকে আলোচিত বিষয়গুলো লক্ষ্য করুন ।
  • ছয় নং লাইন থেকে দশ নং লাইনে Heading ট্যাগ ব্যবহৃত হয়েছে ।
  • ১১ নং ও ১২ নং লাইনে ব্যবহৃত হয়েছে Comments ট্যাগ ।
  • ১২ নং লাইনের Comments ট্যাগটি মুছে নথিটি আবার সেভ করে ব্রাউজারে খুলুন ।
  • ১৪ নং লাইনে ব্যবহৃত হয়েছে <b> ট্যাগ ।
  • ১৫ নং লাইনে ব্যবহৃত হয়েছে <i> এবং <em> ট্যাগ ।
  • ১৬ নং লাইনে ব্যবহৃত হয়েছে <u> এবং <ins> ট্যাগ ।
  • ১৭নং লাইনে ব্যবহৃত হয়েছে <del> ট্যাগ ।
  • ১৮নং লাইনে ব্যবহৃত হয়েছে <kbd> এবং <tt> ট্যাগ ।
  • ২০ নং আর ২১ নং লাইনে ব্যবহৃত হয়েছে <pre> ট্যাগ ।
  • ২২ নং আর ২৩ নং লাইনে ব্যবহৃত হয়েছে <sub> এবং <sup> ট্যাগ ।
  • ২৪ নং লাইনে ব্যবহৃত হয়েছে <blink> ট্যাগ ।
  • ২৫ নং লাইনে ব্যবহৃত হয়েছে <marquee> ট্যাগ ।
remi html শেখার সহজ উপায় : অধ্যায় ৩
ব্রাউজারে আউটপুট

আজ এ-পর্যন্তই ।ধন্যবাদন্তে remi html শেখার সহজ উপায় : অধ্যায় ৩
ভাল থাকুন নিজে আর ভাল রাখুন অপরকে…।

টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

20 মন্তব্য

  1. খুব মজা লাগছে। নতুন অনেক কিছু শিখতে পারলাম। আপনাকে অনেক ধন্যবাদ।

  2. আগের lesson এ align=”left” use করা হইেছ।
    এখােন align=”middle” use করা হল না কেন ?

    • আপনি align Attribute-এর মান left,center,right এই তিনটির যে কোন একটা নিজের ইচ্ছা বা প্রয়োজোনিয়তা অনুযায়ি ব্যবহার করতে পারেন তবে align Attribute-এর middle বলে কোন মান নেই ।

      যে পর্বের প্রশ্ন সেই পর্ব করলে আমার সুবিধা হয়। ধন্যবাদ

  3. আমি এখন HTML শিখা শুরু করেছি!!! yahooooooooooooooooooooo
    থ্যাঙ্কস Buddy [img|http://gullee.com/smilies/15.gif]

একটি উত্তর ত্যাগ

Please enter your comment!
Please enter your name here

three + twelve =