Linking Wordpress index.php to single.php

I'm working on a website that I initially coded from scratch, but am now integrating wordpress with it because my client wants a backend.

Here's my problem, I'm using index.php for the main blog posts (which so far is working ok). But what I want to do is have just an excerpt of the posts (a brief summary) and then I want users to be able to click the 'read more' link in order to be taken a full page of that particular article/post (which I assume would be the single.php (if I'm not mistaken).

So here we go, here is the code I have for the main blog page (ie index.php - I'm only including the php code that's relevant here not the whole page):

<div id="content">              
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="vertical-align: text-top; padding-right: 20px;"><h1>Blog</h1></td>
<td style="vertical-align: text-top; padding-left: 20px;">
<h1>Archives</h1>
<select name="archive-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
<option value=""><?php echo esc_attr( __( 'Select Month' ) ); ?></option>   
<?php wp_get_archives( 'type=monthly&format=option&show_post_count=1' ); ?>
</select>
</td>
<tr>
<td style="padding-right: 20px;">                   
<?php 
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query('posts_per_page=5' . '&paged=' . $paged);
while ($wp_query->have_posts()) : $wp_query->the_post();
?>
<div style="background-color: #fff; margin-top: 0px; padding: 20px 20px 20px 20px; border-color: #819cc7; border-style: solid; border-width: thin;">
<h2><a href="<?php $permalink = get_permalink( $id ); ?>"><?php the_title(); ?></a></h2>
<p><?php the_post_thumbnail(); ?></p>
<p><?php the_content( $more_link_text , '' , $more_file ); ?></p>
<p><?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?><p>
<p><?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>
<p>Date posted: <?php the_date(); ?></p>
<!--Don't know if I need the two lines below 
<p><?php //get_post_permalink(); ?></p>
-->
</div>
<p><?php endwhile; ?></p>
<?php $wp_query = null; $wp_query = $temp; ?>
</td>
<td style="padding-left: 20px;">&nbsp;</td>
</tr>
</table>
</div>

And this is the code I have for my single.php page:

<?php get_header(); ?>
    <section>
        <article id="white_bg">
            <div class="content_border">
                <div id="content">
                <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p><?php the_post_thumbnail(); ?></p>
                <p><?php the_content(); ?></p>
                <p><?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?></p>
                <p><?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?></p>
                <br />
                <?php comments_template(); ?>
                <?php endwhile; ?>
                <div>
                <?php previous_post_link('< %link') ?> <?php next_post_link(' %link >') ?>
                </div>
                <?php endif; ?>
            </div>
            </div>
        </article><!--end main article-->
    </section><!--end main content section-->
<?php get_footer(); ?>    

I want people to be able to see the summarized article/post and click the read more link to be taken to single.php where they can view the full article/post and comment if they like.