HTML Layout Techniques

এইচটিএমএল লেআউট কৌশল

একটি ওয়েবসাইট ডিজাইন করার সময় লেআউট তৈরি করা সবচেয়ে গুরুত্বপূর্ণ বিষয়, কারণ এটি নিশ্চিত করবে যে আপনার ওয়েবসাইটটি একটি সুসজ্জিত উপায়ে দেখায় এবং বিষয়বস্তু বোঝা সহজ হয়। লেআউট তৈরির জন্য বিভিন্ন কৌশল এবং কাঠামো উপলব্ধ রয়েছে, তবে এখানে আমরা সহজ কৌশলগুলি সম্পর্কে জানব। মাল্টিকলাম লেআউট তৈরি করতে আপনি নিম্নলিখিত পদ্ধতিগুলি ব্যবহার করতে পারেন:

  • HTML tables (Try not to use)
  • CSS float property
  • CSS framework
  • CSS flexbox
  • Layout using div

HTML টেবিল (প্রস্তাবিত নয়)

HTML টেবিল-ভিত্তিক বিন্যাস একটি বিন্যাস তৈরি করার সবচেয়ে সহজ উপায়গুলির মধ্যে একটি, কারণ টেবিল শুধুমাত্র সারি এবং কলাম-ভিত্তিক বিন্যাস ব্যবহার করে, কিন্তু আপনার পৃষ্ঠার বিন্যাসের জন্য HTML টেবিলগুলি সুপারিশ করা হয় না। দ্য

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

এইচটিএমএল টেবিল ব্যবহার করে একটি সাধারণ ওয়েব পেজ লেআউট তৈরির জন্য একটি উদাহরণ নিচে দেওয়া হল।

উদাহরণ:

    1.  
      1.   
      2.   
      3.    
      5.    
      6.   
      7.        
      8.        “100%" style=“border-collapse:collapse;">  
      9.   
      10.             “2" style=“background-color:#1a1a1a; text-align: center;">  
      11.                 “font-size: 30px; color: #ff6a6a;">javaTpoint Table-layout
      12.             
      13.          
      14.      
      15.   
      16.                         “2" style=“background-color:#666666;">  
        17.   
        • “#">Home
        • “#">Menu
        • “#">About-us
        • “#">Contact us
        •             
      18.                                         
      19.           
      20.      
      21.   
      22.              “background-color:#e6e6fa; width:80%; height: 400px; text-align: center;">  

      23. Write your content Here

      24.               
      25.               “background-color:#a7e6fb; height: 400px;">  

      26. This is your side bar

      27.               
      28.          
      29.        
      30.   
      31.              “2" style=“background-color:#2e2e2e; text-align: center;">  
      32.                 “color:#f08080">©Copyright javaTpoint.com

      33.             
      34.           
      35.     
      36.    
      37.   

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

CSS ফ্রেমওয়ার্ক

আপনার লেআউট দ্রুত তৈরি করতে CSS অনেক ফ্রেমওয়ার্ক যেমন W3.CSS, বুটস্ট্র্যাপ এবং আরও অনেক কিছু প্রদান করে। CSS ফ্রেমওয়ার্ক ব্যবহার করে আপনি সহজেই একটি প্রতিক্রিয়াশীল এবং আকর্ষণীয় ওয়েব লেআউট তৈরি করতে পারেন। আপনাকে শুধু এই ফ্রেমওয়ার্কের জন্য একটি লিঙ্ক যোগ করতে হবে এবং আপনি ফ্রেমওয়ার্কের মধ্যে উপলব্ধ সমস্ত বৈশিষ্ট্য ব্যবহার করতে পারেন।

CSS ফ্লোট

আপনি CSS ফ্লোট প্রপার্টি ব্যবহার করে একটি সম্পূর্ণ ওয়েব লেআউট তৈরি করতে পারেন।

সুবিধা: এটি শিখতে এবং ব্যবহার করা খুব সহজ। আপনি শুধু শিখবেন কিভাবে ফ্লোট এবং পরিষ্কার বৈশিষ্ট্য কাজ করে।

অসুবিধা: ভাসমান উপাদানগুলি নথির প্রবাহের সাথে আবদ্ধ থাকে, যা নমনীয়তার ক্ষতি করতে পারে।

উদাহরণ:

  1.   
  2.   
  3.   

  4.   

  5.   
  6.   
  7.   
  8. class=“container">  
  9.   

  10.   

  11. Tutorials Gallery

      

  12.   

  13.   

    15.   
    • “#">HTML

      •   

    • “#">CSS

      •   

    • “#">JavaScript

      •   

      

  16.   


  17.   

  18. HTML

      

  19. HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of html. Our HTML tutorial is   

  20. developed for beginners and professionals.

      

  21. TML is an acronym which stands for Hyper Text Markup Language. Let’s see what is Hyper Text and what is Markup Language?

      

  


  • Copyright © javatpoint.com

      

    •   

  •   
  •