The first thing you need to know about your templates is your normal HTML page is split into two parts: the "wrapper" template which contains the top and bottom of every page of your site, and then the hundreds of specific templates for internal pages. The wrapper is the header and footer, with a <!-- BODY GOES HERE --> marker in the middle of it as a placeholder to call in the internal pages. Most of your customizations will to the wrapper.
Templates are basically HTML. Along with the HTML are placeholders called template variables that look like {THIS} and represent information about the particular thing being viewed. You'll also notice some HTML comment markers like <!-- BEGIN ROW --> and <!-- END ROW -->, which signal where a repeating section begins and ends. There are also template conditionals, like <IF {TEMPLATEVARIABLE}>show this<ELSE>show this</IF> which decide what content to show based on the values of template variables. In a few places you'll find [INSERTFILE=filename] which serves to call another template into that location (any template called in via [INSERTFILE=] in multiple templates will be found in the "Sub-Templates" section on the Manage Templates page, these are common partial pages).
You'll notice that the article display HTML isn't in your "Show Articles in Category" template. You'll find that in the article bit subtemplate or at Admin Panel -> Articles -> Article Types instead -- keeping it centeralized there allows you to write your chances once to apply to many different pages (category articles, search results, the new articles page, saved articles, etc).
Let's have a look at some sample template code:
<table>
<!-- BEGIN MEMBERS -->
<tr>
<td><a href="{MEMBERPROFILEURL}">{MEMBERNAME}</a></td>
<td>{MEMBERREGDATE}</td>
<td>{MEMBERSUBMISSIONS}</td>
<td><IF {MEMBERAVATAR}><img src="{MEMBERAVATARURL}"></IF></td>
</tr>
<!-- END MEMBERS -->
</table>
<!-- BEGIN MEMBERS -->
<tr>
<td><a href="{MEMBERPROFILEURL}">{MEMBERNAME}</a></td>
<td>{MEMBERREGDATE}</td>
<td>{MEMBERSUBMISSIONS}</td>
<td><IF {MEMBERAVATAR}><img src="{MEMBERAVATARURL}"></IF></td>
</tr>
<!-- END MEMBERS -->
</table>
Here we have a simple HTML table, with an unknown number of rows of members. The first column links the member profile, second has the regulstration date, third has submission count, fourth has avatar image displayed only under the condition that they have an avatar uploaded.
Common template variables are listed in the template variables subcategory in the knowledge base, or in the help browser tabs when editing the templates.