ওয়েব ডিজাইন পরিচিতি এবং HTML

Miskat Kabir Azad

6 months ago

চতুর্থ অধ্যায়

ওয়েব ডিজাইন পরিচিতি এবং HTML (Introduction to Web Design & HTML)

বর্তমান তথ্য ও যোগাযোগ প্রযুক্তির যুগে বহুল ব্যবহৃত একটি মডেল হচ্ছে ওয়েব। ওয়েব হচ্ছে world-wide-web এর সংক্ষিপ্ত রূপ। বর্তমানে ওয়েব কে আমরা বলতে পারি তথ্যভান্ডার যেখানে অনেক তথ্য, রিসোর্স বা ওয়েব ডকুমেন্ট আকারে সঞ্চিত আছে। এই ধরনের ডকুমেন্ট ফাইল এক কম্পিউটার থেকে অন্য কম্পিউটারে স্থানান্তরের চাহিদা তৈরি হয়। এই চাহিদা থেকেই টিম বার্নার্স লি (Tim Berners Lee) world-wide-web(www) বা সংক্ষেপে ওয়েব তৈরি করেন। তিনি তখন সুইজারল্যান্ড এর জেনেভার CERN নামক একটি গবেষণাগারে কর্মরত ছিলেন। 1989 সালে তিনি এমন একটি ওয়েব এর ধারণা প্রদান করেন যার মাধ্যমে আইপি অ্যাড্রেস ব্যবহার করে এক কম্পিউটার থেকে অন্য কম্পিউটারে বিভিন্ন ডকুমেন্ট পাঠানো যাবে। তিনি ইন্টারনেট ব্যবহার করে পাঠানো লিখিত এই তথ্যের নাম দেন হাইপারটেক্সট (Hypertext)। এই হাইপারটেক্সট গুলো খুঁজে পাওয়া যাবে বিভিন্ন নেটওয়ার্ক ঠিকানায় যার নাম হবে হাইপারলিংক (Hyperlink)। লিখিত তথ্যের বাইরে ছবি, অডিও ও ভিডিও জাতীয় তথ্যকে বলা হবে হাইপারমিডিয়া (Hypermedia)। ১৯৯০ সালে তিনি তার সহকর্মীদের সহায়তায় তার ধারণাটিকে আর ও সুগঠিত রূপ দিয়ে পুনরায় প্রস্তাব করেন। ওয়েব এর এই তথ্যগুলো অন্য কম্পিউটারে দেখার জন্য তিনি একটি সফটওয়্যার ও তৈরি করেন যা হচ্ছে একটি ওয়েব ব্রাউজার।

HTML কি? এর সুবিধা গুলি লেখ।

HTML: HTML এর পূর্ণরূপ হল Hyper Text Markup Language. এটি একটি মার্কআপ ভাষা,যা কতগুলো ট্যাগ এর সমষ্টি। ওয়েব পেজ তৈরি করতে এই ভাষা ব্যবহৃত হয়। ১৯৯০ সালে টিম বার্নার্স লী HTML তৈরি করেন।

হাইপারটেক্সট( Hyper Text) বলতে “টেক্সট এর মধ্যে টেক্সট”। অর্থাৎ যখন একটি টেক্সটের মধ্যে একটি লিঙ্ক থাকে, তখন একে হাইপারটেক্সট বলে। আপনি যখনই কোনও লিঙ্কে ক্লিক করেন যা আপনাকে নতুন ওয়েব পেইজে নিয়ে আসে, তখন আপনি হাইপারটেক্সটে ক্লিক করেছেন। হাইপারটেক্সট হলো দুই বা ততোদিক ওয়েব পেইজ (HTML ডকুমেন্টস) একে অপরের সাথে লিঙ্ক করার একটি উপায়।
মার্কআপ(Markup) শব্দটি সেই চিহ্নগুলিকে বোঝায় যা ওয়েব পেইজের কাঠামো নির্ধারণ করতে ব্যবহৃত হয়। মার্কআপ চিহ্নগুলোর কাজ হল ওয়েবপেইজে বিভিন্ন তথ্য কিভাবে প্রদর্শন করবে তা ব্রাউজারকে নির্দেশ দেওয়া। চিহ্নগুলিকে প্রায়শই ট্যাগ বলা হয়।
ভাষা(Language) শব্দটি সিনট্যাক্সকে বোঝায় যা অন্য কোন ভাষার অনুরূপ।
মার্কআপ ভাষা হলো একটি কম্পিউটার ভাষা যা টেক্সট ডকুমেন্টের লেআউট এবং ফরম্যাটিং নিয়মগুলো প্রয়োগ করতে ব্যবহৃত হয়। মার্কআপ ভাষা টেক্সটকে আরও ইন্টারেক্টিভ এবং ডাইন্যামিক করে তোলে।

HTML এর সুবিধাঃ

১। HTML লিখতে হয় কতগুলো Tag ব্যবহার করে যা যে কোনো কেউ খুব সহজেই মনে রেখে ওয়েব পেজ তৈরি করতে পারে।

২। HTML শেখা এবং ব্যবহার পদ্ধতি খুব সহজ।

৩। প্রায় সকল ব্রাউজার HTML সাপোর্ট করে।

৪। HTML কার্যকরভাবে প্ল্যাটফর্ম স্বনির্ভর। (Platform Independent)

৫। এটি কোন কেস (Case) সেনসিটিভ নয়।

৬।যেকোনো টেক্সট এডিটর যেমন: (Notepad, Notepad++, Wordpad, Fornt, Sublime Text) ব্যবহার করে HTML এডিট করা যায়।

সার্ভারে যেই সফটওয়্যার চলে, সেটি সাধারণত একটি প্রোগ্রামিং ভাষা ব্যবহার করে লেখা হয়।এসব কাজের জন্য জনপ্রিয় প্রোগ্রামিং ভাষা হচ্ছে পিএইচপি,পাইথন,জাভা,রুবি ইত্যাদি।ব্রাউজার এ যে ওয়েবসাইট কিংবা ওয়েব অ্যাপ্লিকেশন চলে,সেখানে ব্যবহার করা হয় এইচটিএমএল (HTML) ও সিএসএস (CSS-Cascading Style Sheet). HTML কোন প্রোগ্রামিং ভাষা নয়, একে মার্কআপ ভাষা বলা যায়,এর কাজ হচ্ছে কোন তথ্য ব্রাউজারে প্রদর্শনের উপযোগী করা।শুধু এইচটিএমএল ব্যবহার করে ওয়েব সাইট তৈরী করা গেলেও, ওয়েব সাইটকে আরো আকর্ষণীয় সুন্দর ভাবে উপস্থাপন করার জন্য CSS ব্যবহার করা হয়। আধুনিক সব ওয়েবসাইটেই এ ভাষা ব্যবহার করা হয়।

ওয়েব পেজ কি? এর প্রকারভেদ গুলো লিখ।

ওয়েব পেজঃ ইন্টারনেটের সাথে সংযুক্ত পৃথিবীর বিভিন্ন দেশের বিভিন্ন সার্ভারে সংরক্ষিত ফাইলকে ওয়েবপেজ বলে। ওয়েব পেজে কোন ব্যক্তি বা প্রতিষ্ঠান সম্পর্কে সংশ্লিষ্ট তথ্য যেমনঃ Text, Image, Audio, Video, Animation ইত্যাদি যোগ করা যায়।

প্রকারভেদঃ ওয়েব পেজ প্রধানত দুই প্রকার। যেমনঃ

১। স্ট্যাটিক ওয়েব পেজ (Static web page)

২। ডায়নামিক ওয়েব পেজ (Dynamic Webpage)

Static web page: যে সকল ওয়েব পেইজের তথ্যগুলো খুব বেশি পরিবর্তন হয় না অর্থাৎ পূর্ব থেকেই তৈরিকৃত কিছু তথ্য প্রদর্শন করে, তাকে Static web page বলে। সাধারণত HTML Page গুলো Static web page

Dynamic web page: যে সকল ওয়েব পেজে তথ্য প্রতিমুহূর্তে পরিবর্তিত হয়, তাকে Dynamic web page বলে। PHP, ASP, ISP, JSP ইত্যাদি হল ডায়নামিক ওয়েব পেজ।

এক বা একাধিক ওয়েব পেইজের সমন্বয়ে ওয়েবসাইট তৈরি করা যায়।
HTML এর সাহায্যে ওয়েবপেজ তৈরি করা হয়।HTML হল কতগুলো Tag এর সমষ্টি।
Tag গুলো লিখতে হয় অ্যাঙ্গেল (< >) ব্র্যাকেট এর সাহায্যে এবং অ্যাঙ্গেল (< >) ব্র্যাকেট এর মাঝখানে কি ওয়ার্ড থাকে।
ওয়েব পেজ কখনো Tag গুলোকে প্রদর্শন করে না শুধুমাত্র মধ্যবর্তী অংশ গুলো প্রদর্শন করে।

Keyword হল কতগুলো বিশেষ word যাদের সুনির্দিষ্ট অর্থ আছে, তাদেরঅর্থ সমূহ অপরিবর্তনশীল।

এইচটিএমএল এর কাজ শুরু করতে চাইলে প্রথমে একটি ফাইল তৈরি করতে হয়, যেকোন নাম দিলেই চলবে কিন্তু শেষে এক্সটেনশন হবে .html । যেমনঃhtml
HTML এ মন্তব্য (Comment) লিখার জন্য <!—– > tag ব্যবহার করা হয়।

HTML Document বা ওয়েবপেইজের কাঠামোঃ

ওয়েপেইজ ডিজাইন করার জন্য HTML ব্যবহার করা হয়। HTML দিয়ে তৈরি কোন ওয়েবপেইজের সাধারণত দুইটি সেকশন থাকে। যথা- ১. Head Section (Optional) ২. Body Section

বডি সেকশন (Body Section):

এই সেকশনটি একটি ওয়েবপেইজের মূল অংশ। একটি ওয়েবপেইজে বিভিন্ন ধরণের টেক্সট, গ্রাফিক্স, অডিও, ভিডিও, হাইপারলিংক ইত্যাদি প্রদর্শন করার জন্য প্রয়োজনীয় সকল কোড এই অংশে লেখা হয়।বডি সেকশনের সকল ট্যাগ <body>……….</body> ট্যাগের মধ্যে লিখতে হয়। অধিকাংশ ট্যাগ এই অংশে লিখা হয়। এই অংশে ব্যবহৃত ট্যাগ সমূহ-<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, <br>, <hr>, <b>, <u>, <i>, <del>, <sub>, <sup>, <a>, <img>, <li>, <ul>, <ol>, <li>, <table>, <tr>, <th>, <td>, <caption> ইত্যাদি।

HTML দ্বারা যেকোন ওয়েবপেইজ তৈরি করার জন্য নিমোক্ত স্ট্রাকচার অনুসরণ করতে হয়-

চিত্রের ন্যায় ওয়েবপেজ তৈরীর জন্য প্রয়োজনীয় HTML ট্যাগ লিখঃ

<!DOCTYPE html>,

First Page

University of Chittagong

head

<html>

<head>

body

<title> First Page </title>

</head>

<body>

University of Chittagong

</body>

</html> Webpage

নিচে আরো একটু উদাহরণ:

<!DOCTYPE html>

First Page

Father’s name: A

Mother’s name: B

Address: X

head

<html>

<head>

body

<title> First Page </title>

</head>

<body>

Father’s name: A

Mother’s name: B

Address: X Webpage
</body>

</html>

প্রথম লাইনে আছে <!DOCTYPE html>, যাকে বলা হয় ডকুমেন্ট টাইপ ডিক্লারেশন। এর দ্বারা ব্রাউজার বুঝতে পারে যে ডকুমেন্টটি এইচটিএমএল ৫ স্ট্যান্ডার্ড অনুসরণ করে লেখা হয়েছে এবং সে অনুযায়ী রেন্ডার (প্রদর্শন) করে। এটি আসলে ডকুমেন্টের অংশ নয়, তবে লেখা জরুরি।

সার্ভার

হোস্টিং: ওয়েবসাইট হোস্টিং

ওয়েবসাইট কি?এর প্রকারভেদ গুলো বর্ণনা কর।

ওয়েবসাইটঃ ওয়েবসাইটে এক বা একাধিক ওয়েবপেজ থাকে।কোন ব্যক্তি বা প্রতিষ্ঠান এর ব্যবহার করে থাকে।ইন্টারনেটের সাথে সংযুক্ত কোন কম্পিউটারের (সার্ভার) বরাদ্দকৃত স্পেস বা লোকেশন যেখানে একাধিক ওয়েবপেইজ থাকে তাকে ওয়েবসাইট বলে।

প্রকারভেদঃ

১। স্ট্যাটিক ওয়েবসাইট

২। ডাইনামিক ওয়েবসাইট

স্ট্যাটিক ওয়েবসাইটঃ

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

ডাইনামিক ওয়েবসাইটঃ

যে সকল ওয়েবসাইট হোস্টিং বা চালু করার পর প্রতিনিয়ত তথ্য পরিবর্তন করা হয় বা করতে হয়, এই ধরনের ওয়েবসাইটকে ডাইনামিক ওয়েবসাইট বলে।ডাইনামিক ওয়েবসাইটের তথ্য, ভিজিটর, সময়, টাইম জোন, ভিজিটরের মাতৃভাষা এবং অন্যান্য বিষয়গুলোর উপর ভিত্তি করে পরিবর্তন হয়।এই ধরনের ওয়েবসাইটের মেমোরিতে বেশি জায়গা প্রয়োজন হয়। এর কার্যক্ষমতা তুলনামূলকভাবে বেশি। এই ধরনের ওয়েবসাইট এর সাথে ডাটাবেজ সংযুক্ত থাকে।ডাইনামিক ওয়েবসাইট হল, যেখানে ব্যবহারকারীরা ওয়েব সাইটে বিভিন্ন ইনপুট দেন এবং সেই ইনপুট অনুসারে বিভিন্ন আউটপুট তৈরি হয়।এজন্য এগুলোকে ওয়েব অ্যাপ্লিকেশনও বলা হয়।যেমনঃcom , service.nidw.gov.bd, passport.gov.bd

NOTE: স্ট্যাটিক ওয়েবসাইট এর সবগুলো ওয়েবপেইজ স্ট্যাটিক। কিন্তু ডাইনামিক ওয়েবসাইটের মধ্যে স্ট্যাটিক ও ডাইনামিক উভয় ধরনের পেইজ থাকতে পারে।

একটি ওয়েবসাইটের দুটি অংশ থাকে-সার্ভার ও ক্লায়েন্ট। ক্লায়েন্ট সফটওয়্যার ব্যবহারকারীর ইনপুট নিয়ে সার্ভারের কাছে ডেটা পাঠায় যাকে বলা হয় রিকোয়েস্ট (Request)। সার্ভার সেই ডেটা অনুসারে ক্লায়েন্টের কাছে জবাব বা রেসপন্স (Response) পাঠায়। অনেক সময় ডায়নামিক ওয়েবসাইট এ ক্লায়েন্ট অংশে অনেক কাজ করা যায়, সার্ভারের কাছে রিকোয়েস্ট পাঠাতে হয় না। এই কাজের জন্য সবচেয়ে জনপ্রিয় প্রোগ্রামিং ভাষা হচ্ছে জাভাস্ক্রিপ্ট (Javascript)।

সার্ভারঃ

* একটি বিশেষ ধরনের কম্পিউটার ।

* 24 ঘন্টা ইন্টারনেট সেবা প্রদান করে।

* সব সময় ON রাখতে হয়/ থাকে।

ওয়েব ব্রাউজার কি? কয়েকটি ওয়েব ব্রাউজারের নাম লিখ।

ওয়েবসাইট দেখার জন্য ব্যবহারকারীরা যে সকল বিশেষ সফটওয়্যারব্যবহার করে থাকে, তাদেরকে ওয়েব ব্রাউজার বলে।ব্রাউজার শব্দের অর্থ হলো কোন কিছু পড়া বা দেখা।

ওয়েব ব্রাউজারের নামঃ

Internet Explorer
Mozilla Firefox
Google Chrome
Netscape Nevigator
Opera
Safari

ওয়েব ব্রাউজিং কি? ওয়েব ব্রাউজিং এর পদ্ধতি গুলো কি?

ইন্টারনেটের সাহায্যে পৃথিবীর বিভিন্ন সার্ভারে রাখা ওয়েবসাইট প্রদর্শন করা কে ওয়েব ব্রাউজিং বলে।

