The following illustrations show several valid solutions to the problem of laying out the target page.
A useful intermediate step between the sketch and the code is the construction of a sort of genealogical chart that shows all the boxes and elements for your page in hierarchical order. Again, this is something you can draw on a piece of scratch paper or a marker board.
All such charts begin with a box that encloses all the other boxes and elements. This box is the root of the tree and represents the browser window.
You may encounter the term Document Object Model (DOM) in connection with such a family tree. The DOM uses standard terms to name each element in an HTML or XML page, organizes the elements in the same kind of hierarchical chart, and provides an interface for changing such a page. The charts that you just created use the same organizational principles as the DOM.
In EGL Rich UI, each element on the page is called a widget. You will learn about widgets in the next lesson.