Buddenbaum.de

**** www.BUDDENBAUM.DE ****
Start Layout Spielereien Gästebuch Weblog Tourtipp Fußballtipp
Sonnenwinkel Phrasen News Fotosuche Holen HTML

ready.

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:

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

SelfHTML - die beste Quelle für alles rund um HTML, von der hier teilweise geklaut wurde
World Wide Web Consortium - Hier werden die Standards fürs Web festgelegt, beschrieben, geprüft und dokumentiert.
Michael Jendryschiks Einführung in XHTML etc.

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.

█