Hinweis zur Verwendung der Quelltexte: Um einen Quelltext in ein anderes Dokument zu kopieren den Link "Quelltext auswählen" anklicken, anschließend den Inhalt mit STRG+C in die Zwischenablage kopieren, das Zieldokument in einem Editor aufrufen und mit STRG+V den Inhalt einfügen... Andere kurze HTML-Befehle können mit der Maus markiert und auf die gleiche Weise kopiert werden.
HTML-Dateien besitzen die Endung ".htm" oder ".html". Sie werden vom Browser (z.B. Internet Explorer, Netscape Navigator) angezeigt. Vom Browser wird dabei die spezielle Befehlssprache HTML (Hyper Text Markup Language) interpretiert. Konkret werden einzelne Befehle, sogenannte Tags, vom Browser umgesetzt. Diese Tags werden mit "<" und ">" geschrieben.
Das Grundgerüst einer normalen HTML-Datei sieht dabei immer wie folgt aus:
Die meisten Tags haben einen Anfangs- und einen Endbefehl. Der Tag wirkt dann auf alles, was zwischen diesen beiden Befehlen steht, der Endbefehl unterscheidet sich nur durch das Zeichen "/" vom Anfangsbefehl. Der Body-Tag etwa ist dafür verantwortlich, was auf der Seite angezeigt wird. Tags können verschachtelt werden, es gilt aber die Regel "first in, last out".
Das zentrale Element von HTML und damit des Internets sind die Links. Durch Anklicken des Verweistextes einer solchen, sich vom übrigen Text abhebenden Verknüpfung wird eine neue Seite aufgerufen. Der Verweistext lässt sich auch durch Bilder ersetzen. Die zentrale Unterscheidung von Links ist die in absolute und relative Verknüpfungen.
Relative Links sind solche Verknüpfungen, die sich aus der relativen Lage von Ausgangs- und Zieldatei in einer Verzeichnisstruktur ergeben, also z.B. in übergeordneten oder untergeordneten Ordnern.
Relative Links kommen immer dann zum Einsatz, wenn eine Struktur von anzulegenden HTML-Dokumenten auf andere Datenträger übertragen werden sollen. Dies gilt insbesondere für das Anlegen einer Homepage, die zunächst auf dem Laufwerk des eigenen Computers erstellt und anschließend auf einen Server übertragen wird.
Beispiele:Absolute Links beinhalten die genaue "Lage" einer Zieldatei - unabhängig von der Ausgangsdatei eines Links. Solche absoluten Links kommen immer dann zum Einsatz, wenn eine Verknüpfung aus einer HTML-Dateistruktur zu einer festen Adresse (URL) herausführt. Der Name des Servers ist dabei (im Gegensatz zur Eingabe im Browser) vollständig anzugeben.
Beispiel:Unberührt von der Art des Links, muss es nicht immer Text sein, der verlinkt ist. Kleine Bilder in Form von Buttons u.ä. peppen die Seite nicht nur auf, sondern dienen auch einer intuitiven, leserfreundlichen Benutzerführung. Um ein Bild anstelle eines Textes zu verlinken, muss lediglich der Verweistext durch die Angabe einer Bildquelle ersetzt werden. Wie eine Bildquelle gewählt wird, beschreibt der dritte Abschnitt.
Nicht immer muss ein Link zu einer anderen Seite führen. Manche HTML-Dokumente sind so lang, dass auch ein Link zu einer bestimmten Stelle auf der Seite sinnvoll sein kann (dies ist auch auf dieser Seite der Fall). Ein interner Link muss deshalb ein Ziel haben, das an der Stelle der Seite sitzt, an die der Browser springen soll.
Beispiele:Ursprünglich war HTML ausschließlich auf das Anzeigen von Text ausgelegt. Aber mit der Weiterentwicklung der Browser konnten auch andere Elemente angezeigt werden wie etwa Bilder. Aber anders als in Programmen der Textverarbeitung werden Bilder nicht innerhalb eines HTML-Dokuments gespeichert, sondern bleiben als externe Dateien bestehen.
Formate für Bilder existieren wie Sand am Meer: Fast jeder Softwareentwickler, der Bildbearbeitungsprogramme vertreibt, hat ein eigenes Bildformat, das sich an der Dateiendung erkennen lässt: ".bmp", ".psp",...
Die aktuellen Browser unterstützen jedoch nur zwei Formate: ".gif" und ".jpg". Mit diesen beiden Formaten kann aber alles notwendige erreicht werden. Das JPG-Format ist bestens geeignet für die Darstellung von realistischen Fotos. Die Bilddateien lassen sich mit entsprechender Software bezüglich ihres Speicherbedarfs so weit komprimieren, dass erträgliche Datenübertragungszeiten zustande kommen. Das GIF-Format ist wegen seiner Beschränkung auf maximal 256 Farben ungeeignet für die Darstellung von Fotos. Es bietet aber zwei Vorteile: Zum einen kann eine Farbe des Bildes als transparent bestimmt werden, wodurch der Bildhintergrund zum Vorschein kommt. Zum anderen bietet das Format die Möglichkeit, Animationen zu erstellen, die dann wie Daumenkinos funktionieren: Durch die schnelle Abfolge einer Bilderreihe entsteht der Eindruck eines ablaufenden Films. Die Wahl des Formates richtet sich also nach der beabsichtigten Wirkung. Eines sollte jedoch beim Einsatz von Bildern immer im Hinterkopf bleiben: Bilder sind im Vergleich zu Text sehr speicherintensiv, ihr Einsatz somit stets auf Notwendigkeit zu hinterfragen.
Prinzipiell gibt es zwei Möglichkeiten der Verwendung von Bildern in HTML: Ein Bild kann als Hintergrund (Wallpaper) für die gesamte Seite gewählt werden oder als Einzelbild an einer bestimmten Stelle der Seite eingefügt werden.
Wie beschrieben sind Bilder externe Bestandteile einer Seite; es muss auf sie verwiesen werden. Dies leistet der Image-Tag.
Beispiele:Das Bild "picture.jpg" als Hintergrundbild. Der Befehl ergänzt den einleitenden Body-Tag.
Befehle lassen sich auch verschachteln. Hier wird ein Bild verlinkt: Das Anklicken des Bildes "button.gif" bewirkt das Aufrufen der Seite "datei.htm".
Bei den beschriebenen Beispielen wird davon ausgegangen, dass die Bilder in demselben Verzeichnis liegen wie die Datei, in der sie vom Browser angezeigt werden sollen. Hier gelten dieselben Konventionen wie für Links: Liegt ein Bild in einem untergeordneten bzw. übergeordneten Verzeichnis, so muss der Link zur Bildquelle entsprechend angepasst werden. Bei umfangreichen Seitenstrukturen bietet es sich an, alle Bilder in einem eigenen Ordner zu speichern (z.B. "images")
Farben sind ein besonders wichtiges Kapitel beim Anlegen einer HTML-Seite, aber nicht weil eine besonders bunte Seite besonders gut ist... Ganz im Gegenteil: Eine Seite soll lesbar sein und nicht in den Augen weh tun. Spätestens dann, wenn man ein schönes Hintergrundbild gefunden hat, auf dem sich aber leider die Schrift nicht mehr lesen lässt, lohnt es sich, einen Blick auf die HTML-Farblehre zu werfen.
Üblicherweise werden Farbangaben in HTML-Dateien durch Hexadezimalzahlen gemacht. Unser normales Dezimalsystem besitzt 10 Ziffern: 0, 1, 2, 3, 4, 5, 6, 7, 8 und 9. Das Hexadezimalsystem besitzt die folgenden Ziffern: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E und F. Das sind insgesamt 16 Ziffern, woher das Hexadezimalsystem seinen Namen hat. Um die Zahl 10 im Dezimalsystem zu schreiben, braucht man bereits 2 Ziffern, im Hexadezimalsystem genügt das A. Entsprechend schreibt man hexadezimal F für die Dezimalzahl 15. Aber was macht man, wenn man 16 im Hexadezimalsystem schreiben will? Ganz einfach: Man nimmt eine neue Stelle hinzu: 10 (ein mal 16 plus 0) steht dann für die dezimale 16, 1F für die dezimale 31 (ein mal 16 plus 15), FF für die dezimale 255 (15 mal 16 plus 15)... Man kann also mit zwei Hexadezimalziffern Zahlen bis 255 ausdrücken.
Diese Tatsache mag die Begründung für die Verwendung des Hexadezimalsystems sein. Die Browser können 256 verschiedene Farbanteile anzeigen. Die Farbangaben im Quelltext erfolgen über 6-stellige Codes, beginnend mit dem Gatterzeichen "#". Die ersten beiden Stellen stehen für den Rotanteil, die beiden mittleren Stellen stehen für den Grünanteil, die beiden letzten Stellen stehen für den Blauanteil. die Codes heißen deshalb englisch wie deutsch RGB-Codes. Für jeden Anteil gibt es wie beschrieben 256 Intensitätsmöglichkeiten, durch Mischen ergeben sich dann 256 mal 256 mal 256, also über 16 Mio. Farbkombinationen!
Beispielweise liefert die Kombination "#FF0000" ein reines Rot, "#FF00FF" ergibt violett usw. Ein Problem besteht aber darin, dass nicht alle Kombinationen mit Sicherheit von jedem Browser angezeigt wird. Garantie gibt die 33er Regel: Man verwendet nur 00, 33, 66, 99, CC und FF. Das sind aber noch immer 216 Kombinationen, man findet die passende... Übrigens: "#000000" ist schwarz, "#FFFFFF" ist weiß.
Zum Umrechnen von Hexadezimalzahlen und umgekehrt, benutze den Hexa-Dezi-Umrechner.
Farben lassen sich auf zweierlei Arten nutzen: zum einen als Hintergrundfarbe (anstelle eines Hintergrundbildes), zum anderen für den Text.
Beispiele:Links sind spezieller Text, sie lassen sich nicht einfach umformatieren, ihre Darstellung hängt von der Einstellung des verwendeten Browsers ab. Dennoch gibt es die Möglichkeit, bestimmte Farben für Links zu vergeben. Hierbei ist zu unterscheiden von (unbenutzten) Links, aktiven (gerade benutzten) Links und visited (bereits besuchten) Links.
Beispiel:Wie ein Farbcode in hexadezimaler Form als reale Farbe aussieht, kann man hier mit dem
Farbanzeiger testen.
Normalerweise verwendet man Tabellen, um Zahlen und Datenmaterial übersichtlich in Zeilen und Spalten darzustellen. Natürlich kann man sie auch in HTML dazu verwenden. Verbreiteter ist aber mit Sicherheit ihre Nützlichkeit beim Formatieren. Zwei Beispiele: Ein Text soll nicht über die gesamte Breite des Browserfensters angezeigt werden, neben eingebauten Bildern soll ein beschreibender Text stehen. Tabellen werden von dem Table-Tag eingeschlossen: <TABLE> </TABLE>, eine Tabellenzeile beginnt mit <TR> und endet mit </TR>, eine Datenzelle innerhalb einer Reihe beginnt mit <TD> und endet mit </TD>. Innerhalb des TD-Tags steht der Inhalt der Datenzellen. Die kann neben Text auch ein Link sein, oder ein Bild, oder beides zusammen... Der folgende Quelltext liefert eine Tabelle mit zwei Zeilen (table rows) und zwei Spalten (table data), in der jeweils die Positionen stehen. Im einleitenden Table-Tag bewirkt der Zusatzbefehl WIDTH="80%", dass die Tabellenbreite nur 80 Prozent des Browserfensters ausfüllt; die Angabe kann auch absolut in Pixel gemacht werden. Der Zusatzbefehl BORDER="0" bewirkt, dass kein Rahmen angezeigt wird (blinde Tabelle), höhere Zahlen bewirken stärkere Rahmen. Mit BORDERCOLOR kann eine Farbe für den äußeren Rahmen bestimmt werden. Weitere Farbbefehle gehören nicht zum Standard der HTML-Programmierung. Der Befehl ALIGN ist zuständig für die horizontale Ausrichtung einer Tabelle: Der Wert "left" ist Standard, die Werte "center" und "right" liefern zentrierte bzw. rechtsbündige Ausrichtung. Mit CELLSPACING="2" wird die Dicke der Gitter innerhalb der Tabelle festgelegt, mit CELLPADDING="2" der Abstand des Textes von den Gittern, jeweils als Beispiel mit 2 Pixel. FONT="Arial" bewirkt die Schriftart Arial, sofern diese auf dem Computer vorhanden ist. Standardmäßig sind die Spalten einer Tabelle gleich breit. Dies macht aber nicht immer Sinn. Die Spaltenbreite kann durch den Zusatz WIDTH="20%" innerhalb des Table-Data-Tags in der ersten Tabellenzeile beispielweise auf 20 Prozent der gesamten Tabellenbreite festgelegt werden - die Angabe kann auch absolut in Pixel gemacht werden. Dieser Befehl wirkt sich dann auf alle darunter liegenden Zellen - also die gesamte Spalte - aus, die Eingabe in jede Zelle der Spalte erübrigt sich. Durch den Befehl HEIGHT="300" im ersten Table-Data-Tag einer Zeile wird eine einheitliche Höhe von 300 Pixel für die ganze Zeile festgelegt; auch hier ist eine Wiederholung des Befehls für jede einzelne Datenzelle in der Zeile nicht notwendig, eine Angabe eines Prozentwertes ist nicht zulässig. Insbesondere bei Tabellen zeigt sich, wie sinnvoll es für die Übersichtlichkeit ist, im Quelltext Befehle einzurücken und nicht einfach nur Zeile für Zeile hinzuschreiben. Umbrüche in der Quelltextdatei werden im Browser nicht angezeigt. Dafür gibt es mit <BR> einen eigenen Befehl. Mit Frames (Rahmen) hat man die Möglichkeit, den Anzeigebereich des Browser in verschiedene, rechteckige Bereiche einzuteilen, in denen dann verschiedene HTML-Dokumente angezeigt werden können. Der typische Anwendungsbereich von Frames ist der einer Menüleiste, die immer sichtbar sein, aber nicht in jedem einzelnen Dokument einer Seitenstruktur eingegeben werden soll, und eines eigentlichen Anzeigebereichs. Hierzu wird der gesamte Anzeigebereich des Browsers in zwei Segmente geteilt: eines für das Menü und eines für die im Menü ausgewählten Seiten, die angezeigt werden sollen. Der Aufbau eines Frame-Set unterscheidet sich vom gewöhnlichen Aufbau einer HTML-Seite. Statt des üblichen, im Browserfenster anzuzeigenden Body-Bereichs wird ein Frameset definiert, in dem festgelegt wird, wie der Anzeigebereich des Browsers unterteilt werden soll und welche HTML-Dokumente bei Aufruf der Seite in welchem Segment anzuzeigen sind. Prinzipiell gibt es die Möglichkeit, den Anzeigebereich in Zeilen (rows) oder Spalten (columns) aufzuteilen und dabei die Maße anzugeben. Dabei muss jedem Segment auch mit FRAME NAME ein Name zugewiesen werden, mit SRC werden diejenigen Quelldateien benannt, die beim Aufruf des Framsets zunächst angezeigt werden sollen. Der folgende Quelltext liefert eine Aufteilung des Browseranzeigebereichs in zwei Spalten. In der linken Spalte wird die Datei "file1.htm" geladen, in der rechten die Datei "file2.htm". Der Name des linken Segments ist "links", der des rechten "rechts". Dabei wird der ersten Spalte eine Breite von 200 Pixel zugewiesen, die zweite Spalte füllt den Rest des Anzeigefensters, was durch den Platzhalter "*" angewiesen wird. Statt COLS kann auch mit ROWS das Anzeigefenster in Zeilen aufgeteilt werden. Statt den absoluten Größenangaben können auch Prozentwerte angegeben werden. So liefert der folgende Quelltext eine Aufteilung in drei Zeilen mit den entsprechenden Inhalten und einer Höhe von 10%, 20% und 70%. Framesets können natürlich auch ineinander verschachtelt werden. Der folgende Quelltext liefert eine Aufteilung zunächst in zwei Zeilen (äußerer Frameset), wobei die erste eine Höhe von 150 Pixel besitzt, die zweite den Rest der Höhe ausfüllt. Die zweite Zeile ist zudem in zwei Spalten unterteilt (innerer Frameset), die erste mit einer Breite von 30%, die zweite mit dem Rest der Fensterbreite. Normalerweise wird ein Link in demjenigen Browserfenster aufgerufen, in dem es angeklickt wird. Dies gilt auch für Frames, macht aber hier wenig Sinn. Hat man etwa eine schmale Menüleiste in einem Frame, so möchte man, dass der Link im breiten Anzeigefenster des Framesets aufgerufen wird und eben nicht dort, wo das Menü angezeigt wird - denn dieses soll schließlich permanent sichtbar bleiben. An dieser Stelle kommt der Name eines jeden Frames ins Spiel: Im Link kann durch den Zusatzbefehl TARGET der Browser angewiesen werden, die Verknüpfung in einem anderen Frame aufzurufen, nämlich dem, das dem TARGET-Befehl zugewiesen wird. Angenommen man hat ein Frameset, das aus zwei Spalten besteht - links die Menüleiste mit dem Framenamen FRAME NAME="menu", rechts ein breiteres Anzeigefenster mit dem Framenamen FRAME NAME="anzeige". Als Quelldatei dient für den Menu-Rahmen die Datei "menu.htm". Dann bewirkt der folgende Link-Befehl in der Datei "menu.htm", dass die Seite "file1.htm" im Anzeigefenster - also dem Frame mit dem Namen "anzeige" - aufgerufen wird: Im Frame-Tag selbst kann das Aussehen und das Verhalten des jeweiligen Frames weiter beeinflusst werden: Der Zusatz NORESIZE verhindert, dass der Betrachter die Rahmen mit der Maus verschieben kann. SCROLLING="no" verhindert die Scrollbalken - auch dann, wenn nicht die ganze Seite angezeigt werden kann. Mit FRAMEBORDER="0" wird der Rahmen unsichtbar, größere Werte bewirken dickere Rahmen.
Im Head eines jeden HTML-Dokuments kann mit dem TITLE-Tag ein Titel festgelegt werden. Wird eine Seite allerdings innerhalb eines Framesets aufgerufen, so erscheint nicht ihr Titel, sondern der des Framsets.5. Tabellen
5.1. Grundaufbau einer Tabelle
5.2. Formatierung von Tabellen
Auch eine Hintergrundfarbe oder ein Hintergrundbild kann mit BGCOLOR bzw. BACKGROUND festgelegt werden (siehe hierzu die Abschnitte zu Farben bzw. Bildern.)6. Frames
6.1. Aufbau von Framesets
6.2. Links innerhalb von Frames
6.3. Besonderheiten von Frames
Auf einiges ist bei Frames noch zu achten: Zunächst unterstützen ältere Browser die Anzeige von Frames nicht. Der Benutzer bekommt nichts angezeigt. Um dieses Problem zu umgehen - oder dem Benutzer zumindest bewusst zu machen -, bietet es sich an, den folgenden Quelltext in die Frameset-Datei im Anschluss an die Framedefinitionen einzufügen; der Browser liest dann zumindest das, was im BODY-Bereich steht:
<BODY>
Ihr Browser unterstützt keine Frames!!!
</BODY>
</NOFRAMES>
Bei Frames ist darauf zu achten, dass die Seite übersichtlich bleibt. Schließlich besteht die der Verschachtelung die Möglichkeit Frames innerhalb von Frames aufzurufen. Irgendwann aber werden die einzelnen Fenster zu klein, und nicht jeder besitzt einen Monitor so groß wie ein Fernsehgerät.
Cascading Style Sheets - kurz CSS - sind für HTML-Dokumente das, was für Textverarbeitungsprogramme wie etwa Word die Dokumentvorlagen sind: In ihnen sind die Informationen für das Design eines Dokuments festgelegt. Dies sind in HTML-Dokumenten etwa die vom Browser zu verwendende Schriftart, Farbe und Größe, die Festlegung von Hintergrundfarben bzw. -bildern, die Festlegung von Aufzählungszeichen, die Art der Darstellung von Links etc.
CSS-Befehle finden sich in Bezug auf HTML-Dokumente in dreierlei Form: Zum einen können sie als CSS-Angaben direkt im Head eines HTML-Dokuments untergebracht, zum zweiten als externe CSS-Datei ausgelagert und zum dritten direkt in einzelnen Tags untergebracht werden.
Dabei empfiehlt sich zumindest bei größeren Projekten in jedem Fall die zweite Variante, denn durch sie kommen die Vorteile der Cascading Style Sheets erst wirklich zum Tragen: Sie ersparen erstens übermäßig viele Formatierungsangaben innerhalb eines Dokuments, verringern dadurch die Länge einer HTML-Datei, was zu geringerer Dateigröße und zu kürzeren Übertragungszeiten führt. Zweitens ist mit der Verwendung externer CSS-Dateien die Möglichkeit gegeben, schnell und einfach ein Re-Design über eine beliebig große Anzahl von HTML-Dokumenten durchzuführen, etwa um auf allen Seiten die zu verwendende Schriftart zu modifizieren.
Im Falle von CSS-Anweisungen innerhalb eines HTML-Dokuments stehen diese im Head-Bereich des Dokuments und sind vom STYLE-Tag eingeschlossen:
Sollen die Formatierungsanweisungen in eine externe CSS-Datei ausgelagert werden, so steht der folgende Befehl im HEAD-Bereich eines jeden zu formatierenden HTML-Dokuments: Bei HREF ist entsprechend der Link zur CSS-Datei anzupassen; dies kann über einen relativen oder einen absoluten Link geschehen:
Die dritte Variante von CSS-Formatierungen bezieht sich auf einzelne Tags. Diesen werden mit dem Zusatz STYLE Formatierungszuweisungen direkt gegeben.
Unabhängig davon, ob die Anweisungen innerhalb eines HTML-Dokuments gemacht oder ausgelagert werden, sind die Style-Sheet-Befehle identisch: Im Fall der Unterbringung im HTML-Dokuments selbst, sind sie lediglich innerhalb des STYLE-Tags unterzubringen. Im Fall der Auslagerung werden sie ohne weitere notwendige Zusatzbefehle einfach aufgelistet, was in jedem Text-Editor geschehen kann. Die Datei sollte dann unter der Endung ".css" gespeichert werden.
Der Aufbau einer Formatierungsanweisung ist prinzipiell immer derselbe: Der zu formatierende Tag-Befehl steht ohne die Tag-Zeichen "<" und ">" am Anfang, z. B. "a" für einen Link. Gegebenenfalls folgt ein Doppelpunkt und eine Spezifikation des Tags, z. B. ":visited" für einen bereits besuchten Link. Anschließend folgen nach einem Leerzeichen innerhalb eines geschweiften Klammerpaars die Anweisungen, wobei jeweils Anweisung und Zuweisung wieder durch einen Doppelpunkt getrennt werden, z.B. "{ text-decoration: none}" bedeutet bei Links, dass sie nicht wie üblich unterstrichen werden - nebenbei bemerkt: Die Linkunterstreichungen zu unterbinden kann nur durch CSS-Angaben geschehen. Abschließend folgt ein Semikolon. Sollen für einen bestimmten Tag mehrere Angaben gemacht werden, so können diese hintereinander aufgelistet werden.
Beispiele:
Die beiden obigen CSS-Angaben beziehen sich auf die Verwendung von Bildern und Farben: Hintergrundfarbe ist hier schwarz, als Hintergrundbild wird die Datei "picture.gif" aus dem Unterordner "images" bestimmt, die - falls nicht das ganze Browserfenster ausfüllend - übrigens nur in horizontaler Richtung "gekachelt" wird. Für das Aufzählungszeichen wird das Bild "ul.gif" verwendet.
Die letzte CSS-Angabe zeigt ein kleines Problem mit Cascading Style Sheets: Nicht alle Befehle werden von allen Browsern erkannt wie etwa der Befehl für das Aufzählungszeichen von Netscape 4.X nicht. Es lohnt sich also in jedem Fall, das Ergebnis von CSS-Formatierungen in den Standardbrowsern zu überprüfen.
Wie beschrieben können Formatierungsangaben mit CSS auch direkt im Quelltext mittel STYLE im betreffenden Tag stehen:
| letzte Aktualisierung: 2.12.2001 | Download als ZIP |