অধ্যায়~৪ঃ HTML কোডিং এর মাধ্যমে 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>


</head>


<body>


<h1> Hello Everyone!!!</h1>

<p> We are an education based website which provides ICT Lectures and M.C.Q solutions for SSC (Class 9-10) & HSC (Class 11-12) students.</p>
    
</body>

</html>

এরপর File টি  যেকোনো web browser (যেমনঃ Firefox, Google Chrome, UC Browser etc.) ব্যবহার করে open করবো

Webpage টি নিম্নরূপে show  হবেঃ

HTML Code Display


উপরের code ও চিত্র দু'টি লক্ষ্য করি, আমরা <head></head> এর মধ্যে আরো একটি tag ব্যবহার করেছি যেটা <title>tag.  এই <title> </title> এর মাঝে লিখেছি My First Website। এখন চিত্রে একদম উপরে Tab এ লক্ষ্য করুন এই My First Website লেখাটি প্রদর্শিত হচ্ছে। এই <title> </title> এর মাঝে আমরা যা কিছুই লিখবো তা উপরে Tab এ প্রদর্শিত হবে।


এখন আসা যাক <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 তৈরি করলাম।