একই ডোমেইনের অধীনে একাধিক ওয়েবপেইজ এর সমষ্টিকে ওয়েবসাইট বলে। একটি ওয়েবসাইট এ বেশকিছু ওয়েবপেইজ থাকে। ওয়েবসাইটের স্বতন্ত্র কোন পেইজকে ওয়েবপেইজ বলে। একটি ওয়েবসাইট এ ঢুকলে প্রথমে যে পেইজটি প্রদর্শিত হয় তাকে হোমপেইজ বলে।

ওয়েবসাইট এর সুবিধা:-
১। ঘরে বসেই ভর্তির আবেদন করা যায়।
২। প্রয়োজনীয় ফাইল ডাউনলোড করা যায়।
৩। ঘরে বসেই অনলাইন এ কেনাকাটা করা যায়।
৪। অনলাইন এ পড়ালেখা করা যায়।
৫। একে অপরের সাথে সহজেই যোগাযোগ করা যায়।
৬। সহজেই যেকোন তথ্য জানা যায়।

ওয়েবসাইটের এর প্রকারভেদ

স্ট্যাটিক ও ডায়নামিক ওয়েবসাইটের মধ্যে পার্থক্য:

অবস্থানের উপর ভিত্তি করে ওয়েবসাইট ২ ধরণের:
১। লোকাল ওয়েবসাইট: নিজস্ব কম্পিউটারে ওয়েবপেইজগুলো সংরক্ষণ করা হলে তাকে লোকাল ওয়েবসাইট বলে।
২। রিমোট ওয়েবসাইট: কোন সার্ভারে ওয়েবপেইজগুলো সংরক্ষণ করা হলে তাকে রিমোট ওয়েবসাইট বলে।

সার্চ ইঞ্জিন হচ্ছে এমন একটি টুল যার মাধ্যমে ইন্টারনেটের অজস্র তথ্য থেকে যেকোনো তথ্য সহজে খুঁজে বের করা যায়। সবচেয়ে জনপ্রিয় সার্চ ইঞ্জিনের নাম হচ্ছে গুগল। গুগল এর প্রতিষ্ঠাতা ল্যারি পেইজ। বাংলাদেশের তৈরি সার্চ ইঞ্জিনের নাম হচ্ছে পিপিলীকা।

• গুগল - Google
• ইয়াহু - Yahoo
• বিং - Bing
• বাইদু - Baidu

ইন্টারনেটে সংযুক্ত প্রতিটি যন্ত্র (যেমন: কম্পিউটার মোবাইল ফোন ইত্যাদি) কে স্বতন্ত্রভাবে চিহ্নিত করার করার জন্য একটি বিশেষ নম্বর ব্যবহার করা হয় যাকে আইপি অ্যাড্রেস বলা হয়। আইপি অ্যাড্রেস হচ্ছে নির্দিষ্ট একটি যন্ত্রের ঠিকানা।

IPV4 আইপি অ্যাড্রেসকে প্রকাশের জন্য চারটি অকটেট বা ৩২ বিট প্রয়োজন। প্রতিটি অকটেট ডট দ্বারা আলাদা করা হয়। আইপি অ্যাড্রেস এর প্রথম দুটি অকটেট নেটওয়ার্ক আইডি এবং বাকি দুইটি অকটেট হোস্ট আইডি প্রকাশ করে। যেমন:-

উপরের আইপি অ্যাড্রেস এর প্রথম দুটি দুটি অকটেট নেটওয়ার্ক আইডি এবং বাকি দুইটি অকটেট হোস্ট আইডি প্রকাশ করে। অপরদিকে IPV6 আইপি অ্যাড্রেসকে প্রকাশের জন্য ১২৮ বিট প্রয়োজন।

আইপি অ্যাড্রেস মনে রাখা কঠিন। আইপি অ্যাড্রেসকে সহজে মনে রাখার জন্য ডোমেইন ব্যবহার করা হয়। যেমন: 23.227.186.26 এর চেয়ে www.ictclass.net মনে রাখা বেশী সহজ।

ডোমেইন নেম হচ্ছে আইপি অ্যাড্রেস এর পরিবর্তে ব্যবহৃত অদ্বিতীয় আলফানিউমেরিক অ্যাড্রেস। আইপি অ্যাড্রেস মনে রাখা কঠিন। আইপি অ্যাড্রেসকে সহজে মনে রাখার জন্য ডোমেইন ব্যবহার করা হয়। যেমন: 23.227.186.26 এর চেয়ে www.ictclass.net মনে রাখা বেশী সহজ।

এখানে ictclass.net হচ্ছে একটি ডোমেইন। ictclass অংশটুকু হচ্ছে নাম এবং .net অংশটুকু হচ্ছে ডোমেইনের প্রকৃতি। ডোমেইন নেমের পরের অংশটুকুকে টপ লেভেল ডোমেইন (TLD) ও বলা হয়।

আবার, টপ লেভেল ডোমেইনের পর কান্ট্রি লেভেল ডোমেইন ও থাকে যেমন: www.bangladesh.gov.bd এখানে .bd দ্বারা বাংলাদেশের ডোমেইন বোঝানো হয়েছে।

ওয়েবসাইট এর এক পেইজ থেকে অন্য পেইজ এ গমন করাকে ওয়েব ব্রাউজিং বলে। ওয়েবসাইটের ব্রাউজ করার জন্য যে সফটওয়্যার ব্যবহার করা হয় তাকে ওয়েব ব্রাউজার বলে।

• Mozilla Firefox (মজিলা ফায়ারফক্স)
• Google Chrome (গুগল ক্রোম)
• Opera (অপেরা)
• Safari (সাফারি)
• Internet Explorer (ইন্টারনেট এক্সপ্লোরার)

একটি ওয়েবসাইটে পেইজগুলো কিভাবে সাজানো থাকবে সেটাই হচ্ছে ওয়েবসাইট কাঠামো।
ওয়েবসাইটের কাঠামো ৪ ধরনের:
১। হায়ারার্কিক্যাল বা ট্রি কাঠামো
২। নেটওয়ার্ক কাঠামো বা ওয়েব লিংক্ড কাঠামো
৩। লিনিয়ার কাঠামো বা সিকুয়েন্সিয়াল কাঠামো
৪। কম্বিনেশন কাঠামো বা মিক্স স্ট্রাকচার কাঠামো

হায়ারকিক্যাল বা ট্রি কাঠামো

হায়ারার্কিক্যাল বা ট্রি কাঠামোতে ওয়েবপেইজ গুলো শাখা-প্রশাখায় সাজানো থাকে। হোম পেইজ এ সাবমেনু এবং অন্যান্য পেইজের লিংক থাকে। সাবমেনু থেকে অন্যান্য পেইজ এ যাওয়া যায়। ওয়েবসাইট কাঠামোর মধ্যে হায়ারকিক্যাল বা ট্রি কাঠামো সবচেয়ে জনপ্রিয়। স্কুল, কলেজ, বিশ্ববিদ্যালয় এবং বিভিন্ন প্রতিষ্ঠানে এই ধরনের ওয়েবসাইট তৈরি করা হয়।

নেটওয়ার্ক কাঠামো

নেটওয়ার্ক কাঠামো এর ওয়েবসাইটে প্রত্যেকটি পেইজের সাথে প্রত্যেকটি পেইজের লিংক থাকে। এই কাঠামোতে যেকোনো পেইজ থেকে হ‌োম পেইজ এ আসা যায়। নেটওয়ার্ক কাঠামোকে ওয়েব লিংকড কাঠামো বলা হয়ে থাকে। এ ধরনের ওয়েবসাইটে ফ্রেমের মধ্যে অন্যান্য পেইজের লিংকগুলো মেনু আকারে থাকে।

লিনিয়ার কাঠামো

লিনিয়ার ওয়েবপেইজ এ ওয়েবসাইটের পেইজগুলো নির্দিষ্ট ক্রামানুসারে সাজানো থাকে। অর্থাৎ, লিনিয়ার কাঠামোতে ওয়েবপেইজগুলো একের পর এক সাজানো থাকে। তাই, এই ধরনের কাঠামোকে সিকুয়েন্সিয়াল কাঠামোও বলা হয়। এই ধরনের পেইজগুলোতে সাধারণত Next, Prev, First, Last লিংক থাকে। ওয়েবপেইজের সংখ্যা কম হলে এই ধরনের কাঠামো ব্যবহার করা হয়।

কম্বিনেশন কাঠামো

একাধিক কাঠামো ব্যবহার করে ওয়েবসাইট ডিজাইন করা হলে তাকে কম্বিনেশন কাঠামো বলে। এ ধরনের কাঠামোতে একাধিক কাঠামো ব্যবহার করায় ওয়েবসাইটটি সুন্দর ও আকর্ষণীয় হয়। এই ধরনের কাঠামোকে হাইব্রিড বা মিক্স স্ট্রাকচার কাঠামো বলা হয়ে থাকে।

এইচটিএমএল এর পূর্ণরূপ হচ্ছে Hypertext Markup Language. এটি কোন প্রোগ্রামিং ভাষা নয়। এটি একটি মার্কআপ ল্যাঙ্গুয়েজ। টিম বার্নার্স লি এইচটিএমএল এর জনক। এইচটিএমএল দিয়ে ওয়েবপেজ ডিজাইন করা হয়। এইচটিএমএল এর সর্বশেষ সংস্করণ হচ্ছে HTML5. এইচটিএমএল কোড কেস-সেনসিটিভ নয়। অর্থাৎ, এইচটিএমএল কোড ছোট হাতের অক্ষরে লিখলেও কাজ করে এবং বড় হাতের অক্ষরে লিখলেও কাজ করে। তবে, এইচটিএমএল ট্যাগগুলো ছোট হাতের অক্ষরে লেখা উচিত। এইচটএমএল নিয়ে কাজ করতে হলে প্রথমে একটি এইচটিএম ফাইল তৈরি করতে হবে। ফাইলের নাম যেকোন কিছু দেওয়া যেতে পারে। এইচটিএমএল ফাইলের এক্সটেনশন .html বা .htm

এইচটিএমএল কোড লেখার জন্য বিভিন্ন টেক্সট এডিটর রয়েছে। কয়েকটি জনপ্রিয় টেক্সট এডিটর এর নাম হচ্ছে:

• নোটপ্যাড (Notepad)
• নোটপ্যাড প্লাস প্লাস (Notepad++)
• সাবলাইম টেক্সট (Sublime Text)
• ব্র্যাকেটস (Brackets) ইত্যাদি

এইচটিএমএল ব্যবহারের সুবিধা:
১। এইচটিএমএল সব ধরনের ব্রাউজারে সমর্থন করে।
২। এইচটিএমএল ব্যবহার করা সহজ।
৩। এইচটিএমএল সম্পূর্ণ বিনামূল্যে ব্যবহার করা যায়।
৪। অতিরিক্ত সফটওয়্যার ক্রয় করার প্রয়োজন হয় না।
৫। সার্চ ইন্জিন ফ্রেন্ডলী ওয়েবসাইট তৈরি করা যায়।
এইচটিএমএল এর অসুবিধা:
১। এইচটিএমএল এ প্রচুর কোড লিখতে হয়।
২। এইচটিএমএল এর সাহায্যে শুধুমাত্র স্ট্যাটিক ওয়েব সাইট তৈরি করা সম্ভব।
৩। অতিরিক্ত কোড জটিলতার সৃষ্টি করে।

একটি ওয়েবসাইটে বিভিন্ন টেক্সট, হেডিং, ছবি, অডিও, ভিডিও, টেবিল ইত্যাদি থাকতে পারে। এগুলোকে বলা হয় এলিমেন্ট। এইচটিএমএল এলিমেন্ট লেখার জন্য এইচটিএমএল ট্যাগ ব্যবহার করা হয়।
এইচটিএমএল ট্যাগ হলো একটি কিওয়ার্ড যা একজোড়া অ্যাঙ্গেল ব্র্যাকেট (<>) দ্বারা বেষ্টিত থাকে।
এইচটিএমএল ট্যাগ সাধারণত জোড়ায় জোড়ায় থাকে। ট্যাগকে অনেকটা ব্র্যাকেট বা বন্ধনীর সাথো তুলনা করা যেতে পারে। ট্যাগ এর প্রথম অংশটি হচ্ছে Opening Tag এবং Closing Tag । Opening Tag এবং Closing Tag এর ভিতরে যা থাকে তাকে বলা হয় কন্টেন্ট। ক্লোজিং ট্যাগ ওপেনিং ট্যাগ এর মতই। শুধু একটি ফরওয়ার্ড স্ল্যাশ ( / ) দিতে হয়। অর্থাৎ ট্যাগ এর গঠন হচ্ছে:-

<tagname> Content </tagname>

এইচটিএমএল নেস্টেড এলিমেন্ট

এইচটিএমএল এ একটি এলিমেন্ট এর ভিতরে এক বা একাধিক এলিমেন্ট থাকতে পারে। এটাকে বলা হয় এইচটিএমএল নেস্টেড এলিমেন্ট। যেমন:

<b> <i> I am a student. </i> </b>

তবে, এভাবে লিখলে ভুল হবে:

<b> <i> I am a student. </b> </i>

‌এইচটিএমএল এম্পটি এলিমেন্ট

