Eine Webseite besteht aus mehr als nur Text. HTML kann externe Objekte (Bilder, Töne, Videos usw.) einbinden sowie Tabellen und Listen erstellen.
In der folgenden Definitionen sind nur die wichtigsten Attribute und Tags angegeben. Weitere finden sie in ihrer HTML-Referenz. Beachten sie, dass auch für die folgenden Tags CSS zur Formatierung genutzt werden sollte.
Weitere Tags finden sie im Anhang: Wichtige Tags und im Anhang: Semantische Tags. Nur zur Vollständigkeit hier der Verweis zum Anhang: Formatierende Tags.
Bilder können sie als <img> oder <object> mit dem entsprechenden Typ einbinden. Auch externe Webseiten können sie als <iframe> oder <object> mit dem Typ "text/html" einbinden. <object> soll in Zukunft alle anderen Tags dieser Art ersetzen. Zumindest zur Zeit funktioniert das noch nicht in jedem Browser.
Beispiele zu den Tags finden sie im weiteren Verlauf dieser Lektion.
| Format | Vor-/Nachteile |
|---|---|
| jpg | Bilder mit variabler Komprimierung und vollem Farbspektrum. |
| gif | Bilder mit fester Komprimierung und geringen Farbspektrum. Kann durchsichtig und bewegt sein. |
| png | Mischung aus jpg und gif (volles Farbspektrum und durchsichtig). |
| svg | Grafiken im Vektorformat (d.h. aus Punkten, Linien und Flächen zusammengesetzt) |
Grafikformate in der Wikipedia.
Wir haben schon bei einigen HTML-Tags das type-Attribut kennengelernt. Dieses gibt den sogenannten MIME-Type (Multipurpose Internet Mail Extensions) einer Datei an. Windows erkennt den Typ einer Datei über die Endung. Im Web regelt das der MIME-Type, welcher ursprünglich aus dem E-Mail Bereich kommt.
| Mime-Typ | Beschreibung |
|---|---|
| text/text | Reiner Text (.txt) |
| text/html | Reiner Text im HTML-Format (.html) |
| text/css | Reiner Text im CSS-Format (.css) |
| text/javascript | Reiner Text mit JavaScript-Code (.js) |
| image/gif | Bild im GIF-Format (.gif) |
| audio/mpeg | Musik im MP3-Format (.mp3) |
| video/mpeg | Video im MPEG-Format (.mpg) |
Referenz: MIME-Typen im selfHTML Wiki.
Liste und Tabellen lassen sich auch ineinander schachteln.
<ul> <li>Morgens <ol> <li>geh ich nach Haus</li> <li>schlaf ich aus</li> </ol> </li> <li>Abends <ol> <li>geh ich in die Bar</li> <li>mach ich mich zuhause rar</li> </ol> </li> </ul>
Das sieht dann im Browser folgendermaßen aus:
<table border="1"> <tr> <td>1a</td><td>1b</td><td>1c</td> </tr> <tr> <td>2a</td><td>2b</td><td>2c</td> </tr> <tr> <td>3a</td><td>3b</td><td>3c</td> </tr> <tr> <td colspan="3"> <table> <tr> <td>4 1a</td><td>4 1b</td> </tr> <tr> <td>4 2a</td><td>4 2b</td> </tr> </table> </td></tr> </table>
Das sieht dann im Browser folgendermaßen aus:
| 1a | 1b | 1c | ||||
| 2a | 2b | 2c | ||||
| 3a | 3b | 3c | ||||
| ||||||
<table border="1"> <tr> <td>1a</td><td>1b</td><td>1c</td> </tr> <tr><td colspan="3"> <ol> <li>Punkt 1</li> <li>Punkt 2</li> </ol> </td></tr> </table>
Das sieht dann im Browser folgendermaßen aus:
| 1a | 1b | 1c |
| ||
Übung:
Schlagen sie die Tags in der Referenz nach und prüfen sie was sie noch für Möglichkeiten mit diesen haben. Bauen sie diese Tags in ihre Visitenkarte ein.