How to extricate tag image from post?

I have responsive template which working well.

I want to convert it to theme wordpress.

Inside the template there is gallery contains image and description and title link.

• Since the gallery build in the template and everything(responsive) work well.
• I want to embedded/convert the gallery to theme as a post, add link to
• Gallery.js and generate the tag html as it seems in the template.

The source code of the template:

<!--orginal---------->
                <div class="main">
                    <div id="carousel" class="es-carousel-wrapper">
                        <div class="es-carousel">
                            <ul>
                                <li>
                                    <div class="box-1">
                                        <img src="images/page1-img1.jpg" alt="" /> <a href="#">bora-bora</a>
 <span>from $458</span> 
                                        <p>Praesent vestibulum aenean
                                            <br>nonummy hendrerit mauris.</p>
                                    </div>
                                </li>
                            </ul>   
                        </div>      
                    </div>
                </div>  

I need to generate only the :

<img src="images/page1-img1.jpg" alt="" /> <a href="#">bora-bora</a>
 <span>from $458</span> 
                                        <p>Praesent vestibulum aenean
                                            <br>nonummy hendrerit mauris.</p> 

I create new post.

• in the title I write: BORA-BORA
• in the content post I add image from the Media
• under the image I add the description image” Praesent vestibulum aenean
  nonummy hendrerit mauris.”.
• in the Excpert I write: from $458

and after this I add code which generate the html tag gallery as you can see below:

    <div class="main">
        <div id="carousel" class="es-carousel-wrapper">
            <div class="es-carousel"><ul>

                    <?php $hot_deals = new WP_Query('showposts=2&category_name=hot_deals'); ?>
<?php if($hot_deals->have_posts()) : ?>
<?php while($hot_deals->have_posts()) : $hot_deals->the_post(); ?>
        <li>
            <div class="box-1">
                    <?php the_content(); ?><a href="#"><?php the_title(); ?></a>
                    <span><?php the_excerpt(); ?></span>
            </div>          
        </li>

<?php endwhile; ?>
<?php endif; ?>         
            </ul></div> 
        </div>  
    </div>  

the resualt are close but it is not working becose I need :

1. to extract the <img /> from <p><a><img /></p></a>.

2. to take out the <p> from <span><p>FROM $458</p></span>.

Many thanks How can I do that ?

<div class="main">
    <div id="carousel" class="es-carousel-wrapper">
        <div class="es-carousel"><ul>
            <li>
                <div class="box-1">
                    <p><a href="http://127.0.0.1/www/www1/wordpress/wordpressEng/wp-content/uploads/2012/09/page1-img2.jpg">
                       <img class="alignnone size-full wp-image-82" title="page1-img2" src="http://127.0.0.1/www/www1/wordpress/wordpressEng/wp-content/uploads/2012/09/page1-img2.jpg" alt="" width="219" height="124" />
                       </a>
                    </p>
                    <p>Praesent vestibulum aenean<br />
                    nonummy hendrerit mauris.</p>
                    <a href="#">bora-bora</a>
                    <span><p>FROM $458</p></span>
                </div>          
            </li>
        </div>      
    </div>
</div>