Mcs.Hitp-language (Hitp)
Html5.Id.Toc.Preview--Html-Css-JS--language
with Html5, Ids, Table-of-contents, link-Preview

Description-of-Hitp

Description::
Hitp (html5.id.toc.preview) is a-WEBPAGE-Html-Css-JS-DIALECT (format|method|framework) for publishing WEBPAGES of title-content-tree structured-documents with these advantages:
1) Html5: no need for special programs to read them, as all machines have the needed browser (= html reader). Also html5-elements structure the-text for humans and machines.
2) Id: anyone can-refer to ANY PART of them, because all their html-elements have IDs.
3) Toc: automatically created expandable table-of-contents makes reading EASY.
4) Preview: same domain link-preview makes reading FAST.

With these attributes and by connecting the-NAMES of the-sentences with their DEFINITIONS using preview-links, we can-create our electronic-documents subjectively MONOSEMOUS, easily readable by humans and machines.
Knowledge of Html, Css, Browser-javascript is a-prerequisite to read the-rest of this page.

Artificial-intelligence will never succeed to understand today's POLYsemous unstructured-info[1] (only a portion of it will manage), for the simple fact it[1] is polysemous and some times ZEROsemous (= meaningless)!!!
The-creation of MONOsemous-structured-documents is a-prerequisite to manage the enormous quantity of human-information with the-help of machines.

Name::
* cpt.Generic-specific-pair--webpage, {2013.09.01}
* cpt.Hitp,
* cpt.Hitp-(Html5.Id.Toc.Preview),
* cpt.Hitp-dialect,
* cpt.Hitp-language,
* cpt.Hitp--web-page-format,
* cpt.Hitp--webpage-format,
* cpt.Hitp--webpage-dialect,
* cpt.Hitp--webpage-application-format,
* cpt.Hitp--page-format,
* cpt.Html5IdTocPreview-(Hitp),
* cpt.Html5.id.toc.preview-(Hitp),
* cpt.Html5.id.toc.preview--webpage-format-(Hitp),
* cpt.Html5.id.toc.preview--page-format-(Hitp),
* cpt.Html5IdTocPreview--webpage-format-(Hitp),
* cpt.Title-content-tree--document---webpage-format-(Hitp),

Archetype-of-Hitp (Hitp-archo)

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

Name::
* cpt.Archo-doc-of-Hitp,
* cpt.Archodoc-of-Hitp,
* cpt.Document-archetype--of-hitp,
* cpt.Hitp'archetype,
* cpt.Hitp'archetype-document,
* cpt.Hitp'archo-doc,
* cpt.Hitp'structured-document,
* cpt.Hitp-archetype,
* cpt.Hitp-archetype'title-content-tree-document,
* cpt.Title-content-document--of-Hitp,
* cpt.Title-content-tree-document--of-Hitp,

Hitp-archo'Title-content-tree--document

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

Name::
* cpt.Document.title-content-tree,
* cpt.TCTD,
* cpt.Title-content-tree--document,

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

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

TCTree-doc.BOTTOM

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

Name::
* cpt.Hitp-archo'bottom-tree,
* cpt.Hitp-archo'tree.bottom,
* cpt.Title-content-tree--document.bottom,

TCTree-doc.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--document.leaf,

TCTree-doc.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--document.root,

TCTree-doc.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--document.subtree,

Hitp-archo'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--document'title,

Hitp-archo'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--document'title.root,

Hitp-archo'Content

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

Name::
* cpt.Hitp-archetype'info-content,
* cpt.Hitp-archo'content,
* cpt.Title-content-tree--document'content,

Hitp-archo'Doc-unit

Description::
Hitp-archo-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--document'doc-unit,

Hitp-archo'Node

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

Name::
* cpt.Hitp-archetype'node,
* cpt.Hitp-archo'node,

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

Archo-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'number-of-archo-node,

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

Archo-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,

Archo-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,

Archo-node.BOTTOM

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

Name::
* cpt.Hitp-archetype'bottom-node,
* cpt.Hitp-archo'node.bottom,

Archo-node.LEAF

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

Name::
* cpt.Hitp-archetype'leaf-node,
* cpt.Hitp-archo'node.leaf,

Hitp-archo'Level

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

Name::
* cpt.Hitp-archetype'level,
* cpt.Hitp-archo'level,

Hitp-archo'Depth|height

Description::
Depth|height-of--Hitp-archetype is the-number of its levels.

Name::
* cpt.Hitp-archetype'depth,
* cpt.Hitp-archetype'height,
* cpt.Hitp-archo'depth,
* cpt.Hitp-archo'height,

Hitp-archo'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,

Document-of-Hitp (webpage, model)

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.
[HmnSgm.2017-09-23]

