এইচটিএমএল, ওয়েব টিউটরিয়াল, ওয়েব ডেভেলপমেন্ট, ওয়েব প্রোগামিং

আসুন HTML শিখি : হয়ে যাই ওয়েব ডিজাইনার|| পর্ব: ০২

লিখেছেন:

নভেম্বর ২, ২০১১

প্রিয় বন্ধুরা, আশা করি আপনারা সবাই ভাল আছেন। প্রথমেই ধন্যবাদ জানাচ্ছি আমার লেখা “আসুন HTML শিখি : হয়ে যাই ওয়েব ডিজাইনার || পর্ব-১” টিউটোরিয়ালটি পড়ার জন্য। গত পর্বে আমি, এইচটিএমএল সম্পর্কে প্রাথমিক ধারনা, বেসিক পেজের গঠন, এডিটিং, গুরুত্বপূর্ণ ট্যাগ সমূহের ব্যাবহার সম্পর্কে সংক্ষেপে আলোচনা করেছিলাম। এ সংখ্যায় বেসিক ট্যাগ সমূহের ব্যাবহার সম্পর্কে বিস্তারিত আলোচনা করবো। চলুন তবে শুরু করা যাক।

এই পর্বে আমরা যে ট্যাগগুলো শিখবো তা শুধুমাত্র এইচটিএমএল পেজের BODY অংশে ব্যাবহার করা হয়ে থাকে। প্রতিটি ট্যাগই খুবই গুরুত্বপূর্ণ।

১. বডি ট্যাগ (Bold Tag):

আপনি আপনার লেখাকে যদি আন্ডার লাইন আকারে দেখাতে চান তাহলে আপনাকে <B> এই ট্যাগটি ব্যবহার করতে হবে।

<B> এবং </B> এর মাঝে যে টেক্সট লিখা হবে তা ওয়েব ব্রাউজার এ বোল্ড আকারে দেখাবে।

কোডঃ

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;Bold  Tag&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;b&gt;Radio Dream 24&lt;/b&gt;

&lt;/body&gt;

&lt;/html&gt;

<html>

<head>

</head>

<body>

<b>Radio Dream 24</b>

</body>

</html>

এবার এর ফলাফল লক্ষ্য করুন:

২. ইতালিক ট্যাগ (Italic Tag):

আপনি আপনার লেখাকে যদি আন্ডার লাইন আকারে দেখাতে চান তাহলে আপনাকে <I> এই ট্যাগটি ব্যবহার করতে হবে।

<I> এবং </I> এর মাঝে যে টেক্সট লিখা হবে তা ওয়েব ব্রাউজার এ ইতালিক আকারে দেখাবে।

কোডঃ

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;Italic  Tag&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;I&gt; Radio Dream 24 &lt;/I&gt;

&lt;/body&gt;

&lt;/html&gt;

<html>

<head>

<title>Italic Tag</title>

</head>

<body>

<I> Radio Dream 24 </I>

</body>

</html>

এবার এর ফলাফল লক্ষ্য করুন:

৩. আন্ডার লাইন ট্যাগ (Underline Tag):

আপনি আপনার লেখাকে যদি আন্ডার লাইন আকারে দেখাতে চান তাহলে আপনাকে <U> এই ট্যাগটি ব্যবহার করতে হবে।

<U> এবং </U> এর মাঝে যে টেক্সট লিখা হবে তা ওয়েব ব্রাউজার এ আন্ডার লাইন আকারে দেখাবে।

কোডঃ

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;Underline  Tag&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;u&gt; Radio Dream 24&lt;/u&gt;

&lt;/body&gt;

&lt;/html&gt;

<html>

<head>

<title>Underline Tag</title>

</head>

<body>

<u> Radio Dream 24</u>

</body>

</html>

এবার এর ফলাফল লক্ষ্য করুন:

৪. বোল্ড, আন্ডার লাইন, ইতালিক ট্যাগঃ

আপনি আপনার লেখাকে যদি আন্ডার লাইন আকারে দেখাতে চান তাহলে আপনাকে <B><U><I> এই ট্যাগটি ব্যবহার করতে হবে।

<B><U><I>এবং </B></U></I> এর মাঝে যে টেক্সট লিখা হবে তা ওয়েব ব্রাউজার এ বোল্ড,আন্ডার লাইন,ইতালিক আকারে দেখাবে।

কোডঃ

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;Bold, Underline, Italic Tag&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;b&gt;&lt;u&gt;&lt;i&gt; Radio Dream  24&lt;/b&gt;&lt;/u&gt;&lt;/i&gt;

&lt;/body&gt;

&lt;/html&gt;

<html>

<head>

<title>Bold, Underline, Italic Tag</title>

</head>

<body>

<b><u><i> Radio Dream 24</b></u></i>

</body>

</html>

এবার এর ফলাফল লক্ষ্য করুন:

৫. হেডিং ট্যাগ (Heading Tag):

কোন টেক্সট কে হেডিং হিসেবে দেখানোর জন্য এইচটিএমএল এ ৬ রকমের হেডিং ট্যাগ ব্যাবহার করা হয়। ট্যাগ গুলো হল যথাক্রমে- H1, H2, H3, H4, H5, H6.

কোডঃ

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;Heading Tag&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;h1&gt; I'm H1 tag &lt;/h1&gt;

&lt;h2&gt; I'm H2 tag &lt;/h2&gt;

&lt;h3&gt; I'm H3 tag &lt;/h3&gt;

&lt;h4&gt; I'm H4 tag &lt;/h4&gt;

&lt;h5&gt; I'm H5 tag &lt;/h5&gt;

&lt;h6&gt; I'm H5 tag &lt;/h6&gt;

&lt;/body&gt;

&lt;/html&gt;

<html>

<head>

<title>Heading Tag</title>

</head>

<body>

</body>

</html>

এবার এর ফলাফল লক্ষ্য করুন:

৭. স্পেস ট্যাগঃ

আপনি আপনার লেখাকে যদি এক অক্ষর পরিমান ফাকা রেখে শুরু করতে চান তাহলে   এই ট্যাগটি ব্যবহার করতে হবে। তেমনি পরপর দুই অক্ষর অথবা ততোধিক অক্ষর ফাকা রেখে যদি লেখা শুরু করতে চান তাহলে এই ট্যাগটি যত অক্ষর ফাকা রাখতে চান ঠিক ততবার লেখার শুরুতে বসাতে হবে।

কোডঃ

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;Space Code&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

Radio Dream 24           Tuning Your Dream

&lt;/body&gt;

&lt;/html&gt;

<html>

<head>

<title>Space Code</title>

</head>

<body>

Radio Dream 24 Tuning Your Dream

</body>

</html>

এবার এর ফলাফল লক্ষ্য করুন:

আজ এ পর্যন্তই থাকুক। আগামী পর্বে আরো নতুন নতুন ট্যাগ সমূহের ব্যাবহার সম্পর্কে আলোচনা করবো ইনশাআল্লাহ্‌। ততদিন পর্ব- ১ এবং পর্ব- ২ এর লেসন সমূহ বেশি বেশি চর্চা করতে থাকুন। প্রশ্ন থাকলে কমেন্ট করুন। ধন্যবাদ।