NEW

6/recent/ticker-posts

Header Ads Widget

HTML Layout Techniques

Sunday, June 11, 2023

 

HTML Layout Techniques

Creating layouts are the most important things while designing a website, as it will ensure that your website looks in a well-arranged way and the content appears easy to understand. There are various techniques, and frameworks available for creating layouts, but here we will learn about simple techniques. You can use the following methods to create multicolumn layouts:

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

HTML Tables (Not Recommended)

HTML table-based layout is one of the easiest ways for creating a layout, as table use only rows and column-based format, but HTML tables are not recommended for your page layout. The

element is designed to display tabular data. It is not good for a layout. Although first creating a layout is easy, but if you want to change or redesign your website, then it will be a complicated task.

Following is an example for the creation of a simple web page layout using HTML table.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.     <style>  
  5.         li{  
  6.             display: inline-block;  
  7.             padding: 10px;}  
  8.         a{  
  9.             color:#20b2aa;  
  10.         }  
  11.       </style>  
  12.  </head>  
  13. <body>  
  14.      <!-- Header Section -->  
  15.        <table width="100%" style="border-collapse:collapse;">  
  16.            <tr>  
  17.             <td colspan="2" style="background-color:#1a1a1a; text-align: center;">  
  18.                 <h3 style="font-size: 30px; color: #ff6a6a;">javaTpoint Table-layout</h3>  
  19.             </td>  
  20.          </tr>  
  21.    <!-- Nav Section -->  
  22.           <tr>  
  23.                         <td colspan="2" style="background-color:#666666;">  
  24.                 <ul>  
  25.                                                       <li><a href="#">Home</a></li>  
  26.                 <li><a href="#">Menu</a></li>  
  27.                 <li><a href="#">About-us</a></li>  
  28.                 <li><a href="#">Contact us</a></li>  
  29.             </ul>  
  30.                                         </td>  
  31.           </tr>  
  32.    <!-- Main Section -->  
  33.           <tr>  
  34.              <td style="background-color:#e6e6fa; width:80%; height: 400px; text-align: center;">  
  35.                <p>Write your content Here</p>  
  36.               </td>  
  37.               <td style="background-color:#a7e6fb; height: 400px;">  
  38.                  <p>This is your side bar</p>  
  39.               </td>  
  40.          </tr>  
  41.      <!-- Footer Section -->  
  42.            <tr>  
  43.              <td colspan="2" style="background-color:#2e2e2e; text-align: center;">  
  44.                 <p style="color:#f08080">©<strong>Copyright javaTpoint.com</strong></p>  
  45.             </td>  
  46.           </tr>  
  47.     </table>  
  48.  </body>  
  49. </html>  

Note: This example is just for show you how to create layout using table but it's not recommended to use table layout.

CSS Frameworks

CSS provides many frameworks like W3.CSS, Bootstrap, and many more, to create your layout fast. Using CSS frameworks you can easily create a responsive and attractive web layout. You just need to add a link for these frameworks, and you can use all properties available in the framework.

CSS Float

You can create an entire web layout using CSS float property.

Advantage: It is very easy to learn and use. You just learn how the float and clear properties work.

Disadvantage: Floating elements are tied to the document flow, which may harm the flexibility.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. div.container {  
  6.     width: 100%;  
  7.     border: 1px solid gray;  
  8. }  
  9.   
  10. header, footer {  
  11.     padding: 1em;  
  12.     color: white;  
  13.     background-color: #000080;  
  14.     clear: left;  
  15.     text-align: center;  
  16. }  
  17.   
  18. nav {  
  19.     float: left;  
  20.     max-width: 160px;  
  21.     margin: 0;  
  22.     padding: 1em;  
  23. }  
  24.   
  25. nav ul {  
  26.     list-style-type: none;  
  27.     padding: 0;  
  28. }  
  29.   
  30. nav ul a {  
  31.     text-decoration: none;  
  32. }  
  33.   
  34. article {  
  35.     margin-left: 170px;  
  36.     border-left: 1px solid gray;  
  37.     padding: 1em;  
  38.     overflow: hidden;  
  39. }  
  40. </style>  
  41. </head>  
  42. <body>  
  43.   
  44. <div class="container">  
  45.   
  46. <header>  
  47. <h1>Tutorials Gallery</h1>  
  48. </header>  
  49.   
  50. <nav>  
  51. <ul>  
  52. <li><a href="#">HTML</a></li>  
  53. <li><a href="#">CSS</a></li>  
  54. <li><a href="#">JavaScript</a></li>  
  55. </ul>  
  56. </nav>  
  57. <article>  
  58. <h1>HTML</h1>  
  59. <p>HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of html. Our HTML tutorial is   
  60. developed for beginners and professionals.</p>  
  61. <p>TML is an acronym which stands for Hyper Text Markup Language. Let's see what is Hyper Text and what is Markup Language?</p>  
  62. </article>  
  63. <footer>Copyright © javatpoint.com</footer>  
  64. </div>  
  65. </body>  
  66. </html>  

CSS Flexbox

Flexbox is a new layout mode in CSS3.

Advantage: It ensures that the page layout must accommodate different screen sizes and different display devices.

