Start Layout Spielereien- Sonnenwinkel
- Phrasen
- News
- Fotosuche
- Holen
- HTML
Gästebuch Weblog Tourtipp Fußballtipp Start Layout Spielereien Gästebuch Weblog Tourtipp FußballtippDiese kurze Einführung erhebt keinen Einspruch auf Vollständigkeit; sie gibt nur ein paar Einsteigertipps, wie man Seiten ins Web bringt.
"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.
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.
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">
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>
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>
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>
h1, h2, h3, h4, h5, h6 bezeichnen Überschriften, wobei h1
das höchste Level darstellt.
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.
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.
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.
ul begrenzt eine ungeordnete Liste, ol eine geordnete. li
bezeichnet die einzelnen Listeneinträge.
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.