HTML এর পুরো শব্দসমুহ হল Hyper Text Markup Language। ইহা কতগুল tag এর সমণ্বয়ে গঠিত। এই টেগগুলো থেকে প্রয়োজনীয় টেগসমুহ সুবিধামত সাজিয়ে web page তৈরি করা হয়। প্রয়োজনীয় সংখ্যক কতগুলো wev page নিয়ে তৈরি হয় website ।
প্রতিটি tag এর দুটি অশ থাকে start tag বা opening tag ও end tag বা closing tag ।
কোন একটি টেগের start tag ও end tag এবং তাদের মধ্যবর্তী অংশকে একসাথে html element বলে।
এই টেগগুলোর মধে প্রধান টেগটি হল <html> যার start tag হল <html> এবং end tag হল </html> । Html এর সবকিছু এই tag এর ভিতরে থাকে।এই মধ্যবর্তি অংশ দুই ভাগে বিভক্ত – <head></head> এবং <body></body> ।web page এর যে অংশটুকু ব্রাউজারে ভেসে আসে তা থাকে <body></body> এর ভিতরে ।<p></p> হল paragraph tag যার মধ্যকার লেখা টুকু browser এ সয়ংকক্রিয়ভাবে একটি paragraph হিসাবে দৃশ্যমান হয়। <style></style> টেগটি <body></body> এর মধ্যকার tag সমুহের styling করে।<style></style> tag টি থাকে <head></head> tag এর ভিতরে।<script></script> tag টি ও <head></head> tag এর ভিতরে থাকে।

<html>
<head>
<style>
p{color:red;}
</style>
</head>
<body>
<p> We are learning English.</p>

</body>
</html>

tag টি ও tag এর ভিতরে থাকে।

এই code টুকু notepad এ লিখে dextop এ save করুন। সেভ করা ফাইলটি select করে মাউসের right বাটনে click করুন ।

pop-up menu থেকে open with – firefox বা maxthon browser সিলেক্ট করুন ।
browser এ code টির output দেখুন

HTML এ পরিচিতি

HyperText Markup Language 1980 সালে Tim Berners-Lee, যিনি CERN এ একজন ঠিকাদার ছিলেন, সর্বপ্রথম CERN গবেষকদের মাঝে দস্তাবেজ শেয়ার করার জন্য ENQUIRE prototyped নামে একটি ‍System এর প্রস্তাব দেন। 1989 সালে, Berners-Lee একটি ইন্টারনেট ভিত্তিক হাইপারটেক্সট সিস্টেম প্রস্তাবে একটি মেমো লিখেন. 1990 সালে Berners-Lee ব্রাউজার এবং সার্ভারের সফ্টওয়্যারে এইচটিএমএল (HTML) এর উল্লেখ করেন ।এ বছরেই, Berners-Lee এবং CERN এর তথ্য সিস্টেম ইঞ্জিনিয়ার Robert Cailliau যৌথভাবে CERN কে এ প্রকল্পের জন্য অর্থায়নেঅনুরোধ করেন, কিন্তু প্রকল্পটি আনুষ্ঠানিকভাবে CERN দ্বারা গৃহীত হয়নি।

HTML Body এর অভ্যন্তরীন ট্যাগ পরিচিতি

ট্যাগ বা ট্যাগিং বলতে আমরা সাধারনত বুঝি একটি বস্তুর সাথে অন্য কোন বস্তুকে ঝুলিয়ে দেয়া। যেমনটা আমরা অনেকেই ফেসবুকে কোন ছবিকে আমদের বন্ধুদেরকে ট্যাগ করি ঠিক তেমটাই।

ভাষাগত দিকে থেকে একই হলেও HTML হেডার ট্যাগ গুলো কিছুটা ভিন্নতা প্রকাশ করে। যেমন, HTML এ <header> </header> একটি সেকশন ট্যাগ আছেই তারপরেও স্বতন্ত্র HTML এ header ট্যাগ আছে ছয়টি যেগুলো শুধু মাত্র <body> </body> সেকশনে ব্যবহার করা যায়: h1, h2, h3, h4, h5, h6। ট্যাগ গুলোর ব্যবহার একটু বিস্তারিত আলোচনাতে আসি –

