Didaktische Anregungen

Internetseiten sind Texte mit der Endung .html, z.B.: 'VivaLaMusica.html'
Diese Texte können mit einem beliebigen Editor geschrieben werden.
Internetseiten können lokal auf einem Computer oder auf einem Server im Internet gespeichert sein.

Voraussetzung für das Erstellen von Internetseiten mit Noten:
Kenntnisse in html, css und der ABC-Musiknotation

Scripts sind Textdateien, die Programmiercode enhalten. Sie können in Internetseiten direkt enthalten sein oder von einer anderen Internetseite eingebunden werden.

Heutzutage beginnen Internetadressen meist mit https:// (verschlüsselte Übertragung)
die früher verwendete Variante ist http://

Wenn Scripts in Internetseiten eingebunden werden, dürfen https:// und http:// nicht gemischt sein. Wenn die Seite selbst https:// verwendet, muss auch das Script aus einer https:// - Quelle stammen. Ansonsten lehnen die Browser das Script ab (= es wird nicht ausgeführt).

Scripts von abc2svg stellen zur Zeit (2024) ein Problem dar. Sie stehen auf einem http:// - Server und können daher auf diesen Seiten (https://) nicht eingebunden werden.

Auf http:// - Seiten wäre es ganz einfach, stehts die neuesten Scripts von der Originalseite http://moinejf.free.fr einzubinden:

<script src="http://moinejf.free.fr/js/abcweb-1.js"></script>
<script src="http://moinejf.free.fr/js/snd-1.js"></script>

Im unten stehenden Vorschlag einer Internetseite ("HTML-Grundgerüst") werden die Scripts nicht vom Original geladen, sondern von Kopien auf dem Server, auf dem diese Seite läuft.
Nachteil: Updates der Scripts müssen vom Betreiber (in diesem Falle ich) von Zeit zu Zeit neu vom Original heruntergeladen werden.
Vorteil: die Scripts funktionieren!

eingebundenes abc2svg-Script
Für die neueste Version der originalen Script-Zeilen siehe:
http://chiselapp.com/user/moinejf/repository/abc2svg/doc/trunk/README.md
(Abschnitt 1.3)
minimales Stylesheet
wahlweise: mit sichtbarem ABC-Code (<pre> ... </pre>)
Globale ABC-Variable | ABC-Code (hier: <code> ... </code>)
Hier könnten auch andere HTML-Tags statt <code> verwendet werden

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Noten mit abc2svg</title>

<script src="https://kurs.schacherl.info/ABC-Musiknotation/abc2svg/test/abcweb-1.js"></script>
<script src="https://kurs.schacherl.info/ABC-Musiknotation/abc2svg/test/snd-1.js"></script>


<style type="text/css">
svg {display:block}
</style>


</head>
<body>

<code>
%abc-2.2
%%linewarn 0
</code>

<h1>Noten mit abc2svg</h1>

<pre>X:1
T:Viva la musica
C:Michael Praetorius (1571 - 1621)
M:4/4
L:1/8
K:F
c3BA2G F|E2F2E4|
w:Vi-va, vi-va la mu-si-ca!
A3Bc2B A|G2F2G4|
w:Vi-va, vi-va la mu-si-ca!
F2F4B,2|C2D2C4:|
w:Vi-va, vi-va la mu-si-ca!
</pre>

<div style="width:21cm; border-style:solid; border-width:1px">

<code>
<!--Hier den ABC Code einsetzen
bzw. den Code zwischen <pre> ... </pre> wiederholen.
Bei mehreren Musikstücken in getrennten Codeblöcken
vor dem abschließenden </code> eine Zeile frei lassen!-->

</code>

</div>
</body>
</html>

Viva La Musica	Nur Noten
Viva La Musica mit ABC-Code	ABC-Code und Noten
Viva La Musica mit ABC-Code und CSS	ABC-Code und Noten, mit externer CSS-Datei formatiert
Froh zu sein	Manchmal ist es nicht so einfach, ABC-Code richtig darzustellen. Zeichen wie dieses: < haben in HTML eine andere Funktion als in ABC!

Kanons	Eine Datei mit dem ABC-Code ist extra gespeichert und als Link eingebunden. Besonders komfortabel für den Anwender ist der Link zum ABC Web Editor: Der ABC-Code kann kopiert, anschließend im ABC Web Editor bearbeitet und das Notenbild gedruckt werden.
Tonangabe	Für Chorleiter: Vorbereiten der Tonangabe für den Chor als Internetseite Anklicken der Notenzeile (auf Tablet, etc.) spielt die Töne ab.

Honest John

Hier werden nicht die Scripts von der Original-Seite,
sondern lokale Scripts mit relativem Pfad verwendet.
Die Scripts müssen natürlich im richtigen Ordner vorhanden sein.
(siehe Quelltext)

Erstellen von Internetseiten mit abc2svg

Internetseiten

Internetseiten allgemein

Scripts

http und https

HTML-Grundgerüst

Beschreibung und Code

Beispiele

Beispiele mit je 1 Musikstück

Beispiele mit mehreren Musikstücken

Lokale Scripts