একটি ওয়েব সাইটে আমরা text হিসেবে যা কিছু দেখতে পায় তার সবকিছু (Heading এবং বিশেষ কিছু tag বাদে) মূলত paragraph tag <p> এর অংশ। অর্থাৎ তা এই <p> tag এর content হিসেবে থাকে। সুতরাং বুঝতেই পারছেন দেখতে নিরীহ হলেও এটি কম গুরুত্বপূর্ণ নয়। আসুন, আর কথা না বাড়িয়ে আমরা সরাসরি আমাদের প্রথম কোডিং করে ফেলি। নিচের কোডিং টি লক্ষ্য করুন।
HTML Paragraph: Tutorial-01
| Code | Output |
|---|---|
<!--DOCTYPE-->
<html>
<head>
<title> My HTML </title>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>
|
This is a paragraph |
এই code এর প্রথম অংশটি হলো Doctype. এরপর html tag যেটি আমাদের সম্পূর্ণ html file এর container. তার ভেতরে রয়েছে title tag এবং body tag. <title> tag অংশে আমরা ফাইলটির title দিয়েছি "My html" এবং <body> হলো আমাদের মূল content paragraph tag <p> এর container.
উপরের text টি copy করুন অথবা type করুন। তারপর এটিকে যেকোন নাম এর সাথে .html extension দিয়ে save করুন। এখন এটিকে একটি ব্রাউজারে open করলে আমরা ঠিক আমাদের output এর মতো লেখা দেখতে পারবো। আমরা যেহেতু কোন Font declear করিনি তাই এক্ষেত্রে ব্রাউজার তার default font এই output দিবে।
আবার ব্রাউজারের উপরে অথবা Tab এর কোনায় লক্ষ্য করলে দেখতে পারবেন যে সেখানে লেখা "My html".
Screen Shot
এখন আমরা আমাদের HTML document-এ heading ও কিছু Attribute যোগ করবো। পূর্বেই বলা হয়েছে একটি পেজে আমরা যা কিছু দেখতে পরি তা সবই body tag এর মধ্যে থাকে। তাই heading যোগ করেত হলেও তা আমরা body tag "<body>" এর মধ্যে সেগুলো যোগ করবো এবং attribute টি অবশ্যই opening tag এর মধ্যে থাকবে। কোডিং এবং output নীচে দেয়া হলো।
HTML Paragraph: Tutorial-02
| Code | Output |
|---|---|
<!--DOCTYPE-->
<html>
<head>
&t;title> My HTML </title>
<head>
<body bgcolor="#fffacd">
<h1> This Is Heading </h1>
<p>This is a paragraph</p>
</body>
</html>
|
This Is HeadingThis is a paragraph |
Screen Shot
উপরের উদাহরনে <body> tag এ background color attribute যোগ করা হয়েছে। ফলে আমাদের পেজ এর background color এ কিছুটা পরিবর্তন এসেছে। এভাবে আমরা বিভিন্ন element এর বিভিন্ন attribute পরিবর্তন করে আমাদের ওয়েব পেজকে করে তুলতে পারি আরো আকর্ষনিয়।
HTML Heading tutorial এ আমরা align attribute এবং কিছু style attribute নিয়ে আলোচনা করেছি। সে attribute গুলো আমরা আমাদের HTML Paragraph এর জন্যেও ব্যবহার করতে পারি। আমরা এখন সেগুলো দেখবো পাশাপাশি কিছু নতুন inline tag এর ব্যবহার শিখবো।
HTML Paragraph এর বিভিন্ন Attributes:
Align |
Output |
|---|---|
| <p align="left" > Left Align </p> |
Left Align
|
| <p align="center" > Center Align </p> |
Center Align
|
| <p align="right"> Right Align </p> |
Right Align
|
| <p align="default" > Default Align </p> |
Default Align
|
| <p> <span style="color: #66f"> Text Color Attribute </span> </p> |
Text Color Attributes |
| <p> <span style="background-color: #999"> Background Color Attribute </span> </p> |
Background Color Attribute |
| <p> <font face="Segoe print"> Font: Segoe print</span> </p> | Font: Segoe print |
| <p> <font face="Algerian"> Font: Algerian</span> </p> | Font: Algerian |
| <p> <font face="Papyrus"> Font: Papyrus</span> </p> | Font: Papyrus |
| <p> <span style="color: #537; background-color: #999"> <font face="Algerian"> All Arrributes </font> </span> <p> |
All Arrributes |
| <p> <span style="color: #fc9; background-color: #000"> <font face="Papyrus"> <b>Various Arrributes</b></font> </span> <p> | Various Arrributes |
- মনে রাখবেনঃ
- Paragraph tag <p> হলো একমাত্র Block-level tag যা অন্য কোন block-level tag contain করতে পারেনা, কিন্তু <p> সকল inline-level tag এর containner.
HTML পর্বের আগের পোস্ট সমূহ-
>> HTML পর্ব-১ : পরিচয়
>> HTML পর্ব-২ : STRUCTURE
>> HTML পর্ব-৩ : Element
>> HTML পর্ব-8 : Attribute
>> HTML পর্ব-৫ : Heading
No comments:
Post a Comment