ওয়েব ব্রাউজিং এর পদ্ধতিঃ

১। নির্দিষ্ট ওয়েব অ্যাড্রেসের মাধ্যমে।

২। সার্চিং ওয়েবসাইটের মাধ্যমে।

HTML Tag & HTML Attribute বলতে কী বুঝ?

HTML Tag:

HTML Tag হলঅ্যাঙ্গেল ব্র্যাকেট দ্বারা আবৃত কতগুলো কি-ওয়ার্ড যার সুনির্দিষ্ট অর্থ আছে। HTML এ কোন নির্দেশকে সুনির্দিষ্ট করার জন্য HTML Tag ব্যবহৃত হয়।ট্যাগকে এলিমেন্ট ও বলা হয়।একটি ট্যাগের সাধারণত দুইটি অংশ থাকে । একটিকে বলা হয় ওপেনিং ট্যাগ এবং অন্যটি ক্লোজিং ট্যাগ। ওপেনিং এবং ক্লোজিং ট্যাগের নাম একই, তবে পার্থক্য হলো, ক্লোজিং ট্যাগে একটি স্ল্যাস(/) থাকে।

HTML এ দুই ধরনের Tag ব্যবহৃত হয়।

১। সিঙ্গেল Tag/এম্পটি ট্যাগ:

যে সকল ট্যাগের ওপেনিং ট্যাগ আছে কিন্তু ক্লোজিং ট্যাগ নাই তাদের এম্পটি ট্যাগ বলে। যেমনঃ <br> , <img> <hr>, <link>, <meta>, <base> ইত্যাদি।

২। ডাবল Tag/কনটেইনার ট্যাগ:

যে সকল ট্যাগের ওপেনিং ট্যাগ এবং ক্লোজিং ট্যাগ থাকে তাদের কনটেইনার ট্যাগ বলে। যেমনঃ <font>……………..</font> * ডাবল Tag এর প্রথম অংশটিকে Opening Tag এবং শেষের অংশটিকে Closing Tag বলা হয়।

HTML Attribute:

HTML অ্যাট্রিবিউট হচ্ছে HTML এলিমেন্ট সমূহের বৈশিষ্ট্য নির্ধারক। ওয়েব পেজ কে আকর্ষণীয় এবং বৈচিত্র্যময় করার জন্য HTML Tag এর সাথে এট্রিবিউট ব্যবহার করা হয়। এট্রিবিউট গুলো Tag এর নির্দেশকে সুনির্দিষ্ট করে দেয় এবং এগুলো সব সময় Opening Tag এর সাথে লিখতে হয়। একটি Tag এর সাথে এক বা একাধিক এট্রিবিউট ব্যবহার করা যায়। একটি অ্যাট্রিবিউটের দুটি অংশ থাকে। যথা: Attribute Name, Attribute Value

Attribute Value সবসময় ডাবল কোটেশনের (” “) মধ্যে বসে। Attribute Name এবং Attribute Value এর মাঝে একটি সমান চিহ্ন (=) বসে।যেমনঃ <font size=”30” color=”red”> Chittagong College </font>

উপরোক্ত <font> ট্যাগের সাথে size এবং color নামে দুটি অ্যাট্রিবিউট ব্যবহার করা হয়েছে। যাদের মান যথাক্রমে “30” এবং “Red”

HTML হেডিংট্যাগঃ ওয়েবপেইজে কোন বিষয়ের শিরোনাম দেওয়ার জন্য HTML এ ৬ ধরণের হেডিং ট্যাগ রয়েছে। যার মধ্যে <h1> হলো সবচেয়ে বেশি গুরুত্বপূর্ণ বা সাইজেসবচেয়ে বড় এবং <h6> সবচেয়ে কম গুরুত্বপূর্ণ বা সাইজে সবচেয়ে ছোট। হেডিং ট্যাগ এর ওপেনিং এবং ক্লোজিং ট্যাগ এর মধ্যে যা লেখা হয় তা শিরোনাম হিসাবে দেখায়। এগুলো হলো-

<h1> …</h1>
<h2> …</h2>
<h3> …</h3>
<h4> …</h4>
<h5> …</h5>
<h6> …</h6>

HTML Horizontal Rules (অনুভূমিক লাইন):

ওয়েবপেইজে কনটেন্টকে পৃথক করা বা কোন শিরোনামের নিচে রেখা বা লাইন ব্যবহারের প্রয়োজন হয়। এটি করতে <hr> ব্যবহৃত হয়। এটি এম্পটি ট্যাগ।

ওয়েবপেইজে কোন তথ্য প্যারাগ্রাফ আকারে দেখানোর জন্য প্যারাগ্রাফ ট্যাগ (<p> ….. </p>) ব্যবহার করা হয়। প্যারাগ্রাফ ট্যাগ এর ওপেনিং এবং ক্লোজিং ট্যাগ এর মধ্যে যা লেখা হয় তা একটি প্যারাগ্রাফ হিসাবে দেখায়। এক্ষেত্রে কোডে অনেক লাইন বা স্পেস থাকলেও ব্রাউজারে তা বাদ দিয়ে দেয়। নিচের কোডটির আউটপুট লক্ষ করা যাক-

<p> This paragraph contains a lot of lines in the source code, but the browser ignores it. This paragraph contains a lot of spaces in the source code, but the browser ignores it.

</p>

এই কোডটির আউটপুট-This paragraph contains a lot of lines in the source code, but the browser ignores it. This paragraph contains a lot of spaces in the source code, but the browser ignores it.

<font> tag:

ফন্ট ট্যাগ (<font></font>) ব্যবহার করেও ফন্ট ফেইস, ফন্ট কালার এবং ফন্ট সাইজ পরিবর্তন করা যায়। নিচের কোডটি দেখুন- <font size=”14″ color=”green” face=”arial”> This is the use of font tag.</font>

উপরের কোডে ফন্ট ট্যাগে size, color ও face অ্যাট্রিবিউট ব্যবহার করে যথাক্রমে ফন্টের সাইজ, ফন্টের কালার এবং ফন্টের ফেইস নির্ধারণ করা হয়েছে।

ওয়েব পেজে ছবি সংযুক্ত করার জন্য প্রক্রিয়া দেখাও:

<img> একটি Single tag. এর কোন Closing Tag নাই। ছবিকে Page এর মাঝখানে অথবা নিচে অথবা উপরে স্থাপন করতে চাইলে (align=”right/below/under/center) attribute ব্যবহার করতে হয়।

ওয়েবপেইজে সাধারণত নিমোক্তফরম্যাটের ছবি যুক্ত করা হয়-

JPG(Joint Photographic Group),
JPEG (Joint Photographic Experts Group),
PNG(Portable Network Graphics),
GIF (Graphics Interchange Format),
SVG(Scalable Vector Graphics),
BMP (bitmap)

Width ও height অ্যাট্রিবিউট: ছবির সাইজ নির্ধারন না করলে, ছবিটি যে সাইজের আছে অবিকল সেই সাইজেই প্রদর্শিত হবে। কিন্তু বিভিন্ন প্রয়োজনে ভিন্ন ভিন্ন সাইজের ছবি ওয়েবপেইজে প্রদর্শন করতে হয়, এক্ষেত্রে <img> ট্যাগে width ও height অ্যাট্রিবিউট ব্যবহার করে যথাক্রমে ছবির প্রস্থ এবং উচ্চতা নির্দিষ্ট করে দেওয়া যায়। যদি চিত্রের সাইজ 200×150 দেওয়া থাকে, তাহলে বুঝতে হবে প্রথম সংখ্যাটি (২০০) প্রস্থ নির্দেশ করে এবং দ্বিতীয় সংখ্যাটি (১৫০) উচ্চতা নির্দেশ করে।

<img>

ওয়েব পেজে jpg নামের একটি ছবি যুক্ত করার জন্য ট্যাগের ব্যবহার দেখাও:

<!DOCTYPE html>

Picture

ছবি

Nazmul.jpg

head

<html>

<head>

<title> Picture </title>

body

</head>

<body>

</body>

</html> Webpage

নাজমুল তার ওয়েব পেজে jpg নামে একটি ছবি সংযুক্ত কর, যার প্রস্থ 300 px এবং উচ্চতা 400 px. উপরিউক্ত ছবিটি ওয়েবপেজে সংযুক্ত করার জন্য ট্যাগ এর ব্যবহার দেখাও:

