Html কি - Html এর পূর্ণরূপ - Html ও CSS সম্পর্কে মৌলিক ধারণা - CSS এর পূর্ণরূপ
Html কে বলা হয় ওয়েব পেজের স্ট্রাকচার বা কঙ্কাল এবং CSS কি বলা হয় চামড়া। এই Html এর উপর ভিত্তি করে ওয়েব পেজ তৈরি হয়। আর এই কারণেই CSS ও Html কি এবং এগুলো সম্পর্কে আমাদের প্রত্যেকেরই মৌলিক একটা জ্ঞান রাখা দরকার। তাহলে আসুন CSS ও Html কি সেই সম্পর্কে আলোচনা শুরু করা যাক।
আজকের এই পোষ্টের মধ্যে থাকছে Html এবং CSS সম্পর্কে কিছু মৌলিক তথ্য,
এবং প্রয়োজনীয় কিছু ট্যাগ সম্পর্কে আলোচনা। এই programing
language ওয়েব পেজ তৈরির জন্য খুবই প্রয়োজনীয়। কারণ, কম্পিউটারকে আমরা
যখন কোন নির্দেশনা দেব তখন আমাদেরকে এই প্রোগ্রামিং ল্যাংগুয়েজ এর মাধ্যমে দিতে
হয়। এই কারণে এই ল্যাঙ্গুয়েজ গুলো সম্পর্কে বেশি কিছু ধারণা আমাদের সকলেরই থাকা
প্রয়োজন।
আলোচনায় যা যা থাকছেঃHtml কি - Html এর পূর্ণরূপ - Html ও CSS সম্পর্কে মৌলিক ধারণা - CSS এর পূর্ণরূপ ।
- Html কি
- Html কথাটির পূর্ণরূপ কি
- Html এর মৌলিক ট্যাগ
- Start tag এবং end tag বোঝার নিয়ম
- Html এ order list এবং unorder list তৈরি করার প্রক্রিয়া
- CSS কি
- CSS পূর্ণরূপ কি
- CSS attribute কি এবং attribute কিভাবে যুক্ত করতে হয়
- CSS এর প্রকারভেদ
- Html এ টেবিল তৈরির নিয়ম
Html কি
আজকে আমরা জানবো Html কি সেই সম্পর্কে ।আমরা যে ভাষাটি দিয়ে প্রোগ্রামিং কোড করি
সেটাকে Html বলে ।আরো সহজ ভাবে বলতে গেলে বলতে হয় Html হল
কম্পিউটারের ভাষা। আমাদের যদি কম্পিউটারকে কোন নির্দেশনা দেওয়ার প্রয়োজন হয়
তখন আমরা Html ব্যবহার করি।Html আমরা Website এবং Webpage তৈরি
করার সময় ব্যবহার করে থাকি। Html কি , এটা নিশ্চয়ই বুঝতে পেরেছেন
।Html কি এটিকে আমরা আরেকভাবে বলতে পারি যে, Html হল ওয়েবসাইটের
স্ট্রাকচার। Html কে আমরা structure এর সাথে তুলনা দিয়ে থাকি।
Html কথাটি পূর্ণরূপ কি
Html কি বা কাকে বলে, এটি আমরা উপরের আলোচনায় জেনেছি । এবার আমরা জানবো Html কথাটির পূর্ণরূপ সম্পর্ক। Html হলো সংক্ষিপ্ত রূপ, এই Html কথাটিকে বিশ্লেষণ করলে দাঁড়ায়, html পুরো ওয়েবসাইটের বিভিন্ন অংশগুলোকে ভাগ করে দেখায়, যেমন কোনটি শিরোনাম হবে, কোনটি প্যারাগ্রাফ হবে, কোনটি লিংক হবে ইত্যাদি।
H - Hyper
T - Text
M - Markup
L - Language
তাহলে, Html এর পূর্ণরূপ হল "Hyper text markup language". চলুন এবার আমরা জেনে নিই Hyper text কোনগুলো এবং Markup language কোনগুলো।
আরো পড়ুনঃ এডভান্স অ্যার্টিক্যাল ফমেটিং টেকনিক।
Hyper text : আমরা যে লেখাগুলো বা কন্টেন্টগুলো ব্রাউজারে দেখতে পায়,সেগুলকে বলা হয় Hyper text.
Markup language : ব্রাউজারে কোথায় কি থাকবে, না থাকবে সেটার structure বা ব্রাউজারে কোথায় কি রাখব ,না রাখব সেটা মার্ক করাকে Markup language বলে।
Html এর মৌলিক ট্যাগ
বিভিন্ন ওয়েবপেজ তৈরি করার সময়, আমরা যখন কম্পিউটার কে বিভিন্ন নির্দেশনা গুলো
দিয়ে সেগুলো আমাদেরকে Html ট্যাগের মধ্যে লিখতে হয় ।Html এর অনেকগুলো
ট্যাগ রয়েছে, এই ট্যাগ গুলোর মধ্যে বেশ কিছু ট্যাগ আছে যেগুলো অত্যন্ত জরুরি। এই
জরুরী ট্যাগ গুলোকে এইচটিএমএল এর মৌলিক ট্যাগ বলা যেতে পারে, কারণ এই ট্যাগগুলোর
ভেতরেই আমরা html অন্যান্য ট্যাগগুলো যুক্ত করে থাকি। Html এর
এই অত্যাবশ্যকীয় ট্যাগগুলো হলো,
<html>
<head>
<body>
html এর মধ্যে লিখা শুরুর আগে আমাদের যে কাজটি করতে হবে সেটি হল ,আমরা
html এর কোন ভার্সনে লিখছি সেটা সিলেক্ট করে নিতে হবে । এটি সিলেক্ট করার জন্য
আমাদেরকে <!doctype> ট্যাগটি নিতে হবে , এরপর আমাদেরকে একটি <html>
ট্যাগ নিতে হবে । এই <html> ট্যাগের মধ্যে আমাদের অন্যান্য সব ট্যাগ
এবং লেখা অন্তর্ভুক্ত থাকে । < html> এর প্রধান দুটি অংশ হলো
<head>,<body>
Image source: w3schools.com<head> ট্যাগের মধ্যে আমরা উপরের বা হেডার অংশে কোন কোন ট্যাগ থাকবে সেগুলো যুক্ত করতে পারি যেমন, পেজের নাম লেখার জন্য <title> ট্যাগ।
আরো পড়ুনঃ পোষ্টের ভেতর স্ক্রিনশট আপলোড করার নিয়ম
এবং <body> ট্যাগের আমরা অন্যান্য প্রয়োজনীয় ট্যাগগুলো যুক্ত করতে পারি। যেমন, শিরোনামের জন্য <h> , অনুচ্ছেদের জন্য <p>, লিংক অ্যাড করার জন্য <a>, পিকচার আপলোড এর জন্য <image> ইত্যাদি।
Start tag এবং End tag বোঝার নিয়ম
Html এর মধ্যে আমরা যাই কিছুই লিখি না কেন, সেগুলো আমাদেরকে বিভিন্ন ট্যাগের মধ্যে লিখতে হয়। এর মানে হল html এর মধ্যে আমরা যদি কিছু লিখতে চাই তাহলে সেগুলো আমাদেরকে অবশ্যই start ট্যাগ এবং end ট্যাগের মাঝখানে লিখতে হবে। কিন্তু এখন প্রশ্ন হল কোনটা শুরু start tag এবং কোনটি শেষ বা end tag বুঝবো কিভাবে ? শুরু এবং শেষ ট্যাগ চেনার নিয়ম হলো শুরুর ট্যাগে অ্যাঙ্গেল ব্রেকেট এর করে /চিহ্ন থাকে না, আর End Tag এ অ্যাঙ্গেল ব্র্যাকেটের পরে / চিহ্ন থাকে। যেমন,
<html> </html>
এই ট্যাগ দুটির মধ্যে <html> এটি হলো html start tag এবং
</html> এটি হল html end tag. প্রথমটি শুরুর ট্যাগ হওয়ার কারণ হল
এখানে সামনে কোন (/) চিহ্ন নেই। এবং দ্বিতীয়টি end tag হওয়ার কারণ হলো এর সামনে
(/) চিহ্ন আছে।
Html এ order list এবং unorder list তৈরি করার প্রক্রিয়া
আমরা যদি ওয়েবসাইটের মধ্যে তালিকা আকারে কোন কিছু তৈরি করতে
চাই বা ওয়েবে কোন ফরমেটিং করতে যায় তাহলে তখন আমাদের লিস্ট করতে হয়
। তাই এ কারণে আমাদের জেনে রাখা উচিত কিভাবে Html এ কিভাবে লিস্ট তৈরি করতে হয় ।
Html আমরা দুই ধরনের তৈরি করতে পারি।
- Order list
- Unorder list
Order list : যেই তালিকা বা লিস্ট গুলোর পাশে সংখ্যা দ্বারা mark করা থাকে না , সেগুলোকে order list বলে । আসুন এবার আমরা তাহলে আলোচনা করি ওই অর্ডার লিস্ট কিভাবে তৈরি করা যায়।Order list তৈরীর জন্য আমাদেরকে একটি <ol> ট্যাগ নিতে হবে নিতে হবে । এবার আমাদেরকে যে কাজটি করতে হবে সেটি হল, ol এর start এবং end ট্যাগ এর মধ্যে আরেকটি html ট্যাগ নিতে হবে, যেটার নাম <li> ট্যাগ। li মানে হল list item. Order list এরমধ্যে আমরা যতগুলো লিস্ট আইটেম রাখব সেগুলোর প্রতিটির জন্য আমাদেরকে li ট্যাগ নিতে হবে। এবং এই <li> এর শুরু এবং শেষ ত্যাগের মাঝখানে আমাদেরকে লিস্ট আইটেমগুলো রাখতে হবে । যেমন,
<ol>
<li> বাংলাদেশ </li>
<li> পাকিস্তান </li>
<li> ভারত </li>
</ol>
আর আমরা যদি এই লিস্ট গুলোর উপরে কোন শিরোনাম দিতে চাই তাহলে <ol> ট্যাগ এর ওপরে আমাদেরকে একটি <h2> ট্যাগ নিতে হবে ।আপনাদের বোঝার সুবিধার জন্য html এ order list তৈরীর প্রক্রিয়াটি স্ক্রিনশট আকারে নিচে দেখানো হলো।
Unorder list : যেইসব তালিকা বা লিস্ট গুলোর পাশে কোন সংখ্যা দ্বারা mark করা থাকে না । শুধু তালিকাগুলোর পাশে একটা চিহ্ন থাকে, সেগুলোকে Unorder list বলে।Unorder list তৈরি করার জন্য আমাদেরকে উপরের একই প্রক্রিয়ায় কাজ করতে হবে । মানে আমরা যে প্রক্রিয়ায় order list তৈরি করেছিলাম সেই একই প্রক্রিয়ায় তৈরি করতে হবে , শুধু পার্থক্য এটুকুই যে order list তৈরি করার সময় আমরা লিস্ট আইটেমগুলোকে ol ট্যাগের মধ্যে রেখেছিলাম আর unorder list তৈরি করতে আমরা লিস্ট আইটেমগুলোকে <ul> ট্যাগের ভেতরে রাখবো। বিষয়টি আপনাদের সামনে যাতে আরো ক্লিয়ার হয়ে যায় unorder list তৈরি প্রক্রিয়াটি একটি স্ক্রিনশট এর মাধ্যমে শেয়ার করা হলো ।
CSS কি
উপরের আলোচনায় আমরা জেনেছি Html কি , এবার আমরা জানবো
CSS সম্পর্কে। এইচটিএমএল এর মত সিএসএসও হলো এক ধরনের কম্পিউটার
ল্যাঙ্গুয়েজ । CSS এর মাধ্যমেও আমরা কম্পিউটার কে বিভিন্ন ধরনের নির্দেশনা
দিয়ে থাকি । Html কে যেমন আমরা কোন কিছুর স্ট্রাকচারের সাথে তুলনা করি, সেই
রকম CSS কে তুলনা করা হয় কোন কিছুর বাহ্যিক ডিজাইন , রং ছোট বা বড় লিখার
ধরন, ইত্যাদির সাথে । এক কথায় কোন ওয়েবসাইট বাইরে থেকে দেখতে কেমন লাগবে
কম্পিউটার থেকে সেই নির্দেশনা দেওয়ার ভাষাটাকে CSS বলে। এক কথায় বলা
যায়,Html যদি কঙ্কাল হয় তাহলে CSS হলো চামড়া
CSS এর পূর্ণরূপ
CSS কথাটি একটি short from ,এর full from হল Cascading Style Sheet . আমরা যদি আমাদের কোন ডকুমেন্টের ভেতর CSS স্টাইল করতে চাই তাহলে সেটা আমাদের করতে হয় Html ট্যাগের ভিতর।
CSS attribute কি এবং attribute কিভাবে যুক্ত করতে হয়
সকল CSS লেখার স্টাইল কে Attribute বলা হয়।CSS এর attribute গুলোকে Html এর ভেতরে apply করতে হয়। চলুন তাহলে এবার কিভাবে Attribute যুক্ত করতে হয় সেই নিয়ম কানুন গুলো জেনে নেওয়া যাক।Attribute যুক্ত করার জন্য প্রথমে html ট্যাগের ভেতরে Attribute এর নাম লিখে (=) চিহ্ন দিতে হবে, এরপর (" ") এর ভেতরে Attribute এর property দিতে হবে।
আরো পড়ুনঃ Google কন্টেন্ট পলিসি।
Property বলতে বোঝায় যে স্টাইলটি আমরা যুক্ত করব সেটার নাম। তাহলে , Property দেয়া হয়ে গেলে এরপর (:) চিহ্ন দিতে হবে তারপর Property value হবে এবং এরপর(;)। এই ব্যাপারটি আরো ভালোভাবে আপনাদেরকে বোঝানোর জন্য একটি উদাহরণ দেওয়া হল। মনে করুন, আপনি আপনার ওয়েবসাইটের কোন হেডিং এর নীল রং করবেন তাহলে এই কাজটি করার জন্য আপনাকে কি করতে হবে চলুন সেটি দেখা যাক। তার আগে আপনাদেরকে বলে রাখি , আপনি যখন CSS এর কোন Property নিয়ে কাজ করবেন তখন সেটির নাম হবে style. তো হেডিং বা শিরোনামকে নীল রং করার জন্য আমাদেরকে CSS টি <h2> ট্যাগের ভেতরে নিম্নরূপভাবে লিখতে হবে,
<h2 style="color :blue ;" তাহলে দেখতে পাবেন ,আপনি যে শিরোনামের পাশে property যুক্ত করেছেন সেটি নীল কালার হয়ে গেছে। প্র্যাকটিক্যালি এটি দেখানোর জন্য নিচে একটি স্ক্রিনশট আপনাদের সাথে শেয়ার করা হলো।
CSS এর প্রকারভেদ
CSS তিন ধরনের হয়ে থাকে। যথা,
- Inline CSS
- Internal CSS
- External CSS
Inline CSS : Inline CSS যুক্ত করতে হয় যেটাকে আমরা স্টাইল করব সেই ট্যাগের ভিতর ট্যাগের ভেতরে । আমরা যদি শিরোনামকে ডিজাইন করতে চাই তাহলে inline CSS তো করতে হবে h2 ট্যাগের ভেতরে । আবার আমরা যদি প্যারাগ্রাফ এর কোন অংশ স্টাইল করতে চাই তাহলে CSS যুক্ত করতে হবে P ট্যাগের ভেতরে।
Internal CSS : Internal CSS করতে হয় head ট্যাগের ভেতরে । Internal CSS যুক্ত করার জন্য আমাদেরকে Head ট্যাগের ভেতরে একটা Style ট্যাগ নিতে হবে। মনে করেন, আমাদের একটি পোস্টে বা পেজে যতগুলো শিরোনাম আছে আমরা যদি সবগুলোকে নীল কালার করতে চাই তাহলে , প্রতিটি শিরোনামের h2 ট্যাগের ভেতরে গিয়ে Property না বসিয়ে এই কাজটি আমরা একবারে করতে পারি। আমরা যদি head ট্যাগের Style ট্যাগ নিতে হবে এবং এর ভেতরে গিয়ে h2 ট্যাগ এর ভেতরে CSS property যুক্ত করি তাহলে আমাদের পোষ্টের সবগুলো জায়গা শিরোনাম এর কালার চেঞ্জ হয়ে যাবে। এই কাজটি করার জন্য নিচে দেখানো নিয়ম অনুযায়ী আপনাকে লিখতে হবে
<Style>
h2{color :blue;
}</style> এভাবে লিখে সেভ দিলে দেখবেন আপনার পোস্টের সব জায়গা শিরোনাম নীল কালার হয়েছে।
External CSS : External CSS এর মাধ্যমে সাইটে কোথায় কি কালার হবে সেটা আমরা বারবার না করে, লিঙ্ক এড করার মাধ্যমে একবার এই কাজটি করে ফেলতে পারি।
Html টেবিল তৈরির নিয়ম
টেবিল তৈরির জন্য আমাদেরকে প্রথমে ঠিক করে নিতে হবে যে, টেবিলের মধ্যে আমরা কয়েকটি কলাম বানাবো এবং কয়টি রো বানাবো। টেবিলের সবচেয়ে উপরে অংশকে বলা হয় টেবিল হেডার। এই টেবিল হেডরও কয়টি হবে সেটি আমাদেরকে আগে থেকেই ঠিক করে নিতে হবে। এতে টেবিল শরীরটা বাবা না তৈরি করার সময় আমাদের সুবিধা হবে।
টেবিল তৈরির জন্য আমাদেরকে টেবিল ট্যাগ নিতে হবে। এরপরে আমরা যে কয়টি টেবিলে হেডার বানাবো তার প্রত্যেকটার জন্য একটি করে <th> ট্যাগ নিতে হবে এবং এর ভিতরে হেডারের নাম গুলো উল্লেখ করতে। এভাবে যে কয়টি টেবিল রো হবে সেই অনুযায়ী <tr> ট্যাগ নিতে হবে এবং <tr> ট্যাগের যেহেতু ডাটা টাইপের কিছু উল্লেখ হবে সেই জন্য আমরা<td> ট্যাগ নেব এবং এর মধ্যে আমরা যেই ডাটা গুলো উল্লেখ করতে চাই সেগুলো দেখব।
এই কাজটুকু হয়ে গেলে আমাদেরকে চলে আসতে হবে <head> ট্যাগের ভেতরে, এবং এখানে এসে CSS যুক্ত করতে হবে । CSS property যুক্ত করার জন্য আমরা একটা <style> ট্যাগ নিব। এ বারে এই <style> ট্যাগের ভেতরে টেবিলের কোন কোন অংশে আমরা বর্ডার দিতে চাই সেই অংশের নাম লিখতে হবে। এরপরে {} চিহ্নের মাঝখানে লিখতে হবে ,border: টেবিলের বর্ডার গুলো কতখানি প্রশস্ত হবে তার পরিমাপ এবং বর্ডার এর লাইন গুলো কি কালার হবে সে কালারের নাম। তাহলে আমাদের পেজ বা পোস্টের ভেতরে টেবিল তৈরি হয়ে যাবে।
বিভিন্ন ওয়েবসাইট এ কাজ করার জন্য Html সম্পর্কে এই বেসিক জ্ঞান গুলো থাকা খুবই
জরুরী বলে আমার মনে হয়েছে,Html ও CSS এর বেসিক জ্ঞানগুলো থাকলে
ওয়েবসাইটের কাজ বা ওয়েবসাইটে যদি কিছু ডিজাইন, কোন অংশ যুক্ত করা
লাগলে , এবং ছোটখাটো কোন সমস্যা হলে আমরা নিজেরাই ঠিক করে নিতে পারব বিভিন্ন, আশা
করছি এই programing language গুলো জানা থাকলে ভবিষ্যতে আপনার অনেক
উপকারে আসবে ।
0 Comments
দয়া করে নীতিমালা মেনে মন্তব্য করুন