Name::
* cpt.Hitp-code,
* cpt.Hitp-doc,
* cpt.Hitp-model,
* cpt.Hitp-page,
* cpt.Hitp-webpage,

Hitp-doc'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-doc'Download

Name::
* cpt.Hitp'download,
* 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.
http://synagonism.github.io/hitp/hitp.html.
http://synagonism.github.io/hitp/hitp.css.
http://synagonism.github.io/hitp/hitp.js.

Synagonism-site:
Hitp.16.2017-06-05.Searching,
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,

Hitp-doc'File

Every hitp-webpage is comprised of:
• one Html-file the main container,
• one Css-file,
• one Ljb-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'file,
* cpt.Hitp'syntax-tree,
* cpt.Hitp-doc'file,
* cpt.Hitp-file,

Hitp-doc'Directory

Description::
Optionally, the-Hitp-doc has a-directory with all extra files needed such as images, specific Css or Ljb code, anything.
Its name is the-name of the-Hitp-Hml-file plus '.files'.

Name::
* cpt.Hitp'directory,
* cpt.Hitp-directory,
* cpt.Hitp-doc'directory,

Hitp-doc'Html-doc (Hitp-Hml)

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.Hitp'Html-code,
* cpt.Hitp'Html-doc,
* cpt.Hitp-code'Html-doc,
* cpt.Hitp-doc'Html-doc,
* cpt.Hitp-Hml,
* cpt.Html-code--of-Hitp,
* cpt.Html-doc--of-Hitp,

Hitp-Hml'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,
* cpt.Hitp-Html5,

Hitp-Hml'Title-content-tree--document (Hitp-TCTD)

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

Name::
* cpt.Hitp'tctd,
* cpt.Hitp'title-content-tree--document,
* cpt.Hitp-TCTD,

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,

Hitp-TCTD.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-TCTD.header,
* cpt.Hitp-header-tree,
* cpt.Hitp-TCTD.root,
* cpt.Hitp-root-tree,
* cpt.Hitp-document.root,
* cpt.Hitp-doc.root,

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.

Hitp-TCTD.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-TCTD.section,
* cpt.Hitp-section-tree,

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),

Hitp-TCTD.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-TCTD.footer,
* cpt.Hitp-footer-tree,

Hitp-TCTD.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-TCTD.p,
* cpt.Hitp-p-tree,

Hitp-TCTD.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-TCTD.meta,
* cpt.Hitp-meta-tree,

Hitp-Hml'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'webpage-title,
* cpt.Hitp-Hml'title,

Hitp-Hml'Content

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

Name::
* cpt.Hitp'content,
* cpt.Hitp'webpage-content,
* cpt.Hitp-Hml'content,

Hitp-Hml'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-Hml'doc-unit,
* cpt.Hitp-Hml'document-unit,
* cpt.Hitp-Hml'unit,

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

Hitp-Hml-unit.Paragraph-with-sentences

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

Name::
* cpt.Hitp-Hml-unit.paragraph-with-sentences,
* cpt.Hitp-Hml-unit.sentences,
* cpt.Hitp'sentences-Hml-doc-unit,

Hitp-Hml-unit.Paragraph-with-subparagraphs

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

Name::
* cpt.Hitp-Hml-unit.paragraph-with-subparagraphs,

Hitp-Hml-unit.Paragraph-with-nonsentences

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

Name::
* cpt.Hitp-Hml-unit.paragraph-with-nonsentences,
* cpt.Hitp-Hml-unit.nonsentences,
* cpt.Hitp'nonsentences-Hml-doc-unit,

Hitp-Hml'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.Html-file--of-Hitp,
* cpt.Hitp-file.Html,
* cpt.Hitp-Hml'file,

Hitp-Hml'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-Hml'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.

Hitp-Hml'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,
* cpt.Hitp-Hml'link,
* cpt.Hitp-link,

Hitp-Hml'Math-formulas

Name::
* cpt.Hitp'math,
* cpt.Hitp-Hml'math,
* cpt.Hitp-math,

Description::
Using MathJax we can-have "beautiful math in all browsers". For example: x = b ± 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.

Hitp-doc'Css-doc (Hitp-Css)

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="http://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.Hitp'Css-doc,
* cpt.Hitp-Css,
* cpt.Hitp-code'Css-doc,
* cpt.Hitp-doc'Css-doc,

Hitp-Css'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'class-of-Css,
* cpt.Hitp'cls-of-Css,
* cpt.Hitp-Css'class,

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;
}

Hitp-Css'File

Description::
The-Css-doc has 3 files.
The-hitp.css, main file, and 2 font files, filFntUbuntuMonoRegular.ttf and filIcnFa463.woff2 (Icons Font Awesome 4.6.3)
You can-download them from my-site, or from github:
- hitp.css,
- filFntUbuntuMonoRegular.ttf,
- filIcnFa463.woff2,

Name::
* cpt.Hitp'Css-file,
* cpt.Hitp-Css'file,
* cpt.Hitp-file.Css,

Hitp-doc'Javascript-doc (Hitp-Ljb)

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.Hitp'browser-javascript-doc,
* cpt.Hitp'javascript-doc,
* cpt.Hitp'JS-doc,
* cpt.Hitp'Ljb-code,
* cpt.Hitp'Ljb-doc,
* cpt.Hitp-code'browser-javascript-doc,
* cpt.Hitp-code'javascript-doc,
* cpt.Hitp-code'JS-doc,
* cpt.Hitp-doc'JS-doc,
* cpt.Hitp-doc'Ljb-doc,
* cpt.Hitp-Ljb,
* cpt.Hitp--Ljb-doc,
* cpt.Javascript-code--of-Hitp,
* cpt.Javascript-doc--of-Hitp,
* cpt.Ljb-code--of-Hitp,
* cpt.Ljb-doc--of-Hitp,

Hitp-Ljb'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="http://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'Ljb-file,
* cpt.Hitp-file.JS,
* cpt.Hitp-file.Ljb,

Hitp-Ljb'API

Description::
The-Ljb-document has an-API, like any programing-language document, with oHitp the-most-whole-object.

Name::
* cpt.API.Hitp,
* cpt.Hitp'API,
* cpt.Hitp'Ljb-API,

Hitp-API'oHitp

Description::
oHitp is the-most-whole-object of the-Hitp-javascript-document.

Name::
* cpt.Hitp'oHitp,
* cpt.oHitp,

Member::
// 16-5-0.2017-11-09 Object.getOwnPropertyNames(oHitp).sort().join(', ')
[bEdge, bFirefox, bSite, fContainersInsert, fObjvalRKey, fTocTriCreate, fTocTriHighlightNode, nCfgPageinfoWidth, oEltClicked, oTreeUl, sCfgHomeLocal, sQrAClk, sQrAClkLast, sVersion]
// Object.getOwnPropertyNames(oHitp.__proto__).sort().join(', ')
[__defineGetter__, __defineSetter__, __lookupGetter__, __lookupSetter__, __proto__, constructor, hasOwnProperty, isPrototypeOf, propertyIsEnumerable, toLocaleString, toString, valueOf]

Hitp-API'oHitp.fContainersInsert

Description::
Creates new containers and inserts them in the-body-element:
- Top-cnr for title and menus.
- Main-cnr for page-info and page-content.
- Width-cnr for managing the-width of page-info.
- Site-cnr for containing the-site-strucute.
- Preview-cnr to display link-previews.

Name::
* cpt.oHitp.fContainersInsert,

Hitp-API'oHitp.fTocTriCreate

Description::
Returns a string html-ul-element that holds the-toc-tree with the-headings of the-page.
<ul id="idTocTri" class="clsTreeUl">
 <li><a class="clsPreview" href="#idHeader">SynAgonism</a>
   <ul>
     <li><a href="#heading">heading</a><li>
     <li><a href="#heading">heading</a><li>
   </ul>
 <li>
</ul>

Name::
* cpt.oHitp.fTocTriCreate,

Hitp-API'oHitp.oTreeUl

Description::
Makes collapsible-trees, unordered-lists with clsTreeUl.

Name::
* cpt.oHitp.oTreeUl,

Hitp-Ljb'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="http://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-tree,

Hitp-Ljb'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-Ljb'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-info,
* cpt.Hitp-info-tree,

Hitp-doc'Meta-info

Description::
A-hitp-webpage contains and extra info other than a-doc.
Most of this info is-stored in the-meta-title-content-tree.

Name::
* cpt.Hitp'meta-info,
* cpt.Hitp-doc'meta-info,

Hitp-meta'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,

Hitp-meta'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,

Hitp-doc'Writing-style

Name::
* cpt.Hitp'writing-style,

Description::
Today, our information has MANY interpretations/meanings (= polysemous).
Hitp-pages can-reduce it, by accepting the-following writing-style.

Names:
We use the-name-notation-of-this-site.
No spaces inside names.

Definition-links:
The-names of the-sentences are-connected with preview-links with their definitions.

Sentences:
Every sentence begins in a new line, which improves readability.

Time:
{1959} denotes time.

Hitp-doc'Index

Description::
Html5.id.toc.preview-pages improve the-functionality of the-indexes of documents because we have the-capability to refer|link, from the-index, to any part of the-text (because we use IDs) and preview these parts.

Name::
* cpt.Hitp'index,
* cpt.Hitp-doc'index,
* cpt.Hitp-index,

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.

License-of-Hitp