এইচটিএমএল কিছু এলিমেন্ট আছে যাদের মধ্যে কোন কন্টেন্ট নেই তাদের এম্পটি এলিমেন্ট বলে। এসব ট্যাগের শুধুমাত্র ওপেনিং ট্যাগ আছে ক্লোজিং ট্যাগ নেই। যেমন: br, hr, input, img ট্যাগগুলোর শুধুমাত্র ওপেনিং ট্যাগ আছে কিন্তু কোন ক্লোজিং ট্যাগ নেই। এই ট্যাগগুলো নিয়ে পরবর্তীতে আলোচনা করা হয়েছে।

   <b> Bangladesh </b>  

   <i> Bangladesh </i>  

   <u> Bangladesh </u>  

   a<sup>2</sup>  

   a<sub>2</sub>  

   <del> Rakib </del>  

প্রতিটি এইচটিএমএল ডকুমেন্ট এ ৪ টি মৌলিক ট্যাগ থাকে। এগুলো হচ্ছে: html, head, title, body প্রতিটি এইচটিএমএল ডকুমেন্ট এই ৪ টি মৌলিক ট্যাগ থাকে।

 
<!DOCTYPE html>
<html>
  <head>
     <title> HTML Document </title>
  </head>
  <body>

  </body>
</html>
 

DOCTYPE html: এটি ব্যবহার করা হয় ডকুমেন্ট ধরন প্রকাশ করার জন্য। HTML5 এর স্ট্যান্ডার্ড অনুসরণ করার জন্য এটি লেখা হয়েছে। তবে, এটা না লিখলেও এইচটিএমএল ডকুমন্ট কাজ করবে। তবে, এটা লেখা জরুরি।
html ট্যাগ: প্রত্যেক এইচটিএমএল ডকুমেন্ট এর শুরুতে <html> এবং শেষে এই ট্যাগের ক্লোজিং ট্যাগ </html> দিতে হয়। html ট্যাগ এর ভিতরে ২ টি অংশ। একটি head এবং অপরটি body ট্যাগ।
head ট্যাগ: ওয়েবসাইট এর title, link, meta ইত্যাদি ট্যাগ head এর ভিতরে থাকে।
title ট্যাগ: টাইটেল ট্যাগ দ্বারা ওয়েবপেজের শিরোনাম বোঝায়। টাইটেল ট্যাগ এর ভিতরে যা লেখা হয় তা ব্রাউজারের টাইটেল বার এ প্রদর্শিত হয়।
body ট্যাগ: একটি ওয়েবসাইট এর সমস্ত লেখা, অডিও, ভিডিও ইত্যাদি কন্টেন্ট body ট্যাগ এর থাকে।
একটি লেখা বোল্ড করতে এইচটিএমএল কোড লিখতে:

 
<!DOCTYPE html>
<html>
  <head>
     <title> HTML Bold </title>
  </head>
  <body>
     <b> Bangladesh </b>
  </body>
</html>
 

এইচটিএমএল এ অতিরিক্ত তথ্য যুক্ত করতে এইচটিএমএল অ্যাট্রিবিউট ব্যবহার করা হয়। অ্যাট্রিবিউট ওপেনিং ট্যাগ এ ব্যবহার করা হয়। প্রথমে অ্যাট্রিবিউট এর নাম দিতে হয়। এরপর একটি সমান চিহ্ন (=) দিয়ে (" ") এর ভিতরে অ্যাট্রিবিউট এর ভ্যালু দিতে হয়।

  <tagname attributename="value"> Content </tagname>  

  <p style="color: red;"> I am a student. </p>  

আউটপুটঃ

এছাড়া align অ্যাট্রিবিউট এর মাধ্যমে লেখা বামে, ডানে ও মাঝখানে নেওয়া যায়।

উদাহরণঃ

  <p align="center"> I am a student. </p>  

আউটপুটঃ

উদাহরণঃ

  <p align="right"> I am a student. </p>  

আউটপুটঃ

এইচটিএমএল ফরমেটিং বলতে বোঝায় লেখাকে (টেক্সট) সঠিক আকার আকৃতি প্রদান করে ওয়েবপেইজ ফুটিয়ে তোলা। যেমন: এইচটিএমএল এ বোল্ড, ইটালিক, আন্ডারলাইন, বিভিন্ন ধরনের হেডিং ইত্যাদি ব্যবহার করে লেখাকে ফুটিয়ে তোলা যায়।

এইচটিএমএল প্যারাগ্রাফ এর মাধ্যমে আমরা একটি বড় লেখাকে কয়েকটি অনুচ্ছেদে ভাগ করে ফেলতে পারি । অনুচ্ছেদে ভাগ করার জন্য p ট্যাগ ব্যবহার করা হয় ।

 <p>The full form of HTML is Hypertext Markup Language. </p>
<p> HTML is not a programming language. It is a Markup Language. </p>
<p> If we want to learn Web Design and Development, we have to learn HTML. </p>  

