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
<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: