HTML Layouts

What is HTML Layouts



A webpage layout is very important for improving your website within HTML. It takes a lot of time to design the website layout with a great look and feel inside HTML.

Nowadays, all types of modern websites are using CSS and Javascript based frameworks to come up with responsive and dynamic websites, but you can also use a simple tag in combination with other tags or other tag format tags inside the HTML Good layouts can be made for your website. In this, you will give some examples on how to create a simple but working layout for the webpage using CSS and HTML and its properties.



HTML Layouts - Using Tables


Creating layouts using the <table> tag in HTML This is the simplest and most popular way of creating layouts within HTML. Organize these tables into columns and rows inside the HTML so that you can use these lines and columns in HTML in any way.

Example:
In this example, the following rows within the HTML are achieved using a table with 3 rows and 2 columns, but the header and footer columns use the Callspace feature. And spreads both columns:


<!DOCTYPE html>

<html>



   <head>

      <title>Layout using Tables</title>

   </head>



   <body>

      <table width = "100%" border = "0">

        

         <tr>

            <td colspan = "2" bgcolor = "#b5dcb3">

               <h1>Web Page Main title</h1>

            </td>

         </tr>

         <tr valign = "top">

            <td bgcolor = "#aaa" width = "50">

               <b>Main Menu</b><br />

               HTML<br />

               javascript <br />

              css...

            </td>

           

            <td bgcolor = "#eee" width = "100" height = "200">

               developer tutorial.

            </td>

         </tr>

         <tr>

            <td colspan = "2" bgcolor = "#b5dcb3">

               <center>

                  Copyright © 2018 webstudy.ooo

               </center>

            </td>

         </tr>

        

      </table>

   </body>



</html>


Result-
HTML Layouts - Using Tables


Multiple Columns - HTML Layouts - Using Tables
You can design your web page to insert your web content into multiple pages inside HTML. Inside the HTML, you can put your content in any type in the middle column and you can use the menu in the HTML column to use the menu, and use the right column to keep advertising or some other stuff Can also be done for.
Example-


<!DOCTYPE html>

<html>



   <head>

      <title>Three Column Layout</title>

   </head>



   <body>

      <table width = "100%" border = "0">

        

         <tr valign = "top">

            <td bgcolor = "#aaa" width = "20%">

               <b>Main Menu</b><br />

               HTML<br />

               JavaScript<br />

               CSS...

            </td>

    

            <td bgcolor = "#b5dcb3" height = "200" width = "60%">

               developer Tutorials

            </td>

    

            <td bgcolor = "#aaa" width = "20%">

               <b>Right Menu</b><br />

               HTML<br />

               JavaScript<br />

               CSS...

            </td>

         </tr>

      <table>

   </body>

</html>


Result-
Multiple Columns - HTML Layouts - Using Tables


HTML layout - using DIV, SPAN
The element inside the HTML element is the block level element used to group HTML elements. The <div> tag inside the HTML is a block-level element, and the <span> element inside the HTML is used to group the elements at the inline level. Although we can create a very nice layout with the table inside the HTML, but the table is not a layouts tool, it was not designed as a tool. Tables within the HTML are more appropriate to present tabular data. Note - This example uses Cascading Style Sheets (CSS), so before understanding this example, you need to understand better how CSS works.

 Example:

<!DOCTYPE html>

<html>



   <head>

      <title> Layouts using DIV, SPAN</title>

   </head>



   <body>

      <div style = "width:100%">

  

         <div style = "background-color:#b5dcb3; width:100%">

            <h1>Web Study</h1>

         </div>   

         <div style = "background-color:#aaa; height:200px; width:100px; float:left;">

            <div><b>Main Menu</b></div>

            HTML<br />

            JavaScript<br />

            CSS...

         </div>  

         <div style = "background-color:#eee; height:200px; width:350px; float:left;" >

            <p>Developer Tutorials</p>

         </div> 

         <div style = "background-color:#aaa; height:200px; width:100px; float:right;">

            <div><b>Right Menu</b></div>

            HTML<br />

            JavaScript<br />

            CSS...

         </div>  

         <div style = "background-color:#b5dcb3; clear:both">

            <center>

               Copyright © 2018 webstudy.ooo

            </center>

         </div>   

      </div>

   </body>

