HTML (এইচটিএমএল) কী?
HTML এর সম্পূর্ণরূপ হলো Hypertext Markup Language। যে কোনো ওয়েবসাইট / ওয়েব পেইজ গঠন করার জন্য প্রাথমিক যে কোডিং ভাষা ব্যবহার করা হয়, সেটা হলো HTML। আমরা একটি ওয়েবসাইট / ওয়েব পেইজ এ যা কিছু দেখতে পাই তা হলো ওই ওয়েবসাইট / ওয়েব পেইজ এর content। এই content গুলো ওয়েবসাইট এ সঠিকভাবে দেখানোর জন্য HTML এ বিভিন্ন command ব্যবহার করা হয়।এই command গুলোকে বলা হয় HTML tag. HTML এ অনেক ধরনের tag আছে। এর এক একটা tag এর কাজ এক এক রকম। কোন tag লেখাকে bold করে কোন টা আবার italic করে কোনটা আবার লেখাকে page এর center এ আনে। এই HTML tag গুলোর মাঝে আমরা যে data/image/video রাখব browser সেটা যেভাবে command দেওয়া আছে, সেভাবে display করবে।So HTML file এর কাজ হল বিভিন্ন browser কে নির্দেশ দেওয়া যে একটা web page অনলাইনে কিভাবে প্রদশর্ন হবে।
HTML tag কিভাবে লিখতে হয়?
প্রতিটা HTML tag শুরু হবে একটা < দিয়ে মধ্যে থাকবে tag এর নাম & শেষে আবার >
যেমনঃ p একটা tag এর নাম (p দ্বারা paragraph বোঝানো হয়)। তাহলে আমরা এটাকে লেখব এইভাবেঃ <p>
বেশির ভাগ HTML tag জোড়ায় জোড়ায় থাকে। প্রথম অংশ কে বলে starting tag & শেষ অংশ কে বলে closing tag. Closing tag এর প্রথম < এর পর পর একটা / চিহ্ন use করতে হবে।
যেমনঃ p tag এর starting & closing হলঃ <p> </p>
এই দুই জোড়ার মাঝে আমরা আমাদের দরকারি লেখা/ ছবি ইত্যাদি যা যা website এর visitor কে দেখাতে চাই তা রাখব।
যেমনঃ <p> ICT Tutorial is an online based ICT learning institute for SSC & HSC students of Bangladesh. We provide quality ICT training for students to achieve good result in exams. After comlpetion of course we take model tests also.</p>
কিছু HTML tag পরিচিতিঃ
Opening Tag | Closing Tag | Description |
<!-- | --> | Comment. Anything between these tags is not displayed on the screen. This is useful for making notes to yourself or to others who may view the source code of the web page. |
<html> | </html> | Opens and closes an HTML document |
<head> | </head> | The first of two main sections of an HTML document. The <head> section is used to provide information about the document for use primarily by search engines and browsers. |
<title> | </title> | The title of document. This element is nested inside the <head> section. In HTML5, this is the only required tag other than the DOCTYPE declaration. |
<body> | </body> | The second of two main sections of an HTML document. The <body> section contains all the content of the web page. |
<h1> to <h6> | </h1>to</h6> | Headings. H1 is the main heading, H2 is secondary, etc. |
<p> | </p> | Paragraph |
<a href = " "> | </a> | Link |
<b> | </b> | Makes the contained text bold. |
<ol> | </ol> | Ordered (numbered) list |
<ul> | </ul> | Unordered (bulleted) list |
<li> | </li> | List item, must be nested inside a list element such as a <ol> or <ul> |
<table> | </table> | Adds a table |
<tr> | </tr> | Table row (start & end). |
<th> | </th> | When creating a table to display data, use this tag to differentiate the first row or column of cells as heading cells for all the other cells in the same column or row. Browsers typically display this element bold and centered within the table cell. |
<td> | </td> | Table data cell. |
Empty (Non-Container) Tags
Tag | Description |
<br /> | Line break. |
<img src =" " alt="alternate text" /> | Inserts an image into a web page. |
Text Editor
Text Editor হলো যে file এ আমরা HTML কোড লিখবো। অনেক ধরনের Text Editor আছে যেগুলোতে HTML কোড execute হয়। আমরা এখানে Text Editor হিসেবে Notepad ব্যবহার করবো। সাধারণত Notepad Text file এর এক্সটেনশন হচ্ছে .txt। এই .txt এক্সটেনশন পরিবর্তন করে .html করা হলে সেটাই হবে HTML file।
উপরের চিত্রটি লক্ষ্য করি, যখন আমরা HTML file টি Save করতে যাবো তখন অবশ্যই আমাদেরকে Save as type থেকে All Files বেছে নিতে হবে (ছবিতে Green arrow দ্বারা চিহ্নিত) এবং File name এর এক্সটেনশন .html লিখতে হবে (ছবিতে Red arrow দ্বারা চিহ্নিত). যদি অন্য কোনো এক্সটেনশন থাকে, তবে সেটি ডিলিট করে .html লিখতে হবে। তারপর Save বাটনে ক্লিক করতে হবে।
ওয়েবসাইট / ওয়েবপেইজ তৈরির প্রাথমিক ধাপঃ
যেকোন HTML file শুরু হবে <html> দিয়ে ও শেষ হবে </html> দিয়ে। এই tag দু'টির মাঝে একটি Website/Web page তৈরিতে প্রয়োজনীয় সব কিছু থাকবে।প্রথমেই <html> ও </html> এর মাঝে আমরা আরো দুইটা tag use করব। একটা হল <head> </head> আরেকটা হল <body> </body>.
So total structure টা দড়াবে এই রকমঃ
<html>
<head>
…………………
…………………
…………………
…………………
</head>
<body>
এই <body>to </body> tag এর মাঝখানে web page এর সকল content (text/image/video) থাকবে। |
</body>
</html>
এখন আমরা নিচের কোডটি Notepad এ লিখবো এবং HTML File হিসেবে Save করবো।
Code:
<html>
<head>
<title> My First Website </title>
<body>
<h1> Hello Everyone!!!</h1>
<p> We are an educational organisation that provides ICT training for all. Our trainers are experienced and hardworking. Our courses are affordable. Anyone can attend our courses to enhance their skills. </p>
</body>
</html>
এরপর File টি যেকোনো web browser (যেমনঃ Firefox, Google Chrome, UC Browser etc.) ব্যবহার করে open করবো
Webpage টি নিম্নরূপে show হবেঃ
উপরের code ও চিত্র দু'টি লক্ষ্য করি, আমরা <head></head> এর মধ্যে আরো একটি tag ব্যবহার করেছি যেটা <title>tag. এই <title> </title> এর মাঝে লিখেছি My First Website। এখন চিত্রে একদম উপরে Tab এ লক্ষ্য করুন এই My First Website লেখাটি প্রদর্শিত হচ্ছে। এই <title> </title> এর মাঝে আমরা যা কিছুই লিখবো তা উপরে Tab এ প্রদর্শিত হবে।
এখন আমরা নিচের কোডটি Notepad এ লিখবো এবং HTML File হিসেবে Save করবো।
Code:
<html>
<head>
<title> My First Website </title>
</head>
<body>
<h1> Hello Everyone!!!</h1>
<p> We are an educational organisation that provides ICT training for all. Our trainers are experienced and hardworking. Our courses are affordable. Anyone can attend our courses to enhance their skills. </p>
</body>
</html>
এরপর File টি যেকোনো web browser (যেমনঃ Firefox, Google Chrome, UC Browser etc.) ব্যবহার করে open করবো
Webpage টি নিম্নরূপে show হবেঃ
এখন আসা যাক <body> tag এ,<body> </body> এর মধ্যে যা যা লিখবো, তার সবকিছু ভিজিটরগণ website এ দেখতে পারবে। code এ লক্ষ্য করুন আমি <body> ও </body> এর মাঝে <h1> নামক একটি tag লিখেছি। এই h1 দিয়ে বোঝানো হয়েছে Heading (HTML এ Heading ৬ ধরণের হয় : h1. h2, h3,h4,h5,h6)। <h1> ও </h1> এর মাঝে "Hello Everyone!!!" লিখেছি। উপরের চিত্রে দেখুন কিভাবে লেখাটি ওয়েবসাইটে প্রদর্শিত হচ্ছে। ঠিক একইভাবে আমি একটি ছোট paragraph লিখেছি <p> ও </p> এর মাঝে।
এভাবেই আমরা প্রাথমিকভাবে একটি Web page তৈরি করলাম।