II. Die ersten WWW-Dokumente erstellen
Da HTML-Seiten "reine Texte" sind, können HTML-Dokumente mit jedem beliebigen Texteditor auf jedem beliebigen Computer erstellt werden, wenn der Autor der Dokumente die HTML-Programmiersprache beherrscht.Der allgemeine Aufbau eines HTML-Dokuments
Eine besondere 
Software für die Erstellung von HTML-Seiten ist nicht notwendig. Natürlich gibt es auch leistungsstarke Softwarepakete (HTML-Editoren), die eine komfortable Entwicklung von HTML-Dokumenten oder eine Konvertierung ins HTML-Format bieten, so daß die Programmierarbeit dadurch wesentlich erleichtert wird. Doch auch dann werden grundlegende Kenntnisse der HTML-Sprache unabdingbar sein, weil HTML immer weiterentwickelt wird und die Editoren und Konvertierungskits immer der Entwicklung von HTML hinterherhinken werden.
Ganz davon abgesehen sollte man als Entwickler von HTML-Seiten mit den Grundeigenschaften von HTML vertraut sein; selbst mit der benutzerfreundlichsten Editorsoftware können nur dann "gute" HTML-Seiten erstellt werden, wenn der Entwickler mit den Stärken und Schwächen von HTML vertraut ist.
1. Der allgemeine Aufbau eines HTML-Dokumentes
Der Aufbau eines einfachen HTML-Dokumentes (versuch.html) gestaltet sich nun folgendermaßen (rufen sie dazu einen beliebigen Texteditor
auf und schreiben Sie den folgenden Text auf eine leere Seite):
<html>
Beim Abspeichern des HTML-Dokumentes muß darauf geachtet werden, daß das Dokument als ".htm" oder - auf einem
<head>
<title>Versuchsdokument</title>
</head>
<body>
<h1>Dies ist ein Versuchsdokument</h1>
Hier kann der Text frei nach dem Belieben des Autors eingefügt werden.
</body>
</html>
Unix-Rechner - als ".html" Datei abgespeichert wird, damit der Browser das Dateiformat auch richtig erkennt (speichern Sie den obigen Text z. B. unter Versuch versuch.htm auf Ihrer Festplatte oder einer Diskette ab). Bei der Dateiübertragung von einem DOS/Windows-Computer auf einen UNIX-Rechner müssen die Dateien dann auch von ".htm" in ".html" umbenannt werden.
Jeder Anfangs- Tag beginnt mit einem < Zeichen und endet mit einem > Zeichen. Jeder End-Tag beginnt mit einem </ Zeichen und endet mit einem > Zeichen. Jedes HTML-Dokument beginnt mit dem Tag <bhtml/b> und endet mit dem Tag </html>.
Nach dem <html> muß der <head> Tag (der sogenannte Kopf des Dokumentes) stehen, der den Titel des Dokumentes (das, was oben in der Titelleiste des Browsers steht) einschließt (<title>Titel XY</title>). Danach muß der Kopf ("Header") wieder geschlossen werden: </head>. Danach folgt der <body> Tag, der den Textblock (das, was auf der HTML-Seite zu sehen ist einschließt). Ist der Inhalt der Seite dann fertig, muß zunächst ein </body>-Tag folgen und danach zum Beenden des Dokumentes ein <>/html>-Tag.
Man kann also sagen, daß ein HTML-Dokument aus zwei Abschnitten besteht: dem Header, in dem relevante Informationen wie z. B. der Titel enthalten sind. Weiterhin gibt es die Möglichkeit, sogenannte Meta-Informationen im Header unterzubringen. Das sind Angaben über die verwendete HTML-Generation, Indexverweise, Angaben für automatische Suchprogramme usw. Die genaue Beschreibung der Meta-Informationen würde an dieser Stelle jedoch zu weit führen.
Bei den "Tags", den "Markierungen", unterscheidet man zwischen "leeren-Tags" und "Container-Tags": "leere Tags" stehen alleine, während "Container Tags" sich in einen "Anfangs-Tag" und einen "End-Tag" aufteilen, die einen bestimmten Dokumentbereich einrahmen. Typische "Container-Tags" sind zum Beispiel im obigen Beispiel der "Header-Tag" (<h1>Überschrift</h1>) oder der "Title-Tag" (<title>Titel des Dokumentes </title>); während der <p> Tag (Paragraph=Absatz+Leerzeile) oder der <br> Tag (Break = Absatz) leere Tags sind, die keinen Schlußtag benötigen.
Die Groß- oder Kleinschreibung der Tags spielt übrigens keine Rolle, kann aber der Übersichtlichkeit der Programmierung dienen: Schreibt man entweder alle Tags "klein" oder "groß" gewinnt man leicht einen Überblick über die Programmierung des HTML-Dokumentes.
Erzeugt einen Zeilenumbruch. Bei Hintereinanderschaltung von mehreren <br> Tags (<br><br><br>) werden Leerzeilen erzeugt
Erzeugt einen Zeilenumbruch und eine Leerzeile. Eine Hintereinanderschaltung ist bei diesem Tag nicht möglich
Danach können Sie das Dokument in einem Browser betrachten und die eingegebenen Formatierungen verfolgen.
2. Die wichtigsten "Textmarkierungen"
Im folgenden soll ein Überblick über die wichtigsten Tags und Ihre Funktionsweise gegeben werden:
Absätze
<br>
Break
<p>
Paragraph
Trennlinien
<hr>
Erzeugt eine horizontale Trennlinie über die Breite des gesamten Dokumentes
Textformatierungen
<i> </i>
(italics)
Erzeugt eine kursive Textformatierung
<b> </b>
(bold)
Erzeugt eine fette Textformatierung
<tt> </tt>
(tele type)
Erzeugt eine Schreibmaschinenschrift (Courier)
<cite> </cite>
(Zitat)
Markiert eine bestimmte Stelle als Zitat (wird von den meisten Browsern kursiv dargestellt)
<center> </center>
(zentriert)
Der gesamte Text wird zentriert
<blockquote> </blockquote>
Ein Zitat, das links und rechts eingerückt wird
<address> <address>
Adresse. Der Text wird kursiv dargestellt.
<blink> </blink>
Text
<font size=x> </font>
(Font Größe)
Fest definierte oder relative Fontgröße (Wert=1-7)
Angabe absolut ("1") oder relativ ("+2")
Überschriften
<h1> 1</h1>
Erzeugt eine Überschrift 1. Ordnung
<h2> </h2>
Erzeugt eine Überschrift 2. Ordnung
<h3> </h3>
Erzeugt eine Überschrift 3. Ordnung
<h4> </h4>
Erzeugt eine Überschrift 4. Ordnung
<h5> </h5>
Erzeugt eine Überschrift 5. Ordnung
<h6> </h6>
Erzeugt eine Überschrift 6. Ordnung
Listen
<ul> </ul>
Unorderd List = Aufzählung mit Punkten
<ol> </ol>
Orderd List = Numerierung mit Zahlen
<li>
Listing Element = Element in einer Liste
<dl> </dl>
Definition List = Definitionsliste (Glossar)
<dt>
Definition Terminus Zu definierender Terminus
<dd>
Definition
3. Praxisbeispiele zur Textformatierung
Um nun ein wenig die Textformatierungen zu üben, laden Sie das abgespeicherte Dokument uebung1.htm von ihrer Festplatte oder einer Diskette in einen Texteditor und schauen sich zunächst die Formatierungen genau an.
<html>
Nun haben Sie gelernt, einfache Textformatierungen durchzuführen und Listen zu erstellen. Doch das eigentlich Interessante am World Wide Web ist das
<head>
<title>Übungsdokument</title>
</head>
<body>
<h1>Übungsdokument</h1>
Zunächst wollen wir versuchen, einige <b>Textformatierungen</b> zu üben.<p>
<i>Dieser Text soll kursiv sein</i><br>
<b>Dieser Text soll fett sein</b><br>
<center>Dieser Text soll zentriert werden</center>
<strike>Dieser Text soll durchgestrichen sein</strike><br>
<tt>Dieser Text soll in Schreibmaschinenschrift mit einer festen Laufweite der Schrift formatiert werden (also keine Proportionalschrift)</tt><br>
<cite>Dieser Text soll ein Zitat von einem berühmten Autor sein</cite><br>
<blockquote>Dieser Text soll mit dem Blockquote-Tag links und rechts so eingerückt werden, daß der Unterschied zum normalen Text sichtbar wird </blockquote><br>
<blink>Dieser Text soll im HTML-Dokument als blinkender Text erscheinen</blink><br>
<font size=5>Dieser Text soll ein eine fest definierte Font-Größe von 5 haben</font><p>
<h3>Als nächtes sollen einige Aufzählungsvarianten erprobt werden. Zuerst die "ungeordnete Liste" mit Punkten:</h3>
<ul>
<li>Erster Punkt
<li>Zweiter Punkt
<li>Dritter Punkt
<li>Vierter Punkt
</ul>
<p>
<h3>Dann die "geordnete Liste" mit Zahlen:</h3>
<ol>
<li>Punkt
<li>Punkt
<li>Punkt
<li>Punkt
</ol>
<p>
<h3>Nun wollen wir noch eine Definitionsliste erstellen, wobei ein Begriff durch eine Definition erklärt wird: </h3>
<dl>
<dt>Computer
<dd>Ein Computer ist eine Maschine zur elektronischen Datenverarbeitung
<dt>Maus
<dd>Die Maus ist in der Computersprache ein elektronisches Zeigegerät
<dt>Monitor
<dd>Der Monitor eines Computers stellt die Daten visuell dar
</dl>
</body>
</html>
Verweisen auf andere Dokumente: entweder auf Dokumente, die sich auf einem lokalen Rechner befinden oder aber auf anderen Computern, irgendwo auf diesem Globus.
|
Zum Seitenanfang
|