Educate Yourself: HTML

Showing posts with label HTML. Show all posts

27.ওয়েবে ফ্লাস ফাইল চালানোর পদ্ধতি ..

Posted by Monir Hossain On 4:31:00 pm | No comments

ফ্লাস এনিমেশন ওয়েব সাইটের একটি অন্যতম আকর্ষণীয় উপাদান। আকর্ষণীয় নেভিগেশন বার, ব্যানার, বাটন ইত্যাদিতে ফ্লাসের এনিমেশন যুক্ত করে যেমন ওয়েব সাইটের ইন্টারফেসকে আকর্ষণীয় করে তোলা যায়, পাশাপাশি সাইটটিও ব্যবহার বান্ধব হয়ে উঠে। HTMLদ্বারা তৈরি পেজে <embed> ট্যাগ ব্যবহার করে অডিও এবং ভিডিও এর মত সহজেই ফ্লাসে তৈরি এনিমেশন অর্থাৎ SWF ফাইল যুক্ত করা যায় ।

পূর্ব প্রস্তুতি

ডেক্সটপে একটা flash নামে folder নিতে হবে এর মধ্যে flash.swf নামে save করা একটা ভিডিও ফাইল রাখতে হবে।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
</head>
<body >
<center>
<embed src="flash.swf" width="250" height="240">
</embed>
</center>
</body>
</html>

ডেক্সটপে তৈরি করা flash folder এর মধ্যে একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

প্রজেক্ট বিশ্লেষণ

ফ্লাস যুক্ত করার জন্য <embed> ট্যাগ ব্যবহার করা হয়। <embed src="flash.swf" width="250" height="240">
</embed>

src="flash.swf" এখানে src="…………." এর মধ্যে ফ্লাস ফাইলের লিংক যুক্ত করা হয়।

width="250" height="240" এর মাধ্যমে ব্রাউজারে প্রদর্শিত ফ্লাস এনিমেশনের আকৃতি নির্ধারণ করা হয়।

নির্দেশনা:

নির্দেশনা: যদি ওয়েব পেজে ফ্লাস এনিমেশন প্রদর্শিত না হয় তাহলে flash player অথবা ব্রাউজারের নির্দেশনা অনুযায়ী প্রয়োজনীয় প্লাগ ইনস্ ইন্সটল করে নিন।

26.ওয়েবে ভিডিও ফাইল চালানোর পদ্ধতি ..

Posted by Monir Hossain On 4:28:00 pm | No comments

সংঘটিত বাস্তব ঘটনাকে পরিপূর্ণভাবে উপস্থাপনার ক্ষেত্রে ভিডিও সবচেয়ে উপযোগী মাধ্যম। দৈনন্দিন সংবাদ প্রকাশক ওয়েব সাইটগুলো তাদের দৈনন্দিন ঘটনাগুলোকে টেক্সট এবং ইমেজ ব্যবহারের মাধ্যমে প্রকাশের পাশাপাশি ভিডিও প্রকাশের মাধ্যমে আরো বেশি জনপ্রিয়তা অর্জনের সুযোগ পাচ্ছে, এবং ব্যবহারকারীরা এ সকল ঘটনার বাস্তব চিত্র দেখা, এবং জানার পাশাপাশি প্রয়োজনে সংগ্রহ করে রাখতে পারছেন। বর্তমানে ভিডিও শুধু মানুষের বিনোদন এবং বাস্তব ঘটনা প্রকাশের মাধ্যমই নয়, এটি শিক্ষার অন্যতম বাহনে পরিণত হয়েছে।

অসংখ্য শিক্ষামূলক ওয়েব সাইট বিভিন্ন বিষয়ের উপর প্রতিদিন নতুন নতুন টেক্সট ভিত্তিক টিউটোরিয়ালের পাশাপাশি ভিডিও টিউটোরিয়াল প্রকাশ করছে। যা মানুষকে পৃথিবীর যে কোন প্রান্ত থেকে শুধুমাত্র শেখা এবং জানার সুযোগই সৃষ্টি করছে না, প্রশ্ন বিনিময় এবং আলোচনার মুক্ত প্লাটফর্ম তৈরির মাধ্যমে পরিপূর্ণ শিক্ষা বিস্তারেও ভুমিকা রাখছে। HTMLদ্বারা তৈরি পেজে <embed> ট্যাগ ব্যবহার করে সহজেই ভিডিও যুক্ত করা যায় এবং নিয়ন্ত্রণ করা যায়।

পূর্ব প্রস্তুতি

ডেক্সটপে একটা video নামে folder নিতে হবে এর মধ্যে video.wmv নামে save করা একটা ভিডিও ফাইল রাখতে হবে।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
</head>
<body >
<p>
<center>
<embed src="video.wmv" width="344" height="300"
autostart="false" controller="true" loop="false" >
</embed>
<h3 style="color:#F00">Click the play button and enjoy video.</h3>
</center>
</p>
</body>
</html>

ডেক্সটপে তৈরি করা video folder এর মধ্যে একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

প্রজেক্ট বিশ্লেষণ

ভিডিও যুক্ত করার জন্য <embed> ট্যাগ ব্যবহার করা হয়। <embed src="video.wmv" width="344" height="300"
autostart="false" controller="true">
</embed>

src="video.wmv" এখানে src="…………." এর মধ্যে ভিডিও ফাইলের লিংক যুক্ত করা হয়।

height="344" width="300" এর মাধ্যমে ব্রাউজারে প্রদর্শিত ভিডিও প্লেয়ারের আকৃতি নির্ধারণ করা হয়।

controller="true" এর মাধ্যমে ওয়েব পেজে ভিডিও প্লেয়ার প্রদর্শন করা হবে কিনা তার নির্দেশ প্রদান করা হয়। যদি controller="……….." এর মধ্যে true লেখা হয় তাহলে ভিডিও প্লেয়ার প্রদর্শিত হবে আর false লেখা হলে ভিডিও প্লেয়ার প্রদর্শিত হবে না।

loop="false" এর মাধ্যমে ভিডিও ফাইলটি কি একবার প্লে হবে না লুপ আকারে বারবার প্লে হবে তার নির্দেশ প্রদান করা হয়। যেহেতু false লেখা আছে; সুতরাং একবার প্লে হবে।

