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 দিতে হয় না।
সব মিলিয়ে সব মিলিয়ে 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 এর সাদা অংশ নেই।
সব মিলিয়ে যা শিখলাম তার সংক্ষিপ্ত একটি বিশ্লেষণী চিত্র নিচে দেখি..................
আকর্ষণীয় ওয়েব ডিজাইনিং চদিং ডাউনলোড করুন
DOWNLOAD
এবার 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 Websiteheader এর ভিতর 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; হবে।
বিশেষ কিছু কথা
প্রফেশনাল ভাবে 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 করুন হাতে কলমে ওয়েব ডিজাইনিং
আপনাদের সবাইকে অনেক অনেক ধন্যবাদ, আমার ব্লগের সাথেই থাকুন।
আরও জানতে visit করুন প্রফেশনাল ওয়েব ডিজাইন।
কোন সমস্যা হলে বা প্রশ্ন থাকলে ব্লগে দয়াকরে comment post করে জানাবেন।
"আমি রফিকুল ইসলাম, একজন ফ্রীলাঞ্চার ও ওয়েব ডিজাইনার, আপনাদের জন্য এখন থেকে প্রকাশ করব ওয়েব ডিজাইন এর পরিপূর্ণ ধারাবাহিক টিউটোরিয়াল ।আমার ধারাবাহিক টিউটোরিয়াল প্রকাশিত হবে শুধু মাত্র আমার ব্লগ ProWebdesign4u এবং টেকনোট্রিক বিডি তে । "
ওয়েব ডিজাইন নিয়ে ধারাবাহিক টিউটোরিয়াল - ১
ওয়েব ডিজাইন নিয়ে ধারাবাহিক টিউটোরিয়াল - ২ ( ড্রিমওয়েভার ডাউনলোড )
ওয়েব ডিজাইন নিয়ে ধারাবাহিক টিউটোরিয়াল - ৩ (ওয়েব ডিজাইনে ড্রিমওয়েভার ব্যবহার)
ওয়েব ডিজাইন নিয়ে ধারাবাহিক টিউটোরিয়াল - ৪ ( HTML এ লেখা প্রোগ্রামের বিভিন্ন অংশ বিশ্লেষণ )
ওয়েব ডিজাইন নিয়ে ধারাবাহিক টিউটোরিয়াল - ৫ ( হেডিং ট্যাগের ব্যবহার )
ওয়েব ডিজাইন নিয়ে ধারাবাহিক টিউটোরিয়াল - ৬ ( HTML এর সাধারন ট্যাগ সমূহ )
ওয়েব ডিজাইন নিয়ে ধারাবাহিক টিউটোরিয়াল - ৭ ( এইচটিএমএল দিয়ে ফর্ম তৈরি করুন, টেবিল সংযোজন-I )
ওয়েব ডিজাইন নিয়ে ধারাবাহিক টিউটোরিয়াল - ৮ ( এইচটিএমএল দিয়ে ফর্ম তৈরি করুন , টেবিল সংযোজন II )
ওয়েব ডিজাইন নিয়ে ধারাবাহিক টিউটোরিয়াল - ৯ ( চমৎকার চলন্ত এইচটিএমএল কোড করুন marquee এর ব্যবহার )
ওয়েব ডিজাইন নিয়ে ধারাবাহিক টিউটোরিয়াল - ১০ ( XHTML [HTML+CSS = XHTML] -১ )
