Zeilen und Absätze

In diesem Abschnitt wird HTML beschrieben, das mit Zeilen und Absätzen verknüpft ist. Wir beginnen mit dem grundlegenden und <P> Tags.

Das < DIV > Element

<DIV>, a Element auf Blockebene, definiert einfach einen Inhaltsblock auf der Seite. Über die Definition eines Blocks hinaus tut <DIV> selbst nichts. Mit dem folgenden Code wird beispielsweise ein <DIV> -Element mit zwei Absätzen erstellt. Beachten Sie, dass Sie <P> -Elemente in ein <DIV> einfügen können.

Dies ergibt:

Das ALIGN-Attribut

ALIGN legt die Ausrichtung des Inhalts des <DIV> -Elements fest. Alle vier Werte, LEFT, CENTER, RIGHT und JUSTIFY werden alle gut unterstützt. LEFT ist der Standardwert.
Dieser Code zeigt den Standardwert an:

Was uns Folgendes gibt:

Das Absatzelement

<P> zeigt den Beginn eines neuen Absatzes an. Dies wird normalerweise mit zwei Wagenrückläufen gerendert, wobei eine einzelne Leerzeile zwischen den beiden Absätzen erzeugt wird:

Dies führt dazu:

Das ALIGN-Attribut

ALIGN gibt die Ausrichtung des Absatzes an.

Was dies erzeugt:

Das CLEAR-Attribut

CLEAR wird von einigen Browsern erkannt und funktioniert sehr ähnlich wie <BR>. Es handelt sich jedoch nicht um Standard-HTML und wird immer noch weitgehend nicht unterstützt. Verwenden Sie stattdessen <BR>.

Ist der P-Endtag erforderlich?

W3C sagt über </P>: „Das End-Tag ist optional, da es vom Parser immer abgeleitet werden kann.“ Dies bedeutet, dass eine neue <P> das Ende der vorherigen <P> (und jede durch die vorherige ).

Jedes andere Element auf Blockebene, z. B. <HR> oder <BLOCKQUOTE>, sollte ebenfalls enden Der Absatz funktioniert jedoch nicht immer so. Einige Browser richten den Text beispielsweise auch nach einer Tabelle nach rechts aus. Im folgenden Beispiel rendert MSIE den Teil „Nach der Tabelle“ als rechtsbündig. während Netscape es als linksbündig darstellt:

MSIE-Rendering	Netscape-Rendering

Wenn Sie die Ausrichtung oder eine andere Stileigenschaft für ein Absatzelement festlegen, verwenden Sie diese am besten </P>. Wenn Sie niemals Stile festlegen verwenden, können Sie </P> im Allgemeinen ignorieren.

Weitere Informationen zu diesem Thema finden Sie in den W3C-Spezifikationen für Absätze.

Textausrichtung

Sie können die Ausrichtung jedes HTML-Elements mithilfe der Stilregel text-align festlegen. text-align kann verwendet werden, um die Ausrichtung für einen Absatz, einen Abschnitt des Dokuments oder sogar das gesamte Dokument festzulegen. text-align kann verwendet werden, um die Ausrichtung auf links, rechts, zentriert oder ausgerichtet festzulegen.

Angenommen, wir möchten einen Absatz zentrieren.Zuerst erstellen wir eine Stilklasse mit dem Namen centeralign, indem wir den folgenden Code in den Abschnitt „des Dokuments“ einfügen:

Jetzt können wir jeden Absatz wie folgt auf die Centeralign-Klasse setzen:

Dies gibt uns Folgendes:

Wir können dieselbe Klasse auf ein <DIV> -Element anwenden, um einen Abschnitt des zu zentrieren Seite:

Das gibt uns:

Begründung

Standardmäßig In den meisten Browsern wird Text mit einem gezackten rechten Rand gerendert.

Wenn Sie möchten, dass der gesamte Text wie in einem Buch mit einem geraden rechten Rand gerendert wird, können Sie eine einzige Stilregel verwenden Code i nto den „Abschnitt Ihres Dokuments.

