এইচটিএমএল সুপারস্ক্রিপ্ট,সাবস্ক্রিপ্ট,স্ট্রাইকথ্রো (HTML superscript, subscript, strikethrow)

<p>This text is <sup>superscripted!</sup></p>

প্রদর্শন: Superscript:
This text is ^{superscripted!}

TML – Exponents 

অংকে exponential ব্যবহার করা জন্য <sup> tag ব্যবহার করতে হয়।

2<sup>3</sup> = 8
14<sup>x</sup>

প্রদর্শন: Exponents:

23 = 8
 14x






HTML – ফুটনোট:
উপন্যাস বা প্রবন্ধে দেখা যায় কোন লেখার reference দেয়ার জন্য <sup> tag ব্যবহার হয় যা ফুটনোটকে নির্দেশ করে।

<pre><p>"It was a lover's tryst<sup>1</sup>."
<hr />
1. Secret meeting between lovers</pre>

প্রদর্শন: Footnote

"It was a lover's tryst1."


1. Secret meeting between lovers










HTML -Subscript
<pre><p>This text is <sub>subscripted!</sub></p></pre>

প্রদর্শন:

This text is subscripted!









&nbsp;
<pre><p>H<sub>2</sub>0 - Water
<p>O<sub>2</sub> - Oxygen
<p>CO<sub>2</sub> - Carbon Dioxide</pre>

প্রদর্শন:


H2O - Water
 O2 - Oxygen
 CO2 - Carbon Dioxide

HTML – Strikethrough
<del> tag এর মাধ্যমে কোন লেখাকে ক্রস দেওয়া যায়।

<pre><p>This text is <del>scratched</del> out!</p></pre>

প্রদর্শন: Strikethrough

This text is scratched out!








HTML - Check Off Task:
<pre><ol>
<li>Clean my room</li>
<li><del>Cook Dinner</del></li>
<li><del>Wash Dishes</del></li>
</ol></pre>

প্রদর্শন:



Clean my room
Cook Dinner
Wash Dishes

HTML এট্রিবিউট

সাধারনত, ট্যাগ কে মডিফাই করার জন্য এট্রিবিউট ইউজ করা হয়. এইচটিএমএল ট্যাগ এর কার্যক্রমকে বৃদ্ধি করার জন্য এট্রিবিউট ব্যবহার করা হয়। HTML এ তৈরি ওয়েবপেজকে আরও সুন্দর করার জন্য এট্রিবিউট ব্যবহার করা প্রয়োজন। এট্রিবিউট ব্যবহার ভাল জানতে পাড়লে আপনি আপনার ওয়েবপেজকে আকর্শনীয় করে তুলতে পাড়বেন। এটি ট্যাগ এর সাথে ব্যবহার করা হয়। অর্থাৎ ট্যাগ এর <…> ভিতরে এট্রিবিউট লিখতে হয়।
একটি এট্রিবিউট এর দুইটি অংশ থাকে। যথা:
1. Attribute name
2. value
যেমন, <tag attributes ="value">
আমরা চাইলে একই ট্যাগে একাধিক এট্রিবিউট ব্যবহার করতে পাড়ি। যেমন,
<tag attributes ="value" attributes ="value">

আমরা <table> ট্যাগ ব্যবহার করে টেবিল তৈরি করতে পাড়ি। এই ট্যাগের সাথে width এবং height এট্রিবিউট ব্যবহার করে এর প্রস্থ, উচ্চতা ঠিক করতে পারি।  যেমন,
<table width="200" height="150">

Class বা id attributes:

Class বা id attribute এর ব্যবহার প্রায় একই তবে কিছুটা ভিন্নতা আছে। এগুলো জাভাস্ক্রিপ্ট ও সিএসএস এ ভুমিকা রাখে। (পরবর্তীতে আমরা এ নিয়ে আলোচনা করব।)

Name এট্রিবিউট:

এটি ফরম বা অন্যান্ন ইনপুট এলিমেন্টের সাথে দেখা যায়। যেমন,
<input type="text" name="TextField" />

Title এট্রিবিউট:

এই attribute টি কোন এইচটিএমএল এলিমেন্ট এর শিরোনাম এবং ছোট popup টেক্স যুক্ত করে এমন ভাবে যুক্ত করে যখন ওয়েব পেজে ঐ শিরোনামের উপর মাউস রাখা হয় তখন ছোট popup টেক্সটি প্রদর্শন করে।
<h2 title="Hello There!">Titled Heading Tag</h2>

Align এট্রিবিউট:

এর সাহায্যে এলিমেন্টের সমান্তরাল অবস্থান পরিবর্তন করা যায়। এর সাহায্যে এলিমেন্টকে left, Right or center করা যায়।

<h2 align="center">hello world</h2>