হেডার ওয়ান ট্যাগ: সবচেয়ে বড় হেডার ট্যাগ। লিখাগুলোর সাইজ ৩৬ পিক্সেল। সিএসএস এর মাধ্যমে আপনি এর ডিফল্ট সাইজকে ইচ্ছামত বড় করতে পারবেন।

<h1>This is H1 tag example</h1>

হেডার টু ট্যাগ: হেডার ওয়ান থেকে একটু ছোট। লিখাগুলোর সাইজ ৩০ পিক্সেল। সিএসএস এর মাধ্যমে আপনি এর ডিফল্ট সাইজকে ইচ্ছামত বড় করতে পারবেন।
<h2>This is H2 tag example </h2>

হেডার থ্রী ট্যাগ: হেডার টু থেকে একটু ছোট। লিখাগুলোর সাইজ ২৪ পিক্সেল। সিএসএস এর মাধ্যমে আপনি এর ডিফল্ট সাইজকে ইচ্ছামত বড় করতে পারবেন।
<h3>This is H3 tag example </h3>

হেডার ফোর ট্যাগ: হেডার থ্রী থেকে একটু ছোট। লিখাগুলোর সাইজ ১৮ পিক্সেল। সিএসএস এর মাধ্যমে আপনি এর ডিফল্ট সাইজকে ইচ্ছামত বড় করতে পারবেন।
<h4>This is H4 tag example </h4>

হেডার ফাইভ ট্যাগ: হেডার ফোর থেকে একটু ছোট। লিখাগুলোর সাইজ ১৬ পিক্সেল। সিএসএস এর মাধ্যমে আপনি এর ডিফল্ট সাইজকে ইচ্ছামত বড় করতে পারবেন।
<h5>This is H5 tag example </h5>

হেডার সিক্স ট্যাগ: হেডার ফাইভ থেকে একটু ছোট এবং সবচেয়ে ছোট ট্যাগ। লিখাগুলোর সাইজ ১৪/১২ পিক্সেল। সিএসএস এর মাধ্যমে আপনি এর ডিফল্ট সাইজকে ইচ্ছামত বড় করতে পারবেন।
<h6>This is H6 tag example </h6>

নোট প্যাডে লিখবেন যেভাবে-
<html>
<head>
<title>This is Header Tag Tutorial</title>
</head>

<body>
<h1>This is H1 tag example</h1>
<h2>This is H2 tag example </h2>
<h3>This is H3 tag example </h3>
<h4>This is H4 tag example </h4>
<h5>This is H5 tag example </h5>
<h6>This is H6 tag example </h6>
</body>

This is H1 tag example

This is H2 tag example

This is H3 tag example

This is H4 tag example

This is H5 tag example

This is H6 tag example

</html>

লিখাগুলো নোটপ্যাডে কপি পেষ্ট করে tag.html ফরমেটে সেভ করুন। তার পর tag.html ডকুমেন্টটি ডাবল ক্লিক করে ব্রাউজারে প্রদর্শণ করান। কোথায় কোন ভুল না থাকেলে অবশ্যই ফলাফল প্রদর্শণ করতে ভালভাবে।

প্যারাগারাফ ট্যাগ(<p></p>): এই ট্যাগের ভিতরে কোন লিখা লিখলে তা প্যারাগারাফ এর আকার ধরন করে। তাই একে প্যারাগারাফ ট্যাগ বলা হয়।

কিভাবে লিখতে হয় দেখুন- <p>This is Paragraph tag example</p>

