এইচটিএমএল প্রতিক্রিয়াশীল ওয়েব ডিজাইন (HTML Responsive Web Design)

স্বর্ণা আখতার

 

প্রতিক্রিয়াশীল ওয়েব ডিজাইন এর প্রধান কাজ ই হল আপনার ওয়েব সাইটকে বিভিন্ন ডিভাইস যেমন, মোবাইল বা কম্পিউটার এর লেআউট এর সাথে খাপ খাওয়ানো। এটি আপনার ওয়েব সাইটকে সহজবোধ্য ও সুখপাঠ্য করে গড়ে তোলে।

প্রতিক্রিয়াশীল ওয়েব ডিজাইন লেআউট যেভাবে তৈরি করবেন

প্রতিক্রিয়াশীল ওয়েব ডিজাইন আপনাকে নিজেই অথবা আপনি কিভাবে ফুটিয়ে তুলবেন সেটার উপর নির্ভর করবে।

নিচে একটি উদাহরন দেয়া হল


<!DOCTYPE html>
 <html lang="en-US">
 <head>
 <style>
 .city {
     float: left;
     margin: 5px;
     padding: 15px;
     width: 300px;
     height: 300px;
     border: 1px solid black;
 } 
 </style>
 </head>
 <body>
 
 <h1>W3Schools Demo</h1>
 <h2>Resize this responsive page!</h2>
 
 <div class="city">
   <h2>London</h2>
   <p>London is the capital city of England.</p>
   <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
 </div>
 
 <div class="city">
   <h2>Paris</h2>
   <p>Paris is the capital and most populous city of France.</p>
 </div>


 

বুটস্ট্র্যাপ ব্যবহারের মাধ্যমে

আগেকার বিদ্যমান সিএসএস ফ্রেমওয়ার্ক এর মাধ্যমেও প্রতিক্রিয়াশীল ওয়েব ডিজাইন বানানো যায়। আর এখানে বুটস্ট্র্যাপ ই হল এইচ টি এম এল, সিএসএস এবং যে এস ফ্রেমওয়ার্ক এর সবচেয়ে জনপ্রিয় পদ্ধতি ।

বুটস্ট্র্যাপ আপনার সাইট কে যে কোন সাইজ যেমন, ল্যাপটপ বা কম্পিউটার এ ভালোভাবে দেখাতে সহায়তা করে।

উদাহরের সাহায্যে দেখানো হল


<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
 </head>
 <body>
 
 <div class="container">
 
 <div class="jumbotron">
   <h1>W3Schools Demo</h1> 
   <p>Resize this responsive page!</p> 
 </div>
 
 <div class="row">
   <div class="col-md-4">
     <h2>London</h2>
     <p>London is the capital city of England.</p>
     <p>It is the most populous city in the United Kingdom,
     with a metropolitan area of over 13 million inhabitants.</p>
   </div>
   <div class="col-md-4">
     <h2>Paris</h2>
     <p>Paris is the capital and most populous city of France.</p>
   </div>
   <div class="col-md-4">
     <h2>Tokyo</h2>
     <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
     and the most populous metropolitan area in the world.</p>
   </div>
 </div>
 
 </div>
 
 </body>
 </html>