Das Problem mit der Begründung ist, dass viele Browser verwirrt sind, wo sich die letzte Textzeile befindet (was nicht sollte) gerechtfertigt sein). Beispielsweise ist MSIE 4.x verwirrt, wenn auf einen Textblock unmittelbar eine Tabelle folgt. Beachten Sie in diesem Bild, dass die letzte Textzeile die Wörter „einer unserer Agenten“ über eine vollständige Zeile erstreckt:

Um diese Situation zu beheben, umgeben Sie alle Textblöcke mit <P> und </P>:

Jetzt rendert unser fehlerhaftes MSIE die Dinge mehr Vernünftig:

Einrücken

Es gibt verschiedene Möglichkeiten, Absätze und ganze Abschnitte Ihrer Webseite einzurücken In den nächsten Abschnitten werden die vier Haupttechniken für das Einrücken beschrieben:

• Einrücken eines Absatzes
• Einrücken eines Abschnitts der Seite
• Einrücken der gesamten Seite
• Einrücken der ersten Zeile jedes Absatzes

Bevor wir beginnen, sollten wir jedoch ein paar Worte zu <BLOCKQUOTE> sagen Es gibt ein weit verbreitetes Missverständnis, dass <BLOCKQUOTE> zum Einrücken von Abschnitten der Seite verwendet werden sollte. Diese Überzeugung beruht auf der Tatsache, dass die meisten visuellen Webbrowser zitierten Text rendern wie eingerückt. Denken Sie jedoch daran, dass HTML keine Formatierungssprache ist und unvorhersehbare Ergebnisse liefert, wenn Sie versuchen, es als eine Sprache zu verwenden. Verwenden Sie <BLOCKQUOTE>, wenn Sie einen Textblock in Anführungszeichen haben, andernfalls verwenden Sie die in den nächsten Absätzen beschriebenen Techniken.

Einrücken eines Absatzes

Sie können einen einzelnen Absatz mithilfe von Stilen einrücken. Angenommen, wir möchten einen Absatz mit 50 Punkten einrücken. Zuerst erstellen wir eine Klasse namens eingerückt mit den folgenden Stilregeln. Fügen Sie diesen Code in den Abschnitt „Ihres Dokuments“ ein.

Nun setzen wir die Klasse des Absatzes auf Einzug, indem wir der <P> tag:

Dies gibt uns diesen eingerückten Absatz:

Einrücken eines Abschnitts einer Seite

Zum Einrücken von mehr als einem Par agraph verwenden wir den gleichen Stil wie im vorherigen Beispiel. Fügen Sie diesen Code in den Abschnitt „Ihrer Seite ein:

Dann verwenden wir die eingerückte Klasse in einer <DIV> element:

Dies gibt uns einen eingerückten Abschnitt wie diesen:

Einrücken der gesamten Seite

Wenn Sie möchten, dass die gesamte Seite eingerückt wird, legen Sie eine Stilregel fest, die das Auffüllen nach rechts und links für das Element „festlegt. Bei diesem Stil wird beispielsweise die rechte und linke Auffüllung auf 100 Pixel festgelegt:

Diese Technik ist beliebt, wenn sie in Kombination mit einem Hintergrundbild verwendet wird. Angenommen, dieses Bild wird auf der linken Seite der Seite angezeigt.

Dieses Bild ist 56 Pixel breit. Stellen Sie den Abstand also auf 60 ein.Der folgende Stil legt das Hintergrundbild fest, setzt die Wiederholung auf Wiederholung-y (nur vertikal auf der linken Seite wiederholen) und setzt die linke Auffüllung auf 60 (die rechte Auffüllung wird nicht eingestellt).

So könnte das aussehen:

Einrücken der ersten Zeile jedes Absatzes

