archodoc'Title-content-tree

Definition.Recursive::
START-CONDITION:
A-title-content-tree is a-whole-part-tree of
1) INFO-TITLE: the-parent-node and
2) INFO-CONTENT: an order-set of info-doc-units and part title-content-trees (subtrees), the-children-nodes.
END-CONDITION:
Leaf-title-content-trees consist of 1) a-title and 2) an order-set of info-doc-units.

Name::
* cpt.hitp'archo-tree,
* cpt.hitp'info-title-content-tree,
* cpt.tct,
* cpt.title-content-tree,
===

Part::
• title,
• content,
• node,
• level,
• depth,

Specific::
• bottom-tree,
• leaf-tree,
• root-tree,
• subtree,

archodoc'Title

Description::
An-archo-title is text (a-name or a-phrase) that describes an-archo-content.
Sometimes, a-title is generic-information and a-content specific.

Name::
* cpt.hitp'archetype--info-title,
* cpt.hitp'archetype-title,
* cpt.hitp'archo-title,
* cpt.title-content-tree'title,
===

archodoc'Content

Description::
Archo-content[1] is the-children of an-archo-title.
It[1] is an order-set of info-doc-units and info-title-content-trees.

Name::
* cpt.hitp'archetype--info-content,
* cpt.hitp'archo-content,
* cpt.title-content-tree'content,
===

archodoc'Doc-unit

Description::
Archo-doc-unit is
- a-paragraph-with-sentences: an order-set of sentences, or
- a-paragraph-with-subparagraphs: an order-set of group of sentences separated with empty lines, or
- a paragraph-with-nonsentences: a-paragraph plus images, audios, videos, lists, tables, trees.

Name::
* cpt.hitp'archetype--info-doc-unit,
* cpt.hitp'archo-doc-unit,
* cpt.title-content-tree'doc-unit,
===

archodoc'Table-of-contents

Description::
Archetype-table-of-contents is a-whole-part-tree with nodes the-titles of the-archo-doc.

Name::
* cpt.hitp'archetype-table-of-contents,
* cpt.hitp'archetype-toc,
* cpt.hitp'archo-toc,
* cpt.title-content-tree'toc,
===

archodoc'Node-of-tree

Description::
The-nodes of the-archo-tree are of two types: archo-doc-units or archo-titles.

Name::
* cpt.hitp'archetype-node-of-tree,
* cpt.hitp'archetype-node,
* cpt.hitp'archo-node,
* cpt.title-content-tree'node,
===

Specific::
• ancestor-node,
• bottom-node,
• child-node,
• descendant-node,
• leaf-node,
• parent-node,
• root-node,
• sibling-node,
• top-node,

archodoc'Level-of-tree

Description::
Level-of-tree is the-set of nodes with the-same number.

Name::
* cpt.hitp'archetype-level-of-tree,
* cpt.hitp'archetype-level,
* cpt.hitp'archo-level,
* cpt.title-content-tree'level,
===

archodoc'Depth-of-tree

Description::
Depth-of-tree is the-number of its levels.

Name::
* cpt.hitp'archetype-depth-of-tree,
* cpt.hitp'archetype-depth,
* cpt.hitp'archo-depth,
* cpt.hitp'archetype-height-of-tree,
* cpt.hitp'archetype-height,
* cpt.hitp'archo-height,
* cpt.title-content-tree'depth,
===

hitpdoc'Browser-compatibility

Description::
• Hitp-docs are-tested on modern {2016} browsers on win10: Chrome, Firefox, Safari, Edge, IE11.

Name::
* cpt.hitp'browser-compatibility,
* cpt.hitp'browser-support,
===

hitpdoc'Download

Name::
* cpt.hitp'download,
===

GitHub-site:
Since version.10.2014-08-05.valuenames I published the-code on GitHub.
• https://github.com/synagonism/hitp/.

To use the online files, use the-latest-files on the-project-page on GitHub.
• https://synagonism.github.io/hitp/hitp.html.
• https://synagonism.github.io/hitp/hitp.css.
• https://synagonism.github.io/hitp/hitp.js.

Synagonism-site:
• hitp.15.2016-10-27.any-machine,
• hitp.14.2016-06-09.title-content-tree,
• hitp.12.2016-01-24.toc-icons,
• hitp.11.2015-10-26.preferences,
• hitp.10.2014-08-05.valuenames,
• hitp.08.2014-01-09.toc,
• hitp.07.2013-11-06.tabs,
• hitp.05.2013-07-15.toc-algo,
• hitp.04.2013-06-27.html5.id.toc.preview,
• hitp.03.2013-04-14.preview,
• hitp.02.2013-04-01.toc,
• hitp.01.2011-02-17.html5.id,

hitpdoc'Components

Every hitp-webpage is comprised of:
• one html-file the main container,
• one css-file,
• one js-file,
• one optional directory with all other needed files such as pictures, audio, video, css, etc.
The-name of the-directory is the-same with the-name of the-html-file plus the '.files' extension.

Name::
* cpt.hitp'components,
===

hitpdoc'Directory

Description::
This directory contains all the extra files needed for the-hitp-file.
Its name is the-name of the-hitp-file plus '.files'.

Name::
* cpt.hitp'dir,
===

hitphml'HTML5

Description::
We use the-HTML5-elements section, header, footer to create the-parts of a-hitp-page that maps a-title-content-tree-doc.

Name::
* cpt.hitp'html5,

hitphml'Title-content-tree

Description::
A-hitp-title-content-tree maps an-archo-title-content-tree.
We use the section, header, footer and p elements to create hitp-trees.

Name::
* cpt.hitp'title-content-tree,
* cpt.hitp-title-content-tree,
* cpt.hitp'webpage-tree,
* cpt.hitp'tree,
* cpt.hitp-tree,
* cpt.hitptree,
* cpt.hitptct,
===

Part::
• title-of-hitp-tree,
• content-of-hitp-tree,
• doc-unit-of-hitp-tree,

Specific::
• footer-tree,
• header-tree,
• meta-tree,
• p-tree,
• root-tree,
• section-tree,

hitphml'Title

Description::
A-hitp-title maps an-archo-title[1].
We use the-heading-elements (h1, h2, ... h6) to implement it[1]:
<h1 id="idName">title</h1>
or the first line of a-p-element ending with ':'
<p id="idName">title:
  doc-unit
  </p>

Name::
* cpt.hitp'title,
* cpt.hitp-title,
* cpt.hitp'webpage-title,

hitphml'Content

Description::
A-hitp-content maps an-archo-content.
It contains hitp-doc-units and other hitp-trees.

Name::
* cpt.hitp'content,
* cpt.hitp-content,
* cpt.hitp'content-of-tree,
===

hitphml'Doc-unit

Description::
A-hitp-doc-unit maps an-archo-doc-unit.
It is-created with p-elements and inline elements, or we use a-div-element as a-container if and extra block elements like ol, ul, table create the-doc-unit.

Name::
* cpt.hitp'doc-unit,
* cpt.hitp-doc-unit,
* cpt.hitp'document-unit,
===

Specific::
• paragraph-with-sentences-doc-unit,
• paragraph-with-subparagraphs-doc-unit,
• paragraph-with-nonsentences-doc-unit,

hitphml'File

Description::
The-html-file is the main file of the-webpage.
It is the most whole CONTAINER of all files of the-webpage.
See the-example-file on github.

Name::
* cpt.hml-file,
* cpt.hitp'html-file,
* cpt.hitp'file,
* cpt.hitp-hml-file,
* cpt.hitp-file,
===

hitphml'IDs

Description::
The core concept (and first motive) of our-proposal is the-addition of ID-attributes on all elements of a-hitp-page.
For example:
<h1 id="idXxxx">...
<p id="idYyyy">...
Now we can-refer to any part of the-document!!!

Name::
* cpt.hitp'id,
* cpt.hitp-id,
===

The-IDs must-be unique:
You can-use as ID whatever you want.
We sugest to begin with "id" in-order to be-distinguished from other words in the-text and do-not-contain spaces.
For example:
id, idHeader, idHitpidx-income, ...

The-IDs must-be visible to the-reader:
The-reader, in-order to REFER to any part of the-document, must-know the-ID of this part of the-file.
This can-be-done by adding a hidden element in this part of the-file that will-be-visible when the-mouse is over this text.
But if this hidden-element is and a-link-element, then the-reader could-copy the-address of this part of the-file from the-address-bar of his browser.
Here is an-example of the simple code we have to add to reach our goal.
<p id="idYyyy">...
  <a class="clsHide" href="#idYyyy"></a></p>
With this code, when the-reader clicks|taps on content, at the-end of the clicked doc-unit appears the-ADDRESS-LINK-ICON.  
Clicking on this symbol, s|he can-see the-ID of this text and s|he can-copy from the-address-bar the-address of this particular part of the-text.
The-paragraph you are-reading now has the-feature we are-talking about and you can-experiment with it.
We can-set IDs, if we need them, on every SENTENCE in a-paragraph.

ID-Patterns:
If the-author of a-doc uses patterns to write the-IDs of a-text-file, it helps the-reader to quickly identify the-parts of the-file.
Examples:
- idA4 (article)
- idA4P2 (paragraph)
- idP2 (Part)
- idP2C2 (Chapter)

NOTATION: the-ID of a-heading-element is the-ID of its section-element plus H1, H2, etc.
This way we can-link and preview the-part of the-doc with this heading.

hitphml'Links

Description::
By setting IDs in all elements of a-text, we can-refer to any part of a-document.
Then we can-use links in all places in a-text we refer to another place inside a-document or outside of it.
Law-texts are full of references.
Find the-references it is difficult and sometimes impossible.
If the-references are "one click away", then reading law will become easier.

Name::
* cpt.hitp'link,
===

hitphml'Math-formulas

Name::
* cpt.hitp'math,
===

Description::
Using MathJax we can-have "beautiful math in all browsers". For example: $x=\frac{-b\pm \; <!--pm,\; PlusMinus,\; plusmn-->\sqrt{b^2-4\; <!--it,\; InvisibleTimes-->a\; <!--it,\; InvisibleTimes-->c}}{2\; <!--it,\; InvisibleTimes-->a}$
HOW:
1. we need to add the following code inside the-head-element:
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> and
2. create the-math-code. An easy method is from the online site ShareMath.

hitpcss'class

Description::
Like the-IDs, the-name of all css-classes begin with 'cls'.
Below is the-code of the-classes I am-using.

Name::
* cpt.hitp'css'class,
* cpt.hitp'cls,
* cpt.hitpcls,
===

hitp'clsCenter {
  text-align: center;
}

hitp'clsCenterBlock {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

hitp'clsCenterInline {
  display: block;
  text-align: center;
}

hitp'clsBtn {
  border-radius: 5px;
  font-size: 12px;
  margin: 2px 0 5px 12px;
}

hitp'clsBtn:hover {
  background: #e0f2f7;
  color: red;
}

hitp'clsColorBlue {
  color: #0000ff;
}

hitp'clsColorGreen {
  color: #008000;
}

hitp'clsColorGreenBg {
  background-color: #008000;
}

hitp'clsColorRed {
  color: #ff0000;
}

hitp'clsColorYellow {
  color: #FFFF00;
}

hitp'clsColorYellowBg {
  background-color: #FFFF00;
}

hitp'clsEditor {
  background: transparent;
  color: #999999;
}

hitp'clsFontGrExt {
  font-family: "Palatino Linotype";
}

hitp'clsFontGrMg {
  font-family: MgPolNewTimes;
  font-size: 16px;
}

hitp'clsFontSerif {
  font-family: Serif, "Times New Roman", Georgia;
}

hitp'clsFontSansserif {
  font-family: SansSerif, "Microsoft Sans Serif", Arial, Dialog, Tahoma;
}

hitp'clsFontMonospaced {
  font-family: Monospaced, "Courier New", Courier;
}

hitp'clsFontScript {
  font-family: Script "Monotype Corsiva";
}

hitp'clsFontDecorative {
  font-family: Wingdings;
}

hitp'clsPagePb {
  display: block;
  text-align: right;
  color: green;
}

hitp'clsHide {
  //misc attributes that hide id-link and expose it by hovering.
}

hitp'clsSizeSmall {
  font-size: small;
}

hitp'clsSizeSmallX {
  font-size: x-small;
}

hitp'clsSizeMedium {
  font-size: large;
}

hitp'clsSizeLarge {
  font-size: large;
  font-weight: bold;
}

hitp'clsSizeLargeX {
  font-size: x-large;
  font-weight: bold;
}

hitp'clsB {
  font-weight: bold;
}

hitp'clsU {
  text-decoration: underline;
}

hitpcss'File

Description::
You can-download this file, or use the online one.

Name::
* cpt.hitp'css-file,
* cpt.hitp'file.css,
===

hitpljb'File

Description::
'hitp.js' is the-javascript-code you need to create a-hitp-webpage.
It is part of the-HTML-doc.
It is-included using the-script-element at the-end of the-body-element:
<script src="https://synagonism.github.io/hitp/hitp.js"></script>
You can-download this file, or use the online one.
So, hitp.html, hitp.css and hitp.js is the-code needed to create hitp-pages, and it is free (MIT license).

Name::
* cpt.hitp'js-file,
* cpt.hitp'file.js,
===

hitpljb'Table-of-Contents

Description::
When you are-reading text on a-computer-screen you are-losing your reading-position.
Hitp-webpages automatically create the-table-of-contents-tree (toc) of the-doc of the-page and show your reading-position.
HOW: you need to add the following code at the-end of the-body-element:
<script src="https://synagonism.github.io/hitp/hitp.js"></script>

The-attributes of hitp-toc are:
* It is expandable.
* There is two-way communication between the-toc and the-content.
- By clicking on the-toc, goes to that heading in the-content.
- By clicking|hovering on content, this content position is highlited in the-toc and its parents are only expanded, giving to the-reader the big picture of the-position s|he is-reading.
Thus the-toc improves the-readability of big documents.
* If the-user needs more space for the-content, the-splitbar has a-button that closes|opens the-toc with one click.
* The-splitter changes width.

My previous approach was the-creation of a-Chrome-extension, my Table-of-contents-crx which creates a-toc on any page with headings only in Chrome.

Name::
* cpt.hitp'toc,
* cpt.hitp-toc,
* cpt.hitp'toc-tree,
===

hitpljb'Link-preview

Description::
Another functionality that facilitates reading is the-addition of previews (pop-ups) on internal (same-origin) links with destination relatively small chunks of text.
This is especially useful for footnotes, abbreviations, definitions, index items, paragraphs etc.

HOW: you only have to add the-class 'clsPreview' on the-links you want to trigger popups when the-reader is hovering over them.
<a class="clsPreview" href="#idPreview">link-preview</a>

Name::
* cpt.hitp'link-preview,
* cpt.hitp'popup,
* cpt.hitp'preview,
===

hitpljb'Tree-info

Name::
* cpt.hitp'tree,
* cpt.hitp'tree,
* cpt.hitp'tree-info,
* cpt.hitp'info-tree,
===

hitpmeta'Page-path

Description::
By setting a-p-element[1] with id "idMetaWebpage_path", the-program sets its content as the first paragraph in the left toc-container, showing where the-page fits in the-site's-structure.
NOTE: If the-document does-not-contain this paragraph, the-program sets the-title-element as page-path.
I put this[1] element as the last paragraph of the-meta-title-content-tree.

Name::
* cpt.hitp'pagepath,
* cpt.hitp'page-path,
===

hitpmeta'Site-structure

Description::
Every hitp-page, except of presenting its own structure, presents and its site-structure in a-collapsible-tree.

HOW: You have to add ONCE in the-root-directory of the-site the-file 'filSite-structure.html' with the-site-structure in the-form of an-unordered-html-list.
Modifying this file, ALL the-hitp-pages will-present the-changes.

Name::
* cpt.hitp'site-structure,
===

Concept-Index

Description::
Every text describes CONCEPTS.
The-concepts have NAMES.
Every SENTENCE in a-text is composed of names.
IF we create the-concept-index of a-text, with every concept-entry to hold its names and its definition, THEN we will-have ONE interpretation of the-meaning of a-text (= monosemous-text).
IF we set preview-linking on the-names of sentences with the-concept-index, THEN the-understanding of a-text will-become FAST.

Name::
* cpt.hitp'concept-index,
* cpt.hitp'index.concept,
===

Concept-Model

Description::
Every text describes concepts and relations of concepts, which form a subjective MODEL (modelConcept) of reality.
More important than the-concept-index is the-modelConcept of the-text.
In a-model-concept a-concept-entry contains, except its names and its definition and ALL its attributes|characteristics.
A crude example of a-modelConcept contains my hitp-page of the Keynes book 'The General Theory of Employment, Interest, and Money'.
A better example is my Javascript-programming-language-concept.

Name::
* cpt.hitp'concept-model,
* cpt.hitp'modelConcept,
===

Name-Index

Description::
Βy setting as ID on each name|term-entry the pattern "idHitpidx-term", the-reader will-have very quick access to the-entries.
un.sna.2008.html is an-example with a-name-index.

Name::
* cpt.hitp'name-index,
* cpt.hitp'index.name,
===

Word-Index

Name::
* cpt.hitp'index.word,
* cpt.hitp'word-index,
===

Description::
The majority of programs today search a-text for words and NOT names.
By pressing Ctrl+F or F3 you can-search for words.

Firefox

location.href {2013.08.16}:
FIXED
In contrast to Chrome, Firefox loses selected-text after setting value on 'location.href'.
WORKAROUND: first click to go to that location and then select-text from this location.

Back-Forward {2013.08.16}:
FIXED.
Clicking on buttons 'back', 'forward' shows the visited locations but does not go to that location.
WORKAROUND: click on the-address-bar and hit enter.

hitp'Versioning

Description::
We can-have a simple versioning paradigm on hitp-pages by setting the-date on its file-name plus one or more numbers indicating how many times changes have-occured, ie 'index.16.2016-06-09.html' (= version 16 of index.html on {2016-06-09}).
Having and a-file with only the-file-name but with the LAST-MINOR-DYNAMIC version we can always have access to the last version with minor changes we do-not-think important to hold records on them.
From internal links we can-have access to previous dated versions.
As example look this file you are-reading.
Evolution is a continuous entity.
Every author SUBJECTIVELY desides when to call a-page 'version'.

Name::
* cpt.hitp'versioning,
===

hitp'Todo

Description::
* DONE. {hitp.15.2016-10-27}
* Make it mobile friendly. {2016.08.08}

Name::
* cpt.hitp'todo,
===