[full guideline]__HSC__ ICT chapter – 4. ওয়েব ডিজাইন পরিচিতি ও HTML. বিস্তারিত পোস্টে।

আসসালামু আলাইকুম।
সবাই কেমন আছেন?
আল্লাহর রহমতে আমি ভালোই আছি
বরাবরের মতো আমি আজকেই একটি পোস্ট নিয়ে হাজির হয়েছি । কি সম্পর্কে আজকে আমি পোস্ট করেছি তা আপনারা টাইটেল দেখেই বুঝে গিয়েছেন। তো আমি পোস্টের শুরুতে বেশি কথা বলবো না।
আজ আমি আপনাদের সাথে ওয়েব ডিজাইন পরিচিতি ও HTML এই অধ্যায় নিয়ে আলোচনা করবো। এই অধ্যায় টা HSC শিক্ষার্থীদের জন্য অনেক গুরুত্বপূর্ণ একটা অধ্যায়। কারণ এই অধ্যায় থেকে প্রতি বছরই একটা না একটা সৃজনশীল প্রশ্ন আসেই। আবার কয়েকবার দুইটা প্রশ্নও আসে। তাই এটা একটি গুরুত্বপূর্ণ অধ্যায়।
তো চলুন বেশি কথা না বলে সরাসরি পোস্টে চলে যায়।
বিস্তারিত পোস্টঃ

HSC ICT (chapter=4)
ওয়েব ডিজাইন ও HTML
তুমি একটা ওয়েবসাইট ভিজিট করছ। সুন্দর করে সাজানো Content ও Transparent Red Colour এর হোমপেজ দেখে হঠাৎ তোমার ইচ্ছা হল, তুমি ওয়েব ডিজাইন করবে, কিন্তু কিভাবে?
ডিজাইন বলতে কি বোঝায়?
ডিজাইন বলতে কি বোঝায়? সহজ ভাবে আমরা বুঝি কোন কিছু নকশা করা, রং করা, আঁকা, সুন্দরভাবে সমন্বয় করে-সাজিয়ে উপস্থাপন, এসব। ওয়েব ডিজাইন বিষয় টা ঠিক তাই। তুমি একটা ওয়েবসাইট এর বিভিন্ন বিষয় ও তথ্য কিভাবে এবং কত সুন্দর ভাবে সাজিয়ে ঐ ওয়েবসাইটের ওয়েব পেজ এ উপস্থাপন করতে পার, সেটাই ওয়েব ডিজাইন। সাধারণত ডিজাইন মানেই রং-তুলি, পেন্সিল…ইত্যাদি দিয়ে কাজ; তাহলে তুমি এখন ভাবতে পারো, এসব রং-তুলি, পেন্সিল ইত্যাদি দিয়ে কিভাবে ওয়েব ডিজাইন করবে?
আসলে ওয়েব ডিজাইনের আসল কাজ করতে এসব রং-তুলি বা পেন্সিলের দরকার হয় না। তাহলে কী দরকার হয়?
দরকার হয় ইন্টারনেট সংযুক্ত ইলেক্ট্রনিক ডিভাইস। এক্ষেত্রে কম্পিউটার হলে কাজ টা সাচ্ছন্দে করা যায়; আজ-কাল মোবাইল দিয়েও ওয়েব ডিজাইন করা যায়। আরও দরকার হয় তোমার জ্ঞান, দক্ষতা, অভিজ্ঞতা। ওয়েব ডিজাইন জানার আগে তোমাকে কিছু বিষয়ে ধারণা রাখতে হবে। যেমন ওয়েব পেজ (Web Page), ওয়েবসাইট (WebSite), ওয়েব পোর্টাল (Web Portal), আইপি অ্যাড্রেস (IP Address) , ডোমেইন নেইম , ওয়েব ব্রাউজার ইত্যাদি। ওয়েব পেজ (Web Page) Web Page মূলত একটা ডকুমেন্ট ফাইল যা Hyper Text Markup Language(HTML) দ্বারা তৈরি করা হয়। HTML কী তা আমরা একটু পরেই বিস্তারিতভাবে জানব। ইন্টারনেট ব্যবহারকারিদের দেখা বা ব্যবহারের সুবিধার্থে বিভিন্ন দেশের ওয়েব সার্ভারএ রাখা HTML ফাইল কে Web Page বলে। এই HTML ফাইল বিভিন্ন ধরণের ও বিন্যাস বা Format এর তথ্য সম্বলিত থাকতে পারে। যেমন ডেটা ফাইল হিসেবে pdf, docs, ppt ছবি ও গ্রাফিক্স ফাইল হিসেবে jpg, png, gif অডিও ফাইল হিসেবে mp3, amr; ভিডিও ফাইল হিসেবে mp4, avi, mkv, mpeg অবস্থান ভিত্তিতে দুই ধরণের Web Page আছে Local Web Page এই ধরণের ওয়েবপেইজ গুলো ইন্টারনেটের সাথে সম্পর্কযুক্ত না। সাধারণত সোর্সড্রাইভ ও ডিরেক্টরি অথবা সার্ভার থেকে কোন ধরণের ইন্টারনেট সংযোগ ছাড়াই এই ওয়েবপেইজ গুলো তে Access নেয়া বা ব্যবহার করা যায়। এর সবচেয়ে ভাল উদাহরণ হল স্থানীয় ব্রডব্যান্ড কোম্পানিগুলোর তাদের গ্রাহক সেবা দিতে তৈরি নিজস্ব মুভি বা ডাউনলোড সার্ভারের ওয়েবসাইট এর ওয়েবপেইজ। Remote Web Page
তুমি কোন কিছু Search করতে Google কিংবা Wikipedia; এসব ধরণের ওয়েবসাইট ভিজিট করো, তার ওয়েবপেইজ গুলোকেই বলা হয় Remote Web Page। এটার জন্য ইন্টারনেট সংযোগ Must থাকার লাগবে কারন এগুলো সবার ব্যবহারের জন্য বিভিন্ন দেশের সার্ভার এ সংরক্ষিত থাকে। মানে একটা নেটওয়ার্কে থাকে। তার মানে ইন্টারনেট ছাড়া এই ধরণের ওয়েবপেইজ ভিজিট বা ব্যবহার করতে পারবে না।