Valign এট্রিবিউট:

এর সাহায্যে এলিমেন্টের উলম্ব(Vertically)  অবস্থান পরিবর্তন করা যায়। এর সাহায্যে এলিমেন্টকে top, middle, bottom করা যায়।

<h2 valign="top">hello world</h2>

Generic attributes:

Attribute দিয়ে ওয়েবপেজ কে সম্পুর্নভাবে কাস্টমাইজ করা যায়। নিচে টেবিলে কিছু এইট্রবিউট দেয়া হল যা অনেক HTML Tag এর সাথে সহজে ব্যবহার করা যায়।

Attribute	Options	Function
align	right, left, center	সমান্তাল (Horizontally) aligns tags
valign	top, middle, bottom	উলম্ব(Vertically) aligns tags
bgcolor	numeric, hexadecimal, RGB values	Element এর  background color নিদের্শ করে।
background	URL	Background image উপর element নিদের্শ করে।
id	ব্যবহারকারীর নির্দেশ অনুযায়ী	Element  এর Name যা Cascading Style Sheets (css)   সাথে ব্যবহার করা হয়।
class	ব্যবহারকারীর নির্দেশ অনুযায়ী	Element  এর শ্রেনীবিন্যাস  যা Cascading Style Sheets (css) সাথে ব্যবহার করা হয়।
width	Numeric Value	Tables, images, or table cells এর width নির্দেশ  করে ।
height	Numeric Value	Tables, images, or table cells এর height  নির্দেশ  করে ।
title	ব্যবহারকারীর নির্দেশ অনুযায়ী	আপনার elements এর “Pop-up” title ।

HTML এলিমেন্ট

ট্যাগ হল এইচটিএমএল-এর  প্রাণ যার মাধ্যমে এইচটিএমএল কোড  লেখা হয়। প্রতিটি ট্যাগ শুরু হয় বাম (<)এঙ্গেল  ব্রাকেট দিয়ে ,এরপর একটা কীওয়ার্ড এবং শেষ হয় ডান এঙ্গেল  (> ) ব্রাকেট দিয়ে।যেমনঃ <html>,<head>,<body> হল এক একটা ট্যাগ। প্রতিটা ট্যাগ আলাদা আলাদা অর্থ বহন করে অর্থাৎ প্রতিটা ট্যাগের কাজ আলাদা এবং এরা Case Sensitive নয় , তবে Small  Letter- এ লেখা ভাল। ট্যাগ লেখার একটি গুরুত্বপূর্ণ  নিয়ম হল যে ট্যাগ দিয়ে শুরু হয় সেই ট্যাগ দিয়েই শেষ করতে হবে শুধু শেষ  কীওয়ার্ড –এর পূর্বে   এর আগে একটা শ্লাস (/) দিতে হবে। যেমন- ব্যাসিক কাঠামোতে আমরা দেখেছি যে, হেড সেকশান শুরু হয়েছে <head> ট্যাগ দিয়ে আর শেষ হয়েছে </head> ট্যাগ দিয়ে।কিছু ট্যাগ রয়েছে যাদের শেষ ট্যাগ ব্যবহার না করলেও হয়, এগুলো অপশনাল ট্যাগ ।যেমনঃ কোন প্যারাগ্রাফ  লিখতে  শেষ ট্যাগ </p> ব্যবহার না করলেও হবে এটা অপশনাল ট্যাগ।

ট্যাগ এর প্রধান তিনটি অংশ আছে
ক. শুরু করার ট্যাগ(opening tag)
খ.ধারনকৃত অংশ(contents)
গ.শেষ করার ট্যাগ (closing tag)।
এইচটিএমএল ট্যাগ এর মাধ্যমে আপনি web page এ আপনার পছন্দ মত বার্তা পাঠাতে পারেন।

<html>
<title>
<body>
<p>Paragraph Tag</p>
<h2>Heading Tag</h2>
<b>Bold Tag</b>
<i>Italic Tag</i>
</body>
</title>
</html>

কিছু কিছু ট্যাগ আছে যাদের closing tag দেয়ার প্রয়োজন নেই। তারা কোন এলিমেন্ট ধারন করে না।সে ট্যাগ টি হচ্ছে line break tag এবং তা <br/> রুপে প্রকাশ করা হয়। যা বিশেষ ভাবে ব্যবহার করা হয়। অর্থাৎ একটি লাইন লেখা বাদ দিয়ে অপর লাইন হতে লেখা শুরু করার জন্য এ ট্যাগ টি ব্যবহার করা হয়।
আরো কিছু ট্যাগ আছে যাদেরকে বিশেষভাবে ব্যবহার করা হয় যেমন ইমেজ ট্যাগ, ইনপুট ট্যাগ।

<img src="rana.jpg"/>


প্রদর্শন:
    

