Day 2 - Layouting the web page
1. Open your favorite text editor
2. Create new file and name it as LayoutDesign.html
3. Type this code into your html file that just you have been created
4. Save again your html file.
5. Open your browser and browse your HelloWorld html file
6. Congratulation just have created your first layout.
1. Open your favorite text editor
2. Create new file and name it as LayoutDesign.html
3. Type this code into your html file that just you have been created
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950<html>
<title>
My Web Design Toturial
</title>
<head>
<style>
body{
/*reset margin & padding */
margin-top:0;
margin-bottom:0;
margin-left:0;
margin-right:0;
padding-top:0;
padding-bottom:0;
padding-left:0;
padding-right:0;
}
#Main_Holder{
width:100%;
}
.Left_layout{
float:left;
width:50%;
}
.Right_layout{
float:right;
width:50%;
}
</style>
</head>
<body>
<div id="Main_Holder">
<div class="Left_layout">
Left Layout
</div>
<div class="Right_layout">
Right Layout
</div>
</div>
</body>
</html>
4. Save again your html file.
5. Open your browser and browse your HelloWorld html file
6. Congratulation just have created your first layout.
Post A Comment:
0 comments: