saftutorials.com
HTML Structure Tutorial

HTML Structure as like call HTML Layouts. If you learn complete of about HTML Structure so you can make a website easily. This is part of you HTML Template.

How to use HTML Structure/Layouts?

You can use HTML structure by 4 ways.

1) Using by HTML Tables 

Any developer can make a website using HTML Table. This is simple method but this is not proper way.

2) CSS Framework 

The latest method for developing website. Framework can easy your hard work. This is amazing for a web developer. The maximum needed css method declared and you will be call them to your website. You can use ready CSS framework like: Bootstrap, UIkitSkeleton

3) CSS Floating

This is a custom way for develop a website. The maximum small web developer this method. This is hard way but self designed system.

4) CSS Flex

CSS Flex is a new Structure for CSS3. It can use alternative for CSS float property. The CSS Flex is control content floating which content stay in his area box.


HTML Structure by HTML Table

<!DOCTYPE html>
<html>
<head>
  <title>HTML Structure by HTML Table</title>
</head>
<body>

<table width="100%" height="450" border="1" cellpadding="8">
  <tr height="100" bgcolor="#ddd">
    <td colspan="2" align="center">Header Section</td>
  </tr>
  <tr height="40" bgcolor="#333" style="color:#fff;">
    <td colspan="2" align="center">Menu Section</td>
  </tr>
  <tr>
    <td width="20%">Left Content</td>
    <td width="80%">
      <p>Main Content</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </td>
  </tr>
  <tr height="40" bgcolor="#666">
    <td colspan="2" align="center">Footer Section</td>
  </tr>
</table>

</body>
</html>

Header Section
Menu Section
Left Content

Main Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Footer Section

HTML Structure by CSS Framework using Bootstrap

<!DOCTYPE html>
<html>
<head>
  <title>HTML Structure by CSS Framework</title>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container" style="border:1px solid #000;background: #ddd;height: 100px;">
  <div class="row">
    <div class="col-md-12">
      <h3 align="center">Header Section</h3>
    </div>
  </div>
</div>
<div class="container" style="border:1px solid #000;">
  <div class="row">
    <div class="col-md-12">
      <p align="center">Nav Section</p>
    </div>
  </div>
</div>
<div class="container" style="border:1px solid #000;">
  <div class="row">
    <div class="col-md-3">
      <p align="center">Left Content</p>
    </div>
    <div class="col-md-9">
      <p align="center">Main Content</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</div>
<div class="container" style="border:1px solid #000;background: #333;color:#fff;">
  <div class="row">
    <div class="col-md-12">
      <p align="center">Footer Section</p>
    </div>
  </div>
</div>

</body>
</html>

 

Header Section

Nav Section

Left Content

Main Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Footer Section

HTML Structure by CSS Flex

The defaul direction for CSS flex is left. You can change it by using direction property.

<!DOCTYPE html>
<html>
<head>
<style> 
.main-container {
    background: #222;
    direction: rtl; <!-- defaul direction is left -->
    display: -webkit-flex;
    display: flex;
    width: 100%;
    height: 300px;
}

.container-box {
    background: #eee;
    margin: 10px;
    width: 120px;
    height: 120px;
}
</style>
</head>
<body>

<div class="main-container">
  <div class="container-box">Container Box 1</div>
  <div class="container-box">Container Box 2</div>
  <div class="container-box">Container Box 3</div>  
  <div class="container-box">Container Box 4</div>  
</div>

</body>
</html>


Container Box 1
Container Box 2
Container Box 3
Container Box 4
Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic