Springe zum Inhalt oder Footer
SerloDie freie Lernplattform

HTML

Bild

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:

<Befehl (moeglicher Zusatz)> Inhalt </Befehl>\text{<Befehl (moeglicher Zusatz)> Inhalt </Befehl>}

<!DOCTYPE html>\text{<!DOCTYPE html>}

Anhand des DOCTYPE erkennt der Browser, um welchen Typ von Dokument es sich handelt. Ohne DOCTYPE kann es zu Fehlern kommen.

<html>\color{#cc0000}{\text{<html>}} Hier beginnt das HTML Dokument.

<head>\qquad \color{#006400}{\text{<head>}} Hier beginnt der Kopfbereich (head).

Der Browser erhält Metadaten, also Informationen, über den Inhalt der

Webseite.

<title>\qquad \qquad \color{#660099}{\text{<title>}} Der Titelbereich (title) enthält den Titel der Webseite, der im Kopf des

Browserfensters angezeigt wird.

Titel der Webseite\qquad \qquad \qquad \text{Titel der Webseite}

</title>\qquad \qquad \color{#660099}{\text{</title>}} Hier endet der Titelbereich.

</head>\qquad \color{#006400}{\text{</head>}} Hier endet der Kopfbereich.

<body>\qquad \color{#ff6600}{\text{<body>}} Im Körper (body) des HTML Dokuments ist der eigentliche Inhalt der Seite

sowie die HTML-Tags.

<p>\qquad \qquad \color{#009999}{\text{<p>}} HTML-Tag für einen Textabsatz.

Inhalt der Webseite\qquad \qquad \qquad \text{Inhalt der Webseite}

</p>\qquad \qquad \color{#009999}{\text{</p>}} Hier endet der Textabsatz.

</body>\qquad \color{#ff6600}{\text{</body>}} Hier endet der Körper.

</html>\color{#cc0000}{\text{</html>}} Hier endet das HTML Dokument.

Häufig verwendete Tags

Tag

Bedeutung

<p>\text{<p>} Text </p>\text{</p>}

paragraph - Bildet einen Absatz.

<br>\text{<br>}

break - Text geht in der nächsten Zeile weiter.

Diesen Tag musst du nicht schließen.

<h1>\text{<h1>} Überschrift </h1>\text{</h1>}

headline - die Zahl gibt die Größe der Überschrift an.

<h1>\Huge\text{<h1>} bis <h6>\small\text{<h6>}

<a href="Link">Text</a>\text{<a href="Link">Text</a>}

Internet Links einfügen

Beispiel:

<a href="https://de.serlo.org">Serlo</a>

ergibt

Serlo

<img src="Bild Dateipfad"\text{<img src="Bild Dateipfad"}

alt="Beschreibung">\text{alt="Beschreibung">}

Bilder einfügen

Bild Dateipfad ist der Speicherort auf dem

Computer, online funktioniert das mit der

Bildadresse.

Beispiel:

<img scr="https://de.serlo.org/assets/images/de/about_serlo.svg" width="200" alt="Serlo Logo">

<strong>\text{<strong>}Wichtig</strong>\text{</strong>}

<b>\text{<b>}Wichtig</b>\text{</b>}

Wichtige Begriffe - in der Regel fett hervorgehoben.

<em>\text{<em>}Wichtig</em>\text{</em>}

<i>\text{<i>}Wichtig</i>\text{</i>}

Anders betonte Begriffe, wie Fachbegriffe

- In der Regel kursiv.

<sup>\text{<sup>}hochgestellt </sup>\text{</sup>}

Hochgestellter Text

Beispiel: x<sup>y</sup>

ergibt: xyx^y

<sub>\text{<sub>}tiefgestellt</sub>\text{</sub>}

Tiefgestellter Text

Beispiel: x<sub<y</sub>

ergibt: xyx_y

<hr>\text{<hr>}

waagerechter Trennstrich

Diesen Tag musst du nicht schließen.

<!- -\text{<!- -} Kommentar - ->\text{- ->}

Kommentar - Der Inhalt wird vom Browser ignoriert.

Übungen

Schreibe eine Webseite mit mindestens einem Titel, einer Überschrift, einem Link und einem Bild.

Du hast noch nicht genug vom Thema?

Hier findest du noch weitere passende Inhalte zum Thema:

Artikel


Dieses Werk steht unter der freien Lizenz
CC BY-SA 4.0 → Was bedeutet das?