ধাপ
২

খসড়া তৈরি

সব কিছুর শুরুতেই চিন্তা ভাবনা করতে হয়। তারপর তার একটা খসড়া তৈরি করা হয়। ওয়েব সাইট তৈরিতেও সেই একই কাজ করা উচিৎ। আমরা শুরু হিসেবে যে ওয়েব সাইটটা তৈরি করব তার খসড়া হবে নিচের মত। হাতের লেখা দেখে আমাকে আবার ডাক্তার ভাবার দরকার নেই! ;)

আমাদের সাইটটা আমরা সম্পূর্ণ বাংলা ভাষা তৈরি করব। তাই খসড়াটাও বাংলা :)

উপরের খসড়াটিকে নিচের মত কল্পনা করা যায়ঃ

HEADER

LOGO

NAV

ARTICAL

SECTION

POST 1

SECTION

POST 2

ASIDE

নতুন ফাইল তৈরি

প্রথমে আমাদের প্রোজেক্টের জন্য একটি ফোল্ডার তৈরি করুন। তারপর নিচের ধাপ গুলো সম্পাদন করুনঃ

Brackets চালু করুন।
File মেনু থেকে New এ ক্লিক করুন অথবা Ctrl + N চাপুন, তাহলে নতুন ডকুমেন্ট চালু হবে।
ডকুমেন্টটি সংরক্ষণ করার জন্য Ctrl + S চেপে ফাইলটি "index.html" নাম দিয়ে প্রোজেক্ট ফোল্ডারে সংরক্ষণ করুন।
তারপর Ctrl + Alt + O চাপ দিই এবং আমাদের প্রোজেক্ট ফোল্ডারটি দেখিয়ে দিই। তাহলে Brackets এর বাম পাশে প্রোজেক্ট ফোল্ডারের সব ফাইল সমূহ দেখাবে।
এবার বাম থেকে "index.html" এ ক্লিক করে কাজ শুরু করুন।

ইচ্ছে হলে Ctrl + Alt + P চাপ দিয়ে Live Preview চালু করে Brackets একপাশে এবং ক্রোমকে আরেকপাশে রেখে কোড লিখুন। এতে কোন কোডের জন্য কি পরিবর্তন হল তা দেখতে এবং বুঝতে সুবিধা হবে।

ডকুমেন্টের নাম index.html দেয়া হল কেন?

ওয়েবসাইট তৈরি করে একে সবার জন্য উন্মুক্ত করতে সার্ভার তৈরি করে অথবা কিনে তাতে ডকুমেন্ট গুলো রাখা হয়। আর সার্ভারকে যখন কোনো ফাইল লোড করতে বলা হয় (যেমনঃ example.com/index.html - এটি সার্ভারের প্রধান ফোল্ডারে রাখা index.html ফাইলকে নির্দেশ করছে), তখন সার্ভার সে ফাইলটিকে ব্রাউজারে পাঠিয়ে দেয়। কিন্তু এখন যদি ফাইল লোড করতে না বলে কোনো ফোল্ডারকে লোড করতে বলা হয় (যেমনঃ example.com/about/ - এটি সার্ভারের প্রধান ফোল্ডারের ভিতর about নামে আরেকটি ফোল্ডারকে নির্দিষ্ট করছে), তাহলে সার্ভার ঐ ফোল্ডারে index নামযুক্ত ফাইল (যেমন index.html, index.htm, index.php ইত্যাদি) খুঁজতে থাকে এবং এরকম কোনো ফাইল খুঁজে পেলে সে ফাইলটিকে ব্রাউজারের কাছে পাঠিয়ে দেয়। অন্যথায় ঐ ফোল্ডারের সব ফাইলের একটা লিস্ট পাঠায়।

ঐ ফোল্ডারের যদি আরো ডকুমেন্ট থাকেও, তাহলেও index যুক্ত ফাইলটিকেই শুধু ব্রাউজারের কাছে পাঠানো হবে।

এ কারনেই নীড় (home) পাতাকে index নাম দেয়া হয়। আমাদের ডকুমেন্ট যেহেতু HTML তাই .html এক্সটেনশন ব্যবহার করা হয়েছে।

