How to create WordPress theme

This article will show you how to create a simple WordPress theme.
the location of wordpress themes is in the "wp-content/themes/". for precess your new one you create a folder name it as a themes you like to build. there simple structure of themes wordpress are:
- Header
- Main Area
- Sidebar
- Footer Image:

To do this we will have to create the following files into the tutorial_theme directory:

header.php - This file will contain the code for the header section of the theme;
index.php - This is the main file for the theme. It will contain the code for the Main Area and will specify where the other files will be included;
sidebar.php - This file will contain the information about the sidebar;
footer.php - This file will handle your footer;

style.css - This file will handle the styling of your new theme;

The header.php file

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tutorial theme</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>HEADER</h1>
</div>

The index.php file

<?php get_header(); ?>
<div id="main">
<div id="content">
<h1>Main Area</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
<hr> <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter">
</div>
<?php get_footer(); ?>

The sidebar.php file

<div id="sidebar">
<h2 ><?php _e('Categories'); ?></h2>
<ul >
 <?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
<h2 ><?php _e('Archives'); ?></h2>
<ul >
 <?php wp_get_archives('type=monthly'); ?>
</ul>
</div>

The footer.php file

<div id="footer">
 <h1>FOOTER</h1>
</div>
</div>
</body>
</html>

The style.css file

body { text-align: center; }
#wrapper { display: block; border: 1px #a2a2a2 solid; width:90%;  margin:0px auto; }
#header { border: 2px #a2a2a2 solid; }
#content { width: 75%; border: 2px #a2a2a2 solid; float: left; }
#sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right; }
#delimiter { clear: both; }
#footer { border: 2px #a2a2a2 solid; }
.title { font-size: 11pt; font-family: verdana; font-weight: bold; }