আশা করি সবাই ভাল আছেন।
গত পর্ব আমরা html সম্পর্কে সাধারণ ধারনা নিয়েছি আর এই পর্বে তার কিছু ব্যাবহার শিখব।
এই পর্ব টি বেশ গুরুত্বপূর্ণ কারণ এই পর্বে বেশ কিছু ট্যাগ এর লিস্ট দেয়া হয়েছে আর সামনে আমাদের এগুল নিয়েই আগাতে হবে।।
আজ আমরা শিখব এইচটিএমএল এর সাধারন ট্যাগ সমূহ এবং এগুলোর কাজের সাধারন বিবরণ সম্পর্কেঃ
যখন আপনি এইচটিএমএল ডকুমেন্ট উপর হতে নিচ , ডান হতে বামে সব সময় আপনি ট্যাগ দেখতে পাবেন। এটি এমন ভাবে প্রদর্শিত হবে যেন paragraph দেখতে paragraph এর মতো, টেবিল দেখতে টেবিল এর মতো।
এইচটিএমএল ট্যাগ এর মাধ্যমে আপনি web page এ আপনার পছন্দ মত বার্তা পাঠাতে পারেন।
HTML এ প্রোগ্রাম লেখার জন্য <> এবং </> দুইটা চিহ্ন এবং এর মধ্যে কিছু Word যেমন html, head, title, body ইত্যাদি Keyword ব্যবহার করা হয়। <> বা </> চিহ্ন এবং এর মাঝে লেখা একটি Keyword কে একত্রে ট্যাগ বলা হয়। যেমন <html> এবং </html> । <body> হল body শুরু ট্যাগ এবং </ body> হল body শেষ ট্যাগ।
ট্যাগ সমূহ | বর্ণনা |
<html> </html> | HTML ডকুমেন্ট নির্দেশ করে। |
<head></head> | প্রোগ্রামের head অংশ নির্দেশ করে । |
<title></title> | ডকুমেন্ট টাইটেল নির্দেশ করে। |
<body></body> | প্রোগ্রামের মূল content অংশ নির্দেশ করে। |
<a></a> | Anchor ট্যাগ। |
<abbr></abbr> | Abbreviation ট্যাগ। |
<b></b> | Bold টেক্সট নির্দেশ করে। |
<i></i> | Italic টেক্সট নির্দেশ করে। |
<big></big> | স্বাভাবিকের চেয়ে বড় টেক্সট নির্দেশ করে। |
<small></small> | স্বাভাবিকের চেয়ে ছোট টেক্সট নির্দেশ করে। |
<blockquote> </blockquote> | বিশেষ উদ্ধৃতি প্রকাশ করতে ব্যবহৃত হয়। |
<br / > | একটা লাইন ব্রেক তৈরি করে । |
<code></code> | কম্পিউটার কোড টেক্সট প্রকাশ করে। |
<table></table> | টেবিল তৈরিতে ব্যবহৃত হয়। |
<col></col> | টেবিলের কলাম তৈরিতে ব্যবহৃত হয়। |
<td></td> | টেবিলের সেল তৈরিতে ব্যবহৃত হয়। |
<tr></tr> | টেবিলের সারি তৈরিতে ব্যবহৃত হয়। |
<form></form> | ফরম তৈরিতে ব্যবহৃত হয়। |
<h1></h1> | হেডার ট্যাগ 1-6 পর্যন্ত হয়। |
<hr/> | সমান্তরাল রেখা তৈরি করে। |
<img/> | ছবি যুক্ত করতে ব্যবহৃত হয়। |
<input></input> | ফরমের ইনপুট ফিল্ড তৈরিতে ব্যবহৃত হয়। |
<li></li> | লিষ্ট তৈরিতে ব্যবহৃত হয়। |
<meta></meta> | Meta ট্যাগ |
<ol></ol> | অর্ডার লিষ্ট তৈরিতে ব্যবহৃত হয়। |
<ul></ul> | আনঅর্ডার লিষ্ট তৈরিতে ব্যবহৃত হয়। |
<p></p> | প্যারাগ্রাফ নির্দেশ করে |
<pre></pre> | pre-formatted টেক্সট তৈরিতে ব্যবহৃত হয়। |
<tt></tt> | টেলিটাইপ টেক্সট নির্দেশ করে। |
<strong></strong> | Strong টেক্সট নির্দেশ করে। |
<sub></sub> | subscripted text নির্দেশ করে। |
<sup></sup> | superscripted text নির্দেশ করে। |
উপরের ছবিতে দেখুন <body> ট্যাগ এর মধ্যে <p> ট্যাগ দেওয়া হয়েছে তাই ডিসপ্লে তে প্যারাগ্রাফ আকারের লেখা দেখাচ্ছে।
মনে রাখবেন যে html দিয়ে যাই করবেন তা সব ট্যাগ এর মধেই থাকবে।
ট্যাগ এর বর্ণ ছোট হাতের অক্ষর হওয়া উচিত। কিছু কিছু ট্যাগ আছে যাদের closing tag দেয়ার প্রয়োজন নেই। তারা কোন এলিমেন্ট ধারন করে না।সে ট্যাগ টি হচ্ছে line break tag এবং তা <br/> রুপে প্রকাশ করা হয়। যা বিশেষ ভাবে ব্যবহার করা হয়। অর্থাৎ একটি লাইন লেখা বাদ দিয়ে অপর লাইন হতে লেখা শুরু করার জন্য এ ট্যাগ টি ব্যবহার করা হয়।
নিচে একটি ওয়েব পেজ এর সুন্দরভাবে ব্যাখ্যা য়য়য়া হল, ঠাণ্ডা মাথাই বোঝার চেষ্টা করেনঃ
ছবি দেখে বুঝতে পেরেছেন নিশ্চয়ই কোন ট্যাগ এর কি কাজ??
এবার notpad টা ওপেন করে ট্যাগ গুল ঠিক রেখে লেখা গুলকে আপনার ইচ্ছা মত পরিবর্তন করে ব্রাউজার এ ওপেন করে দেখেন কোথাও প্রবলেম হচ্ছে কি না।।
Notpad এ কোড লেখার নিয়ম টা আরেকবার মনে করিয়ে দিঃ
সমস্ত কোড লেখা হয়ে গেলে file এ ক্লিক করে save as এ ক্লিক করে index.html নামে ফাইল টা desktop এ সেভ করুন এবার সেটা যে কোন ব্রাউজার এ ওপেন করে দেখুন ম্যাজিক ম্যাজিক খেলা !!!
(( কি মজা কি মজা আমি ওয়েব সাইট বানাতে পেরেছি))
ভাল লাগলে কমেন্ট করতে ভুলবেন না।।
আমি kazi Kowshik। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 6 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 22 টি টিউন ও 281 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
হুম,ডাব্লিউ৩ স্কুলস আর আপনার লিঙ্ক একসাথে দেখছি,ভালো হচ্ছে।তবে টেস্ট ওদের অখানেই করি
ভাই কি মজা ১টা সাইট বানালাম ।কিন্তু এখন এটা কিভাবে আমি আমার সাইটে ব্যাবহার বা আপলোড বা পাবলিশ করবো ।জানাবেন
![HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৩] :: লাইন ব্রেক এবং টেক্সট ফরমেটিং](https://dnc.techtunes.io/tDrive/tuner/mmkowshik2/143273/index.jpg "HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০৩] :: লাইন ব্রেক এবং টেক্সট ফরমেটিং")
![HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০১] :: সূচনা পর্ব](https://dnc.techtunes.io/tDrive/tuner/mmkowshik2/142224/chaintune_html-css-js-and-php-tranning-center-Copy.jpg "HTML, CSS, JS ও PHP ট্রেনিং সেন্টার [পর্ব-০১] :: সূচনা পর্ব")
সুন্দর হয়েছে। ধন্যবাদ শেয়ার করার জন্য।