The index.php file is the skeleton of the website. Every page that Joomla! delivers is "index.php" fleshed out with a selection of content inserted from the database.
The index.php file for a template contains a mixture of code that will be delivered as it is, and php code, which will be modified before it is delivered. The code will be familiar to anyone who has designed a simple html webpage: there are 2 main sections - the <head> and <body>. Where index.php differs is the use of php code to insert information selected from a database.
Here is an example:
A tradition HTML head section:
<head> <title>My Example Webpage</title> <meta name="title" content="example" /> <link rel="stylesheet" href="www.example.com/css/css.css" type="text/css" /> </head>
And the same thing done the Joomla! way:
<head> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>templates/mytemplate/css/css.css" type="text/css" /> </head>
So, instead of these header parts being defined on the index.php file, the header parts are looked up from the database by bits of php code. The clever part is that both these scripts will deliver the same code to a user. If you look at the code of a joomla website, all the <?php blah /> will have been replaced by regular html code.
Good template design
Index.php should be as bare-boned as you can make it because it will be re-sent every time a new page is loaded. Elements such as styling should be delivered in css files that are saved in the users cache. The tutorials here will go through the technical aspects of creating your index.php.
Index.htm has historically been the name given to the home page of a website. Thus when a user navigates to www.example.org, the webserver delivers www.example.org/index.htm. Because Joomla! is written in PHP, index.php is the automatically served file. To futher complicate things, when a user navigates to the joomla website, the index.php of the root directory redirects to the index.php of the current default template.