বোল্ড ট্যাগ(<b></b>/<bold></bold>/<strong></strong>): এমএস ওয়ার্ডে আমরা যেভাবে কোন লিখাকে বোল্ড করি ঠিক তেমনি। কোন লিখাকে ওয়েব পেজে BOLD বা মোটা করতে হলে এমএস ওয়ার্ডের মত ctrl+b প্রেস করলেও হবে।

কিভাবে লিখতে হয় দেখুন- <b>This is BOLD tag example </b>

ইটালিক ট্যাগ(<i></i>): এমএস ওয়ার্ডে আমরা যেভাবে কোন লিখাকে Italic বা বাঁকা করি ঠিক তেমনি। কোন লিখাকে ওয়েব পেজে Italic বা বাঁকা করতে হলে এমএস ওয়ার্ডের মত ctrl+i প্রেস করলেও হবে।

কিভাবে লিখতে হয় দেখুন- <i>This is Italic tag example </i>

আন্ডারলাইন ট্যাগ(<u></u>): এমএস ওয়ার্ডে আমরা যেভাবে কোন লিখাকে Underline বা লিখার নিচে লাইন টানি ঠিক তেমনি। কোন লিখাকে ওয়েব পেজে Italic বা বাঁকা করতে হলে এমএস ওয়ার্ডের মত ctrl+u প্রেস করলেও হবে।

কিভাবে লিখতে হয় দেখুন- <u>This is Underline tag example </u>

ডিলিট ট্যাগ(<del></del>): মাঝে মাঝে আমরা অনেক ওয়েব সাইটে দেখি যে কোন একটি ওয়ার্ড বা বাক্যে বার্টিক্যালি মাঝ বড়াবর দাগ টানা থাকে। সাধারনত পন্যদ্রব্য এর কেনা বেচার সাইটে কোন পুরাতন লিখাকে/দাম কেটে নতুন লিখাকে/দাম অন্তর্ভক্ত করতেই এই ট্রাগের ব্যবহার।

কিভাবে লিখতে হয় দেখুন- একটি ওয়ার্ড <del>Delete</del> বা একটি বাক্য <del>This is Delete tag example</del>

ইন্সার্ট ট্যাগ(<ins></ins>): Delete ট্যাগ এর ঠিক উল্টো। পুরাতন লিখাকে কেটে নতুন লিখাকে অন্তুর্ভূক্ত করদেই এই ট্যাগ এর ব্যবহার। Insert ট্যাগটি নরমাল লিখার মতই। তাই ডিলিট ট্যাগ এর সাথে এটি না লিখলে বুঝতে পারা যায় না।

প্রি-ট্যাগ(<pre> </pre>): এটি এমন একটি ট্যাগ যা সচারচর ব্যবহার হয় না। মানে ডিজাইনাররা ব্যবহার করেন না।

এর কাজঃ ধরুন, আপনি পেজের কোন ইলিমেন্টকে ডানে-বায়ে, মাঝে বা আপনার পছন্দমত স্থানে দেখাতে চাইছেন।

কিন্তু এই কাজটি করতে হলে আপনাকে টেক্ট এলাইমেইন প্রোপারটিজ এবং ভ্যাল left, center বা right ব্যবহার করতে হবে। এমনভাবেঃ <style text-align: center;> বা আপনি যে এলাইনমেন্ট চাইবেন তা।

কিন্তু আপনি এই প্রি-ট্যাগ ব্যবহার করে কোন এলাইনমেন্ট ব্যবহার না করেই সহজেই এই কাজ টি করতে পারবেন। যেভাবে লিখবেঃ

<p>This is pre tag example.</p>

<pre>

This is web design tutorial. This is web design tutorial. This is web design tutorial.

</pre>

<p>

This is web design tutorial. This is web design tutorial. This is web design tutorial.

</p>