সব সার্ভারের জন্য এ নিয়ম প্রযোজ্য নাও হতে পারে। জনপ্রিয় Apache সার্ভারে এ নিয়ম মানা হয়।

প্রাথমিক কোড

আমরা যে খসড়া তৈরি করেছি তার উপর ভিত্তি করে এখন আমরা প্রাথমিক কোড লিখব। প্রাথমিক কোড বলতে ভিত্তি কোড। চলুন কোডটি দেখে নিই, তারপর ব্যাখ্যা।

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

	</head>

	<body>

	</body>
</html>

DOCTYPE দেখে বুঝতেই পারছেন আমরা HTML5 দিয়ে এ সাইট বানাবো। বর্তমানে বিশ্বের জনপ্রিয় প্রায় সব ওয়েব সাইট HTML5 ব্যবহার করছে। তো আমরা ব্যবহার করবনা কেন!

এখানে <meta charset="utf-8"> কোড দিয়ে বুঝানো হয়েছে এ ডকুমেন্টে ইউনিকোড অক্ষরও ব্যবহার করা হয়েছে। ইংরেজি ছাড়া অন্য ভাষা ব্যবহার করলে এ কোডটি ব্যবহার করা হয়।

এবার আমাদের ওয়েব সাইটের টাইটেল যুক্ত করার পালা। ধরি আমাদের সাইটের টাইটেল হচ্ছে "My First Website"। এর জন্য <head> অংশে নিচের কোডটি লিখতে হবে।

<title>My First Website</title>

HTML ডকুমেন্টের ভিত্তি বানানো শেষ।

Header

এ অংশে মূলত ওয়েব সাইটের লোগো/নাম এবং মেনু থাকে। অন্য ভাবে বলতে গেলে ওয়েব সাইটের শুরুর যে অংশে লোগো/নাম এবং মেনু থাকে সে অংশটিই হল হেডার।

আমাদের হেডার অংশে একটি লোগো এবং মেনু বার থাকবে।

Logo

ধরি লোগোটি আমাদের প্রোজেক্ট ফোল্ডারের ভিতর "_images" নামে ফোল্ডারে "logo.png" নামে আছে। ওয়েব সাইটে সাধারনত gif, jpg এবং png ছবি ডকুমেন্ট ব্যবহার করা হয়। যাইহোক, তো আমাদের লোগোর জন্য নিচের কোডটি <body> ট্যাগের ভিতর লিখি। এখানে <div> ট্যাগে logo ক্লাস ব্যবহার করা হয়েছে, এবং এর ভিতর আমাদের সাইটের নাম <h1> ট্যাগে এবং হেডার ছবি <img> ট্যাগ ব্যবহার করে দেয়া হয়েছে।

<header>
	<div class="logo">
		<h1>My First Website</h1>
		<img src="_images/logo.png">
	</div>
</header>

অনুশীলনের জন্য আমার বানানো একটি ছবিটি এখান থেকে ডাউনলোড করতে পারেন। এটি শুধু এ নির্দেশিকার জন্য দ্রুত তৈরি করা।

HTML5 এ <header> ট্যাগটি দিয়ে হেডার অংশ বুঝানো হয়। পুরনো নিয়মে লিখলে আমরা এখানে <div> ট্যাগ ব্যবহার করতাম। আবার যেহেতু লোগোর জন্য আলাদা ট্যাগ নেই তাই আমরা লোগো দিতে কিন্তু <div> ট্যাগই ব্যবহার করেছি, এবং ডিজাইনের সুবিধার্থে logo ক্লাস যুক্ত করে এটিকে অন্য <div> ট্যাগ থেকে আলাদা করেছি।

মেনু বানানোর জন্য আমরা <nav> ট্যাগের ভিতর <ul> ট্যাগ ব্যবহার করব। কোডটি হবে নিচের মত। এ কোডটিও <header> ট্যাগের ভিতর লিখতে হবে।

<nav>
	<ul>
		<a href="/"><li>নীড়</li></a>
		<a href="#"><li>সম্পর্ক</li></a>
	</ul>
