HTML Erste Schritte – Lektion 2 – Die Tags p, div und deren Unterschied. Der Tag br
Im letzten Unterricht haben wir unser erstes HTML-Dokument erstellt, was bedeutet, dass Sie bereits wissen, dass wir HTML-Code in einem Texteditor schreiben und alle Änderungen im Browser ansehen, indem wir die Seite aktualisieren (normalerweise mit der F5-Taste).
Also, in dieser Lektion werden wir weiter mit Text arbeiten und die Tags span, p, div verwenden, um Text einzurahmen. Außerdem betrachten wir das Tag br.
<html>
<head>
<title>Mein erstes HTML-Dokument</title>
</head>
<body>
<h1>Mein erstes HTML-Dokument</h1>
</body>
</html>
Dies ist unser Code, mit dem wir weiterarbeiten werden.
Lassen Sie uns solche Zeilen hinzufügen.
<html>
<head>
<title>Mein erstes HTML-Dokument</title>
</head>
<body>
<h1>Mein erstes HTML-Dokument</h1>
<p>Erste Zeile im P-Tag</p>
<p>Zweite Zeile im P-Tag</p>
<div>Erste Zeile im DIV-Tag</div>
<div>Zweite Zeile im DIV-Tag</div>
</body>
</html>
Wenn Sie das Dokument im Browser öffnen, sehen Sie, dass die p-Tags die Sätze in verschiedenen Zeilen anzeigen, aber es gibt auch einen Unterschied. Mein Browser hat standardmäßig für das P-Tag einen Abstand oben und unten gesetzt. Für das div-Tag hat er die Zeilen direkt aneinandergefügt. Das liegt daran, dass p ein Absatz-Tag ist, während div ein Block-Tag bzw. ein Bereichs-Tag ist. Wenn wir also ein Tag für Text brauchen, verwenden wir das P-Tag, und wenn wir einen bestimmten Bereich hervorheben wollen, zum Beispiel um diesem Bereich eine Hintergrundfarbe oder Rahmen zu geben, dann verwenden wir das DIV-Tag.
Wenn es auf der Website Text gibt, DANN MUSS dieser im p-Tag oder in den Tags h1–h6 stehen, sofern der Text nicht dekorativ ist, also nicht zur Gestaltung der Seite dient. So sollte der Text aussehen:
<html>
<head>
<title>Mein erstes HTML-Dokument</title>
</head>
<body>
<h1>Mein erstes HTML-Dokument</h1>
<div>
<p>Erste Zeile im P-Tag</p>
<p>Zweite Zeile im P-Tag</p>
</div>
</body>
</html>
So haben wir also die Reihenfolge body>div>p. Merken Sie sich: Es darf kein div-Tag innerhalb eines p-Tags geben, also body>p>div ist falsch.
Sehen wir uns nun an, wie man Text in eine neue Zeile bricht. Manchmal ist unser Textabsatz sehr lang, dann haben wir die Wahl, den Text in mehrere Absätze zu unterteilen oder den Zeilenumbruch-Tag br hinzuzufügen. Das Tag <br /> ist ein Einzel-Tag, deshalb setzen wir den Schrägstrich vor das Größer-als-Zeichen.
<html>
<head>
<title>Mein erstes HTML-Dokument</title>
</head>
<body>
<h1>Mein erstes HTML-Dokument</h1>
<div>
<p>Die Programmiersprache HTML wurde vom britischen Wissenschaftler Tim Berners-Lee ungefähr in den Jahren 1989–1991 im Europäischen Kernforschungszentrum in Genf (Schweiz) entwickelt.<br />
HTML wurde als Sprache zum Austausch von wissenschaftlicher und technischer Dokumentation geschaffen, die für Menschen geeignet ist, die keine Experten im Bereich Layout sind.<br />
HTML bewältigte erfolgreich das Problem der Komplexität von SGML durch die Definition einer kleinen Menge struktureller und semantischer Elemente – der Deskriptoren.<br />
Deskriptoren werden oft auch „Tags“ genannt. Mit HTML kann man relativ einfach ein einfaches, aber schön gestaltetes Dokument erstellen.<br />
Neben der Vereinfachung der Dokumentstruktur wurde in HTML Unterstützung für Hypertext eingeführt.<br />
Multimedia-Funktionen wurden später hinzugefügt.<br />
Ursprünglich war HTML als Mittel zur Strukturierung und Formatierung von Dokumenten gedacht, ohne an die Wiedergabemöglichkeiten gebunden zu sein.<br />
Im Idealfall sollte der mit HTML markierte Text ohne stilistische und strukturelle Verzerrungen auf Geräten mit unterschiedlicher technischer Ausstattung angezeigt werden (Farbmonitor eines modernen Computers, monochromer Bildschirm eines Organizers, eingeschränkter Bildschirm eines Mobiltelefons oder Sprachausgabeprogramme).<br />
Moderne Verwendung von HTML weicht jedoch stark von dieser ursprünglichen Zielsetzung ab. Zum Beispiel ist das Tag <TABLE>, das mehrfach zur Formatierung der Seite verwendet wird, die Sie gerade lesen, eigentlich für einfache Tabellen in Dokumenten gedacht, aber hier gibt es keine einzige Tabelle.<br />
Im Laufe der Zeit wurde die Grundidee der Plattformunabhängigkeit von HTML zugunsten moderner Anforderungen an Multimedia- und Grafikgestaltung aufgegeben.</p>
</div>
</body>
</html>
Die Zeile wurde zu lang. Wenn wir sie im Textdokument umbrechen, ändert das am HTML nichts:
<html>
<head>
<title>Mein erstes HTML-Dokument</title>
</head>
<body>
<h1>Mein erstes HTML-Dokument</h1>
<div>
<p>Die Programmiersprache HTML wurde vom britischen Wissenschaftler Tim Berners-Lee ungefähr in den Jahren 1989–1991 im Europäischen Kernforschungszentrum in Genf (Schweiz) entwickelt.
HTML wurde als Sprache zum Austausch von wissenschaftlicher und technischer Dokumentation geschaffen, die für Menschen geeignet ist, die keine Experten im Bereich Layout sind. HTML bewältigte erfolgreich das Problem der Komplexität von SGML durch die Definition einer kleinen Menge struktureller und semantischer Elemente – der Deskriptoren.
Deskriptoren werden oft auch „Tags“ genannt. Mit HTML kann man relativ einfach ein einfaches, aber schön gestaltetes Dokument erstellen. Neben der Vereinfachung der Dokumentstruktur wurde in HTML Unterstützung für Hypertext eingeführt. Multimedia-Funktionen wurden später hinzugefügt. Ursprünglich war HTML als Mittel zur Strukturierung und Formatierung von Dokumenten gedacht, ohne an die Wiedergabemöglichkeiten gebunden zu sein.
Im Idealfall sollte der mit HTML markierte Text ohne stilistische und strukturelle Verzerrungen auf Geräten mit unterschiedlicher technischer Ausstattung angezeigt werden (Farbmonitor eines modernen Computers, monochromer Bildschirm eines Organizers, eingeschränkter Bildschirm eines Mobiltelefons oder Sprachausgabeprogramme). Moderne Verwendung von HTML weicht jedoch stark von dieser ursprünglichen Zielsetzung ab. Zum Beispiel ist das Tag <TABLE>, das mehrfach zur Formatierung der Seite verwendet wird, die Sie gerade lesen, eigentlich für einfache Tabellen in Dokumenten gedacht, aber hier gibt es keine einzige Tabelle.
Im Laufe der Zeit wurde die Grundidee der Plattformunabhängigkeit von HTML zugunsten moderner Anforderungen an Multimedia- und Grafikgestaltung aufgegeben.</p>
</div>
</body>
</html>
Das hilft uns nicht, im Browser ändert sich nichts, und hier kommt uns das Tag <br /> zur Hilfe. Fügen wir es ans Ende jeder Zeile ein.
<html>
<head>
<title>Mein erstes HTML-Dokument</title>
</head>
<body>
<h1>Mein erstes HTML-Dokument</h1>
<div>
<p>Die Programmiersprache HTML wurde vom britischen Wissenschaftler Tim Berners-Lee ungefähr in den Jahren 1989–1991 im Europäischen Kernforschungszentrum in Genf (Schweiz).<br />
HTML wurde als Sprache zum Austausch von wissenschaftlicher und technischer Dokumentation geschaffen, die für Menschen geeignet ist, die keine Experten im Bereich Layout sind.<br />
HTML bewältigte erfolgreich das Problem der Komplexität von SGML durch die Definition einer kleinen Menge struktureller und semantischer Elemente – der Deskriptoren.<br />
Deskriptoren werden oft auch „Tags“ genannt. Mit HTML kann man relativ einfach ein einfaches, aber schön gestaltetes Dokument erstellen.<br />
Neben der Vereinfachung der Dokumentstruktur wurde in HTML Unterstützung für Hypertext eingeführt.<br />
Multimedia-Funktionen wurden später hinzugefügt.<br />
Ursprünglich war HTML als Mittel zur Strukturierung und Formatierung von Dokumenten gedacht, ohne an die Wiedergabemöglichkeiten gebunden zu sein.<br />
Im Idealfall sollte der mit HTML markierte Text ohne stilistische und strukturelle Verzerrungen auf Geräten mit unterschiedlicher technischer Ausstattung angezeigt werden (Farbmonitor eines modernen Computers, monochromer Bildschirm eines Organizers, eingeschränkter Bildschirm eines Mobiltelefons oder Sprachausgabeprogramme).<br />
Moderne Verwendung von HTML weicht jedoch stark von dieser ursprünglichen Zielsetzung ab. Zum Beispiel ist das Tag, das mehrfach zur Formatierung der Seite verwendet wird, die Sie gerade lesen, eigentlich für einfache Tabellen in Dokumenten gedacht, aber hier gibt es keine einzige Tabelle.<br />
Im Laufe der Zeit wurde die Grundidee der Plattformunabhängigkeit von HTML zugunsten moderner Anforderungen an Multimedia- und Grafikgestaltung aufgegeben.</p>
</div>
</body>
</html>
Jetzt versteht der Browser, dass er die Zeile umbrechen soll, was das Tag <br /> ihm signalisiert.
Wir können den Text auch in mehrere Absätze unterteilen, verwenden wir dazu die p-Tags.
<html>
<head>
<title>Mein erstes HTML-Dokument</title>
</head>
<body>
<h1>Mein erstes HTML-Dokument</h1>
<div>
<p>Die Programmiersprache HTML wurde vom britischen Wissenschaftler Tim Berners-Lee ungefähr in den Jahren 1989–1991 im Europäischen Kernforschungszentrum in Genf (Schweiz) entwickelt.<br />
HTML wurde als Sprache zum Austausch von wissenschaftlicher und technischer Dokumentation geschaffen, die für Menschen geeignet ist, die keine Experten im Bereich Layout sind.<br />
HTML bewältigte erfolgreich das Problem der Komplexität von SGML durch die Definition einer kleinen Menge struktureller und semantischer Elemente – der Deskriptoren.<br />
Deskriptoren werden oft auch „Tags“ genannt. Mit HTML kann man relativ einfach ein einfaches, aber schön gestaltetes Dokument erstellen.<br />
Neben der Vereinfachung der Dokumentstruktur wurde in HTML Unterstützung für Hypertext eingeführt.<br />
Multimedia-Funktionen wurden später hinzugefügt.<br />
</p>
<p>
Ursprünglich war HTML als Mittel zur Strukturierung und Formatierung von Dokumenten gedacht, ohne an die Wiedergabemöglichkeiten gebunden zu sein.<br />
Im Idealfall sollte der mit HTML markierte Text ohne stilistische und strukturelle Verzerrungen auf Geräten mit unterschiedlicher technischer Ausstattung angezeigt werden (Farbmonitor eines modernen Computers, monochromer Bildschirm eines Organizers, eingeschränkter Bildschirm eines Mobiltelefons oder Sprachausgabeprogramme).<br />
Moderne Verwendung von HTML weicht jedoch stark von dieser ursprünglichen Zielsetzung ab. Zum Beispiel ist das Tag, das mehrfach zur Formatierung der Seite verwendet wird, die Sie gerade lesen, eigentlich für einfache Tabellen in Dokumenten gedacht, aber hier gibt es keine einzige Tabelle.<br />
Im Laufe der Zeit wurde die Grundidee der Plattformunabhängigkeit von HTML zugunsten moderner Anforderungen an Multimedia- und Grafikgestaltung aufgegeben.</p>
</div>
</body>
</html>
Aktualisieren Sie die Seite im Browser, und Sie sehen, dass der Text in zwei Absätze aufgeteilt wird.