which further is used in Java code to place the elements:
And now is my questions how these two things mix? At the beginning I thought that the main html page will not contain anything in the body and everything will be done by the script that is loaded before everything else. But now it seems that the script is loaded and further the html structure is rendered on it's own as well. Can someone explain me this in more details please?
Think of the ids you define in your html as place holder, or co-ordinates if you will. If you look at the source of your rendered GWT application, you will notice these ids in it. When the script executes, it gets these IDs, and places your widget there, eg. nameField or sendButton.
It is true many applications are pure GWT only. I personally prefer it that way because I am HTML/CSS challenged and I come from a Swing background. So I find writing "pure" GWT apps much easier.
However, there are certain advantages to mixing HTML and GWT (using the RootPanel.get("id")) .
1) Your page has lots of static content but only a few dynamic content. E.g. a site which offers currency conversion. Static content would contain stuff like who we are, what we do, how much we charge, how to contact us etc. Dynamic content would be just a small widget, which displays the very current currency conversion rates. These rates would keep on changing the whole day. So it makes sense to have a widget display them.
2) Same as above, but with changing static content. Consider coderanch. This very site. Whenever you load it, it shows the forums sorted by latest posts. The content changes dynamically, but not that frequently, meaning it is not a "live update". In such cases, it makes sense to have a servlet serve this content. Now consider a widget which tells you if anybody replied to your post, or if anybody updated a thread you are watching. Again a widget would be useful in displaying this information.
GWT offers you the flexibility to mix and match. It is up to you as a developer to choose how to approach it.