Picture

ছবি

400 x 300 px

Nazmul.jpg

head

<!DOCTYPE html>

<html>

body

<head>

<title> Picture </title>

</head>

<body>

<img src=“Nazmul.jpg” width=”300 px” height=”400 px” >

</body>

</html>

কাজ-১:

F ড্রাইভের picture ফোল্ডারে সংরক্ষিত logo.jpg নামক একটি ছবি ডেস্কটপে সংরক্ষিত একটি ওয়েবপেইজে যুক্ত করতে প্রয়োজনীয় HTML কোড লিখ।

কাজ-২:

E ড্রাইভের photo ফোল্ডারে সংরক্ষিত logo.jpg নামক ছবিটি, ডেস্কটপে সংরক্ষিত একটি ওয়েবপেইজে 200×300 আকারে প্রদর্শন করতে প্রয়োজনীয় HTML কোড লিখ।

ওয়েবপেইজ ফরমেটিং বলতে কী বুঝ?

ওয়েবপেইজ তৈরি করার জন্য ৫ টি বা পাঁচ ধরনের তথ্য ব্যবহার করা হয়। যথাঃ Text, Image, Audio, Video, Animation.

ওয়েবপেইজ ফরম্যাটিং:

একটি ওয়েব পেজ তৈরি করার পর তাকে বিভিন্নভাবে সাজানোর প্রক্রিয়া কে ওয়েবপেইজ ফরমেটিং বলা হয়। ওয়েবপেইজ ফরমেটিং বলতে সাধারণত টেক্সট ফরমেটিং কেই বুঝানো হয়।

HTML এ Text ফরমেটিং এর জন্য বিভিন্ন ধরনের Tag ব্যবহার করা হয়। যেমনঃ

<b> University of Chittagong </b> লেখাকে বোল্ড করার জন্য

<i> University of Chittagong </i> লেখাকে Italic করার জন্য

<big> University of Chittagong <big> লেখাকে বড় করার জন্য

লেখাকে উপরে উঠানো (Superscript) এর জন্য <sup>……..</sup> এবং বা নিচে নামানো (Subscript) এর জন্য <sub>…………..</sub> ব্যবহার করা হয়।

(a+b) <sup> 2</sup>=a <sup> 2 </sup> + 2ab + b <sup> 2 </sup> [(a +b)²=a²+2ab+b²]

H <sub> 2 </sub> O (H₂O)

HTML Syntax এবং HTML Element বলতে কী বোঝ?

HTML Syntax:

যেকোনো ভাষায় প্রোগ্রাম রচনা করতে গেলে কিছু নিয়ম-নীতি মেনে চলতে হয়। HTML Tag গুলো লেখার ক্ষেত্রেও কিছু নিয়ম নীতি মেনে চলতে হয়। এইসব নিয়ম নীতি কেই HTML Syntax বলে। যেমনঃ University of Chittagong লেখাটি Bold করার Syntax হল: <b> University of Chittagong </b>

HTML Element:

Opening & Closing Tag এর মাঝখানে যা কিছু লিখা হয় ( ভিন্ন কোন Tag হলেও) তাকে HTML Element বলে। যেমনঃ <b> University of Chittagong </b>

<b> <i> University of Chittagong </i> </b>

HTML এ Font পরিবর্তন:

Font tag এ তিনটি Attribute রয়েছে। যথাঃ

১। Face (Font এর নাম)

২। size

৩। Color

Example:

<body>

<font face= “Arial” size=”20” color=”red”> Dhaka City </font>

</body>

ওয়েব অ্যাড্রেস বা URL:

URL এর পূর্ণরূপ হল Uniform Resource Locator. প্রতিটি ওয়েবসাইটের একটি সুনির্দিষ্ট ও অদ্বিতীয়অ্যাড্রেস বা ঠিকানা রয়েছে যার সাহায্যে ইন্টারনেটে সংযুক্ত থেকে ওয়েব ব্রাউজারের সাহায্যে যেকোন জায়গা থেকে ঐ ওয়েবসাইটের পেইজগুলো ব্রাউজ করা যায়; সেই ঠিকানাকে ওয়েব অ্যাড্রেস বলে।অর্থাৎ, কোন ওয়েবসাইট বা ওয়েবপেইজের একক ঠিকানা বা এড্রেস কে ওয়েব অ্যাড্রেস বা URL বলে।

প্রতিটি ওয়েব অ্যাড্রেস এর থাকেঃ

১। প্রটোকল

২। ডোমেইন নাম

৩। ফোল্ডারের নাম/ ডিরেক্টরি

৪। ফাইলের নাম

যেমনঃ http:// www.educationboard.gov.bd /chittagong / result.html

প্রটোকল ডোমেইন নাম ডিরেক্টরি ফাইলের নাম

Protocol:

প্রোটোকল হল কতগুলো নিয়মের সমষ্টি । উপরের URL এ http একটি প্রোটোকল যা HTML ডকুমেন্ট এক্সেস করা বা ওয়েব সার্ভার ও ক্লায়েন্টের মধ্যে ডেটা আদান-প্রদান করে থাকে। কিছু প্রোটোকলের উদাহরণ-

HTTP – Hyper Text Transfer Protocol

HTTPS– Hyper Text Transfer Protocol Secure

FTP – File Transfer Protocol

IP – Internet Protocol

TCP– Transmission Control Protocol

হোমপেইজ:

কোন ওয়েবসাইটের প্রথম পেইজকে হোমপেইজ (Home Page) বলা হয়। এটি এক ধরনের Index বা সূচি। ব্রাউজার প্রথমে হোমপেইজকেই প্রদর্শন করে। একে ওয়েবসাইটে প্রবেশের Platform ও বলা হয়।

HTTP:

HTTP এর পূর্ণরূপ হল Hyper Text Transfer Protocol. এটি ক্লায়েন্ট কম্পিউটার এবং সার্ভার কম্পিউটারের মধ্যে ডেটা আদান প্রদান করে থাকে। এর মাধ্যমে ক্লায়েন্ট Information এর জন্য সার্ভারের নিকট অনুরোধ পাঠায় এবং সার্ভার সেই অনুযায়ী তথ্য পাঠায়।যে কোন ওয়েব এড্রেস এর আগে অবশ্যই HTTP লিখতে হয়।

যেমনঃ http://www.prothomalo.com https://www.google.com

হাইপারলিংক বলতে কী বুঝ?

হাইপারলিংক:

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

হাইপারলিঙ্ক এর প্রকারভেদঃ

হাইপারলিঙ্ক সাধারণত তিন ধরণের।যথা-

১। গ্লোবাল হাইপারলিঙ্কঃ

অন্য কোন ওয়েবসাইট বা ওয়েবপেইজের সাথে লিংক করা। (ভিন্ন কোন ওয়েবসাইট এর সাথে)

২। লোকাল হাইপারলিঙ্কঃ

একই ওয়েবসাইটের বিভিন্ন ওয়েবপেইজের সাথে লিংক করা। (একই ওয়েবসাইটের একাধিক পেজের মধ্যে)

৩। ইন্টারনাল হাইপারলিঙ্কঃ

একই ওয়েবপেইজের বিভিন্ন সেকশনের সাথে লিংক করা। (একই পেইজ এর মধ্যে)

লিংক করা Tag:

Anchor Tag (<a>……………..</a>) দ্বারা হাইপারলিংক করা হয়। যেমনঃ

<a> href=http://www.google.com> Google </a> (এই ট্যাগ এর সাহায্যে Google ওয়েবসাইটের লিংক করা হয়ে যাবে।)

href=Hyperlink Reference

শামীম ও রহিম দুটি ওয়েবপেজ তৈরি করে এবং ওয়েব পেজ দুটি যথাক্রমে html এবং Rahim.html নামে save করেন। উপরিউক্ত পেজটিকে লিঙ্ক করার প্রক্রিয়া দেখাওঃ

রহিম এর পেইজ থেকে শামীমের পেইজ লিংক করার প্রক্রিয়াঃ

<!DOCTYPE html>

Rahim’s Page

Shamim

<html>

<head>

<title> Rahim’s Page </title>

body

</head>

<body>

<a href=Shamim.html”> Shamim</a>

</body>

</html> Rahim.html

শামিম এর পেইজ থেকে রহিম এর পেইজ এর লিংক করার প্রক্রিয়াঃ (নিজে কর)