এইচটিএমএল লাইন ব্রেক এর সাহায্যে আমরা লাইনকে ভেঙ্গে ফেলতে পারি। লাইন ব্রেক ব্যবহার করার জন্য br ট্যাগ ব্যবহার করা হয়। br একটি এম্পটি এলিমেন্ট অর্থাৎ, এই ট্যাগ এর শুধু ওপেনিং ট্যাগ আছে কোন ক্লোজিং ট্যাগ নেই।

  HTML is a <br> markup <br> language.  

আউটপুটঃ

ওয়েবসাইট এ লেখার শিরোনাম দেওয়ার জন্য এইচটিএমএল হেডিং ট্যাগ ব্যবহার করা হয়। এইচটিএমএল এ ছয়টি হেডিং ট্যাগ রয়েছে, h1 – h6 পর্যন্ত। সবচেয়ে বড় হেডিং হচ্ছে h1 এবং সবচেয়ে ছোট হেডিং হচ্ছে h6. এখানে ছয় ধরনের হেডিং এর উদাহরণ দেওয়া হল।

এইচটিএমএল কোডঃ

<h1> I am a student. </h1>
<h2> I am a student. </h2>
<h3> I am a student. </h3>
<h4> I am a student. </h4>
<h5> I am a student. </h5>
<h6> I am a student. </h6> 

আউটপুটঃ

font ট্যাগ এ face, size এবং color অ্যাট্রিবিউট ব্যবহার করা যায়।

face অ্যাট্রিবিউট এর ব্যবহার

ওয়েবসাইট এ বাংলা লেখার জন্য font ট্যাগ ব্যবহার করতে হয় এবং font ট্যাগ এ face অ্যাট্রিবিউট ব্যবহার করতে হয়। face অ্যাট্রিবিউট এ ফন্ট এর নাম দিতে হবে। বাংলা লেখার জন্য face অ্যাট্রিবিউট এ SutonnyMJ ব্যবহার করা হয়।

এইচটিএমএল কোডঃ

  <font face="SutonnyMJ"> বাংলাদেশ </font>  

size অ্যাট্রিবিউট এর ব্যবহার

font ট্যাগ এ size অ্যাট্রিবিউট ব্যবহার করে লেখা বড় কিংবা ছোট করা যায়।

এইচটিএমএল কোডঃ

 <font size="25"> ICTClass </font>  

color অ্যাট্রিবিউট এর ব্যবহার

font ট্যাগ এ color অ্যাট্রিবিউট ব্যবহার করে লেখার কালার নির্ধারণ করা যায় ।

এইচটিএমএল কোডঃ

 <font color="green"> ICTClass </font>  

ওয়েবসাইটে বাংলা লেখা

ওয়েবসাইটে বাংলা লেখার জন্য font ট্যাগ এ face অ্যাট্রিবিউট ব্যবহার করতে হয়। তবে, এইচটিএমএল এর সর্বশেষ সংস্করণ HTML5 অনুযায়ী font ব্যবহার করা উচিত নয়।

HTML5 এ যেসব ট্যাগ বাদ দেওয়া হয়েছে তার লিস্ট এই ঠিকানায় পাওয়া যাবে।

HTML5 অনুযায়ী ওয়েবসাইটে বাংলা লেখার জন্য নিচের মত এইচটিএমএল কোড লিখতে হবে:-

 
<!DOCTYPE html>
<html lang="bn-BD">
  <head>
     <title> Webpage </title>
     <meta charset="utf-8">
  </head>
  <body>
     <p> Bangladesh </p>
  </body>
</html>
 

আউটপুট

ব্যাখা: সব ধরনের কম্পিউটারে বাংলা প্রদর্শনের জন্য html ট্যাগে lang অ্যাট্রিবিউট এবং Meta ট্যাগে charset অ্যাট্রিবিউট ব্যবহার করতে হবে। charset এর ভ্যালু utf-8 যা একটি জনপ্রিয় ইউনিকোড ক্যারেক্টার সেট।

ওয়েবসাইট এ ছবি যুক্ত করার জন্য এইচটিএমএল ইমেজ ব্যবহার করা হয়। এইচটিএমএল এ ছবি যোগ করার জন্য img ট্যাগ ব্যবহার করা হয় এবং এই ট্যাগ এ অ্যাট্রিবিউট ব্যবহার করতে হয়। img ট্যাগ এ src অ্যাট্রিবিউট ব্যবহার করতে হয়।

ইমেজের সিনট্যাক্সঃ

<img src="url">

এইচটিএমএল কোডঃ

<img src="ictclass.png">

আউটপুট

৪ টি অ্যাট্রিবিউটসহ একটি ইমেজের উদাহারন;