HTML এলিমেন্ট

ওয়েবপেজে আমরা যা কিছু দেখতে পাই সেগুলই হচ্ছে এইচটিএমএল এলিমেন্ট। ব্যনার, লিংক প্যারাগ্রাফ টেক্সট ইত্যাদিই হচ্ছে এলিমেন্ট। এইচটিএমএল এর মুল কেন্দ্রবিন্দু হচ্ছে এই এলিমেন্ট। বিভিন্ন প্রকার ট্যাগ<tag> দ্বারা এসব এলিমেন্ট তৈরি। তারা HTML page এর প্রতেকটি টেক্সটের অংশকে বর্ননা করে। এলিমেন্টস গুলো ট্যাগ(tag) এর মাধ্যমে তৈরী। HTML এলিমেন্টগুলি অনেক স্তরে বিদ্যমান। সবকিছু যা আপনার চোখের সামনে Web page এ বিদ্যমান তা হতে পারে Paragraph text, কোন ব্যনার,নেভিগেশন লিংক ইত্যাদি সব কিছুই elements এই পেজটির।
একটি এলিমেন্টের(Element) তিনটি অংশ থাকে:
১. শুরু করার ট্যাগ(opening tag). যেমন,<h1>
২. এলিমেন্ট এর ধারনকৃত অংশ। যেমন, Bangladesh
৩. শেষে বন্ধ করার ট্যাগ(closing tag)। যেমন, </h1>
যা হবে <h1> Bangladesh</h1>
আউটপুট: Bangladesh
একটি এইচটিএমএল ডকুমেন্টের  চারটি মৌলিক এলিমেন্ট থাকে- html, head, title এবং  body। এছাড়া আরও অনেক এলিমেন্ট রয়েছে।
নিম্নে এদের সংক্ষিপ্ত বর্ননা দেওয়া হল :
<html> এলিমেন্ট:
এর মাঝেই ওয়েবপেজের সব কিছু থাকবে। আমরা ওয়েবপেজের শুরুতে <html> এবং শেষে </html> লিখব।
<head> এলিমেন্ট:
এর মাঝে টাইটেল, এসইও এর keyword, Description ইত্যাদি থাকে এটি ওয়েবপেজে hide থাকে।
এটি শুরু হয় <head> দিয়ে এবং শেষ হয় </head> দিয়ে। মোট কথা Head এ যা কিছু থাকবে সব কিছু <head>……</head> এর মাঝে লিখতে হবে।
 <title> এলিমেন্ট:
আমরা ওয়েবপেজের টাইটেল বারে যে নাম দেখাতে চাই তা এখানে লিখতে হবে এটি <head> এলিমেন্ট এর মাঝে থাকবে। লিখার নিয়ম: <title> ওয়েবপেজের টাইটেল </title>
<body> এলিমেন্ট:
ওয়েবপেজে আমরা যা কিছু দেখাতে চাই তার সব কিছুই এখানে লিখতে হবে। আমরা ওয়েবপেজে যে টেক্সট, ইমেজ, লিঙ্ক প্রদর্শন করব তা <body> এলিমেন্ট এর অংশ। আমরা ওয়েবপেজে যা কিছু দেখাতে চাই তা <body>…….</body> এর মাঝে থাকবে।সবার প্রথমে HTML লেখার শুরুতে HTML শব্দের প্রথমে এবং শেষে less than  ও  greater than ( < >) চিহ্ন দিতে হয়। যেমন: <html> । কোন কিছু লেখার পর শেষে </html> ট্যাগটি দিতে হবে। অর্থাৎ <html> Welcome to Bangladesh </html>।
ব্যাপারটা ভালোভাবে বুঝার জন্য একটু আলোচনা করা যাক যেমন- কোন প্যারাগ্রাফ লিখতে প্রথমে <p> ট্যাগ দিয়ে শুরু করতে হয় তারপর প্যারাগ্রাফের বিষয়বস্তু এবং সবশেষে </p> দিয়ে শেষ করতে হয়। এখানে প্যারাগ্রাফের শুরু ও শেষ ট্যাগ (<p>Element Content</p>)নিয়েই হল প্যারাগ্রাফ এলিমেন্ট। অনেকেই ট্যাগ এবং এলিমেন্টের পার্থক্যটা বুঝতে পারে না, আসলে শুরুর ও শেষ ট্যাগ একত্রে মিলেই হল এইচটিএমএল এলিমেন্ট।
উদাহরণ,
<html>
<head>
<title>
Bangladesh
</title>
</head>
<body>
Welcome to Bangladesh. My homeland is Bangladesh. I love Bangladesh very much.
</body>
</html>
এবার পূর্বের মত, start মেনু    All Programs > Accessories >Notepad ওপেন করে উপরক্ত Program টি Notepad এ লিখে index.html নাম দিয়ে File মেনু থেকে Save এ গিয়ে Save করুন। Save করা File টি Open করে দেখুন Web Browser এ ওপেন হচ্ছে। Save করার সময় .html দিতে ভুলবেন না। নামের সাথে .html না দিলে ওয়েরপেজ তৈরি হবে না। আপনি চাইলে index এর যায়গায় অন্য নাম দিতে পারেন তবে .html টি অবশ্যই দিতে হবে। আপনি যখন আনেক গুলো ওয়েবপেজ তৈরি করে সর্ভারে আপলোড করব তখন হোম পেজটির নাম index.html নাম দিয়ে Save করতে হবে। আপনার ওয়েবপেজ তৈরি হয়ে গেছে। এতে কিভাবে টেক্সট, ইমেজ, লিঙ্ক সংয়োগ করা যাবে তা আমরা পরে আলোচনা করব।