সাইয়েদ এবং শামীম দুটি ওয়েব পেজ তৈরি করে এবং ওয়েব পেজ দুটিতে যথাক্রমে Google এবং Facebook এর লিংক সংযুক্ত করে এবং তারা পেজ দুটিকে সংযুক্ত করে, উপরোক্ত পেজ দুটি তৈরি করা এবং লিঙ্ক করার প্রক্রিয়া দেখাও:

head

প্রথম ধাপঃ <!DOCTYPE html>

Sayed’s Page

Shamim

Google

<html>

<head>

<title> Sayed’s Page</title>

body

</head>

<body>

<a href=Shamim.html”> Shamim</a>

<a href=www.google.com”>Google</a>

</body>

</html> Sayed.html

দ্বিতীয় ধাপঃ (শামীমের পেইজ নিজেরা তৈরি কর)

কাজ–১:

EduPointBD টেক্সটের সাথে https://www.edupointbd.com ওয়েবসাইটটির হাইপারলিংক।

কাজ–২:

logo.png নামে চিত্রের সাথে https://www.edupointbd.com ওয়েবসাইটটির হাইপারলিংক।

কাজ–৩:

edupointbd_logo.jpg নামে চিত্রটি ক্লিক করলে https://www.edupointbd.com ওয়েবসাইটটি ওপেন হওয়ার HTML কোড লিখ।

কাজ–৪:

photo ফোল্ডারে সংরক্ষিত facebook.jpeg নামক ছবিটি, ডেস্কটপে সংরক্ষিত একটি ওয়েবপেইজে 200×300 আকারে প্রদর্শন করছে। উক্ত ছবিটির সাহায্যে https://www.facebook.com ওয়েবসাইটটি ব্রাউজ করার প্রয়োজনীয় HTML কোড লিখ।

HTML এ New Line তৈরী করাঃ (HTML লাইন ব্রেক)

<br> এর পূর্ণরূপ হলঃ Break/Line Break

<br> Tag এর সাহায্যে HTML এ New Line তৈরী করা হয়।

<br> Tag টিকে Empty Tag/Unit Tag/Single Tag বলা হয়।কারণ এই Tag টিকে শেষ করতে হয় না।নতুন প্যারাগ্রাফ শুরু না করে যদি একটি লাইন ব্রেক (একটি নতুন লাইন) দিতে হয়, এক্ষেত্রে <br> ব্যবহার করেলাইন ব্রেক দেওয়া যায়। <p>This is<br>a paragraph<br>with line breaks</p>

Table তৈরি করার Tag:

<table>………………….</table> (Table তৈরি করার জন্য)

<tr>……………………….</tr> (Row তৈরি করার জন্য)

<td>…………………</td> (Table এ Data রাখার জন্য)

<th>……………………</th> (Table এ Heading দেওয়ার জন্য)

