Example: Themable output
As a quick example:
I needed to customize the HTML for the default search block, which is created by the search module.
To do this using the tpl.php file method:
1. Copy "search-block-form.tpl.php" from Drupal's search module into my theme folder.
2. Modify it.
The original tpl.php had this code:
<div class="container-inline">
<?php print $search_form; ?>
</div>Following instructions in this file, I removed the simple form print statement there, and changed it to this new HTML output:
<div class="container-inline">
<?php $search['search_block_form'] = '
<div class="form-item" id="edit-search-block-form-1-wrapper">
<input type="text" maxlength="128" name="search_block_form" id="edit-search-block-form-1" size="15" value="" title="Enter the terms you wish to search for." class="form-text" />
<br />
<label for="edit-search-block-form-1">Search posts and comments</label>
</div>';
print $search['search_block_form'];
print $search['submit'];
print $search['hidden'];
?>
</div>The HTML was simply grabbed from the original output by using view source (or Firebug), and then I re-arranged elements to suite my needs. Of course you could add in other tags or whatever content you need. Add a little CSS to the mix & just about anything is possible. You would want to make sure you don't change the names and Id's of the form elements, otherwise the form won't be processed correctly.
Hope that helps!