সময়ের দাবী: HTML

HTML

pdf ডাউনলোড করতে এখানে ক্লিল করুন

HTML একটা কম্পিউটার ল্যাঙ্গুয়েজ, যা পৃথিবীর বিশাল তথ্য-ভান্ডারকে ইন্টারনেটের মাধ্যমে প্রদর্শনের সুযোগ তৈরি করে দিয়েছে। একটা ওয়েব পেজের মূল গঠন তৈরি হয় HTML দিয়ে। HTML কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়, একে Hyper Text Mark Up Language বলা হয়। Mark Up Language এক সেট Mark Up ট্যাগের সমন্বয়ে গঠিত হয়। একটা ওয়েব পেজের বিভিন্ন অংশ ব্রাউজারের মাধ্যমে কিভাবে প্রদর্শিত হবে, তা HTML এ Mark Up ট্যাগ সমূহ ব্যবহার করে প্রকাশ করা হয় ।

HTML এর ইতিহাস

HTML বা Hyper Text Mark Up Language তৈরি করেছেন টিম বার্নাস-লী। HTML তৈরির উদ্দেশ্য ছিল বৈজ্ঞানিক গবেষণার তথ্য উপাত্ত দ্রুত পৃথিবীর বিভ্ন্নি স্থানে আদান প্রদানের ব্যবস্থা করা। ১৯৯০ সালের দিকে NCSA কর্তৃক ডেভলপকৃত মোজাইক ব্রাউজারের মাধ্যমে HTML পরিচিতি লাভ করে। ১৯৯৭ এর জানুয়ারীতে WC3 কর্তৃক প্রথম ডেভলপকৃত HTML3.2 প্রকাশিত হয়। একই বছরে শেষে ডিসেম্বরে WC3 HTML এর নতুন সংস্করণ HTML4.2 প্রকাশ করে। ২০১০ সালে বর্তমানে প্রচলিত HTML এর সর্বশেষ ভার্সন HTML5 জনসম্মূখে পরিচিতি লাভ করে।

প্রোগ্রাম লেখার পদ্ধতি

যে কোন প্রোগ্রাম লেখার জন্যই কোন একটা এডিটর ব্যবহার করে কোডিং করতে হয়। HTML এ প্রোগ্রাম লেখার জন্য প্রাথমিকভাবে এডিটর হিসেবে উইন্ডোজ অপারেটিং সিস্টেমের ডিফল্ট এডিটর notepad ব্যবহার করা যেতে পারে এবং বাড়তি সুবিধা পাবার জন্য এডভান্স এডিটর হিসেবে Dreamweaver এবং Notepad++ ব্যবহার করা ভাল। HTML এ লেখা প্রোগ্রাম .html এক্সটেনশন যেমন index.html দ্বারা Save করে যেকোন ব্রাউজার যেমন Internet explorer, Mozilla Firefox , Google chrome এবং Opera দ্বারা দেখা যাবে।

ট্যাগ সমুহ ও ব্যবহার

HTML এ প্রোগ্রাম লেখার জন্য <> এবং দুইটা চিহ্ন এবং এর মধ্যে কিছু Word যেমন html, head, title, body ইত্যাদি Keyword ব্যবহার করা হয়। <> বা চিহ্ন এবং এর মাঝে লেখা একটি Keyword কে একত্রে ট্যাগ বলা হয়। যেমন এবং । হল body শুরু ট্যাগ এবং হল body শেষ ট্যাগ।

HTML এর সাধারন ট্যাগ সমূহ

ট্যাগ সমূহ

বর্ণনা

HTML ডকুমেন্ট নির্দেশ করে।

প্রোগ্রামের head অংশ নির্দেশ করে ।

ডকুমেন্ট টাইটেল নির্দেশ করে।

প্রোগ্রামের মূল content অংশ নির্দেশ করে।

<a></a>

Anchor ট্যাগ।

Abbreviation ট্যাগ।

<b></b>

Bold টেক্সট নির্দেশ করে।

<i></i>

Italic টেক্সট নির্দেশ করে।

স্বাভাবিকের চেয়ে বড় টেক্সট নির্দেশ করে।

স্বাভাবিকের চেয়ে ছোট টেক্সট নির্দেশ করে।

বিশেষ উদ্ধৃতি প্রকাশ করতে ব্যবহৃত হয়।

<br / >

একটা লাইন ব্রেক তৈরি করে ।

কম্পিউটার কোড টেক্সট প্রকাশ করে।

টেবিল তৈরিতে ব্যবহৃত হয়।

টেবিলের কলাম তৈরিতে ব্যবহৃত হয়।

টেবিলের সেল তৈরিতে ব্যবহৃত হয়।

টেবিলের সারি তৈরিতে ব্যবহৃত হয়।

ফরম তৈরিতে ব্যবহৃত হয়।

হেডার ট্যাগ 1-6 পর্যন্ত হয়।

<hr/>

সমান্তরাল রেখা তৈরি করে।

<img/>

ছবি যুক্ত করতে ব্যবহৃত হয়।

ফরমের ইনপুট ফিল্ড তৈরিতে ব্যবহৃত হয়।