Einrücken der ersten Zeile jedes Absatzsatzes Eine Stilregel mit Text-Einzug. Mit dem folgenden Code wird beispielsweise die erste Zeile jedes Absatzes um 30 Punkte eingerückt. Kopieren Sie diesen Code in den Abschnitt „Ihrer Seite:

Dieser Code rückt die erste Zeile jedes <P> ein Element, aber Sie werden wahrscheinlich auf ein nerviges Problem stoßen. Wenn Sie wie die meisten Designer sind, setzen Sie wahrscheinlich kein P vor den ersten Absatz oder zwischen einen Header wie <H1> und Leider müssen Sie genau das tun, wenn der Absatz eingerückt werden soll. Der Text ist in diesen Situationen Teil eines so genannten „anonymen Blocks“ und kann nicht direkt referenziert werden. Um es einzurücken, müssen Sie den Text in ein <P> -Element einfügen.

Der folgende Code hat also beispielsweise kein zwischen der Kopfzeile und dem Text, damit der Text nicht eingerückt wird:

Was uns Folgendes gibt:

Dieser Code hat ein <P> zwischen der Kopfzeile und dem Text, daher wird der Text eingerückt:

Die < BR > Element

<BR> fügt einen einzelnen Wagenrücklauf ein . Während <P> den Beginn eines neuen Absatzes angibt, impliziert <BR> nur einen Wagenrücklauf innerhalb desselben Absatzes. <BR> wird normalerweise mit einem einzelnen Wagenrücklauf gerendert.

Beispiel:

Was dies hervorbringt:

Da <BR> keinen neuen Absatz startet, bleiben alle aktuellen Absatzattribute gleich:

Was dies hervorbringt:

Das CLEAR-Attribut

CLEAR sagt, dass zusätzlich zum Einfügen eines Zeilenumbruchs, wenn sich rechts oder links ein Bild oder ein anderes Objekt befindet, auch darüber hinausgehen. Dieser Code besagt beispielsweise, dass das Bild auf der linken Seite ausgerichtet werden soll. Dann gibt es einen Text, dann LEFT. Der folgende Text ist hinter dem Bild:

Was dies erzeugt:

Komm runter zur Halloween-Party! Ich wünsche Ihnen viel Spaß.
20.00 bis 24.00 Uhr. Tragen Sie ein Kostüm oder kommen Sie als Ihr eigenes gruseliges Ich!

BOTH ist dasselbe wie ALL, aber nicht Wird in so vielen Browsern unterstützt, verwenden Sie stattdessen ALL.

Das CENTER-Element

Verwendungsempfehlung: Verwenden Sie <DIV> stattdessen.

Was uns gibt:

Das ist dasselbe wie:

Was uns gibt:

Das < HR > Element

<HR> zeichnet eine horizontale Linie (eine „horizontale Regel“) über die Seite. Das war’s. Für ein so einfaches Konzept sind horizontale Regeln überraschend beliebt. Beginnen wir mit den Grundlagen. <HR> hat kein End-Tag und erfordert keine Attribute:

Dadurch wird diese Regel erstellt:

<HR> zeigt normalerweise eine Unterteilung auf der Seite an. Sachen vor der Regel befinden sich in einem anderen „Abschnitt“ als die Sachen danach. Aus diesem Grund betrachten viele Designer <HR> als logisches Tag, nicht als Layout-Tag.

Das NOSHADE-Attribut

NOSHADE gibt an, dass die Regel flach statt dreidimensional dargestellt werden soll.Vergleichen Sie diese reguläre horizontale Regel:

Mit einer NOSHADE -Regel:

Was uns Folgendes gibt:

NOSHADE wird häufig in Verbindung mit SIZE:

Erzeugt diese Regel:

NOSHADE ist beliebt, weil Browser dreidimensionale Regeln normalerweise nicht sehr gut rendern. In der Tat wird die Regel unter vielen Umständen in derselben Farbe wie der Hintergrund dargestellt, wodurch sie fast unsichtbar wird.

Das SIZE-Attribut