<caption>…………</caption> (Table এর উপর Caption দেওয়ার জন্য

ওয়েব পেজে দুইটি Row এবং তিনটি Colum বিশিষ্ট একটি Table তৈরি করার জন্য HTML Tag এর ব্যবহার দেখাও:

Table

Column

Roll	Name	Sub
101	Asif	Bangla

<!DOCTYPE html>

<html>

<head>

<title> Table</title>

Row

</head>

<body>

<tr>

<th> Roll </th> <th>Name </th> <th> Subject</th>

</tr>

<tr>

<td>101</td> <td> Asif</td> <td> Bangla</td>

</tr>

</table>

</body>

Table

Result

Name	Subjects
Name	Bangla	English	ICT
Asif	80	60	85
Miskat	90	72	70
Shakib	90	60	70

</html>

চিত্রের ন্যায় ওয়েবপেজ তৈরীর জন্য প্রয়োজনীয় HTML ট্যাগ লিখঃ

<!DOCTYPE html>

<html>

<head>

<title> Table</title>

</head>

<body>

<caption> Result</caption>

<tr>

<th rowspan=“2”> Name </th> <th colspan=“3”> Subjects </th>

</tr>

<tr>

<th> Bangla </th> <th> English </th> <th> ICT </th>

</tr>

<tr>

</tr>

<tr>

<td> Miskat </td> <td>90</td> <td> 72</td> <td> 70</td>

</tr>

<tr>

<td> Shakib </td> <td>90</td> <td> 60</td> <td> 70</td>

</tr>

</table>

</body>

</html>

¨ HTML লিস্ট: অনেকসময় ওয়েবপেইজের তথ্য লিস্ট বা তালিকা আকারে প্রকাশ করার প্রয়োজন হয়। অর্থাৎ লিস্ট আইটেমগুলোকে নাম্বারিং বা পয়েন্ট আকারে প্রকাশ করার প্রয়োজন হয়। তথ্য লিস্ট আকারে প্রদর্শনের জন্য HTML এ তিন ধরনের লিস্ট আছে। যথা-

১। অর্ডারড লিস্ট (Ordered List) ২। আনঅর্ডারড লিস্ট (Unordered List) ৩। ডেসক্রিপশন লিস্ট (Description List)

ওয়েব পেইজে অর্ডার লিস্ট এবং আন অর্ডার লিস্ট তৈরি করঃ

<ol>………………….</ol> (অর্ডার লিস্ট তৈরির জন্য)

<ul>………………….</ul> (আন অর্ডার লিস্ট তৈরির জন্য)

<li>………………….</li> (লিস্টে উপাদান অন্তর্ভুক্ত করার জন্য)

** অর্ডার এবং আনর্ডার লিস্ট এর <ol> & <ul> Tag এর সাথে (type= “square”, “circle”, “disk”, “none”, “i”, “I”, “a”, “A”, “1”) এই এট্রিবিঊট টি ব্যবহৃত হয়।

অর্ডারড লিস্টে কখনো কখনো নির্দিষ্ট সংখ্যা থেকে শুরু করতে হয়। যেমনঃ কোন ক্লাসের ৩০ থেকে ৪০ রোল ধারী শিক্ষার্থীদের তালিকা দেখাতে বলা হল। এক্ষেত্রে Start অ্যাট্রিবিউট ব্যবহার করতে হবে। Start অ্যাট্রিবিউট এর মান সব সময় সংখ্যা (numeric) হবে।

<li> Shakib </li> <li> Tamim </li>

……

</ol>

ওয়েব পেইজে অর্ডার লিস্ট তৈরি করার জন্য অথবা পাশের চিত্রের ন্যায় একটি ওয়েব পেজ তৈরি করার জন্য HTML কোডগুলো লিখঃ

<!DOCTYPE html>

Order List

A. Dhaka

B. Chittagong

C. Sylhet

D. Rajshahi

<html>

<head>

<title> Order List </title>

</head>

<body>

<ol type= “A”>

<li> Dhaka</li> <li>Chittagong </li>

<li> Sylhet</li> <li>Rajshahi</li>

</ol>

</body>

</html>

পাশের চিত্রের মত একটি ওয়েব পেজ তৈরি করার জন্য অথবা ওয়েব পেজে আন অর্ডার লিস্ট তৈরি করার জন্য প্রয়োজনীয় HTML কোড লেখঃ

UnOrder List

§ Bangla

§ English

§ ICT

§ Physics

<!DOCTYPE html>

<html>

<head>

<title> UnOrder List </title>

</head>

<body>

<ul type=“square”>

<li> Bangla</li> <li> English </li>

<li> ICT</li> <li> Physics</li>

</ul>

</body>

</html>

Nested List:একটি লিস্টের মধ্যে যখন অন্য একটি লিস্ট তৈরি করা হয়, তখন তাকে নেস্টেড লিস্ট বলে। এক্ষেত্রেঅর্ডারড লিস্টের মধ্যে আনঅর্ডারড লিস্ট থাকতে পারে এবং আনঅর্ডারড লিস্টের মধ্যে অর্ডারড লিস্ট থাকতে পারে। আবার অর্ডারড লিস্টের মধ্যে অর্ডারড লিস্ট এবং আনঅর্ডারড লিস্টের মধ্যে আনঅর্ডারড লিস্টও থাকতে পারে।
পাশের চিত্রের মত একটি ওয়েব পেজ তৈরি করার জন্য প্রয়োজনীয় HTML কোড লেখঃ

<!DOCTYPE html>

List

1. Shakib

2. Tamim

3. Rahim

4. Mominul

§ Bangla

§ English

<html>

<head>

</head>

<body>

<ol type=“1”>

<li> Shakib</li> <li>Tamim </li>

</ol>

<ul type=“square”>

<li> Bangla</li> <li> English </li>

</ul>

</body>

</html>

¨ Description List: ওয়েবপেইজে কোন টার্ম এবং তার বর্ণনা সহকারে কোন লিস্ট তৈরি করতে ডেসক্রিপশন লিস্ট ব্যবহৃত হয়। ডেসক্রিপশন লিস্ট তৈরি করার জন্য ডেসক্রিপশন লিস্ট (<dl> </dl>) ট্যাগ ব্যবহৃত হয়। ডেসক্রিপশন লিস্ট ট্যাগ এর মধ্যে টার্ম এবং ডেসক্রিপশন তৈরির জন্য যথাক্রমে <dt> </dt> এবং <dd></dd> ট্যাগ ব্যবহৃত হয়। <dt> এবং <dd> এদের ক্লোজিং ট্যাগ না দিলেও সমস্যা নেই।

<dl> <dt> Coffee </dt> <dd> black hot drink </dd> <dt> Milk </dt> <dd> white cold drink </dd> </dl>

ওয়েবপেইজে বাংলা লিখার নিয়মঃ

<!DOCTYPE html>

First Page

চট্টগ্রাম বিশ্ববিদ্যালয়

<head>

<title> First Page </title>

</head>

<body>

চট্টগ্রাম বিশ্ববিদ্যালয়

</body>

</html>

এখানে charset=”utf-8” দিয়ে বুঝানো হয়েছে যে লেখাগুলো দেখানোর জন্য UTF-8 ক্যারেক্টার সেট বা অক্ষর সমষ্টি ব্যবহার করতে হবে। UTF-8 জনপ্রিয় একটি ইউনিকোড ক্যারেক্টার সেট। এটি বাংলা লেখা সমর্থন করে।
পাশের চিত্রের মত একটি ওয়েব পেজ তৈরি করার জন্য অথবা ওয়েব পেজে আন অর্ডার লিস্ট তৈরি করার জন্য প্রয়োজনীয় HTML কোড লেখঃ

UnOrder List

§ Maheskhali

§ Pekua

o Rajakhali

o Toitong

o Maghnama

§ Kutubdia

<!DOCTYPE html>

<html>

<head>

<title> UnOrder List </title>

</head>

<body>

<ul type= “square”>

<li> Maheskhali</li> <li> Pekua</li>

<ul type= “circle”>

<li> Rajakhali</li> <li> Toitong</li> <li> Maghnama</li>

</ul>

<li> Kutubdia</li>

</ul>

</body>

</html>

ওয়েবসাইট হোস্টিং বা পাবলিশিং বলতে কী বোঝ? ওয়েবসাইট হোস্টিং এর ধাপসমূহ:

ওয়েবসাইট হোস্টিং:

একটি ওয়েবসাইটকে ইন্টারনেটের সাথে সংযুক্ত সার্ভারে রেখে দিলে পৃথিবীর যেকোন কেউ যেকোনো প্রান্ত থেকে ইন্টারনেটের সাথে যুক্ত হয়ে ওয়েব সাইটটি দেখতে পারবে।একটি ওয়েবসাইট তৈরির মূল উদ্দেশ্য হল সেটি যেন বিশ্বের যেকোন স্থান থেকে যেকোন সময় ওয়ার্ল্ড ওয়াইড ওয়েবের মাধ্যমে ব্যবহারকারী দেখতে পারে। একটি ওয়েবসাইটকে ওয়ার্ল্ড ওয়াইড ওয়েব বা ইন্টারনেটে প্রকাশের প্রক্রিয়াকেই ওয়েবসাইট পাবলিশিং বলা হয়ে থাকে। এজন্য একটি ওয়েবসাইট তৈরি করার পর সেটিকে সার্ভারে সংরক্ষন করতে হয় (যেটিকে হোস্টিং বলা হয়ে থাকে) এবং পাশাপাশি এটিকে সনাক্ত করার জন্য এর অদ্বিতীয় নামকরণের প্রয়োজন হয় (যেটি ডোমেইন নেইম হিসাবে অভিহিত)।অর্থাৎ কোন ওয়েবসাইটকে ইন্টারনেটের মাধ্যমে বিশ্বব্যাপী ছড়িয়ে দেওয়াকে ওয়েবসাইট হোস্টিং বা পাবলিশিং বলে।

ওয়েবসাইট হোস্টিং এর ধাপসমূহ:

১। ডোমেইন নাম নির্বাচন

২। ডোমেইন নেইম রেজিস্ট্রেশন

৩। ডোমেইন-হোষ্টিং

৪। আপলোডিং

ডোমেইন নাম নির্বাচনঃ

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

ডোমেইন টাইপ দুই ধরনের হয়ে থাকে। যথাঃ

১। টপ লেভেল ডোমেইন (Top Level Domain)

২। কান্ট্রি ডোমেইন (Country Domain) যেমন: http://www.educationboard .gov .bd

ডোমেইন নাম টপ লেভেল ডোমেইন কান্ট্রি ডোমেইন

ডোমেইন নেইম রেজিস্ট্রেশন:

একটি ইউনিক (Unique) ডোমেইন নাম নির্বাচন করার পর তা রেজিস্ট্রেশন করতে হয়।ডোমেইন রেজিস্ট্রেশন করে এমন অনেক কোম্পানি রয়েছে। কোম্পানিগুলোর নিজস্ব কিছু নিয়মকানুন এবং ফি নির্ধারিত আছে। যে কেউ ফি পরিশোধ করে পছন্দ মতো ডোমেইন নেইম রেজিস্ট্রেশন করতে পারে। রেজিস্ট্রেশনের পূর্বে কিছু বিষয় সম্পর্কে জানতে হবে। যেমন– যে নামে রেজিস্ট্রেশন করতে ইচ্ছুক সে নাম অন্য কেউ ব্যবহার করে কিনা চেক করতে হবে। কারণ একই নামে দুটি রেজিস্ট্রেশন হয় না। রেজিস্ট্রেশনটি নিজের নামে নাকি কোম্পানির নামে হবে। ডোমেইনের সকল প্রশাসনিক ক্ষমতা, বিল ইত্যাদি কার নামে হবে। কার মাধ্যমে ডোমেইন রেজিস্ট্রেশন করানো হবে। বিলিং পদ্ধতি কী হবে তা নির্ধারণ করতে হবে। ডোমেইন নেইম রেজিস্ট্রেশন করে এমন কিছু কোম্পানি বা ISP(Internet Service Provider), যেমন- GoDaddy.com, Hostgator.com ইত্যাদি। অর্থের বিনিময়ের পাশাপাশি বিভিন্ন কোম্পানি আছে যারা ফ্রি ডোমেইন নেইম রেজিস্ট্রেশন সার্ভিস প্রদান করে। যেমন- 000webhost.com, freehosting.com ইত্যাদি। এই ক্ষেত্রে টপ লেভেল ডোমেইন এবং কান্ট্রি ডোমেইন এর জন্য পৃথক পৃথকভাবে সংশ্লিষ্ট কর্তৃপক্ষের অনুমোদন নিতে হয়। বাংলাদেশের জন্য .bd ডোমেইনের অনুমোদন দিয়ে তাকে BTCL(Bangladesh Telecommunication Limited) এবং বিশ্বের নাম নিয়ন্ত্রণ করে ICANN (Internet Corporation for Assigned Names and Number)

ডোমেইন-হোষ্টিং:

একটি ডোমেইন নাম নির্বাচন এবং রেজিস্ট্রেশনের পর ওয়েবসাইট হোস্টিং করতেই হবে। ওয়েবসাইটের জন্য তৈরিকৃত ওয়েবপেইজগুলোকে একটি রেজিস্ট্রেশনকৃত ডোমেইন এর আন্ডারে কোন ওয়েব সার্ভারে হোস্ট করাকে ওয়েবপেইজ হোস্টিং বলা হয়। ওয়েব সার্ভার বলতে বিশেষ ধরনের হার্ডওয়্যার ও সফটওয়্যারকে বুঝায় যার সাহায্যে ঐ সার্ভারে রাখা কোনো উপাত্ত/তথ্য ইন্টারনেটের মাধ্যমে এক্সেস করা যায়। সারা বিশ্বে অনেক হোস্টিং সার্ভিস প্রোভাইডার রয়েছে যারা অর্থের বিনিময়ে ব্যবহারকারীর প্রয়োজন অনুযায়ী হোস্টিং সার্ভিস প্রদান করে। যেমন- GoDaddy.com, Hostgator.com ইত্যাদি।

ওয়েব হোস্টিং ক্রয় করার আগে নিচের বিষয়গুলো বিবেচনায় নিতে হবেঃ

১। সার্ভার এর কনফিগারেশন

২। ডিস্ক স্পেস

৩।হোস্টিং প্রতিষ্ঠান

৪। কন্ট্রোল প্যানেল

আপলোডিং: ওয়েব সার্ভার এবং হোস্টিং প্রতিষ্ঠান নির্বাচন করার পর ওয়েব পেইজ গুলো কে FTP (File Transfer Protocol) প্রটোকল ব্যবহারের মাধ্যমে সার্ভার আপলোড করতে হবে।

ওয়েবসাইটের কাঠামো বলতে কি বুঝ? বিভিন্ন প্রকার ওয়েবসাইট কাঠামো বর্ণনা দাওঃ

ওয়েবসাইট কাঠামোঃ

একটি ওয়েবসাইট এক বা একাধিক ওয়েব পেজের সমন্বয়ে তৈরি এবং ওয়েব পেজ গুলো পরস্পর সংযুক্ত অবস্থায় থাকে।যে প্রক্রিয়ায় বা কাঠামোতে ওয়েবপেজ গুলোকে সংযুক্ত করে ওয়েবসাইট তৈরি করা হয়, তাকে ওয়েবসাইট এর কাঠামো বলে।একটি ওয়েবসাইটে সাধারণত তিন ধরণের ওয়েবপেইজ থাকে। যেমন– হোম পেইজ, মূল ধারার পেইজ এবং উপধারার পেইজ।

হোম পেইজঃ

কোন ওয়েবসাইটে প্রবেশ করলে প্রথম যে পেইজটি প্রদর্শিত হয় তাকে হোম পেইজ বলে। হোম পেইজে সাধারণত প্রতিষ্ঠান সম্পর্কে সংক্ষিপ্ত তথ্য, লক্ষ ও উদ্দেশ্য ইত্যাদি উপস্থাপন করা হয় এবং মূল ধারার পেইজগুলো মেনুবারে সংযুক্ত করা হয়। হোম পেইজের এই মেনুবারকে মেইন সেকশন বা site index বলা হয়।

মূল ধারার পেইজঃ

মূল ধারার পেইজগুলোতে সাধারণত একটি নির্দিষ্ট বিভাগের তথ্য থাকে এবং পেইজগুলো হোম পেইজের মেনুবারে সংযুক্ত থাকে। যেমন- একটি বিশ্ববিদ্যালয়ের ওয়েবসাইটের হোম পেইজের মেনুবারে বিভিন্ন বিভাগের পেইজগুলো সংযুক্ত থাকে। প্রতিটি বিভাগের জন্য পেইজগুলোকে মূল ধারার পেইজ বলা হয়।

উপধারার পেইজঃ

উপধারার পেইজগুলোতে একটি নির্দিষ্ট বিষয় সম্পর্কে বিস্তারিত তথ্য থাকে এবং পেইজগুলো মূল ধারার পেইজের সাথে সংযুক্ত থাকে। যেমন- একটি বিশ্ববিদ্যালয়ের ওয়েবসাইটের হোম পেইজের মেনুবারে বিভিন্ন বিভাগের পেইজগুলো সংযুক্ত থাকে। প্রতিটি বিভাগের জন্য পেইজগুলোকে মূল ধারার পেইজ বলা যায়। আবার প্রতিটি বিভাগের জন্য ভর্তি তথ্য, সিলেবাস, নোটিশ ইত্যাদির বিস্তারিত তথ্য উপস্থাপনের জন্য পেইজ থাকে। এই পেইজগুলোকে উপধারার পেইজ বলা হয়।

প্রকারভেদঃ ওয়েবসাইটের কাঠামো চার প্রকার। যথাঃ

১। লিনিয়ার বা সিকুয়েন্সিয়াল কাঠামো

২। ট্রি বা হায়ারার্কিক্যাল কাঠামো

৩। ওয়েব লিংক বা নেটওয়ার্ক কাঠামো

৪। হাইব্রিড বা মিশ্র বা কম্বিনেশনাল কাঠামো

লিনিয়ার বা সিকুয়েন্সিয়াল কাঠামোঃ

লিনিয়ার শব্দের অর্থ একটির পর একটি অর্থাৎ পরপর। যে কাঠামোতে ওয়েব পেজ একটির পর একটি অর্থাৎ সিকুয়েন্সিয়ালি যুক্ত হয়ে ওয়েবসাইট তৈরি করে, তাকে লিনিয়ার কাঠামো বলে। কোন একটি পেইজের পর কোন পেইজে যাওয়া যাবে তা ওয়েবপেইজের ডিজাইনার ঠিক করে থাকে। পেইজগুলোতে Next, Previous, first ও last ইত্যাদি লিংকের মাধ্যমে Visitor প্রতিটি পেইজ দেখতে পারে।বই, ম্যাগাজিন এবং অন্যান্য সমস্ত মুদ্রণের বিষয়গুলো যদি ওয়েবসাইটের মাধ্যমে পড়ার ব্যবস্থা করা হয় তখন এই ধরণের কাঠামো ব্যবহৃত হয়।যেসকল ওয়েবসাইটে ওয়েবপেইজ এর সংখ্যা বেশি সে ক্ষেত্রে লিনিয়ার কাঠামো খুব বেশি কার্যকর নয়।

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

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

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

১। হোমপেজ/ মেইন পাইজ

২। মেইন সেকশন

৩। সাব সেকশন

ওয়েব লিংক বা নেটওয়ার্ক কাঠামোঃ

যে কাঠামোতে প্রত্যেকটি ওয়েবপেইজ অন্যান্য সবগুলো পেজের সাথে লিংক বা সংযুক্ত অবস্থায় থাকে, তাকে ওয়েব লিংক বা নেটওয়ার্ক কাঠামো বলে। এক্ষেত্রে প্রতিটি ওয়েবপেজে একটি (Common Menu) থাকে, যেখানে অন্যান্য পেজ গুলোর লিংক থাকে।এই কাঠামোটি ওয়েবসাইটের জন্য সবচেয়ে কম ব্যবহৃত কাঠামো। কারণ এটি ব্যবহারকারীর পক্ষে বুঝা এবং ভবিষ্যদ্বাণী করা অনেক কঠিন। এই কাঠামোটি ছোট ওয়েবসাইটের জন্য খুবই ভালো যেখানে অনেক লিংকের লিস্ট থাকে। এটি উচ্চ শিক্ষিত বা অভিজ্ঞ ব্যবহারকারীদের জন্য উপযুক্ত।

হাইব্রিড বা মিশ্র বা কম্বিনেশনাল কাঠামোঃ

যখন একটি ওয়েবসাইটের ওয়েবপেইজগুলো একাধিক ভিন্ন কাঠামো দ্বারা একে-অপরের সাথে সংযুক্ত থাকে, তখন ঐ ওয়েবসাইটের কাঠামোকে কম্বিনেশনাল বা হাইব্রিড কাঠামো বলে। অধিকাংশ ওয়েবসাইটের কাঠামো হাইব্রিড হয়ে থাকে। উদাহরণস্বরূপ– কিছু ওয়েবপেইজ ক্রমান্বয়ে যুক্ত এবং কিছু ওয়েবপেইজ স্তর স্তরে যুক্ত।

IP অ্যাড্রেসঃ

IP এর পূর্ণরূপ হল Internet Protocol. ইন্টারনেটের সাথে সংযুক্ত প্রতিটি যন্ত্র ( যেমনঃ কম্পিউটার,মোবাইল ফোন ইত্যাদি) কে আলাদাভাবে শনাক্ত করার জন্য নাম্বার ভিত্তিক যে এড্রেস ব্যবহার করা হয়, তাকে IP Address বলে। IP Address হচ্ছে ইন্টারনেটে একটি নির্দিষ্ট যন্ত্রের ঠিকানা। IP Address এর দুটি version রয়েছে।

IPV4 (Internet Protocol Version 4)
IPV6 (Internet Protocol Version 6)

বর্তমানে IPV4 Version টি বহুল ব্যবহৃত হয়। প্রতিটি IP Address এর দুটি অংশ বিদ্যমান। একটি নেটওয়ার্ক এবং অপরটি Host অংশ। যেমনঃ 192.168.10.5 এই IP Address টির Network অংশ 192.168.10 এবং Host অংশ হল 5.

IPV4:

IPV4 এ প্রতিটিআইপি অ্যাড্রেসকে প্রকাশের জন্য মোট চারটি অংশ বা অকটেট থাকে এবং প্রতি অংশে ৮ বিট অর্থাৎ মোট ৩২ বিট প্রয়োজন।প্রতিটি অকটেট ডট (.) দ্বারা পৃথক করা হয়।
IPV4 এর অ্যাড্রেস সাধারণত Decimal ফরম্যাটে লেখা হয়।
প্রতিটি অংশের ডেসিমেল সংখ্যাটি ০ থেকে ২৫৫ এর মধ্যে কোন একটি সংখ্যা হয়।যেমন: 27.61.137
IPV4 এ মোট২^৩২ বা 4,294,967,296 সংখ্যক অদ্বিতীয় অ্যাড্রেস পাওয়া যায়।
এটি বৃহৎ সংখ্যার মতো মনে হলেও বিশ্বজুড়ে ইন্টারনেটে সংযুক্ত সমস্ত ডিভাইসগুলো কভার করার জন্য এটি আর যথেষ্ট নয়।অতএব, অনেক ডিভাইস এখন IPV6 ব্যবহার করে।

IPV4 (32 bit) 5 টি অংশে বিভক্ত। যথাঃ

Class A- (0-127) Network অংশ 8 বিট, Host অংশ 24 বিট
Class B (128-191) Network অংশ 16 বিট, Host অংশ 16 বিট
Class C (192-223) Network অংশ 24 বিট, Host অংশ 8 বিট
Class D (224-239) Multicast এর জন্য
Class E (240-255) গবেষণা করার জন্য

IPV6:

IPV6 এ প্রতিটিআইপি অ্যাড্রেসকে প্রকাশের জন্য মোট আটটি অংশ থাকে এবং প্রতি অংশে ১৬ বিট অর্থাৎ মোট ১২৮ বিট প্রয়োজন।প্রতিটি ভাগ ডট (:) দ্বারা পৃথক করা হয়।
IPV6 এর অ্যাড্রেস সাধারণত Hexadecimal ফরম্যাটে লেখা হয়।
যেমন:2001:cdba:0000:0000:0000:0000:3257:9652. এক্ষেত্রে শূন্যগুলো বাদ দেওয়া যেতে পারে। অর্থাৎ 2001:cdba::3257:9652 লেখা যেতে পারে।
IPV6 দ্বারা মোট ২^১২৮বা 4 x 10³⁸or 340 undecillion সংখ্যক অদ্বিতীয় অ্যাড্রেস তৈরি করা সম্ভব।

DNS:

DNS এর পূর্ণরূপ হল Domain Name System. IP Address গুলো Number দিয়ে লেখা তাই মানুষের পক্ষে একাধিক IP Address মনে রাখা বেশ কঠিন। এই কঠিন ব্যাপারটিকে সহজ করার জন্য ইন্টারনেটে Domain Name System (DNS) নামে একটি পদ্ধতি ব্যবহার করা হয়। IP Address এর বিপরীতে ক্যারেক্টার ফর্মে দেওয়া এই নামটি Domain Name বলে। এবং এটি কে নিয়ন্ত্রণ করে DNS.এককথায়, ডোমেইন নেইম হচ্ছে একটি স্বতন্ত্র টেক্সট অ্যাড্রেস যা কোন ওয়েব সার্ভারের আইপি অ্যাড্রেসকে প্রতিনিধিত্ব করে।Domain Name প্রদানকারী সংস্থা গুলো সাধারণত এই ধরনের Domain Name প্রদান করে থাকে।প্রতিটি ডোমেইন নেইম এর দুটি প্রধান অংশ ও একটি ঐচ্ছিক অংশ থাকে। যেমনঃ

১। সেকেন্ড-লেভেল ডোমেইন (SLD)

২। টপ-লেভেল ডোমেইন (TLD)

৩। থার্ড-লেভেল ডোমেইন বা সাব-ডোমেইন (ঐচ্ছিক)

১. সেকেন্ড–লেভেল ডোমেইনঃ

সেকেন্ড-লেভেল ডোমেইন সাধারণত প্রতিষ্ঠানের নামের সাথে সামঞ্জস্যপূর্ণ থাকে। সেকেন্ড-লেভেল ডোমেইনকে অনেক সময় ডোমেইনও বলা হয়। ডোমেইন নামকরনের ক্ষেত্রে কোন স্পেস ও স্পেশাল ক্যারেক্টার(@, &, %, $, # etc.) ব্যবহার করা যায় না। শুধু বর্ণ ও সংখ্যা ব্যবহার করা যায়। ডোমেইনে ব্যবহৃত বর্ণগুলো কেস সেনসিটিভ নয়।

২. টপ–লেভেল ডোমেইন (TLD):

TLD দ্বারা প্রতিষ্ঠানের ধরণ এবং প্রতিষ্ঠানটি কোন দেশের তা বুঝা যায়। TLD এর দুইটি অংশ।

যেমনঃ

১। জেনেরিক ডোমেইন

২।কান্ট্রি ডোমেইন

জেনেরিক ডোমেইনঃ

জেনেরিক ডোমেইন যা প্রতিষ্ঠানটির ধরণ নির্দেশ করে ।যেমনঃ

.com- বাণিজ্যিক প্রতিষ্ঠান
.edu/.ac-শিক্ষামূলক প্রতিষ্ঠান
.int-আন্তর্জাতিক প্রতিষ্ঠান
.org-সেবামূলক বা অলাভজনক প্রতিষ্ঠান
.mil-সামরিক প্রতিষ্ঠান
.net-নেটওয়ার্ক প্রতিষ্ঠান
.info-তথ্য সংক্রান্ত প্রতিষ্ঠান
.gov -সরকারি প্রতিষ্ঠান

কান্ট্রি ডোমেইনঃ

ওয়েব অ্যাড্রেস এর একেবারে শেষের অংশ যা প্রতিষ্ঠানটি কোন দেশের তা নির্দেশ করে। কান্ট্রি ডোমেইন সকল ওয়েবসাইটের জন্য অত্যাবশ্যকীয় নয়।যেমনঃ www.edupoint.com.bd । এই ওয়েব অ্যাড্রেস এর একে বারে শেষে bd লেখা আছে। অর্থাৎ, এই ওয়েবসাইটটি বাংলাদেশের নির্দেশ করে। .bd -বাংলাদেশের কান্ট্রি কোড, .uk- United Kingdom, .us- United States, .in-India, .au-Australia, .cn-China, .ru- Russia, .fr-France, .ca-Canada.

৩. সাব-ডোমেইন (থার্ড-লেভেল ডোমেইন):

সাব-ডোমেইন মূল ডোমেইনের অংশ যাকে থার্ড-লেভেল বা তৃতীয় স্তরের ডোমেইনও বলা হয়। একটি ডোমেইন এর সাব-ডোমেইন থাকতেও পারে নাও পারে। একটি ওয়েবসাইটকে বিভিন্ন সেকশনে ভাগ করতে সাব-ডোমেইন ব্যবহৃত হয়। যেমন- www.google.com একটি ডোমেইন যার সাব-ডোমেইন হল maps.google.com, mail.google.com ইত্যাদি। অর্থাৎ, google এর maps সেকশনটি আলাদা করতে maps.google.com সাব-ডোমেইন ব্যবহৃত হয় এবং google এর mailসেকশনটি আলাদা করতে mail.google.com সাব-ডোমেইন ব্যবহৃত হয়।

পাশের চিত্রের মত একটি ওয়েব পেজ তৈরি করার জন্য প্রয়োজনীয় HTML কোড লেখঃ

<!DOCTYPE html>

<html>

Table with Picture

Miskat

Link

Google

<head>

<title> Table</title>

</head>

<body>

<tr>

<th align= “center”> <u> Miskat </u> </th>

</tr>

<tr>

<td align= “center”> <a href= “www.google.com> Google </a> </td>

</tr>

</table>

</body>

</html>

THE END