XHTML কি?
Odesk এ দেখবেন প্রায় কাজ post হয় Web designer needed XHTML বা PSD
to HTML নামে। XHTML দিয়েই মুলত ওয়েবপেজ
ডিজাইন করা হয়, এর পর সুন্দর করার জন্য Javascript, Jquary, ajax, ইত্যাদি সংযোগ করা হয়। Javascript, Jquary, ajax না ব্যবহার করেও
পুরনাঙ্গ ওয়েবপেজ ডিজাইন করা যাই সুন্দর ভাবে শুধু HTML+CSS = XHTML ব্যবহার করে। আপনারা
নিশ্চয়ই জানেন XHTML হল এইচটিএমএল ও সিএসএস
এর একসঙ্গে DIV,
id, class, stylesheet ব্যবহার করে ব্যবহার। CSS ৩ ভাবে ব্যবহার করা যাই, তবে আমরা external stylesheet ব্যবহার করবো, এটাই প্রফেশনাল ও W3 validate । অনেক
client ই W3 validate coding চাইবে, কারন এটা SEO সম্পুরক।
Web design ফোল্ডারের
ভিতর XHTML নামে
একটি ফোল্ডার খুলুন,
এর ভিতর lesson1 ফোল্ডার খুলুন, আবার lesson1 এর ভিতর index.html এবং style.css ( index.html এর মত একইভাবে ) খুলুন।
এবার index.html এবং style.css দুটিই Dreamweaver দিয়ে open করুন। এবার index.html এর ভিতর অন্য একটি নতুন
ফাইল থেকে default coding copy করে এনে paste করুন index.html default হয়ে গেলো। মনে রাখবেন
style.css ফাইল টি সম্পূর্ণ ফাঁকা থাকবে কোন কপি করে default
করার দরকের নেই। এবার index.html এর <head>
</head> ভিতর coding করে
style.css কে call ( সংযোগ ) করবো।
</title> এর পর নিচে গিয়ে </head> এর আগে লিখুন
<link
rel="stylesheet" type="text/css" href="style.css"
/>
লিখলে coding নিচের মত
দেখাবে
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>www.prowebdesign4u.blogspot.com</title>
<link
rel="stylesheet" type="text/css" href="style.css"
/>
</head>
লেখার নিয়মঃ আগের মতই কিছু word অপশনে
অপশন পাবেন সিলেক্ট করুন enter দিন ডাবল কোটেশনের ভিতর
লিখুন এবার enter দিন, এভাবে নিয়ম মেনে। কখনো অপশন না এলে
Ctrl + space চাপুন।
এবার body ট্যাগের
ভিতর লিখুন
<div
id="wrapper">
</div>
Wrapper এর অর্থ খোলস, এবং প্রতিটি ওয়েব পেজের একটি খোলস থাকে, এর ভিতর থাকে header,
header এর ভিতর থাকে logo, menubar, menubar এর নিচে থাকে container ।
আপনি যেকোনো নাম ব্যবহার করতে পারেন, তবে খেয়াল রাখবেন এখানে যে
নাম দিবেন ঠিক সেই নামই style.css ।
সব মিলিয়ে index.html নিচের
মত হবে
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>www.prowebdesign4u.blogspot.com</title>
<link rel="stylesheet"
type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
</div>
</body>
</html>
এবার style.css এর
ভিতর লিখুন
#wrapper{
width:960px;
height:600px;
background:#00FF33;
}
প্রফেশনাল coding করার নিয়ম
Index.html এ <div
id="wrapper"> লেখার পরেই enter দিয়ে নিচে নেমে </ দিলেই </div>
( অর্থাৎ div close করলাম। মনে রাখবেন একটি div শুরু করলে সেটা নিচে এসে আগে close করবো।
style.css ঠিক নিচের মত লিখব
#wrapper{
width:960px;
height:600px;
background:#00FF33;
}
Style.css এ coding করার নিয়মঃ প্রথমে index.html থেকে wrapper ( Ctrl + c )copy
করুন ( copy করলে বানান ভুল হবে না ) , style.css এর ভিতর প্রবেশ করুন একটি # ( id ব্যবহার করলে
# আর class ব্যবহার করলে ডট . )
দিন এবার Ctrl + v দিয়ে paste করুন,
একটি সেকেন্ড ব্রাকেট { দিন enter দিয়ে নিচে নামুন সেকেন্ড ব্রাকেট } close করুন ( যেকোনো coding শুরু করার পরই close করবো ) এতটুকু নিচের মত হবে
#wrapper{
}
এবার প্রথম { পরে mouse নিয়ে একটি enter দিয়ে নিচে আসুন
একটি Tab দিন। width লিখুন দেখুন অপ্তিওনে চলে এসেছে enter দিন 960px দিন ( আমি আগেই বলেছি px একটি একক ) এবার
; দিন ( এটি দিতে কখন ভুল করবেন না ) enter দিয়ে নিচে আসুন height:600px; লিখুন enter দিয়ে নিচে আসুন background:#00FF33; লিখুন।
সব মিলিয়ে style.css হবে
নিচের মত
#wrapper{
width:960px;
height:600px;
background:#00FF33;
}
এবার Ctrl + S দিয়ে page টি save করুন index.html ও style.css দুটোই এবং Run করুন করলে নিচের চিত্রের
মত দেখা যাবে...............
background:#00FF33; এর পর mouse এনে enter দিয়ে নিচে নামুন coding করুন margin:0 auto; ( মনে রাখবেন margin:0
(শুন্য) এরপর একটি space auto; ।
margin:0
auto; বলতে বুঝায় একটি div থেকে অন্য একটি div এর
দূরত্ব । wrapper এর margin:0 auto;
বলতে এটি বুঝায় wrapper ডিফল্ট body div থেকে উপর নিচ থেকে margin নিবে 0, আর ডান এবং বাম থেকে নেবে auto অর্থাৎ মাঝে অবস্থান করবে।
সব মিলিয়ে coding হবে নিচের
মত
#wrapper{
width:960px;
height:600px;
background:#00FF33;
margin:0 auto;
}
বিঃ দ্রঃ কখনো যদি Dreamweaver এ অপশন না আসে তবে Ctrl + space চাপুন।
এবার Ctrl + S দিয়ে page টি save করুন index.html ও style.css দুটোই এবং Run করুন করলে নিচের চিত্রের
মত দেখা যাবে...............
চিত্রে খেয়াল করুন আমাদের wrapper টা পেজের উপর থেকে প্রথম থেকে আসে
নাই উপরে
একটু ফাঁকা সাদা অংশ আছে। এর কারন হল ওয়েব পেজে একটা default body ট্যাগ থাকে যার margin:0px; এবং padding:0px;
করতে হবে। padding হল একটা div থেকে ঐ div এর Text এর দূরত্ব।
অতাএব style sheet এ লিখুন
body{
margin:0px;
padding:0px;
}
এখানে একটি প্রশ্ন হল আমরা body আগে কোন id বা class ব্যবহার করিনি আবার style.css এ . বা # ব্যবহার করিনি কেন? উত্তর টা হল body একটি HTML ডিফল্ট ট্যাগ এর কোন id বা class দিতে হয় না।
body{
margin:0px;
padding:0px;
}
এখানে একটি প্রশ্ন হল আমরা body আগে কোন id বা class ব্যবহার করিনি আবার style.css এ . বা # ব্যবহার করিনি কেন? উত্তর টা হল body একটি HTML ডিফল্ট ট্যাগ এর কোন id বা class দিতে হয় না।
সব মিলিয়ে সব মিলিয়ে style.css হবে নিচের মত
#wrapper{
width:960px;
height:600px;
background:#00FF33;
margin:0 auto;
}
body{
margin:0px;
padding:0px;
}
এবার Ctrl + S দিয়ে page টি save করুন index.html ও style.css দুটোই এবং Run করুন করলে দেখবেন wrapper এর সাদা অংশ নেই।
সব মিলিয়ে যা শিখলাম তার
সংক্ষিপ্ত একটি বিশ্লেষণী চিত্র নিচে দেখি..................
এবার wrapper এর ভিতর একটি নতুন div class নিন header নিচে খেয়াল করুন coding হবে নিচের মত
<body>
<div id="wrapper">
<div class="header">
</div>
</div>
</body>
এখানে একটা প্রশ্ন আমি
কেন class নিব । সাধারণত প্রফেশনালি
যে div টি ওয়েব পেজে মাত্র একবার
নিব সেই div নিবো id হিসাবে, আর অন্য div নিবো class
হিসাবে । wrapper অর্থাৎ খোলস একটা ওয়েব
পেজে একটাই ব্যবহার করা হয়, এজন্য id নিয়াছিলাম
।div এর style
একই রকম করতে চান তার
জন্য একটি common
css করলেই
হবে। অর্থাৎ একই নামের একাধিক div class এর জন্য 1টি css coding যথেষ্ট । coding করতে করতে আর ও clear বুঝতে পারবেন।
Coding এর প্রফেশনাল নিয়মঃ আগের মতই লিখবেন শুধু মনে
রাখবেন আমি যেহেতু wrapper
div এর
ভিতর header div নিয়াছি, wrapper এর শেষে mouse নিয়ে enter দিয়ে নিচে নেমে ট্যাব ( Tab ) ব্যবহার করেছি এরপর এবার enter দিয়ে </ দিয়েছি </div> হয়ে গেছে।
এবার style.css এর ভিতর লিখুন
.header{
margin:0px;
padding:0px;
width:960px;
height:50px;
background:#FFFF33;
}
Coding লেখার প্রফেশনাল নিয়মঃ index.html থেকে header copy করে নিয়ে style.css এর ভিতর body এর নিচে গিয়ে . ( ডট )
দিন এবার পেস্ট করুন হবে . header এবার সেকেন্ড ব্রাকেট শুরু হবে { একটা enter দিয়ে নিচে নেমে সেকেন্ড
ব্রাকেট বন্ধ } হবে । এবার { পরে mouse নিয়ে enter
দিয়ে নিচে নেমে একটা Tab দিয়ে margin:0px; padding:0px; width:960px; height:50px; background:#FFFF33; coding গুলো লিখতে হবে।
Coding বিশ্লেষণঃ margin:0px; padding:0px; করলাম যাতে অবস্থান ঠিকভাবে হয় । width:960px; এর কারন wrapper এর header এর width একই হবে, height:50px; কারন এর উচ্চতা কম হয়। background:#FFFF33; এর একটা কালার দেওয়া হয়েছে ।
সব মিলিয়ে index.html এর coding
হবে নিচের মত
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>www.prowebdesign4u.blogspot.com</title>
<link rel="stylesheet"
type="text/css" href="style.css" />
</head>
<body>
<div
id="wrapper">
<div
class="header">
</div>
</div>
</body>
</html>
আর style.css
হবে নিচের মত
#wrapper{
width:960px;
height:600px;
background:#00FF33;
margin:0 auto;
}
body{
margin:0px;
padding:0px;
}
.header{
margin:0px;
padding:0px;
width:960px;
height:50px;
background:#FFFF33;
}
এবার Ctrl + S দিয়ে page টি save করুন index.html ও style.css
দুটোই এবং Run করুন করলে নিচের মত দেখা
যাবে..................
এবার header
div এর
ভিতর লিখুন
<div class="header">
My First Website
</div>
আবার Ctrl + S দিয়ে page টি save করুন index.html ও style.css দুটোই এবং Run করুন করে দেখুন My First Website header এর ভিতর load হয়েছে।
লেখাটি সুন্দর এবং center এ নিতে styl.css এর header এর ভিতর নিচের coding গুলো লেখেন।
.header{
margin:0px;
padding:0px;
width:960px;
height:50px;
background:#FFFF33;
color:#CC3300;
text-align:center;
font-size:24px;
line-height:50px;
font-weight:bold;
}
আবার Ctrl + S দিয়ে page টি save করুন index.html ও style.css দুটোই এবং Run করুন, তবে আপনি বারবার Run করে Reload করতে পারেন, এটা সহজ হবে। Web page Reload করলে নিচের চিত্রের মত দেখাবে........................
<div class="header">
My First Website
</div>
আবার Ctrl + S দিয়ে page টি save করুন index.html ও style.css দুটোই এবং Run করুন করে দেখুন My First Website header এর ভিতর load হয়েছে।
লেখাটি সুন্দর এবং center এ নিতে styl.css এর header এর ভিতর নিচের coding গুলো লেখেন।
.header{
margin:0px;
padding:0px;
width:960px;
height:50px;
background:#FFFF33;
color:#CC3300;
text-align:center;
font-size:24px;
line-height:50px;
font-weight:bold;
}
আবার Ctrl + S দিয়ে page টি save করুন index.html ও style.css দুটোই এবং Run করুন, তবে আপনি বারবার Run করে Reload করতে পারেন, এটা সহজ হবে। Web page Reload করলে নিচের চিত্রের মত দেখাবে........................
Coding বিশ্লেষণঃ color:#CC3300; font এর color জন্য;
text-align:center; বাম ও ডানএর মাঝে আনার জন্য;
font-size:24px; font এর size বড় করার জন্য;
line-height:50px; উপর ও নিচের মাঝে আনার জন্য; ( এখানে মনে রাখবেন উপর ও নিচ দিক দিয়ে মাঝে আনতে হলে line-height ব্যবহার করবেন, এবং line-height এর মান হবে যে div এর ভিতর তার height এর সমান, এক্ষেত্রে header এর height:50px; , তাই line-height:50px; হবে।
text-align:center; বাম ও ডানএর মাঝে আনার জন্য;
font-size:24px; font এর size বড় করার জন্য;
line-height:50px; উপর ও নিচের মাঝে আনার জন্য; ( এখানে মনে রাখবেন উপর ও নিচ দিক দিয়ে মাঝে আনতে হলে line-height ব্যবহার করবেন, এবং line-height এর মান হবে যে div এর ভিতর তার height এর সমান, এক্ষেত্রে header এর height:50px; , তাই line-height:50px; হবে।
বিশেষ কিছু কথা
প্রফেশনাল ভাবে coding না করলে যখন আপনি একটি
অয়েবপেজ বানাবেন তখন coding
গুলিয়ে ফেলবেন, আর
নিয়মমাফিক করলে ভুল হবে না, হলেও খুব সহজে সনাক্ত করতে পারবেন।
বিশেষ কিছু ভুল
Index.html এবং style.css দুটোই save করতে ভুলবেন না না। এজন্য কিছু লেখলেই Ctrl + S দিয়ে save করে দেবেন সাথে সাথে, আবার Run করার আগে Index.html এবং
style.css দুটোই
save করে নিবেন।
খেয়াল রাখবেন id দিলে stylsheet এ # আর class দিলে .
(ডট)। coding ০ ( শূন্য ) কে o (ও) দিবেন না। style.css এ প্রতিটি coding আর শেষে ; দিতে ভুল করবেন না।
index.html
এ div শুরু করেই ক্লোজ করবেন ( বলে রাখি div মানে ঘর, আর আধুনিক ওয়েব পেজের মূল ভিত্তি div), style.css এ নিয়মমাফিক সেকেন্ড ব্রাকেট আগেই close করবেন।
Index.html এ style.css call (সংযোগ) করতে ভুল করবেননা। সম্পূর্ণ পোস্ট টা মন
দিয়ে পরতে ভুল করবেন না। প্রত্যেক টা কথা প্রয়োজনীয় যদি আপনি জানেন তারপর ও পুরো
পোস্ট টা পড়বেন। হয়ত আপনার মনে একটা প্রশ্ন আস্তে পারে সেটা হয়ত কয়েক লাইন পরে
ব্যাখ্যা করা বা শেষে ব্যাখ্যা করা, আর না বুঝলে সমস্যা থাকলে comment post করবেন । আমি অনলাইননে skype বা email বা কমেন্ট করে help করবো।
আগামী পোস্ট ধারাবাহিক
প্রফেশনাল ওয়েব ডিজাইন XHTML ( HTML+CSS = XHTML)-২ এর পর থেকে শুরু করবো, খুব দ্রুতই পোস্ট টা দিব।
আপনাদের
সবাইকে অনেক অনেক ধন্যবাদ, আমার ব্লগের সাথেই থাকুন।
আরও
জানতে visit করুন প্রফেশনাল ওয়েব ডিজাইন।
কোন সমস্যা হলে বা প্রশ্ন
থাকলে ব্লগে দয়াকরে comment post করে জানাবেন।
গুড .......................................
ReplyDeleteyes
ReplyDelete