HTML
Diese kurze Einführung erhebt keinen Einspruch auf Vollständigkeit; sie gibt nur ein
paar Einsteigertipps, wie man Seiten ins Web bringt.
Wie kommt die Seite auf den Bildschirm?
"Betriebssystem" einer Website ist der Webserver, üblicherweise Apache.
Dies ist ein Programm, das auf einem Rechner, der ständig mit dem Internet verbunden ist, installiert ist.
Wenn ein Browser auf diesen Rechner zugreift, kümmert sich Apache darum, die angeforderten Inhalte auszuliefern.
Meistens besteht der Inhalt aus einer HTML-Datei, in der oft noch weitere Dateien aufgerufen werden.
Beispielsweise ist eine CSS-(Cascading Style Sheets)-Datei für das Aussehen der Seite zuständig, und auch Bilder
oder Multimediainhalte sind eigene Dateien.
Grundlegendes
HTML (Hypertext Markup Language) ist – wie der Name besagt – eine Auszeichnungssprache.
Dies bedeutet, daß Text– oder Seitenteile ausgezeichnet werden können, ihnen wird also ein
Attribut zugewiesen. HTML ist also weder eine Programmiersprache, noch eine Seitenbeschreibungssprache.
Die Auszeichnung erfolgt über sogenannte Tags. Diese stehen in spitzen Klammern.
Da die meisten Tags einen Bereich markieren, gibt es Endtags, die das Ende des Bereichs anzeigen. Diese
tragen vor dem Namen des Tags einen Schrägstrich (Slash). Eine typische Auszeichnung sieht also folgendermaßen
aus:
<em>Betont</em>
Die Auszeichnungen können verschachtelt werden, dabei ist allerdings zu beachten, daß
zuletzt geöffnete Tags zuerst geschlossen werden. Groß- und Kleinschreibung spielt keine Rolle, in zukünftigen
Versionen könnte aber Kleinschreibung vorgeschrieben werden.
Dialekte
Da es verschiedene (aktuelle und gültige sowie veraltete) Dialekte von HTML gibt und HTML
im Grunde nur eine XML- oder SGML-Sprache ist, sollte in einem HTML-Dokument als erstes der Dokumenttyp
angegeben werden, z.B.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Grundstruktur
HTML-Dokumente bestehen aus einem Kopf (Head) und einem Körper (Body).
Der Kopf enthält Informationen über die Seite wie z.B. den Titel, der Körper enthält den Seiteninhalt. Daraus
ergibt sich diese Grundstruktur einer HTML-Seite:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd">
<html>
<head>
<title>Titel</title>
</head>
<body>
Blabla, bla.
</body>
</html>
Attribute
Tags können durch Attribute genauer definiert werden, manche sind ohne Attribut gar sinnlos.
Die Attribute werden innerhalb der spitzen Klammern des eröffnenden Tags als Attributname=Attributwert
angegeben. Ein Bild kann z.B. folgendermaßen eingebunden werden:
<img src="bilder/bild.jpg" width=130 height=300>
Wichtige Tags
Links
Links sind die Basis von Hypertext.
Wahrscheinlich werden sie deshalb einfach mit dem Tag a ausgezeichnet.
Sinnvoll wird ein Link natürlich erst, wenn auch irgendwo hingelinkt wird. Das Ziel wird mit dem Attribut
href angegeben. Attributwert ist dabei der Pfad zum Link. Das kann ein relativer Pfad sein,
wenn das Ziel innerhalb der eigenen Site liegt, oder ein vollständiger URL, wenn es sich um eine
externe Seite handelt.
<a href="http://de.wikipedia.org/wiki/Hypertext">Hypertext</a>
Überschriften
h1, h2, h3, h4, h5, h6 bezeichnen Überschriften, wobei h1
das höchste Level darstellt.
Tabellen
Tabellen sind sehr beliebte Elemente in Webseiten. Oft werden sie mißbraucht zum Seitendesign, hiervor sollte allerdings
Abstand genommen werden. Design sollte in css erstellt werden.
table begrenzt die Tabelle, tr erstellt eine neue Zeile,
td eine neue Spalte. th bezeichnet eine Kopfspalte; die Tabelle kann
mit thead und tbody weiter unterteilt werden. Eine
caption-Element nach dem einleitenden table definiert eine
Tabellenbeschriftung. Wichtige Attribute für die Tabellenformatierung sind border
für den Rahmen, cellspacing für den Abstand zwischen den Zellen und
cellpadding für den Abstand zwischen Zellenrand und -inhalt. Mit colspan
kann angegeben werden, daß eine Zelle mehrere Spalten umfassen soll, rowspan gibt die Anzahl
Zeilen an, die eine Zelle umfassen soll.
Textauszeichnungen
em, strong, big, small sind Beispiele für logische Textauszeichnungstags. Sie sind grundsätzlich
Elementen wie b (bold), i (italic), u (underlined) und vor allem font
vorzuziehen.
Absätze
p begrenzt einen Absatz (Paragraph), br (Break) bezeichnet einen Zeilenumbruch,
hr (horizontal rule) fügt einen waagerechten Strich ein; diese beiden Tags benötigen kein Endtag.
Listen
ul begrenzt eine ungeordnete Liste, ol eine geordnete. li
bezeichnet die einzelnen Listeneinträge.
Formatierung
Tags werden unterteilt in Inline- und Block-Elemente.
Block-Elemente (z.B. p) entsprechen einem Textabsatz, Inline-Elemente
(z.B. em) können innerhalb einer Zeile auftreten. Zu Formatierungszwecken werden oft die
inhaltslosen Elemente div (Block) und span (Inline) verwendet.
Mit Hilde von CSS können Elementen Formatierungen zugewiesen werden, z.B. eine Hintergrundfarbe oder eine Schriftart.
CSS kann in einer zentralen Datei das Aussehen einer Website aus hunderten von Seiten regeln (diese müssen dann
die CSS-Datei nur im Seitenkopf aufrufen), es können aber auch
CSS-Formatierungen für einzelne Elemente direkt im HTML-Quelltext als Attribut angegeben werden.
CSS unterscheidet sich in der Syntax von HTML. Hier Beispiele für CSS-Formatierungen:
<h1 style="font-family:Garamond; font-size:48pt; color:red;">Überschrift<h1>
oder in einer eigenen Datei:
h1 {font-family:Garamond; font-size:48pt; color:red;}
Diese könnte in der HTML-Seite beispielsweise mit
<link rel="stylesheet" type="text/css" href="styles.css">
eingebunden werden.
Weitere Quellen
Allgemeine Tips
- Wenn der Browser eine Seite anzeigt, hat er auch den Quelltext geladen. Den kann man sich
mit einem Rechtsklick in die Seite anzeigen lassen und schauen, wie ein anderer
Webautor etwas verwirklicht hat.
- Komm nicht auf die Idee, den Quelltext zu verstecken, das ist sinnlos.
- "Optimiere" die Seite nicht für bestimmt Browser,
Bildschirmauflösungen, Betriebssysteme oder sonstwas.
- Je einfacher der Quelltext, umso besser kommen exotische Browser, behinderte User, Handys und
auch Google damit zurecht.
- Überspringe einfach die Stufe, auf der es auf möglichst viele blinkende und
bewegte Effekte ankommt. Die 90er sind vorbei.
- Und fang bloß nicht mit Frames an! Komfortable Menus kriegt man besser mit PHP
oder SSI oder ASP oder einem intelligenten Editor
oder mit Copy & Paste oder oder oder hin.
- Und Flash ist auch meistens böse.
|