Description::
This webpage's work is FREE under the-creative-commons Attribution-3.0-Unported-(CC-BY-3.0)-license.
The-computer-code is under the-MIT-license, you can-find it on GitHub.

Name::
* cpt.Hitp'license,

Problem-of-Hitp

Name::
* cpt.Hitp'issue,
* cpt.Hitp'problem,

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.

GENERIC-of-Hitp

Name::
* cpt.Hitp'Generic,

Generic-chain::
* webpage-language,
* computer-language,
* mapping-method,
* method,
* ModelConceptStructured,
* info,
* model,
* entity,

Hitp.SPECIFIC

Name::
* cpt.Hitp-example,
* cpt.Hitp.example,
* cpt.Hitp.specific,

SPECIFIC::
This site presents many examples with our proposal.
Actually I'm writing the-site with this proposal.
Reading the-code of these examples and seeing its behavior, is the best way to understand what really we are-proposing.
* Hitp.eBook,
* Hitp.Law,
* Hitp.Standard,
* Hitp.Example empty-page to edit on GitHub-project-page,
* Hitp.Structured-concept,

Hitp.EVOLUTING

Name::
* cpt.Hitp'evolution,
* cpt.Hitp-evolution,
* cpt.Hitp.evolution,

Hitp.17.open:
- Arrow-keys on search. {2017-11-10}
- No type-ahead. {2017-10-17}
- Underline hovering links. {2017-10-17}

Hitp.16.2017-06-05.Searching:
- Structured-concept-searching: with this operation it is-demonstrated THE-POWER of structured-concepts.
- 'mouseover' event, shows its position on ToC. {2017-05-30}

Hitp.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}

Hitp.14.2016-06-09.Title-Content-Tre:
Recursive-definition of 'title-content-tree'.
Document-unit, div.

Hitp.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}

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

Hitp.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.

Hitp.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.

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

Hitp.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.

Hitp.07.2013-11-06.Tabs:
The page-structure is set under a tab.

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

Hitp.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.

Hitp.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.

Hitp.03.2013-04-14.Preview:
Html5.ID.TOC.PREVIEW: Another feature that facilitates reading-productivity.

Hitp.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'.

Hitp.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.

Versioning-of-Hitp

Description::
After some years using my versioning-format, now I-am-using a modified Semantic-Versioning-format.
Name.Major-Minor-Patch.YYYY-MM-DD
Major = Incompatible, with changes in previous features.
Minor = Compatible with added features.
Patch = Compatible with only fixes.
Again with no definitions, so there-is some subjectivity what major, minor, patch is.
[HmnSgm.2017-09-24]
===
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,

Todo-of-Hitp

Name::
* cpt.Hitp'todo,

Todo::
* Make a-wysiwyg-desktop--editor for Hitp. {2017-09-24}

Todo.DONE

Todo::
* Arrow down|up events on mcs-searching. {2017-10-19}
* Done. {2017-11-10}

Todo::
* Underline links when hovering. {2017-10-12}
* Done. {2017-10-17}

Todo::
* Make it mobile friendly. {2016.08.08}
* Done. {hitp.15.2016-10-27}

Meta-Info

This page was visited times since {2013-05-30}

Page-path: synagonism.net / hitp-webpage-dialect

Contact:
• author: Kaseluris.Nikos.1959.
• email:
 
• twitter: @synagonism.

Webpage-versions:
• version.dynamic: index.html.
• version.17-0-0.2017-11-27.last (16-39-1): FilMcsHitp.17-0-0.2017-11-27.html (dirTechInf)
• version.16.2016-06-09.title-content-tree (15-18): /hitp/index.16.2016-06-09.html.
• version.15.2016-01-25.content: /hitp/index.15.201-01-25.html.
• version.14.previous: /hitp/index.2013.08.23.14.html (site-structure)
• version.13.previous: /hitp/index.2013.08.20.13.html (name webpage)
• version.12.previous: /hitp/index.2013.06.29.12.html (new-dir-hitp)
• version.11.previous: /hit/index.2013.06.26.html (new-name)
• version.10.previous: /hit/index.2013.06.18.html (no-doc.ready)
• version.9.previous: /hit/index.2013.06.01.html (synagonism.net)
• version.8.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.05.29.html (concept-index)
• version.7.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.05.15.html (math)
• version.6.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.04.14.html (link-preview)
• version.5.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.04.01.html (toc)
• version.4.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.03.31.html (counter)
• version.3.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.03.28.html (¶ right)
• version.2.previous: /gym-eleous.ioa.sch.gr/textid/index.2013.01.16.html
• version.1.published: /gym-eleous.ioa.sch.gr/textid/index.2011.02.17.html
• Created: 2011.02.15

Support

Comments

comments powered by Disqus