Mini-HTML-Einführung
Download als PDF — 12. September 2003 | Download LaTeX-Quellcode
Keine Panik
HTML ist nicht schwer. An einem Tag kann man soviel HTML lernen, um seine erste Homepage zu erstellen. Eine Homepage, oder auch Website, sind mehrere HTML-Dateien, die auf einem Webserver gespeichert sind, und die über das Internet aufgerufen werden können.
Zum Beispiel:
http://www.google.de/
http://www.imhorst.com/
Meine erste Homepage
HTML bedeutet Hypertext Markup Language und ist eine Seitenbeschreibungssprache. Verschiedene Formatierungsanweisungen sagen dem Browser, wie er die Seite anzeigen soll.
Dazu ein kleines Beispiel:
<html>
<head>
<title>HTML-Seminar</title>
</head>
<body>
<center>
<p>Meine erste <b>Homepage</b></p>
</center>
</body>
</html>
Speichert die Seite unter index.html ab, und ruft sie mit einem Browser auf und ihr seht:
Neben Formatierungsanweisungen wie <center> für zentriert und <p> für Paragraph (Absatz) besteht eine HTML-Seite im wesentlichen aus diesem Grundgerüst:
| <html> | Beginn der HTML-Datei. |
| <head> | Beginn des Kopfteils, in dem bspw. der Titel der Seite steht. |
| </head> | Ende des Kopfteils. |
| <body> | Hier steht der Inhalt der Seite, der vom Browser angezeigt wird. |
| </body> | Der End-Tag von <body>. |
| </html> | Ende der HTML-Seite. |
Ob der Text fett oder kursiv im Browser angezeigt wird, hängt von dem Attribut ab,
das wir ihm geben. In HTML heißen solche Elemte von Textattributen “Tags”. Damit Tags von anderem Text auf der HTML-Seite unterschieden werden kann, wird er in spitze Klammern gesetzt, also <html>. Damit der Browser, indem wir die Seite betrachten, weiß, wann das Textattribut zu Ende ist, gibt es einen End-Tag: </html> zeigt zum Beispiel das Ende der Seite an. Oder <b>Homepage</b> zeigt an, dass nur das Wort Homepage fett sein soll.
Mehr als dieses Grundgerüst braucht man von HTML gar nicht wissen. Alles andere sind Detail-Fragen: Wie setze ich einen Link zu einer anderen Website? Wie zeige ich Grafiken an? Das LayOut soll schöner sein!
Um ein paar dieser Detail-Fragen zu klären, stellen wir gleich unsere erste Homepage ins Internet. Vorher sollte man allerdings sein Werkzeug beisammen haben, das man für seine erste Homepage braucht.
- Webspace
- zum üben mieten wir uns bei einem entsprechenden Provider. Zum Testen am besten gratis wie bei http://www.freenet.de/dienste/homepage/ oder http://www.8ung.at.
- Ein Editor
- ist zum Beispiel Notepad. Für den Anfang würde er sogar reichen. Oder man entscheidet sich für einen professionellen HTML-Editor wie Phase 5 (http://www.qhaut.de/).
- Mit einem FTP-Client
- werden die HTML-Dateien vom heimischen Rechner auf den Webserver im Internet geladen. Bei den meisten Betriebssystemen bieten sich die kleinen FTP-Programme in der Kommandozeile an. Ist man mit dem Internet verbunden, reicht der Befehl ftp domain.com aus, um sich mit einem anderen Rechner zu verbinden. Danach wird man in der Regel nach Benutzername und Passwort gefragt. Mit put datei.html lädt man die entsprechende Datei aus dem Ordner, in dem man sich auf seinem Rechner gerade befindet, auf den fremden Rechner. Mit get datei.html lädt man eine Datei herunter. Der Befehl dir zeigt den Verzeichnisbaum an. [1] Wer lieber eine grafische Oberfläche haben möchte, kann in seinem Dateibetrachter Windows-Explorer (oder Konqueror, oder Nautilus) die Adresse des FTP-Servers eingeben ftp://domain.com und seinen Webspace einfach wie einen weiteren Ordner auf seiner Festplatte behandeln, in dem man Dateien hinein und hinaus kopiert.
- Ein Webbrowser
- ist bei jedem Betriebssystem dabei. KDE hat den Konqueror, Windows hat den Internet Explorer, MacOS den Safari. Interessante Alternativen sind aber auch Opera (http://www.opera.com/) oder Mozilla (http://www.mozilla.org/), da es sie für fast jedes Betriebssystem gibt, also für Gnu/Linux, Windows undMacOS.
Wysiwyg
Eine Homepage in HTML zu schreiben ist eine total langweilige Sache. Deswegen gibt es wohl eine Menge an Editoren, die das Schreiben einer HTML-Datei erleichtern sollen. Zum einen gibt es spezielle HTML-Editoren, mit Syntax-Highlighting (die Tags werden farbig dargestellt) und Fehlersuche, zum anderen gibt es “What you see is what you get”-Editoren (Wysiwyg-Editoren). Wie in Word kann man mit solchen Editoren seine Homepage gestalten, ohne dass man sich mit den HTML-Tags herumärgern muss. Den Text bequem markiern und fetten, anstatt mühselig <b>fetter Text</b> einzugeben. Es liegt sehr nahe, so einen Editor zu verwenden, anstatt lange zu tippen. Die Bequemlichkeit hat aber leider auch entscheidende Nachteile: HTML ist keine Textverarbeitung, sondern eine Seitenbeschreibungssprache für Browser. So wie der Wysiwyg-Editor die Seite anzeigt, werden viele andere Browser die Seite höchstwahrscheinlich nicht interpretieren. Eine Seite, die im Internet Explorer 6 schön aussieht, kann in der Version 5 Katastrophal aussehen, und Netscape kann sie vielleicht gar nicht anzeigen. Wobei wir auch beim schwierigsten Teil des HTML-Codierens sind: Jeder Browser interpretiert eine Internetseite anders. Das kann zu einigem Ärger und Frust führen, wenn nichteinmal die verschiedenen Internet Explorer eine Seite einheitlich anzeigen.
Ein weiterer Nachteil ist, dass man früher oder später sowieso in den Quellcode einer Seite muss, um die eine oder andere Änderung vorzunehmen, die ein Wysiwyg-Editor nicht vornehmen kann, z.B ein Webformular einbinden. In dem chaotischem HTML-Quellcode, den Wysiwyg-Editoren produzieren, kann sich dann keiner mehr zurecht finden.
HTML-Quellcode zu kennen hat auch einen unschlagbaren Vorteil: Immer wenn ihr eine Seite im Internet seht, die euch gefällt, und ihr euch fragt, wie hat der oder die das gemacht, dann könnt ihr euch den Quellcode der Seite anschauen, ihn verstehen und es nach- und besser machen.
2 Jetzt geht’s los
HTML
HTML codieren lernt man nur, wenn man viel übt. Deswegen wollen wir jetzt eine Seite erstellen, die eine Seite ähnliche der Mini-Einführung online bringt. Oben links auf der Seite sollen ein paar Bilder sein, daneben rechts der Titel der Seite. Links auf der Seite ein Menü und ein einführender Text in die Homepage soll in die Mitte. Angeboten werden soll dieser Text als HTML und als PDF zum download. Fangen wir an, ein Grundgerüst haben wir ja bereits. Hinzu kommt jetzt eine Überschrift mit dem <h1>-Tag:
<html>
<head>
<title>Mini-HTML-Einführung</title>
</head>
<body>
<h1>Mini-HTML-Einführung</h1>
Meine Mini-HTML-Einführung ist eine
kleine Einführung in HTML, um an einem Tag
eine Homepage online zu bringen, die dazu
noch nett aussieht. Es gibt sie einmal als
HTML-Datei und als PDF zum downloaden.
</body>
</html>
Speichert man die HTML-Datei als index.html ab, hat man schon ein erstes schönes Ergebnis. Eine Überschrift und einen kleinen Text. Selbstverständlich kann man mit diesem HTML-Code-Schnippsel schon herumspielen und ein paar Sachen ausprobieren. Was passiert, z.B., wenn man <h1> durch <h2> ersetzt? In HTML gibt es sechs verschiedene Überschriften vordefiniert, von h1-h6.
Links
Als nächstes wenden wir uns den Links zu. Ich möchte, dass von der Startseite ein Link auf eine weitere Datei seite2.html verweist, und ein anderer auf eine Linkliste führen. Darunter sollen meine E-Mail-Adresse und das Datum stehen, wann die Homepage entstanden ist:
<html>
<head>
<title>Mini-HTML-Einführung</title>
</head>
<body>
<h1>Mini-HTML-Einführung</h1>
<a href="seite2.html">2. Seite</a><br />
<a href="links.html">Links</a>
<!-- Hier können noch weitere links eingefügt werden -->
<br /><br /><br /><br /><br />
<hr />
Meine Mini-HTML-Einführung ist eine
kleine Einführung in HTML, um an einem Tag
eine Homepage online zu bringen, die dazu
noch nett aussieht. Es gibt sie einmal als
HTML-Datei und als PDF zum downloaden.
<!-- Oder man schreibt hier was ganz anderes -->
<br /><br /><br /><br />
</body>
</html>
Nach der Überschrift kommen die drei Links, eingebettet in die Anchor-Tags. Das wichtige Attribut ist hierbei href was für Hypertext Reference steht, also eine Referenz, die auf ein Ziel im Hypertext verweist. In unserem Fall ist das seite2.html etc. Nach der geschlossenen Klammer des ersten Anker-Tags kommt der Text, der auch auf der Homepage als Link erscheint, also 2. Seite. Dann wird der Anker-Tag geschlossen.
Unter den Links erscheint jetzt eine Linie, die das Element <hr /> liefert, was soviel wie horizontal ruler bedeutet. Zum HR-Tag gab es ursprünglich keinen abschließenden Tag. Jeder Browser versteht den HR-Tag auch ohne den abschließenden slash. Da HTML aber immer mehr der Vergangenheit angehört und langsam durch XHTML ersetzt wird, welches wiederum von XML ersetzt werden wird, hat man sich auf diese inhaltsleere Kennzeichnung von alleinstehenden HTML-Tags geeinigt. Wer konform zu XHTML programmieren will, sollte diese Kennzeichnung benutzen. Das gleiche gilt für <br/>
Der BR-Tag ist ein Zeilenumbruch. Egal, wieviele Zeilenumbrüche du mit der Returntaste in deinem HTML-Dokument machst, kein Browser wird sie erkennen. Sie erkennen nur <br/> als Zeilenumbruch. Nach Tags wie <h1> oder <p> werden allerdings automatisch Zeilenumbrüche gemacht.
Der Ausdruck © ist eine Zeichenreferenz für das Copyright-Symbol (©). Der Anker-Tag erscheint hier mit der Referenz “mailto:”. Klickt nun jemand auf den Link-Text, öffnet sich sein E-Mail-Programm, und er kann mir eine Mail schreiben.
Wenn ihr wollt, dass die verlinkte Seite in einem neuen Browserfenster geöffnet wird, dann benutzt für den Anker-Tag target=”\_blank” als Attribut vor href. Mit einem weiteren Attribut davor, z.B. title=”Dies ist ein Link.”, könnt ihr dem Link auch einen Titel geben.
Grafiken
Als nächstes binden wir Grafiken in unser HTML-Dokument ein. Dafür verwenden wir das IMG-Tag:
<html>
<head>
<title>Mini-HTML-Einführung</title>
</head>
<body>
<img src="images/tastatur.gif" alt="Bild" />
<img src="images/maus.jpg" alt="Bild" />
<h1>Mini-HTML-Einführung</h1>
<a href="seite2.html">2. Seite</a><br />
<a href="links.html">Links</a>
<!-- Hier können noch weitere links eingefügt werden -->
<br /><br /><br /><br /><br />
<hr />
Meine Mini-HTML-Einführung ist eine
kleine Einführung in HTML, um an einem Tag
eine Homepage online zu bringen, die dazu
noch nett aussieht. Es gibt sie einmal als
HTML-Datei und als PDF zum downloaden.
<!-- Oder man schreibt hier was ganz anderes -->
<br /><br /><br /><br />
</body>
</html>
Die Bilder tastatur.gif und maus.jpg, die ich in mein Dokument einbinden möchte, liegen im Unterordner “images” auf meinem Webspace, um ein bisschen Ordnung zu halten. Eingebunden werden sie mit dem IMG-Tag, ein standalone Tag, wofür es kein End-Tag gibt. Das Attribut “src” muss beim IMG-Tag unbedingt mit angegeben werden, da es auf die Quelle des Bildes verweist (nämlich im Ordner “images”). Das zweite Attribut, das immer angegeben werden muss, ist “alt”, dem man einen alternativen Text mitgibt, für den Fall, dass die Grafik nicht angezeigt werden kann.
Wenn ihr eine Grafik als Link zu einer anderen Seite einsetzen wollt, dann könnt ihr durch das Attribut border=”0″ im IMG-Tag den unschönen Rand vermeiden, der anzeigt, dass die Grafik ein Link ist.
Cascading Stylesheets
Soweit ist meine Startseite fast fertig. Fehlt nur noch das LayOut. Früher wurden Websites durch vordefinierte Tags gestaltet. Seitdem es Cascading Stylesheets (CSS) gibt, haben sich die Möglichkeiten, seiner Homepage ein schönes LayOut zu verpassen, vervielfacht. Jetzt ist es auch möglich, Formatvorlagen für Schriften einzusetzen, wie man es von Office-Programmen her gewöhnt ist. Eine Überschrift kann jetzt in 16 Punkt Schriftgröße gesetzt werden und nicht nur mit <h6> und dem Tag <big>. Mit CSS werden der Inhalt und das Aussehen eines HTML-Projekts getrennt, was eine große Arbeitserleichterung ist. Das gesamte LayOut mehrerer Seiten kann vollständig durch eine Datei gesteuert werden.
Um CSS in die Homepage einzubinden, müssen wir die HTML-Datei um einen Befehl erweitern:
<html> <head> <title>Mini-HTML-Einführung</title> <link rel="stylesheet" href="styles.css" type="text/css" /> </head> <body> [...] </html>
Über den LINK-Tag wird die Datei styles.css in die HTML-Datei eingebunden, d.h. sie werden miteinander verlinkt. LINK hat drei Attribute: REL, was für Relation steht, und den Wert stylesheet bekommen muss und das Attribut TYPE, mit dem Wert text/css. href gib die Quelle der Stylesheetdatei styles.css an. Das funktioniert in etwa wie das Einbinden von Grafiken. Für styles.css brauchen wir nun eine neue Datei, in der wir folgendes schreiben:
body {
margin:0px 0px 20px 0px;
font-family:sans-serif;
background:#FFF;
background-image:url(images/bgr.png)
}
Hier wird <body> definiert, wieviel Abstand <body> vom oberen (hier 0 Pixel), rechten (0 Pixel), unteren (20 Pixel) oder linken Rand (0 Pixel) haben soll. Die Seite speichern wir dann in den selben Ordner wie index.html.
Die Schriftsätze, die verwendet werden, sind Verdana, Helvetica oder Arial, je nachdem, was der Browser unterstützt. Hat er keine dieser Schriftsätze, dann soll er seine serifenlose Standardschrift verwenden. Die Hintergrundfarbe unserer HTML-Seiten, ist weiß, was wir Hexadezimal ausdrücken müssen in #FFF. Jedes bessere Malprogramm hat eine Farbtabelle, in der man Farben in ihre Hexadezimalwerte umrechnen kann.
Als nächstes möchte ich, dass die Linie nur für Browser sichtbar ist, die kein CSS interpretieren können. Dazu füge ich in styles.css folgendes ein:
hr{
display : none;
}
Schaue ich mir jetzt das Dokument mit einem CSS-fähigen Browser an, was eigentlich alle neueren Browser sind, ist die Linie auf wundersame Weise verschwunden.
Die Überschrift soll weiter in die Mitte gerückt werden? Kein Problem:
h1 {
margin-top:0px;
margin-left:260px;
font-size:34pt;
}
Jetzt ist aber jede Überschrift der ersten Ordnung in dieser Position. Wenn ich weitere <h1>-Tags in meinem HTML-Dokument verwenden will, aber nur diese bestimmte Überschrift an der bestimmten Stelle des Dokuments stehen soll, muss ich einen eigenen Bereich für diese Überschrift definieren. Z.B. Ueberschrift:
#Ueberschrift {
margin-top:0px;
margin-left:260px;
font-size:34pt;
}
Die HTML-Tags <body>, <h1> und <hr> können mittels CSS von einem Browser sofort anders interpretiert werden. Aber was für ein Tag soll #Ueberschrift sein? Überschrift ist ein selbstdefinierter Bereich, den wir gleich in der HTML-Datei mit einem <div>-Tag eingrenzen werden. Daher muss er in der CSS-Datei mit einer Raute (#) beginnen.
<div id="Ueberschrift"> <h1>Mini-HTML-Einführung</h1> </div>
Alles was im <div>-Bereich ist, wird jetzt um 260 Pixel nach rechts verschoben und hat 5 Pixel Innenabstand zum nächsten Bereich. Ich habe einen Abstand von 0 Pixeln zum oberen, nächsten Element. Um die beiden Elemente nebeneinander zu rücken, kann man den Seitenabstand in CSS auch negativ formulieren. Wenn ich meine Überschrift weiter nach oben rücken möchte, gebe ich statt 0 Pixel einfach -40 Pixel ein. Nicht schön, aber es erfüllt seinen Zweck.
h1 {
padding:5px;
margin-top:-40px;
margin-left:260px;
}
Genauso wie die Überschrift, möchte ich als nächstes den Haupttext möglichst mittig auf die Seite platzieren und die Links links daneben setzen. Das mache indem ich die CSS-IDs <#inhalt> und <#links> definiere, und den entsprechenden Bereich in meiner HTML-Datei eingrenze. Die einzelnen Links möchte ich in einer kleineren Schrift haben und weiter auseinander. Dazu trage ich in die styles.css folgendes ein:
#inhalt {
margin-right:20px;
margin-left:260px;
margin-bottom:20px;
margin-top:20px;
width:600px;
}
#links {
position:absolute;
margin-top:50px;
margin-left:10px;
width:150px;
font-size:12pt;
font-weight:bold;
}
.link{
font-size:small;
font-weight:bold;
padding:5px;
}
Der Unterschied zwischen der ID #links und der Klasse .link besteht darin, dass man in einer HTML-Datei Klassen häufiger benutzen darf. IDs dürfen nur einmal angegeben werden. Da ich mehrere Links habe, die ich alle einzeln definieren will, benutze ich hier eine Klasse, da ich nicht für jeden Link eine andere ID definieren will. Im Gegensatz zur Klasse werden IDs aber mit Priorität bearbeitet. D.h., wenn mal ein Format mit einer Klasse nicht funktioniert, am besten mit einer ID versuchen.
Die Positionierung von #links ist absolut zu #inhalt gesetzt, damit die beiden Blöcke im HTML-Dokument direkt nebeneinander stehen. Die Links in der Klasse .link möchte ich klein und fett haben, und sie sollen 5 Pixel auseinander stehen.
In das Hauptdokument kommt ein div-Tag um die Links mit dem Attribut id=”links” und eines um den Hauptteil der Seite mit id=”inhalt”. Die Klasse .link umschließt mit einem DIV-Tag einzelne Links. Die vollständige HTML-Datei sieht jetzt so aus:
<html>
<head>
<title>Mini-HTML-Einführung</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
<img src="images/tastatur.gif" alt="Bild" />
<img src="images/maus.jpg" alt="Bild" />
<h1>Mini-HTML-Einführung</h1>
<!-- Links -->
<div id="links">
<div class="link">
<a href="seite2.html">2. Seite</a><br />
</div>
<div class="link">
<a href="links.html">Links</a>
<!-- Hier können noch weitere links eingefügt werden -->
</div>
<br /><br /><br /><br /><br />
<div class="link">
</div>
</div>
<hr />
<!-- Inhalt -->
<div id="inhalt">
Meine Mini-HTML-Einführung ist eine
kleine Einführung in HTML, um an einem Tag
eine Homepage online zu bringen, die dazu
noch nett aussieht. Es gibt sie einmal als
HTML-Datei und als PDF zum downloaden.
<!-- Oder man schreibt hier was ganz anderes -->
</div>
<br /><br /><br /><br />
</body>
</html>
Wie ihr seht, benutze ich die Klasse .link dreimal. Als ID hätte ich sie nur einmal gebrauchen dürfen.
Fehlt zum Schluss eigentlich nur noch, dass die Links ein bisschen schöner gestaltet werden. Dazu nehmen wir in styles.css folgendes noch auf:
A {color: #9F9F9F; text-decoration: none;}
A:link {color: #8C8C8C; text-decoration: none;}
A:visited {color: #8C8C8C; text-decoration: none;}
A:active {color: #999999;}
A:hover {color: #BBBBBB;}
Ich weiß, dass ist alles ein bisschen grau, doch es gibt ja noch andere Farben, die ihr verwenden könnt.
3 Das war’s
Meta
Bleiben zum Schluss noch ein paar Feinheiten, die im Header der HTML-Datei vorgenommen werden können, damit eure Homepage besser von Suchmaschinen gefunden und richtig indiziert wird. Zu den Elementen des Headers, wie <title> oder <link>, die wir bereits kennengelernt haben, kommt noch der META-Tag. Der META-Tag hat drei Attribute. Zum einen name und http-equiv, mit denen bestimmte Schlüsselwörter definiert werden, denen dann mit content ein Inhalt zugewiesen wird.
Zum Beispiel sagt:
<meta name="author" content="Christian Imhorst" />
wer der Autor des HTML-Dokuments ist. Die kompletten META-Angaben für meine Homepage sehen so aus:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="description" content="Eine Mini-HTML-Einführung. Die Dokumentation zur erstellung einer HTML-Seite." /> <meta name="author" content="Christian Imhorst" /> <meta name="keywords" content="HTML, CSS, Einführung" /> <meta name="date" content="2003-09-13T0:0:0+00:00" /> <meta name="robots" content="index, follow" />
Der erste Meta-Tag, content-type, sagt den Browser, das die Homepage eine westeuropäische Schrift hat. Also Umlaute müssen nicht extra codiert werden, wie ä mit ä, sondern werden korrekt dargestellt. Der zweite META-Tag enthält die Beschreibung, die Suchmaschinen in einer kurzen Zusammenfassung der Seite anzeigen. Der nächste Tag erklärt sich fast von selbst, und die Keywords sind Begriffe, mit denen die Seite über eine Suchmaschine gefunden werden kann. Mit dem META-Tag date wird ein Zeitstempel angegeben, wann die Seite erstellt worden ist. Und robots gibt schließlich an, das Suchroboter die erste und alle folgenden Seiten in ihrem Suchindex indizieren sollen.
Wenn ihr mal von einer Seite zu einer anderen weiterleiten wollt, dann tragt folgenden META-Tag in euer HTML-Dokument ein:
<meta http-equiv="refresh" content="10; url=http://www.seite.html/">
Die Angaben bei url muss man noch entsprechend ergänzen, damit nach 10 Sekunden weitergeleitet wird. Gebt ihr dort eure eigene aktuelle Seite an und nehmt z.B. 600 Sekunden, dann wird eure Seite etwa alle 10 Minuten neu geladen.
Favicon
Die Favicon wurden von Microsoft mit dem Internet Explorer 5.0 eingeführt, damit jede Website durch ein Symbol markiert werden kann. Favicons, eine Kombination aus Favorit und Icon, werden bei vielen Browsern im Lesezeichen-Menü angezeigt. Favicons sollten ganz kleine Bildchen sein, mit 16 x 16 Pixel sind optimal, es funktionieren aber auch größere, und brauchen nur 256 Farben.
Der Eintrag im Header für ein Favicon ist:
<link rel="shortcut icon" href="images/favicon.ico">
Doctype
Doctype ist die letzte HTML-Anweisung die man erstmal kennen muss, will man nur so eine schön schlichte Seite erstellen, wie diese hier. Da es viele verschiedene Definitionen von HTML gibt, jede Version hat ihre eigene, sollte man am Anfang des Dokuments dem Browser mitteilen, welche Version von HTML man nun genau verwendet. Für diese HTML-Datei reicht die Zeile
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" />
völlig aus.
Die Tags dieser HTML-Datei stammen alle aus dem neusten HTML-Standard, der jetzt in XHTML 1.0 definiert ist. Wenn man nur solche Tags benutzt, kann man anstatt Transitional auch Strict schreiben, weil man sich strikt an die Definition von XHTML 1.0 hält. Bei Transitionel kann man auch Tags benutzen, die in Zukunft aus der HTML-Definition herausfallen und nicht mehr verwendet werden sollen.
