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.

Editor

Grundstruktur von HTML

HTML verwendet Tags. Das bedeutet, dass die Befehle immer nach dem gleichen Schema aufgebaut sind:

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


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

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


%% \color{#cc0000}{\text{<html>}} %%

Hier beginnt das HTML Dokument.


%% \qquad \color{#006400}{\text{<head>}} %%

Hier beginnt der Kopfbereich (head). Der Browser erhält Metadaten, also Informationen, über den Inhalt der Webseite.


%% \qquad \qquad \color{#660099}{\text{<title>}} %%

Der Titelbereich (title) enthält den Titel der Webseite, der im Kopf des Browserfensters angezeigt wird.


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


%% \qquad \qquad \color{#660099}{\text{</title>}} %%

Hier endet der Titelbereich.


%% \qquad \color{#006400}{\text{</head>}} %%

Hier endet der Kopfbereich.


%% \qquad \color{#ff6600}{\text{<body>}} %%

Im Körper (body) des HTML Dokuments ist der eigentliche Inhalt der Seite sowie die HTML-Tags.


%% \qquad \qquad \color{#009999}{\text{<p>}} %%

HTML-Tag für einen Textabsatz.


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


%% \qquad \qquad \color{#009999}{\text{</p>}} %%

Hier endet der Textabsatz.


%% \qquad \color{#ff6600}{\text{</body>}} %%

Hier endet der Körper.


%% \color{#cc0000}{\text{</html>}} %%

Hier endet das HTML Dokument.


Häufig verwendete Tags


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

paragraph - Bildet einen Absatz.


%%\text{<br>}%%

break - Text geht in der nächsten Zeile weiter. Diesen Tag musst man nicht schließen.


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

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

h1: <h1>

h2: <h2>

h6: <h6>

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

Internet Links einfügen

Beispiel: Serlo

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

%%\text{<img src="Bild Dateipfad"}%% %%\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" alt="Serlo Logo">

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

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

Wichtige Begriffe - in der Regel fett hervorgehoben.


%%\text{<em>}%% Betonung %%\text{</em>}%%

%%\text{<i>}%% Betonung %%\text{</i>}%%

Anders betonte Begriffe wie Fachbegriffe - In der Regel kursiv.


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

Hochgestellter Text, z.B. xy .


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

Tiefgestellter Text, z.B. xy .


%%\text{<hr>}%%

Trennstrich:



%%\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.

Beispiel Lösung

Es gibt viele Lösungsmöglichkeiten. Hier siehst du eine davon:

<!DOCTYPE html>
<html>
    <head>
        <title>
            Titel
        </title>
    </head>
    <body>
        <h1>
            Überschrift
        </h1>
        <a href="https://de.serlo.org/">Link</a>
        <br>
        <img src="https://de.serlo.org/assets/images/home_participate.svg" alt="Logo">
    </body>
</html>
Kommentieren Kommentare