লিষ্ট তৈরিতে ব্যবহৃত হয়।

Meta ট্যাগ

অর্ডার লিষ্ট তৈরিতে ব্যবহৃত হয়।

আনঅর্ডার লিষ্ট তৈরিতে ব্যবহৃত হয়।

<p></p>

প্যারাগ্রাফ নির্দেশ করে

pre-formatted টেক্সট তৈরিতে ব্যবহৃত হয়।

টেলিটাইপ টেক্সট নির্দেশ করে।

Strong টেক্সট নির্দেশ করে।

subscripted text নির্দেশ করে।

superscripted text নির্দেশ করে।

HTML ইলিমেন্ট

HTML এ যেকোন শুরু ও শেষ ট্যাগ এবং মাঝের অংশকে ইলিমেন্ট বলা হয়। যেমন <h1> This is an example of element.</h1> । এখানে <h1> হেডার1 শুরু এবং </h1> হেডার1 শেষ ট্যাগের মাঝে This is an example of element. লেখা হয়েছে, তাই <h1> This is an example of element.</h1> একটি ইলিমেন্ট। কিছু কিছু ট্যাগের কোন ইলিমেন্ট থাকে না যেমন <br /> ,<img /> ইত্যাদি।

শরু ট্যাগ

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

শেষ ট্যাগ

<h1>

This is an element.

</h1>

<p>

This is paragraph.

</p>

<br />

<img />

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

HTML এট্রিবিউটস্

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

ট্যাগ

এট্রিবিউটস্

<font>

size="5" face="Tahoma" color="red"

align="center" align="left" align="right" title="Bangladesh"

<body>

bgcolor="green" background="../images/ele.png"

<div>

id="book" class="pen" align="center"

height="100px" width="50px" border="5px"

type="text" name="TextField"

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

<html>

<head>

<title> www.somoyerdabi.blogespot.com

</title>

</head>

This is a paragraph.

</font>

</body>

</html>

হেডিং ট্যাগ ও ব্যবহার

HTML এর মাধ্যমে কোন ডকুমেন্ট বা প্যারাগ্রাফের শিরোনাম লেখার জন্য হেডিং ট্যাগ ব্যবহার করা হয়। HTML এ মোট ছয় ধরণের হেডিং ট্যাগ রয়েছে এগুলো হল <h1> </h1> , <h2> </h2> , <h3> </h3> , <h4> </h4> , <h5> </h5> এবং <h6> </h6> । যদি বড় সাইজের অক্ষরে শিরোনাম লেখার প্রয়োজন হয় তাহলে <h1> </h1> ট্যাগের মাঝে লেখা হয়। এবং অন্যান্য গুলো ব্যবহার করলে লেখার সাইজ আস্তে আস্তে ছোট হবে।

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

<html>

<head>

<title> www.somoyerdabi.blogespot.com </title>

</head>

<h1>This is an example of heading 1</h1>

<h2>This is an example of heading 2</h2>

<h3>This is an example of heading 3</h3>

<h4>This is an example of heading 4</h4>

<h5>This is an example of heading 5</h5>

<h6>This is an example of heading 6</h6>

</body>

</html>

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

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

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

<html>

<head>

<title> www.google.com</title>

</head>

<p>This is a paragraph.</p>

<p>

This is a paragraph.

</p>

<p>

This is a paragraph.<br />

</p>

</body>

</html>

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

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.google.com</title>

</head>

<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 Anonymous<br />

Address: www.examplesite.com<br />

E-mail: anonymous@mail.com)</address>This is an example of Address <br />

</p>

</body>

</html>

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

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" দ্বারা প্রকাশ করছে লেখাটির রং হবে লাল।

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

<html>

<head>

<title> www.google.com</title>

</head>

This is a paragraph.

</font>

<br />

Bangladesh is a beautiful country.

</font>

</body>

</html>

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

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

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

<html>

<head>

<title> www.google.com</title>

</head>

This is a paragraph.

</font>

<br />

Bangladesh is a beautiful country.

</font>

</body>

</html>

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

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

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

<html>

<head>

<title> www.google.com</title>

</head>

<a href="http://www.google.com/"> www.google.com </a> <br />

<a href="mailto:admin@google.com"> admin@google.com</a>

</body>

</html>

ছবি প্রকাশ

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

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

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

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

<html>

<head>

<title> www.google.com</title>

</head>

<h3> This is an example of image.</h3>

</body>

</html>

টেবিল প্রকাশ

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

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

<html>

<head>

<title> www.google.com</title>

</head>

<tr>

</tr>

<tr>

</tr> <tr>

</tr> <tr>

</tr>

</table>

</body>

</html>

Output দেখুন

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

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

<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.google.com"> Google</a></td> অথবা <th><a href="www.google.com"> Google</a></th>

লিস্টের ব্যবহার

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

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

<html>

<head>

<title> www.google.com</title>

</head>

<li>About Us</li>

<li>Contact Us</li>

</ul>

<h4>Circle Type list</h4>

</ul><h4>Square Type list</h4>

<li>Pragaph</li>

<li>Table</li>

</ul>

</body>