উপরের দুটে প্যারা এর মধ্যে শুধু মাত্র <pre> এবং </pre> এর মধ্যবর্তী লিখাগুলো দেখুন। আমি যেভাবে(ডানে, বায়ে এবং মাঝে) লিখে রেখেছি সেভাবেই ব্রাউজারে প্রদর্শণ করবে। আর <pre> এবং </pre> এর পরের <p> এবং </p> এর মধ্যবর্তী প্যারাগ্রাফটি লক্ষ করুন। এটি তার নিয়ম মোতাবক ডিফল্ট প্যারাগ্রাফ রুলস অনুযায়ী প্রদর্শন করছে। বুঝতে না পারলে মন্তব্য জানাবেন।

ব্লককোট ট্যাগ(<blockquote> </blockquote>): ব্লককোট ট্যাগ যে প্যারা বা লাইনে ব্যবহার করা হবে। শুধু সেই লিখাটুকু বামে কিছুদূর মার্জিন নিয়ে স্বতন্ত্রভাবে প্রদর্শন করবে অন্যসব প্যারা থেকে। নিচের উদাহরণটি অনুসরন করুন-

<blockquote>This is web design tutorials class. This is web design tutorials class. This is web design tutorials class. This is web design tutorials class. This is web design tutorials class. This is web design tutorials class. This is web design tutorials class. This is web design tutorials class. This is web design tutorials class. This is web design tutorials class.

</blockquote>

<p>

This is web design tutorial. This is web design tutorial. This is web design tutorial.

</p>

হরিজোনটাল লাইন ট্যাগ (<hr />): HTML এর কিছু ট্যাগ রয়েছে যেগুলো স্টার্টিং ট্যাগ দিয়েই শেষ হয়। এগুলো কোন ইলিমেন্ট বহন করে না বিধায় এগুলো এমন। তার মধ্যে অন্যতম হরিজোনটাল লাইন ট্যাগ। এর কাজ শুধু মাত্র যেখানে এটি ব্যবহার করা হবে সেখানে একটি হরিজোনটাল লাইন প্রদর্শণ করবে। ব্যবহার করে দেখুন এভাবে:

<p>This is web design tutorial. Showing Horizontal Line below.</p>

<hr/>

<p>This is web design tutorial. Showing Horizontal Line below above.</p>

কোটেশন ট্যাগ (<q> </q>): এক বা একধিক বর্ণ, শব্দ, বাক্য বা প্যারার শুরুতে এবং শেষে “” চিহৃ কে আমরা কোটেশন বলি। তাই নতুন করে আর পরিচয় করিয়ে দিতে গেলাম না। শুধু নোটপ্যাডে প্রাকটিস করুন এই লাইনটি তাহলেই বুঝবেন-

<q>This is quotation tag.</q>

লাইন ব্রেক ট্যাগ (<br />): এক বা একধিক বর্ণ, শব্দ, বাক্য বা প্যারার মধ্যে লাইন ব্রেক করতে এই ট্যাগের ব্যবহার। মানে একটি প্যারা লিখার পর এই ট্যাগ ইউজ করলে নতুন লাইন বা প্যারা শুরু হবে। হুবহু কি-বোর্ডের এন্টার প্রেস করারমত। এটিও হরিজোনটাল লাইন ট্যাগ এর মত কোন উপাদান বহন করে না। অবশ্য বলে রাখা ভাল, প্যারাগ্রাফ ট্যাগ (<p> </p>) নিজেই লাইন ব্রেকের কাজ করে।

এব্রিভিয়েশন ট্যাগ (<abbr> </abbr>): এই ট্যাগের কাজঃ সাপোজ আপনি কোন ওয়েব সাইটের কোন টেক্ট/বা লাইনকে সংক্ষিপ্ত করে কয়েকটি লেটার/অ্কষর দিয়ে দেখাতে চাচ্ছেন। মানে আপনার পুরো লিখাটি যদি World Wide Web হয়। তাহলে সংক্ষিপ্ত করলে তা হবে WWW। কিন্তু আপনি চাইছেন কেউ এই WWW এর উপরে মাউস কার্সার রাখলে পুরো লিখাটি (World Wide Web) প্রদর্শণ করবে। এই কাজটি করার জন্যই এব্রিভিয়েশন ট্যাগ ব্যবহার করা হয়। নোটপ্যাডে প্রাকটিস করুন এই লাইনটি তাহলেই বুঝবেন-

