WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

HTML Layouts


Multiple columns are using many site such as magazine and newspaper etc.


Leader

George Washington
Mahata Gandhi

George Washington

George Washington born in 22 February 1732.He was the first President of the USA from 1789 to 1797.

He was the of Father of USA.

Copyright © welookups.com

HTML Layout Using <div> Elements

HTML Layout Using

Elements are given:/p>

Example

<body>

<div id="header">
<h1>Leader</h1>
</div>

<div id="nav">
Washington<br>
Gandhi<br>
</div>

<div id="section">
<h1>George Washington</h1>
<p>George Washington born in 22 February 1732.He was the first President of the USA from 1789 to 1797. </p>

</div>

<div id="footer">
Copyright © welookups.com
</div>

</body>
Try it yourself »

The CSS:

<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;
}
#section {
    width:350px;
    float:left;
    padding:10px;
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}
</style>

Website Layout Using HTML5

we are uing HTML5 for many place in website

HTML5 Semantic Elements
  • <header> - it is aheader for a document or a section
  • <nav> - it is acontainer for navigation links
  • <section> - it is asection in a document
  • <article> - Defines an independent self-contained article
  • <aside> - Defines content aside from sidebar
  • <footer> - it is afooter for a document or a section
  • <details> - Defines additional details
  • <summary> - it is aheading for the <details> element

This folloing example we are using HTML5 Layout:-

Example

<body>

<header>
<<h1>George Washington</h1>
<p>George Washington born in 22 February 1732.He was the first President of the USA from 1789 to 1797. </p>
</section>

<footer>
Copyright © welookups.com
</footer>

</body>
Try it yourself »

The CSS:

<style>
header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;
}
section {
    width:350px;
    float:left;
    padding:10px;
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}
</style>

HTML Layout Using Tables

HTML Layout Using Tables are given:

Example

<body>

<table class="this">
<tr>
  <th>
    < img="../W1-icon.png" alt="this" style="height:32px;width:32px">
  </th>
  <td>
   
  </td>
</tr>
</table>

</body>
Try it yourself »

The CSS:

<style>
table.this {
    width:100%;
    border:1px solid #d4d4d4;
}
table.this th, td {
    padding:10px;
}
table.this th {
    width:40px;
}
</style>

Welookups is optimized for learning.Copy right 2018 kumar aditya singh .
All Right Reserved and you agree to have read and accepted our term and condition.
All Rights Reserved.

welookups.com