umbraco (unlike many other CMSs) doesn't handle the generation of any HTML code. All your website's pages are constructed by combining the various pieces of your website: Content, Templates, and XSLT Macros - all of which you have complete control over without touching the source code.
To understand how this works you need to know what role each of these items plays and how you create/edit them.
Content is stored in separate "nodes" in the Content tree. Each node is of a specific Document Type (more about Document Types), which have specific properties that hold the various "bits" of data. A very basic Document Type that comes included with the websiteWizard package is the Textpage which includes a Rich Text field named "bodyText". When you add nodes to your website, for instance a Textpage called "About Us" and one called "Contact Us", you will be able to type into the bodyText field for each node the content you would want on the page. The "Rich Text" field type includes a WYSIWYG html editor, and you can edit the HTML generated directly in a "code view" popup window.
Templates (and CSS Stylesheets) control the layout and look of your site and its various pages. You can create as many separate templates as you need and nest them. Templates are just like any website - written with HTML/XHTML, Javascript, etc. Special codes are inserted into templates to tell umbraco where to put data bits from the Content node to render it in the browser window. Each content node has a template assigned to it separately, which gives you maximum flexibility in your site construction. More about Templates, below.
XSLT Macros can be inserted into Templates and Content nodes (Rich Text fields) and call an XSLT file which is written to pull certain nodes, sort them and display them in a specified way. Writing XSLTs is outside the scope of this article, but plenty of information is available in the umbraco Books section.
So with all these pieces, how does umbraco construct a page to deliver to the browser?
The process is kind of like this:
- Visitor requests a page (aka types in http://www.yoursite.com/about-us.aspx)
- umbraco locates the node requested ("About Us") and looks at its assigned template. It merges the data in the Content node into the template at the specified spots and then, if that template has a "Parent" template assigned to it, inserts the whole thing into the specified spot in the parent template (this continues all the way up the line until there are no more parent templates specified).
- umbraco sends the compiled page to the browser.
- The visitor is happy :-)
Still not sure about Templates?
If you are new to the concept of "templates" you might be familar with using a word processing program to create Mail Merges, which use a similar concept. If you create a letter or mailing label with mail merge, you are able to combine it with a list of data to create personalized versions for each person in the list. You write your letter, for instance, and instead of putting in "Dear Bob", you put in something like "Dear <<FirstName>>", and then when you click to "Merge", you will have as many personalized letters as you have people in the list (Dear Bob, Dear Margery, etc.) .
Templates work the same way in umbraco, but the difference is that instead of a list of name & addresses, you have a collection of Content Nodes with all manner of custom data. To change the look of a page, you just change the template.