zurück zur Mathe/Infoseite

Grundlegende HTML-Befehle

Begriff - HTML-Dokument - Aufbau des Inhalts - Textformatierungen - Listen - Tabellen - Bilder - Verweise - Anhang

Begriff:

HTML (Hypertext Markup Language) ist eine plattformunabhängige textbasierte Sprache, die die Strukturierung von Inhalten in Dokumenten erlaubt. HTML-Steuerbefehle nennt man auch tags (gesprochen wird das "täg"). Optisch erkennt man tags durch die Symbole < und >, die Zeichenketten umschließen. Meist gibt es einen Starttag und einen Endetag. Der Endetag enthält nach dem < einen Schrägstrich / gefolgt von dem gleichen ersten Wort, das im Starttag stand (ohne weitere Optionen). Ein Beipiel wären die tags für den Titel: der Titel wird eingeschlossen von <title> und </title>.

HTML-Dokument:

Ein HTML-Dokument kann mit jedem Editor geschrieben werden. Wichtig ist die Abspeicherung im richtigen Format: als Datei mit der Endung .html. Diese Datei kann nun mit einem Browser angezeigt werden.

Aufbau des Inhalts:

In der ersten Zeile einer HTML-Datei sollte ein wenig Information für den Browser stehen, siehe dazu die erste Zeile des Quelltextes dieser Seite.

Die HTML-Tags <html> und </html> umschließen den HTML-Quellcode. Der Rest der HTML-Seite ist in zwei Teile gegliedert, den Kopf (head) und den Rumpf (body). Umschlossen wird der Kopf durch die Schlüsselwörter <head> und </head> und der Rumpf durch die Schlüsselwörter <body> und </body>.

Innerhalb des Kopfes sollte der Titel der Seite stehen (dieser Titel hat mit dem Dateinamen nichts zu tun) und einige Metainformationen über Autor, Inhalt, Schlüsselwörter, ....

Im body der HTML-Datei steht alles das, das der Browser später mal anzeigt. Hier sollte also der eigentliche Inhalt stehen. Umlaute und Sonderzeichen sollten für HTML-Seiten mit Hilfe spezieller Befehle erzeugt werden, damit diese Zeichen auf jedem Rechner angezeigt werden können.

Damit sieht der Quelltext einer ganz einfachen HTML-Seite z.B. so aus (die Einrückungen dienen nur der besseren Lesbarkeit):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
     <head>
           <title> Da steht der Titel der Seite </title>
     </head>
     <body>
	   Hier steht beliebiger Text.
     </body>
</html>

Textformatierungen:

Der die Datei darstellende Browser entscheidet selber, wann Text umgebrochen wird. Leerzeichen, Zeilenumbrüche und Einrückungen, die im Editor über die Tastatur eingegeben wurden, werden bei der Darstellung vom Browser weitgehend ignoriert. Bei einem im Editor eingegebenen Zeilenumbruch wird ein Leerzeichen eingefügt. Also muss der Verfasser einer Datei spezielle Befehle für gewünschte Formatierungen einfügen.

Absätze: werden durch die tags <p> und </p> geklammert, der Browser wird vor und nach jedem angegebenen Absatz einen Zeilenumbruch und ein wenig Abstand zum weiteren Text einfügen. Im Absatzbefehl ist die Angabe verschiedener Optionen zum Textstil dieses Absatzes möglich (z.B. Farbe, Schriftart, ...).
Zeilenumbruch: Mit dem Befehl <br> erzwingt man an der Stelle, an der dieser Befehl auftritt, einen Zeilenumbruch.
Fettgedruckter Text: Die tags <b> und </b> sorgen dafür, dass der umschlossene Text fett dargestellt wird.
Unterstreichungen: Mit Hilfe der Tags <u> und </u> kann Text unterstrichen werden.
Durchstrichener Text: Textstücke können durch die tags <strike> und </strike> durchgestrichen werden.

Listen:

Es gibt drei verschiedene Arten von Listen: die nummerierte Liste, die unnummerierte Liste und die beschreibende Liste.

Allgemeiner Aufbau einer Liste:

<ul>
     <li>
           Hier steht der Text, der als Unterpunkt kommen soll
     </li>
     <li>
	   Hier steht der Text für den nächsten Unterpunkt.
     </li>
     ....
</ul>