<img src="ictclass.png" alt="ICTClass" height="120" width="120">

আউটপুট

ওয়েবসাইট এ তালিকা প্রকাশ করার জন্য এইচটিএমএল লিস্ট ব্যবহার করা হয়।

• Order List (ol)
• Undorder List (ul)

Order List - ক্রমানুবর্তী তালিকা

অর্ডার লিস্ট এ তালিকা ক্রমানুসারে থাকে। এইচটিএমএল এ Order List কে সংক্ষেপে ol লেখা হয়। Order List এ type অ্যাট্রিবিউট ব্যবহার করে বিভিন্ন ধরনের অর্ডার লিস্ট তৈরি করা যায়। Order List এ type অ্যাট্রিবিউট এর ভ্যালু হতে পারে: 1, i, I, a, A

 <ol>
      <li> Saturday </li>
      <li> Sunday </li>
      <li> Monday </li>
      <li> Tuesday </li>
</ol> 

ফলাফল:

 <ol type="i">
      <li> Saturday </li>
      <li> Sunday </li>
      <li> Monday </li>
      <li> Tuesday </li>
</ol> 

ফলাফল:

 <ol type="I">
      <li> Saturday </li>
      <li> Sunday </li>
      <li> Monday </li>
      <li> Tuesday </li>
</ol> 

ফলাফল:

 <ol type="a">
      <li> Saturday </li>
      <li> Sunday </li>
      <li> Monday </li>
      <li> Tuesday </li>
</ol> 

ফলাফল:

 <ol type="A">
      <li> Saturday </li>
      <li> Sunday </li>
      <li> Monday </li>
      <li> Tuesday </li>
</ol> 

ফলাফল:

এছাড়াও, Order List এ start অ্যাট্রিবিউট ব্যবহার করে তালিকা কত থেকে শুরু হবে তা নির্ধারণ করা যায়।

 <ol type="a" start="2">
      <li> Saturday </li>
      <li> Sunday </li>
      <li> Monday </li>
      <li> Tuesday </li>
</ol> 

ফলাফল:

Unorder List - ক্রমবিহীন তালিকা

আনঅর্ডার লিস্ট এ তালিকা সাধারণত বুলেট চিহ্ন (কালো ছোট বৃত্ত) আকারে থাকে। এইচটিএমএল এ unorder List কে সংক্ষেপে ul লেখা হয়।
unorder List এ type অ্যাট্রিবিউট ব্যবহার করে বিভিন্ন ধরনের আনঅর্ডার লিস্ট তৈরি করা যায়। Unorder List এ type অ্যাট্রিবিউট এর ভ্যালু হতে পারে: circle, square, disc

 <ul>
      <li> Saturday </li>
      <li> Sunday </li>
      <li> Monday </li>
      <li> Tuesday </li>
</ul> 

ফলাফল:

 <ul type="circle">
      <li> Saturday </li>
      <li> Sunday </li>
      <li> Monday </li>
      <li> Tuesday </li>
</ul> 

ফলাফল:

 <ul type="square">
      <li> Saturday </li>
      <li> Sunday </li>
      <li> Monday </li>
      <li> Tuesday </li>
</ul> 

ফলাফল:

 <ul type="disc">
      <li> Saturday </li>
      <li> Sunday </li>
      <li> Monday </li>
      <li> Tuesday </li>
</ul> 

ফলাফল:

এই অ্যাপ তোমরা হয়তো খেয়াল করেছো পঞ্চম অধ্যায় লেখাটিতে ক্লিক করলে পঞ্চম অধ্যায়ের পেইজ এ চলে যায়। একইভাবে, এইচটিএমএল টেবিল লেখাটিতে ক্লিক করলে এইচটিএমএল টেবিল পেইজ এ চলে যায়। অর্থাৎ, আমরা কোন একটি লেখার সাথে পেইজগুলোর সম্পর্ক স্থাপন করতে পারি। আর এটা করা হযেছে এইচটিএমএল হাইপারলিংক এর সাহায্যে।

হাইপারলিংক কেন প্রয়োজন:

১। সহজেই এক পেইজ থেকে অন্য পেইজ এ যাওয়া যায়।
২। ওয়েব ব্রাউজিং সহজ হয়।
৩। ওয়েবসাইট ব্যবহারকারীর সময় বাঁচায়।

হাইপারলিংক এর সিনট্যাক্সঃ

<a href="url"> Keyword </a>

এবার আমরা একটি উদাহরণ দেখবো। আমরা Google লেখার সাথে google.com এর সম্পর্ক স্থাপন করবো:

এইচটিএমএল কোডঃ

<a href="http://www.google.com"> Google </a>