SIZE gibt die Höhe der Regel an. (Ich denke, es „HEIGHT“ zu nennen wäre einfach zu einfach gewesen.) Für die horizontale Breite siehe WIDTH. Vergleichen Sie einige dieser Größen:

Dies gibt uns folgende Regeln:

Browser rendern im Allgemeinen keine <HR> größer als 100

Das WIDTH-Attribut

WIDTH legt die horizontale Breite der Regel fest. Sie können die Größe in Pixel oder als Prozentsatz ausdrücken.

Diese <HR> sind mit Pixelbreiten festgelegt:

Was uns gibt Diese Regeln:

WIDTH wird normalerweise als Prozentsatz ausgedrückt. Wenn Sie eine prozentuale Breite verwenden, müssen Sie den Wert in einschließen Anführungszeichen.

Erzeugt die folgenden Regeln:

Der Standardwert ist 100%. Standardmäßig lautet die Regel zentriert. Um eine andere Ausrichtung festzulegen, verwenden Sie ALIGN.

Prozentbreiten verwenden den Prozentsatz o f die verfügbare Breite, nicht die volle Breite der Seite. Befindet sich die Regel beispielsweise in einer Tabelle, ist die Breite ein Prozentsatz der Breite der Tabellenzelle.

Dadurch wird diese Tabelle erstellt:

Das ALIGN-Attribut

ALIGN legt die Ausrichtung des fest Regel. ALIGN ist nur nützlich, wenn Sie auch WIDTH verwenden.

Geben Sie uns Folgendes:

Das < PRE > Element

<PRE> ist eines der handlichsten Tags in der HTML-Toolbox. <PRE> markiert den Text als „vorformatiert“ – alle Leerzeichen und Zeilenumbrüche werden genau so gerendert, wie Sie sie eingeben.

Dies führt dazu:

<PRE> Text wird in einer Schriftart mit fester Breite gerendert, dh alle Zeichen und Leerzeichen sind die Gleiche Breite: Mit der festen Breite können Sie den Text ganz einfach so anordnen, wie Sie es möchten. <PRE> eignet sich daher hervorragend zum Erstellen von „schnellen und schmutzigen“ Tabellen wie der obigen.

<PRE> bewirkt NICHT, dass der Browser Tags ignoriert. Sie können weiterhin Links und andere Extras erstellen:

Erzeugt Folgendes:

Wenn Sie mit dem Hinzufügen von Markups beginnen Es wird schwieriger zu sehen, wie sich der Text entwickelt (ein gleichmäßiger Abstand zwischen Ihren Tags wie in der obigen Tabelle hilft). <PRE> wird häufig verwendet, um große Textblöcke zu zitieren, die Sie nicht „HTMLize“ möchten, aber ein „könnte den Text durcheinander bringen. Für eine Tabelle, die größer als einige Zeilen ist, ist es auf lange Sicht normalerweise einfacher, Tabellencode zu verwenden.

Das „Element

“ verhindert, dass ein Wagenrücklauf auftritt. Der folgende Code erzeugt beispielsweise ein Unsinngedicht aus einer langen Zeile:

Dies erzeugt Folgendes:

is most useful for making the page layout more attractive by disallowing breaks inside logical groups of symbols and words. The poem quoted above breaks in appropriate places if each phrase is surrounded by:

Was dies erzeugt:

Das „Element

is for the situation where you have used, um Zeilenumbrüche in einem Abschnitt zu vermeiden von Text, und dann möchten Sie sagen „aber Sie können HIER brechen, wenn Sie wollen“.“erzwingt keinen Zeilenumbruch, sondern erlaubt lediglich einen:

Erzeugt:

Nachdem wir , Netscape now seems to have abandoned it. It"s better to stick to grouping non-breakable sets of words within wie folgt erfunden haben:

Was uns diesen Absatz gibt:

Adam ist ein technischer Redakteur, der sich auf Entwicklerdokumentation und Tutorials spezialisiert hat.