# 1.4 Basiswissen HTML

Im weiteren Verlauf dieses Moduls werden wir mit PHP programmieren. In dem Browser wird aber kein PHP ausgeführt, sondern "nur" HTML (+ JavaScript + CSS). Wenn wir beispielsweise ein Formular in einem Browser mittels PHP-Script erstellen und anschließend die Daten an den Webserver übertragen und mit dem PHP-Script auswerten, dann wird an den Browser immer nur HTML (+ JavaScript + CSS) übermittelt.

Beispiel

Auf dem Browser soll eine Überschrift und eine Textzeile angezeigt werden. Dann ist hierzu folgender HTML-Code notwendig:

    1 <h1>Mein Thema</h1>
    2 <p>Meine erste Textzeile</p>

In PHP schreiben wir dann:

    1 echo "<h1>Mein Thema</h1>";
    2 echo "<p>Meine erste Textzeile</p>";

## Das HTML-Grundgerüst

HTML besteht aus einem Head und einem Body. Der Body enthält die im Browserfenster angezeigten Daten.

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    <!doctype html>
    <html lang="de">
    <head>
    <title>Mein Titel</title>
    <link rel="stylesheet" href="main.css" media="screen">
    <meta charset="ut£-8">
    <meta name="author" content="JT">

    </head>

    <body>
    </body>
    </html>

## Einige HTML-Elemente

Im Rahmen dieses Moduls erstellen wir nur wenige HTML-Inhalte ohne die zugehörige HTML-Seitenstrukturen.

Element | Beschreibung
--- | ---
`<h1>...<h6>` | Mit `<h1>...<h6>` werden Überschriften in sechs verschiedenen Hierarchieebenen definiert.
`<p>...<\p>` | Erstellen eines Absatzes.
`<br>` | Erzeugen eines Zeilenumbruchs.
`<hr>` | Erzeugen einer horizontalen Linie.
`<em>` | Kennzeichnet einen wichtigen Text.
`<strong>` | Kennzeichnet einen besonders wichtigen Text.
`<q>` | Zur Kennzeichnung eines kurzen Zitats innerhalb eines Absatzes (als inline-Element).

## Links

Links haben, egal ob als echter Link oder als Anker, immer folgende Struktur:

    <a href="Pfad zum Ziel" target="Zielfenster">Angezeigter Linktext</a>

Das Attribut `target` ist dabei optional. Wird es nicht angegeben, wird der Link im gleichen Fenster geöffnet. Mit `target="_blank"` kann der Link in einem neuen Fenster geöffnet werden.

- Absolute Links, z.B. `href="https://www.example.com"` verweisen auf externe Angebote.
- Relative Links, z.B. `href="index.html"`, werden innerhalb der Website für die interne Verlinkung genutzt.

Hinweis

Beim Verlinken ist es wichtig, den Unterschied zwischen absoluten und relativen Pfaden zu verstehen, um sicherzustellen, dass Links korrekt funktionieren.

## Grafiken einbinden mit `<img>`

Um eine Grafik in eine Seite einzubinden, verwendet man das Element `<img>`:

    <img src="Pfad-zur-Grafik" alt="Alternativtext" title="Tooltip">

Attribute:

- `src` (Pflichtattribut) – enthält die Pfadangabe zum Bild.
- `alt` – gibt dem Bild einen Alternativtext, falls es nicht dargestellt werden kann.
- `title` – bietet die Möglichkeit, der Grafik einen Text zu geben, der beim Darüberfahren mit der Maus angezeigt wird.

Mit den Attributen `width` und `height` kann die Größe der Grafik in Pixeln angepasst werden.

Beispiel

Beispiel für die Einbindung einer Grafik

    <img src="./media/bild.jpg" alt="Beschreibung des Bildes" title="Titel des Bildes">