• JSP
  • RubyonRails
  • PHP
  • Spring
  • Java IO
  • SQL Tutorial
  • jQuery
  • JavaScript
  • Servlet

  • <

    HTML Layout Elements

  • <header> - Defines a header for a document or a section
  • <nav> - Defines a container for navigation links
  • <section> - Defines a section in a document
  • <article> - Defines an independent self-contained article
  • <aside> - Defines content aside from the content (like a sidebar)
  • <footer> - Defines a footer for a document or a section
  • <details> - Defines additional details
  • <summary> - Defines a heading for the <details> element

  • HTML Layout Techniques

  • HTML tables (not recommended)
  • CSS float property
  • CSS flexbox
  • CSS framework

  • Example



    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>CSS Template</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {
        box-sizing: border-box;
    }
    
    body {
        font-family: Arial, Helvetica, sans-serif;
    }
    
    /* Style the header */
    header {
        background-color: #666;
        padding: 30px;
        text-align: center;
        font-size: 35px;
        color: white;
    }
    
    /* Create two columns/boxes that floats next to each other */
    nav {
        float: left;
        width: 30%;
        height: 300px; /* only for demonstration, should be removed */
        background: #ccc;
        padding: 20px;
    }
    
    /* Style the list inside the menu */
    nav ul {
        list-style-type: none;
        padding: 0;
    }
    
    article {
        float: left;
        padding: 20px;
        width: 70%;
        background-color: #f1f1f1;
        height: 300px; /* only for demonstration, should be removed */
    }
    
    /* Clear floats after the columns */
    section:after {
        content: "";
        display: table;
        clear: both;
    }
    
    /* Style the footer */
    footer {
        background-color: #777;
        padding: 10px;
        text-align: center;
        color: white;
    }
    
    /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
    @media (max-width: 600px) {
        nav, article {
            width: 100%;
            height: auto;
        }
    }
    </style>
    </head>
    <body>
    
    <h2>CSS Layout Float</h2>
    <p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p>
    <p>Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)</p>
    
    <header>
      <h2>Cities</h2>
    </header>
    
    <section>
      <nav>
        <ul>
          <li><a href="#">London</a></li>
          <li><a href="#">Paris</a></li>
          <li><a href="#">Tokyo</a></li>
        </ul>
      </nav>
      
      <article>
        <h1>London</h1>
        <p>London is the capital city of England. It is the most populous city in the  United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
        <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
      </article>
    </section>
    
    <footer>
      <p>Footer</p>
    </footer>
    
    </body>
    </html>
    
    
    
    
















    © copyright 2017-2021 Completedone pvt ltd.