Kurz-HTMLKurzeinführung in Hyper Text Markup Language (HTML)Alles Wesentliche knapp, aber leicht verständlich auf nur 10 Seiten |
HTML (Hyper Text Markup Language) ist eine "Sprache" (Language), mit der wir einem Computer sagen können, wie er uns Text - und ein bisschen mehr, z.B. Bilder, Tabellen, darum Hyper Text - anzeigen soll und mit der wir weitere Ziele (andere Webseiten) markieren (Markup) können, zu denen er springen soll, wenn der markierte Text angeklickt wird.
Als Tim Berners-Lee 1989 am europäischen Forschungsinstitut für Teilchenphysik CERN in Genf die "Hyper Text Markup Language" vorschlug, gab es sehr viele verschiedene Computer - Systeme und noch mehr verschiedene Software - Produkte zur Textbearbeitung. Dies erschwerte den Austausch von Texten zwischen Wissenschaftlern, zumal viele Systeme das Schreiben von mathematischen Formeln auch noch nicht unterstützten. HTML schuf hier einen Standard, der den Austausch von Texten mitsamt dazugehörigen Bildern und Messdaten extrem vereinfachte. zurück zum Inhaltsverzeichnis
Die Sprachelemente von HTML sind die sogenannten Tags (Etiketten), von denen es nur ein paar Dutzend gibt. Der Computer unterscheidet die HTML-Tags durch spitze Klammern vom gewöhnlichen Text, der angezeigt werden soll:
| <html> | Das ist das Anfangs-Tag, es muss am Anfang jeder HTML-Datei stehen |
| Es war einmal ... | Das ist ganz normaler Text |
Es gibt Tags, die in sich geschlossen sind (z.B. <img src="meinfoto.jpg" /> zum Einbinden eines Bildes), andere bestehen aus einem Anfangs- und einem Ende-Tag, die ein Stück Text einrahmen und ihm eine bestimmte Gestalt geben z.B. macht <b>fett</b> das eine Wort fett. Das Ende-Tag beginnt immer mit einem Schrägstrich nach der einleitenden spitzen Klammer.
Im Hinblick auf die Weiterentwicklung von HTML zu XHTML sollte man sich angewöhnen
die Schlüsselwörter in den Tags immer mit kleinen Buchstaben zu schreiben, obwohl die heutigen Browser auch Grossbuchstaben oder bunte Mischungen klaglos verarbeiten
bei den in sich geschlossenen Tags einen Schrägstrich vor der abschliessenden spitzen Klammer zu setzen, obwohl die ursprüngliche HTML-Definition dies nicht vorschrieb und die heutigen Browser auch ohne ihn auskommen
Jede HTML-Datei sollte einen Kopf (Head) und einen Körper aufweisen. Die feinere Gliederung mit Frames (s. unten) ist dagegen freiwillig und funktioniert (mit ein paar mittlerweile sehr alten Browsern) auch nicht immer. Kopf, Körper, Frames und weitere Einzelheiten werden durch Tags eingeleitet und abgeschlossen.
So sieht ein einfaches, aber formal einigermassen vollständiges HTML-Dokument aus:
<html>
<head>
<title>Alpenwiesen</title>
</head>
<body>
<h1 align="center">Alles über
Alpenwiesen </h1>
Und hier steht der Text zu den Alpenwiesen ...
</body>
</html>
Die Einrückungen sind dem Browser übrigens völlig egal, sie helfen aber mir selbst dabei, in einem grösseren Dokument die Übersicht zu behalten. zurück zum Inhaltsverzeichnis
Die Anweisung im so genannten Kopf (<head>) sind nicht direkt im dargestellten Dokument sichtbar, sondern dienen u.a. Suchmaschinen bei der Einordnung des Dokumentes. Ein im Kopf deklarierter Titel (<title>) erscheint bei den meisten Browsern im Rahmen, ausserhalb des eigentlichen Dokumentes. Inhalt und Formatierung des eigentlichen Dokumentes werden im Körper (<body>) aufgeführt. zurück zum Inhaltsverzeichnis
Grundsätzlich ist es möglich, in einer HTML-Datei jede Schriftart vorzuschreiben, die der Computer beherrscht, mit dem sie angezeigt wird. Da aber nicht alle Leute gleichartige Computer zum Surfen im Internet benützen, ist auch hier eine sinnvolle Normierung vorgesehen und man kann mehrere ähnliche Schriftarten angeben, von denen dann die erste zur Anzeige kommt, die auf dem betreffenden Rechner vorhanden ist. Dabei sollte auch immer eine Bezeichnung der "Schriftfamilie" (z.B. serif, sans-serif, cursive, fantasy, monospace) angegeben werden. Im gleichen Tag kann auch noch eine Schriftgrösse von 1 bis 7 (ohne Angabe wird die Grösse 3 angenommen) und / oder eine Farbe (Farbnamen s. unten) angegeben werden. Einige gebräuchliche Beispiele:
| HTML-Tag | Anzeigebeispiel |
|---|---|
| <font face="Times, serif"> | Klassische Schriftart Times Roman, mit Serifen (Schnörkeln) |
| <font face="Arial, Helvetica, sans-serif" size="2"> | Schnörkellose (Sans-Serif) Schrift, Grösse 2 |
| <font face="sans-serif" size="2"> | Standard Sans-Serif Schrift auf diesem Rechner, Grösse 2 |
| <font face="Courier, monospace" color="green"> | Schreibmaschinenschrift (feste Buchstabenbreite), Farbe grün |
| <font face="Mistral, cursive"> | geschwungene Schrift |
| <font face="cursive" size="2"> | Diese geschwungene Schrift ist auf diesem Computer Standard |
| <font face="Western, fantasy" size="2"> | Vorsicht mit Spezialschriften (Fantasy), das Ergebnis kann von einem Computer (bzw. Betriebssystem) zum andern sehr stark abweichen! Mein Rechner (Windows 98) zeigt z.B. statt einer Western-Schrift hier eine in der Tat fantasievolle Schrift. |
| <font face="Comic Sans MS, fantasy" size="2"> | Comic Sans MS - wenn das Betriebssystem diese Schrift kennt |
| <font face="Western" size="2"> | Western ohne Angabe der Schriftfamilie: Mein Windows 98-System kennt Western nicht und zeigt hier die von mir als Standardschrift des gesamten Dokumentes eingestellte Schriftart "Arial" aus der Familie "sans-serif"! |
Die Beispiele zeigen, dass die gängigen Schriftfamilien serif, sans-serif und monospace problemlos sind, wenn wenigstens die Schriftfamilie angegeben wird. Dagegen kann bei den Schriftfamilien cursive und fantasy das Ergebnis keineswegs garantiert werden. Die Schreibmaschinenschrift in der linken Tabellenspalte wird übrigens mit dem Tag <tt> und dem dazugehörigen Ende-Tag </tt> erzwungen (tt ist die Abkürzung für teletype [englisch: Fernschreiber]). Auch die <font .. >-Tags sollten mit dem entsprechenden Ende-Tag </font> nach dem betroffenen Textabschnitt abgeschlossen werden. zurück zum Inhaltsverzeichnis
Farben können eingesetzt werden, um eine Webseite interessant, übersichtlicher oder exklusiv zu gestalten. Leider gibt es aber auch viele schlechte Beispiele im Netz - Schriftfarben, die auf der gewählten Hintergrundfarbe kaum mehr lesbar sind, übertriebene Farbenvielfalt, in der die Inhalte untergehen (falls damit nicht einfach davon abgelenkt werden soll, dass kein eigentlicher Inhalt vorhanden ist) usw.
Die Hintergrundfarbe (englisch: background color) einer ganzen
Seite kann mit dem Body-Tag
(s. oben)
festgelegt werden:
<body bgcolor="navy">
erzeugt z.B. einen marineblauen (englisch:
navy) Hintergrund.
Die Bildschirme für TV-Geräte und Computer basieren darauf, dass alle Farben aus mehr oder weniger grossen Anteilen der drei Grundfarben Rot, Grün und Blau zusammengemischt werden. Die ersten PC's mit Farbbildschirmen kannten lediglich 16 Farben. Heute hat es sich eingebürgert, Farbwerte mit je einem Byte für Rot, Grün und Blau zu speichern. Damit lassen sich 256 x 256 x 256 = 16 Millionen Farbnuancen darstellen. Damit wird allerdings auch recht viel Speicherplatz verbraucht. Deshalb gibt es auch Standards, die sich mit einem Byte (also 256 Farben) begnügen. Für Grafiken ist dies meist völlig ausreichend, Fotos wirken allerdings damit oft etwas "zerhackt".
| 16 Basisfarben | |||
|---|---|---|---|
| #000000 Black (Schwarz) | #800000 Maroon (Braun) | #008000 Green (Grün) | #000080 Navy (Marineblau) |
| #808080 Gray (Grau) | #800080 Purple (Violett) | #808000 Olive (Olivgrün) | #008080 Teal (Blaugrün) |
| #C0C0C0 Silver (Silber) | #FF0000 Red (Rot) | #00FF00 Lime (Hellgrün) | #0000FF Blue (Blau) |
| #FFFFFF White (Weiss) | #FF00FF Fuchsia (Lila) | #FFFF00 Yellow (Gelb) | #00FFFF Aqua (Hellblau) |
Oft sind weitere Nuancen gefragt. Grundsätzlich kann mit der Angabe des RGB-Farbwertes z.B. <font color="#47ac12"> jeder beliebige Farbwert gewählt werden und es dürfte heute nur noch sehr wenige Geräte geben, die nicht die ganze Fülle von 16 Millionen Farbnuancen wiedergeben können, sondern eine angenäherte Farbe anzeigen werden. Andererseits wüsste ich persönlich nach einem halben Jahr bei einer Ergänzung meiner Seite kaum mehr, dass mit #47ac12 ein mässig helles Grün gemeint ist und wo ich die gleiche Farbe sonst noch verwende. Dagegen entspricht eine Angabe wie <font color="limegreen"> zwar nicht genau dem gleichen Farbton, ist dafür aber viel leichter zu merken. Eine Liste mit 120 solchen Bezeichnungen findet sich im klassischen HTML-Kurs SELFHTML. Die Hintergrundfarbe dieses Dokumentes ist übrigens "Aliceblue". zurück zum Inhaltsverzeichnis
Weil die moderne Computer - Technik auf Normen beruht, die in den USA entwickelt wurden, und die europäischen Staaten es verschlafen haben, rechtzeitig ihre Bedürfnisse anzumelden, tut sich die Computerwelt auch heute noch immer etwas schwer mit den Umlauten, die in fast allen europäischen Sprachen halt auch noch dazugehören. Allein in der Welt der gängigen IBM-kompatiblen PC's mit ihren verschiedenen Generationen von Microsoft-Betriebssystemen (MS-DOS, Windows 95, 98, NT, XT ..) gibt es schon ein rundes Dutzend verschiedene Zeichensätze (Tabellen, die festlegen, mit welcher Zahl die einzelnen Buchstaben und Satzzeichen im PC drin gepeichert werden). Die gängigen Satzzeichen, Gross- und Kleinbuchstaben belegen dabei immer die gleichen Positionen von 0 bis 127 nach dem vom ANSI [American National Standards Institute, US-amerikanische Normierungsbehörde] festgelegten ASCII-Code [American Standard Code for Information Interchange]; die Umlaute und Sonderzeichen für Europa und den Rest der Welt wechseln dagegen ihre Positionen von 128 bis 255.
HTML löst dieses Problem - nicht nur für die IBM-PC's,
sondern gleich ein für allemal gerade auch für alle
anderen Computer und Betriebssysteme. Die HTML-Lösung ist
grundsätzlich einfach, sie funktioniert auch auf Tastaturen,
die keine Umlaute enthalten - praktisch, wenn man im Ausland
ein Dokument verfassen muss - ist aber in der Praxis ein klein
bisschen umständlich anzuwenden: Jedes Sonderzeichen beginnt
mit dem Satzzeichen & und endet mit einem Strichpunkt.
Dazwischen steht eine Abkürzung, die das Sonderzeichen
beschreibt:
ä
steht für den Umlaut ä
Ä
steht für den Umlaut Ä
ö
steht für den Umlaut ö
Ö
steht für den Umlaut Ö
ü
steht für den Umlaut ü
Ü
steht für den Umlaut Ü
ß
steht für das scharfe ß (Ligatur)
| HTML-Code | für | Zeichenbedeutung in HTML |
|---|---|---|
| & | & | (damit beginnen die Sonderzeichen) | < | < | (damit beginnen die Tags) |
| > | > | (damit enden die Tags) |
| " | " | (damit schliesst man Namen ein) |
HTML-Browser stellen den Text so dar, dass er in die aktuell eingestellte Breite des Browser-Fensters passt. Zeilenumbrüche und mehrere Leerzeichen zwischen Wörtern werden auf ein einziges Leerzeichen reduziert. Der Textfluss kann aber wie folgt erzwungen werden:
| HTML-Code | Zeichenbedeutung in HTML |
|---|---|
| <br /> | erzwungener Zeilenumbruch |
| | erzwungenes Leerzeichen |
| <p> </p> | Abschnitt (Anfangs- und Ende-Tag) |
Zur Einführung gleich ein kleines Beispiel: So sieht die Definition der Tabelle aus, die oben im Abschnitt "Tags" angezeigt wurde:
<table cellspacing="1" border="1"
cellpadding="10">
<tr>
<td><tt> <html>
</tt></td>
<td>Das ist das Anfangs-Tag, es muss am Anfang jeder HTML-Datei
stehen</td>
</tr>
<tr bgcolor="white">
<td><tt>Es war einmal ...</tt></td>
<td>Das ist ganz normaler Text</td>
</tr>
</table>
Achtung: Schriftarten (fonts), die ausserhalb einer Tabelle definiert wurden, haben je nach Browser innerhalb der Tabelle keine Gültigkeit. Um ganz sicher zu gehen, muss die Schriftart und Schriftgrösse in jeder Zelle neu definiert werden, ausser man wolle die Schriftart und Grösse dem individuellen Geschmack des Publikums (Standardeinstellung des Browsers) überlassen.
Im <tr>-Tag, das eine Zeile einleitet
oder im <td>-Tag, das eine Zelle einleitet,
kann auch eine
Hintergrundfarbe vorgegeben werden. In der oben gezeigten Farbtabelle
wurde die hellblaue Zelle so definiert:
<td bgcolor="aqua">#00FFFF Aqua (hellblau)</td>.
Ein <th>-Tag anstelle des <td>-Tags
definiert eine Titelzelle, die von den meisten Browsern mit fetter
Schrift dargestellt wird.
Ein <th>-Tag anstelle von <td> erzeugt eine Titelzelle (die Schrift wird von den meisten Browsern fett hervorgehoben).
Ein Spezialfall einer Tabelle ist das <hr />-Tag. Es erzeugt eine einfache horizontale Trennlinie. zurück zum Inhaltsverzeichnis
Bilder können mit HTML einfach eingebunden werden:
<img src="../bahn/bahnani.gif"
alt="Eisenbahn: Gleisbildstellwerk, Neigezug ICN"
border="0" width="90" heigth="67" align="left" />
Das Tag img steht dabei für Image [englisch: Bild], als Source [Quelle] wird eine Grafikdatei angegeben. Mit alt= kann eine kurze Beschreibung mitgeliefert werden, die von den meisten Browsern angezeigt wird, wenn man den Mauszeiger über das Bild bringt (u.a. hilfreich für Sehbehinderte, denen der PC heute Texte vorlesen, aber Bilder nicht beschreiben kann). Zudem erscheint dieser Text anstelle des Bildes, wenn das Bild nicht gefunden wird oder wenn die Übertragung des Bildes sehr lange dauert. Man kann dann selbst entscheiden, ob es sich lohnt, auf das Bild zu warten oder weiter zu surfen ... Mit border wird die Dicke des Rahmens um das Bild (in Pixeln [Bildpunkten]) angegeben, mit width die Breite des Bildes und mit heigth seine Höhe. Dies hat den Vorteil, dass der benötigte Platz von Anfang an klar ist und vom Browser ausgespart werden kann, sodass der Seitenaufbau nicht mehr ändert, wenn das Bild dann (endlich) fertig geladen ist. align legt fest, ob das Bild left [linksbündig], right [rechtsbündig] oder center [eingemittet] platziert wird. Ausser src sind alle Angaben freiwillig.
Normen, wie Bilder auf einem Computer gespeichert werden können gibt es mindestens doppelt so viele wie Hersteller von entsprechender Software :-(, doch haben sich in den letzten Jahren zwei Standards für je unterschiedliche Anwendungen im Internet ziemlich etabliert:
Für ganze Fotogalerien empfiehlt es sich, eine Tabelle aufzubauen. zurück zum Inhaltsverzeichnis
Das Internet lebt davon, dass Links beim Surfen von einer Seite zur
nächsten führen. Und so werden sie aufgesetzt:
<a href="../portal.htm#Computer">Computer</a>
Mit href= wird die Adresse der Datei angegeben, die angezeigt
werden soll. In diesem Beispiel ist es portal.htm. Die Punkte und
der Schrägstrich vorab bedeuten, dass die Datei im übergeordneten
Verzeichnis gesucht werden soll. #Computer bezeichnet einen
Abschnitt, an dessen Beginn der Browser springt. In der betreffenden Datei
wird eine solche Sprungmarke mit
<a name="Computer" />
definiert, das Zeichen # entfällt dort!
Wenn Frames (s.unten) im Spiel sind,
sollte auch angegeben werden, in welchem Frame der verlinkte Inhalt
angezeigt werden soll. Dazu dient das target-Attribut:
<a href="../portal.htm#Computer"
target="Frame2">Computer</a>
Die Datei mit der Beschreibung der Frames soll unter dem Tag
<noframes>
immer auch einen Teil enthalten, der es erlaubt, mit älteren
Browsern, die keine Frames verstehen, den eigentlichen Inhalt der
Seiten anzusteuern.
Es gehört zum guten Ton (im WWW auch als Netiquette bezeichnet), fremde Seiten nicht in eigenen Frames "einzufangen", sondern für sie ein eigenes Fenster aufzutun, indem als Ziel target="_blank" angegeben wird. Dies hat nebenbei auch noch den Vorteil, das die Gäste auf meiner Webseite zwar eine externe Ergänzung angeboten kriegen, aber nach dem Schliessen des neuen Fensters wieder zu mir zurück kommen. Wer will denn schon das endgültige Wegzappen von seiner aufwändig gestalteten Seite noch fördern? zurück zum Inhaltsverzeichnis
Frames [englisch: Rahmen] wurden nachträglich in den HTML-Standard eingeführt, um das Browserfenster flexibler einteilen zu können. An die Stelle einer einfachen HTML-Datei mit dem eigentlichen Text tritt bei Webseiten, die Frames benützen, zunächst eine Seite, die nur die Aufteilung des Gesamtfensters auf die einzelnen Frames beschreibt und angibt, welche HTML-Dateien in den einzelnen Frames angezeigt werden sollen. Grundsätzlich kann eine solche Datei auch das gesamte Fenster ausfüllen. Von diesem Text "KurzHTML" gibt es z.B. drei Versionen:
Und so sieht der entscheidende Teil der Datei "kurzhtm3.htm" aus: Auf einen ganz normalen Head-Abschnitt folgt noch vor dem Body die Definition [Festlegung] der Framesets und Frames:
<frameset rows="60,*" frameborder=0 framespacing=0 border=0>
Und nun die Erklärungen zu den Einzelheiten:
<frameset rows="60,*"
frameborder=0 framespacing=0 border=0>
Hier wird ein so genanntes Frameset definiert,
das in diesem Fall aus zwei rows (englisch: Zeilen) bestehen soll:
Für die letzten paar uralten Browser, die keine Frames anzeigen können und für die Suchmaschinen, die leider oft vergessen werden, sollte aber noch beschrieben werden, was zu tun ist, wenn die Frames nicht verstanden werden:
<noframes>
Oder soll das etwa gute Werbung in der Suchmaschine sein? (Die meisten
Suchmaschinen präsentieren nämlich genau die ersten x Wörter
oder Zeilen, die sie im Body finden als Kurzbeschreibung!). Nach
dem dicken Eigenlob zu Handen der Suchmaschinen soll dann ein Link
(s. oben)
folgen, mit dem die Datei mit dem eigentlichen Inhalt (hier: kurzhtm1.htm)
angezeigt werden kann. Dann noch alle offenen Tags schön schliessen:
</body>
</noframes>
</html>
und fertig sind die Frames. Bitte nicht übertreiben!
zurück zum Inhaltsverzeichnis
Zum Schluss noch ein goldener Tipp: Die meisten Browser bieten an, den Quelltext anzuzeigen. Beim Microsoft Internet Explorer TM z.B. unter "Ansicht", "Quelltext anzeigen". In fremde HTML-Seiten reinschauen und daraus lernen ist erlaubt, einfach 1:1 "abkupfern" dagegen verpönt und kann unter Umständen zu einer gerichtlichen Vorladung führen. Und noch ein Hinweis: Manche Textverarbeitungsprogramme bieten an, den Text statt im eigenen Format als HTML-Datei abzuspeichern und ".htm"-Dateien als unformatierte Textdateien zur Nachbearbeitung wieder einzulesen. Das kann am Anfang ganz schön hilfreich sein. Übrigens werden heute auch e-Mails meistens als HTML-Dateien übertragen.
| << Internet | ^^ Startseite ^^ | Hardware >> |