adding posts differently, help appreciated

This might be a weird question/request but I am trying to accomplish something with wordpress which I think is possible but don’t really have a clue how to do.

So here it goes:

I had a HTML site using some jquery script which I implemented in wordpress and everything went fine. What I now want to do is that whenever I add a post it uses that script. I’ve accomplished this and it works perfectly fine by changing to “HTML” instead of “Visual” when adding a post, then entering the following code:

<ul class="articles">
        <li onclick="location.href='article.html'">
            <div class="animate">
                <div class="icon"><img src="../img/Gehry3_thumb.png" width="320" height="320" alt="Gehry1" /></div>
                <div class="description">
                    <h1>Post title</h1>
                    <p>Post text</p>
                </div>
                <div class="tags">
                </div>
            </div>
        </li>
</ul>

This does exactly what I want it to do. But obviously I can’t expect my client to always leave the wp title field empty, enter this exact code under the HTML tab, change the picture source, post title, post text and link destination manually each time they want to add something new to their site.

What do you guys think is the best way to make this more dynamic and easy to use?

I know some pluggins have buttons you can add to your toolbars that automatically add code whenever you press it, is that a solution? How can you then solve it for the client to easily be able to change picture, text and link (want it to use <?php the_permalink(); ?> but don’t know how to solve that either!) inside of that code?

Thank you so much in advance!