Advertisement
  1. Web Design
  2. Kids
Webdesign

বাচ্চাদের জন্য ওয়েব ডিজাইনঃ এইচটিএমএল কনটেন্ট

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: HTML Structure
Web Design for Kids: CSS

Bengali (বাংলা) translation by Shakila Humaira (you can also view the original English article)

স্বাগতম আমাদের বাচ্চাদের জন্য ওয়েব ডিজাইন সিরিজের, এইচটিএমএল কনটেন্টের চতুর্থ অধ্যায়ে।

এই পাঠের আগের পাঠে, আমরা কিছু HTML উপাদান দিয়ে আমাদের HTML ফাইলের কাঠামো নির্মাণের জন্য কোডিং করেছি। এখন আমরা আমদের সাইটের স্ট্রাকচারে কনটেন্ট যোগ করব।

মনেরেখঃ সকল সমাপ্ত ফাইল সমূহ এখান থেকে ডাউনলোড করা যাবে এবং যদি তুমি কোন কিছু না বোঝ তাহলে এই পেজের একেবারে নিছে কমেন্ট এরিয়াতে প্রশ্ন করতে পার!

কন্টেইনারস, কন্টেইনারস, কন্টেইনারস

আমরা যখন একটি ওয়েবসাইট তৈরি করবো তখন কন্টেইনার সম্পর্কে অনেক আলোচনা করবো। সুতরাং কন্টেইনারের কাজ সম্পর্কে জানা খুবই গুরুত্বপূর্ণ।

আমাদের সকল কনটেন্ট যথাযত HTML কন্টেইনারগুলুতে স্থাপন করা জরুরী। কন্টেইনার সমূহ HTML এলিমেন্ট সমূহ নিয়ে সজ্জিত। প্রত্যেকটা এলিমেন্ট ব্রাউজারের জন্য একটা বিশেষ অর্থ বোঝায় যা ব্রাউজারকে পেজের সকল উপাদান বুঝতে সাহায্য করে।

এটাকে অন্যভাবে চিন্তা করলে উপরে আঁকা বিল্ডিংটাতে সব কিছুই আছেঃ জানালা, একটি দরজা এবং একটি ঘড়ি। তারপর যেন অন্য আরেকটি কণ্টেইনারের অনুকরনে একটি উইণ্ডোর ভিতরে Tuts+ Town designer কে দেখাচ্ছে। 

কনটেন্ট যোগ করা

আমাদের কাঠামোটি এবার সঠিকভাবে স্থাপিত হয়েছে, এখন আমরা এসব কন্টেইনারগুলোকে কনটেন্ট বা বিষয়বস্তু দিয়ে পূর্ণ করতে পারি।  আমরা পূর্ববর্তী পাঠে যে সমস্ত উপাদান আমাদের ফাইলে যোগ করেছি তা আমাদের সংগঠিত করেছে–এগুলো আমদের লেখা ও ছবি যোগ করার জন্য নির্দিষ্ট জায়গা দিয়েছে। 

চল শীর্ষ থেকে শুরু করি!

হেডার

আমরা বলেছিলাম হেডার হচ্ছে ওয়েবসাইটের সবচেয়ে উপরের অংশ এবং এর নিজস্ব এলিমেন্ট <header> রয়েছে যা আমাদের বডির মধ্যে নেস্টেড অবস্থায় থাকে।

হেডার সাধারণত কিছুটা সূচনা এবং ন্যাভিগেশন (ওয়েবসাইটে অন্যান্য খুজে পাওয়ার মাধ্যম) ধারণ করে। আমাদের ওয়েবসাইটে একটি স্বাগত সূচনা এবং পরিচ্ছন্ন ইমেজ আছে। চল যোগ করা যাক!

হেডিং

আমাদের “Welcome to Tuts+ Town” পেতে হবে যা ওয়েভসাইটটির প্রধান হেডিং

একটি ওয়েবসাইটে ছয় ধরণের হেডিং থাকে। h1 সবচেয়ে গুরুত্বপূর্ণ এবং h6 সবচেয়ে কম গুরুত্বপূর্ণ। HTML-এ সূচনার বাণী হেডিং এলিমেন্ট সমূহের মধ্যে লিখতে হয়ঃ <h1>, <h2>, <h3>, <h4>, <h5> অথবা <h6>

