Folien



(letzte Synchronisation der PDF-Präsentation: 12.01.2020)

Falls keine PDF-Präsentation zu sehen ist, klicken Sie zum Download hier: Direktdownload PDF-Präsentation

Zeilenumbrüche in HTML

Zeilenumbrüche im HTML-Quellcode werden vom Browser ignoriert.

HTML-Code
  Hallo.   Hallo Welt. Ende.  

führt zur gleichen Ausgabe wie

HTML-Code
  Hallo.Hallo Welt.   Ende.  

nämlich zu

Hallo.Hallo Welt.Ende.

Textabsätze mit p-Tag

Das <p>-Element besteht immer aus einem öffnenden und schließenden Tag. Es definiert einen Absatz. Innerhalb eines Absatzes dürfen keine weiteren block-/absatzerzeugenden Elemente vorkommen (Überschriften, Listen, Tabellen …). Jeder Absatz, der nicht anderweitig als (Text-)Block formatiert ist, muss in <p>-Tags stehen.

Beispiel:

HTML-Code
  <p>Hallo.</p> <p>Hallo Welt.</p> <p>Ende</p>  

führt im Browser zur Ausgabe

Hallo.

Hallo Welt.

Ende

Kommentare in HTML

HTML-Kommentare werden mit <!-- (Anfang) und --> (Ende) markiert. Beispiel:

HTML-Code
  <p>Ich bin ein Dokument.</p> <!-- Das war ein wichtiger Satz. Die p-Tags lernen wir gleich noch kennen. -->  

führt zur Ausgabe

Ich bin ein Dokument.

Alles innerhalb <!-- ... --> wird im Browser nicht angezeigt.

Überschriften mit h1 bis h6

Überschriften wie <h1> bestehen immer aus einem öffnenden und einem schließenden Tag. Dadurch wird eine Überschrift definiert, wobei <h2> eine Unterüberschrift zu <h1> darstellt.

Beispiel:

HTML-Code
  <h1>Hunde</h1> <p>Ich mag Hunde, vor allem Schäferhunde und Doggen.</p> <h2>Schäferhunde</h2> <p>Schäferhunde sind so süß.</p> <h2>Doggen</h2> <p>Doggen sind auch süß, aber ziemlich groß.</p> <h1>Vögel</h1>  

führt zur Ausgabe

HTML-Überschriften, Beispiel (Screenshot)

Übungen

Alle Übungen finden Sie in der Materialsammlung (dort auch alle zusätzlichen Dateien wie Bilder, Klassendiagramme oder HTML-Vorlagen!).

Die aktuelle Übung können Sie hier als txt-File herunterladen.


***** Übungen: HTML - Absätze, Überschriften *****

HTML_4-1: Fehler im HTML-Quellcode finden 1

Berichtigen Sie den folgenden Auszug aus einer HTML-Seite.
WENN SIE fertig sind, kopieren Sie den Quellcode (von "<h1>Vögel" bis "Zeit habe)" in das Dokument
02html/html04_html_absaetze_ueberschriften_uebungsauswertung.html
(ca. Zeile 21) und betrachten Sie das Ergebnis im Browser.

HTML-Code
<h1>Vögel<h1> <p>Ich liebe Vögel sehr, deshalb hier eine Übersicht über die wichtigsten Vögel. <h2>1. Papageien</h2> <p>Papageien können sprechen, das macht sie so interessant.<p> <h3>Amazonas-Papageien</h3> Amazonas-Papageien können nicht nur sprechen, sondern auch singen. h3>Nil-Papageien Nil-Papageien können sprechen, singen und tanzen. <h4>Rhein-Papageien<h4> <p>Rhein-Papageien können nichts, sind aber schön bunt.</p> <h5>Mississippi-Papageien</h5> <p>Mississippi-Papageien können alles und sind dazu noch schön bunt. Sie können: - singen - sprechen - tanzen <h6>2. Kanarienvögel</h6> Kanarienvögel sind auch ziemlich lustig, denn sie pfeifen so schön. Aber sie können nicht sprechen. <h1>Pferde</h1> (wird fortgesetzt, wenn ich Zeit habe)  




HTML_4-2: Fehler im HTML-Quellcode finden 2

Berichtigen Sie den folgenden HTML-Quellcode und lassen Sie sich das Ergebnis im Browser anzeigen.

HTML-Code
<html> <head> <title>Dokumenttitel </head> <h1>Ich bin eine Überschrift</h1> <p>Überschriften wie <h2>DIESE HIER</h2> gefallen mir gut.</p> <! Ich bin ein Kommentar! > </html>  




HTML_4-3: Dokument nachbauen

Schreiben Sie ein HTML-Dokument, das eine Ausgabe erzeugt, die der Struktur in diesem Bild: 02html/html04_ueberschriftenstruktur.png entspricht. Für jeden Punkt schreiben Sie noch etwas Blindtext dazu, den können Sie bspw. mit einem Lorem-ipsum-Generator erzeugen lassen (z.B. http://www.loremipsum.de ).