</nav>

উপরের কোডে <a> ট্যাগের ভিতর <li> ট্যাগ ব্যবহার করে মেনুর সাথে লিঙ্ক যুক্ত করা হয়েছে। নীড় এর লিঙ্ক হিসেবে "/" ব্যবহার করা হয়েছে, এটি ওয়েব সাইটের শুরুর পেজ/সাইটের নীড় পাতা নির্দেশ করে; অর্থাৎ এটি ব্যবহার করলে আপনার ব্রাউজার সয়ংক্রিয় "/" এর স্থানে আপনার সাইটের লিঙ্ক প্রতিস্থাপন করে নেয়।

যেমনঃ আপনার ওয়েবসাইটের নাম যদি হয় www.example.com তাহলে "/_images/logo.png" লিঙ্কটিকে ব্রাউজার স্বয়ংক্রিয় এরকম ভেবে কাজ করবেঃ "www.example.com/_images/logo.png"।

সম্পর্ক মেনুতে "#" ব্যবহার করা হয়েছে কোড প্রস্তুত করার জন্য, যাতে পরে সম্পর্ক পাতা বানানো হলে লিঙ্কটি শুধু "#" এর স্থানে প্রতিস্থাপন করলেই হয়ে যায়।

Artical

এ অংশে থাকবে আমাদের পোষ্ট সমূহ।

পোষ্ট গুলোর কোড গুলো লিখা হবে <artical> ট্যাগের ভিতর। আর পোষ্ট গুলো হবে <section> ট্যাগের ভিতর। ধরি আমাদের মোট তিনটি পোষ্ট থাকবে ওয়েবসাইটে। তো কোডটি হবে নিচের মত।

<artical>
	<section>
		<h1 id="post01">প্রথম পোষ্ট</h1>	
		<p>এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট।
এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট।</p>
	</section>

	<section>
		<h1 id="post02">দ্বিতীয় পোষ্ট</h1>	
		<p>এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট।
এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট।</p>
	</section>
    
    <section>
		<h1 id="post03">তৃতীয় পোষ্ট</h1>	
		<p>এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট।
এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট।</p>
	</section>
</artical>

উপরের কোড দেখে আশা করি <artical> এবং <section> ট্যাগের ব্যবহার বুঝেছেন।

Aside

<aside> ট্যাগটি ব্যবহার করা হয় এমন এলিমেন্ট সমূহকে রাখার জন্য যেগুলো কোনো এক পাশে (বামে অথবা ডানে) রাখা হবে। আমাদের খসড়া অনুযায়ী ওয়েবসাইটের ডানপাশে একটি সাইড বার থাকবে, যাতে পোষ্টের তালিকা থাকবে। তো এর কোড নিচের মত হবে।

<aside>
	<section>
		<h2>পোষ্ট সমূহ</h2>
			<ul>
			<li><a href="/#post01">প্রথম পোষ্ট</a></li>
			<li><a href="/#post02">দ্বিতীয় পোষ্ট</a></li>
            <li><a href="/#post03">তৃতীয় পোষ্ট</a></li>
		</ul>
	</section>
</aside>

লক্ষ করলে দেখবেন মেনু তৈরির সময় আমরা <a> ট্যাগের ভিতর <li> ট্যাগ লিখেছিলাম। আবার এখানে <li> ট্যাগের ভিতর <a> ট্যাগ লিখেছি! সাধারনতর <li> এর ভিতরই <a> ট্যাগ ব্যবহার করে তালিকাতে লিঙ্ক যুক্ত করা হয়। আমরা মেনুতে একটু বেতিক্রম করেছি আমাদের ডিজাইনের সুবিধার্থে। সম্পূর্ণ ওয়েবসাইট তৈরি শেষ হলে মেনুর কোড পরিবর্তন করে সাধারন পদ্ধতি ব্যবহার করে পরীক্ষা করে দেখুন, তাহলে মেনুতে ব্যতিক্রম করার কারণটি বুঝতে পারবেন।

Footer

