ওয়েব ডিজাইনঃপর্ব ১(HTML)
বর্তমান
যুগ ইন্টারনেট এর যুগ।
আর এ ইন্টারনেটের যুগে জীবনে কখনো একটা ওয়েবসাইট ভিজিট করে
নাই এমন মানুষ খুব কম পাওয়া যাবে।
তো এই ওয়েবসাইট গুলোর একেকটা পেজ কিভাবে তৈরি করা হয়,
কিভাবে ওয়েবসাইটের সবগুলো পেজ একটা আরেকটার সাথে লিংকড থাকে সেটা
যদি কেউ জানতে চায় এবং নিজের একটি ওয়েবসাইট বানানোর উদ্দেশ্যে ওয়েবপেজের ডিজাইন করতে
চায় তো তাকে প্রথমে
যেটা শিখতে হবে তা হলো HTML।
HTML শিখতে
হলে প্রথমেই জানতে হবে HTML কি। HTML বা Hyper
Text Markup Language হল মূলত এমন একটি মার্ক আপ ল্যাঙ্গুয়েজ যা একটি
ওয়েবপেজ এর মূল ভিত্তি হিসেবে কাজ করে। একটি
ওয়েবসাইট হল এক বা একাধিক পেজ এর সমষ্টি। তাহলে বুঝাই যাচ্ছে যদি আমরা
দশটি পেজ সম্বলিত একটি ওয়েবসাইট বানাতে চাই তো আমাদের কে দশটি ওয়েবপেজ তৈরি করতে হবে। আর
প্রতিটি ওয়েবপেজ তৈরি করতে যেটা লাগবেই সেটা হল HTML। একটা
সময় ছিল যখন শুধুমাত্র HTML এর মাধ্যমেই ওয়েবসাইট
তৈরি করা হতো।
কিন্তু বর্তমান ওয়েব সাইট কে ডাইনামিক এবং বিভিন্ন স্টাইল
ব্যবহার করার জন্য CSS, JavaScript, PHP, Ruby ইত্যাদি এ ল্যাঙ্গুয়েজ গুলো ব্যবহার করা হয়। এখানে
আমি শুধুই HTML নিয়ে আলোচনা করবো।
প্রথমেই
জেনে নেই,
HTML এ কাজ করতে আমাদের কি কি লাগবে। প্রথমেই
লাগবে একটি কম্পিউটার :-D তবে এন্ড্রোয়েড মোবাইলের
সাহায্যেও করা যেতে পারে।
এরপর HTML কোড লিখার জন্য
ব্যবহার করতে হবে একটি টেক্সট এডিটর, যেমন
Notepad, Notepad++ ইত্যাদি। তবে
বাড়তি সুবিধা পাবার জন্য Brackets অথবা
Sublime Text ইন্সটল করে ব্যবহার করা যেতে পারে।
 |
| Notepad এ html এক্সটেনশনে সেভ |
Notepad থেকে যদি কাজ করা হয় তো প্রথমেই Notepad টেক্সট এডিটর খুলতে হবে। সেখানে HTML কোড গুলো লিখে তা সেভ করতে হবে ‘.html’ এক্সটেনশন দিয়ে। এরপর ফাইলটি কোন একটি ব্রাউজারের মাধ্যমে ওপেন করতে হবে।
 |