</html>

HTML ফর্ম

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

১. টেক্সট বক্স

২. টেক্সট এরিয়া

৩. রেডিও বাটন

৪. সাবমিট বাটন

৫. চেক বক্স

৬. ড্রপডাউন লিস্ট

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

<html>

<head>

<title> www.google.com</title>

</head>

আপনার তথ্য দিয়ে সাহায্য করুন।

</font>

< /br>

নাম:           

</font>

পিতার নাম:

</font>    

ঠিকানা:

</font>            

<br />

আপনি কি পুরুষ:

</font>

<br />

আপনি কি মহিলা:

</font>

<br />

আপনি যে শহরে থাকেন:

</font>

<option>খুলনা</option>

<option>সিলেট</option>

<option>ভেড়ামারা</option>

</select>

<br />

শিক্ষাগত যোগ্যতা:

</font>

<br />

এস.এস.সি

</font>

<br />

এইস.এস.সি

</font>

<br />

<br />

</form>

</center>

</body>

</html>

HTML ফর্ম

১. টেক্সট বক্স

২. টেক্সট এরিয়া

৩. রেডিও বাটন

৪. সাবমিট বাটন

৫. চেক বক্স

৬. ড্রপডাউন লিস্ট

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

<html>

<head>

<title> www.google.com</title>

</head>

আপনার তথ্য দিয়ে সাহায্য করুন।

</font>

< /br>

নাম:           

</font>

পিতার নাম:

</font>    

ঠিকানা:

</font>            

<br />

আপনি কি পুরুষ:

</font>

<br />

আপনি কি মহিলা:

</font>

<br />

আপনি যে শহরে থাকেন:

</font>

<option>খুলনা</option>

<option>সিলেট</option>

<option>ভেড়ামারা</option>

</select>

<br />

শিক্ষাগত যোগ্যতা:

</font>

<br />

এস.এস.সি

</font>

<br />

এইস.এস.সি

</font>

<br />

<br />

</form>

</center>

</body>

</html>

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

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

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

<html>

<head>

<title> www.google.com</title>

</head>

<h2 style="color:#f00">This is an example of iframe.</h2><br />

<p>This rowser does not support iframes.</p>

</iframe>

</center>

</body>

</html>

লে আউট পদ্ধতি

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

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

<html>

<head>

<title> www.google.com</title>

</head>

<tr>

<h1> Web Page header</h1>

</td>

</tr>

<br />

<br />

<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>

</tr>

</table>

</body>

</html>

সি এস এস

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

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

২. ইনটার্নাল স্টাইল সিট (Internal Style Sheet)

৩. ইনলাইন স্টাইল সিট (Inline Style Sheet)

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

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

<head>

</head>

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

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

<head>

body {background-color: red;}

p { margin-left: 20px;

font-weight: bold;

color: #006; }

</style>

</head>

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

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

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

<html>

<head>

<title> www.google.com</title>

<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>

This is a paragraph. This is a paragraph.<br />

</p>

</body>

</html>

হেড ইলিমেন্ট

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

টাইটেল

ব্রাউজারের টাইটেল বারে পেজের টাইটেল প্রদর্শনের জন্য <title> </title> ট্যাগ ব্যবহার করা হয়।

<title>আমাদের HTML টিউটোরিয়াল সমূহ</title>

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

লিংক

CSS স্টাইল সিট এর সাথে লিংক করার জন্য <link> </link> ব্যবহার করা হয়।

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

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

স্টাইল

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

<head>

body {background-color: red;}

p { margin-left: 20px;

font-weight: bold;

color: #006; }

</style>

</head>

স্ক্রিপ্ট

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

মেটা ট্যাগ

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

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

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

আমরা যখন কোন বাক্য লিখে সার্চ ইন্জিনে সার্চ করি তখন সার্চ ইন্জিন বাক্যটিকে ভেঙ্গে একাধিক কি ওয়ার্ড এ বিভক্ত করে সার্চ করে। তাই কি ওয়ার্ড হচ্ছে সার্চ ইন্জিনে কোন ওয়েব পেজ খুজে পাওয়ার অন্যতম পদ্ধতি। এজন্য HTML এর মাধ্যমে কোন পেজ তৈরির সময়

সম্ভাব্য কি ওয়ার্ড গুলো যুক্ত করে দেয়া হয়।

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

ওয়েব পেজ অটো রিফ্রেস করার জন্যও মেটা ট্যাগ ব্যবহার করা হয়।

উপরের কোডটি ব্যবহার করলে প্রতি ১৫ সেকেন্ড অন্তর অন্তর http://www.google.com পেজটি একবার করে রিফ্রেস হবে। HTML এ স্ক্রিপ্ট এর ব্যবহার

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

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

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

<html>

<head>

<title> www.google.com</title>

function show_alert()

{

alert("Welcome to www.google.com");

}

</script>

</head>

</body>

</html>

সময়ের দাবী

সোমবার, ১৫ জানুয়ারী, ২০১৮

HTML

কোন মন্তব্য নেই:

একটি মন্তব্য পোস্ট করুন

জনপ্রিয় পোস্টসমূহ