Need help creating a unordered list image thumbnail that permalinks to article

I’m having trouble setting up a unordered list thumbnail img link to article that once the reader clicks on a thumbnail, will take the reader to the full permalink article.

For example

<div id="articles">
	<ul id="thumbnails">
<?php while (have_posts()) : the_post(); ?>

	<li><a href="<?php the_permalink() ?>" title="Permalink to <?php the_title(); ?>"><img src="<?php the_content(); ?>"  alt="<?php the_title(); ?>"</a></li>

<?php endwhile; ?>
	</ul>
</div>
<?php else : ?>

And under the write tab (inside WP dashboard), I want to add an article related image to the post, (so that the thumbnail will show on the index page) followed by related content after. With other CMS, I was able to achieve this using custom field tags. The thumbnail only displays itself on the index page, no excerpts or contents are shown on the index.

How can achieve this? Thanks in advance.