টেক্সট ডিরেকশন ট্যাগ (<bdo dir=” “> </bdo>): এই ট্যাগটি আপনার লিখার ডিরেকশন পরিবর্তন করবে। ধরুন আপনি চাইছেন আপনার মূল লিখাটি “This is opposite Direction Tag” আপনি এই লাইটিকে gaT noitceriD etisoppo si sihT এভাবে লিখতে তাহলে আপনাকে নিচের ট্যাগটি লিখতে হবে-

<bdo dir=”rtl”>This is opposite Direction Tag</bdo>

<bdo> এবং </bdo> হলো মূল ট্যাগ কিন্তু আপনার টেক্টসকে উল্টা ডিরেকশনে দেখাতে হলে dir=’”” এ rtl রিখতে হবে। কারন ইংরেজি বণর্মালাতে ক্রমান্বয়ে সর্বশেষে r, তার আগে t এবং তার আগে l আসে। বুঝাতে পেরেছি কি? না পারলে মন্তব্যে জানান।

বিগ ট্যাগ (<big> </big>): সাধারন বা যেকোন সাইজের ফন্টকে অপেক্ষাকৃতি বড় দেখানোর জন্য এই ট্যাগ ব্যবহার হয়। নিচের মত করে…

কোড ট্যাগ (<code> </code>): যারা প্রোগ্রামিং করেন তাদের প্রোগ্রামিং এরিয়াতে দেখবেন লিখার স্টাইলগুলো। যে ফন্টেই লিখেন না কেন স্টাইলটা হবে কোন লিখার মত। অনেকটা জায়গা আলাদা করে নিয়ে প্রদর্শন করবে এই কোডের ভেতরে কিছু লিখলো। নিচের মত করে…

সুপারসক্রিপ ট্যাগ (<sup></sup>): পড়াশুনা করছেন বা করতেন এমন কাউকে খুজেঁ পাওয়া যাবে না যারা গণিত পড়েন/করেন নাই। ক্লাস সিক্স থেকে শুরু হয় বীজগণিত এর অংক। বীজগণিতেই পাওয়া যায় a²+2ab+b²=(a+b)² এর অংক। a এবং b এর উপরে পাওয়ার ২। এই উপরের পাওয়ারগুলোকেই ওয়েব এর ভাষায় সুপারসক্রিপ বলে। যে অক্ষর বা ওয়ার্ডে উপরে পাওয়ার দিবেন শুধু তার সামনে <sup> ও শেষে </sup> লিখে দিন। নিচের মত করে…

(a+b)<sup>2</sup>=a<sup>2</sup>+2ab+b<sup>2</sup>

সাবসক্রিপ ট্যাগ (<sub></sub>): Science (বিজ্ঞান) নিয়ে পড়াশুনা করছেন বা করতেন এমন কাউকে খুজেঁ পাওয়া যাবে না যারা কোন রাসায়নিক সংকেত চিনেন না বা লিখেন নাই। যেমনঃ Oxygen এর রাসায়নিক সংকেত O₂, Nitrogen এর রাসায়নিক সংকেত NO₂। এই উপরের পাওয়ারগুলোকেই ওয়েব এর ভাষায় সাবসক্রিপ বলে। যে অক্ষর বা ওয়ার্ডে নিচে পাওয়ার দিবেন শুধু তার সামনে <sub> ও শেষে </sub> লিখে দিন। নিচের মত করে…

Oxygen=O<sub>2</sub>, Nitrogen=N0<sub>2</sub>

পুরো টিউটোরিয়ালটি এভাবে লিকুন নোট প্যাডেঃ

<html>

<head>

<title>This is Web Design Tutorials 4th Class</title>

</head>

<body>

<pre>

<p>This is pre tag example.</p>