Die Übersichtlichkeit der Seite wird durch Javascript erhöht. Ist dies aktiviert, werden die Texte unter den Überschriften durch Anklicken der Überschriften ein- und ausgeblendet.
Unter org-Struktur verstehe ich die Möglichkeit durch Anklicken einer Überschrift die dazugehörigen Inhalte ein- oder auszublenden. Dadurch wird der gesamte Text sehr übersichtlich und man gelangt sehr leicht zu der Stelle, an der das Gesuchte zu finden ist. Deshalb eignet es sich sehr gut dazu, Informationen zu sammeln. Diese Funktionsweise bietet der emacs-org-mode an. Mit diesem habe ich auch dieses Dokument erstellt. Dabei ist die Erstellung des Dokuments sehr einfach. Das Ergebnis eines mit dem emacs-org-mode erstellten Dokuments ist immer eine Klartext-Datei. Diese ist mit dem emacs gut lesbar und erweiterbar. Geht es allerdings darum, die Information online bzw. im Browser auf die gleiche Weise verfügbar zu haben, benötige ich eine html-Datei, die mittels Java-Script eben diese org-Struktur unterstützt.
Das Ein und Ausblenden des Inhalts unter einer Überschrift ist mit bloßem html und css nicht möglich. Um dies zu erreichen muss zusätzlich Java-Script eingebettet werden, dass auf das Anklicken der Überschrift reagiert und die CSS-Eigenschaften so setzt, dass der Inhalt jeweils ein bzw. wieder ausgeblendet wird.
Im Kopf der html-Datei ist dazu zunächst die Java-Script-Datei einzubinden.
<script type="text/javascript" src="org.js"></script>
Die Script-Datei org.js hat dann folgenden Inhalt:
function Sicht(Text)
{
if (document.getElementById(Text).style.display 'none')
{
document.getElementById(Text).style.display='block';
}else
{
document.getElementById(Text).style.display='none';
}
}
function start()
{
var ausblenden = document.getElementsByClassName('ausblenden');
var i = ausblenden.length;
while (i--)
{
ausblenden[i].style.display='none';
}
}
Die Start-Funktion soll am Anfang dafür sorgen, dass alle Elemente der Klasse 'ausblenden' beim Laden der Seite ausgeblendet werden. Damit diese Funktion beim Laden der html-Datei ausgeführt und damit die entsprechenden Inhalte ausgeblendet werden, muss die Funktion dem onload-Ereignis des Bodys übergeben werden:
<body onload="javascript:start();">
Auf deaktiviertes Javascript eingehen
Allerdings kann Java-Script auch vom Nutzer gesperrt sein. Dann sollte der Nutzer einen Hinweis erhalten, welche Funktion die Seite bei aktivierten Java-Script bietet. Dabei kann man ausnutzen, dass bei deaktiviertem Java-Script alle Elemente der Klasse 'ausblenden' sichtbar bleiben, aber mit Java-Script ausgeblendet werden. Damit braucht nur vor dem eigentlichen Inhalt ein Hinweistext ausgegeben werden, der den Vorteil einer Aktivierung von Java-Script auf der Seite erläutert.
<p class="ausblenden"> Die Übersichtlichkeit der Seite wird durch Java-Script erhöht. Ist dies aktiviert, werden die Texte unter den Überschriften durch Anklicken der Überschriften ein- und ausgeblendet. </p>
Inhalte nur bei deaktiviertem Java-Script anzeigen
Außerdem ist es möglich, weitere Inhalte ausschließlich anzuzeigen, wenn Java-Script deaktiviert ist.
Auch ein Inhaltsverzeichnis macht nur Sinn, wenn die Möglichkeit des Ausblendens aufgrund des deaktivierten Java-Scripts nicht gegeben ist, dann aber um so mehr. Also sollte ein Inhaltsverzeichnis eingefügt werden, dass auch ausschließlich angezeigt wird, wenn Java-Script deaktiviert ist:
<div id="content" class="ausblenden">
<ul>
<li> <!-- Überschrift1 -->
<a href="#Überschrift1_a">Überschrift1</a>
</li> <!-- Überschrift1 -->
<li> <!-- Überschrift2 -->
<a href="#Überschrift2_a">Überschrift2</a>
<ul>
<li> <!-- Überschrift2.1 -->
<a href="#Überschrift2.1_a">Überschrift2.1</a>
</li> <!-- Überschrift2.1 -->
<li> <!-- Überschrift2.2 -->
<a href="#Überschrift2.2_a">Überschrift2.2</a>
</li> <!-- Überschrift2.2 -->
<li> <!-- Überschrift2.3 -->
<a href="#Überschrift2.3_a">Überschrift2.3</a>
</li> <!-- Überschrift2.3 -->
</ul>
</li> <!-- Überschrift2 -->
<li> <!-- Überschrift3 -->
<a href="#Überschrift3_a">Überschrift3</a>
<ul>
<li> <!-- Überschrift3.1 -->
<a href="#Überschrift3.1_a">Überschrift3.1</a>
</li> <!-- Überschrift3.1 -->
<li> <!-- Überschrift3.2 -->
<a href="#Überschrift3.2_a">Überschrift3.2</a>
</li> <!-- Überschrift3.2 -->
<li> <!-- Überschrift3.3 -->
<a href="#Überschrift3.3_a">Überschrift3.3</a>
</li> <!-- Überschrift3.3 -->
</ul>
</li> <!-- Überschrift3 -->
<li> <!-- Überschrift4 -->
<a href="#Überschrift4_a">überschrift4</a>
<ul>
<li> <!-- Überschrift4.1 -->
<a href="#Überschrift4.1_a">Überschrift4.1</a>
</li> <!-- Überschrift4.1 -->
<li> <!-- Überschrift4.2 -->
<a href="#Überschrift4.2_a">Überschrift4.2</a>
</li> <!-- Überschrift4.2 -->
<li> <!-- Überschrift4.3 -->
<a href="#Überschrift4.3_a">Überschrift4.3</a>
</li> <!-- Überschrift4.3 -->
<li> <!-- Überschrift4.4 -->
<a href="#Überschrift4.4_a">Überschrift4.4</a>
</li>
</ul>
</li> <!-- Überschrift4 -->
</ul>
</div> <!-- content -->
Um eine einheitliche Formatierung meiner Seite zu ermöglichen habe ich diese in externen CSS-Dateien definiert. Diese müssen ebenfalls eingebungen werden. Ich nutze derzeit zwei Dateien:
a-Elemente über Ihre Klassenzuordnung
<link type="text/css" rel="stylesheet" href="../style.css" /> <link type="text/css" rel="stylesheet" href="../grad.css" />
Die Dateien haben folgenden Inhalt:
style.css
html {
padding: 0;
}
body{/*font-family: Verenda, Geneva, Arial, sans-serif;*/
background-color: silver;
min-width: 40em; /* Mindestbreite verhindert Anzeigefehler in
modernen Browsern */
color: green;
font-size: medium;
margin: 0;
padding: 0;
}
li{color:Blue;}
.Klasse1 { background-color: gray;
color: maroon;}
.serif { font-family: sans-serif; }
.verdana { font-family: Verdana; }
.geneva { font-family: Geneva; }
.arial {font-family: Arial; }
.andale {font-family: Andale Mono;}
.arialBlack {font-family: Arial Black;}
.comicSans {font-family: Comic Sans;}
.courierNew {font-family: Courier New;}
.georgia {font-family: Georgia;}
.impact {font-family: Impact;}
.timesNewRoman {font-family: Times New Roman;}
.trebuchetMS {font-family: Trebuchet MS;}
.gr10 {font-size: 10px;}
.gr11 {font-size: 11px;}
.gr14 {font-size: 14px;}
.gr20 {font-size: 20px;}
.aqua {background-color: Aqua;}
.black {background-color: Black;}
.blue {background-color: Blue;}
.fuchsia { background-color: Fuchsia;}
.gray { background-color: Gray;}
.green {background-color: Green;}
.lime { background-color: Lime;}
.maroon { background-color: Maroon;}
.navy { background-color: Navy;}
.olive {background-color: Olive;}
.orange {background-color: Orange;}
.purple {background-color: Purple;}
.red {background-color: Red;}
.silver {background: Silver;}
.teal {background-color: Teal;}
.white {background-color: White;}
.yellow { background-color: Yellow;}
.dark {color: White;}
h1{ font-size: 170%;}
h2{font-size:130%}
h6{text-decoration: underline;}
a:focus{
/*text-transform: uppercase;*/
font-weight:bold;
color:white;
background-color:green;
}
a:hover {
/*text-transform: uppercase;*/
font-weight:bold;
color:blue;
background-color:yellow;
}
color: Maroon;}
/*#Inhaltsverzeichnis {
border-style: dotted;
border-color: teal;
width: 200;
float: left;}
/*fixiertes Inhaltsverzeichnis*/
/*position: absolute;
/*top: 1.8em; left: 1em;*/
position: fixed;
width: 250px;
border-style: dotted;
border-color: teal;
font-size:14px;
}
color: Maroon;
text-decoration: underline;}
margin-left: 300px;
}
padding: 15px;
}
width: 200px;
list-style-position: outside;
}
pre {
Display: block;
background-color:Teal;
color:black;
font-style: italic;
width:550px;
max-height: 30em;
/*position: absolut; */
overflow: auto;
}
grad.css
.grad1
{
border-bottom: 2px solid black;
font-size: 2em;
font-weight:bold;
color: black;
}
.grad2 {
border-bottom: 2px solid navy;
font-size: 1.8em;
color: navy;
}
.grad3 {
border-bottom: 2px solid blue;
font-size: 1.6em;
font-weight:normal;
color: blue;
}
.grad4 {
border-bottom: 2px solid green;
font-size: 1.4em;
color: green;
}
.grad5 {
border-bottom: 1px solid maroon;
font-size: 1.2em;
color: maroon;
}
.grad6 {
border-bottom: 1px solid purple;
font-size: 1.2em;
color: purple;
}
.grad7 {
border-bottom: 1px dashed yellow;
font-size: 1.2em;
color: yellow;
}
.grad8 {
border-bottom: 1px dashed teal;
font-weight:bold;
color: teal;}
.grad9 {
border-bottom: 1px dotted olive;
font-style:oblique;
color: olive;
}
.grad10 {
border-bottom: 1px dotted aqua;
letter-spacing:0.3em;
color: aqua;
}
.grad1, .grad2, .grad3, .grad4, .grad5, .grad6, .grad7, .grad8,
.grad9, .grad10
{
text-decoration: none;
}
Dann folgt der eigentliche Inhalt. Die einzelnen Überschriften werden mit einem a-Element realisiert. Unter der Überschrift folgt ein div-Container, der der Klasse 'ausblenden' zugeordnet wird und damit als Inhalt der aus den a-Element bestehenden Überschrift durch Anklicken dieser ein und auch wieder ausgebelndet wird. Hinter dem Div-Container wird jeweils ein Zeilenumbruch (<br/>) hinzugefügt.
Dem a-Element wird als Klasse der Grad der Verschachtelungstiefe zugeordnet. Im unteren Beispiel ist es class="grad1". Dadurch ist es möglich der Überschrift je nach Verschachtelungstiefe über die CSS-Datei eine Formatierung entsprechend Ihrer Klasse zu geben. Weiterhin wird der Überschrift mit id=... eine eindeutige ID vergeben und der Link mit href="#ID" genau auf diese ID referenziert. Dem onclick-Ereignis des a-Elements wird dann das Script Sicht zugeordnet und als Parameter die ID des folgenden Div-Containers übergeben.
<a class="grad1"
id="Überschrift1_a"
href="#überschrift1_a"
onclick="javascript:Sicht('Überschrift1');"
>
Überschrift1
</a>
Der Inhalt, der zu der oben erstellten Überschrift gehört, folgt nun in einem Div-Container. Er wird der Klasse 'ausblenden' zugeordnet und erhält eine eindeutige ID, auf die im oncklick-Ereignes des dazugehörigen a-Elementes, also der Überschrift, Bezug genommen wurde. Damit wird alles, was in diesem Container ist durch anklicken der Überschrift aus und eingeblendet.
<div id="Überschrift1" class="ausblenden" >
<!--überschrift1 -->
<p>
Text oder Listen oder andere Inhalte
</p>
</div><!--Überschrift1 -->
<br/>
Innerhalb des Div-Elements können weitere Überschriften und ihr zugehöriger Div-Container folgen. Dies lässt sich beliebig tief verschachteln. Dabei wird einfach der Grad der Überschrift über Ihre Klasse angegeben, also immer 1 höher als die übergeordnete Überschrift. Derzeit habe ich in der CSS-Datei das Format von Überschriften bis zum grad10 definiert. Da es bei tieferen Verschachtelungen schnell sehr kompliziert wird, habe ich ein python3-Programm geschrieben, dass aus einer org-Datei eine html-Datei nach dem hier beschrieben Schema erstellt.
Programm zur Erstellung der html-Datei
Da die Erstellungen der html-Datei gerade bei größeren Dokumentationen recht aufwendig ist, habe ich die Umsetzung durch ein python3-Programm realisiert. Das hat den Vorteil, dass ich nachdem ich Änderungen an der org-Datei vorgenommen habe, schnell eine neue aktuelle html-Datei erzeugen kann, anstatt aufwendig die Änderungen in der html-Datei nachzupflegen. Den Umgang damit möchte ich in der Folge dokumentieren:
Das Programm erstellt aus einer Klartext-Datei, wie sie mit dem emacs-org-mode geschrieben werden kann, eine html-Datei. Die erstellte Datei hat dann die Fähigkeit mit Hilfe von Java-Script den Inhalt durch Anklicken der Überschriften auf und zuzublättern.
Die Quelldatei sollte die Strukturanweisungen des emacs-org-mode enthalten. Kursive Schrift wird allerdings abweichend zwischen drei Backslash gestellt. Eine Dokumentüberschrift kann erfasst werden, indem vor die Erste Überschrift ein normaler, gern auch mit Sternsymbolen fett gemachter, Text steht.
Einstellungen werden direkt in der Datei vorgenommen. Dazu werden der Einstellung Schlüsselworte jeweils gefolgt durch einen Doppelpunkt vorangestellt. Es können durch weitere Zeilen mit dem entsprechenden vorangestellten Key weitere Zeilen oder Dateien an das Programm zum Einbetten übergeben werden. Dies wird auch in der Hilfe zum Programm ausführlich vorgestellt, die man durch einfachen Programmaufruf ohne Übergabe einer zu übersetzenden Datei angezeigt bekommt. Da die genaue Notierung Folgen für die Übersetzung dieser Datei haben würde, werde ich statt Raute ein R schreiben:
Wird nichts angegeben, wird:
Um in den Einstellungen flexibel auf den Einsatz der Datei auf unterschiedlichen Systemen mit entsprechend underschiedlicher Ordnerstruktur reagieren zu können, kann man Variablen benutzen.
Variablen definiert man in der Datei ~/.tohtml.cfg indem man
Variablenname=Variablenwert
in jeweils eine Zeile schreibt.
Eine definierte Variable kann in den Einstellungen genutzt werden, indem man sie zwischen zwei $-Zeichen einbettet, also $Variablenname$. Dies wird dann bei der Übernahme der Einstellungen durch das Script durch den Variablenwert ersetzt. Um auf einem anderem System mit der Org-Datei arbeiten zu können muss dort die verwendete Variable mit den für dieses System geltenden Anpassungen in der Datei ~/tohtml.cfg einmalig definiert werden.
COMMENT HTML-Seite erstellen Einstellungen #+ZIEL_DATEI : $myPage$html-lernen/org-struktur.html #+NAVI_LINK : ../index.html : Home #+NAVI_LINK : ../html-lernen/uebersicht.html : Übersicht #+PFAD_SCRIPT : ../org.js #+PFAD_CSS : ../style.css #+PFAD_CSS : ../grad.css