| HTML ওয়েবপেজের মূল গঠন |
আর
যদি
Brackets ব্যবহার করা হয় তো এর এডিটর ওপেন করে নিউ ফাইল খুলে সেখানে
কোড লিখে ‘.html’ এক্সটেনশন এ সেভ করতে হবে। আর
লিখার পর চিত্রে দেখানো ছবির বাটনে ক্লিক করলে কোডটি রান হয়ে লিখিত কোড অনুসারে ওয়েবপেজ
এর আউটপুট দেখাবে।
এবার
HTML এর কিছু নিয়ম নীতির সাথে পরিচিত হয়ে নেই। একটি
ওয়েবপেজ এর মূল গঠন হবে অনেকটা এরকম(পাশের চিত্রের কোডের মত)।
প্রথম
লাইনের
<!DOCTYPE html> দ্বারা ব্রাউজার বুঝতে পারে html ধরনের ডকুমেন্ট তাকে প্রসেসিং করতে হবে। আর
একটি ওয়েব পেজ এ কিভাবে কি প্রদর্শিত হবে তার নির্দেশনা দেয়া হয় মূলত
HTML ট্যাগ বা এলিমেন্টস ব্যবহার করে । এই
এলিমেন্টস গুলো লিখতে হয় একটি অপেনিং ট্যাগ এবং একটি ক্লোজিং ট্যাগ এর মাধ্যমে। কিছু
অবশ্য ব্যতিক্রম আছে।
যেমনঃ <br>।
ওপেনিং ট্যাগ লিখার নিয়ম হল এরকমঃ-
<
এলিমেন্টস এর নাম >
ক্লোজিং ট্যাগ লিখার
নিয়ম হলো এরকমঃ
<
/এলিমেন্টস এর নাম >
অর্থাৎ,
html এর ওপেনিং এবং ক্লোজিং ট্যাগ যথাক্রমে <html> এবং </html> ।
একটি
এলিমেন্ট এর ওপেনিং এবং ক্লোজিং ট্যাগ এর মধ্যে যা লিখা হয় তা এলিমেন্টস এর ধরন অনুযায়ি
সেটা ওয়েবপেজ এ আউটপুট দেখায়।
যেমনঃ <html> এবং
</html> এর মধ্যে যা লিখা হয়েছে তাই হল html ফাইলটির অংশ।
একি
ভাবে
<head> এবং </head> এর মধ্যে
যা থাকে তা দ্বারা ডকুমেন্ট এর নাম, টাইপ নির্ধারণ করা হয়।
<title> এবং </title> এর মাধ্যমে ওয়েবপেজ এর টাইটেল
নির্ধারণ করা হয়।
আর <body> এবং
</body> ট্যাগের মাধ্যমে ওয়েবপেজে কি কি কন্টেন্ট দেখা যাবে
তা লিখা হয়।
সুতরাং
বুঝাই যাচ্ছে, একটি ওয়েব পেজ এ কি কি কন্টেন্ট থাকবে
তা নির্ধারিত হয় একেকটি এলিমেন্টস দ্বারা। বিভিন্ন
ধরনের এলিমেন্টস বিভিন্ন ধরনের কন্টেন্ট দৃশ্যমান করতে ব্যবহৃত হয়।
আর
যদি সেই এলিমেন্টস কে কোন মডিফাই করতে হয় তো তখন দরকার হয় অ্যাট্রিবিউট এর। এটি
এলিমেন্টস এর ওপেনিং ট্যাগ এর মধ্যে ডিক্লেয়ার করে দিতে হয়। অ্যাট্রিবিউট
লিখার নিয়মঃ
<Element’s_name Attribute’s_name=Attribute’s_value>
ধরি,
ওয়েব পেজ এর ব্যাক গ্রাউন্ড নীল হবে। সেক্ষেত্রে
আমরা
<body> এলিমেন্টস এ bgcolor অ্যাট্রিবিউট
ব্যবহার করবো, যা body এর ব্যাকগ্রাউন্ড
এর রঙ নির্ধারন করবে।
যেমনঃ
<body
bgcolor=”blue”>
এখানে
bgcolor অ্যাট্রিবিঊট এর ভ্যালু হচ্ছে blue। তাই
পেজটির ব্যাকগ্রাউন্ড নীল রঙের হবে।
সুতরাং
একটি ওয়েবপেজ তৈরি করতে আমাদেরকে ওয়েবপেজে কি কি কন্টেন্ট থাকবে তার উপর ভিত্তি করে
এলিমেন্ট ব্যবহার করতে হবে।
আর সেই এলিমেন্টস গুলো কে মডিফাই করতে দরকার হবে অ্যাট্রিবিউট
এর।
এখন
আমরা দেখবো কয়েকটি html এলিমেন্টস এবং অ্যাট্রিবিউট
ব্যবহারের ফলে ওয়েবপেজে কি কি ফলাফল দেখাবে।
১।<title> এলিমেন্টস এর
মাধ্যমে একটি ওয়েবপেজ এর টাইটেল নির্ধারিত হয়।যেমনঃ
কোড
আউটপুট
২। <body> এলিমেন্টস এ
background অ্যাট্রিবিউট ব্যবহার করে ভ্যালু তে ইমেজ এর লোকেশন দিলে
ওয়েব পেজের ব্যাকগ্রাউন্ড এ ইমেজটি দেখাবে। যেমনঃ
কোড
আউটপুট
আর
ব্যাকগ্রাউন্ড এ কোন নির্দিষ্ট কালার ব্যবহার করতে চাইলে লাগবে
bgcolor অ্যাট্রিবিউট যেখানে ভ্যালু হিসেবে লিখতে হবে কোন কালারের
নাম বা কালার কোড।
যেমনঃ
কোড
আউটপুট
৩। কোন
টেক্সট বড় ছোট করে লিখার জন্য <hn> ট্যাগ। এখানে
‘n’ এর জায়গায় বসবে ১ থেকে ৬ এর মধ্যে যেকোন একটি সংখ্যা। ১
লিখলে সবচেয়ে বড় আকারের টেক্সট আউটপুট হিসেবে দেখাবে। আর
৬ লিখলে সবচেয়ে ছোট হবে।
যেমনঃ
কোড
আউটপুট
৪।টেক্সট গুলো কে প্যারাগ্রাফ
আকারে লিখার জন্য <p> ট্যাগ বা এলিমেন্টস
ব্যবহৃত হয়।
লাইনে এ কোন ব্রেক রাখার জন্য লাগে
<br> ।
যেমনঃ
কোড
আউটপুট
৫। টেক্সট
ইটালিক ভাবে লিখার জন্য <i>, আন্ডারলাইন করে
লিখার জন্য <u> , স্ট্রাইকথ্রো করে লিখার জন্য
<s>, টেলিটাইপ করার জন্য <tt>, বড় করে লিখার জন্য <big>, ছোট করে লিখার
জন্য <small>, গাঢ় করে গুরুত্ব বুঝানোর জন্য
<strong>, কোটেশন ব্যবহার করতে <q> ব্যবহৃত হয়।
যেমনঃ
কোড
আউটপুট
৬।<sup> এই এলিমেন্ট ব্যবহার
করে টেক্সট এর সাইজ স্বাভাবিক এর চাইতে অর্ধেক আকারে একটু উপরের দিকে প্রদর্শিত হয়। আর
<sub> এলিমেন্ট দ্বারা টেক্সট স্বাভাবিক এর থেকে ছোট আকারে
একটু নিচের দিকে প্রদর্শিত হবে।
যেমনঃ
কোড
আউটপুট
৭। টেক্সট
এর অ্যালাইনমেন্ট centre এ রাখার জন্য
<centre> এলিমেন্ট ব্যবহার করা হয়। যেমনঃ
কোড
আউটপুট
৮। টেক্সট
এর বিভিন্ন কালার, ফন্ট স্টাইল, সাইজ নির্ধারন করতে <font> ট্যাগ এ যথাক্রমে
color, face এবং size attribute ব্যবহার
করা যেতে পারে।
color অ্যাট্রিবিউট এ ভ্যালু হিসেবে বসে কালারের নাম অথবা কালার কোড,
face অ্যাট্রিবিউট এ ভ্যালু হিসেবে ফন্ট এর নাম এবং size অ্যাট্রিবিউট হিসেবে ১ থেকে ৭ এর মধ্যে যেকোন সংখ্যা। ১
বসালে সবচেয়ে ছোট ফন্ট, আর ৭ বসালে বড় ফন্ট। যেমনঃ
কোড
আউটপুট
৯। কোন
প্রোগ্রামিং কোড লিখতে চাইলে <code> এলিমেন্ট
ব্যবহার করা হয়।
আর ‘<’ সাইন বসাতে
‘<’ , ‘>’ সাইন বসাতে ‘>’ এবং স্পেস বসাতে লিখতে হয়। যেমনঃ
কোড
আউটপুট
১০। যদি
কোন ওয়েবসাইট, ছবি, বই অথবা
অন্য একটি তৈরি করা ওয়েবপেজ এর সাথে লিঙ্ক করার দরকার পরে তো তখন ব্যবহার করতে হবে
<a> ট্যাগ। কি নামে লিঙ্ক ওয়েবপেজে প্রদর্শিত
হবে সেই নামটি এলিমেন্ট টির ওপেনিং ট্যাগ এবং ক্লোজিং ট্যাগ এর মাঝে লিখতে হবে। আর
সেই লিঙ্ক এ ক্লিক করলে যেই ওয়েবসাইট, ছবি,
বই অথবা ওয়েবপেজ এ যেতে হবে তার লোকেশন বা URL লিখতে হবে href অ্যাট্রিবিউট এর ভ্যালু তে। যেমনঃ
কোড
আউটপুট
এখানে
৪ টি লিঙ্ক তৈরি হয়েছে যার প্রথমটিতে ক্লিক করলে গুগল এর ওয়েবসাইট এর সাথে লিঙ্কড হবে। আর
এর পরের দুইটি যেই লোকেশন এ HTML ফাইলটি সেভ করা
হয়েছে সেই লোকেশনের
উল্লেখিত নামের পিডিএফ বুক এবং ছবির সাথে লিংকড হবে। একিভাবে
ওই লোকেশনে আমরা যদি webpage2.html নামে আরেকটি
ওয়েবপেজ তৈরি করে রাখি তো আমরা দুইটা ওয়েবপেজ এর মধ্যে লিঙ্কড করতে পারবো। এইভাবেই
একটি একাধিক পেজ সম্বলিত একটি ওয়েবসাইটের পেজ গুলোর মধ্যে লিঙ্কড থাকে।
<a> ট্যাগ ব্যবহার করে একই পেজের মধ্যেও লিঙ্ক তৈরি করা যায়। এটি
কাজে লাগে একটি নির্দিষ্ট লিঙ্ক এ ক্লিক করে একই পেজ এর কোন একটি নির্দিষ্ট অংশে পৌছানোর
জন্য। এজন্য
<a> পেজ এর দুই জায়গায় ব্যবহার করতে হয়। যেখান
থেকে ক্লিক করা হবে সেখানে এবং যেখানে পৌছাবে সেখানে,
এই দুই জায়গায় এ <a> ব্যবহার করতে
হবে।যেখানে
যেতে হবে সেখানে <a> তে name
অ্যাট্রিবিউট ব্যবহার করে ভ্যালু হিসেবে একটি নাম দিতে হবে। আর
যেখান থেকে লিঙ্কের মাধ্যমে আসতে হবে সেখান লিখতে হবে
<a href=”#name_value”> ।
এখানে name_value এর জায়গায়
name অ্যাট্রিবিউট এর ভ্যালু হিসেব যে নাম দেয়া হবে সেটা লিখতে হবে। যেমনঃ
কোড
আউটপুট
Return to the top of the
page লিঙ্ক এ ক্লিক করলে যেখানে name অ্যাট্রিবিউট
এর ভ্যালু উল্লেখ করা হইছে সেখানে কন্ট্রোল চলে যাবে।
১১। ওয়েব
পেজে কোন ইমেজ বা ছবি দৃশ্যমান করতে চাইলে <img> ট্যাগ ব্যবহার করা হয়। এই এলিমেন্ট এ কোন ক্লোজিং
ট্যাগ নেই, তবে এই ট্যাগ এর মধ্যে src,
width, height, alt অ্যাট্রিবিউট ব্যবহৃত হয়। src ভ্যালু হিসেবে বসবে ঐ
ছবি যে ডিরেক্টরি তে সেভ আছে সেটার লোকেশন। width এবং height এর ভ্যালু হিসেবে বসবে ছবিটির পিক্সেল সাইজ। আর
alt ভ্যালু হিসেবে বসবে একটি নাম যেটি কোন কারণে ব্রাউজার এ ছবি দেখা
না গেলে সেই নাম দেখাবে ছবির জায়গায়। যেমনঃ
কোড
আউটপুট
১২। আড়াআড়ি
ভাবে কোন রেখা টানতে <hr> ট্যাগ ব্যবহার
করা হয়।
এর কোন ক্লোজিং ট্যাগ নেই। যেমনঃ
কোড
আউটপুট
১৩। টেবিল
তৈরি করার জন্য <table>, সারি তৈরি করার জন্য
<tr> এবং প্রতিটি সারি তে ডাটা বসানোর জন্য
<td> ট্যাগ ব্যবহার করা হয়। যেমনঃ
কোড
আউটপুট
এখানে
border অ্যাট্রিবিউট দিয়ে বর্ডার এর সাইজ নির্ধারণ করা যায়। যদি
border অ্যাট্রিবিউট এর ভ্যালু ০ বসানো হয় তো টেবিলে কোন বর্ডার থাকবে
না।
যেমনঃ
কোড
আউটপুট
আপাতত
এতটুকুই।
তবে এইটা শেষ করেই HTML শেষ,
এটা ভাবা উচিত হবে না। এইখানের
আলোচনা টা শুধুমাত্র HTML এর basic টা গড়ে তোলার জন্য।
এখানে উল্লেখিত এলিমেন্টস এবং অ্যাট্রিবিউট ছাড়াও আরো অনেক
এলিমেন্টস এবং অ্যাট্রিবিউট আছে।
HTML এ দক্ষ হতে এলিমেন্টস এবং অ্যাট্রিবিউট এর ভান্ডার আরো বাড়িয়ে
সেগুলোর প্রয়োগ এর ব্যাপারে জানতে হবে। শুভকামনা রইলো :-) । Happy Web Designing :-D
Comments
Post a Comment