Mehr über SIL (Mehr über SIL), Lektion, Seite 724259
https://www.purl.org/stefan_ram/pub/mehr_sil_javascript (Permalink) ist die kanonische URI dieser Seite.
Stefan Ram
JavaScript-Kurs

Mehr über SIL 

Verschachtelung

Wenn eine Startmarke für ein neues Element in den Inhalt eines schon vorhandenen Elements eingefügt wird, so muß auch die Endmarke  des neuen Elements innerhalb des Inhalts des schon vorhandenen Elements liegen. Anders gesagt: Ein Element kann nur als ganzes in den Inhalt eines anderes Element eingefügt werden. Es ist nicht erlaubt, nur eine Start- oder nur eine Endmarke in den Inhalt eines Element einzufügen.

Übungsaufgabe Zeichnen Sie im Ergebnis der vorigen Übung zusätzlich das Wort „ist“ (und nur  das Wort „ist“) mit »em« aus (so daß das strong-Element nun unter anderem ein em-Element enthält) und lassen Sie das Dokument im Browser anzeigen.

Übungsaufgabe Untersuchen Sie, wie es dargestellt wird, wenn ein em-Element in einem anderen em-Element enthalten ist.

Semantik

Eine Auszeichnung mit dem Elementtyp »em« soll den Inhalt betonen. Diese passive Auszeichnung fällt nicht ins Auge, aber wird beim Lesen erkennbar. Hierfür wird oft Kursivschrift oder geneigte Schrift verwendet.

Eine Auszeichnung mit dem Elementtyp »strong« soll den Inhalt hervorheben. Diese aktive Auszeichnung fällt schon beim Überfliegen einer Seite ins Auge. Hierfür wird oft Fettschrift verwendet.

Eine Auszeichnung mit dem Elementtyp »del« soll den Inhalt als „gelöscht“ kennzeichnen. Der Inhalt bleibt dabei aber noch lesbar. Hierfür wird der Text oft weiterhin angezeigt, aber durchgestrichen dargestellt.

Wenn Dateien nicht angezeigt, sondern beispielsweise vorgelesen werden, so sollten die Auszeichnungen ihrer Bedeutung entsprechend auf natürliche Weise hörbar gemacht werden.

Exkurs Webseiten für Blinde und Behinderte

Blinde können Webseiten nicht sehen, aber sie können sich diese von einem Computerprogramm (“screen reader ”) vorlesen lassen oder Texte mit einem Braille-Gerät erfühlen (was sogar manchen Taubblinden möglich sein könnte).

Vorleseprogramm könnten Auszeichnungen wie »em«, »strong« oder »del« durch Betonung oder auf andere Weise hörbar machen.

Am besten ist es, Blinde und andere Behinderte zu fragen, welche Probleme sie mit einer Webseite vielleicht haben.

Viele Menschen sind beispielsweise etwas farbenblind und können bestimmte Farben auf Webseiten nicht unterscheiden oder Schriften in einer bestimmten Farbe vor einer bestimmten Hintergrundfarbe nicht lesen.

Absätze

Obwohl wir gesehen haben, daß dies nicht unbedingt immer nötig ist, sollte jeder Text, der auf einer Webseite erscheinen soll, sich in einem Blockelement  befinden. Ein Blockelement kann beispielsweise den Elementtyp »p« (von englisch “paragraph ”) haben.

Absätze sind wahrscheinlich der häufigste Elementtyp auf Webseiten. Wenn Sie diesen Text hier in einem Webbrowser lesen befindet er sich wahrscheinlich in einem p-Element!

Main.html
<p>abc</p>
mögliche Anzeige in Web-Browser
abc

Wenn ein Text mehrere Absätze haben soll, so werden entsprechend mehrere p-Elemente hintereinandergesetzt.

Main.html

<p>abc</p>

<p>def</p>

mögliche Anzeige in Web-Browser
abc
def

Zeichenelemente und Blockelemente

Die zuvor vorgestellten Elementtypen »em«, »strong« und »del« sind Typen von Zeichenelementen – nicht von Blockelementen.

Etwas vereinfacht gesagt, werden Zeichenelementen und Text nebeneinander  angezeigt während Blockelemente untereinander  angezeigt werden.

Main.html
<em>abc</em> 
<em>abc</em>
def
mögliche Anzeige in Web-Browser
abc abc def
Main.html
<p>abc</p> 
<p>abc</p>
<p>def</p>
mögliche Anzeige in Web-Browser
abc
abc
def

Etwas vereinfacht gesagt, gilt:

Zeichenelemente dürfen sowohl in Blockelementen als auch in anderen Zeichenelementen enthalten sein, während Blockelemente weder in anderen Blockelementen noch in Zeichenelementen enthalten sein dürfen.

Das folgende SIL-Programm zeigt eine erlaubte  Verschachtelung: Text und zwei em-Zeichenelemente sind in einem p-Blockelement enthalten.

Main.html
<p>
<em>abc</em>
<em>abc</em>
def
</p>
mögliche Anzeige in Web-Browser
abc abc def

Überschriften

Die Blockelementtypen »h1«, »h2«, »h3«, »h4«, »h5« und »h6« können wie »p« verwendet werden. Sie stehen ebenfalls für Absätze, und zwar für Absätze, die Überschriften  darstellen sollen. Eine kleinere Zahl steht für ein höheres Niveau der Überschrift, so kann beispielsweise »h1« eine Kapitelüberschrift  und »h2« eine Unterkapitelüberschrift  darstellen.

Übungsaufgabe Erstellen Sie ein SIL-Programm, das ein Blockelement mit einem der Typen »h1«, »h2«, »h3«, »h4«, »h5« oder »h6« als Typ und einen Absatz mit dem Typ »p« enthält (in dieser Reihenfolge).

Listen

Eine Liste ist ein Blockelement mit dem Typ »ul«.

Diese darf direkt nur Elemente mit dem Typ »li« direkt enthalten, welche jeweils einen Eintrag  der Liste darstellen. Solche li-Elemente dürfen dann ihrerseits Text und Zeichenelemente enthalten.

Übungsaufgabe Erstellen Sie eine Einkaufsliste mit zwei Einträgen. Legen Sie dazu eine SIL-Datei an, die nur ein ul-Element enthält, das zwei li-Elemente enthält.

Klassen

Manchmal möchte man eigene Typen  für Elemente vergeben. Es ist zwar nicht möglich eigene Typen zu vergeben, aber etwas ähnliches kann erreicht werden, indem man Elementen eine Klasse beiordnet.

Eine Folge identifizierter Absätze

<p class=Einleitung>abc</p>

<p class=Haupttext>abc</p>

<p class=Haupttext>abc</p>

<p class=Haupttext id=Anton>abc</p>

<p id=Berta class=Haupttext>abc</p>

In dem Beispiel hat der erste Absatz nun die Klasse „Einleitung“, und die folgenden vier Absätze haben die Klasse „Haupttext“.

Die Schreibweise ist wie bei der Beiordnung einer Kennung, jedoch mit »class« an Stelle von »id«.

Der Absatz erhält dann die Klasse, welche hinter dem Gleichheitszeichen in Anführungszeichen angegeben wurde.

Ein und dieselbe Klasse kann auch an mehrere verschiedene Absätze vergeben werden.

Es ist (wie oben am letzten Absatz zu sehen ist), auch möglich, einem Element sowohl eine Klasse als auch eine Kennung beizuordnen. Die Reihenfolge der beiden Angaben innerhalb einer Startmarke spielt dabei keine Rolle.

Die meisten Browser werden alle Elemente weiterhin anzeigen wie zuvor und die Klassen und Typen bei der Darstellung ignorieren, aber wir werden später sehen, wann die Beiordnung einer Klasse oder einer Kennung nützlich sein kann.

Javascript

JavaScript -Programme dürfen in SIL-Programmen enthalten sein. Dabei wird ein JavaScript -Programm mit dem Typ »script« ausgezeichnet.

Eine Folge identifizierter Absätze
<script>this.Math.PI</script>

Solche script-Elemente werden im Browser normalerweise nicht  angzeigt, aber die in SIL-Dateien enthaltenen JavaScript -Programme werden vom Browser ausgeführt. Da das Ergebnis der Auswertung von »this.Math.PI« hierbei nicht angezeigt wird, kann man die Ausführung des JavaScript -Programms bei der Anzeige der obigen SIL-Datei in einem Browser noch nicht direkt erkennen, aber wir werden später sehen, wie man

Seiteninformationen und Impressum   |   Mitteilungsformular  |   "ram@zedat.fu-berlin.de" (ohne die Anführungszeichen) ist die Netzpostadresse von Stefan Ram.   |   Eine Verbindung zur Stefan-Ram-Startseite befindet sich oben auf dieser Seite hinter dem Text "Stefan Ram".)  |   Der Urheber dieses Textes ist Stefan Ram. Alle Rechte sind vorbehalten. Diese Seite ist eine Veröffentlichung von Stefan Ram. Schlüsselwörter zu dieser Seite/relevant keywords describing this page: Stefan Ram Berlin slrprd slrprd stefanramberlin spellched stefanram724259 stefan_ram:724259 Mehr über SIL Stefan Ram, Berlin, and, or, near, uni, online, slrprd, slrprdqxx, slrprddoc, slrprd724259, slrprddef724259, PbclevtugFgrsnaEnz Erklärung, Beschreibung, Info, Information, Hinweis,

Der Urheber dieses Textes ist Stefan Ram. Alle Rechte sind vorbehalten. Diese Seite ist eine Veröffentlichung von Stefan Ram.
https://www.purl.org/stefan_ram/pub/mehr_sil_javascript