ওয়েবসাইট (Website)
ইন্টারনেট এ এক বা একাধিক ওয়েবপেইজ সম্বলিত ফাইল এর অবস্থান বা ঠিকানা (Address) কে Website বলে।
গঠন বৈচিত্র্যের উপর ভিত্তি করে ওয়েবসাইট দুই ধরণের-
১. স্ট্যাটিক ওয়েবসাইট (Static Website): যে সকল Website এর ডেটার মান ওয়েব পেইজ লোডিং বা চালু করার সময় পরিবর্তন করা যায় না, তাকে Static Website বলে। Hyper Text Markup Language(HTML) দ্বারা এই ওয়েবসাইট তৈরি করা হয়। ব্রডব্যান্ড কোম্পানিগুলোর ওয়েবসাইট। স্ট্যাটিক ওয়েবসাইট এর বৈশিষ্ট্য ওয়েবসাইটের কনটেন্ট নির্দিষ্ট থাকে।
চালু অবস্থায় কনটেন্ট আপডেট করা যায় না।
কোন ডেটাবেজ থাকে না । অর্থাৎ কেবলমাত্র সার্ভার থেকে ক্লায়েন্টে বা গ্রাহকে একমুখী কমিউনিকেশন হয়। খুব দ্রুত লোড হয়।