“Welcome To Tuts+ Town” আমাদের প্রধান হেডিং(এটা খুবই গুরুত্বপূর্ণ)। সুতরাং আমরা এটা <h1> এর ওপেনিং এবং ক্লোজিং টেগ-এর মধ্যে লিখব।

ব্রাউজার এই সামান্য লেখাটিকে সূচনা হেডিং হিসেবে শনাক্ত করবে।

শহর ইমেজ

এই হেডারে মধ্যেও আমাদের শহরের একটি সুন্দর ইমেজ রয়েছে।

“tutstown” ফোল্ডারের মধ্যে তোমাকে “images” নামের আরেকটি ফোল্ডার তৈরি করতে হবে যেখানে সব ইমেজগুলো রাখতে হবে।

ইমেজ সমূহ <img> ইলিমেন্ট দিয়ে যোগ করা হয়। আমাদেরকে টেগ-এর মধ্যে ইমেজের অবস্থান বা উৎস দিতে হয়, যেমনঃ

দেখ / পর src="images? এখানে আমরা বলেছি, "ইমেজেস ফোল্ডারের মধ্যে / এর জন্য townheader.svg ফাইলটি খোঁজ"।

তারপর <img> টেগ শেষ করার পূর্বে আমারা alt এট্রিবিউট দ্বারা একটি  ইমেজ সম্পর্কে একটা বর্ণনা যুক্ত করব।

আমরা এলিমেন্টগুলোতে এট্রিবিউট সমূহ যোগ করতে পারি যা এলিমেন্টকে আরো বোধগম্য হতে সাহায্য করে বা তারা কিভাবে কাজ করবে তা বলে দেয়। শুধু নির্দিষ্ট এট্রিবিউট সমূহ নির্দিষ্ট এলিমেন্ট সমূহের মধ্যে কাজ করে। <img> এলিমেন্টের সব সময় একটি src এবং একটি alt এট্রিবিউট থাকে।

গুরুত্বপূর্ণ! <img> হচ্ছে সেলফ-ক্লোজিং। অর্থাৎ এর ওপেনিং টেগ ক্লোজিং টেগ হিসেবেও কাজ করেঃ

চল একটু উকি মারি!

এই মুহূর্তে আমরা ব্রাউজারে আমাদের ওয়েবসাইটটি ওপেন করব এখন পর্যন্ত আমরা যা করেছি তা দেখার জন্য! “tutstown” ফোল্ডারটি খোঁজ এবং “index.html” ফাইলটিতে ডাবল-ক্লিক কর। তোমার ব্রাউজারে এই পেইজটি ওপেন হবে।

এটাই হচ্ছে আমদের ওয়েবসাইট! এখন ওয়েবসাইটটিতে তেমন কিছু নেই, কিন্তু আমরা আরো কিছু যোগ করতে যাচ্ছি। এখন থেকে তুমি তোমার ব্রাউজারে কোন পরিবর্তন দেখতে চাইলে HTML ফাইলটি সেভ করবে এবং ব্রাউজারের window-কে রিফ্রেশ (এড্রেস বারের ডান পাশে উপরে অ্যারো আইকন বিশিষ্ট ক্ষুদ্র বৃত্ত ব্যবহার করে) করতে হবে।

এছাড়াও, তুমি দেখতে পাবে যে আমরা এখনও মেঘ দেখতে পাচ্ছি না, কারণ আমরা হলুদ পটভূমি যোগ করি নি। আমরা পটভূমির রং, পজিশনিং এবং সাইজিং সম্পর্কে  আমাদের পরবর্তী পাঠে আরও কিছু জানবো যখন আমরা CSS হাত দিবো।

প্রধান সেকশন

আমাদের ওয়েবসাইটের প্রধান সেকশন বেশিরভাগ তথ্য অন্তর্ভুক্ত করে। আমরা আমাদের শহরের গুরুত্বপূর্ণ তথ্য সমূহ <main> এলিমেন্টের মধ্যে ধারণ করবো

সেকশন সমূহ

আমাদের ওয়েবসাইটে তিনটি সংশ্লিষ্ট গ্রুপ আছে যা আমরা তিনটি সেকশনে সাজাবো। এলিমে হচ্ছে একটি স্বতন্ত্র অংশ যা তথ্য ধারণ করে এবং এর নিজস্ব এলিমেন্টও আছেঃ <section>

আরো স্ট্রাকচারিং!

