HTML Layout

We can give website Layout using HTML.  We can use <div> and other Tag. we can divide the page into different part, According to our choice.

 

 

 

 

 

 

 

 

 

⇒HTML Editor

⇒ HTML Element

HTML Attribute

⇒HTML Paragraph

⇒HTML Formating

⇒HTML Marquees

⇒HTML Font

⇒HTML Background

⇒HTML Images

⇒HTML Links

⇒HTML Comments

⇒HTML Tables

⇒HTML Color

⇒HTML Form

⇒HTML Form Elements

⇒HTML Input Types

⇒HTML Input Attributes

⇒HTML JavaScript

⇒HTML Responsive

⇒HTML iframe

⇒HTML Layout

⇒HTML Positioning

⇒HTML Floating Elements

⇒HTML Links

⇒HTML5 Advance Feature

⇒HTML Css

HTML Video

⇒HTML Color Picker

⇒HTML Date

⇒HTML Ajax
⇒HTML Example

 

Example of HTML Layout :->

html_Layout1

 

Website Layout:-

In a website, layout is the activity of positioning the various elements that make a web page in a well-structured manner and give appealing look to the website.

You can find, most of the websites on the internet have put their content in multiple rows and columns — formatted like a magazine or newspaper, to give general web users a better reading and writing environment. This can be easily achieved by using <table>, <div> or adding (css ) to them.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Websites are using java script and css based framework for responsive and Dynamic Websites.
The simplest and most popular way of creating layouts is using HTML <div> tag.

HTML_Layout

 

 

<html>
<head>
<title>HTML Layout Example.</title>
<style>
#main{
}

#header{
width:1000px;
height:150px;
text-align:center;
border:1px solid black;
background:#00000;
}

#leftsidebar
{
width:150px;
height:800px;
float:left;
text-align:center;
border:1px solid black;
background:#ppppp;
}

#content
{
width:838px;
height:800px;
float:left;
text-align:center;
border-right:1px solid black;
}
#footer
{
clear:both;
width:1000px;
height:140px;
text-align:center;
background:#ffdeee;
border:1px solid black;
}

</style>
</head>
<body>
<div id="main">

<div id="header">
<h2>Header</h2>
</div>

<div id="leftsidebar">
<h2>sidebar</h2>
</div>

<div id="content">
<h2>Content</h2>
</div>

<div id="footer">
<h2>copyright@2015</h2>
</div>
</div>
</body>
</html>

 




Follow Us

Contact Us

tutorialworldin@yahoo.com

Back to Top