Hypertext Markup Language, oder kurz HTML, wird dazu verwendet Inhalte auf Webseiten darzustellen. HTML dient dazu, die Webseiten zu strukturieren. Für das Design werden meistens andere Sprachen wie CSS verwendet. Die aktuelle Version ist HTML5.
Grundstruktur von HTML
HTML verwendet Tags. Das bedeutet, dass die Befehle immer nach dem gleichen Schema aufgebaut sind:
Anhand des DOCTYPE erkennt der Browser, um welchen Typ von Dokument es sich handelt. Ohne DOCTYPE kann es zu Fehlern kommen.
Hier beginnt das HTML Dokument.
Hier beginnt der Kopfbereich (head).
Der Browser erhält Metadaten, also Informationen, über den Inhalt der
Webseite.
Der Titelbereich (title) enthält den Titel der Webseite, der im Kopf des
Browserfensters angezeigt wird.
Hier endet der Titelbereich.
Hier endet der Kopfbereich.
Im Körper (body) des HTML Dokuments ist der eigentliche Inhalt der Seite
sowie die HTML-Tags.
HTML-Tag für einen Textabsatz.
Hier endet der Textabsatz.
Hier endet der Körper.
Hier endet das HTML Dokument.
Häufig verwendete Tags
Tag | Bedeutung |
|---|---|
Text | paragraph - Bildet einen Absatz. |
break - Text geht in der nächsten Zeile weiter. Diesen Tag musst du nicht schließen. | |
Überschrift | headline - die Zahl gibt die Größe der Überschrift an. bis |
Internet Links einfügen Beispiel: <a href="https://de.serlo.org">Serlo</a> ergibt | |
Bilder einfügen Bild Dateipfad ist der Speicherort auf dem Computer, online funktioniert das mit der Bildadresse. Beispiel:
| |
Wichtig Wichtig | Wichtige Begriffe - in der Regel fett hervorgehoben. |
Wichtig Wichtig | Anders betonte Begriffe, wie Fachbegriffe - In der Regel kursiv. |
hochgestellt | Hochgestellter Text Beispiel: x<sup>y</sup> ergibt: |
tiefgestellt | Tiefgestellter Text Beispiel: x<sub<y</sub> ergibt: |
waagerechter Trennstrich Diesen Tag musst du nicht schließen. | |
Kommentar | Kommentar - Der Inhalt wird vom Browser ignoriert. |
Übungen
Schreibe eine Webseite mit mindestens einem Titel, einer Überschrift, einem Link und einem Bild.
Beispiel Lösung
Es gibt viele Lösungsmöglichkeiten. Hier siehst du eine davon.
Du kannst den Text kopieren und in einer Textdatei speichern. Nenne diese z.B. "test.html". Wenn du die dann mit einem Browser öffnest, siehst du das Ergebnis. Wenn das Bild in der Originalgröße eingefügt wird, ist es etwas zu groß , darum wurde die Größe mit dem Zusatz width="300" auf 300 Pixel festgelegt.
<!DOCTYPE html>
<html>
<head>
<title>
Meine erste Seite
</title>
</head>
<body>
<h3>Dies ist eine Überschrift</h3>
<p>Etwas Text</p>
<img src="https://de.serlo.org/_assets/img/serlo-logo.svg" width="300" alt="huch">
<p> <a href="https://de.serlo.org">Link zur Serlo-Startseite</a></p>
</body>
</html>