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

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

লিখেছেন:

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

প্রিয় বন্ধুরা,

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

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

৮. (ব্রেক) ট্যাগ:

ট্যাগ ব্যবহার করে দুইটি লাইন এর মাঝে ব্রেক তৈরি করা হয়ে থাকে।

কোডঃ

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;Break Code&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

Radio Dream 24&lt;br&gt;Tuning Your Dream

&lt;/body&gt;

&lt;/html&gt;

<html>

<head>

<title>Break Code</title>

</head>

<body>

Radio Dream 24 Tuning Your Dream

</body>

</html>

ফলাফল ছবিতে লক্ষ্য করুন:

৯. অনুচ্ছেদ ট্যাগ:

ট্যাগ ব্যবহার করে প্যারাগ্রাফ সৃষ্টি করা হয়। এর মাধ্যমে এক লাইন পরিমান ফাকা জায়গা রাখা যায়।

কোডঃ

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;Pragarape&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;p&gt;Radio Dream is a live online radio which is broadcast from Bangladesh. We are a new radio station playing

<html>

<head>

<title>Pragarape</title>

</head>

<body>

Radio Dream is a live online radio which is broadcast from Bangladesh. We are a new radio station playing

 the greatest variety of old and new Bangla songs 24 hours a day. Listen in your browser, or click on play

1	the greatest variety of old and new Bangla songs 24 hours a day. Listen in your browser, or click on play

 icon to stream in your preferred media player. Radio Dream is developed &amp; operated by PUSTfriendz Group.&lt;/p&gt;

1	icon to stream in your preferred media player. Radio Dream is developed & operated by PUSTfriendz Group.</p>

&lt;p&gt;Radio Dream  was created with an  aim. The aim is to broadcast Bangla music as well as Bengali culture to

1	<p>Radio Dream was created with an aim. The aim is to broadcast Bangla music as well as Bengali culture to

 as many people as we can all over the word. Radio Dream committed to promote Bengali Culture, Music, News

1	as many people as we can all over the word. Radio Dream committed to promote Bengali Culture, Music, News

and many more through our radio station..&lt;/p&gt;

&lt;/body&gt;

&lt;/html&gt;

and many more through our radio station..

</body>

</html>

ফলাফল ছবিতে লক্ষ্য করুন:

১০. পেজ Align Tag:

আপনি আপনার পারাগ্রাফ আকারে লিখা টেক্সট গুলোকে HTML পেজের center বা left বা right পাশে দেখাতে চাইলে Page Align ট্যাগ টি ব্যাবহার করতে পারেনঃ

কোডঃ

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;Page  align&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;p align="center"&gt;Radio  Dream24|| Tuning Your  Dream!&lt;/p&gt;

&lt;p&gt;Radio Dream is a live  online radio which is  broadcast from  Bangladesh. We are a new  radio

<html>

<head>

<title>Page align</title>

</head>

<body>

Radio Dream24|| Tuning Your Dream!

Radio Dream is a live online radio which is broadcast from Bangladesh. We are a new radio

station playing the  greatest variety of old  and new Bangla songs 24  hours a day&lt;/p&gt;

&lt;/body&gt;

&lt;/html&gt;

station playing the greatest variety of old and new Bangla songs 24 hours a day

</body>

</html>

ফলাফল ছবিতে লক্ষ্য করুন:

১১.ফ্রন্ট সাইজ এবং কালার কোড ট্যাগঃ

ট্যাগ ব্যাবহার করে ওয়েব সাইটের টেক্সটের স্টাইল, সাইজ এবং কালার যোগ করা হয়। size, color ব্যাবহার করে আপনি ফন্ট কে কাস্টমাইজ করতে পারি। Size attribute এর সাহায্যে ফন্ট এর সাইজ ঠিক করা হয়। ফন্ট এর আকার এর গ্রহনযোগ্য মান হচ্ছে ১(সবচেয়ে ছোট) হতে ৭(সবচেয়ে বড়), ফন্ট এর ডিফল্ট আকার হচ্ছে ৩।

কোডঃ

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;Front,  Size, Color&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;p&gt;

&lt;font face="Comic Sans  MS" size="4"  color="red"&gt;

Radio  Dream24, Tuning  Your  Dream&lt;/font&gt;

&lt;/p&gt;

&lt;/body&gt;

&lt;/html&gt;

<html>

<head>

<title>Front, Size, Color</title>

</head>

<body>

Radio Dream24, Tuning Your Dream

</body>

</html>

এখানে ফ্রন্ট Comic Sans MS এর পরিবর্তে Times New Roman, Tahoma, Terminal, Arial ইত্যাদি এবং কালার red এর পরিবর্তে blue, green, yellow ইত্যাদি ব্যাবহার করা যায়।

ফলাফল ছবিতে লক্ষ্য করুন:

১২। <img/> ছবি স্থাপন ট্যাগঃ

আমরা <img/> ট্যাগ টি ব্যবহার করে ওয়েব পেজ এ ইমেজ নিয়ে আসতে পারি। তবে এক্ষেত্রে ছবি এর Src/সোর্স(source) অর্থাৎ ইমেজের উৎস বা যেখানে image/picture file টি এর অবস্থান উল্লেখ করতে হবে।

দুইটি উপায়ে ইমেজের সোর্স নির্দিস্ট করে দিতে পারি। প্রথমটি URL ব্যাবহার করে এবং অন্যটি host server এ image file আপলোড করে image file এর directory ব্যাবহার করে।

URL ব্যাবহার কোডঃ

&lt;img src="http://radiodream24.co.cc/images/radiodream_fbd.gif"/&gt;

1	<img src="http://radiodream24.co.cc/images/radiodream_fbd.gif"/>

Directory ব্যাবহার কোডঃ

&lt;img src="/.../radiodream_fbd.gif"/&gt;

1	<img src="/.../radiodream_fbd.gif"/>

আপনি চাইলে ছবির height এবং width ঠিক করে দিতে পারেন। এ জন্নে আপনাকে নিন্মের কোডটি ব্যাবহার করতে হবে।

height এবং width কোডঃ

&lt;img src="/.../radiodream_fbd.gif" height="150" width="150/&gt;

1	<img src="/.../radiodream_fbd.gif" height="150" width="150/>

সম্পূর্ণ কোডঃ

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;Image  Insert&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;p&gt;

Radio  Dream24, Tuning   Your  Dream

&lt;/p&gt;

&lt;img  src="radiodream_fbd.gif"  height="150" width="150/&gt;

&lt;/body&gt;

&lt;/html&gt;

<html>

<head>

<title>Image Insert</title>

</head>

<body>

Radio Dream24, Tuning Your Dream

</body>

</html>

ফলাফল ছবিতে লক্ষ্য করুন:

আজ এ পর্যন্তই থাকুক। আগামী পর্বে আরো নতুন নতুন ট্যাগ সমূহের ব্যাবহার সম্পর্কে আলোচনা করবো ইনশাআল্লাহ্‌। ততদিন পর্ব- ১,২,৩ এর লেসন সমূহ বেশি বেশি চর্চা করতে থাকুন। কারন চর্চা ছাড়া এইচটিএমএল ল্যাঙ্গুয়েজ আয়ত্তে আনা সম্ভব নয়।