Sunday, November 23, 2014

Create a well-structured webpage using several DIV tags

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.

<!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.... :)

No comments:

Post a Comment