উপরের Google লেখাটিতে ক্লিক করলে http://www.google.com এ প্রবেশ করবে।

target অ্যাট্রিবিউটের ব্যবহার

target অ্যাট্রিবিউটে _blank ব্যবহার করলে ওয়েবসাইটটি ব্রাউজারের নতুন একটি ট্যাবে প্রদর্শিত হবে।

 <a href="http://www.ictclass.net" target="_blank">  Google  </a> 

লোকাল হাইপারলিংক

একটি ওয়েবসাইট এ একাধিক পেইজ থাকে। যখন একটি ওয়েবসাইট এর ওয়েবপেইজগুলোর মধ্যে সম্পর্ক স্থাপন করা হয় তখন সেটা লোকাল হাইপারলিংক হয়।

ধরা যাক, একটি ওয়েবসাইট এ about.html, service.html এবং contact.html নামে ৩ টি পেইজ আছে। এখন হোমপেইজ এর সাথে এই ৩ টি পেইজের সম্পর্ক স্থাপন করতে চাচ্ছি। এজন্য এইচটিএমএল কোড:

<a href="about.html"> About Page </a> <br>
<a href="service.html"> Service Page </a> <br>
<a href="contact.html"> Contact Page </a>

আউটপুট:

ইমেইল হাইপারলিংক

ইমেইল হাইপারলিংক এর ক্ষেত্রে a ট্যাগ এর সাথে href অ্যাট্রিবিউট এ mailto ব্যবহার করা হয়।

এইচটিএমএল কোড:

<a href="mailto:projuktilab@gmail.com"> Projukti Lab </a>

ফলাফল:

হাইপারলিংক এ ইমেজ ব্যবহার করা

হাইপারলিংক এ ছবি ব্যবহার করা সম্ভব। যখন একটি ইমেজ এর সাথে কোন একটি ওয়েবসাইট এর সম্পর্ক স্থাপন করার প্রয়োজন হয় তখন হাইপারলিংক এ ইমেজ ব্যবহার করা হয়।

নিচের এইচটিএমএল কোডটুকু লক্ষ্য করো:

 <a href="http://www.ictclass.net">  <img src="ictclass.png" >  </a> 

ফলাফল:

লিস্ট এ হাইপারলিংক ব্যবহার করা

এইচটিএমএল এ তালিকায় হাইপারলিংক ব্যবহার করা সম্ভব। এক্ষেত্রে, li ট্যাগ এর ভিতরে a ট্যাগ ব্যবহার করতে হয়।
ধরা যাক, Google এবং Facebook নামে ২ টি ক্রমানুবর্তী তালিকা আছে। Google লেখায় ক্লিক করলে www.google.com ওয়েবসাইট প্রবেশ করবে এবং Facebook লেখায় ক্লিক করলে www.facebook.com এ প্রবেশ করবে।

এইচটিএমএল কোড:

<ol>
   <li> <a href="http://www.google.com"> Google </a> </li>
   <li> <a href="http://www.facebook.com"> Facebook </a> </li>
</ol>

ফলাফল:

এইচটিএমএল টেবিল নিয়ে লেখাটি বড় হওয়ায় এটি আলাদাভাবে আলোচনা করা হয়েছে।

ব্যবহারকারীর কাছ থেকে তথ্য গ্রহণ করার জন্য এইচটিএমএল ফর্ম ব্যবহার করা হয়। ফর্ম তৈরি করতে সাধারণত input, textarea, select ইত্যাদি ট্যাগ ব্যবহার করা হয়।

ইনপুট হিসেবে বর্ণ, চিহ্ন, সংখ্যা ইত্যাদি গ্রহনের জন্য text ইনপুট ব্যবহার করা হয়। এক্ষেত্রে, input ট্যাগের type অ্যাট্রিবিউট এ text ভ্যালু ব্যবহার করতে হবে।

এইচটিএমএল কোড:

<input type="text">

আউটপুট:

ইনপুট হিসেবে সংখ্যা গ্রহনের জন্য number ইনপুট ব্যবহার করা হয়। এক্ষেত্রে, input ট্যাগের type অ্যাট্রিবিউট এ number ভ্যালু ব্যবহার করতে হবে।

এইচটিএমএল কোড:

<input type="number">

আউটপুট:

ইনপুট হিসেবে সংখ্যা গ্রহনের জন্য number ইনপুট ব্যবহার করা হয়। এক্ষেত্রে, input ট্যাগের type অ্যাট্রিবিউট এ number ভ্যালু ব্যবহার করতে হবে।

এইচটিএমএল কোড:

<input type="password">

আউটপুট:

