Webdesign mit CSS, HTML und Javascript
Stil mit {stil}
 Neue Kameras und Objektive | Bildgestaltung und Bildbearbeitung Fotografie von ihrer besten Seite: foto.5lux.de |
Sep 2008
HTML-Tags und der Aufbau des (X)HTML-Dokuments
HTML-Tags strukturieren das Dokument und versorgen den Browser mit Informationen. HTML-Tags sind Anweisungen in spitzen Klammern.
HTML-Tags
<html> <head> … </head> <body> … </body> </html>
Die meisten HTML-Tags bestehen aus einem öffnenden und einem schließenden HTML-Tag. Das öffnende Tag <html> teilt dem Browser mit: »Hier beginnt ein HTML-Dokument«. Das schließende </html>-Tag sagt: »Hier endet das HTML-Dokument«.
Innerhalb eines Tags dürfen weitere Tags liegen: HTML-Tags dürfen ineinander verschachtelt werden. Im Beispiel oben liegen das head- und body-Tag zwischen dem öffnenden und schließenden html-Tag.
Ein HTML-Dokument besteht aus einem Dokumentenkopf und einem Dokumentenkörper. Im HEAD-Element liegen Informationen über das Dokument. Was zwischen <head> und </head> steht, wird vom Browser nicht auf der Seite dargestellt. Nur das <title>-Tag bildet eine Ausnahme. Sein Inhalt wird in der Titelleiste des Browserfensters angezeigt. Der Besucher der Webseite sieht nur, was zwischen dem öffnenden und dem schließenden <body>-Tag steht.
HTML-Seite ohne Tags für die Struktur
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de"> <head> <title>Mein Web-Dokument</title> </head> <body> Lorem ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. … Sed dictum mauris euismod mauris. </body> </html>
oder HTML-Dokument ohne Tags zur Strukturierung im separaten Browserfenster ansehen
HTML-Tags für die Struktur von Webseiten
- Überschriften, Absätze, Liste und Tabellen strukturieren den Text. Die Suchmaschine findet keinen Textbrei mehr, sondern kann den Begriffen in Überschriften eine höhere Relevanz zumessen.
HTML-Tags strukturieren und formatieren die Inhalte. Was zwischen <h1> und </h1> gesetzt wird, erzeugt einen Zeilenumbruch und wird zu einer großen fetten Überschrift, was zwischen <p> und </p> steht, wird zum Textabsatz mit Zeilenumbruch.
Nicht nur der Leser, sondern auch die Suchmaschinen gehen davon aus, dass prägnante Überschriften etwas über den Inhalt der Seite aussagen. In das <title> Tag setzen wir eine kompakte Beschreibung des Seiteninhalts: »mediaevent.de :: CSS und XHTML :: Einführung in XHTML«. Der Titel der Seite taucht in der Browserleiste auf und stellt die Über-Überschrift dar. Den Seitennamen oder das Motto des Internetauftritts gehört zum Titel, denn die Bookmarks des Besuchers speichern den Seitentitel.
… <body> <h1>Lorem ipsum </h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> <p>Mauris ante neque, vehicula quis, convallis sit amet, vestibulum ornare, arcu. </p> <p>Donec at lorem et elit congue dictum. Cras sapien ligula, rutrum quis, posuere id, faucibus id, risus. Maecenas sed est volutpat arcu adipiscing tempus. Sed dictum mauris euismod mauris.</p> </body>
Oder Beispiel als vollständiges HTML-Dokument im Browserfenster ansehen
Strukturierung von Texten und Daten
| HTML-Tag | Beschreibung/Aussehen | Muster |
|---|---|---|
| h1, h2, … h6 | erzeugt abgestufte Überschriften |
<h1>Lorem ipsum</h1> |
| p | erzeugt einen Textabsatz |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce iaculis dignissim sem. Donec placerat, purus nec convallis auctor, quam augue feugiat metus, id gravida risus tellus vitae urna.</p>
|
| ul, ol | erzeugen ungeordnete bzw. geordnete (durchnummerierte) Listen Ungeordnete Listen werden mit einem führenden Listenpunkt dargestellt, geordnete Listen mit einem Index. In beiden Listen wird jedes Listenelement in li-Tags eingeschlossen. |
<ul>
|
| table | erzeugt eine Tabelle mit tr- und td-Tags <tr>-Tags innerhalb des <table>-Tags stellen die Zeilen der Tabelle dar. Innerhalb der tr-Tags liegen td- oder th-Tags für Tabellenzellen. |
<table border="1" width="260" cellspacing="2" cellpadding="3"> |
Hervorhebung von Texten in HTML-Dokumenten
| HTML-Tag | Beschreibung/Aussehen | Muster |
|---|---|---|
| a | Ein Link oder Anker Lorem ipsum |
<a href="http://www.lipsum.com">Lorem ipsum</a> |
| i, em | kursive Schrift Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
Lorem ipsum dolor sit amet, <em>consectetuer adipiscing</em> elit. |
| b, strong | fette Schrift Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
Lorem ipsum dolor sit amet, <strong>consectetuer</strong> adipiscing elit. |
| code | Darstellung als Computer-Code | <code>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</code> |
Bilder auf Webseiten
| HTML-Tag | Beschreibung/Aussehen | Muster |
|---|---|---|
| img | <img scr="bild.png" width="220" height="130" alt="bild.png" /> |