autostart="false" এর মাধ্যমে ভিডিও ফাইলটি অটোপ্লে অর্থাৎ ওয়েব পেজ লোড হওয়ার সাথে সাথেই প্লে হবে, না ভিডিও প্লেয়ারের প্লে বাটনে ক্লিক করার পর প্লে হবে তার নির্দেশ প্রদান করা হয়। যেহেতু false লেখা আছে; সুতরাং অটোপ্লে হবে না, ভিডিও প্লেয়ারের প্লে বাটনে ক্লিক করার পর প্লে হবে।

নির্দেশনা:

যদি ওয়েব পেজে অডিও প্লেয়ার প্রদর্শিত না হয় তাহলে ব্রাউজারের নির্দেশনা অনুযায়ী প্রয়োজনীয় প্লাগ ইনস্ ইন্সটল করে নিন।

25.ওয়েবে অডিও ফাইল চালানোর পদ্ধতি ..

Posted by Monir Hossain On 4:26:00 pm | No comments

কোন বিষয়কে উপস্থাপনার ক্ষেত্রে, টেক্সট এবং ছবির পাশাপাশি অডিও-ভিডিও ব্যবহার করলে বিষয়টি আরো প্রাণবন্ত হয়ে উঠে। ওয়েব মিডিয়ার মাধ্যমে এ কাজটি যতটা ভালোভাবে করা যায় আর অন্য কোনো মিডিয়ায় মাধ্যমে তা সম্ভব নয়। HTML দ্বারা তৈরি পেজে <embed> ট্যাগ ব্যবহার করে সহজেই অডিও ফাইল যুক্ত করা যায় এবং নিয়ন্ত্রণ করা যায়।

পূর্ব প্রস্তুতি

ডেক্সটপে একটা audio নামে folder নিতে হবে এর মধ্যে audio.mp3 নামে save করা একটা অডিও ফাইল রাখতে হবে।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
</head>
<body >
<p>
<center>
<embed src="audio.mp3" height="35" width="300"
controller="true" loop="false" autostart="false">
</embed>
<h3 style="color:#F00">Click play button and enjoy music.</h3>
</center>
</p>
</body>
</html>

ডেক্সটপে তৈরি করা audio folder এর মধ্যে একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

প্রজেক্ট বিশ্লেষণ

অডিও যুক্ত করার জন্য <embed> ট্যাগ ব্যবহার করা হয়। <embed src="audio.mp3" height="35" width="300"
controller="true" loop="false" autostart="false">
</embed>

src="audio.mp3" এখানে src="…………." এর মধ্যে অডিও ফাইলের লিংক যুক্ত করা হয়।

height="35" width="300" এর মাধ্যমে ব্রাউজারে প্রদর্শিত অডিও প্লেয়ারের আকৃতি নির্ধারণ করা হয়।

controller="true" এর মাধ্যমে ওয়েব পেজে অডিও প্লেয়ার প্রদর্শন করা হবে কিনা তার নির্দেশ প্রদান করা হয়। যদি controller="……….." এর মধ্যে true লেখা হয় তাহলে অডিও প্লেয়ার প্রদর্শিত হবে আর false লেখা হলে অডিও প্লেয়ার প্রদর্শিত হবে না।

loop="false" এর মাধ্যমে audio ফাইলটি কি একবার প্লে হবে না লুপ আকারে বারবার প্লে হবে তার নির্দেশ প্রদান করা হয়। যেহেতু false লেখা আছে; সুতরাং একবার প্লে হবে।

autostart="false" এর মাধ্যমে audio ফাইলটি অটোপ্লে অর্থাৎ ওয়েব পেজ লোড হওয়ার সাথে সাথেই প্লে হবে, না অডিও প্লেয়ারের প্লে বাটনে ক্লিক করার পর প্লে হবে তার নির্দেশ প্রদান করা হয়। যেহেতু false লেখা আছে; সুতরাং অটোপ্লে হবে না, অডিও প্লেয়ারের প্লে বাটনে ক্লিক করার পর প্লে হবে।

নির্দেশনা:

যদি ওয়েব পেজে অডিও প্লেয়ার প্রদর্শিত না হয় তাহলে QuickTime Player ইন্সটল করে নিন অথবা ব্রাউজারের নির্দেশনা অনুযায়ী প্রয়োজনীয় প্লাগ ইনস্ ইন্সটল করে নিন।

24.HTML এ স্ক্রিপ্ট এর ব্যবহার ..

Posted by Monir Hossain On 4:24:00 pm | No comments

HTML কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়। তাই ওয়েব পেজেও প্রোগ্রামিং এর সুবিধা যুক্ত করার জন্য বিভিন্ন ধরনের স্ক্রিপ্টিং ল্যাঙ্গুয়েজ ব্যবহার করা হয়, যেমন জাভাস্ক্রিপ্ট, জে কোয়েরী ইত্যাদি। এর মাধ্যমে ওয়েব পেজে লোকাল টাইম প্রদর্শন, সময় দিন তারিখ প্রদর্শন, ব্রাউজার চিহ্নিত করা, সময় এবং ইভেন্ট এর উপর ভিত্তি করে ব্যবহারকারীকে কোন বিশেষ বার্তা প্রদর্শন করা সহ বিভিন্ন ধরণের আকর্ষণীয় এবং গুরুত্বপূর্ণ কাজ করা সম্ভব হয়।

জাভাস্ক্রিপ্ট, জে কোয়েরী ইত্যাদি স্ক্রিপ্ট যুক্ত করার জন্য HTML এ <script> </script> ট্যাগ ব্যবহার করা হয়। যেমন
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="sliding_effect.js"></script>

উদাহরণ প্রোগ্রাম

<html>
<head>
<title> www.tutohost.com</title>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozila Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

23.মেটা ট্যাগ...

Posted by Monir Hossain On 4:22:00 pm | No comments

একটি ওয়েব সাইট তখনই জনপ্রিয় হয় যখন তা মানুষের প্রয়োজনে আসে এবং যে কেউ প্রয়োজনের সময় সহজেই সার্চ ইন্জিনের মাধ্যমে সার্চ করে সাইটটিকে খুজেঁ পায়। একটি ওয়েব পেজ যেন সহজেই সার্চ ইন্জিন খুজে পায় এ জন্য ওয়েব প্রোগ্রামারদের যে কাজটি করতে হয়, তাকে বলা হয় সার্চ ইন্জিন অপটিমাইজেশন। যে কোন ওয়েব সাইটের জন্যই সার্চ ইন্জিন অপটিমাইজেশন একটি গুরুত্বপূর্ণ বিষয়। ওয়েব পেজে মেটা ট্যাগ ব্যবহার করে এ গুরুত্বপূর্ণ কাজটি করা হয়।

