HTML is the foundations upon which a website is created. The HTML is like the wheels and engine on a car while the CSS is the fairings and paint work. HTML makes up the websites structure which is then beautified by the CSS code. The DOM, meanwhile, is made up of the HTML tags and is a framework for the page which allows the page to be displayed on your screen. It is, to continue the car analogy, like the chassis of the car, holding the main parts together in each section. The HTML is a series of code which forms the structural form of the page and includes the written text, the divisions which make up the page's structure and in some cases links to images and other external sources of content. The CSS is the code which alters the visual aspects of the page such as the font colour, size and style and the size and shape of the divisions which make up the page. CSS is not essential but makes a page asthetically pleasing. The DOM is a series of elements that are used within HTML to classify the purpose of an element of a page. A tag such as the paragraph tag is a DOM element. DOM elements can be given classes to help CSS and Javascript to interact and alter their function and appearance.
Boxifying is the idea of spliting a website into a series of boxes which each encompass one of the many layers of the website itself. To boxify a webpage like this one, you would put boxes arounf the photo and the text, and then within the "text" box you would further add separate boxes for the title and the main content. This helps a web designer to recognise the elements that need to be coded into a webpage and rearrange them in a functioning manner as befits the original design.
The box model is just a term used to describe the afore mentioned method of dividing a website into a series of boxes to aid in design and layout. A box is put around each HTML element and this box is made up of the element and the CSS code that affects its size, shape, location and content design.