Web-Entwicklung 2: HTML
18.03.2008 von André Bräkling
Bereits aus dem ersten Teil dieser Serie ist bekannt, dass HTML zur Formatierung eines Dokumentes (in unserem Fall einer Webseite) dient. Eine Webseite besteht zumeist aus mehreren HTML-Dokumenten. Durch die URL fragt der Browser ein bestimmtes Dokument beim Server an, der dieses zur Verfügung steht. Anschließend kann der Browser das Dokument auswerten und darstellen.
Einleitung
HTML steht für HyperText Markup Language – doch was bedeutet das?
- Hypertext: Im Gegensatz zu einem typischen linearen Text (ein herkömmliches Buch z.B.) zeichnet es einen Hypertext aus, dass er aus verschiedenen Knoten besteht, die miteinander verknüpft sind. So kann ein Text (oder ein Textabschnitt) auf einen weiteren Text (bzw. Abschnitt) verweisen. Dadurch kann der Leser selbst entscheiden, welche Informationen für ihn relevant sind, bzw. welche Informationen er weiter vertiefen möchte. Als Beispiel für einen Hypertext kann man das World Wide Web und natürlich alle einzelnen dazu gehörigen Webseiten betrachten.
- Markup Language: übersetzt handelt es sich dabei um Auszeichnungssprachen. Das hat jedoch nichts mit Preisverleihungen zu tun, sondern mit der Auszeichnung von Daten. Eine Markup Language markiert einzelne Datenelemente so, dass bei der Verarbeitung eindeutig ist, wie diese Daten behandelt werden sollen. Beispiele für solche Auszeichnungssprachen sind neben HTML auch LaTeX, der aus Foren bekannte BBCode oder der sogenannte Wikitext.
Was bedeutet dies für den Umhang mit HTML? Hier lässt sich folgendes festhalten:
- In HTML-Dokumenten werden Datenabschnitte (insbesondere Texte) so ausgezeichnet, dass ein Browser diese darstellen kann.
- Querverweise (Links) sind ein wichtiger Bestandteil von HTML-Dokumenten.
Auszeichnungen im Dokument werden mit sogenannten Tags vorgenommen. Ein solcher Tag wird in den meisten Fällen mit <tagname> geöffnet. Anschließend findet sich der betroffene Textabschnitt, gefolgt von einem schließenden Gegenstück des Tags: </tagname>.
Um ein Dokument mit solchen Auszeichnungen zu erstellen, benötigt man nur einen schlichten Texteditor, der die Ausgabedatei im reinen Textformat speichert. Die einfachsten Lösungen stellen natürlich beim System mitgelieferte Texteditoren dar: Der Editor (aka Notepad) von Windows, "vi" oder "vim" in der Linux-Shell oder gedit von Gnome, um nur ein paar Beispiele zu nennen. Weil jedoch nicht alle Editoren (wie z.B. der Windows-Editor) praktische Features wie Syntax-Highlighting (so werden beispielsweise Tags farblich markiert, damit das Gesamtdokument im Editor lesbarer wird) bieten, kann man natürlich auf unzählige Alternativen zurückgreifen. Eine simple, schnelle und schlanke Freeware-Alternative wäre z.B. der Crimson Editor. Jetzt muss nur noch das Dokument in den Editor eingegeben und mit der Dateiendung .htm oder .html gespeichert werden – schon sollte sich das Ergebnis im Browser bewundern lassen (auch ohne die Datei auf einen Webserver zu kopieren).
Aber Achtung: Natürlich können auch mächtige Textverarbeitungsprogramme wie Word oder der OpenOffice Writer HTML-Dokumente erzeugen. Diese wandeln jedoch lediglich das mit ihnen erstellte Dokument in HTML um – das funktioniert zwar, aber so lernt man natürlich nichts über HTML selbst… und spätestens bei den späteren Schritten (Einsatz von JavaScript, dynamische Seiten mit PHP) wird dieses Know-How fehlen. Oder um es anders auszudrücken: Wer ernsthaft Kochen lernen will, sollte nicht mit Mikrowellen-Fertiggerichten beginnen und bei Tiefkühlpizzen aufhören.
Das erste Dokument
Nun ist es an der Zeit, dass erste Dokument in den gewählten Editor einzugeben und näher zu betrachten:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mein erstes HTML-Dokument</title>
</head>
<body>
Hallo Welt!
</body>
</html>
Dieses Dokument besteht aus vier verschiedenen Tags, die jeweils durch einen öffnenden und einen schließenden Tag vertreten:
- html: Dieser Tag markiert das gesamte HTML-Dokument als solches – d.h. es beginnt im Beispiel in Zeile 1 und endet in Zeile 8.
- head: Hier wird der Kopfbereich des Dokumentes markiert. Innerhalb des Kopfbereichs finden sich diverse Metadaten, wie der Titel, verschiedene Angaben für Suchmaschinen oder auch Verweise auf weitere zur korrekten Darstellung notwendige Dateien.
- title: Innerhalb des Kopfes (Header) wird der Titel definiert. Dieser kann z.B. in der Kopfzeile des Browser erscheinen und dient meist auch als vorgegebene Bezeichnung für Bookmarks.
- body: Der Körper (Body) des Dokumentes enthält den eigentlich darzustellenden Text.
Die Doctype-Angabe verweist auf den verwendeten HTML-Standard. Zwar ist diese Angabe Pflicht, sie spielt aber in diesem Tutorial keine größere Rolle. Dennoch muss sie spätestens bei einer Vertiefung des Themas beachtet werden, sollte also im Hinterkopf bleiben.
Die Einrückungen haben übrigens keine tiefere Bedeutung – sie dienen einfach der klaren Strukturierung und der somit besseren Lesbarkeit. Im Browser geöffnet wird das Dokument interpretiert und dargestellt – nun sollte in der Titelzeile des Browsers "Mein erstes HTML-Dokument" und als tatsächliches Dokument der Text "Hallo Welt!" erscheinen. Um noch einmal auf die Einrückungen zurück zu kommen: Auch wenn "Hallo Welt!" eingerückt wurde, erscheint es linksbündig. Dies liegt daran, dass HTML überzähligen Leerzeichen (und übrigens auch Zeilenumbrüchen) keine Beachtung schenkt. So lässt sich der Body folgendermaßen abändern, ohne das es einen sichtbaren Effekt geben würde:
<body> Hallo Welt! </body>
<body> Hallo Welt! </body>
Soll nun ein Zeilenumbruch erzwungen werden, kann dies mit dem Tag <br> geschehen. Da dieser Tag keinen Datenbereich umschließt, gibt es zu ihm keinen schließenden Tag. Aus diesem Grund wird er <br /> geschrieben, er schließt sich also – wenn man so will – selbst:
<body> Hallo<br />Welt! </body>
Ein wenig Textstrukturierung und -formatierung
Jetzt ist es an der Zeit, den Text ein wenig zu strukturieren. Dazu eignen sich überschriften ganz gut. HTML kennt dabei verschiedene Varianten von Überschriften, die verschiedene Gewichtungen haben. <h1> dient zum Beispiel als Kapitelüberschrift, <h2> als Unterkapitel und <h3> als kleinerer Abschnitt (man beachte die aufsteigende Nummerierung).
So könnte der neue Body aussehen:
<body>
<h1>Mein erstes HTML-Dokument</h1>
Meine ersten Schritte habe ich bereits gemacht.
<h2>Der Anfang</h2>
Hallo Welt!
<h2>Weiter...</h2>
Ich strukturiere meine Texte nun.
<h1>Neues Kapitel</h1>
Mal sehen, was noch kommt...
</body>
Eine Trennlinie zwischen zwei Kapitel wäre auch ganz nett – dazu kann man den Tag <hr /> (analog zu <br />) verwenden.
Anschließend soll auch der eigentliche Text etwas aufgewertet werden. Während man nun in einer Textverabeitung auf den Button mit der Anschrift "F" (im englischen "B" für bold) klicken würde, um dann fettgedruckten Text zu schreiben, der dann wieder mit einem erneuten Klick auf "F" beendet wird (alternativ zu einem Klick gibt es natürlich Shortcuts – aber dies ist ja kein Textverarbeitungs-Tutorial…), wird dieser Vorgang in HTML mit entsprechenden Tags erledigt:
- b: Fettschrift
- i: Kursivschrift
- u: Unterstreichung
<body> Manche Textstellen sollen <b>fett</b> geschrieben sein, andere wiederum <i>kursiv</i>.<br /> Gelegentlich soll aber auch etwas <u>unterstrichen</u> werden. Oder gar <b><u>fett und unterstrichen</u></b>? </body>
Werden Tags (wie in diesem Beispiel) kombiniert, also ineinander verschachtelt, müssen sie wieder in der richtigen Reihenfolge geschlossen werden. Öffne ich b und anschließend u, muss; ich erst u wieder schließen, bevor ich b schließen darf. Das entspricht dem FILO-Prinzip – first in, last out. Vorstellen kann man sich dies mit Bierdeckeln. öffnet man einen Tag, schreibt man den Namen des Tags auf einen Bierdeckel. Wird nun ein weiterer Tag geöffnet, wird ein neuer Bierdeckel beschriftet und auf den vorhandenen gelegt. Ein Tag wird geschlossen, indem man den zugehörigen Bierdeckel vom Stapel nimmt – jedoch darf man nur den obersten anfassen! Möchte man also einen weiter unten liegenden Deckel entfernen, muss man erst alle oberen Bierdeckel in der richtigen Reihenfolge vom Stapel nehmen (also die Tags schließen).
Links
Wie schon erwähnt wurde, sind Verknüpfungen zwischen Dokumenten eine grundlegende Eigenheit von HTML, weshalb sie hier nicht ungenannt bleiben sollen. Damit der Browser einen solchen Link beschriften und das richtige Ziel aufrufen kann, sind zwei Informationen nötig. Während die Beschriftung zwischen dem öffnenden und schließenden Tag steht, wird das Ziel als Parameter mit dem öffnenden Tag angegeben. Dies sind dann so aus:
<body> <a href="zieladresse">Mein erster Link</a> </body>
Den über den Parameter gelieferten Wert "zieladresse" übernimmt der Browser nun als Ziel, wenn man auf den Link "Mein erster Link" klickt. Natürlich führt der Text "zieladresse" in den meisten Fällen nicht zum Ziel (ausgenommen es existiert tatsächlich eine Datei mit diesem Namen), sondern muss durch eine korrekte Angabe ersetzt werden:
- Relative Links: Befinden sich sowohl die Ausgangs- als auch die Zieldatei auf dem gleichen System (mit identischer Adresse, also z.B. identischer URL) genügt ein lokaler Link. Möchte man z.B. die Datei ziel.htm im gleichen Verzeichnis aufrufen, kann dies per <a href="ziel.htm"> geschehen. Befindet sich die Datei ziel.htm in einem Unterverzeichnis (sagen wir kapitel2), kann dieser Pfad relativ verwendet werden: <a href="kapitel2/ziel.htm">. Der Vorteil liegt klar auf der Hand: Relative Angaben sind unabhängig vom tatsächlichen Ort der Dateien. So können Dokumente sowohl auf der eigenen Festplatte getestet, als auch auf einem Webserver aufgerufen werden… natürlich vorausgesetzt, dass die Verzeichnisstruktur identisch ist, also das Verzeichnis "kapitel2" auf dem anderen System nicht "lokale_kopie_kapitel2" heisst.
- Absolute Links: Um eine Dokument einer externen Webseite zu verlinken, muss der Browser natürlich wissen, wo er dieses finden kann. Dazu übernimmt man einfach die gesamte URL für den href-Parameter, z.B. <a href="http://www.braekling.de/">. Natürlich können so auch alle internen Links eingebaut werden, jedoch geht dann die zuvor erläuterte Unabhängigkeit vom Ort verloren. Auf jeden Fall sollten absolute Links auf der eigenen Festplatte vermieden werden (z.B. href="c:\html\test.htm") – im Web kann diese Datei natürlich niemand mehr aufrufen!
Außerdem kann man Links auch innerhalb eines Dokumentes verwenden, was speziell bei längeren Texten Sinn macht. Dazu setzt man Sprungmarken an die Stellen, die über einen Link aufrufbar sein sollen. Eine solche Sprungmarke wird auch mit dem a-Tag gesetzt, jedoch verwendet man statt href den Parameter name, der die Verlinkung ermöglicht. Nun können wieder a-Tags mit href-Parameter verwendet werden, um diese Marken aufzurufen. Dazu setzt man in href eine Raute (#) gefolgt vom Namen der Sprungmarke. Klarer wird dies mit einem Beispiel:
<body> <a name="inhalt"><h1>Inhalt</h1></a> <a href="#kapitelzehn">Direkt zu Kapitel 10</a> <h1>Kapitel 1</h1> Text Text Text Text Text Text Text Text Text Text Text Text Text <h1>Kapitel 2</h1> Text Text Text Text Text Text Text Text Text Text Text Text Text <h1>Kapitel 3</h1> Text Text Text Text Text Text Text Text Text Text Text Text Text <h1>Kapitel 4</h1> Text Text Text Text Text Text Text Text Text Text Text Text Text <h1>Kapitel 5</h1> Text Text Text Text Text Text Text Text Text Text Text Text Text <h1>Kapitel 6</h1> Text Text Text Text Text Text Text Text Text Text Text Text Text <h1>Kapitel 7</h1> Text Text Text Text Text Text Text Text Text Text Text Text Text <h1>Kapitel 8</h1> Text Text Text Text Text Text Text Text Text Text Text Text Text <h1>Kapitel 9</h1> Text Text Text Text Text Text Text Text Text Text Text Text Text <a name="kapitelzehn"><h1>Kapitel 10</h1></a> Text Text Text Text Text Text Text Text Text Text Text Text Text <a href="#inhalt">Zum Inhalt</a> </body>
Grafiken
Bevor nun die ersten Grafiken eingebunden werden, sollen ein paar Grundregeln für die Grafikverwendung angebracht werden. Diese Grundregeln habe ich selbst formuliert, sie stellen also nicht zwingend eine allgemeine Lehrbuchmeinung da. Sagen wir es so: Ich bitte von ganzem Herzen um die Befolgung der nachfolgend aufgeführten Grundsätze.
- Weniger ist manchmal mehr! Eine Grafik sollte entweder zum Inhalt passen oder Bestandteil des Seitendesigns sein. Einfach nur eingebunden, weil man sie mal irgendwo gefunden hat, hilft sie keinem weiter.
- Einfach muss nicht schlecht sein! Eine Hintergrund kann noch so schön sein – wenn sich der Text darauf nicht mehr oder nur noch schwer lesen lässt, geht das wesentliche unter!
- Bewegung ist nicht erforderlich! Viele Webmaster meinen, sie können ihre Seite durch möglichst viele blinkende oder anderweitig animierte Grafiken aufwerten. Tatsächlich stören diese jedoch enorm! Solche Effekte sollten wirklich nur verwendet werden, wenn sie absolut nötig sind.
- Geltendes Recht beachten! Man sollte darüber nachdenken, ob man die Grafik verwenden darf. Hat der Urheber die Veröffentlichung auf einer Webseite erlaubt? Es ist einiges zu beachten – im Zweifel sollte man lieber eine eigene Grafik verwenden. Nur weil ein Bild im Internet veröffentlicht wurde, bedeutet dies nicht, dass es frei kopiert werden darf! Auch wichtig: Könnte auf einem Privatfoto jemand zu sehen sein, der etwas dagegen haben könnte, dass dieses Bild veröffentlicht wird?
- Keine Grafiken von fremden Servern einbinden! Eine Grafik sollte zumindest auf den eigenen Server kopiert werden (es sei denn, es ist ausdrücklich anderes verlangt, z.B. bei sogenannten Bannercodes) – bindet man eine Grafik über einen absoluten Link von einer fremden Webseite ein, wird sich deren Betreiber mit großer Wahrscheinlichkeit (zu Recht!) beschweren. Ein Grund dafür: Traffic (also von einem Server heruntergeladene Daten) kostet Geld!
Genug von Grundsätzen und Regeln (diese Liste kann man sicher noch erweitern) und zurück zum Thema. Eine Grafik wird mit einem img-Tag eingebunden. Dazu enthält dieser zwei Parameter und schließt sich selbst. Zunächst gibt der Parameter src die Grafikquelle an – hier trägt man einfach einen Verweis analog zu href bei a-Tags ein. Weiter ist ein alt-Parameter notwendig, der einen alternativen Text angibt, der sich an Besucher richtet, die keine Grafiken sehen können (z.B. Blinde oder Nutzer von reinen Textbrowsern, aber auch automatische Suchmaschinen-Programme, die eine Webseite analysieren).
Soll nun eine Grafik eingebunden werden, die sich im Unterverzeichnis "images" befindet, "familie.jpg" heißt und als Alternativtext "Dies ist ein Bild meiner Familie" verwenden soll, sieht dies so aus:
<body> <img src="images/familie.jpg" alt="Dies ist ein Bild meiner Familie" /> </body>
Sonderzeichen
Abschließend seien hier noch Sonderzeichen erwähnt: Man kann nie wissen, wer eine Webseite aufruft und welche Zeichenkodierung dessen Browser verwendet, also ob dieser z.B. Umlaute richtig interpretiert. Außerdem können < sowie > aufgrund ihrer "Markierungseigenschaften" nicht verwendet werden. Damit aber niemand auf notwendige Zeichen verzichten muss, können zumindest häufig benutzte Sonderzeichen durch besondere Zeichenfolgen dargestellt werden. Reicht dieser Zeichenvorrat auch nicht aus, können entsprechende Codeangaben gemacht werden.
An dieser Stelle soll nur kurz auf (für uns) typische Sonderzeichen eingegangen werden:
| Dieses Sonderzeichen… | …wird in HTML so angegeben. |
|---|---|
| ä | Ä |
| ä | ä |
| ö | Ö |
| ö | ö |
| ü | Ü |
| ü | ü |
| ß | ß |
| & | & |
| < | < |
| > | > |
| € | € |
Außerdem können zusätzliche Leerzeichen, die nicht ignoriert werden, per eingefügt werden. So könnte das dann aussehen:
<body> Nun möchte ich auch Umlaute verwenden.<br /> Und spitze Klammern mit ein paar Leerzeichen dazwischen!<br /> Also sowas hier: < ><br /> Geht doch - das ist hübsch! </body>
Weiterführendes
Für diesen Einstieg soll es nun genug sein. Im nächsten Teil der Serie wird es noch ein paar weiterführende Informationen zu HTML geben, genau genommen über die Verwendung von Tabellen und die Ergänzungssprache CSS.
Wie schon im ersten Teil erwähnt, soll diese Serie nur als Einstiegshilfe dienen. Auch mit dem kommenden Teil wird das Thema HTML nur oberflächlich angekratzt sein – hier zählt jetzt die eigene Motivation zur weiteren Recherche.
Um diese etwas anzuspornen hier noch zwei Links, um das Thema zu vertiefen:
- SELFHTML – Das wohl größe und beste deutschsprachige HTML-Kompendium.
- W3C HTML – HTML-Informationen des World Wide Web Consortiums (Tutorial, Standard, Validation, …).
Weitere Artikel zum Thema:
Dir hat dieser Beitrag gefallen?