http://www.tutohost.com/bangla/html/2.php পেজটির মেটা ট্যাগে লেখা আছে….

<meta name="description" content="এইচটিএমএল এ প্রোগ্রাম লেখার সাধারন পদ্ধতি এবং প্রাথমিক একটি প্রোজেক্ট ও সাধারন ট্যাগগুলো নিয়ে আলোচনা করা হবে।" />

<meta name="keywords" content="এইচটিএমএল প্রোগ্রাম লেখা, html bangla tutorial" />

Google আমাদের সকলের পরিচিত জনপ্রিয় একটি সার্চ ইন্জিন। যদি http://www.tutohost.com/bangla/html/2.php টি Google সার্চ ইন্জিন ব্যবহার করে সার্চ করা হয় তাহলে নিচের ছবির মত আসবে।

প্রথমে পেজের টাইটেল, তারপর লিংক এবং এর পর আছে "এইচটিএমএল এ প্রোগ্রাম লেখার সাধারন পদ্ধতি এবং প্রাথমিক একটি প্রোজেক্ট ও সাধারন ট্যাগগুলো নিয়ে আলোচনা করা হবে।"

যা <meta name="description" content="……………………………………." /> এর মধ্যে লেখা আছে।

<meta name="keywords" content="……………………………………." /> এর মধ্যে লেখা আছে "এইচটিএমএল প্রোগ্রাম লেখা, html bangla tutorial" একে কি ওয়ার্ড বলা হয়।
আমরা যখন কোন বাক্য লিখে সার্চ ইন্জিনে সার্চ করি তখন সার্চ ইন্জিন বাক্যটিকে ভেঙ্গে একাধিক কি ওয়ার্ড এ বিভক্ত করে সার্চ করে। তাই কি ওয়ার্ড হচ্ছে সার্চ ইন্জিনে কোন ওয়েব পেজ খুজে পাওয়ার অন্যতম পদ্ধতি। এজন্য HTML এর মাধ্যমে কোন পেজ তৈরির সময়
<meta name="keywords" content="……………………………………." /> এর মধ্যে
সম্ভাব্য কি ওয়ার্ড গুলো যুক্ত করে দেয়া হয়।

<meta name="author" content="অসীম কুমার" />
লেখকের নামকে সার্চ ইন্জিনে সাবমিট করার জন্য <meta name="author" content="……………"/> ব্যবহার করা হয়।

ওয়েব পেজ অটো রিফ্রেস করার জন্যও মেটা ট্যাগ ব্যবহার করা হয়।
<META HTTP-EQUIV="REFRESH" CONTENT="15;URL=http://www.tutohost.com">
উপরের কোডটি ব্যবহার করলে প্রতি ১৫ সেকেন্ড অন্তর অন্তর http://www.tutohost.com পেজটি একবার করে রিফ্রেস হবে।

22.*হেড ইলিমেন্ট .........BY: অসীম কুমার **

Posted by Monir Hossain On 4:20:00 pm | No comments

হেড ট্যাগ বা <head> এবং হেড ইলিমেন্ট যেকোন HTML পেজের একটি গুরুত্বপূর্ণ অংশ। কারণ <head>….</head> এর মধ্যে অর্থাৎ হেড ইলিমেন্ট হিসেবে <title> <link> <meta> <style> <script> এ সকল গুরুত্বপূর্ণ ট্যাগ সমূহ রাখা হয়। এগুলোর মাধ্যমে ব্রাউজারে পেজ সম্পর্কিত বেশ কিছু তথ্য প্রদর্শন করার পাশাপাশি সার্চ ইন্জিন অপটিমাইজেশন এর মত গুরুত্বপূর্ণ কাজও সম্পন্ন হয়।

টাইটেল

ব্রাউজারের টাইটেল বারে পেজের টাইটেল প্রদর্শনের জন্য <title> </title> ট্যাগ ব্যবহার করা হয়।
<title>আমাদের HTML টিউটোরিয়াল সমূহ</title>
উপরের কোড এর মাধ্যমে ব্রাউজারের টাইটেল বারে “আমাদের HTML টিউটোরিয়াল সমূহ” লেখাটি দেখা যাবে।

লিংক

CSS স্টাইল সিট এর সাথে লিংক করার জন্য <link> </link> ব্যবহার করা হয়।
<link rel="stylesheet" type="text/css" href="styles.css" />

মেটা ইলিমেন্ট

মেটা সার্চ ইন্জিন অপটিমাইজেশনের জন্য গুরুত্বপূর্ণ কাজ করে থাকে। বিষয়টি পববর্তী লেখায় বিস্তারিত আলোচনা করা হবে।

স্টাইল

ইনটার্নাল স্টাইল সিট ব্যবহারের জন্য <style></style> ট্যাগ ব্যবহার করা হয়। যেমন