</html>

Result-
HTML layout - using DIV, SPAN


HTML Layouts- Using CSS.

Html layout element
Websites often display content in many columns and in many ways. HTML provides meaningful elements to us. Which help us to define different parts of the web page:

<Header> - In HTML it defines headers for a document or a section
<nav> - This defines a container for navigation links inside HTML
<Section> - This defines one section in the document inside HTML
<Article> - It defines an independent self contained article inside HTML
<aside> - It defines different content from content within HTML (like a sidebar of the website)
<footer> - It defines a footer for any document or section within HTML
<details> - This defines an additional detail
<Summary> - This defines the title heading for the <details> element inside HTML


Using CSS Floats 
 Layout of the entire website can be easily done using HTML CSS float property inside HTML. Learning a CSS float is easy - you just have to remember it in it. Of How do CSS float and clear properties work?   Disadvantages: There are floating elements in it. Due to the fact that the document is bound by the flow, it can harm the person who has the flexibility.

CSS float example:

<!DOCTYPE html>

<html lang="en">

<head>

<title>Using CSS </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>



<header>

  <h2>Web Study</h2>

</header>



<section>

  <nav>

    <ul>

      <li><a href="#">HTML</a></li>

      <li><a href="#">JavaScript</a></li>

      <li><a href="#">CSS</a></li>

    </ul>

  </nav>

 

  <article>

    <h1>webstudy</h1>

    <p>webstudy is web developer information site, with tutorials and Examples to web development topics.HTML Beginning HTML Guide.online study.</p>

  </article>

</section>



<footer>

  <p>Footer</p>

</footer>



</body>

</html>

Result-
Using CSS Floats


Using CSS Flexbox
This is a new type layout mode in Flexbox in CSS3. Using CSS Flexbox in HTML ensures that when different screen sizes and different display devices are adjusted in the page layout, these elements behave in an approximate fashion.

Flexbox Example:

<!DOCTYPE html>

<html lang="en">

<head>

<title>CSS Templates maker </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;

}



/* Container for flexboxes */

section {

    display: -webkit-flex;

    display: flex;

}



/* Style the navigation menu */

nav {

    -webkit-flex: 1;

    -ms-flex: 1;

    flex: 1;

    background: #ccc;

    padding: 20px;

}



/* Style the list inside the menu */

nav ul {

    list-style-type: none;

    padding: 0;

}



/* Style the content */

article {

    -webkit-flex: 3;

    -ms-flex: 3;

    flex: 3;

    background-color: #f1f1f1;

    padding: 10px;

}



/* Style the footer */

footer {

    background-color: #777;

    padding: 10px;

    text-align: center;

    color: white;

}



/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */

@media (max-width: 600px) {

    section {

      -webkit-flex-direction: column;

      flex-direction: column;

    }

}

</style>

</head>

<body>



<header>

  <h2>Cities</h2>

</header>



<section>

  <nav>

    <ul>

      <li><a href="#">HTML</a></li>

      <li><a href="#">JavaScript</a></li>

      <li><a href="#">CSS</a></li>

    </ul>

  </nav>

 

  <article>

    <h1>webstudy</h1>

    <p>webstudy is web developer information site, with tutorials and Examples to web development topics.HTML Beginning HTML Guide.online study.</p>

  </article>

</section>



<footer>

  <p>Footer</p>

</footer>



</body>

</html>

Result-
Using CSS Flexbox

What is HTML Layouts- A webpage layout is very important for improving your website within HTML. It takes a lot of time to design the website layout with a great look and feel inside HTML. Nowadays, all types of modern websites are using CSS and Javascript based frameworks to come up with responsive and dynamic websites, but you can also use a simple tag in combination with other tags or other tag format tags inside the HTML Good layouts can be made for your website. In this, you will give some examples on how to create a simple but working layout for the webpage using CSS and HTML and its properties.

Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget