How to create a web layout in html?

friends i want to know how to create a web layout in html?Can anyone suggest me the way how creates a web layout?

 

if you do some search on the DP forum, you will find a bunch of similar topics... :

https://forums.digitalpoint.com/threads/basic-html-css-tutorials.2702777/

Follow the tutorial there and you will be ok.. Goodluck

 

hi,

before creating HTML full layout , learn basic HTML,CSS using online tutorial websites like w3school,html.net etc,

then try out basic layout like , 4 square boxes for each row, and columns like that

using basic css,HTML you can create a good designed website

if you any doubts on that, just reply to this thread, we will assist you here

 

What kind of software are you using? HTML is not enough to create a site - at least not a very good one. CSS is a must. If you like to learn on your own it wouldn't be hard to find tutorials. When I started out I found the best thing was to find a template and deconstruct it to better understand how everything worked. Find something simplistic and grasp the concepts and that'll create a place to start from. Hope this helps.

 

A better idea would be to select one of the many free templates available online and simply modify according to your taste.

 

I always create full-width layout and it is best also create page-width layout too in very rare case. here is a eg: layouts that you can follow

1. Full-Width Layout
In full-width layout the page wrapper or container will be added to every individual section. In a layout we will be having three section, header, content and footer. Here is an eg: example for full-width layout.

<header>
<section class="page-wrapper">
<div class="row">
<div class="col1">
Column One
</div>
<div class="col2">
Column Two
</div>
</div>
</section>
</header>

<section class="content">
<section class="page-wrapper">
<div class="row">
<div class="col1">
Column One
</div>
<div class="col2">
Column Two
</div>
</div>
</section>
</section>

<footer>
<section class="page-wrapper">
<div class="row">
<div class="col1">
Column One
</div>
<div class="col2">
Column Two
</div>
</div>
</section>
</footer>

Whereas the Page-width layout will be little different, where page-wrapper wraps all the three section in one.

<div class="page-wrapper">
<header>
<div class="row">
<div class="col1">
Column One
</div>
<div class="col1">
Column Two
</div>
</div>
</header>
<section class="content">
<div class="row">
<div class="col1">
Column One
</div>
<div class="col1">
Column Two
</div>
</div>
</section>
<footer>
<div class="row">
<div class="col1">
Column One
</div>
<div class="col1">
Column Two
</div>
</div>
</footer>
</div>

If you required more info on this please do let me know.

Thanks & regards

 

howis it used with html/css?

 

here is the css for to work with the above layout, however make sure to replace the <div class="col1"> to <div class="one column">.

/*To support all browers*/
*, *:after, *:before {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
          margin: 0; padding: 0;
}

.page-wrapper:before,
.page-wrapper:after, .row:before, .row:after {
  display: table;
  content: " ";
}

.page-wrapper:after, .row:after {
  clear: both;
}
.page-wrapper, .row {*zoom:1;}

/*Grid system*/
.page-wrapper {
  width: 100%;
  max-width: 1000px;
  min-width: 755px;
  margin-right: auto;
  margin-left: auto;
}
/*Grid system*/
.column, .columns {
    float: left;
    padding-left: 0.625em;
    padding-right: 0.625em;
    position: relative;
}

/*Grid system*/
.row {margin: 0 0 20px 0; /* margin bottom */}

/* 12 column Grids Calc = 100/12 * 1 */
.twelve   {width: 100%;}
.eleven   {width: 91.66666666666666%;}
.ten      {width: 83.33333333333334%;}
.nine     {width: 75%;}
.eight    {width: 66.66666666666666%;}
.seven    {width: 58.333333333333336%;}
.six      {width: 50%;}
.five     {width: 41.66666666666667%;}
.four     {width: 33.33333333333333%;}
.three    {width: 25%;}
.two      {width: 16.666666666666666%;}
.one      {width:  8.333333333333333%;}

HTML: