hitp'Archetype (archo-doc)

Description:
Archetype is the-entity we want to model with a-language.
A-hitp-archetype or a-TITLE-CONTENT-TREE-DOCUMENT, is a-document (= recorded information) with a title-content-tree structure.

Name:
• cpt.hitp'archetype,
• cpt.hitp'archetype-document,
• cpt.hitp'archetype-tree,
• cpt.hitp'archetype-whole-part-tree,
• cpt.hitp'archo-doc,
• cpt.hitp'archo-root-tree,
• cpt.hitp'root-tree,
• cpt.hitp'structured-document,
• cpt.hitp'title-content-tree-document,
• cpt.document,
• cpt.doc,
• cpt.title-content-document,
• cpt.tcd,
• cpt.title-content-tree-document,
• cpt.tctd,
===
• archo-doc-cpt,
• archodoc-cpt,
• hitp'archetype-cpt,
• hitp'archetype-document-cpt,
• hitp'archetype-tree-cpt,
• hitp'archetype-whole-part-tree-cpt,
• hitp'archo-doc-cpt,
• hitp'archo-root-tree-cpt,
• hitp'root-tree-cpt,
• hitp'structured-document-cpt,
• hitp'title-content-tree-document-cpt,
• document-cpt,
• doc-cpt,
• title-content-document-cpt,
• tcd-cpt,
• title-content-tree-document-cpt,
• tctd-cpt,

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'info-title-content-tree,
• cpt.hitp'archo-tree,
• cpt.title-content-tree,
• cpt.tct,
===
• hitp'info-title-content-tree-cpt,
• hitp'archo-tree-cpt,
• title-content-tree-cpt,
• tct-cpt,

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

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

archodoc'tree.BOTTOM

Definition.Specific:
Bottom-tree is a-tree whose content contains bottom-nodes.

Name:
• cpt.hitp'archo-tree.bottom,
• cpt.hitp'archo-bottom-tree,
• cpt.title-content-tree.bottom,
===
• hitp'archo-tree.bottom-cpt,
• hitp'archo-bottom-tree-cpt,
• title-content-tree.bottom-cpt,

archodoc'tree.LEAF

Definition.Specific:
Leaf-tree is a-tree whose content contains only doc-units.

Name:
• cpt.hitp'archo-tree.leaf,
• cpt.hitp'archo-leaf-tree,
• cpt.title-content-tree.leaf,
===
• hitp'archo-tree.leaf-cpt,
• hitp'archo-leaf-tree-cpt,
• title-content-tree.leaf-cpt,

archodoc'tree.ROOT

Definition.Specific:
Root-tree is the outermost tree in a-title-content-tree-document.
Its title, the-root-title, has no parent.

Name:
• cpt.hitp'archo-tree.root,
• cpt.hitp'archo-root-tree,
• cpt.title-content-tree.root,
===
• hitp'archo-tree.root-cpt,
• hitp'archo-root-tree-cpt,
• title-content-tree.root-cpt,

archodoc'tree.SUBTREE

Definition.Specific:
Subtree is a-tree which is part of the-content of another tree.

Name:
• cpt.hitp'archo-tree.subtree,
• cpt.hitp'archo-subtree,
• cpt.title-content-tree.subtree,
===
• hitp'archo-tree.subtree-cpt,
• hitp'archo-subtree-cpt,
• title-content-tree.subtree-cpt,

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,
===
• hitp'archetype--info-title-cpt,
• hitp'archetype-title-cpt,
• hitp'archo-title-cpt,
• title-content-tree'title-cpt,

archodoc'title.Root

Description:
Root-title is-called the outermost title-node in the-archetype-tree.

Name:
• cpt.hitp'archetype--root-title,
• cpt.hitp'archetype--root-node,
• cpt.title-content-tree'title.root,
===
• hitp'archetype--root-title-cpt,
• hitp'archetype--root-node-cpt,
• title-content-tree'title.root-cpt,

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,
===
• hitp'archetype--info-content-cpt,
• hitp'archo-content-cpt,
• title-content-tree'content-cpt,

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,
===
• hitp'archetype--info-doc-unit-cpt,
• hitp'archo-doc-unit-cpt,
• title-content-tree'doc-unit-cpt,

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,
===
• hitp'archetype-table-of-contents-cpt,
• hitp'archetype-toc-cpt,
• hitp'archo-toc-cpt,
• title-content-tree'toc-cpt,

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,
===
• hitp'archetype-node-of-tree-cpt,
• hitp'archetype-node-cpt,
• hitp'archo-node-cpt,
• title-content-tree'node-cpt,

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

archodoc'node'number

Description:
Every node has 2 numbers that denote its distance from the-top (root) and the-bottom of the-tree.

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

Specific:
• root-number-of-node,
• bottom-number-of-node,

archodoc'node'number.ΒΟΤΤΟΜ

Description:
Bottom-number of a-node is its distance from the-bottom.
The-bottom-node has 0 bottom-number.
The-root-node has the-highest bottom-number.

Name:
• cpt.hitp'archetype-bottom-number-of-node,
• cpt.hitp'archo-node-bottom-number,
• cpt.hitp'height-number-of-archo-node,
• cpt.hitp'bottom-number-of-archo-node,
• cpt.title-content-tree'node-number.bottom,
===
• hitp'archetype-bottom-number-of-node-cpt,
• hitp'archo-node-bottom-number-cpt,
• hitp'height-number-of-archo-node-cpt,
• hitp'bottom-number-of-archo-node-cpt,
• title-content-tree'node-number.bottom-cpt,

archodoc'node'number.ROOT

Description:
Root-number of a-node is its distance from the-top (root).
The-root has 0 root-number.
A-bottom-node has the-highest root-number.

Name:
• cpt.hitp'archetype-root-number-of-node,
• cpt.hitp'archo-node-root-number,
• cpt.hitp'depth-number-of-archo-node,
• cpt.hitp'root-number-of-archo-node,
• cpt.title-content-tree'none-number.root,
===
• hitp'archetype-root-number-of-node-cpt,
• hitp'archo-node-root-number-cpt,
• hitp'depth-number-of-archo-node-cpt,
• hitp'root-number-of-archo-node-cpt,
• title-content-tree'none-number.root-cpt,

archodoc'node.BOTTOM

Description:
Bottom-node is a-node with the-highest root-number.

Name:
• cpt.hitp'archetype-bottom-node,
• cpt.hitp'archo-node.bottom,
• cpt.title-content-tree'node.bottom,
===
• hitp'archetype-bottom-node-cpt,
• hitp'archo-node.bottom-cpt,
• title-content-tree'node.bottom-cpt,

archodoc'node.LEAF

Description:
Leaf-node is a-node without children.

Name:
• cpt.hitp'archetype-leaf-node,
• cpt.hitp'archo-node.leaf,
• cpt.title-content-tree'node.leaf,
===
• hitp'archetype-leaf-node-cpt,
• hitp'archo-node.leaf-cpt,
• title-content-tree'node.leaf-cpt,

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,
===
• hitp'archetype-level-of-tree-cpt,
• hitp'archetype-level-cpt,
• hitp'archo-level-cpt,
• title-content-tree'level-cpt,

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,
===
• 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-cpt,

hitp'Model (webpage, hitp-doc)

Description:
A-hitp-webpage (hitp-doc) is A-DOCUMENT which maps|represents|denotes|models an-archo-title-content-tree-doc.
It is structured for humans and machines.
It contains and extra information apart of the archo-doc representation, such as meta-info and site-info.
It is-written in 3 computer-languages, because it is a-web-application:
• HTML: for the-structure of the-information,
• CSS: for its presentation,
• Browser-javascript (ljb): for its processing.
The-HTML-doc is the most whole container which includes the-CSS-doc and the-ljb-doc.

Name:
• cpt.hitp'code,
• cpt.hitp'model,
• cpt.hitp'page,
• cpt.hitp'webpage,
• cpt.hitp-code,
• cpt.hitp-model,
• cpt.hitp-page,
• cpt.hitp-webpage,
• cpt.hitpcode,
• cpt.hitpmodel,
• cpt.hitppage,
• cpt.hitpwpg,
===
• hitp'code-cpt,
• hitp'model-cpt,
• hitp'page-cpt,
• hitp'webpage-cpt,
• hitp-code-cpt,
• hitp-model-cpt,
• hitp-page-cpt,
• hitp-webpage-cpt,
• hitpcode-cpt,
• hitpmodel-cpt,
• hitppage-cpt,
• hitpwpg-cpt,

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,
===
• hitp'browser-compatibility-cpt,
• hitp'browser-support-cpt,

hitpdoc'Download

Name:
• cpt.hitp'download,
===
• hitp'download-cpt,

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,
===
• hitp'components-cpt,

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,
===
• hitp'dir-cpt,

hitpdoc'HTML-doc

Description:
The-HTML-language models the-structure of a-hitp-webpage and stores the-content of the-archo-doc.
The-HTML-doc is the most whole CONTAINER of the-webpage.
It contains the-CSS-doc and the-ljb-doc.

Name:
• cpt.hitphml,
• cpt.hitp'html,
• cpt.hitp'code'html,
• cpt.hitpcode'html,
===
• hitp-hml-code-cpt,
• hitp-hml-doc-cpt,
• hml-code-cpt,
• hml-doc-cpt,
• hmlcode-cpt,
• hmldoc-cpt,

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,
• hitp'html5-cpt,

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,
===
• hitp'title-content-tree-cpt,
• hitp-title-content-tree-cpt,
• hitp'webpage-tree-cpt,
• hitp'tree-cpt,
• hitp-tree-cpt,
• hitptree-cpt,
• hitptct-cpt,

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,

hitptree.ROOT (header)

Description:
A-hitp-root-tree (a-hitp-doc) maps|represents an-archo-root-tree (a-title-content-tree-doc).
We use a-header and an-h1 elements to create the-title, and an-ordered-set of h1-trees with last a-footer-tree to create the-content of the-root-tree.
The-header-element is the first child of the-body-element.
<header id="idHeader"> <h1 id="idHeaderH1">Title </h1> </header> <section id="idName"> <h1 id="idNameH1">Title </h1> content </section> <footer id="idFooter"> <p id="idFooterP1">Title: doc-units </p> </footer>

Name:
• cpt.hitp'tree.header,
• cpt.hitp'header-tree,
• cpt.hitp'tree.root,
• cpt.hitp'root-tree,
• cpt.hitp-root-tree,
• cpt.hitp-document,
• cpt.hitp-doc,

• hitp'tree.header-cpt,
• hitp'header-tree-cpt,
• hitp'tree.root-cpt,
• hitp'root-tree-cpt,
• hitp-root-tree-cpt,
• hitp-document-cpt,
• hitp-doc-cpt,

Depth:
The biggest depth of a-hitp-doc is 6+1.
This is because the-heading-elements h1 ... h6 are 6 and thus a-section-tree can have only 5 subtrees.
The extra depth we get from p-trees.

PROPOSAL: Because many documents use deeper depth than 7 (even-though I do-not-think it is a good practice) I proposed on {2010.10.24} in public-html-comments@w3.org list to use all the single-digit numbers 0-9 as html-headings.

hitptree.SECTION

Description:
A-section-tree is a-tree in which we use the-section-element as a-container, a-heading-element for its title and for its content, doc-units or other section-trees.
The-subtrees of a-section-tree have ordered titles in the form h1, h2, h3, h4, h5, and h6.
<section id="idName2"> <h2 id="idName2H2">Title2 </h2> <p>Sentence1. Sentence2. </p> <section id="idName3"> <h3 id="idName3H3">Title3 </h3> <p>Sentence1. Sentence2. </p> </section> </section>

Name:
• cpt.hitp'tree.section,
• cpt.hitp'section-tree,
• cpt.hitp-section-tree,
===
• hitp'tree.section-cpt,
• hitp'section-tree-cpt,
• hitp-section-tree-cpt,

Specific:
• h1-section-tree (has h1-element as title),
• h2-section-tree (has h2-element as title),
• h3-section-tree (has h3-element as title),
• h4-section-tree (has h4-element as title),
• h5-section-tree (has h5-element as title),
• h6-section-tree (has h6-element as title),

hitptree.FOOTER

Description:
A-hitp-footer-tree is an optional special tree, last child of the-root-tree.
It is-created with the-footer-element, with no title, and content document-units with text that ends the-text of the-doc.
<footer id="idFooter"> <p id="idFooterP1">Title: doc-units </p> </footer>

Name:
• cpt.hitp'tree.footer,
• cpt.hitp'footer-tree,
• cpt.hitp-footer-tree,
===
• hitp'tree.footer-cpt,
• hitp'footer-tree-cpt,
• hitp-footer-tree-cpt,

hitptree.P

Description:
A-hitp-p-tree is always a-leaf-tree we create with the-p-element.
Its-title is the first line which ends with ':'.
Its-content contains only doc-units.
<p id="idName">Title: sentences or subparagraphs </p> //or <div id="idName"> <p>Title: Sentence1. Sentence2. </p> <table> ... </table> </div>

Name:
• cpt.hitp'tree.p,
• cpt.hitp'p-tree,
• cpt.hitp-p-tree,
===
• hitp'tree.p-cpt,
• hitp'p-tree-cpt,
• hitp-p-tree-cpt,

hitptree.Meta

Description:
A-webpage-meta-tree is a special section-tree, which is NOT PART of the-root-tree.
It contains meta-info about the-doc such as versions, comments, support etc.
<section id="idMeta"> <h1 id="idMetaH1">Meta-Info </h1> content.meta <p id="idMetaWebpage_path"><span class="clsB clsColorGreen">Page-path</span>: hitp-webpage ∈ synagonism.net </p> </section>

Name:
• cpt.hitp'tree.meta,
• cpt.hitp'meta-tree,
• cpt.hitp-meta-tree,

• hitp'tree.meta-cpt,
• hitp'meta-tree-cpt,
• hitp-meta-tree-cpt,

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,
===
• 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,
===
• hitp'content-cpt,
• hitp-content-cpt,
• hitp'content-of-tree-cpt,

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,
===
• hitp'doc-unit-cpt,
• hitp-doc-unit-cpt,
• hitp'document-unit-cpt,

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

hitpunit.Paragraph-with-sentences

Description:
For readability, we put every sentence in a new line.
<p id="idName">Sentence1. Sentence2. SentenceLast. </p>

Name:
• cpt.hitp'doc-unit.paragraph-with-sentences,
• cpt.hitp'doc-unit.sentences,
• cpt.hitp'sentences-doc-unit,
===
• hitp'doc-unit.paragraph-with-sentences-cpt,
• hitp'doc-unit.sentences-cpt,
• hitp'sentences-doc-unit-cpt,

hitpunit.Paragraph-with-subparagraphs

Description:
<p id="idName">Sentence1. Sentence2. Sentence3. SentenceLast. </p>

Name:
• cpt.hitp'doc-unit.paragraph-with-subparagraphs,
• cpt.hitp'doc-unit.sentences,
• cpt.hitp'sentences-doc-unit,
===
• hitp'doc-unit.paragraph-with-subparagraphs-cpt,
• hitp'doc-unit.sentences-cpt,
• hitp'sentences-doc-unit-cpt,

hitpunit.Paragraph-with-nonsentences

Description:
<div id="idName"> <p>Sentence1. Sentence2. </p> <table> ... </table> <a class="clsHide" href="#idName"></a></div>

Name:
• cpt.hitp'doc-unit.paragraph-with-nonsentences,
• cpt.hitp'doc-unit.nonsentences,
• cpt.hitp'nonsentences-doc-unit,
===
• hitp'doc-unit.paragraph-with-nonsentences-cpt,
• hitp'doc-unit.nonsentences-cpt,
• hitp'nonsentences-doc-unit-cpt,

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.hitp'html-file,
• cpt.hitp'file,
• cpt.hitp-file,
===
• hitp'file-cpt,
• hitp'html-file-cpt,
• hitp-file-cpt,
• hitp-hml-file-cpt,
• hml-file-cpt,

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,
===
• hitp'id-cpt,
• hitp-id-cpt,

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,
• hitp'link-cpt,

hitphml'Math-formulas

Name:
• cpt.hitp'math,
• hitp'math-cpt,

Description:
Using MathJax we can-have "beautiful math in all browsers". For example: $x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 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.

hitpdoc'CSS-doc

Description:
The-CSS-language models the-presentation of the-archo-doc.
We use a-css-file[1] for harmonization in the-appearance of documents and for the-toc creation.
You need the following code, inside the-HTML-doc, to use it[1]:
<link rel="stylesheet" href="https://synagonism.github.io/hitp/hitp.css">
You can-store the-hitp.css-file AND in your server.
Also you can modify the-appearance of the-document by using AND your own css-file.

Name:
• cpt.hitpcss,
• cpt.hitp'css,
• cpt.hitp'code.css,
===
• hitpcss-cpt,
• hitp'css-cpt,
• hitp'code.css-cpt,

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'css'clas-cpts
• hitp'cls-cpt,
• hitpcls-cpt,

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,
===
• hitp'css-file-cpt,
• hitp'file.css-cpt,

hitpdoc'Browser-javascript-doc

Description:
Browser-javascript-language models the-information processing on the-page.
- creates the-toc and inserts it into the-page.
- makes the-width of toc-container dynamic.
- adds preferences on the-page.
- adds the-site-structure.
- adds the-page-path.
- ...

Name:
• cpt.hitpljb,
• cpt.hitp'browser-javascript,
• cpt.hitp'javascript,
• cpt.hitp'js,
• cpt.hitp'language.javascript.browser,
• cpt.hitp'ljb,
• cpt.hitp'code.browser-javascript,
• cpt.hitp'code.javascript,
• cpt.hitp'code.js,
===
• hitp'ljb-code-cpt,
• hitp'ljb-doc-cpt,
• javascript-code-cpt,
• javascript-doc-cpt,
• ljb-code-cpt,
• ljb-doc-cpt,
• ljbcode-cpt,
• ljbdoc-cpt,

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,
===
• hitp'js-file-cpt,
• hitp'file.js-cpt,

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,
===
• hitp'toc-cpt,
• hitp-toc-cpt,
• hitp'toc-tree-cpt,

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,
===
• hitp'link-preview-cpt,
• hitp'popup-cpt,
• hitp'preview-cpt,

hitpljb'Tree-info

Description:
Our information is full of generic-specific and whole-part trees.
Now hitp support collapsible trees, easily readable.

HOW:
You create the-tree as an-html-unordered-list (UL).
Then you add the-class 'clsTreeUl' on the first element.
That's it, the-rest is done by the javascript code of the-page.

Tree-root
- Node1
  - Node1.1
    - Node1.1.1
    - Node1.1.2
  - Node1.2
    - Node1.2.1
    - Node1.2.2
- Node2
  - Node2.1
  - Node2.2
  - Node2.3

Name:
• cpt.hitp'tree,
• cpt.hitp'tree,
• cpt.hitp'tree-info,
• cpt.hitp'info-tree,

• hitp'tree-cpt,
• hitp'tree-cpt,
• hitp'tree-info-cpt,
• hitp'info-tree-cpt,

hitp.EVOLUTION of proposal

Name:
• cpt.hitp'evolution,
• cpt.hitp.evolution,
• hitp'evolution-cpt,
• hitp.evolution-cpt,

{version.minor}:
-

{version.15.2016-10-27}: ANY-MACHINE:
- The-site looks and behaves the-same on any machine of size and input-method.
- Hovering events removed. NOW first-click does the previous hovering events and second-click the previous click events.
- Font-awesome-icons added.
- clicking on blue-links shows preview, SECOND-clicking goes destination. {2016.09.27}
- clicking on content shows position on toc (touch input friendly).
- Collapsible-trees added. {2016.07.20}

{version.14.2016-06-09}: Title-Content-Tree:
Recursive-definition of 'title-content-tree'.
Document-unit, div.

{version.13.2016-06-07}: Preview:
Preview-links have more darkblue-color than non-preview-links. {2016.05.01}
Added a-time-delay on preview-links. {2016.04.30}
Changed id-link from ¶ to a background link image. {2016.02.23}

{version.12.2016-01-24}: Toc-Icons:
Changed the icons of the-toc-tree to images from characters, for compatibility.

{version.11.2015-10-26}: Preferences:
Users now can-choose how they prefer to view hitp-pages:
- they can-have or not the link-preview characteristic,
- they can-see on the table-of-contents the position of the content they are reading by hovering or clicking on that content.

{version.10.2014-08-05}: VALUENAMES | TYPENAMES:
With 'valuename' I mean a-NAME (identifier) of a-name-value-pair (variable), that denotes the-VALUE (type) with which it is-associated.
Now ALL the-custom-names of my code are valuenames, with its FIRST-CHARACTER to denote its value|type:
- aName denotes array.
- bName denotes boolean.
- fName denotes function.
- nName denotes number.
- oName denotes object.
- rName denotes regular-expression.
- sName denotes string.
- xName denotes mixed-values.
This method is a SIMPLE method to make javascript a type language!!!
This way we increase the readability of the source code.
I published my new code, with the MIT license (= do whatever you want, only mention my work), on GitHub at https://github.com/synagonism/hitp.

{version.09.2014-08-02: NO jQuery:
I rewrote the-code, by removing jQuery.
Everything now is vanilla javascript.
Fixed: preview popup location.

{version.08.2014-01-09}: Table-of-contents:
Hovering a piece of text, you see its position on ToC.
To see the-address of the-text you click on ¶.
With the previous functionality, you had to click on text to see its position.

{version.07.2013-11-06}: Tabs:
The page-structure is set under a tab.

{version.06.2013-08-21}: Site-structure:
Now each hitp-webpage presents and its site-structure except of its own structure.

{version.05.2013-07-15}: ToC Algorithm:
I wrote a new smaller specific algorithm that creates the ToC of a hitp-page.
The previous was the one of html5-outliner-chrome-extension.
Also I enclosed the-code in one literal object, the 'HITP'.
I allow gaps in headings like: h1, h2, h4 because existing docs use this pattern.

{version.04.2013-06-27}: Name:
I change the-name of the proposal from html5.id.toc to html5.id.toc.preview (= html5IdTocPreview)
in-order to include all its main attributes.
Abbreviation: ebkHitp, hitp.

{version.03.2013-04-14}: Link Preview:
HTML5.ID.TOC.PREVIEW: Another feature that facilitates reading-productivity.

{version.02.2013-04-01}: Table of Contents:
HTML5.ID.ToC: Adding a few lines of javascript code the static-pages are becoming dynamic ('applications!') but this facilitates reading.
This way the 'electronic-text' begins to have more advantantages than 'printed-text'.
Other forms of 'electronic-text' which merely digitize printed-text are inferior to 'printed-text'.

{version.01.2011-02-17}: first publication:
HTML5.ID: the goal of my first try was to show a simple method of a-text-format we can-read in a ubiquitous web-browser that anyone can-REFER to any part of it.
The main types of texts I had in my mind were law-texts.

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'versioning-cpt,

hitp'Todo

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

Name:
• cpt.hitp'todo,
• hitp'todo-cpt,

hitp'Description

hitp'Name