Hier erfahren Sie einiges über Html.
Mit Html können Sie professionelle Website`s erstellen.
Es ist nicht so schwer wie Sie denken.
Nehmen Sie sich einbisschen Zeit um etwas über Html zu lernen.
Was ist hinter der Oberfläche einer Web-Seite verborgen? Wie können Sie selber Web-Seiten erstellen? Wir lernen die Sprache des Webs kennen und erarbeiten die Grundlagen zum Gestalten von Webseiten.
Eine einfache HTML-Seite sieht so aus:
<html>
Meine erste Webseite in HTML
html>Die einzelnen Beschreibungen in Spitzklammern () werden Tag genannt. Für jeden Tag wird ein Anfangs-Tag (zum Beispiel:
) und ein Schluss-Tag (
) gesetzt. Der Inhalt zwischen Anfangs- und Schluss-Tag erhält die entsprechenden Eigenschaften.
| Tabelle einiger HTML-Tags:-Tags: | |
| «Kopf»-Bereich des HTML-Dokuments |
| Titel der Web-Seite |
| Haupt-(Inhalt-)Bereich der Web-Seite |
| steht für «header», Text wird als Überschrift der höchsten Gliederungsstufe dargestellt |
| Überschrift eine Stufe tiefer als |
| steht für «paragraph», auf Deutsch «Absatz» |
| steht für «emphasis», Text erhält Betonung, wird meist kursiv dargestellt |
| Text erhält starke Betonung, wird meist fett dargestellt |
| Erzeugt eine unnummerierte Liste mit Aufzählungspunkten |
Praxis-Tipp: Unterschiede je nach Browser
Nicht mit allen Browsern, nicht mit allen Versionen und nicht auf allen Btriebssystemen werden HTML-Dokumente genau gleich dargestellt. Es gibt unter Umständen grosse Differenzen. Das liegt einerseits an fehlerhaftem HTML-Code, andererseits an abweichenden Interpretationen der HTML-Tags von den verschiedenen Browsern. Es empfiehlt sich daher dringend, Web-Seiten auf verschiedenen Browsern (auch alten Versionen) und Plattformen zu testen.
Semantische Verwendung von HTML-Tags
HTML ist nicht ein Mittel zur visuellen Gestaltung. HTML ist Beschreibung («Markup») und HTML-Tags geben dem beschriebenen Text Bedeutung.
Zum Beispiel ist eine-Überschrift nicht einfach ein Titel in grossen, fetten Buchstaben, sondern steht für die oberste Stufe in einer logischen hierarchischen Gliederung.
Weitere HTML-Tags mit deutlichen semantischen Eigenschaften sind (starke Betonung), (zitierter Text), und (Adressinformationen).
Werden HTML-Tages semantisch verwendet, enthalten Hypertexte auch für Maschinen lesbare Bedeutung. In Zukunft sollen in einem «semantischen Web» Informationen noch treffender bewertet und dadurch effizienter ausgetauscht werden können.
Hyperlinks
Der Tag für einen Link sieht so aus:
Die Angabe «href="…"» ist ein sogenanntes Attribut zum HTML-Tag (steht für «anchor», auf Deutsch «Anker», was Verknüpfung bedeutet). Als Wert des href-Attributs steht die URL des Dokuments, auf das verwiesen wird. Die URL verweist also an den genauen Ort, wo sich das angesteuerte Ziel-Dokument befindet. Entweder wird die gesammte URL (inklusive «http://» und Servername) oder die «relative» URL angegeben. Was «relativ» heisst, geht aus der
folgenden Tabelle hervor. Relative URLs sind die Fälle 1 bis 3.
Ort URL 1 Das Ziel-Dokument befindet sich im selben Verzeichnis, wie die Seite, auf der der Link steht. Die URL lautet nur auf den Namen des HTML-Dokuments (wie in unserem Beispiel «andereseite.html»). 2 Das Ziel-Dokument befindet sich in einem Unterverzeichnis (tieferere Hierarchiestufe). Die URL lautet auf «verzeichnis/andereseite.html». 3 Das Ziel-Dokument befindet sich in einem Verzeichnis höherer Hierarchiestufe. Die URL lautet auf «../andereseite.html» («../» weist auf die höhere Hirarchiestufe zurück). 4 Das Ziel-Dokument befindet sich auf einem anderen Web-Server im Internet. Die URL lautet auf «http://www.andererserver.com/andereseite.html». 5 Das Ziel ist nicht eine Web-Seite, sondern soll das Senden einer E-Mail ermöglichen. Die URL lautet auf «mailto:info@domain.ch».
Grafik
Der Tag zum Einfügen eines Bildes in eine Web-Seite sieht so aus:
Das img-Tag hat keinen Schluss-Tag. Im Attribut «src» steht – wie beim Link – die komplette oder die relative URL der Datei, in diesem Fall eine Grafik-Datei.
Zwei Grafik-Formate sind im Web gebräuchlich: GIF und JPEG.
GIF-Bilder werden mit bis zu 256 Farben abgespeichert. Das ist genug für Texte und Grafiken aber meist zu wenig für Fotos. GIF erlaubt Animationen und kann transparente Flächen enthalten. Dateien im GIF-Format haben die Endung «.gif».
JPEG-Bilder können mit bis zu 16,7 Millionen Farben gespeichert werden. Das JPEG-Format eignet sich deshalb optimal für Fotos. Wählbar sind verschiedene Komprimierungsstufen, die die Dateigrösse bestimmen. Sie haben auch Einfluss auf die Bildqualität. Dateien im JPEG-Format haben die Endung «.jpeg» oder «.jpg».
Jede Grafik sollte mit den Attributen «width», «height» und «alt» versehen werden. Die Angaben «width» und «height» geben Breite und Höhe des Bildes in Pixeln an. «alt» steht für «Alternative Bildbeschreibung» und sollte einen Text enthalten, der angezeigt wird, falls ein Browser das Bild nicht darstellen sollte.
Multimedia
Es gibt zahlreiche andere Datei-Formate, die in eine Webseite eingebunden werden können:
Flash («.swf») ist ein Multimedia-Format, mit dem sich Animationen und ganze Websites erzeugen und anzeigen lassen.
Video kann in verschiedenen Formaten (zum Beispiel «.mov», «.avi») in Webseiten eingebunden werden. Ebenso Audio also Ton-Dateien («.wav», «.mp3»).
In diesem Tutorial wird nicht weiter auf Multimedia-Formate eingegangen.
Tabellen
Um Informationen in Tabellenform wiederzugeben, hält HTML spezielle Tags bereit.
Eine Tabelle besteht aus Spalten und Reihen. So entstehen Tabellen-Zellen.
Der HTML-Code einer einfachen Tabelle sieht so aus:
Reihe 1, Zelle 1
Reihe 1, Zelle 2
Reihe 1, Zelle 3
Reihe 2, Zelle 1
Reihe 2, Zelle 2
Reihe 2, Zelle 3
Und das ist das Resultat im Browser:
Reihe 1, Zelle 1 Reihe 1, Zelle 2 Reihe 1, Zelle 3 Reihe 2, Zelle 1 Reihe 2, Zelle 2 Reihe 2, Zelle 3
Der HTML-Tag
umschliesst die gesamte Tabelle. Das Attribut «border» gibt die Stärke der Umrandung an. Das Tag
Werden HTML-Tages semantisch verwendet, enthalten Hypertexte auch für Maschinen lesbare Bedeutung. In Zukunft sollen in einem «semantischen Web» Informationen noch treffender bewertet und dadurch effizienter ausgetauscht werden können.
Hyperlinks
Der Tag für einen Link sieht so aus:
Die Angabe «href="…"» ist ein sogenanntes Attribut zum HTML-Tag (steht für «anchor», auf Deutsch «Anker», was Verknüpfung bedeutet). Als Wert des href-Attributs steht die URL des Dokuments, auf das verwiesen wird. Die URL verweist also an den genauen Ort, wo sich das angesteuerte Ziel-Dokument befindet. Entweder wird die gesammte URL (inklusive «http://» und Servername) oder die «relative» URL angegeben. Was «relativ» heisst, geht aus der
folgenden Tabelle hervor. Relative URLs sind die Fälle 1 bis 3.
| Ort | URL | |
|---|---|---|
| 1 | Das Ziel-Dokument befindet sich im selben Verzeichnis, wie die Seite, auf der der Link steht. | Die URL lautet nur auf den Namen des HTML-Dokuments (wie in unserem Beispiel «andereseite.html»). |
| 2 | Das Ziel-Dokument befindet sich in einem Unterverzeichnis (tieferere Hierarchiestufe). | Die URL lautet auf «verzeichnis/andereseite.html». |
| 3 | Das Ziel-Dokument befindet sich in einem Verzeichnis höherer Hierarchiestufe. | Die URL lautet auf «../andereseite.html» («../» weist auf die höhere Hirarchiestufe zurück). |
| 4 | Das Ziel-Dokument befindet sich auf einem anderen Web-Server im Internet. | Die URL lautet auf «http://www.andererserver.com/andereseite.html». |
| 5 | Das Ziel ist nicht eine Web-Seite, sondern soll das Senden einer E-Mail ermöglichen. | Die URL lautet auf «mailto:info@domain.ch». |
Grafik
Der Tag zum Einfügen eines Bildes in eine Web-Seite sieht so aus:
Das img-Tag hat keinen Schluss-Tag. Im Attribut «src» steht – wie beim Link – die komplette oder die relative URL der Datei, in diesem Fall eine Grafik-Datei.
Zwei Grafik-Formate sind im Web gebräuchlich: GIF und JPEG.
GIF-Bilder werden mit bis zu 256 Farben abgespeichert. Das ist genug für Texte und Grafiken aber meist zu wenig für Fotos. GIF erlaubt Animationen und kann transparente Flächen enthalten. Dateien im GIF-Format haben die Endung «.gif».
JPEG-Bilder können mit bis zu 16,7 Millionen Farben gespeichert werden. Das JPEG-Format eignet sich deshalb optimal für Fotos. Wählbar sind verschiedene Komprimierungsstufen, die die Dateigrösse bestimmen. Sie haben auch Einfluss auf die Bildqualität. Dateien im JPEG-Format haben die Endung «.jpeg» oder «.jpg».
Jede Grafik sollte mit den Attributen «width», «height» und «alt» versehen werden. Die Angaben «width» und «height» geben Breite und Höhe des Bildes in Pixeln an. «alt» steht für «Alternative Bildbeschreibung» und sollte einen Text enthalten, der angezeigt wird, falls ein Browser das Bild nicht darstellen sollte.
Multimedia
Es gibt zahlreiche andere Datei-Formate, die in eine Webseite eingebunden werden können:
Flash («.swf») ist ein Multimedia-Format, mit dem sich Animationen und ganze Websites erzeugen und anzeigen lassen.
Video kann in verschiedenen Formaten (zum Beispiel «.mov», «.avi») in Webseiten eingebunden werden. Ebenso Audio also Ton-Dateien («.wav», «.mp3»).
In diesem Tutorial wird nicht weiter auf Multimedia-Formate eingegangen.
Tabellen
Um Informationen in Tabellenform wiederzugeben, hält HTML spezielle Tags bereit.
Eine Tabelle besteht aus Spalten und Reihen. So entstehen Tabellen-Zellen.
Der HTML-Code einer einfachen Tabelle sieht so aus:
Reihe 1, Zelle 1 Reihe 1, Zelle 2 Reihe 1, Zelle 3 Reihe 2, Zelle 1 Reihe 2, Zelle 2 Reihe 2, Zelle 3
Und das ist das Resultat im Browser:
| Reihe 1, Zelle 1 | Reihe 1, Zelle 2 | Reihe 1, Zelle 3 |
| Reihe 2, Zelle 1 | Reihe 2, Zelle 2 | Reihe 2, Zelle 3 |
Der HTML-Tag umschliesst die gesamte Tabelle. Das Attribut «border» gibt die Stärke der Umrandung an. Das Tag
Das Attribut «border» kann weggelassen werden, dann gilt der Wert 0 (Null). Ohne Umrandung werden Tabellen so «unsichtbar».
Tabellen werden im Webdesign häufig eingesetzt, um eine Zellenstruktur über die ganze Webseite zu schaffen. Aus unserem Tabellen-Beispiel lässt sich einfach ein dreispaltiges Seiten-Layout erstellen.