আমাদের সেকশনের ভিতর আরও ছোট কিছু ফ্রেম তৈরি করতে হবে, যেমন ইমেজের পাশে ছোট আকারের লেখার জন্য কন্টেইনারের মত।

চল আমরা এই সেকশনটি একেবারে করি। প্রত্যেক সেকশনে একটি নেস্টেড ইমেজ এবং একটি এলিমেন্ট আছে যা কিছু লেখা ধারণ করে।

প্রকৃত কনটেন্ট যোগ করার আগে চল আমরা এই স্ট্রাকচারটা দেখি

এখন, আমরা আগে ছবি যোগ সম্পর্কে বলেছিলাম। এই ফটোটি আমাদের হেডার ইমেজের নিয়মেই যোগ করব কিন্তু ফাইলটির নাম এবং বর্ণনা ভিন্ন হবে।

ডিব

<div> এলিমেন্ট হচ্ছে একটি সাধারণ কন্টেইনার এলিমেন্ট এটা আমাদের একটি পেইজের অংশগুলোকে গ্রুপ করার অনুমোদন দেয় যখন অন্য কোন এলিমেন্ট মানানসই বলে মনে হয়।

<div> হেডিং এবং দোকানে লিস্ট ধারণ করে

হেডিং

আমরা দেখি যে প্রত্যেক সেকশনে একটি ছোট হেডিং রয়েছেঃ Sleep, Food, এবং Shop। হেডিং সমূহ প্রত্যেকটির ঠিক নীচে ছোট তালিকা সম্পর্কে.আমাদেরকে ধারণা দেয়। আমরা ইতিমধ্যেই আমদের সূচনাতে পেইজের একেবারে উপরে <h1> ব্যবহার করেছি। সুতরাং এইসবের জন্য আমরা <h2> ব্যবহার করব, এটার মতঃ

লিস্ট সমূহ

সাধারণত দুই ধরণের লিস্ট দেখা যায়, সাজানো (সংখ্যাসহ) এবং সাজানো ছাড়া (সংখ্যার পরিবর্তে বুলেট পয়েন্টসহ)। তারা উভয়েই তথ্য সম্পর্কিত তালিকা প্রস্তুত করার ক্ষেত্রে সত্যিই কুশলী এবং আমাদের সাইটের প্রতিটি সেকশনেই দুটি আইটেম নিয়ে একটি সংক্ষিপ্ত অনানুক্রমিক লিস্ট (<ul>) রয়েছে। 

প্রত্যেক লিস্টের মধ্যে থাকা উপাদানগুলোই লিস্ট আইটেম।  এই আইটেমগুলো আমাদের লিস্ট তৈরি করে এবং তাদের <li> টেগের ভিতর লিখা হয়। 

লিঙ্ক সমূহ

আমরা যেই লিস্টটি তৈরি করতে যাচ্ছি তা হবে বিভিন্ন শপ ওয়েবসাইটের লিঙ্ক, এতে করে আমাদের ভিজিটররা এসব লিঙ্কে ক্লিক করে আরো তথ্য পাবে।  কোন একটি শব্দকে (বা শব্দগুচ্ছ) ক্লিক সক্ষম লিঙ্ক করার জন্যকে আমদেরকে ঐ শব্দকে এংকর টেগের মধ্যে রাখতে হয়। এংকর এলিমেন্ট হচ্ছেঃ <a>

<img> এলিমেন্টে যেমন একটি বিশেষ এট্রিবিউট ছিলো, তেমনি ওপেনিং টেগ <a> তেও একটি এট্রিবিউট থাকা দরকার যাতে নির্দিষ্ট ওয়েবসাইটের ওয়েব ঠিকানাটি থাকবে যেখানে আমরা ব্যবহারকারীকে পাঠাতে চাই, এট্রিবিউটটি হচ্ছে href । 

নিচের কোডটি আমাদের "here" শব্দটির সঙ্গে যুক্ত একটি লিঙ্ক দিবে। এটা ব্যবহারকারীকে http://tutsplus.com/ এ নিয়ে যাবে। 

ঠিক এইভাবে আমরা আমাদের তালিকায় লিঙ্কগুলি যোগ করব, প্রত্যেকটা দোকানের নামের সঙ্গে একটি অ্যাংকর টেগ জুড়ে দিবো।  ওপেনিং এবং ক্লোজিং উভয় এংকর টেগ লিস্ট আইটেমের মধ্যে রাখতে হবে, দ্যা <li> পার্থক্য শুধু এটাই যে যেহেতু এগুলো আসল শপ নয়, তাই আমরা href ভ্যালুর জন্য # ব্যবহার করবো এবং এটাতে ক্লিক করলে আমাদের অন্য ওয়েবসাইটে নিয়ে যাবে না। 

