Jak wyrównać tekst w HTML

„Hypertext Markup Language” to podstawowy język projektowania strony internetowej. HTML jest znanym jako językiem front-end do projektowania interfejsu witryny. Istnieje wiele funkcji dotyczących tego języka. Polecenia używane do projektowania są znane jako znaczniki. Te tagi łączą się, aby opracować stronę internetową. Pojedynczy plik kodu HTML jest odpowiedzialny za statyczną stronę internetową, która nie działa. Zawartość HTML to tekst, obraz, kształty, kolor, wyrównanie itp. Wyrównanie jest ważnym składnikiem projektowania, ponieważ określa odpowiednią zawartość do obsługi w określonym miejscu. W tym przewodniku omówimy kilka podstawowych przykładów.

Wymagane narzędzia

Aby rozwinąć koncepcję wyrównania w HTML, musimy wspomnieć o niektórych niezbędnych narzędziach wymaganych do uruchomienia kodu HTML. Jeden to edytor tekstu, a drugi to przeglądarka. Redaktor tekstowy może notatnik, wzniosły, notatnik ++ lub jakikolwiek inny, który może pomóc. W tym przewodniku użyliśmy notatnika, domyślnej aplikacji w systemie Windows i Google Chrome jako przeglądarki.

Format HTML

Aby zrozumieć wyrównanie, najpierw potrzebujemy mieć pewnej wiedzy podstaw HTML. Przedstawiliśmy zrzut ekranu przykładowego kodu.

…
… .

HTML ma dwie główne części. Jedna to głowa, a druga to ciało. Wszystkie znaczniki są napisane w nawiasach kątowych. Część główna dotyczy nazywania strony HTML za pomocą znacznika „tytułu”. A także użyj instrukcji stylu w głowie. Z drugiej strony ciało dotyczy wszystkich innych tagów tekstu, obrazów lub filmów itp. Innymi słowy, cokolwiek chcesz dodać do strony HTML, jest zapisane w części ciała HTML.

Jedną rzeczą, którą muszę tutaj podkreślić, jest otwieranie i zamykanie tagów. Każdy zapisany tag musi być zamknięty. Na przykład HTML ma początkowe znacznik, a znacznik końcowy . Zatwierdzono więc, że znacznik końcowy ma cięcie, a następnie nazwa znacznika. Podobnie wszystkie pozostałe znaczniki również podążają za tym samym podejściem. Każdy edytor tekstu jest następnie zapisywany z rozszerzeniem HTML. Na przykład użyliśmy pliku z przykładem nazwy.html. Następnie zobaczysz, że ikona notatnika zmieniła się w ikonę przeglądarki.

Ponieważ wyrównanie jest zadowoleni z stylizacji. Styl w HTML jest trzech rodzajów. Styl wewnętrzny, styl wewnętrzny i zewnętrzny. Inline implikuje w znaczniku. Wewnętrzne jest zapisane w głowie. Jednocześnie styl zewnętrzny jest zapisywany w osobnym pliku CSS.

Wbudowany styl tekstu

Przykład 1

Teraz nadszedł czas, aby omówić tutaj przykład. Rozważ obraz wyświetlany powyżej. W tym pliku notatnika napisaliśmy prosty tekst. Kiedy uruchomimy go jako przeglądarkę, pokaże wyjście podane poniżej w przeglądarce.

Jeśli chcemy, aby ten tekst był wyświetlany na środku, zmienimy znacznik.

Ten znacznik jest tagiem wbudowanym. Napiszemy ten tag, gdy wprowadzimy znacznik akapitu w ciele HTML. Po tekście, następnie zamknij tag akapitu. Zapisz, a następnie otwórz plik w przeglądarce.

Akapit jest wyrównany w środku, ponieważ jest wyświetlany w przeglądarce. Znacznik użyty w tym przykładzie jest używany do każdego wyrównania, i.mi., po lewej, prawej i na środku. Ale jeśli chcesz wyrównać tekst tylko w środku, do tego celu używa się określonego znacznika.

