What is the purpose of the index.php file?
From Joomla! Documentation
The index.php file is the skeleton of the website. Every page that Joomla! delivers is index.php fleshed out with 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 that will be modified before it is delivered. The code will be familiar to anyone who has designed a simple HTML web page. 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.
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>
Instead of the header parts being defined in 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 code 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 user's 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 web server delivers www.example.org/index.htm. Because Joomla! is written in PHP, index.php is the automatically-served file. To further 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 template.