HTMLও CSS ব্যবহার করে লে-আউট কাঠামো তৈরি।
আসসালাসু আলাইকুম।আপনারা কেমন আছেন?
তো আমরা গত পর্বে শিখেছি যে ( টেবিলে ব্যবহৃত অ্যাট্রিবিউটসমূহ গুলো হলোঃ ) তৈরি করবেন যেভাবে। ) আর আজকে যে বিষয় নিয়ে আলোচনা করব সেটি হলো ( HTMLও CSS ব্যবহার করে লে-আউট কাঠামো তৈরি। ) তো চলেন দেরি না করে শুরু করা যাক।
একটা ওযেব পেইজের ভিতরে কয়েকটি অংশ থাকে। যেমন - Header, Content area এবং Footer। লে-আউট হচ্ছে মুলত Content area টা কেমন হবে তা নির্ধারণ করে। Content area টা মুলত একটা পেইজের Header পরের অংশ। Content area কে মুলত বিভিন্ন কলামে ভাগকরতে পারি। আগে শুধুমাত্র HTML ব্যবহার করে² লে-আউট তৈির করা হত কিন্তু বর্তমানে HTML এবং CSS একত্রে ব্যবহার করে লে-আউট তৈরি করা হয়। একটি ওয়েব পেজের ভিতরের বিভিন্ন অংশের একটি কাঠামো নিচে দেয়া হলো
Header→Slidebar→content One ও content two →Footer
লে-আউট তৈরিতে ব্যবহৃত ট্যাগঃ লে-আউট তৈরিতে দুই ধরনের ট্যাগ ব্যবহৃত হয়। যথা-
১, টেবিল (<table>......... </table>) [শুধমাত্র HTML ব্যবহার করে লে-আউট তৈরিতে এই ট্যাগ ব্যবহৃত হয়। ]
২,ডিভ (<div>........</div>) [HTML এবং CSS একত্রে ব্যবহার করে লে-আউট তৈরিতে এই ট্যাগ ব্যবহৃত হয়। ]
১,টেবিল (<table>......... </table>) ট্যাগ ব্যবহার করে লে-আউট তৈরিঃ
টেবিল (<table>......... </table>) ট্যাগ ব্যবহার করে নিচের চিত্রেরর মতো ৩টি রো এবং ২টি কলাম বিষিষ্ট একটি ওয়েব পেইজ লে-আউট তৈরিতে ব্যবহৃত HTML Code :
<html>
<body>
<table width="500" border="1">
<tr>
<td bgcolor="green">
<h1>Web Tutorial </h1>
</td> </td>
</tr>
<tr>
<td bgcolor="#FFE900" Width="90px">
<b> Menu </b>
<br> Html </br>
<br>Css <br>
<br>javascript <br>
</td>
<tr>
<td bgcolor="#FFEEFF" height="200px" width="400px"> <b>Content Goes Here </b>
<br>
<h1> WELCOME TO ALL MEMBERS </h1> </br>
<br> Welcome To ICT. Mojidul Islam.post: Rohomoth Pur Madrasha.villeage: Dhokkhin Ramnath Pur Pathan Para Badarganj,Rangpur. </br> </td>
</tr>
<tr> <td bgcolor="#FFA5FF" >
</td>
</tr>
</table>
</body>
</html>
ফলাফলঃ যে কোন ব্রাউজার সফ্টওয়্যার (internet Explorer/Mozilla Firefox)ব্যবহার করে ফাইলটি রান করলেই আউটপুট পাওয়া যাবে।
২, ২,ডিভ (<div>........</div>) ট্যাগ ব্যবহার করে লে-আউট তৈরিঃ
২,ডিভ (<div>........</div>) ট্যাগ ব্যবহার করে উপরের উল্লিখিত ওয়েব পেজ লে-আউটেরর মতো ৩টি রো এবং ২টি কলাম বিষিষ্ট একটি ওয়েব পেইজ লে-আউট তৈরিতে ব্যবহৃত HTML Code:
<html>
<body>
<div style ="width="400px">
<div style="background-color:#FFFFA5;"> <h1> Web Tutorial </h1>
</div>
<div style="background-color:#FF00A5; height:150px;width:100px; float:right;"> <b> Menu </b> <br> Html<br> Css <br> javascript </div>
<div style="background-color:#A500A5; height: 300px; width:500px; float: left;"> <b> Content gose here</b> <br> <h1> WELCOME TO ALL MEMBERS </h1> </br> <br> Welcome To ICT. Mojidul Islam.post: Rohomoth Pur Madrasha.villeage: Dhokkhin Ramnath Pur Pathan Para Badarganj,Rangpur. </br> </div>
<div style="background-color:#FFA5FF; clear: both;text-align:center;"> <b> Copyright © </b>
</div>
</body>
</html>
ফলাফলঃ যে কোন ব্রাউজার সফ্টওয়্যার (internet Explorer/Mozilla Firefox)ব্যবহার করে ফাইলটি রান করলেই আউটপুট পাওয়া যাবে।
আজকে এই পর্যন্তই, আবার কোন একদিন দেখা হবে ইনশাআল্লাহ্ , HTMLবা ওয়েব ডিজাইন কোন পোস্ট নিয়ে। আপাততো সবাই ভালো থাকুন, সুস্থ থাকুন। আল্লাহ্র কাছে সবসময় এই দোয়াই করি। আল্লাহ্ হাফেজ…
আসসালাসু আলাইকুম।আপনারা কেমন আছেন?
তো আমরা গত পর্বে শিখেছি যে ( টেবিলে ব্যবহৃত অ্যাট্রিবিউটসমূহ গুলো হলোঃ ) তৈরি করবেন যেভাবে। ) আর আজকে যে বিষয় নিয়ে আলোচনা করব সেটি হলো ( HTMLও CSS ব্যবহার করে লে-আউট কাঠামো তৈরি। ) তো চলেন দেরি না করে শুরু করা যাক।
একটা ওযেব পেইজের ভিতরে কয়েকটি অংশ থাকে। যেমন - Header, Content area এবং Footer। লে-আউট হচ্ছে মুলত Content area টা কেমন হবে তা নির্ধারণ করে। Content area টা মুলত একটা পেইজের Header পরের অংশ। Content area কে মুলত বিভিন্ন কলামে ভাগকরতে পারি। আগে শুধুমাত্র HTML ব্যবহার করে² লে-আউট তৈির করা হত কিন্তু বর্তমানে HTML এবং CSS একত্রে ব্যবহার করে লে-আউট তৈরি করা হয়। একটি ওয়েব পেজের ভিতরের বিভিন্ন অংশের একটি কাঠামো নিচে দেয়া হলো
Header→Slidebar→content One ও content two →Footer
লে-আউট তৈরিতে ব্যবহৃত ট্যাগঃ লে-আউট তৈরিতে দুই ধরনের ট্যাগ ব্যবহৃত হয়। যথা-
১, টেবিল (<table>......... </table>) [শুধমাত্র HTML ব্যবহার করে লে-আউট তৈরিতে এই ট্যাগ ব্যবহৃত হয়। ]
২,ডিভ (<div>........</div>) [HTML এবং CSS একত্রে ব্যবহার করে লে-আউট তৈরিতে এই ট্যাগ ব্যবহৃত হয়। ]
১,টেবিল (<table>......... </table>) ট্যাগ ব্যবহার করে লে-আউট তৈরিঃ
টেবিল (<table>......... </table>) ট্যাগ ব্যবহার করে নিচের চিত্রেরর মতো ৩টি রো এবং ২টি কলাম বিষিষ্ট একটি ওয়েব পেইজ লে-আউট তৈরিতে ব্যবহৃত HTML Code :
<html>
<body>
<table width="500" border="1">
<tr>
<td bgcolor="green">
<h1>Web Tutorial </h1>
</td> </td>
</tr>
<tr>
<td bgcolor="#FFE900" Width="90px">
<b> Menu </b>
<br> Html </br>
<br>Css <br>
<br>javascript <br>
</td>
<tr>
<td bgcolor="#FFEEFF" height="200px" width="400px"> <b>Content Goes Here </b>
<br>
<h1> WELCOME TO ALL MEMBERS </h1> </br>
<br> Welcome To ICT. Mojidul Islam.post: Rohomoth Pur Madrasha.villeage: Dhokkhin Ramnath Pur Pathan Para Badarganj,Rangpur. </br> </td>
</tr>
<tr> <td bgcolor="#FFA5FF" >
</td>
</tr>
</table>
</body>
</html>
ফলাফলঃ যে কোন ব্রাউজার সফ্টওয়্যার (internet Explorer/Mozilla Firefox)ব্যবহার করে ফাইলটি রান করলেই আউটপুট পাওয়া যাবে।
২, ২,ডিভ (<div>........</div>) ট্যাগ ব্যবহার করে লে-আউট তৈরিঃ
২,ডিভ (<div>........</div>) ট্যাগ ব্যবহার করে উপরের উল্লিখিত ওয়েব পেজ লে-আউটেরর মতো ৩টি রো এবং ২টি কলাম বিষিষ্ট একটি ওয়েব পেইজ লে-আউট তৈরিতে ব্যবহৃত HTML Code:
<html>
<body>
<div style ="width="400px">
<div style="background-color:#FFFFA5;"> <h1> Web Tutorial </h1>
</div>
<div style="background-color:#FF00A5; height:150px;width:100px; float:right;"> <b> Menu </b> <br> Html<br> Css <br> javascript </div>
<div style="background-color:#A500A5; height: 300px; width:500px; float: left;"> <b> Content gose here</b> <br> <h1> WELCOME TO ALL MEMBERS </h1> </br> <br> Welcome To ICT. Mojidul Islam.post: Rohomoth Pur Madrasha.villeage: Dhokkhin Ramnath Pur Pathan Para Badarganj,Rangpur. </br> </div>
<div style="background-color:#FFA5FF; clear: both;text-align:center;"> <b> Copyright © </b>
</div>
</body>
</html>
ফলাফলঃ যে কোন ব্রাউজার সফ্টওয়্যার (internet Explorer/Mozilla Firefox)ব্যবহার করে ফাইলটি রান করলেই আউটপুট পাওয়া যাবে।
আজকে এই পর্যন্তই, আবার কোন একদিন দেখা হবে ইনশাআল্লাহ্ , HTMLবা ওয়েব ডিজাইন কোন পোস্ট নিয়ে। আপাততো সবাই ভালো থাকুন, সুস্থ থাকুন। আল্লাহ্র কাছে সবসময় এই দোয়াই করি। আল্লাহ্ হাফেজ…