In the previous posts I have shared the way to create an HTML page and may you also know the basic structure of a simple website. Now in this post I will use some div tags to design a website. Later we will use CSS to customize the divs. The codes are given below is to create a simple webpage only. So use the codes and create a simple webpage first using a text editor like notepade, notepad++ or anyone you prefer.
Step 01 Create a simple webpage first
First of all you have to create a simple webpage using the codes given below. After creating when you will open the webpage in a web browser then you will get a page as like as the image given below.
Inside the <body> and </body> tags I have written three simple lines inside three different tags. In the next step we will remove all of the codes/text lying inside the <body> and </body> tags. Because our goal is to create a well structured webpage using <div> tags.
First of all you have to create a simple webpage using the codes given below. After creating when you will open the webpage in a web browser then you will get a page as like as the image given below.
Inside the <body> and </body> tags I have written three simple lines inside three different tags. In the next step we will remove all of the codes/text lying inside the <body> and </body> tags. Because our goal is to create a well structured webpage using <div> tags.
<!DOCTYPE html> <html> <head> <!--codes to show the title--> <title>iDhali</title> </head> <body> <!--header tags--> <h1>Hello World!</h1> <h2>This is my first webpage</h2> <!--parragragh tag--> <p>I want to learn website designing completely.</p> </body> </html>
Step 02 Let's add some <div>s inside the <body> and </body> tags
Now we will add some divs inside the <body> and </body> tags. The divs you need to add are given below.
<div class="wrapper"> <div class="container"> <div class="topNav"> </div> <div class="header"> </div> <div class="menu"> </div> <div class="body"> <div class="contentArea"> </div> <div class="sideBar"> </div> </div> <div class="lastAttention"> </div> <div class="footer"> </div> </div> </div>
Step 03 Create a CSS file to style the webpage
Now we have to create a new file named style.css/main.css and keep the file into the same directory. Besides we have to link the CSS file to the html file. To do so add the line <link rel="stylesheet" type="text/css" href="main.css"> inside the <head> and </head> tags and save the file index.html
Step 04 Add some CSS codes
Wait few hours for the next steps. Still editing.... :)
Now we have to create a new file named style.css/main.css and keep the file into the same directory. Besides we have to link the CSS file to the html file. To do so add the line <link rel="stylesheet" type="text/css" href="main.css"> inside the <head> and </head> tags and save the file index.html
Step 04 Add some CSS codes
Wait few hours for the next steps. Still editing.... :)
