Wie man Text in HTML ausrichtet

"Hypertext Markup Language" ist die grundlegende Sprache beim Entwerfen einer Website. Es ist bekannt, dass HTML eine Front-End-Sprache ist, um die Benutzeroberfläche einer Website zu entwerfen. Es gibt viele Funktionen für diese Sprache. Die für das Design verwendeten Befehle werden als Tags bezeichnet. Diese Tags kombinieren sich, um eine Website zu entwickeln. Eine einzelne HTML -Codedatei ist für eine statische Website verantwortlich, die nicht ausgeführt wird. HTML -Inhalt sind Text, Bild, Formen, Farbe, Ausrichtung usw. Ausrichtung ist ein wichtiger Bestandteil beim Entwerfen, da sie den jeweiligen Inhalt an einem bestimmten Ort bestimmt. Wir werden einige grundlegende Beispiele in diesem Leitfaden diskutieren.

Werkzeuge benötigt

Um das Konzept der Ausrichtung in HTML zu erläutern, müssen wir einige notwendige Tools erwähnen, die zum Ausführen des HTML -Codes erforderlich sind. Einer ist ein Texteditor, und der zweite ist ein Browser. Ein Texteditor ist vielleicht ein Notizblock, ein Erhabener, Notepad ++ oder eine andere, die helfen könnte. In diesem Handbuch haben wir Notepad, eine Standardanwendung in Windows und Google Chrome als Browser verwendet.

HTML -Format

Um die Ausrichtung zu verstehen, müssen wir zunächst ein Know-how von HTML-Grundlagen haben. Wir haben den Screenshot eines Beispielcode vorgestellt.

…
… .

HTML hat zwei Hauptteile. Einer ist der Kopf und der andere ist der Körper. Alle Tags sind in Winkelklammern geschrieben. Der Kopfteil befasst sich mit der Benennung der HTML -Seite mithilfe des Tags von "Titel". Verwenden Sie auch die Style -Anweisung im Kopf. Andererseits befasst sich der Körper mit allen anderen Tags von Text, Bildern oder Videos usw. Mit anderen Worten, was auch immer Sie Ihrer HTML -Seite hinzufügen möchten, ist im Körperteil von HTML geschrieben.

Eine Sache, die ich hier hervorheben muss, ist das Tag -Öffnen und Abschluss. Jedes Tag, das geschrieben wird, muss geschlossen sein. Zum Beispiel hat HTML Start -Tag von und das Endetag ist . Es wird also beobachtet, dass das End -Tag einen Schrägstrich enthält, gefolgt vom Tag -Namen. In ähnlicher Weise folgen alle anderen Tags auch dem gleichen Ansatz. Jeder Texteditor wird dann mit der Erweiterung von HTML gespeichert. Zum Beispiel haben wir eine Datei mit dem Namensbeispiel verwendet.html. Dann werden Sie sehen, dass sich das Notepad -Symbol in das Browser -Symbol verwandelt hat.

Da die Ausrichtung des Stylings ist. Stil in HTML ist von drei Typen. Ein Inline-Stil, ein internes und externes Styling. Inline impliziert das Tag. Intern ist im Kopf geschrieben. Gleichzeitig ist der externe Stil in einer separaten CSS -Datei geschrieben.

Inline -Styling von Text

Beispiel 1

Jetzt ist es Zeit, hier ein Beispiel zu besprechen. Betrachten Sie das oben angezeigte Bild. In dieser Datei von Notepad haben wir einen einfachen Text geschrieben. Wenn wir es als Browser ausführen, wird die unten angegebene Ausgabe im Browser angezeigt.

Wenn wir möchten, dass dieser Text in der Mitte angezeigt wird, ändern wir das Tag.

Dieses Tag ist ein Inline -Tag. Wir werden dieses Tag schreiben, wenn wir das Absatz -Tag in den HTML -Körper einführen werden. Schließen Sie nach dem Text das Absatz -Tag. Speichern und öffnen Sie die Datei im Browser.

Der Absatz ist in der Mitte ausgerichtet, wie er im Browser angezeigt wird. Das in diesem Beispiel verwendete Tag wird für jede Ausrichtung verwendet, ich.e., für links, rechts und in der Mitte. Wenn Sie jedoch nur den Text in der Mitte ausrichten möchten, wird zu diesem Zweck ein bestimmtes Tag verwendet.

…

Das Mitteletschicht wird vor und nach dem Text verwendet. Dies zeigt auch das gleiche Ergebnis wie das vorherige Beispiel.

Beispiel 2

Dies ist ein Beispiel für die Ausrichtung der Überschrift anstelle eines Absatzes im HTML -Text. Die Syntax für diese Ausrichtung der Überschrift ist gleich. Dies kann sowohl über das Tag als auch durch Inline -Styling oder durch Hinzufügen des Ausrichtungs -Tags im Überschriften -Tag erfolgen.

Der Ausgang ist im Browser gezeigt. Das Überschriften -Tag hat den einfachen Text in eine Überschrift umgewandelt, und das Tag hat ihn in der Mitte ausgerichtet.

Beispiel 3

Richten Sie den Text in der Mitte aus

Betrachten Sie ein Beispiel, in dem ein Absatz im Browser angezeigt wird. Wir müssen dies in der Mitte ausrichten.

Wir werden diese Datei im Notizblock öffnen und sie dann mit dem Tag in der Mitte -Position ausrichten.

Nachdem Sie dieses Tag im Absatz -Tag hinzugefügt haben, speichern Sie die Datei und führen Sie sie im Browser aus. Sie werden sehen, dass der Absatz jetzt ausgerichtet ist. Siehe das Bild unten.

Richten Sie den Text nach rechts aus

Um den Text nach rechts zu lehnen, ist es ähnlich, um ihn in der Mitte der Seite zu positionieren. Nur das "zentrale" Wort wird im Absatz -Tag durch "Right" ersetzt.

…

Die Änderungen können durch das unten angehängte Bild angezeigt werden.

Speichern und aktualisieren Sie die Webseite im Browser. Der Text wird nun auf die rechte Seite der Seite verschoben.

Internes Textstyling

Beispiel 1

Wie oben beschrieben, dass interne CSS (Cascading Style Sheet) oder internes Styling eine Art von CSS sind, die im Kopfteil HTML der Seite definiert ist. Es funktioniert ähnlich wie interne Tags.

Betrachten Sie die oben gezeigte Seite; Es enthält die Überschriften und Absätze darin. Wir haben die Anforderung, den Text in der Mitte zu sehen. Inline -Ausrichtung erfordert das manuelle Schreiben von Tags in jedem Absatz. Das interne Styling kann jedoch automatisch auf jeden Absatz des Textes angewendet werden, indem P in der Style -Anweisung erwähnt wird. Es ist dann nicht erforderlich, ein Tag in das Absatz -Tag zu schreiben. Beobachten Sie nun den Code und er funktioniert.

Dieses Tag ist im Style -Tag im Kopfteil geschrieben. Führen Sie nun den Code im Browser aus.

Wenn Sie die Seite im Browser ausführen, werden Sie feststellen, dass alle Absätze in der Mitte der Seite ausgerichtet sind. Dieses Tag wird auf jeden im Text vorhandenen Absatz angewendet.

Beispiel 2

In diesem Beispiel werden wir wie ein Absatz alle Überschriften im Text auf der rechten Seite ausrichten. Zu diesem Zweck werden wir Überschriften in der Style -Statement im Kopf erwähnen.

H2, H3

Text-Align: Richtig

Führen Sie jetzt nach dem Speichern der Datei die Notepad -Datei im Browser aus. Sie werden sehen, dass die Überschriften auf der rechten Seite der HTML -Seite ausgerichtet sind.

Beispiel 3

Im internen Styling könnte es eine Situation geben, in der Sie den Text nur einiger Absätze im Text ausrichten müssen, während andere gleich bleiben. Daher verwenden wir das Konzept der Klasse. Wir stellen die Klasse mit einer Punktmethode im Style -Tag vor. Es ist notwendig, den Namen der Klasse in das Absatz -Tag hinzuzufügen, das Sie ausrichten möchten.

< p class = “center”>…

Wir haben die Klasse in den ersten drei Absätzen hinzugefügt. Führen Sie nun den Code aus. Sie können in der Ausgabe sehen, dass die ersten drei Absätze in der Mitte ausgerichtet sind, während andere nicht sind.

Abschluss

In diesem Artikel wurde erklärt, dass die Ausrichtung auf unterschiedliche Weise durch Inline- und interne Tags durchgeführt werden könnte.