ABC Hauptseite → Aufgaben und Anregungen → Erstellen von Internetseiten mit abc2svg

Erstellen von Internetseiten mit abc2svg

Mit Hilfe des Programms abc2svg können Internetseiten erstellt werden, die Noten und Musik enthalten.

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:
Kenntnisse in html, css und der ABC-Musiknotation

ACHTUNG AUF URHEBERRECHT!
Urheberrechtlich geschützte Musikstücke dürfen nicht veröffentlicht werden!!!


HTML-Grundgerüst

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

<script src="http://moinejf.free.fr/js/abcweb-1.js"></script>
<script src="http://moinejf.free.fr/js/snd-1.js"></script>
<script src="http://moinejf.free.fr/js/follow-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>

Beispiele mit je 1 Musikstück

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!
Honest John Hier werden nicht die Scripts von der Original-Seite,
sondern lokale Scripts verwendet.
Diese müssen natürlich im richtigen Ordner vorhanden sein.
(siehe Quelltext)

Beispiele mit mehreren Musikstücken

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.
nach oben