ইনপুট হিসেবে ইমেইল গ্রহনের জন্য email ইনপুট ব্যবহার করা হয়। এক্ষেত্রে, input ট্যাগের type অ্যাট্রিবিউট এ email ভ্যালু ব্যবহার করতে হবে।

এইচটিএমএল কোড:

<input type="email">

আউটপুট:

একাধিক অপশন থেকে একটি ইনপুট বেছে নেওয়ার জন্য radio ইনপুট ব্যবহার করা হয়।

এইচটিএমএল কোড:

<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female

আউটপুট:

একাধিক অপশন থেকে যদি এক বা একাধিক অপশন বাছাই করার সুবিধা রাখার প্রয়োজন হয় তখন চেকবক্স ব্যবহার করা হয়।

এইচটিএমএল কোড:

<input type="checkbox"> Cricket
<input type="checkbox"> Football
<input type="checkbox"> Badminton

আউটপুট:

একাধিক অপশন ড্রপডাউন মেনু পদ্ধতিতে যদি একটি অপশন বাছাই করার প্রয়োজন হয় তখন select ট্যাগ ব্যবহার করা হয়।

এইচটিএমএল কোড:

<select>
    <option> Science </option>
    <option> Arts </option>
    <option> Commerce </option>
</select>

আউটপুট:

কোন বিষয়ে বিস্তারিত লেখার জন্য textarea ট্যাগ ব্যবহার করা হয়।

এইচটিএমএল কোড:

 <textarea> </textarea> 

আউটপুট:

তথ্য জমা দেওয়ার জন্য সাবমিট ইনপুট ব্যবহার করা হয়। এক্ষেত্রে, input ট্যাগের type অ্যাট্রিবিউট এ submit ভ্যালু ব্যবহার করতে হবে।

এইচটিএমএল কোড:

 <input type="submit" value="Search">

আউটপুট:

এখানে এইচটিএমএল ফর্ম এর বিভিন্ন ট্যাগ নিয়ে একটি ফর্ম তৈরি করা হয়েছে। ফর্ম তৈরি করার সময় এইচটিএমএল এর কোডগুলো form ট্যাগ এর ভিতরে রাখতে হয়।

এইচটিএমএল কোড:

<form>
    <p> Your Name: </p>
    <input type="text">
    <p> Phone Number: </p>
    <input type="number">
    <p> Gender: </p>
    <input type="radio" name="gender"> Male
    <input type="radio" name="gender"> Female
    <p> Group: </p>
    <select>
        <option> Select Group </option>
        <option> Science </option>
        <option> Arts </option>
        <option> Commerce </option>
    </select>
    <p> Subject Choice: </p>
    <input type="checkbox"> Bangla
    <input type="checkbox"> English
    <input type="checkbox"> ICT
    <p> Your Message: </p>
    <textarea></textarea>
    <input type="submit" value="Send">
</form>

আউটপুট:

বেশ কয়েকটি ধাপে একটি ওয়েবসাইট পাবলিশ করা হয়। একটি ওয়েবসাইট প্রকাশের ধাপগুলোকে হচ্ছে:

১। ডোমেইন নেম রেজিস্ট্রেশন করা: একটি ওয়েবসাইট তৈরি করতে হলে একটি ডোমেইন রেজিস্ট্রেশন করতে হবে। ডোমেইন নেমটি অর্থবোধক এবং সহজে মনে রাখা যায় এমন হওয়া উচিত।

২। ওয়েব পেইজ ডিজাইন: একটি ওয়েবসাইট এ বিভিন্ন লেখা, অডিও, ভিডিও ইত্যাদি থাকতে পারে। ওয়েবপেইজগুলো এইচটিএমএল এর মাধ্যমে তৈরি করতে হবে।

৩। ওয়েবসাইট সার্ভারে রাখা: ওয়েবসাইটের ফাইলগুলো কোন সার্ভারে রাখার জন্য ওয়েব হোস্টিং সেবা নিতে হবে। ওয়েবসাইটটি ডিজাইন করা শেষ হলে ওয়েবসাইট সার্ভারে রাখতে হবে বা হোস্টিং করতে হবে।

৪। ওয়েবসাইট সার্চ ইঞ্জিনে সাবমিট করা: ওয়েবসাইটটি ভিজিটরদের কাছে পৌঁছে দেওয়ার জন্য সার্চ ইঞ্জিনে সাবমিট করতে করতে হবে। সার্চ ইঞ্জিনে সাবমিট করার প্রক্রিয়াকে সার্চ ইঞ্জিন অপটিমাইজেন (SEO) বলা হয়। তবে, এই ধাপটি আবশ্যিক নয়।