Disadvantages: It does not work in IE10 and earlier.

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. .flex-container {  
  6.     display: -webkit-flex;  
  7.     display: flex;    
  8.     -webkit-flex-flow: row wrap;  
  9.     flex-flow: row wrap;  
  10.     text-align: center;  
  11. }  
  12.   
  13. .flex-container > * {  
  14.     padding: 15px;  
  15.     -webkit-flex: 1 100%;  
  16.     flex: 1 100%;  
  17. }  
  18.   
  19. .article {  
  20.     text-align: left;  
  21. }  
  22.   
  23. header {background: #000080;color:white;}  
  24. footer {background: #000080;color:white;}  
  25. .nav {background:#eee;}  
  26.   
  27. .nav ul {  
  28.     list-style-type: none;  
  29.     padding: 0;  
  30. }  
  31. .nav ul a {  
  32.     text-decoration: none;  
  33. }  
  34.   
  35. @media all and (min-width: 768px) {  
  36.     .nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}  
  37.     .article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}  
  38.     footer {-webkit-order:3;order:3;}  
  39. }  
  40. </style>  
  41. </head>  
  42. <body>  
  43.   
  44. <div class="flex-container">  
  45. <header>  
  46. <h1>City Gallery</h1>  
  47. </header>  
  48.   
  49. <nav class="nav">  
  50. <ul>  
  51. <li><a href="#">HTML</a></li>  
  52. <li><a href="#">CSS</a></li>  
  53. <li><a href="#">JavaScript</a></li>  
  54. </ul>  
  55. </nav>  
  56.   
  57. <article class="article">  
  58. <h1>HTML</h1>  
  59. <p>HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of html. Our HTML tutorial is   
  60. developed for beginners and professionals.</p>  
  61. <p>TML is an acronym which stands for Hyper Text Markup Language. Let's see what is Hyper Text and what is Markup Language?</p>  
  62. <p><strong>Resize this page to see what happens!</strong></p>  
  63. </article>  
  64.   
  65. <footer>Copyright © javatpoint.com</footer>  
  66. </div>  
  67.   
  68. </body>  
  69. </html>  

Layout using div

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Webpage using div</title>  
  5.     <style>  
  6.         body{  
  7.             margin:0px;  
  8.         }  
  9.         .header{  
  10.                 padding: 10px;  
  11.                 background-color:#455e64;  
  12.                 text-align: center;  
  13.                }  
  14.           .header h2{  
  15.             color: black; }  
  16.               /*===============[Nav CSS]==========*/  
  17.               .nav{  
  18.                 background-color:#243238;  
  19.                 padding: 5px;  
  20.                 }  
  21.                
  22.               .nav li{  
  23.               list-style: none;  
  24.               display: inline-block;  
  25.               padding: 8px;  
  26.                }  
  27.            .nav a{  
  28.             color: #fff;  
  29.            }  
  30.              
  31.           .nav ul li a:hover{  
  32.             text-decoration: none;  
  33.             color: #7fffd4;  
  34.            }  
  35.               .lside{  
  36.                  float: left;  
  37.                width: 80%;  
  38.                min-height: 440px;  
  39.                background-color: #f0f8ff;  
  40.                text-align: center;  
  41.               }  
  42.            .rside  
  43.            {  
  44.             text-align: center;  
  45.             float: right;  
  46.             width: 20%;  
  47.               min-height: 440px;  
  48.              background-color:  #c1cdcd;  
  49.            }  
  50.            .footer{  
  51.              height: 44px;  
  52.                 background-color:#455e64;   
  53.             text-align: center;   
  54.             padding-top: 10px;}  
  55.   
  56.             .footer p{  
  57.                 color:  #8fbc8f;  
  58.             }  
  59.   
  60.     </style>  
  61. </head>  
  62. <body>  
  63. <div>  
  64.     <div class="header">  
  65.       <h2>javaTpoint Div Layout</h2>  
  66.     </div>  
  67.             <!-- Nav -->  
  68.         <div class="nav">  
  69.             <ul>  
  70.                 <li><a href="#">HOME</a></li>  
  71.                 <li><a href="#">MENU</a></li>  
  72.                 <li><a href="#">ABOUT</a></li>  
  73.                 <li><a href="#">CONTACT</a></li>  
  74.                 <li style="float: right;"><a href="#">LOGIN</a></li>  
  75.                 <li style="float: right;"><a href="#">SIGN-UP</a></li>  
  76.             </ul>  
  77.         </div>  
  78.        
  79.       <!-- main -->  
  80.         <div style="height:440px">  
  81.             <div class="lside">     
  82.                 <p>Write your content here</p>  
  83.             </div>  
  84.         <!-- side -->  
  85.             <div class="rside">  
  86.                 <p>This is side</p>  
  87.             </div>  
  88.         </div>  
  89.       <!-- footer -->  
  90.        <div class="footer">  
  91.         <p>©<strong>Copyright javaTpoint.com</strong></p>  
  92.     </div>      
  93.  </div>  
  94. </body>  
  95. </html>
Tags:

Post a Comment

0 Comments

Post a Comment

Recents Post

Exploring Paidwork - Your Gateway to Earning Online

Exploring Paidwork - Your Gateway to Earning Online

Slogan Technologies Monday, May 13, 2024

In today's digital age, the possibilities for earning money online are vast and …