…

Znacznik środkowy jest używany przed i po tekście. To pokaże ten sam wynik, co poprzedni przykład.

Przykład 2

To jest przykład wyrównania nagłówka zamiast akapitu w tekście HTML. Składnia tego wyrównania nagłówka jest taka sama. Można to zrobić zarówno za pomocą znacznika, jak i przez styl inline lub dodanie znacznika wyrównania wewnątrz znacznika nagłówka.

Wyjście jest pokazane w przeglądarce. Znacznik nagłówka przekonwertował zwykły tekst na nagłówek, a znacznik wyrównywał go na środku.

Przykład 3

Wyrównaj tekst w centrum

Rozważ przykład, w którym w przeglądarce jest wyświetlany akapit. Musimy to wyrównać w centrum.

Otworzymy ten plik w notatniku, a następnie wyrównujemy go w pozycji środkowej za pomocą znacznika.

Po dodaniu tego znacznika do znacznika akapitu Zapisz plik i uruchom go w przeglądarce. Zobaczysz, że akapit jest teraz wyrównany. Zobacz obraz poniżej.

Wyrównaj tekst w prawo

Pochylenie tekstu po prawej stronie jest podobne do ustawienia go na środku strony. Tylko słowo „środkowe” jest zastępowane przez „prawe” w znaczniku akapitu.

…

Zmiany można zobaczyć na podstawie dołączonego obrazu.

Zapisz i odśwież stronę internetową w przeglądarce. Tekst jest teraz przenoszony na prawą stronę strony.

Wewnętrzna stylizacja tekstu

Przykład 1

Jak opisano powyżej, wewnętrzne CSS (arkusz stylów kaskadowych) lub stylizacja wewnętrzna jest rodzajem CSS, który jest zdefiniowany w części HTML strony. Działa podobnie do wewnętrznych tagów.

Rozważ stronę pokazaną powyżej; zawiera w sobie nagłówki i akapit. Mamy wymaganie zobaczenia tekstu w centrum. Wyrównanie wbudowane wymaga ręcznego pisania tagów w każdym akapicie. Ale wewnętrzna stylizacja może być automatycznie zastosowana do każdego akapitu tekstu, wspominając P w instrukcji stylu. Nie ma potrzeby pisania żadnego znacznika w tagu akapitu. Teraz obserwuj kod i działa.

Ten tag jest zapisany w stylu znacznika w części głównej. Teraz uruchom kod w przeglądarce.

Po wykonaniu strony w przeglądarce zobaczysz, że wszystkie akapity są wyrównane na środku strony. Ten znacznik jest stosowany do każdego akapitu obecnego w tekście.

Przykład 2

W tym przykładzie, podobnie jak akapit, wyrównujemy wszystkie nagłówki w tekście po prawej stronie. W tym celu wspomniemy na czele w stwierdzeniu stylu wewnątrz głowy.

H2, H3

Text-Align: Racja

Teraz po zapisaniu pliku uruchom plik notatnika w przeglądarce. Zobaczysz, że nagłówki są wyrównane po prawej stronie strony HTML.

Przykład 3

W wewnętrznej stylizacji może istnieć sytuacja, w której musisz wyrównać tekst tylko niektórych akapitów w tekście, podczas gdy inne pozostają takie same. Stąd używamy koncepcji klasy. Przedstawiamy klasę z metodą kropkową wewnątrz tagu stylu. Konieczne jest dodanie nazwy klasy wewnątrz znacznika akapitu, który chcesz zostać wyrównany.

< p class = “center”>…

Dodaliśmy klasę w pierwszych trzech akapitach. Teraz uruchom kod. Na wyjściu można zobaczyć, że pierwsze trzy akapity są wyrównane w centrum, podczas gdy inne nie są.

Wniosek

W tym artykule wyjaśniono, że dostosowanie można wykonać na różne sposoby poprzez znaczniki wbudowane i wewnętrzne.