বেসিক এইচ টি এম এল পরিচিতি

১.১ এইচটিএমএল (HTML) :

HTML এর পুরো অর্থ হলো Hyper Text Markup Language. মূলত রিসার্চ এর কাজে ব্যবহার করার জন্য HTML এর শুরু। তারপর থেকে ওয়েবসাইট এর কাজে HTML ব্যবহার শুরু হয়।

১.২ এইচটিএমএল ট্যাগ (HTML Tags):

HTML এ প্রায় সব কিছুই ট্যাগ (tag). HTML দিয়ে ওয়েবসাইট বানানোর জন্য আগে কিছু ট্যাগ সম্পর্কে জানতে হবে। বর্ণমালা শেখার পর আমরা শব্দ বানাই, তারপর শব্দ দিয়ে বাক্য। তেমনি ভাবে HTML এর ট্যাগ শেখার পর ছোট ছোট ওয়েবসাইট বানানো যাবে, তারপর অভিজ্ঞতা থেকে বড় ওয়েবসাইট বানানো যাবে। Html tag বলতে মূলত মার্কআপ ট্যাগগুলোকেই Html tag বলে। ট্যাগগুলো হলো কিওয়ার্ড যেগুলো উভয় পাশে অ্যাঙ্গেল ব্রাকেট এর মাধ্যমে আবদ্ধ থাকেযেমন <p> and </p> । এর প্রথম ট্যাগটি হলো শুরু ট্যাগ আর দ্বিতীয়টি হলো শেষ করা ট্যাগ । এই ট্যাগগুলোকে ওপেন ট্যাগ এবং ক্লোজিং ট্যাগ নামেও ডাকা হয় ।

১.৩ HTML শেখার জন্য requirement

HTML এর কোডিং নিজের কম্পিউটার এ করা যায় কিংবা অনলাইনেও করা সম্ভব। কম্পিউটার নোটপ্যাড (notepad ) এ চাইলে HTML লেখা সম্ভব। তবে ভালো প্রাকটিস হলো শুরু থেকেই কোনো কোড এডিটর এ ওয়েব ডেভেলপমেন্ট এর কাজ করা। অনেক কোড এডিটর এখন বাজারে বিদ্যমান। কিছু ফ্রি আবার কিছু পেইড। কিছু কোড এডিটর এর নাম দেয়া হলো :
Notepad++ : https://notepad-plus-plus.org/download/
Bracket : http://brackets.io/
Atom : https://atom.io/
Sublime: https://www.sublimetext.com/2

HTML প্রাকটিস চাইলে অনলাইন এও করা সম্ভব। অনলাইন এর লিংক গুলো হলো:
JSBIN: https://jsbin.com/
JsFiddle: https://jsfiddle.net/

যখন কোন HTML ফাইল সেভ করেন তখন .html কিংবা .htm extension ব্যবহার করতে হবে । কিন্তু সবচেয়ে ভালো উপায় হলো .html কিংবা এক্সটেনশনটি ব্যবহার করা ।

কোন ব্রাউজার ব্যবহার করব ? HTML এর প্রায় সব ট্যাগ সব ব্রাউসার (browser ) এ চলবে। তবে কিছু নতুন নতুন ট্যাগ কিছু ব্রাউসার এর পুরাতন ভার্সন এ নাও চলতে পারে। একজন ভাল ওয়েব ডেভেলপার সব সময় তার কাজ বিভিন্ন ব্রাউসার এ পরীক্ষা করে নেয়। ব্রাউসার এর লিস্ট :
1. Google Chrome

2. FireFox
3. Internet Exploer 9.0 & 9.0+

কিছু HTML ট্যাগ এবং তার কাজঃ

Start tag	Element content	End tag
<p>	This is a paragraph	</p>
<a href="default.htm" >	This is a link	</a>
<br />
<h1>	Heading 1 Tag	</h1>
<body>	Body	</body>
<title>	Title	</title>

১.৪ এইচটিএমএল হেডিং (HTML Heading) :

HTML ফাইলে হেডিংগুলোকে <h1> থেকে <h6> পর্যন্ত ট্যাগ দ্বারা নির্ধারন করা হয়ে থাকে ।

উদাহরণ :

<html>

<body>

<h1> This is heading 1 </h1>

<h2> This is heading 2 </h2>

<h3> This is heading 3 </h3>

<h4> This is heading 4 </h4>

<h5> This is heading 5 </h5>

<h6> This is heading 6 </h6>

</body>

</html>

Output: Do it Run on Your Browser.

১.৫ এইচটিএমএল প্যারাগ্রাফ (HTML Paragraph) :

HTML ফাইলে প্যারাগ্রাফগুলোকে <p> ট্যাগ দ্বারা নির্ধারণ করা হয়ে থাকে । এর শুরু হল <p> দিয়ে এবং শেষ করতে হয় </p> ব্যবহার করে ।

উদাহরণ :

<html>

<body>

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

</body>

</html>

Output: Do it Run on Your Browser.

১.৬ এইচটিএমএল লিংক(HTML Link) :

HTML ফাইলে লিংকসমূহকে <a> দ্বারা নির্ধারণ করা হয়ে থাকে । এর শুরু হয় <a> দিয়ে এবং শেষ হয় <a> দিয়ে । ওই ট্যাগের মধ্যে টেক্সট বসাতে হয় ।

উদাহরণ :

<html>

<body>

<a href=”http://google.com”> Visit Google Search</a>

</body>

</html>

Output: Do it Run on Your Browser.

১.৭ এইচটিএমএল ইমেজ (HTML Image):

HTML ফাইলে ইমেজসমূহ <img> ট্যাগ দ্বারা নির্ধারণ করা হয়ে থাকে । height এবং width দ্বারা ইমেজ নির্ধারণ করা হয়ে থাকে ।

উদাহরণ :

<html>

<body>

</body>

</html>

Output:

১.৮ এইচটিএমএল ফরমেটিং (HTML Formating) :

HTML ফরমেটিং করার জন্য HTML <b> & <i> এর মতো ট্যাগগুলো ব্যবহার করা হয়ে থাকে । এই দুটি ট্যাগের মাধ্যমে টেক্সটকে বোল্ড ও ইটালিক করা যায় । এ ধরনের আর ও অনেক ট্যাগ রয়েছে যেগুলোকে ফরমেটিং ট্যাগ বলা হয় ।

উধাহরণ :

<html>

<body>

<p> <strong> This text is strong </strong> </p>

<p> <em> This text is emphasized </em> </p>

<p> <i> This text is italic </i> </p>

<p> <small> This text is small </small> </p>

<p>This is <sub>subscript </sub> and <sup>superscript </sup></p>

</html>

</body>

Output: Do it Run on Your Browser.

১.৯ এইচটিএমএল টেবিল (HTML Table) :

এইচটিএমএল ফাইলে টেবিলসমূহকে <table> ট্যাগ দ্বারা নির্ধারণ করা হয় ।একটি টেবিল <tr> ট্যাগ দ্বারা রো-তে বিভক্ত থাকে এবং প্রতিটি রো আবার <td> ট্যাগ দ্বারা ডাটা সেলসমূহকে বিভক্ত থাকে। td-এর মানে হল “table data” যা একটি ডাটা সেল-এর কন্টেন ।একটি ডাটা সেল টেক্সট , ইমেজ ,লিস্ট ,ফটোগ্রাফ ,ফর্ম , হরিজন্টাল রুল ইত্যাদি তৈরি করতে পারে ।

উদাহরণ :

<html>

<body>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Output: Do it Run on Your Browser.

১.১০ এইচটিএমএল ফর্ম (HTML From):

এইচটিএমএল ফর্মসমূহ বিভিন্ন ধরনের ইউজার ইনপুট সিলেক্ট করার জন্য ব্যবহৃত হয়ে থাকে। ফর্ম হলো একটি এলাকা। যা কোন ফর্মের উপাদান বা এলিমেন্টগুলোকে ধারণ করতে পারে। ফর্ম ইলিমেন্টগুলো এমন ধরনের এলিমেন্ট,যা ব্যবহারকারী কোন ফর্মের ভিতর তথ্য (যেমন-ড্রপ ডাউন মেনু , রেডিও বাটন, চেক বক্স ইত্যাদি) প্রবেশ করানো সুযূগ দেয়।একটি ফর্মকে <from> ট্যাগ দ্বারা নির্ধারণ করা হয়।

টেক্সট ফিল্ড, পাসওয়ার্ড ফিল্ড, রেডিও বাটন, চেক বক্স ও সাবমিট বাটনঃ

Ø টেক্সট ফিল্ড (Text Fields): কোনো ব্যবহারকারী একটি ফর্মে অক্ষর, সংখ্যা ইত্যাদি টাইপ করবে, সে ক্ষেত্রে টেক্সট ফিল্ড ব্যবহার করতে হবে।

Ø পাসওয়ার্ড ফিল্ড (Password Field): কোনো ব্যবহারকারী একটি ফর্মে গোপনীয় সংখ্যা টাইপ করবে, সেক্ষেত্রে পাসওয়ার্ড ফিল্ড ব্যবহার করতে হবে।

Ø রেডিও বাটন (Radio Buttons): কোনো ব্যবহারকারী একটি ফর্মে সীমিত কিছু পছন্দ থেকে একটিকে বেছে নিবে সেক্ষেত্রে রেডিও বাটন ব্যবহার করতে হবে

Ø চেক বক্স (Check Boxes): কোনো ব্যবহারকারী একটি ফর্মে সীমিত কিছু পছন্দ থেকে যখন এক বা একাধিক বিষয়কে নির্বাচন করবে সেক্ষেত্রে চেকবক্স ব্যবহার করতে হবে।

উদাহরণঃ

<html>

<body>

First name: <input type="text" name="firstname" /><br />

<br />

Last name: <input type="text" name="lastname" /><br />

<br />

<input type="radio" name="sex" value="female" /> Female<br />

<br />

<input type="checkbox" name="vehicle" value="Bike" /> I have a Computer<br />

<input type="checkbox" name="vehicle" value="Car" /> I have a Leptop <br />

<br />