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 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">