একজন দক্ষ ফ্রিল্যান্সার গড়ার লক্ষে দেশে এই প্রথম জাগোরিক নিয়ে এসেছে বাংলা এইচটিএমএল টিউটোরিয়াল আর্টিকেল যার এই পর্বে থাকছে এইচটিএমএল প্যারাগ্রাফ ও হেডিং সম্পর্কে বিস্তারিত।
এটি হচ্ছে বাংলা এইচটিএমএল টিউটোরিয়াল Part-3 এরই ধারাবাহিকতায় আমরা HTML এর সম্পূর্ণ সিরিজ শেষ করার চেষ্টা করব।
সকল পর্বের টিউটোরিয়াল এখানে ক্লিক করলে পেয়ে যাবেনঃ এইচটিএমএল টিউটোরিয়াল
এইচটিএমএল প্যারাগ্রাফ ও হেডিং (Tag & Heading: Part-3)
এইচটিএমএল প্যারাগ্রাফঃ এইচটিএমএল প্যারাগ্রাফ ও হেডিং
ওয়েব পেজে কোন লেখা প্রকাশ করতে চাইলে p ট্যাগ ব্যবহার করা হয়। <p> হচ্ছে এর start tag এবং </p> হচ্ছে এর end tag. এই start এবং end ট্যাগের ভিতর যেকোন লেখা দিতে পারেন। এই লেখা প্যারাগ্রাফ আকারে ব্রাউজারে দেখাবে।
যেমন
1.<p>When encountering a new paragraph "<p>" tag, the browser typically inserts one blank line plus some extra vertical space into the display before starting the new paragraph.</p>
এই ট্যাগে এট্রিবিউট ব্যবহার করা যায় যেমন নিচের এট্রিবিউটগুলি বেশি ব্যবহৃত
align, class, id, style, title এছাড়া ইভেন্ট এট্রিবিউট onmouseover, onclick ইত্যাদি ব্যবহার করা যায়।
class এবং id এট্রিবিউট ব্যবহার করে শুধু এই p এলিমেন্ট নয় বরং প্রায় সব এলিমেন্টে নাম দেয়া যায় পরে সেই নাম ধরে সিএসএস স্টাইল করা হয়। সিএসএস টিউটোরিয়ালে আরো বিস্তারিত দেখতে পাবেন। এখানে align, title এবং style এট্রিবিউটের কিছু প্রয়োগ দেখানো হল
1.<p align="right">Most browsers automatically left-justify a new paragraph.</p>2.3.<p align="center">To change this behavior, the align attribute for the "<p>" tag and provide four kinds of content justification: left, right, center, and justify.</p>4.5.<p style="background-color:#f00;" title="This is tooltip tile">You may specify a paragraph only within a block, along with other paragraphs, lists, forms, and preformatted text</p>
** এখানে শুধু জায়গা এবং সময় বাচানোর জন্য শুধুমাত্র p এলিমেন্ট দেয়া হল আসলে বাস্তবে <body></body> এর ভিতর এইসব এলিমেন্ট থাকবে এবং অবশ্যই ডকুমেন্টের পূর্ন স্ট্রাকচার অনুসরন করতে হবে। অর্থ্যাৎ একটা পূর্নাঙ্গ ডকুমেন্টের ভিতরেই এগুলি রাখতে হবে। যেমন Doc Type টিউটোরিয়ালে রেখেছি।
প্রদর্শন
Most browsers automatically left-justify a new paragraph.
To change this behavior, the align attribute for the
tag and provide four kinds of content justification: left, right, center, and justify.
You may specify a paragraph only within a block, along with other paragraphs, lists, forms, and preformatted text
title এট্রিবিউটের প্রভাব দেখতে শেষের লাইনরে উপর মাউস নিয়ে যান। এখানে লক্ষ করুন একসাথে একাধিক এট্রিবিউট একটা এলিমেন্টে ব্যবহার করেছি। আপনি চাইলে আরো বেশি ব্যবহার করতে পারেন।
আরও পড়ুনঃ বাংলা এইচটিএমএল টিউটোরিয়াল (Introduction: Part-1)
এইচটিএমএল হেডিংঃ এইচটিএমএল প্যারাগ্রাফ ও হেডিং
শিরোনাম বা হেডিং আকারে বড় ফন্টের লেখা ব্রাউজারে প্রদর্শনের জন্য এইচটিএমএল এ রয়েছে ৬ ধরনের হেডিং ট্যাগ। এর মধ্যে সবচেয়ে বড় হচ্ছে <h1></h1> এভাবে <h2></h2>, <h3></h3>… h1 পর্যন্ত
যেমন
1.<h1>A long flow of text</h1>2.<h2>unbroken by title,</h2>3.<h3subtitles, and other headers, </h3>4.<h4>crosses the eyes and numbs the mind</h4>5.<h5>not to mention the fact that</h5>6.<h6>it makes it nearly impossible to scan the text for a specific topic</h6>
** আবারো বলে রাখি যেটা প্যারাগ্রাফ টিউটোরিয়ালে বললাম – এখানে শুধু জায়গা এবং সময় বাচানোর জন্য শুধুমাত্র h1 এলিমেন্ট দেয়া হল আসলে বাস্তবে <body></body> এর ভিতর এইসব এলিমেন্ট থাকবে এবং অবশ্যই ডকুমেন্টের পূর্ন স্ট্রাকচার অনুসরন করতে হবে। অর্থ্যাৎ একটা পূর্নাঙ্গ ডকুমেন্টের ভিতরেই এগুলি রাখতে হবে। যেমন Doc Type টিউটোরিয়ালে রেখেছি…
প্রদর্শন:
A long flow of text
unbroken by title,
<h3subtitles, and=”” other=”” headers,=”” <=”” h3=””></h3subtitles,>
crosses the eyes and numbs the mind
not to mention the fact that
it makes it nearly impossible to scan the text for a specific topic
p ট্যাগের মতই এখানেও align, class, dir, id, lang, onlick, onkeydown, onkeypress, style, title ইত্যাদি এট্রিবিউট ব্যবহার করতে পারেন।
হেডিং (<h1></h1>) এবং প্যারাগ্রাফ (<p></p>) এলিমেন্ট ব্যবহার করে একটা
উদাহরন
01.<!DOCTYPE html>02.<html>03.<head>04.<title>Webcoachbd HTML Tutorials</title>05.06.</head>07.<body>08.09.<h1>Webcoachbd is the largest Bengali tutorial site</h1>10.11.<p>To learn Web developemnt and design please visit12.<ahref="http://www.webcoachbd.com">Webcoachbd</a>13.</p>14.15.</body>16.</html>
এটা একটা পূর্নাঙ্গ উদাহরন। .html এক্সটেনসন দিয়ে সেভ করে (যেমন index.html test.html) ব্রাউজারে রান করান বা আমাদের অনলাইন এডিটরে দেখুন।
উক্ত বিষয় সম্পর্কে কিছু জানার থাকলে কমেন্ট করতে পারেন।
আমাদের সাথে ইউটিউব চ্যানেলে যুক্ত হতে এখানে ক্লিক করুন এবং আমাদের সাথে ফেইজবুক পেইজে যুক্ত হতে এখানে ক্লিক করুন।
গুরুত্বপূর্ণ আপডেট ও তথ্য পেতে আমাদের ওয়েবসাইটে ভিজিট করুন।
