HTML-Booklet

A page format is essential to give a better look to your site. It requires some investment to structure a site’s design with extraordinary look and feel. 

Presently-a-days, every single current site is utilizing CSS and JavaScript based structure to concoct responsive and dynamic sites however you can make a decent design utilizing straightforward HTML tables or division labels in mix with other arranging labels. This section will give you hardly any models on the most proficient method to make a basic however working format for your site page utilizing unadulterated HTML and its properties. 

HTML Layout-Using Tables 

The least difficult and most well known method of making formats is utilizing HTML <table> tag. These tables are organized in sections and lines, so you can use these lines and segments in the manner you like. 

Model 

<!DOCTYPE html>
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width=”100%” border=”1″> 
<tr>
<td colspan=”2″ bgcolor=”green”>
<h1>This is Page Main title</h1> 
</td>
</tr>
<tr valign=”top”>
<td bgcolor=”red” width=”50″>
<b>Main Menu</b><br/>
HTML<br/>
PHP<br/>      
CSS.. 
</td>
<td bgcolor=”blue” width=”100″ height=”200″>
Booklet Tutorials 
</td>
</tr> 
<tr>
<td colspan=”2″ bgcolor=”pink”>
 <center>
Copyright ©2020 Booklet today 
</center> 
</td>
</tr>
</table>   
</body>
</html>

Output:

This is Page Main title

Main Menu

HTML

PHP

CSS..

Booklet Tutorials
 

Copyright ©2020 Booklet today

 

 

For instance, the accompanying HTML design model is accomplished utilizing a table with 3 lines and 2 sections however the header and footer segment traverses the two segments utilizing the col span trait. 

Different Columns Layout-Using Tables 

You can structure your site page to put your web content in various pages. You can keep your substance in the center section and you can utilize the left segment to utilize the menu and the right segment can be utilized to put promotion or some other stuff. This format will be fundamentally the same as what we have at our site. 

Model 

Here is a guide to make three section designs. 

<!DOCTYPE html>
<html>
<head>
<title>Column HTML Layout</title>
</head>
<body>
<table width=”100%” border=”1″>
<tr valign=”top”>
<td bgcolor=”blue” width=”20%”>
<b>Main Menu</b><br />
HTML<br/>
PHP<br/>      
CSS.. 
</td>
<td bgcolor=”red” height=”200″ width =”60%”>
Booklet Tutorials 
</td>
<td bgcolor=”pink” width=”20%”>
<b>Right Menu</b><br/>
HTML<br/>
PHP<br/>     
CSS… 
</td>
</tr>
<table>   
</body>
</html>

HTML Layouts-Using DIV, SPAN 

The <div> component is a square level component utilized for gathering HTML components. While the <div> tag is a square level component, the HTML <span> component is utilized for gathering components at an inline level. 

In spite of the fact that we can accomplish quite pleasant formats with HTML tables, however tables weren’t generally planned as a design apparatus. Tables are increasingly fit to introduce even more information. 

Note: This model utilizes Cascading Style Sheet (CSS), so before understanding this model you have to have a superior comprehension on how CSS functions. 

Model 

<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts</title>
</head>
<body>
<div style=”width:100%”>
<div style=”background-color: blue; width:100%”>
<h1>This is Web Page title</h1>
</div>
<div style=”background-color:red; height:200px; width:100px; float:left;”>
<div><b>Main Menu</b></div>            
HTML<br/>      
PHP<br/>
CSS…
</div>
<div style=”background-color:pink; height:200px; width:350px; float:left;”>
<p>Booklet Tutorials</p>
</div>
<div style=”background-color:orange; height:200px; width:100px; float:right;”>
<div><b>Right Menu</b></div>            
HTML<br/>            
PHP<br/>            
CSS…         
</div>         
<div style=”background-color:gray; clear:”both”>            
<center>               
Copyright ©2020 Booklet today             
</center>         
</div>
 </div>   
</body>
</html>

Output:

This is Web Page title

Main Menu

HTML

PHP

CSS…

Booklet Tutorials

Right Menu

HTML

PHP

CSS…

               
Copyright ©2020 Booklet today

 

 

Here we will attempt to accomplish the same outcome utilizing <div> followed alongside CSS, whatever you have accomplished utilizing <table> tag in the past model.

 

 

Share