A website is a set of files and folders that you upload to a file server owned by a web hosting service. The web host makes these files accessible by uploading them to the visitors of your site.

When a visitor types your domain name into the browser address bar, the Domain Name System translates their request into the IP address of the server that hosts your website. The request then goes to the server, and the server sends the appropriate html file to the visitor’s computer. The file uploaded to the visitor’s web browser is a file, on a drive, with a pathname. This file is then rendered by the visitor’s web browser as a web page.

For example, the pathname of the file you are reading right now is

index/Pages/BoxPressLearningCenter/BoxPressReference/Tinderboxmechanics1Expor/Websitebasics.html

The pathname of an html file is called its URL.

What happens when a visitor requests a URL that is just a directory, or a simple domain name (such as mapself.com)? In both cases, the requested URL is a directory (a domain name is just the root directory for a web site). When the requested URL is a directory, there is still a file that the web server serves. This file is called the default page for that directory. On most web servers, the default page name for a directory is index.html.

When you enter http://mapself.com into your address bar, the page you see is actually http://mapself.com/index.html. The default page for your domain name is called the landing page (or front page, or home page) of your website.

The home page will contain links to the other pages of your blog. These are also html files, hopefully arranged in a directory structure that reflects their natural semantic categorization.

You can see from the image above that the BlogTopNote note is empty (its icon is short). How can an empty note get exported as your landing page, index.html? It’s possible because the content of any exported note is determined by the export template you have assigned to it. Whenever you export a note, you must use an export template.

Select BlogTopNote (whose display name is probably something else by now if you’ve used the Style Dash) and click the HTML tab of the Text Pane Selector to view the HTML destined for export.

Even though the note is empty, you can see that it’s export is not. This is because it is the content of the export template that is the primary content of the export. The content of the note you are exporting (the target note) finds its way into the final output only where the Tinderbox export code tells it to.

A Tinderbox export template is any note that you designate as a template by setting its $IsTemplate attribute to true.

We can better understand how Tinderbox exports a target note with an example. Let’s say our target note is the following:

Now let’s say you want to export TargetNote with a template that contains only the text "Hello Dolly!"

The final output would then be

In fact, every target note that you export with TemplateOne will be rendered this way no matter what the target note may actually contain.

Of course, a template is useful precisely because it incorporates the content from other notes. For example, to export the rich text of a note, your template would include the export code ^text^. So if I exported our target note above with a template note that contained this:

The resulting exported file will contain this:

In this example the template simply delivered the rich text of the content note and surrounded it with a bit of boilerplate. But a template can also determine how you style that content. It can also change that content according to conditions. And it can also include content from the other 250 attributes that a note has besides its $Text.

Imagine that a template note contained this:

And let’s say that our TBX also contained the following two notes:

and

Now, let’s use TemplateThree to export TargetNote. The result would be this:

Thus, by using the ^include()^ export code, you can include content from others notes in your export.

But you can also place an ^include()^ directly inside a content note. I often do this with text (such as lists) that I frequently refer to.

In making a blog, all our files will be in HTML—a mix of the textual content people actually read with the HTML elements (code) that arrange the visual bed of that content. So we should expect our basic blog template to bear some resemblance to this:

<!DOCTYPE html>
<html>
  <head>
    <title>^title^</title>
  </head>
  <body>
    <p>^text^</p>
  </body>
</html>

An HTML web page contains four parts:

• Doctype
• html root element
• <head> section
• <body> section

The bsbTop boilerplate contains the Doctype, <html> root element, <head> section, and just the topmost parts of the <body> section—the navbar and the large Banner with your blog title and description.

The next section of the bstMainPage template lays out the main .container div of your blog page—everything under the Banner and above the footer. This is the Bootstrap responsive element—it varies its width discretely according to the width of the browser window. (To make this variation fluid, change class=container to class=container-fluid).

Immediately inside this is another div, the .row. A Bootstrap .row div is what allows you to use the Bootstrap predefined grid (column) system. Grid columns are created by specifying the number of twelve available columns you wish to span.

There are four classes prefixes: col-xs-, .col-sm-, .col-md-, .col-lg. Columns in xs are always preserved, while those in the others fall back on the setting for the smaller size. If nothing is set for the smaller size, the divs become collapsed-and-stacked.

The columns are laid out in this line of HTML:

<main class="col-sm-8 col-main">

This means that the main area of your blog body (all the stuff on the left) is 8 (out of 12) columns wide.

After the main line, the bstMainPage template begins checking the nature of each note up for export.

Some Bootstrap grid system rules:

• Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
• Use rows to create horizontal groups of columns
• Content should be placed within columns, and only columns may be immediate children of rows
• Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
• Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows
• Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4

To use the grid system, make a

<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

bstMainPage is the default template file for BoxPress. The template that a note uses during export is determined by the value of its $HTMLTemplateFile attribute. BoxPress has been set up to export every page in your website with the bstMainPage template. Unless you set the value of $HTMLTemplateFile to something else, the default value of the $HTMLTemplateFile system attribute will be the one found in the local file Preferences. This has already been set for you.

An individual note’s $HTMLTemplateFile can be changed in various ways:

• In the Get Info window: ⌥⌘I
• In the HTML Inspector
• Using an agent
• Using a rule

What does the bstMainPage template do?

• It inserts some boilerplate.
• It checks to see if the post has an HTML imagemap and, if so, inserts the appropriate boilerplate.
• It lays out a responsive .container div and a .row that can be treated as a 12-column grid (features inherited from the Bootstrap framework).
• It lays out the HTML5 main element, and gives the left 8 columns to your main content.
• It makes queries about the target note. Is it our BlogTopNote? Is it the BlogAboutNote? It is the Categories agent? It is the Archives agent? Is it one of your category container notes? Is it the PAGES container note? If so, then do something special. If not, then assume that it’s a post and include the note using the bstPost template.
• It closes the 8-column main element.
• It inserts more boilerplate—bsbSidebar.
• It closes the .container div and the .row main elements.
• It inserts the final bit of boilerplate—bsbBottom.

When you export your entire TBX using File > Export > as HTML, bstMainPage is applied to every content note of your TBX. It’s a universal application of a set of templates to all your notes. Templates can be assigned by prototypal inheritance, and this turns out to be a functional logical division.

All this is the same for every note that gets exported. Notes are exported according to $OutlineOrder, and container notes are processed recursively. But some notes will be passed over, and this is good—it saves time. Notes whose $HTMLDontExport is true will be passed over.

BoxPress has an agent that sets $HTMLDontExport for you automatically—the @export POSTS/PAGES agent. The notes up for consideration? Here’s the $AgentQuery:

descendedFrom("BlogPOSTS") & ($OutlineDepth(original)=4)

This says that every note descended from BlogPAGES and BlogPOSTS whose prototype is normal_note will be collected for consideration.

Then, the $AgentAction that will be applied to this collection:

if($blogReady & $blogExpOpt!="include"){$HTMLDontExport=;$Color=;}else{$HTMLDontExport=1;$Color="dark _norm";};

The default value of $blogReady is false—which means that all sub-posts will export unless $blogExpOpt has been set to either SKIP or FOOTNOTE. This default value also means that every post requires your explicit consent—a prophylactic against accidental private note taking.