Das obige Beispiel erzeugt eine unnummerierte Liste, deren Listenelemente mit einem Symbol versehen sind (meist ein gefüllter Kreis. Dabei steht ul für unordered list. Um eine nummerierte Liste zu erhalten verwendet man die tags <ol> und </ol> (für ordered list). Der Rest der Struktur bleibt erhalten.

Eine beschreibende Liste ist ein wenig anders aufgebaut:

<dl>
     <dt>Schlüsselwort1</dt>
     <dd>
           Hier steht der Text, der zu diesem Schlüsselwort gehört.
     </dd>
     <dt>Schlüsselwort2</dt>
     <dd>
           Hier steht der Text, der zu diesem Schlüsselwort gehört.
     </dd>
     ....
</dl>

Tabellen:

Tabellen dienen einerseits zur tabellarischen Darstellung von Daten und andererseits auch für Strukturierung von Text. Eine Tabelle besteht aus Zeilen und Spalten. Für Spalten ist die Angabe eines Kopfes möglich. Mit Hilfe der Option border="1"sind die Gitterlinien der Tabelle sichtbar (der Wert, der für border dabei gesetzt wird, bestimmt die Gitterlinienstärke). Diese können durch Angabe von 0 statt 1 in obiger Option unsichtbar gemacht werden.

Folgender Block zeigt den Quelltext einer Tabelle mit zwei Spalten und drei Zeilen. Die Spaltenanzahl sollte in jeder Zeile gleich sein. Wenn in der Tabelle keine Überschriften gewünscht sind, dann wird dieser Teil des Quellcodes einfach weggelassen.

<table border="1">
     <tr>
           <th>Überschrift der ersten Spalte </th>
           <th>Überschrift der zweiten Spalte </th>
     </tr>
     <tr>
           <td>
                Hier steht der Inhalt dieser Zelle (1.Zeile, 1.Spalte)
           </td>
           <td>
                Hier steht der Inhalt dieser Zelle (1.Zeile, 2.Spalte)
           </td>
     </tr>
     <tr>
           <td>
                Hier steht der Inhalt dieser Zelle (2.Zeile, 1.Spalte)
           </td>
           <td>
                Hier steht der Inhalt dieser Zelle (2.Zeile, 2.Spalte)
           </td>
     </tr>
</table >

Und so sieht das dann am Browser aus:

Überschrift der ersten Spalte	Überschrift der zweiten Spalte
Hier steht der Inhalt dieser Zelle (1.Zeile, 1.Spalte)	Hier steht der Inhalt dieser Zelle (1.Zeile, 2.Spalte)
Hier steht der Inhalt dieser Zelle (2.Zeile, 1.Spalte)	Hier steht der Inhalt dieser Zelle (2.Zeile, 2.Spalte)

Die Breite der Zelleninhalte kann man mit der Option width angeben, z.B. < td width="33%">. Der Wert 33% bezieht sich hierbei auf die Fenstergröße.

Bilder:

Was wären Webseiten ohne Bilder? Heutzutage findet man kaum noch Webseiten, die ohne irgendwelche Bilder auskommen (meine ausgenommen). Beim Einbinden von Bildern sollte man sich erst einmal im Klaren darüber sein, dass man nicht beliebige Bilder aus dem Netz nehmen darf. Ein Bild, das man in seine Webseite einbindet, macht man für die ganze Welt öffentlich und dann sollte man auch alle Rechte an diesem Bild besitzen (sonst kann bei Copyright-Verletzungen die geschriebene Homepage ziemlich teuer werden).

Eingebunden wird ein Bild durch folgenden Befehl:

< img src="url" alt="alternativer Text">

Zusätzlich sind noch Optionen zur Größe des Bildes möglich. Dabei steht img für image und src für source. url muss durch eine gültige Internetadresse ersetzt werden. Die Option alt dient dazu, einen sinnvollen Text auszugeben, wenn das Bild aus irgendwelchen Gründen nicht angezeigt werden kann.

Beispiel:

<img src="http://www.bnv-gz.de/~awedel/huehner/flocke1.jpg" alt="Leider kann das Bild nicht angezeigt werden.">
liefert das folgende Foto von Flocke, einer weissen Seidenhenne:

Sollte dieses Bild zu gross sein, kann man die Größe durch die Optionen heigth und width steuern. Hierbei ist allerdings zu beachten, dass die Größenänderung nichts an der Datenmenge ändert. Aus Rücksicht auf die Besucher der entsprechenden Seite sollte man nur Bilder in eine Seite einbinden, die nur wenige KiloByte gross sind.

Verweise:

Alles bisher besprochene lässt sich auf irgendeine Weise in jedem Textverarbeitungsprogramm verwirklichen. Was nun HTLM-Dateien von anderen Textdateien essentiell unterscheidet, ist die Möglichkeit eine Hyperstruktur zwischen mehreren Dateien aufzubauen. Dies wird erreicht, indem eine Datei auf andere Dateien verweisen kann. Dazu wird im Text der HTML-Datei ein Textstück als Verweisbeschreibung (anklickbarer Textteil) durch die tags <a href="url"> und </a> markiert. Der Browser hebt dieses Textteil auf eine voreingestellte Art und Weise hervor und sorgt dafür, dass bei Anklicken des Textteils die in url angegebene Internetadresse besucht wird.

Anhang (nur lesen, wenn ihr obiges verstanden habt):

Und noch ein paar Leckerbissen für die Fans unter euch:
Veränderbarer Text, zur besseren Lesbarkeit ist die Schriftgröße hoch gesetzt:

Das ist ein langer Text

Erklärung für obiges:

Beim Betreten und Verlassen eines angegebenen Bereichs (meist eines Rechtecks) können viele graphische Benutzeroberflächen Ereignisse auslösen. Bei Objekten in Webseiten kann der Browser diese Ereignisse auslösen.

Mittlerweile sind fast alle Bestandteile in Webseiten als eigenständige Objekte ansprechbar. Dazu gehören insbesondere Bilder, Links und Absätze. Bei all diesen Objekten kann in der Vereinbarung mit onMouseover="Anweisung" bzw. onMouseout="Anweisung" eine Reaktion auf die Ereignisse "Betreten des Bereichs mit der Maus" bzw. "Verlassen des Bereichs mit der Maus" festgelegt werden.

Objekte und ihre Attribute

In Webseiten gibt es eine Reihe vordefinierter Objektnamen, d.h. Namen von Objekten, die immer existieren. Die wichtigsten sind:

window: das aktuelle Fenster
document: das aktuell angezeigte Dokument. Dabei kann essich auch um ein Dokument innerhalb eines Frames handeln. Im Zweifelsfall sollte man es mit "window.document" ansprechen.
document.images: Ein Feld, das alle Bildobjekte des Dokuments in der Reihenfolge ihrer Entstehung enthält. Das erste Bild hat den Index 0: document.images[0]. Die Anzahl aller Bilder ist in dem Attribut length von document.images gespeichert. Das letzte Bild erreicht man daher mit document.images[document.images.length-1].
this: das aktuelle Objekt.

Beispiele für gut verwendbare Attribute sind innerHTML für den Text von Absätzen oder Links bzw. src oder border für die Quelle und die Umrandung von Bildern. Ihnen kann über objekt.attribut=Wert ein neuer Wert zugewiesen werden.

Auch Links können verändert werden:
Aufruf

Bilder erlauben einige Veränderungen wie Rahmen und Inhalt:

Methoden in JavaScript

Methoden werden in der Regel im Kopf des Dokuments vereinbart, damit sie sicher bei der ersten Verwendung bekannt sind. Da Webseiten Methodenvereinbarungen in verschiedenen Sprachen erlauben, muss für jede Methodenvereinbarung angegeben werden, in welcher Sprache die Methoden beschrieben sind. Für JavaScript lautet die Angabe der Sprache:
< script language="JavaScript">
Beliebige Vereinbarungen
</script>
Damit ältere Browser den Code nicht anzeigen, sollte er als HTML-Kommentar geklammert werden:

Methoden heißen in JavaScript function. Sie können nicht nur wie bei Karol alle möglichen Algorithmen ausführen, sondern für diese Algorithmen auch Informationen weitergeben wie z.B. bei den typischen Methoden AttributwertSetzen der Klassen der Graphik- oder Textdokumente. Diese Zusatzinformationen nennt man Parameter. Eine Methode, die das Quadrat einer als Information übergebenen Zahl ausrechnet, sieht so aus (siehe Quelltext).
Aufruf von Methoden:
Botschaften zum Aufruf von Methoden können durch alle bisher bekannten Ereignisse ausgelöst werden. Die einfachste Möglichkeit ist der Aufruf über Links: Quadrat von 5 Nun berechnet dieser Link aber immer das Quadrat von 5. Das ist nicht sehr befriedigend. Wir wollen angeben können, von welcher Zahl wir das Quadrat berechnen wollen. Dazu verwenden wir ein Eingabefeld für die Zahl, deren Quadrat wir berechnen wollen, das sogenannte Formular (Textrahmen, in die an vorgeschriebene Stellen Werte eingetragen werden müssen). Formulare werden durch die Tags <form> ... </form> begrenzt. z.B. (siehe Quelltext):
Wichtig ist, dass das Formular und das Eingabeobjekt einen bekannten Namen haben. Nur so kann der Wert des Eingabefeldes als Parameter an die Methode Quadrat weitergegeben werden.

Letzte Änderung: 21.10.2009, Autor: A. Wedel