HTML সূচিপত্র

যা জানবো…

এখানে ধারাবাহিক ভাবে বাংলা ভাষায় HTML এর উপর টিউটোরিয়াল লেখা হয়েছে । ডান পাশের ধারাবাহিক লিংক থেকে HTML সম্পর্কিত বিস্তারিত জ্ঞান অর্জন করা যাবে।

HTML কি?

এইচটিএমএল শেখার আগে আমারা প্রথমে জেনে নেই এইচটিএমএল টা কি? এটা থায় না মাথায় দেয়।এটা আসলে খাওয়া কিংবা মাথায় দেওয়ার জিনিস কোনটাই না। এটা মূলত একটা ল্যাংগুয়েজ মাত্র।তাই বলে কোন প্রোগ্রামিং ল্যাংগুয়েজ নয়।এটা এক ধরনের মার্কআপ ল্যাংগুয়েজ। যার পূর্ণ অর্থ Hyper Text Markup Language। । ওয়েব ডেভেলপার হতে হলে এই ল্যাংগুয়েজ টি সবার আগে ভালভাবে শিখতে হবে।তবে এটা শেখা খুব সহজ।
এটা শিখলেই আপনি মোটামুটি একটা ওয়েব পেজ তৈরী করতে পারবেন।এরপর যদি সিএসএস শেখেন তাহলে ঐ পেজটিতে আরেকটু প্রান দিতে পারবেন।এরপর জাভাস্ক্রিপ্ট ব্যবহার করলে আপনার ঐ ওয়েব পেজটি ডাইনামিক হওয়া শূরু হল। এরপর পিএইসপি,ডেটাবেস শিথলে আপনি একটি পূর্ণাঙ্গ ওয়েব পেজ তৈরী করতে পারবেন।

যে জিনিস লাগবে এইচটিএমএল শিখতে (অর্থ্যাৎ এইচটিএমএল কোড কোথায় লিখবেন) :

একটি সাধারন টেক্স্রট এডিটর, যেমন নোটপ্যাড।‌তাহলে প্রথমে নোটপ্যাড দিয়েই শুরু করা যাক কেমন।এ জন্য আপনাকে যা যা করতে হবে তা হলো-

নোটপ্যাড। Notepad open করে তৈরী হোন।যেহেতু নতুন তাই নোটপ্যাড দিয়েই শুরু করুন পরে অন্য কোন এডভান্সড এডিটরে সুইচ করবেন যেমন Netbeans বা Dreamweaver.আর যদি কারো ড্রিমওয়েভার এ কাজের অভিজ্ঞতা থাকে তাহলে  এখনই শুরু করতে পারেন।আমারা যেহেতু নতুন তাই নোটপ‌্যাড দিয়েই শুরু করি। এজন্য আপনার কম্পিউটার এ star বাটন থেকে programs এ ক্লিক করি। তার পর accessories থেকে notepad এ ক্লিক করে নোটপ্যাড ওপেন করি। এরপর টাইপ করি

এখানে উলৈখ্য যে নোটপ্যাড এর ভিতর ব্যবহৃত টেক্স্ গুলোকে এক একটি এলিমেন্টস বলা হয়। এলিমেন্টস সম্বন্ধে পরবর্তি টিউটোরিয়ালে বিস্তারিত আলোচনা করা হবে।

এভাবে লেখার পর Notepad এর ফাইল মেনু হতে save এ ক্লিক করব তারপর index.html নামে save করব। index এর জায়গায় আপনি ইচ্ছা করলে যে কোন নাম দিতে পারবেন তবে এক্সটেনেন্ট অবশ্যই (.html)সেভ দিতে হবে।যেমন,

সেভ করা ফাইলটিকে Double click করে open করবো । দেখবো যে লেখাটি Browser এ open হয়েছে। খুব সহজে একটা web Page তৈরী হয়ে গেলো।