<head>
<style type="text/css">
body {background-color: red;}
p { margin-left: 20px;
font-weight: bold;
color: #006; }
</style>
</head>

স্ক্রিপ্ট

জাভাস্ক্রিপ্ট, জে কোয়েরী ইত্যাদি স্ক্রিপ্ট যুক্ত করার জন্য <script> </script> ট্যাগ ব্যবহার করা হয়। যেমন

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="sliding_effect.js"></script>

উদাহরণ প্রোগ্রাম

নিচের লিংক থেকে সোর্স ফাইল ডাউনলোড করে Extract করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।এবং ব্রাউজারের টাইটেল বারে “আমাদের HTML টিউটোরিয়াল সমূহ” লেখাটি দেখা যাবে।

সোর্স ফাইল ডাউনলোড

21.HTML এ সিএসএস এর ব্যবহার..

Posted by Monir Hossain On 4:02:00 pm | No comments

বর্তমান সময়ে ওয়েব পেজের কাঠামো তৈরি করা হয় HTML দিয়ে, ডিজাইন তৈরি করা হয় CSS দিয়ে, আর টেক্সট জমা রাখা হয় ডাটাবেজে। তাই কোন পেজকে আকর্ষণীয় করে তোলার পাশাপাশি ব্যবহার বান্ধব করে তোলার জন্য CSS এর ভূমিকা খুবই গুরুত্বপূর্ণ। HTML দ্বারা তৈরি পেজে তিন পদ্ধতিতে CSS যুক্ত করা যায়।

১. এক্সটার্নাল স্টাইল সিট (External Style Sheet )
২. ইনটার্নাল স্টাইল সিট (Internal Style Sheet)
৩. ইনলাইন স্টাইল সিট (Inline Style Sheet)

এক্সটার্নাল স্টাইল সিট

এ পদ্ধতিতে HTML ফাইল এবং CSS স্টাইল সিট দুটি আলাদা সিটে রাখা হয়। এবং নিম্নোক্ত পদ্ধতিতে HTML এর <head></head>ট্যাগের মধ্যে লিংক তৈরি করে দেয়া হয়।

<head>
<link rel="stylesheet" type="text/css" href="http://tutohost.com/bangla/style.css">
</head>

ইনটার্নাল স্টাইল সিট

এ পদ্ধতিতে HTML এবং CSS স্টাইল একই সিটে <head></head> ট্যাগের মধ্যে রাখা হয়। এজন্য নিম্নোক্ত পদ্ধতিতে <style></style> ট্যাগ ব্যবহার করা হয়।

<head>
<style type="text/css">
body {background-color: red;}
p { margin-left: 20px;
font-weight: bold;
color: #006; }
</style>
</head>

ইনলাইন স্টাইল সিট

এ পদ্ধতিতে HTML এর প্রতিটি ট্যাগের মধ্যেই CSS স্টাইল যুক্ত করা হয় । এজন্য নিম্নোক্ত পদ্ধতিতে style এট্রিবিউটস ব্যবহার করা হয়।

<p style="margin-left:120px; font-weight: bold; color: #060;">

উদাহরণ প্রোগ্রাম

<html>
<head>
<title> www.tutohost.com</title>

<link rel="stylesheet" type="text/css" href="http://tutohost.com/bangla/style.css">
<style>
body{background:green; font-family:Verdana; font-size:15px;}
h3{font-size:25px; font-family:Tahoma; color:red;}
</style>
</head>

<body >

This is a paragraph.
<br />
<h3>
Bangladesh is a beautiful country.
</h3>
<p style="color: #600">
This is a paragraph. This is a paragraph.<br />
This is a paragraph. This is a paragraph.<br />
This is a paragraph. This is a paragraph.<br />
This is a paragraph. This is a paragraph.<br />
This is a paragraph. This is a paragraph.<br />
</p>

</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে ছবির মত দেখাবে।

20.লে আউট পদ্ধতি ..

Posted by Monir Hossain On 4:00:00 pm | No comments

একটা ওয়েব পেজ কতটা সুন্দর হবে তা সম্পূর্ণরূপে নির্ভর করে পেজের লে আউটের উপর। আগে শুধুমাত্র HTML ব্যবহার করেই সকল ওয়েব সাইটের লে আউট তৈরি করা হত। বর্তমানে HTML এর সাথে CSS ব্যবহার করা হয়। শুধুমাত্র HTML ব্যবহার করে লে আউট তৈরি করার জন্য <table> এর সারি ও কলাম ব্যবহার করা হয়।

উদাহরণ প্রোগ্রাম

<html>
<head>
<title> www.tutohost.com</title>
</head>

<table width="400" border="0">
<tr>
<td colspan="3" style="background-color: #93C;">
<h1> Web Page header</h1>
</td>
</tr>

<tr valign="top">
<td style="background-color: #C99;width:100px;text-align:top;">
<p><b>Side bar</b><br />
<a href="#">PHP</a>
<br />
<a href="#">HTML</a>
<br />
<a href="#">CSS</a>
<a href="#">Wordpress</a>
</p></td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;"><h2 style="color:#900">This is heading.</h2>
<p style="color: #006">This is a paragraph.This is a paragraph. This is a paragraph.<br />
This is a paragraph.This is a paragraph. This is a paragraph.<br />
This is a paragraph.This is a paragraph.This is a paragraph.<br />
This is a paragraph.This is a paragraph.This is a paragraph.</p></td>
</tr>

<tr>
<td colspan="2" style="background-color:#999;text-align:center;">
Copyright © 2012tutohost.com</td>
</tr>
</table>

</body>
</html>

19.রং ও কোড..

Posted by Monir Hossain On 3:58:00 pm | No comments

ওয়েব পেজে রং এর ব্যবহার খুবই গুরুত্বপূর্ণ। একটা ওয়েব পেজ গঠিত হয় এক বা একাধিক প্যারাগ্রাফ, শিরোনাম, টেবিল, ব্যাগ্রাউন্ড, বর্ডার ইত্যাদির সমন্বয়ে। এ সকল উপাদানের প্রত্যেকটিতেই কোন না কোন রং ব্যবহার করতে হয়। কোন একটি পেজের ব্যাগ্রাউন্ড কালার নির্দিষ্ট করার জন্য <body> ট্যাগের মধ্যে body লেখার পর একটা স্পেস দিয়ে bgcolor=" " লেখতে হবে এর পর " " এর মধ্যে BLACK, SILVER, GRAY, WHITE, MAROON, RED, PURPLE, FUSCHSIA, GREEN, LIME, OLIVE, YELLOW, NAVY, BLUE, TEAL এবং AQUA এই ষোলটি রং এর যে কোন একটি লেখা হলে পেজের ব্যাগ্রাউন্ডে সেই দেখা যাবে। যেহেতু case sensitive নয় তাই ছোট হাতের অক্ষরে লেখলেও কোন সমস্যা নেই, যেমন লেখা হয়েছে, <body bgcolor="green"> ।
এছাড়া hexadecimal code ব্যবহার করেও ব্যাগ্রাউন্ড কালার নির্বাচন করা যায়। যেমন উপরের কোডটি নিচের মত লেখা যায় <body bgcolor="#00FF00"> ।
color piker থেকে সহজেই বিভিন্ন কালারের জন্য hexadecimal code সংগ্রহ করা যায়। এছাড়া নিচের চার্ট থেকেও কাজটি করা যাবে। hexadecimal code এর শুরুতে একটা # চিহ্ন দিয়ে শুরু করতে হয়।

ব্যাগ্রাউন্ড কালার দেওয়ার আরও একটা মজার পদ্ধতি আছে। লাল, সবুজ আর নীল এই তিনটি রং হচ্ছে মৌলিক রং, আর অন্য সব রং এই তিনটি রং এর সংমিশ্রনে তৈরি। যদি coding করে এই তিনটি রংকে মিশিয়ে নতুন রং তৈরি করা হয়, তাহলে মন্দ হয় না। এ কাজটি সুসম্পন্ন করতে সবুজ ব্যাগ্রাউন্ডের জন্য নিচের মত করে লেখা যেতে পারে
<body bgcolor="rgb(0,255,0)"> ।
এখানে rgb অর্থ হল red green blue আর (0,255,0) এর অর্থ হল রংটিতে যথাক্রমে লাল, সবুজ, নীল রং এর পরিমান যথাক্রমে 0%, 100%, 0% কারন এখানে বিশুদ্ধ সবুজ রং নেয়া হয়েছে। আর যে কোন রং এর মান 0-255 পর্যন্ত হতে পারে। যেহেতু g বা green এর মান 255 তাই তা 100%। তিনটি রং এর মান 0-255 এর মধ্যে পরিবর্তন করে ইচ্ছা অনুযায়ী নতুন নতুন রং তৈরি করা যাবে ।

উদাহরণ প্রোগ্রাম

<html>
<head>
<title> www.tutohost.com</title>
</head>

<body bgcolor="green">
<h2 style=" color:#ff0000" >
This is the body of your web site.
</h2>
<p style="color:#093">
This is a paragraph.<br />
This is a paragraph. <br />
This is a paragraph.<br />
This is a paragraph.<br />
</p>

</body>
</html>

18.আই ফ্রেম এর ব্যবহার..

Posted by Monir Hossain On 3:55:00 pm | No comments

একটা ওয়েব পেজের মধ্যেই অপর এক বা একাধিক ওয়েব পেজ প্রদর্শন করার অন্যতম উপায় হচ্ছে আই ফ্রেম। কোন বিষয় বিস্তারিতভাবে উপস্থাপনার ক্ষেত্রে প্রাসঙ্গিক বিষয়ের উপর বিভিন্ন ওয়েব পেজের লিংক প্রকাশ করা গুরুত্বপূর্ণ, পাশাপাশি উক্ত পেজটিকে সংক্ষিপ্ত স্থানের মধ্যে স্ক্রলিং করে প্রদর্শন করতে পারলে মন্দ হয় না।

উদাহরণ প্রোগ্রাম

<html>
<head>
<title> www.tutohost.com</title>
</head>
<body bgcolor=" #f00">
<center>
<h2 style="color:#f00">This is an example of iframe.</h2><br />
<iframe src="http://www.tutohost.com/bangla/html/" width="350" height="170">
<p>This rowser does not support iframes.</p>
</iframe>
</center>
</body>
</html>

প্রোগ্রাম আলোচনা

আই ফ্রেম তৈরির জন্য <iframe></iframe> ট্যাগ ব্যবহার করা হয়।
width="350" height="170" এই দুটি এট্রিবিউটের মাধ্যমে আই ফ্রেম এর আকৃতি কেমন হবে তার নির্দেশ প্রদান করা হয়।
যদি কোন ব্রাউজার আই ফ্রেম সাপোর্ট না করে তাহলে <p>This rowser does not support iframes.</p> এর জন্য This rowser does not support iframes. লেখাটি প্রদর্শিত হবে।

17.HTML ফ্রেম এর ব্যবহার..

Posted by Monir Hossain On 3:53:00 pm | No comments

HTML এর মাধ্যমে কোন ওয়েব পেজকে একাধিক ভাগে বিভক্ত করার জন্য আগের দিনে ফ্রেম ব্যবহার করা হত। দিনে দিনে ফ্রেমের ব্যবহার কমে এসেছে। বর্তমান সময়ে ফ্রেমের ব্যবহার নেই বললেই চলে, কারণ ফ্রেম ব্যবহার করে তৈরিকৃত সম্পূর্ণ পেজ একসাথে প্রিন্ট করা বেশ কষ্টকর। এছাড়া এটা অনেকের কাছেই অপছন্দের। এর পরিবর্তে কোন পেজকে একাধিক অংশে বিভক্ত করতে এখন CSS ব্যবহার করা হয়। তবে html সম্পর্কে জ্ঞান ভান্ডার সমৃদ্ধ করার জন্য ফ্রেম সম্পর্কেও কিছুটা ধারণা থাকা দরকার।

উদাহরণ প্রোগ্রাম

<html>
<head>
<title> www.tutohost.com</title>
</head>
<body bgcolor=" #000">
<frameset rows="12%,88%">
<frame src="style.html" scrolling="no">
<frameset cols="27%,74%">
<frame src="link.html">
<frame src="textfor.html" >
</frameset>
</frameset>
</body>
</html>

যে কোন নামে একটা ফোল্ডার তৈরি করে তার মথ্যে style.html, link.html এবং textfor.html তিনটি html ফাইল রাখতে হবে এরপর একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

প্রোগ্রাম আলোচনা

<frameset rows="12%,88%"> এর মাধ্যমে প্রথমে সম্পূর্ণ পেজটারে সারি বরাবর দুটি অংশে বিভক্ত করা হয়েছে।
<frameset cols="27%,74%"> এর মাধ্যমে নিচের সারিকে কলাম বরাবর দুটি অংশে বিভক্ত করা হয়েছে।
<frame src="style.html" scrolling="no"> এর মাধ্যমে প্রথম ফ্রেমের মধ্যে style.html পেজটিকে প্রদর্শনের ব্যবস্থা করা হয়েছে।
<frame src="link.html"> এবং <frame src="textfor.html" > এর মাধ্যমে যথাক্রমে ২য় সারির ১ম ও ২য় ফ্রেমের মধ্যে link.html এবং textfor.html পেজ দুটিকে প্রদর্শনের ব্যবস্থা করা হয়েছে।

16.HTML ফর্ম ..

Posted by Monir Hossain On 3:50:00 pm | No comments

এইচটিএমএল ফর্ম একটি গুরুত্বপূর্ণ আলোচ্য বিষয়। বিশেষ করে ডাইনামিক এবং ডাটাবেজ নির্ভর ওয়েব সাইটের লগ ইন সিস্টেম, ভোটিং সিস্টেম, কন্টাক্ট ফর্ম সহ ইউজার ইনফরমেশন সংগ্রহ করার জন্য এইচটিএমএল ফর্ম ব্যবহৃত হয়ে থাকে। একটি এইচটিএমএল ফর্ম বেশ কিছু উপাদানের সমন্বয়ে গঠিত হয়। এগুলো হচ্ছে ,

১. টেক্সট বক্স
২. টেক্সট এরিয়া
৩. রেডিও বাটন
৪. সাবমিট বাটন
৫. চেক বক্স
৬. ড্রপডাউন লিস্ট

উদাহরণ প্রোগ্রাম

<html>
<head>
<title> www.tutohost.com</title>
</head>
<body bgcolor=" #000">
<center>
<font face="SolaimanLipi" color="#fe0321" size="6">
আপনার তথ্য দিয়ে সাহায্য করুন।
</font>
< /br>
< /br>
<form name="information" method="post" action="information.php">
<font face="SolaimanLipi" color="#fe0321" size="4">
নাম:           
</font>
<input type="text" value="আপনার নাম লিখুন" name="name"><br /><br />
<font face="SolaimanLipi" color="#fe0321" size="4">
পিতার নাম:
</font>    
<input type="text" value="আপনার পিতার নাম লিখুন" name="name">
<br /><br />
<font face ="SolaimanLipi" color="#fe0321" size="4">
ঠিকানা:
</font>            
<textarea rows="3" cols="20"></textarea>
<br />
<font face="SolaimanLipi" color="#fe0321" size="4">
আপনি কি পুরুষ:
</font>
<input type="radio" value="male" name="gender">
<br />
<font face="SolaimanLipi" color="#fe0321" size="4">
আপনি কি মহিলা:
</font>
<input type="radio" value="female" name="gender">
<br />
<font face="SolaimanLipi" color="#fe0321" size="4">
আপনি যে শহরে থাকেন:
</font>
<select name="district">
<option> কুস্টিয়া </option>
<option> ঢাকা</option>
<option>খুলনা</option>
<option>সিলেট</option>
<option>ভেড়ামারা</option>
<option>যশোর</option>
</select>
<br />
<br />
<font face="SolaimanLipi" color="#fe0321" size="4">
শিক্ষাগত যোগ্যতা:
</font>
<br />
<input type="checkbox" value="checkbox1" name="checkbox">
<font face="SolaimanLipi" color="#fe0321" size="4">
এস.এস.সি
</font>
<br />
<input type="checkbox" value="checkbox" name="checkbox">
<font face="SolaimanLipi" color="#fe0321" size="4">
এইস.এস.সি
</font>
<br />
<br />
<input type="submit" name="submit" value="জমা করুন">
<br />
<br />
<input type="reset" value="মুছে ফেলুন" name="clear">
</form>
</center>
</body>
</html>

15.* HTML লিস্টের ব্যবহার ..*

Posted by Monir Hossain On 3:48:00 pm | No comments

একটা ওয়েব পেজকে সুন্দর করে সাজানো এবং তথ্য উপস্থাপনার অন্যতম পদ্ধতি লিষ্ট । HTML এর মাধ্যমে দুই ধরণের লিষ্ট তৈরি করা যায়, একটি হচ্ছে অর্ডার লিষ্ট এবং অপরটি হচ্ছে আনঅর্ডার লিষ্ট । অর্ডার লিষ্টে বিভিন্ন তথ্যকে পর্যায়ক্রমিকভাবে সাজিয়ে উপস্থাপন করা হয় এবং প্রতিটা লাইনের শুরুতে ক্রমিক সংখ্যা থাকে। অন্যদিকে আন অর্ডার লিষ্টে প্রতিটা লাইনের সামনে ছোট বৃত্তাকার বা বর্গাকার চিহ্ন থাকে। HTML এর মাধ্যমে আন অর্ডার লিষ্ট তৈরি করার জন্য <ul></ul> এবং অর্ডার লিষ্ট তৈরি করার জন্য <ol></ol> ট্যাগ ব্যবহার করা হয়।

উদাহরণ প্রোগ্রাম

<html>
<head>
<title> www.tutohost.com</title>
</head>
<body bgcolor=" #00CC99" style="text-align:center">

<h4>Disc Type list</h4>
<ul type="disc">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<h4>Circle Type list</h4>
<ul type="circle">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul><h4>Square Type list</h4>
<ul type="square">
<li>Pragaph</li>
<li>Table</li>
<li>List</li>
</ul>
</body>
</html>

উদাহরণ প্রোগ্রাম

<html>
<head>
<title> www.tutohost.com</title>
</head>
<body bgcolor=" #00CC99" style="text-align:center">

<h3>Alphabet Type list</h3>
<ol type="A">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ol>
<h3>Number Type list</h3>
<ol type="1">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ol>
<h3>Roman Number Type list</h3>
<ol type="I">
<li>Pragaph</li>
<li>Table</li>
<li>List</li>
</ol>

</body>
</html>

14.টেবিল ও টেবিল প্রকাশ পদ্ধতি...

Posted by Monir Hossain On 3:45:00 pm | No comments

দিনে দিনে ইন্টারনেট আজ সবচেয়ে বড় তথ্য ভান্ডারে পরিণত হয়েছে। তথ্য উপাত্ত পরিসংখ্যান চিত্র ভিডিও ইত্যাদির সংমিশ্রণে একটা ওয়েবপেজে কোন বিষয়বস্তুকে যতটা আকর্ষণীয় এবং পরিপূর্ণভাবে উপস্থাপন করা যায়, অন্যান্য মিডিয়ায় তা সম্ভব হয় না। ওয়েব পেজে তথ্য উপাত্ত পরিসংখ্যান উপস্থাপন করার একটি অন্যতম পন্থা হচ্ছে টেবিল ব্যবহার করা। টেবিল তৈরির জন্য টেবিল ট্যাগ <table> ব্যবহার করা হয়।

উদাহরণ প্রোগ্রাম

<html>
<head>
<title> www.tutohost.com</title>
</head>
<body bgcolor=" #00CC99" style="text-align:center">
<table border="1">
<tr>
<th>SL</th>
<th>Book</th>
<th>Pen</th>
<th>Box</th>
</tr>
<tr>
<td>01</td>
<td>100</td>
<td>200</td>
<td>400</td>
</tr> <tr>
<td>02</td>
<td>300</td>
<td>600</td>
<td>300</td>
</tr> <tr>
<td>03</td>
<td>500</td>
<td>800</td>
<td>200</td>
</tr>
</table>
</body>
</html>

প্রোগ্রাম আলোচনা

<table border="1"> এখানে border="1" এর মাধ্যমে টেবিলের জন্য সিঙ্গেল বর্ডার ব্যবহার করা হয়েছে , প্রয়োজন অনুসারে 1 এর স্থানে 2,3,4 ইত্যাদি ব্যবহার করা যাবে।
টেবিলের প্রতিটা সারি তৈরির জন্য <tr></tr> ব্যবহার করা হয়, এবং প্রতিটা সেল তৈরির জন্য <td></td>ব্যবহার করা হয়।
<th></th> এর মাধ্যমে টেবিল হেডার তৈরি করা হয়েছে।<th>Book</th> এর মধ্যের Book লেখাটি একটু মোটা দেখাবে।
টেবিলের মধ্যে কোন সেল খালি রাখার জন্য <td></td> এর মাঝে কিছু না লেখলেই হবে। শুধুমাত্র <td></td> ব্যবহার করতে হবে।
সাইটের নেভিগেশন বার তৈরির জন্য টেবিল ব্যবহার করা যেতে পারে, এক্ষেত্রে প্রতিটা সেলের লেখার সাথে লিংক তৈরি করে দিলেই হবে যেমন <td><a href="www.tutohost.com"> Tutohost</a></td> অথবা <th><a href="www.tutohost.com"> Tutohost</a></th>

13.ছবি সংযোজন পদ্ধতি..

Posted by Monir Hossain On 3:42:00 pm | No comments

একটা ওয়েব পেজের গুরুত্বপূর্ণ উপাদান সমূহের একটি হচ্ছে ইমেজ । ওয়েবপেজে ইমেজের উপযুক্ত ব্যবহারের মাধ্যমে পেজটি ব্যবহারকারীদের কাছে যেমন আকর্ষণীয় হয়ে ওঠে তেমনি ব্যবহার বান্ধবও হয়। আকর্ষনীয় নেভিগেশন বার, বাটন, ব্যানার, ইত্যাদিতে ইমেজের ব্যবহার অপরিহার্য। ওয়েব পেজে ইমেজ বা ছবি যুক্ত করার জন্য প্রয়োজনীয় ট্যাগটি হচ্ছে <img> । এর কোন শেষ ট্যাগ নেই। শুধুমাত্র <img> দিয়ে কোন কাজ হয় না, এর সাথে সবসময়ই src এট্রিবিউটটি ব্যবহার করতে হয়। যেমন <img src=”pic.png”> , তাহলে pic.png ইমেজটি প্রদর্শিত হবে।

পূর্ব প্রস্তুতি

ডেক্সটপে একটা webpage নামে folder নিতে হবে এর মধ্যে pic.png নামে save করা একটা ছবি রাখতে হবে।

উদাহরণ প্রোগ্রাম

<html>
<head>
<title> www.tutohost.com</title>
</head>
<body bgcolor=" green" style="text-align:center">

<h3> This is an example of image.</h3>
<img src="pic.png">
</body>
</html>

একটা Notepad Open করে উপরের Code টুকু লিখে File মেনু থেকে Save as এ ক্লিক করে File name হিসেবে index.html বা home.html অথবা যেকোন নাম.html দিয়ে, Save as type হিসেবে All files সিলেক্ট করে এরপর Save বাটনে ক্লিক করতে হবে। এরপর save করা index.html ফাইলটিকে webpage folder এর মধ্যে রাখতে হবে। এখন Mozilla Firefox দিয়ে index.html open করলে পাশের ছবির মত দেখাবে।

অনলাইনে সার্ভারে কোন ইমেজ আপলোড করা থাকলে উক্ত ইমেজ যুক্ত করার জন্য তার এড্রেস pic.png এর স্থানে লেখতে হবে। যেমন

<img src="http://www.tutohost.com/bangla/html/images/pic.png">

12.লিংক প্রকাশের পদ্ধতি..

Posted by Monir Hossain On 3:40:00 pm | No comments

একটা ওয়েব সাইটকে ব্যবহার বান্ধব করে তোলার ক্ষেত্রে লিংকের ব্যবহার খুবই গুরুত্বপূর্ণ। Link এর আভিধানিক অর্থ সংযুক্ত করা। অর্থাৎ একটা ওয়েব পেজের সাথে অন্য একটা পেজকে যুক্ত করাই হল লিংকিং। HTML এ লিংকিং করার জন্য <a> ট্যাগ বা anchor ট্যাগ ব্যবহার করা হয়। যেমন <a href="http://www. tutohost.com/"> www. tutohost.com </a> । অর্থাৎ যে পেজের সাথে লিংক তৈরি করতে হবে তার এড্রেস href="…………….. " এর মধ্যে লেখতে হবে, এবং লিংকে যে লেখাটি প্রদর্শন করবে তা <a href=" ">…………………..</a> এর মধ্যে লেখতে হবে।

উদাহরণ প্রোগ্রাম

<html>
<head>
<title> www.tutohost.com</title>
</head>
<body bgcolor=" green">
<a href="http://www. tutohost.com/"> www. tutohost.com </a> <br />
<a href="mailto:admin@tutohost.com"> admin@tutohost.com</a>
</body>
</html>

11.স্টাইলের ব্যবহার..

Posted by Monir Hossain On 10:05:00 pm | No comments

Style, HTML এর একটি নতুন এট্রিবিউটস, এর মাধ্যমে HTML এর মধ্যেই CSS ব্যবহারের সুযোগ সৃষ্টি হয়। Style তথা CSS ব্যবহারের মাধ্যমে ওয়েব পেজের বিভিন্ন উপাদানের ডিজাইন তৈরি করা হয়। অন্যান্য এট্রিবিউটস যেমন align="center", align="left", bgcolor="green", height="100px", width="50px, bgcolor="green" ইত্যাদির মাধ্যমে যদিও ডিজাইন তৈরি করা যায়, তবে এক্ষেত্রে Style ব্যবহারে বিশেষ সুবিধা পাওয়া যায়।

উদাহরণ প্রোগ্রাম: অন্যান্য এট্রিবিউটস্ ব্যবহার করে

<html>
<head>
<title> www.tutohost.com</title>
</head>
<body bgcolor=" green">
<font size="2" face="Verdana">
This is a paragraph.
</font>
<br />
<font size="5" face="Tahoma" color="red" >
Bangladesh is a beautiful country.
</font>
</body>
</html>

উদাহরণ প্রোগ্রাম: স্টাইল ব্যবহার করে

<html>
<head>
<title> www.tutohost.com</title>
</head>
<body bgcolor=" green">
<font style="font-family:Verdana; font-size:15px" >
This is a paragraph.
</font>
<br />
<font style=" font-size:25px; font-family:Tahoma; color:red;" >
Bangladesh is a beautiful country.
</font>
</body>
</html>

10.ফন্ট ট্যাগ এর ব্যবহার..

Posted by Monir Hossain On 10:03:00 pm | No comments

HTML এর মাধ্যমে কোন ডকুমেন্টকে সুন্দরভাবে উপস্থাপন করার জন্য <font> বা ফন্ট ট্যাগ খুবই গুরুত্বপূর্ণ ভূমিকা পালন করে।<font size="5" face="Tahoma" color="red"> Bangladesh is a beautiful country.</font> এখানে size="5" অংশটি হল font ট্যাগের একটি এট্রিবিউট, যা প্রকাশ করছে ইলিমেন্ট অর্থাৎ Bangladesh is a beautiful country. লেখাটির সাইজ কেমন হবে। এছাড়া face="Tahoma" প্রকাশ করছে লেখাটির font হবে Tahoma এবং color="red" দ্বারা প্রকাশ করছে লেখাটির রং হবে লাল।

উদাহরণ প্রোগ্রাম

9.টেক্সট ফরমেটিং...

Posted by Monir Hossain On 10:01:00 pm | No comments

Microsoft Word এ Bold, Italic, Underline, strikethrough, Subscript, Superscript ইত্যাদি টেক্সট ফরমেটিং এর জন্য ব্যবহৃত হয়। HTML এর ক্ষেত্রেও Microsoft Word এর মত টেক্সট ফরমেটিং এর বিশেষ গুরুত্ব রয়েছে। একটি ডকুমেন্টকে সুন্দরভাবে উপস্থাপন করতে টেক্সট ফরমেটিং বিষয়ে উপযুক্ত জ্ঞান থাকা দরকার। HTML এ টেক্সট ফরমেটিং এর জন্য <b>, <i>, <u>, <strike>, <sub>, <sup>, <big>, <small>, <strong>, <samp>, <tt>, <abbr>, <var>, <code>, <address> ইত্যাদি ট্যাগ সমূহ ব্যবহার করা হয়।

উদাহরণ প্রোগ্রাম

<html>
<head>
<title>www.tutohost.com</title>
</head>
<body bgcolor="green">

<p>
<b> (Bold)</b> This is an example of bold. <br />
<i>(Italic)</i> This is an example of Italic. <br />
<u> (Underline) </u> This is an example of Underline. <br />
<strike>(Strike) </strike> This is an example of Strike. <br />
(CO<sub>2</sub>) This is an example of Subscript. <br />
(E=MC<sup>2</sup>) This is an example of Superscript. <br />
<big>(Big text)</big>This is an example of Big. <br />
<small>(Small text)</small>This is an example of Small. <br />
<strong>(Strong text)</strong>This is an example of Strong. <br />
<samp>(Sample text) </samp>This is an example of Sample. <br />
<tt>(Teletype)</tt>This is an example of Teletype. <br />
(<abbr> U.N.O</abbr> United Nations Organization.) This is an example of Abbreviation. <br />
(<var>x</var> is a variable.)This is an example of Variable <br />
(<code>Computer code text.</code>) This is an example of Code.<br /> <address>
(Written by Ashim<br />
Address: www.tutohost.com<br />
E-mail:ashimkumar50@yahoo.com)</address>This is an example of Address <br />
</p>

</body>
</html>

8.HTML প্যারাগ্রাফ...

Posted by Monir Hossain On 9:59:00 pm | No comments

যে কোন ডকুমেন্ট এক বা একাধিক প্যারাগ্রাফের মাধ্যমে লেখা হয়। HTML এ প্যারাগ্রাফ তৈরির জন্য <p> বা প্যরাগ্রাফ ট্যাগ ব্যবহার করা হয়। যেমন <p>This is a paragraph.</p>। ব্রাউজারের মাধ্যমে প্রতিটা প্যারাগ্রাফ প্রদর্শন করা হলে প্রতিটা প্যারাগ্রাফের পর একটা করে লাইন ব্রেক তৈরি হয়। যদি কখনো প্যারাগ্রাফের মধ্যেই লাইন ব্রেকের প্রয়োজন হয় তাহলে লাইনের শেষে <br /> ট্যাগ ব্যবহার করা হয়।

উদাহরণ প্রোগ্রাম

<html>
<head>
<title> www.tutohost.com</title>
</head>
<body bgcolor=" green">
<p>This is a paragraph.</p>
<p>
This is a paragraph.
This is a paragraph.
This is a paragraph.
This is a paragraph.
</p>
<p>
This is a paragraph.<br />
This is a paragraph.<br />
This is a paragraph.<br />
This is a paragraph.<br />
</p>
</body>
</html>

পূর্ব প্রস্তুতি

অনুশীলন প্রজেক্ট

প্রজেক্ট বিশ্লেষণ

নির্দেশনা:

পূর্ব প্রস্তুতি

অনুশীলন প্রজেক্ট

প্রজেক্ট বিশ্লেষণ

নির্দেশনা:

পূর্ব প্রস্তুতি

অনুশীলন প্রজেক্ট

প্রজেক্ট বিশ্লেষণ

নির্দেশনা:

উদাহরণ প্রোগ্রাম

টাইটেল

লিংক

মেটা ইলিমেন্ট

স্টাইল

স্ক্রিপ্ট

উদাহরণ প্রোগ্রাম

এক্সটার্নাল স্টাইল সিট

ইনটার্নাল স্টাইল সিট

ইনলাইন স্টাইল সিট

উদাহরণ প্রোগ্রাম

উদাহরণ প্রোগ্রাম

উদাহরণ প্রোগ্রাম

উদাহরণ প্রোগ্রাম

প্রোগ্রাম আলোচনা

উদাহরণ প্রোগ্রাম

প্রোগ্রাম আলোচনা

উদাহরণ প্রোগ্রাম

উদাহরণ প্রোগ্রাম

উদাহরণ প্রোগ্রাম

উদাহরণ প্রোগ্রাম

প্রোগ্রাম আলোচনা

পূর্ব প্রস্তুতি

উদাহরণ প্রোগ্রাম

উদাহরণ প্রোগ্রাম

উদাহরণ প্রোগ্রাম: অন্যান্য এট্রিবিউটস্ ব্যবহার করে

উদাহরণ প্রোগ্রাম: স্টাইল ব্যবহার করে

উদাহরণ প্রোগ্রাম

উদাহরণ প্রোগ্রাম

উদাহরণ প্রোগ্রাম

SITE SEARCH

Select Language

Pages

Labels

Blog Archive

Blogroll

Blogger news

About