Tutorials
You can easily substitute the documents in this tutorial with your own. You should also have gain enough experience to create variations of this template and operate very freely with the mix of HTML-templates and TypoScript.
One thing to keep in mind when you're designing your HTML-documents for later implementation with Typo3 is that all your external mediafiles - images, sound, stylesheets and so on - should be put into a folder "underneath" the folder in which you html-file is. And this folder should be named "fileadmin" in order for Typo3 to be able to reach it.
Example:
If you're creating a new site in the folder "new_site" on your local harddrive, put index.html into this folder, but create another folder, "fileadmin" and inside of this yet another folder "images" (or something else) into which you put all your images.
That makes the filestructure look like this, eg:
new_site/index.html
new_site/fileadmin/newsite_resources/test.jpg
new_site/fileadmin/newsite_resources/test2.jpg
When you move on to Typo3 implementation, you make a copy of "new_site/index.html" to "new_site/fileadmin/newsite_resources/index.html" and copy the whole folder "newsite_resources/" to the existing "/fileadmin/" folder on the Typo3 webserver.
When you use the file "index.html" as an HTML-template (like shown in this tutorial) all references to external files will thus be intact. This is the case because the file "index.html" in included by the index.php-script, which is positioned in the root of the site. Therefore the references to the folder "/fileadmin/newsite_resources/" are correct.