২) অধ্যায়-২ (এইচটিএমএল - ২)।
২.৬.১.২) প্যরাগ্রাফ ট্যাগ (p) ।
- এইচটিএমএল এ
<p></p>হচ্ছে প্যরাগ্রাফ ট্যাগ । - যে কোন রকমের প্যারাগ্রাফএর ক্ষেত্রে এই ট্যাগ ব্যবহার হয় ।
- এটি ব্লক লেভেল ইলিমেন্ট ।
- এটির ডিফল্ট স্টাইল হিসেবে ফন্ট সাইজ এবং মারজিন ব্যবহার করা হয়েছে ।
- এটির ক্ষেত্রেও
IdএবংClassএট্রিবিউট ব্যবহার করা হয় । - এখন আমরা আমদের কোড এডিটরে নিচের কোড টাইপ করি এবং ব্রাউজারে সেটিকে ওপেন করি ।
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi tenetur cum ab, natus sapiente hic repellat, dolores vero cupiditate, omnis eligendi sequi beatae amet error. Quas quia deserunt quaerat unde.</</p>
২.৬.১.৩) লিংক ট্যাগ (a) ।
লিংক কি? লিংক হচ্ছে ওয়েব পেজের যে কোন ইলিমেন্ট, যেটিতে ক্লিক করলে ব্রাউজারে নতুন কোন পেজ ওপেন হয় হতে পরে সেটি সেই সাইটের অথবা অন্য কোন সাইটের । একটি ওয়েব পেজে অনেক গুলো লিংক থাকতে পারে । কিছু লিংক হচ্চে অক্সটারনাল এবং কিছু লিংক ইন্টারনাল । লিংক ট্যাগের নিচের বৈাশিষ্ট গুলো থাকে ।
- এইচটিএমএল এ
<a></a>হচ্ছে লিংক ট্যাগ । - যে কোন কন্টেন্টকে এই ট্যাগের মধ্যে রাখলে সেটি লিংক হিসেবে কাজ করবে ।
- এটি ইন লাইন ইলিমেন্ট ।
- এটির ডিফল্ট স্টাইল হিসেবে ফন্ট সাইজ, রং এবং আনডার লাইন ব্যবহার করা হয়েছে ।
- এই ট্যাগের জন্যে
hrefএট্রিবিউটটি বাদ্ধতামুলক, এট্রিবিউটটি লিংকটির লোকেসন নির্দেশ করে । - এটির ক্ষেত্রেও
IdএবংClassএট্রিবিউট ব্যবহার করা হয় । - এখন আমরা আমদের কোড এডিটরে নিচের কোড টাইপ করি এবং ব্রাউজারে সেটিকে ওপেন করি ।
<a href='http://www.google.com'>Google</a>
<a href='about.html' >About</a>
২.৬.১.৪) ব্লককোট ট্যাগ (blockquote) ।
যখন কোন সাইটে অন্যকেন সাইটের লেখা বা উদ্ধৃতি অথবা কোন লেখকের উক্তি হুবুহু উল্যেখ করা হয়, তখন ব্লককোট ট্যাগ ব্যবহার করা হয় । এটি একটি পোর্টফোলিও সাইটের জন্যে খুব গুরুত্ব পূর্ন কারন ক্লায়েন্টএর যেকোন পজেটিব কমেন্টকে এটি দ্বারা রিপ্রেজেন্ট করা হয় ।
- এইচটিএমএল এ
<blockquote></blockquote>হচ্ছে ব্লককোট ট্যাগ । - এটি ব্লক লেভেল ইলিমেন্ট ।
- এটির ডিফল্ট স্টাইল হিসেবে ফন্ট সাইজ, টেক্সট ইনডেন্ট ব্যবহার করা হয়েছে ।
- এই ট্যাগের জন্যে
citeএট্রিবিউটটি বাদ্ধতামুলক, এট্রিবিউটটি সঠিক ডকুমেন্টএর লিংক ধারন করে । - এটির ক্ষেত্রেও
IdএবংClassএট্রিবিউট ব্যবহার করা হয় । - এখন আমরা আমদের কোড এডিটরে নিচের কোড টাইপ করি এবং ব্রাউজারে সেটিকে ওপেন করি ।
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
২.৬.১.৫) এড্রেস ট্যাগ (address) ।
অনেক ক্ষেত্রে আমরা সাইটে ঠিকানা উল্লেক্ষ করি । এই ঠিকানা বা এড্রেসটির জন্যে এড্রেস ট্যাগ ব্যবহার করা হয় ।
- এইচটিএমএল এ
<address></address>হচ্ছে এড্রেস ট্যাগ । - এটি ব্লক লেভেল ইলিমেন্ট ।
- এটির ডিফল্ট স্টাইল হিসেবে ফন্ট সাইজ, ফন্ট স্ট্রাইল ইটালিক ব্যবহার করা হয়েছে ।
- এই ট্যাগের জন্যে কোন এট্রিবিউট বাদ্ধতামুলক নয় ।
- তবে লাইন ব্রেকের জন্যে
<br/>ব্যবহার করতে হবে । - এটির ক্ষেত্রেও
IdএবংClassএট্রিবিউট ব্যবহার করা হয়, যদি প্রয়োজন হয় । - এখন আমরা আমদের কোড এডিটরে নিচের কোড টাইপ করি এবং ব্রাউজারে সেটিকে ওপেন করি ।
<address>
25 Backer street, <br/>
New Yourk, England, <br/>
Phone: +0123 456 789
</address>
২.৬.১.৬) এব্রিভিয়েসন ট্যাগ (abbr) ।
যখন প্রতিস্ঠান, সংগঠন বা কোন ডেফিনেসন্সকে সংক্ষেপে প্রকাশ করার প্রয়োজন পরে, তখন এব্রিভিয়েসন ট্যাগ ব্যবহার করা হয় । এটিতে টাইটেল title এট্রিবিউট ব্যবহার করা হয় যেটি পুরু সংঙ্ঘা প্রকাশ করে ।
- এইচটিএমএল এ
<abbr></abbr>হচ্ছে এব্রিভিয়েসন ট্যাগ । - এটি ইনলাইন ইলিমেন্ট ।
- এটির ডিফল্ট স্টাইল হিসেবে ফন্ট সাইজ, এবং আনডার লাইন ব্যবহার করা হয়েছে ।
- এই ট্যাগের জন্যে টাইটেল এট্রিবিউটটি বাদ্ধতামুলক ।
- এটির ক্ষেত্রেও
IdএবংClassএট্রিবিউট ব্যবহার করা হয়, যদি প্রয়োজন হয় । - এখন আমরা আমদের কোড এডিটরে নিচের কোড টাইপ করি এবং ব্রাউজারে সেটিকে ওপেন করি ।
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi tenetur cum ab, The <abbr title="World Health Organization">WHO</abbr> was founded in 1948. sapiente hic repellat, dolores vero cupiditate, omnis eligendi sequi beatae amet error. Quas quia deserunt quaerat unde.
</p>
২.৬.১.৭) প্রিফরমেটেড ট্যাগ (pre) ।
আমরা জানি যে এইচ টি এম এল ফাইল যখন রেনডার হয় তখন অনেক গুলো হোয়াইট স্পেস একটি মাত্র স্পেসে পরিনত হয় । ফলে, যখন ট্যাগের ভিতরে আমরা যা লিখবো তাই ব্রাউজার প্রদর্শনের প্রয়োজন হয়, তখন এই ট্যাগ ব্যবহার করা হয় । অর্থাৎ এই ট্যাগের মধ্যের সকল টেক্সটকে যেভাবে লেখা হয় সেভাবেই ব্রাউজার সেটি সেভাবেই প্রদর্শন করে ।
- এইচটিএমএল এ
<pre></pre>হচ্ছে প্রিফরমেটেড ট্যাগ । - এটি ব্লক লেভেল ইলিমেন্ট ।
- এটির ডিফল্ট স্টাইল হিসেবে ফন্ট সাইজ, ফন্ট ফেমেলি, ব্যবহার করা হয়েছে ।
- এটির ক্ষেত্রেও
IdএবংClassএট্রিবিউট ব্যবহার করা হয়, যদি প্রয়োজন হয় । - এখন আমরা আমদের কোড এডিটরে নিচের কোড টাইপ করি এবং ব্রাউজারে সেটিকে ওপেন করি ।
<pre>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quasi tenetur cum ab, natus
sapiente hic repellat, dolores vero cupiditate, omnis eligendi sequi beatae amet error.
Quas quia deserunt quaerat unde.
</pre>
২.৬.১.৮) কোড ট্যাগ (code) ।
কখনো কখনো আমাদের সাইটে বিভিন্ন প্রগ্রামিং এর ভাষা লিখবার প্রয়োজন হয় । কিন্তু প্রগ্রামিং ভাষার ক্ষেত্রে লাইন ব্রেক, স্পেশ খুব গুরুত্ব পূর্ন । সেই জন্যে কোড ট্যাগটি ব্যবহার করা হয় । তবে এটি প্রি ট্যাগের ভিতরে ব্যবহার করা হয় ।
- এইচটিএমএল এ
<code></code>হচ্ছে কোড ট্যাগ । - এটি ব্লক লেভেল ইলিমেন্ট ।
- এটির ডিফল্ট স্টাইল হিসেবে ফন্ট সাইজ, ফন্ট ফেমেলি, ব্যবহার করা হয়েছে ।
- এটির ক্ষেত্রেও
IdএবংClassএট্রিবিউট ব্যবহার করা হয়, যদি প্রয়োজন হয় । - এখন আমরা আমদের কোড এডিটরে নিচের কোড টাইপ করি এবং ব্রাউজারে সেটিকে ওপেন করি ।
<pre><code>
function myFunction(){
console.log(‘Hi, I am javascript’);
}
</code></pre>
২.৬.১.৯) স্ট্রং ট্যাগ (strong) ।
সাইটের যে কোন টেক্সটকে বোল্ড আকারে দেখাবার জেন্য স্ট্রং ট্যাগ ব্যবহার হয় । এটি যে কোন লেখাকে বোল্ড আকারে দেখায়।
- এইচটিএমএল এ
<strong></strong>হচ্ছে স্ট্রং ট্যাগ । - এটি ইনলাইন লেভেল ইলিমেন্ট ।
- এটির ডিফল্ট স্টাইল হিসেবে ফন্ট ওয়েট ব্যবহার করা হয়েছে ।
- এটির ক্ষেত্রেও
IdএবংClassএট্রিবিউট ব্যবহার করা হয়, যদি প্রয়োজন হয় । - এখন আমরা আমদের কোড এডিটরে নিচের কোড টাইপ করি এবং ব্রাউজারে সেটিকে ওপেন করি ।
<p> The fazy brown fox <strong>jump</strong> over the lazy dog </p>
২.৬.১.১০) ইএম ট্যাগ (em) ।
কখন কখন প্যারাগ্রাফের ভিতরের কিছু টেক্সটকে অন্যরকম ভাবে দেখানের প্রয়োজন হয়, তখন ইএম ট্যাগটি ব্যবহার করা হয়, এটি টেক্সটিকে ইটালিক স্টাইলে ব্রাউজারে প্রদর্শন করে।
- এইচটিএমএল এ
<em></em>হচ্ছে ইএম ট্যাগ । - এটি ইনলাইন লেভেল ইলিমেন্ট ।
- এটির ডিফল্ট স্টাইল হিসেবে ফন্ট স্টাইল ব্যবহার করা হয়েছে ।
- এটির ক্ষেত্রেও
IdএবংClassএট্রিবিউট ব্যবহার করা হয়, যদি প্রয়োজন হয় । - এখন আমরা আমদের কোড এডিটরে নিচের কোড টাইপ করি এবং ব্রাউজারে সেটিকে ওপেন করি ।
<p> The fazy brown fox <em>jump</em> over the lazy dog </p>
২.৬.১.১১) স্প্যান ট্যাগ (span) ।
যখন কোন টেক্সকে নিজের মনের মত করে স্টাইল দেবার প্রয়োজন হয়, তখন এটিকে স্প্যান ট্যাগের মধ্যে রেখে এর মাধ্যেমে সিএসএস দ্বারা স্টাইল দিতে হয়।
- এইচটিএমএল এ
<span></span>হচ্ছে স্প্যান ট্যাগ । - এটি ইনলাইন লেভেল ইলিমেন্ট ।
- এটির কোন ডিফল্ট স্টাইল নেই ।
- এটির ক্ষেত্রেও
IdএবংClassএট্রিবিউট ব্যবহার করা হয়, যদি প্রয়োজন হয় । - এখন আমরা আমদের কোড এডিটরে নিচের কোড টাইপ করি এবং ব্রাউজারে সেটিকে ওপেন করি ।
<p> The fazy brown fox <span>jump</span> over the lazy dog </p>
২.৬.১.১২) সাবস্ক্রিপ এবং সুপারস্ক্রিপ ট্যাগ (sub & sup) ।
যখন কোন টেক্সকে সাবস্ক্রিপ্ট বা সুপারস্ক্রিপ্ট হিসেবে ব্যবহার করতে হয় তখন এই দুটি ট্যাগ ব্যবহার করা হয়।
- এইচটিএমএল এ
<sub></sub>হচ্ছে সাবস্ক্রিপ্ট ট্যাগ এবং<sup></sup>হচ্ছে সুপারস্ক্রিপ্ট ট্যাগ । - এটি ইনলাইন লেভেল ইলিমেন্ট ।
- এটির কোন ডিফল্ট স্টাইল নেই ।
- এটির ক্ষেত্রেও
IdএবংClassএট্রিবিউট ব্যবহার করা হয়, যদি প্রয়োজন হয় । - এখন আমরা আমদের কোড এডিটরে নিচের কোড টাইপ করি এবং ব্রাউজারে সেটিকে ওপেন করি ।
<p> H<sub>2</sub>O </p>
<p> X<sup>2</sup></p>
২.৬.২) লিস্ট ট্যাগ ।
২.৬.২.১) আনঅর্ডার লিস্ট (ul) ।
আনঅর্ডার লিস্ট হচ্ছে যখন সাইটে কোন লিস্ট দেবার প্রয়োজন হয় কিন্তু সেটির অর্ডার গুরুত্বপূর্ণ নয় । যেমন নিচের লিস্টটি, এটিতে কোন রকমের অর্ডার নেই শুধু মাত্র আইকন আছে ।
- এইচটিএমএল এ
<ul></ul>হচ্ছে আনঅর্ডার ট্যাগ । - এটির সাথে আর একটি ট্যাগ ব্যবাহার করতে হয়, সেটিকে বলে লিস্ট ট্যাগ
<li></li>। - লিস্ট ট্যাগ ছারা আনঅর্ডার ট্যাগ কাজ করবে না।
- এটি একটি ব্লক লেভেল ইলিমেন্ট ।
- এটির ডিফল্ট স্টাইল হিসেবে লেফট মার্জিন এবং লিস্ট স্টাইল (বামের আইকন) ইত্যাদি ব্যবহার করা হয়েছে ।
- এটির ক্ষেত্রেও
IdএবংClassএট্রিবিউট ব্যবহার করা হয়, যদি প্রয়োজন হয় । - এখন আমরা আমদের কোড এডিটরে নিচের কোড টাইপ করি এবং ব্রাউজারে সেটিকে ওপেন করি ।
<ul>
<li>List one</li>
<li>List two</li>
<li>List three</li>
</ul>
২.৬.২.২) অর্ডার লিস্ট (ol) ।
অর্ডার লিস্ট হচ্ছে যখন সাইটে কোন লিস্ট দেবার প্রয়োজন হয় কিন্তু সেটির অর্ডার গুরুত্বপূর্ণ । এবং নাম্বারিং এর প্রয়োজন আছে তখন এটি ব্যবহার হয় ।
- এইচটিএমএল এ
<ol></ol>হচ্ছে অর্ডার ট্যাগ । - এটির সাথে আর একটি ট্যাগ ব্যবাহার করতে হয়, সেটিকে বলে লিস্ট ট্যাগ
<li></li>। - লিস্ট ট্যাগ ছারা অর্ডার ট্যাগ কাজ করবে না।
- এটি একটি ব্লক লেভেল ইলিমেন্ট ।
- এটির ডিফল্ট স্টাইল হিসেবে লেফট মার্জিন এবং লিস্ট স্টাইল (বামের আইকন) ইত্যাদি ব্যবহার করা হয়েছে ।
- এটির ক্ষেত্রেও
IdএবংClassএট্রিবিউট ব্যবহার করা হয়, যদি প্রয়োজন হয় । - এখন আমরা আমদের কোড এডিটরে নিচের কোড টাইপ করি এবং ব্রাউজারে সেটিকে ওপেন করি ।
<ol>
<li>List one</li>
<li>List two</li>
<li>List three</li>
</ol>
২.৬.২.২) ডেফিনেসন্স লিস্ট (dl) ।
ডেফিনেসন্স লিস্টটি আগের দুটি লিস্ট ট্যাগ থেকে সম্পূর্ণ আলাদা এটি সাইটে কোন টার্মকে ডিফাইন করবার জন্যে ব্যবহার হয়,
- এইচটিএমএল এ
<dl></dl>হচ্ছে ডেফিনেসন্স ট্যাগ । - এটির সাথে আরও দুইটি ট্যাগ ব্যবাহার করতে হয় ।
- একটি হল ডেস্ক্রিপসন্স টার্ম
<dt></dt>ট্যাগ এবং অন্যটি হল ডেস্ক্রিপসন্স ডেফিনেসন্স<dd></dd>ট্যাগ। - এই দুটি ট্যাগ ছারা
dlট্যাগ কাজ করবে না। - এটি একটি ব্লক লেভেল ইলিমেন্ট ।
- এটির ডিফল্ট স্টাইল হিসেবে লেফট মার্জিন এবং ইন্ডেন্টেসন ইত্যাদি ব্যবহার করা হয়েছে ।
- এটির ক্ষেত্রেও
IdএবংClassএট্রিবিউট ব্যবহার করা হয়, যদি প্রয়োজন হয় । - এখন আমরা আমদের কোড এডিটরে নিচের কোড টাইপ করি এবং ব্রাউজারে সেটিকে ওপেন করি ।
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>