WebDesign Templates: 2013

In your HTML page, How to Update contents without page refresh?

i.e JQuery, A powerful scripting language for us.

Now I'm going to give the sample demo.

Here You need:

jquery-1.9.1.js

Download it from JQuery Website By just type in Google as "JQuery download"

HTML Code: UpdateContents.html

<!DOCTYPE html>
<html>
<head>
<title>Sample Page!</title>
</head>

<body>
<div id="page">
<h1>Sample Update Contents in a Div Demo</h1>
</div>

<div id="sample" style="height: 200px; color: white; background-color: black;overflow: auto; font-weight: bold;">
</div>

<div>
<h1>Some othre content</h1>
</div>

<script type="text/javascript" src="jquery-1.9.1.js"></script>

<script type="text/javascript">
$(document).ready(function(){
setInterval('addnewline()',1000);
});

var number = 1;
function addnewline(){
$($.parseHTML( "<div>Image Number: " + number + "...</div>" )).prependTo( "div#sample" );
number++;
}
</script>
</body>
</html>

To create a web page layout we need HTML, CSS. Here i will give you the common template code which is useful for every webpage. In this template we are not using any tables. Only div tags will be used to create a page template. Before writing the HTML code, Positioning is very important. By using CSS, we can give the div position style.

CSS Code:

File: styles.css

body{
margin: 0px;
padding: 0px;
display: block;
text-align: center;
}

.container{
width: 70em;
margin: auto;
}
.content{
text-align: left;
height: 500px;
}

.header{
height: 123px;
background-color: #f4f4f4;
}
.firstdiv{
height: 500px;
background-color: yellow;
width: 33%;
text-align: left;
}
.seconddiv{
height: 500px;
text-align: center;
background-color: orange;
width: 33%;
}
.thirddiv{
height: 500px;
background-color: pink;
width:33%;
text-align: right;
}
.left{
float:left;
}
.footer{
clear: both;
background-color: green;
height: 233px;
}

That's it This is CSS Code. Enough to create a sample layout. Let's make fun with HTML

File: index.html

<!DOCTYPE html>
<html>
<head>
<title>Sample Template</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<div class="header">
<h1 style="margin:0px;">Header content here</h1>
</div>
<div class="container">
<div class="content">
<div class="firstdiv left">
<h1>LeftDiv</h1>
<p>This is a sample page created by xxx.
</div>
<div class="seconddiv left">
<h1>middleDiv</h1>
<p>This is a sample page created by xxx.
</div>
<div class="thirddiv left">
<h1>RightDiv</h1>
<p>This is a sample page created by xxx.
</div>
</div>
</div>
<div class="footer">
<h1 style="margin:0px;">Footer Content Here</h1>
</div>
</body>
</html>

Output Page:

Want more layouts? keep watching my blog http://websitetemplatestutorial.blogspot.in/

WebDesign Templates

Pages

Friday 23 August 2013

How Facebook Update page when Upload Images, videos

Thursday 8 August 2013

HTML, CSS Template for WebDesigners

CSS Code: