Regarding templates-
I did first 2 steps.
I have also viewed the index file. I can change the content.
But How to add this downloaded template into my personal html css document?
You can’t do that easily. It is basically a whole project on its own. So you will have to copy your html to the index.html file. Or the other way round, but since their html/css/js is more complicated it is easier to copy yours to theirs.
Copy the content of index.html to the html section
Same for CSS and JS
In Setting, include CSS: Bootstrap, JS: jQuery and Bootstrap
In html section remove link to bootstrap.min.css and to the standard css file (css/----.css)
At the bottom of the html section remove script link to jquery and the link to bootstrap.
Also remove link to the standard js file (js/—.js)
Then have a look at the other javascript files that are linked. If they are local (no http://) find an online version online.
If you have a list of those links, remove all the script links in the index section and add the list of links in the Settings
Hope that works for you. I just download one template, so it is possible that yours look slightly (or completely) different. Send the link to the template, if you can’t figure it out.