এখানে তালিকাভুক্ত প্রথম দোকনের দিকে লক্ষ্য করঃ

আমরা একটি অনানুক্রমিক লিস্ট তৈরি করেছি, এবং আরও একটি লিস্ট আইটেম এই লিস্টের ভিতর রেখেছি এবং তারপর শপের নামের সঙ্গে অ্যাংকর ট্যাগ জুড়ে দিয়েছি। মনে রাখবে যে, আমরা এখনো কোনও স্টাইল যোগ করি নি তাই এখানে কমলার পরিবর্তে সচরাচর নীল রঙের লিঙ্ক প্রদর্শন করছে। 

সেকশন শেষ করা

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

এখন চল তিনটি সেকশনের জন্য কোড পর্যালোচনা করা যাক - এটা বেশ বড়!

ফুটার

<main> এলিমেন্ট এর ক্লোজিং টেগের পর প্রথম এলিমেন্ট হচ্ছে <footer>। এটা main এলিমেন্টের মধ্যে নেস্টেড অবস্থায় থাকে না

এখন আমরা আমাদের পেইজে ফুটার এলিমেন্ট যোগ করতে পারি, যেটা মূল কাঠামোর ভিতর একই লেভেলে থাকবে, কারন তারা উভয়েই body এলিমেণ্টের ভিতর শৃঙ্খলিত অবস্থায় রয়েছে। 

আমাদের ফুটারের ভিতর একমাত্র কণ্টেন্ট হবে কারা এটি তৈরি করেছে সে সম্পর্কে একটি বাক্য (আমরা করেছি!) এই কনটেন্টটি একটি <p> (প্যারাগ্রাফ) এলিমেণ্টের ভিতর থাকবে যা ফুটারের ভিতর থাকবে।

সম্পূর্ণ প্রিভিউ

তুমি উত্তেজিতভাবে HTML ডকুমেন্ট সেভ করেছ এবং ব্রাউজার রিফ্রেশ করেছ আমাদের কাজ অনুসারে? আমিও! আমরা শেষ করার পূর্বে চল চূড়ান্ত ভাবে একবার দেখিঃ

ব্যবহৃত এলিমেন্ট সমূহ ফিরে দেখা

আমরা অনেক বিভিন্ন এলিমেন্ট নিয়ে আলোচনা করেছি। এখন আমরা HTML ফাইলে যেসব এলিমেন্ট ব্যবহার করেছি সেগুলো দ্রুত পর্যালোচনা করিঃ

<html> আমাদের সব HTML ধারণ করে
<head> যেখানে আমরা ওয়েবসাইটি সম্পর্কে তথ্য রাখি
<title> ওয়েবসাইটের টাইটেল
<body> পাতার সকল কনটেন্ট ধারণ করে
<header> আমাদের স্বাগত মেসেজ ধারণ করে
<h1> এবং <h2> আমাদের হেডিং সমূহ
<img> পেজের মধ্যে একটি ইমেজ আনে
<main> মূল কনটেন্টের জন্য
<section> পেইজকে সেকশনে ভাগ করে
<div> একটি সধারণ ধারক
<ul> কিছুর unordered তালিকা
<li> একটি তালিকার মধ্যে একটি তালিকা আইটেম
<a> কোথাও লিঙ্ক দিতে ব্যবহৃত হয়
<footer> নীচের কন্টেন্ট

উপসংহার

এই কোর্সে আমরা জানলাম কিভাবে একটি চমৎকার শক্তিশালী HTML কাঠামোর ভিতর কনটেন্টে প্রবিষ্ট করতে হয় যা আমরা খালি হাতে তৈরি করেছি (ওহো সাথে একটি কম্পিউটারও ছিলো)।

পরবর্তীতে আমরা শিখবো কিভাবে এই পেইজটিকে স্টাইল করতে হয় এবং যতটা সম্ভব সুন্দর ও স্বাগতিক করতে হয়, কিন্তু সেই সাথে পড়া ও ব্যবহার করার জন্যও যাতে সহজ হয়। 

শহরের চারদিকে দেখা হবে!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.