<footer> ট্যাগে মূলত কপিরাইট এবং সাইট সম্পর্কিত তথ্য থাকে। আরো কিছুও থাকতে পারে। আমরা শুধু এ অংশে কপিরাইট সম্পর্কিত কথা লিখব। কোডটা হবে এরকম।

<footer>
	<p>স্বত্বাধিকারী &copy; ইমাজিনেটিভ ওয়ার্ল্ড কোড. সর্বস্বত্ব সংরক্ষিত.</p>
</footer>

লেআউট তৈরি সমাপ্ত

আমাদের HTML কোডিং করা শেষ। একে আমরা কোডিং খসড়া বলতে পারি। HTML দিয়ে এ খসড়াকে লেআউট বলা হয়। তো আমাদের লেআউট তৈরি করা শেষ।

তো দেখা যাক পুরো কোডিংটা একত্রে কেমন হল!

<!DOCTYPE html>
<html>
	<head>

		<meta charset="utf-8">
		<title>My first website</title>

	</head>

	<body>

	<header>
		<div class="logo">
			<h1>My First Website</h1>
			<img src="_images/logo.png">
		</div>
		<nav>
			<ul>
				<a href="/"><li>নীড়</li></a>
				<a href="#"><li>সম্পর্ক</li></a>
			</ul>
		</nav>
	</header>

	<artical>
		<section>
			<h1 id="post01">প্রথম পোষ্ট</h1>
			<p>এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট।
			এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট।</p>
		</section>

		<section>
			<h1 id="post02">দ্বিতীয় পোষ্ট</h1>	  
			<p>এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট।
			এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট।</p>
		</section>

		<section>
			<h1 id="post03">তৃতীয় পোষ্ট</h1>	  
			<p>এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট।
			এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট। এইটা হল একটা পোষ্ট।</p>
		</section>
	</artical>

	<aside>
		<section>
			<h2>পোষ্ট সমূহ</h2>
			<ul>
				<li><a href="/#post01">প্রথম পোষ্ট</a></li>
				<li><a href="/#post02">দ্বিতীয় পোষ্ট</a></li>
                <li><a href="/#post03">তৃতীয় পোষ্ট</a></li>
			</ul>
		</section>
	</aside>

	<footer>
		<p>স্বত্বাধিকারী &copy; ইমাজিনেটিভ ওয়ার্ল্ড কোড. সর্বস্বত্ব সংরক্ষিত.</p> 
	</footer>

	</body>
</html>

তো নিচের লিঙ্কে ক্লিক করে দেখুন তো প্রিভিউ এক রকম হয়েছে কিনা!

উদাহরণ প্রিভিউ

লিঙ্ক গুলোতে ক্লিক দিলে কিন্তু সঠিক ভাবে কাজ করবেনা! কারন ফাইলটা সার্ভারের রুট ফোল্ডারের নেই!

আমরা এখানে নতুন যে ট্যাগ গুলো ব্যবহার করেছি সেগুলো হলঃ

<header>
<nav>
<artical>
<section>
<aside>
<footer>

এ ট্যাগ গুলো HTML5 এর ট্যাগ। এগুলোর বদলে <div> ট্যাগ আগে ব্যবহার করা হত, ঠিক এভাবেঃ

<div class="header"> ... </div>
<div class="nav"> ... </div>
<div class="artical"> ... </div>
<div class="section"> ... </div>
<div class="aside"> ... </div>
<div class="footer"> ... </div>

HTML5 এ ডকুমেন্টের বিভিন্ন অংশ আরো ভালো ভাবে বুঝার জন্য প্রত্যেকটিকে এক একটি ট্যাগেই রূপান্তর কর হয়েছে। ট্যাগ গুলো <div> এর কাজ করলেও এখন আগের থেকে পরিষ্কার বুঝা যায় যে ডকুমেন্টের কোনটি কি অংশ। মানুষের জন্য তো সহজ হয়েছেই, সাথে সার্চ-বটের জন্যও!

লেআউট তো হল, এবার লেআউটকে সাজানোর পালা!