Creating Web Page Template By HTML div tag

You need to know CSS and HTML for this topic.

Now it is different piece from JavaScript but it is fundamental side of web page design. Creating a template makes your life easy while you are designing a web page since, you can easily shape your pages by adding some necessaries to template.

Today's most common way to create a template is using div tag. Basically you define a container "division" that is the main division that includes the other container inside it. Then we add others respected to our design to its inside. Do not forget to give id or class name to each division to be specified for CSS. (Like as in the figure.)


Example HTML for such template;




But it is not enough to have this HTML code, also we need to use some CSS to define our divisions' width and height.


CSS code
.container{
width: 960px;
background-color:#FFF;
height: 500px;
margin-left:auto;
margin-right:auto;
}

.left{
float: left;
width: 430px;
height: 490px;
background-color: #DFDFDF;
padding: 10px;
overflow:auto;
}

.right{
float: left;
width: 430px;
height: 490px;
background-color: #BFBFBF;
padding: 10px;
overflow:auto;
}


To see the resulted page click!

Let's start with JavaScript.(click to see all)

JavaScript is a script language to add more professional functionality and appearance to your webpage. Some of people think that JavaScript is related to a application programing language Java but they are not. JavaScript is developed by Netscape and supported by all major browsers today.

And start as all programming exercises with writing a "hello world" script.

Up to line 6 there are usual XHTML beginning tags as you realize.

Real excitement is starting with the line 6 it includes "script" tag that
indicates the beginning of the script then we have " " comment tag for HTML. We have no "//" before "<!--" since it is also single line comment delimiter. Finally close your script.

We add our script to head section of our HTML to be executed before body part of HTML but it is also possible to use your script in body part of your html and we'll see how to use in such way but be patient :).


to copy pase!!



First tutorial of JavaScript</title><br /><script type="text/javascript"><br /><!-- <br />document.writeln(" <h1> Hello World, This is Eren Golge! </h1>");<br />//--><br /></script><br />


download the example page