এক নজরে HTML শিখুন
HTML এর পূর্ণরূপ Hyper Text Markup Language। এটা সবাই জানে। ১৯৯৩ সালে Tim Berners-Lee Html তৈরি করেন। ১৯৯০ সালে বার্নার্স-লি ব্রাউজার এবং সার্ভারের সফ্টওয়্যারে এইচটিএমএল (HTML) এর উল্লেখ করেন । সর্ব প্রথম এইচটিএমএল এর যে বর্ণনা সবার জন্য উন্মুক্ত হয়েছিল, তার নাম ছিল "HTML Tags", দেরিতে হলেও Mr. Lee এটাকে ১৯৯১ সালে সবার সাথে পরিচয় করিয়ে দিয়েছিলেন। এটাতে ১৮ টি এলিমেন্ট ছিল, যা আসলে এইচটিএমএল এর প্রথমিক এবং তুলনামূলক ডিজাইন ছিল। ১৯৯৩ সালে Html এর Html 1.0, ১৯৯৫ সালে Html 2.0, ১৯৯৭ সালে 3.2, 1999 সালে Html 4.01, ২০০০ সালে Xhtml, ২০১৪ সালে Html 5.0 version বের করা হয়। Html কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়। এটি মার্কআপ ল্যাঙ্গুয়েজ যা কতগুলো মার্কআপ ট্যাগ এর সমষ্টি। ব্রাউজারে Html কোড লোড হবার পর এই কোডগুলো তাদের নির্ধারিত কাজ করে। অর্থাৎ মার্কআপ ট্যাগগুলো ওয়েব পেজে কন্টেন্টের অবস্থান, প্রদর্শন ইত্যাদি নির্ধারণ করে। সহজভাবে কোন কন্টেন্ট কিভাবে প্রদর্শিত হবে,তা Html ট্যাগ গুলো ব্রাউজারকে বলে দেয়। বিভিন্ন কনটেন্ট যেমন টেক্সট, ইমেজ ইত্যাদি কে সুন্দরভাবে বিন্যাস করা, ডিজাইন করা এবং ওয়েব পেজ এর আউটলুক দেওয়ার জন্যই html ব্যবহার করা হয়।অর্থাৎ একটি ওয়েব পেজ তৈরি করা এবং বিভিন্ন ব্রাউজার যেমন মজিলা ফায়ারফক্স, ইন্টারনেট এক্সপ্লোরার ইত্যাদি তে প্রদর্শন করানো। চলুন এখন Html tag গুলোর সাথে পরিচিত হয়। আপনি যদি একটু আকটু Html পারেন তাহলে tag গুলো বুঝতে পারবেন।
এই tag গুলো একটি Html File এ একবারি ব্যাবহার করা হয়।
1. <!DOCTYPE>
2. <html>
3. <head>
4. <title>
5. <style>
6. <base>
7. <body>
8. <header>
9. <h1>
10. <main>
11. <footer>
12. <noscript>
এই tag গুলো একটি page এ একবারই ব্যবহার করা হয়। পত্তেক টি html file এ এই tag গুলো থাকা খুবি গুরুত্বপূর্ণ।
Html ফাইল এ সব থেকে বেশি কাজ করা হয় Text নিয়ে। নিচের ট্যাগ গুলো Text ফরমেটিং করতে ব্যবহৃত হয়।
1. <small>
2. <marquee>
3. <ins>
4. <u>
5. <abbr>
6. <del>
7. <s>
8. <strong>
9. <b>
10. <sub>
11. <sup>
12. <ruby>
13. <rt>
14. <rp>
15. <em>
16. <i>
i এবং em ট্যাগ ব্যবহার ছাড়া যে ট্যাগ গুলো ব্যবহার করলে লেখা ইটালিক হয়।
17. <dft>
18. <cite>
19. <address>
Text Preformatting করতে এই 5 টি tag ব্যাবহার করা হয়
20. <pre>
21. <kbd>
22. <code>
23. <var>
24. <samp>
যেকোনো লেখাকে preformatted করতে pre tag use করা হয়। কম্পিউটারে কিবোর্ড কমান্ড দেখানোর জন্য kbd ট্যাগ ব্যবহার করা হয়। আমরা যদি কম্পিউটার প্রোগ্রাম কে ওয়েব পেজে দেখাতে চাই তাহলে code tag এবং ভেরিয়েবল কে বোঝাতে var tag ব্যবহার করব। কম্পিউটার প্রোগ্রামের সিম্পল আউটপুট দেখানোর জন্য samp tag ব্যবহার করব। এটাই স্টান্ডার। গুরুত্বপূর্ণ আরো কিছু tag নিচে দেয়া হল। এগুলো article ও blog page এ বেশি ব্যাবহারিত হয়।
25. <article>
26. <details>
27. <summary>
28. <p>
29. <span>
30. <h1> to <h1>
31. <b>
32. <wbr>
33. <q>
34. <blockqote>
35. <mark>
36. <hr>
Link, List & Menu তৈরি করার জন্য এই Tag গুলো ব্যাবহার করা হয়।
1. <a>
2. <link>
3. <dl>
4. <dt>
5. <dd>
6. <ul>
7. <ol>
8. <li>
9. <data>
10. <nav>
11. <menu>
12. <menuitem>
Login, Registration, Email Send সহ বিভিন্ন ধরনের Form আমাদের তৈরি করতে হবে ওয়েবপেজে। সেজন্য আমরা এই ট্যাগ গুলো ব্যবহার করব। এগুলো খুবই গুরুত্বপূর্ণ ট্যাগ।
1. <form>
2. <label>
3. <input>
4. <textarea>
5. <fieldset>
6. <legend>
7. <select>
8. <optgroup>
9. <option>
10. <button>
11. <datalist>
12. <output>
13. <keyzen>
fieldset ও legend ছাড়া এখানে সকল ট্যাগ খুবই গুরুত্বপূর্ণ। সবথেকে বেশি গুরুত্বপূর্ণ tag টি হলো input. input tag এর type attribute এর value গুলো হলো checkbox, radio, range, color, image, file, url, text, number, tel, email, password, time, date, datetime-local, week, month, search, hidden, button, reset ও submit. এই value গুলো খুবই গুরুত্বপূর্ণ। type attribute এর value জন্যই এই tag এত গুরুত্বপূর্ণ হয়েছে।
ওয়েবপেজে আমাদের বিভিন্ন সময় টেবিলের প্রয়োজন পড়বে। নিচের ট্যাগ গুলো টেবিল তৈরিতে ব্যবহৃত হয়।
1. <table>
2. <caption>
3. <colgroup>
4. <col>
5. <thead>
6. <tr>
7. <th>
8. <tbody>
9. <td>
10. <tfoot>
table, tr, th ও td এই tag এগুলো ছাড়া উপরের tag গুলো তেমন improvement না। যদি খুবই গুরুত্বপূর্ণ টেবিল তৈরি করতে হয় তাহলে উপরের সবগুলো ট্যাগ ব্যবহার করা ভালো।
ওয়েবপেজে বিভিন্ন ধরনের File Add করার জন্য এই Tag গুলো ব্যবহার করা হয়।
1. <video>
2.<track>
3. <audio>
4. <picture>
5. <img>
6. <source>
7. <iframe>
8. <embed> --- এই tag use করবেন না
9. <object> --- এই tag use করবেন না
10. <map>
11. <area>
12. <canvas>
13. <svg>
14. <figcaption>
15.<figure>
16. <script>
যে tag গুলোর কথা এখনো বলা হয়নি।
1. <bdi>
2. <bdo>
3. <progress>
4. <time>
5. <div>
6. <section>
7. <aside>
8. <parem>
9. <dialog>
10. <template>
html5 থেকে 12 টি tag বাদ দেওয়া হয়েছে। সেগুলো হলো <acronym>, <applet>, <basefont>, <big>, <dir>, <center>, <font>, <frame>, <frameset>, <noframes>, <strike> ও <tt>. এই tag গুলো ব্যবহার করবেন না।
এখনো meta tag এর কথা কিছুই বলা হয় নাই নিচে কিছু meta tag দেওয়া হলো।
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
এখানে বলা সবগুলো tag এর example w3school এ দেওয়া আছে ৪-৫ ছাড়া। w3school থেকে এই tag গুলো attribute পড়ে নিয়েন। w3school এর এক্সাম্পল গুলো দেখলে ইনশাল্লাহ আপনার html শেখা হয়ে যাবে।
{Hey, আমি এখন Html Programr😂}
লেখায় কোথাও ভুল হলে ক্ষমা করে দেবেন 🙏
0 মন্তব্যসমূহ