Standard Layout of Web Pages

Use DIV tag for layout. The style of text inside the boxes can be managed by using CSS. Keep your CSS file inside <head> tag. Try to generate these pages with CSS for better understanding of layout of web pages.

Layout of the page

A : Keep 100 % width , Place menu item here, login and contact us links at right ( align ) side and other menus can be kept at centre.
B : Full body is available for content , Can use any background image at top and write some text over it. Good for travel sites.
C : Keep your footer links and copyright information. Use deep colour background with light color font ( or vice versa ) . Text should be centre aligned.

Layout of the page

A : Keep 100 % width , Place menu item of here, login and contact us links at right ( align ) side and other menus can be kept at centre.
B : Place your menu list here. You can keep them as top aligned or the menu layer can scroll along with the centre text.
D : Place your advertisements here. These ads won't interfere with your body text so better user experience at your site. Below the ads you can keep more images or links matching to the width available.



<html>
<head>
<title>(Type a title for your page here)</title>
<META NAME="DESCRIPTION" CONTENT=" ">
<META NAME="KEYWORDS" CONTENT=" ">
<link rel='stylesheet' href='my_style.css' type='text/css'>
</head>
<body >
<div class='my_top'><br>My Top text here<br></div>
<div class='my_body'>
	<div class='my_left'>Left part here<br><br></div>
	<div class='my_center'>Body center here<br><br></div>
	<div class='my_right'>My right side <br><br></div>

</div>
<div class=my_footer>My footer text here </div>
</body>
</html>
.my_top{
width:100%;
font-size:18px;
font-family:Arial;
color: #238cf5;
text-align:center;
display: inline-block;
border : #00cc00 1px dashed;
}

.my_left{
width:9%;
font-size:14px;
font-family:Arial;
color: #238cf5;
text-align:center;
display: inline-block;
border : #cc0000 1px dashed;
}

.my_right{
width:19%;
font-size:14px;
font-family:Arial;
color: #238cf5;
text-align:center;
display: inline-block;
border : #cc00cc 1px dashed;
}

.my_center{
width:69%;
font-size:14px;
font-family:Arial;
color: #238cf5;
text-align:center;
display: inline-block;
border : #00cc00 1px dashed;
}
.my_body{
width:100%;
font-size:14px;
font-family:Arial;
color: #238cf5;
text-align:center;
display: inline-block;
border : #ff00cc 1px dashed;
}

.my_footer{
width:100%;
font-size:14px;
font-family:Arial;
color: #238cf5;
text-align:center;
display: inline-block;
border : #ff00ff 1px dashed;
}

HTML Button Linking Page Structure Generate HTML code


plus2net.com







Post your comments , suggestion , error , requirements etc here




We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2020 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer