informatikZentrale

unterrichtsmaterialien für den informatikunterricht: präsentationen, übungen, projekte

Absätze; Kommentare; Überschriften

Falls über diesem Text keine PDF-Präsentation zu sehen ist, wurde diese von Ihrem Browser direkt runtergeladen (wenn Sie z.B. mit Safari@Mac surfen). Sie könnnen zum Download auch hier klicken: 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 und lassen Sie sich das Ergebnis im Browser anzeigen.

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
<h2>2. Kanarienvögel</h3>
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 Datei html04-html-bild-nachbauen.png entspricht (ohne Rahmen).


Aufgaben zur Übungsfirma

Alle Aufgaben zur Übungsfirma 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.

***** Übungsfirma: Die Web-Visitenkarte *****

Sie beginnen Ihr Praktikum bei der Fa. Lernglück. Die Chefin, Frau Schuster, hat bereits erfahren, dass Sie sich mit Webdesign und Programmierung gut auskennen. Sie zitiert Sie zu sich ins Büro.

"Wir haben immer noch keine Website. Bitte, könnten Sie nicht eine einzelne Seite anlegen, auf der die Kunden unsere Kontaktdaten erfahren. Außerdem sollte da noch stehen, dass unsere Website im nächsten November gelauncht wird. Bekommen Sie das hin?"

Setzen Sie sich also an Ihren Arbeitsplatz und gestalten Sie eine Webseite nach den Wünschen der Chefin.

OUTPUT: HTML-Datei namens index.html



- E-Mail-Link?
- Hintergrundfarbe?