HTML এবং CSS means Cascading Style Sheets (সিসকেডিং স্টাইল শিট) দিয়েই একটি ওয়েবসাইট তৈরি করা যায়। স্ট্যাটিক ওয়েবসাইট এর সুবিধা এ ধরণেরর ওয়েবসাইট খুব সহজে তৈরী ও নিয়ন্ত্রন করা যায় । ডায়ানমিক ওয়েবসাইটের চেয়ে খুব সহজে ডিজাইন করা যায় । খুব সহজেই সার্চ ইঞ্জিন পরিচালনা করা যায় ।
কনটেন্টগুলো সহজে নিয়ন্ত্রন করা যায় ।
সহজেই ওয়েবপেজের লে-আউট চেঞ্জ করা যায় ।
খুব দ্রুততার সাথে এসব ওয়েবসাইট থেকে খুব কম নেট স্পীডেও ডাটা নামানো বা ডাউনলোড করা যায় । খরচ কম স্ট্যাটিক ওয়েবসাইট এর অসুবিধা
কনটেন্ট কোডিং বা প্রোগ্রামিং করে আপডেট করতে হয়। তাই সময় বেশি লাগে।
ব্যবহারকারীর কাছ থেকে ইনপুট নেওয়ার ব্যাবস্থা থাকে না। কনটেন্ট বেশি হলে নিয়ন্ত্রণ করা কঠিন হয়ে যায়।
২. ডাইনামিক ওয়েবসাইট (Dynamic Website): যে সকল Website এর ডেটার মান ওয়েব পেইজ লোডিং বা চালু করার সময় পরিবর্তন করা যায়, তাকে Dynamic Website বলে। এর সবচেয়ে ভাল উদাহরণ হল Facebook। এই Website তৈরির জন্য HTML এর সাথে স্ক্রিপ্টিং ভাষা বা প্রোগ্রামিং ভাষার প্রয়োজন হয়।
ডাইনামিক ওয়েবসাইটের বৈশিষ্ট্য
চালু অবস্থায় কোড পরিবর্তন না করেই কনটেন্ট যুক্ত , ডিলিট এবং আপডেট করা যায়।
ডেটাবেজ থাকায় কুয়েরি করে তথ্য বের করা যায়।
সার্ভার থেকে ক্লায়েন্টে এবং ক্লায়েন্ট থেকে সার্ভারে উভমুখী কমিউনিকেশন হয়।
ডাইনামিক ওয়েবসাইট তৈরি করার জন্য HTML,CSS এর সাথে স্ক্রিপ্টিং ভাষা যেমন- PHP, ASP ইত্যাদি এবং এর সাথে ডেটাবেজ যেমন- MySQL বা SQL ইত্যাদি ব্যবহার করা হয়।
ডাইনামিক ওয়েবসাইটের সুবিধা চালু অবস্থায় কোড পরিবর্তন না করেই কনটেন্ট যুক্ত , ডিলিট এবং আপডেট করা যায়। নির্ধারিত ব্যবহারকারীর জন্য নির্ধারিত পেইজ প্রদর্শনের ব্যবস্থা করা যায়। অর্থাৎ ব্যবহারকারীর প্রোফাইল তৈরি করা যায়।
সার্ভার থেকে ক্লায়েন্টে এবং ক্লায়েন্ট থেকে সার্ভারে উভমুখী কমিউনিকেশন হয়। অনেক বেশি তথ্যবহুল হতে পারে । আকর্ষণীয় Lay out বা বিন্যাস তৈরি করা যায়। ডাইনামিক ওয়েবসাইটের অসুবিধা
ডেটাবেজ ব্যবহিত হয় ফলে লোড হতে বেশি সময় নেয়। ওয়েবসাইট উন্নয়ন এবং নিয়ন্ত্রন করা কঠিন। ফলে খরচ বেশি।
ওয়েব সাইট এর কাঠামো
সাধারণত একটি ওয়েবসাইটের ভেতরে অনেক ওয়েব পেইজ থাকে। ওয়েবসাইটের অন্তর্গত বিভিন্ন পেইজগুলো কীভাবে সাজানো থাকবে তাই হল ওয়েবসাইটের কাঠামো। এর মাধ্যমে কোন পেইজ এ কি কি ফাইল বা কি কি ধরণের ফাইল থাকবে, কিভাবে থাকবে একটি ওয়েবসাইটে প্রবেশ করলে প্রথমে কোন পেইজ আসবে, ঐ পেইজ থেকে অন্যান্য পেইজে কীভাবে যাওয়া যাবে তা ওয়েবসাইটের কাঠামোতে ঠিক করা হয়। একটি ওয়েবসাইটের কাঠামো মূলত তিন ভাগে বিভক্ত থাকে। হোম পেইজ (Home page)
কোন ওয়েবসাইটের একদম প্রথমে যে পেইজ টা দেখো, সেটাই হোম পেইজ। এই পেইজ এ সাধারণত পরিচিতি, কনটেন্ট বা বিভিন্ন বিষয়গুলো কিভাবে, কোন পেইজ এ আছে –তা সম্পর্কে ধারণা পাওয়া যায়। মূলত হোম পেইজ এ ওয়েবসাইট এর সবগুলো সেকশন অর্থাৎ যে গুলোর অধিনে অন্যান্য কন্টেনটেড বা তথ্য সমৃদ্ধ পেইজ গুলো থাকে; কয়টা আছে, কিভাবে আছে, তা জানা যায়। অনেকটা সূচিপত্রের মতো। যেমন Search Bar এ Fahad Academy For Biology লিখে search করার পর প্রথম যে পেইজ টি দেখো, সেটাই Fahad Academy For Biology এর হোম পেইজ…!
মূলধারার পেইজ (Main sections)
নির্দিষ্ট তথ্যের জন্য হোম পেইজ থেকে অন্য পেইজ এ যেতে হয় এবং এই অন্য পেইজটিই হল Main section। সোজা কথায়, হোম পেইজ এর যেকোনো সেকশনে Click করলে যে পেইজটি দেখতে পাও, সেটাই Main section. যেমন তুমি 10 Minute School এর স্মার্ট বুক পড়তে চাও। তাহলে 10 Minute School এর হোম পেইজ এ স্মার্ট বুক সেকশনটায় Click করলে যে পেইজ দেখো, সেটাই Main Section.
উপধারার পেইজ (Sub sections)
একটি নির্দিষ্ট বিষয়ের সমস্ত তথ্য Main Section এর অধিনে যে পেইজ এ থাকে, সেই পেইজ কে Sub section বলে।
শুধুমাত্র এই তিনটি বিষয় নিশ্চিত করলেই তুমি Basic ওয়েবসাইট তৈরি করতে পারবে।
ওয়েবসাইটের বৈশিষ্ট্য অনুযায়ী উহার বিভিন্ন পেইজগুলোকে আবার চার ভাবে সাজানো যায়।
ট্রি বা হায়ারারকিক্যাল (Hierarchical)
হোম পেজে থাকা Main সেকশন থেকে Sub সেকশন ; এরপর Sub সেকশন থেকে অন্যান্য পেজ বা কন্টেন্ট পেইজ, এই রকম অনেক গুলো Main সেকশন হোম পেজের সাথে যুক্ত থাকে। এটাই ট্রি বা হায়ারারকিক্যাল। এই পদ্ধতি ব্যবহার করে ওয়েবসাইটকে বিভিন্ন অংশে ভাগ করা যায় যার মাধ্যমে ওয়েবসাইটের ভিজিটররা সহজেই বুঝতে পারে কোন অংশে তার প্রয়োজনীয় তথ্যগুলো রয়েছে। ওয়েব ডিজাইনে আরও কিছু বিষয় তোমার জানা থাকা দরকার। যেমনঃ
⭕ওয়েব পোর্টাল
ওয়েব পোর্টাল হচ্ছে এক ধরণের ওয়েবসাইট যেখানে অনেক গুলো উৎস থেকে সংগ্রহ করা বিভিন্ন তথ্য এবং গুরুত্বপূর্ণ লিঙ্ক সাজানো থাকে। একটি ওয়েব পোর্টালে সাধারণত সরকারী সেবার তথ্য, স্থানীয়, আঞ্চলিক, স্টক রিপোর্ট এবং জাতীয় খবর, এবং ই-মেইল সেবা প্রদান করে থাকে। ওয়েব পোর্টালে প্রথম পাতায় সব গুলা তথ্যের জন্য একটি ইনডেক্স বা সূচি দেয়া থাকে, যেন ব্যবহারকারীরা সহজে তার দরকারি তথ্য খুজে পায়। উদাহরণ হিসেবে বাংলাদেশ সরকারের “বাংলাদেশ জাতীয় তথ্য বাতায়ন” ওয়েবসাইট টি দেখতে পারো।
IP Address বা Internet Protocol Address
প্রত্যেক মানুষের তাদের বাসার আলাদা আলাদা ঠিকানা থাকে। তাহলে কেউ তোমাকে চিঠি বা Gift পাঠাতে চাইলে সে তোমার ঠিকানা দেয় যাতে তুমি ই চিঠি বা Gift টি পাও। তার মানে ঠিকানা তোমার অবস্থান ও তোমাকে পরিচয় নিশ্চিত করছে।
তেমনি IP Address বা Internet Protocol Address ইন্টারনেটে তথ্য আদানপ্রদানের জন্য একরকম ঠিকানা। প্রত্যেক আলাদা আলাদা যোগাযোগ মাধ্যমের জন্য আলাদা IP Address থাকে। মানে তোমার কম্পিউটার অথবা মোবাইলের নিজস্ব Address থাকে যা বিশ্বের কারও কম্পিউটার বা মোবাইলের সাথে মিলে না। এর মাধ্যমে ইন্টারনেটে তথ্য আদান প্রদান আরও সুরক্ষিত হয়। তবে কোন কোন ক্ষেত্রে IP Address পরিবর্তনশীল। যেমন ডিভাইস পরিবর্তন হলে কোন প্রতিস্থানের ওয়েবসাইট এর IP Address পরিবর্তন হওয়া ইত্যাদি।
ডোমেইন নেম
আইপি অ্যাড্রেস মনে রাখা থুব কষ্টসাধ্য ব্যাপার। এই কষ্টকর বিষয়টি সহজতর করার জন্য ইন্টানেটে Domain Name System (DNS) নামে একটি পদ্ধতি ব্যবহার করা হয়। Domain Name System হচ্ছে আইপি অ্যাড্রেস এর একটি আলফানিইমেরিক ঠিকানা। অর্থাৎ আইপি অ্যাড্রেসকে নামে Convert করার জন্য ডোমেইন নেম ব্যবহার করা হয়।
যেমন: ধরা যাক www. google. com এর আইপি অ্যাড্রেস হচ্ছে — 74.125.236.195। www. google. com হল 74.125.236.195 এই IP Address এর Domain Name.
ওয়েব ব্রাউজার
ওয়েব ব্রাউজার হলো এমন একটি সফটওয়্যার যার মাধ্যমে একজন ব্যবহারকারী যেকোনো ওয়েবপেইজ, ওয়ার্ল্ড ওয়াইড ওয়েবে অথবা লোকাল এরিয়া নেটওয়ার্কে অবস্থিত কোনো ওয়েবসাইটের যেকোনো লেখা, ছবি এবং অন্যান্য তথ্যের অনুসন্ধান, ডাউনলোড কিংবা দেখতে পারেন। অর্থাৎ যে সফটওয়্যার ইন্টারনেটের ইনফরমেশন বা ওয়েব পেজ প্রদর্শনের কাজ করে তাকে ওয়েব ব্রাউজার বলে। কোনো ওয়েবসাইটে অবস্থিত লেখা এবং ছবি একই অথবা ভিন্ন ওয়েবসাইটের সাথে আন্তসংযুক্ত (হাইপারলিংক) থাকলে একটি ওয়েব ব্রাউজার একজন ব্যবহারকারীকে দ্রূত এবং সহজে এইসকল লিঙ্কের মাধ্যমে বিভিন্ন ওয়েবসাইটে অবস্থিত অসংখ্য ওয়েবপেইজের সাথে তথ্য আদান-প্রদানে সাহায্য করে। যেমন: গুগল ক্রোম,মাইক্রোসফট ইন্টারনেট এক্সপ্লোরার, মজিলা ফায়ারফক্স, অপেরা ইত্যাদি। এভাবে ওয়েবপেজের ভিতরকার লেখা, ছবি, ভিডিও ইত্যাদির মধ্যে চলাচল করাকে ব্রাউজিং বলে.
ফুল ক্রেডিটঃ NO MA NA.
তো আজ এই পর্যন্তই। সবাই ভালো থাকবেন সুস্থ থাকবেন এই কামনা নিয়ে আজকের মতো এখানেই বিদায় নিচ্ছি।
★যদি কোনো সমস্যা বা দরকার হয় তাহলে আমার সাথে যোগাযোগ করুন নিম্নউক্ত মাধ্যমেঃ

★Email: [email protected]
.
★Facebook
আল্লাহ হাফেজ
ধন্যবাদ সবাইকে