Wymagane narzędzia
Aby rozwinąć koncepcję wyrównywania w HTML, musimy wspomnieć o kilku niezbędnych narzędziach wymaganych do uruchomienia kodu HTML. Jeden to edytor tekstu, a drugi to przeglądarka. Edytor tekstu może być notatnikiem, wysublimowanym, notatnikiem ++ lub innym, który może pomóc. W tym przewodniku użyliśmy notatnika, domyślnej aplikacji w systemie Windows, oraz Google Chrome jako przeglądarki.
Format HTML
Aby zrozumieć wyrównanie, musimy najpierw poznać podstawy HTML. Przedstawiliśmy zrzut ekranu przykładowego kodu.
< html >
< głowa >...</ głowa >
< ciało >….</ ciało >
</ html >
HTML składa się z dwóch głównych części. Jedna to głowa, a druga to ciało. Wszystkie znaczniki są napisane w nawiasach kątowych. Część head zajmuje się nazywaniem strony html za pomocą tagu title. A także użyj wyrażenia stylu wewnątrz głowy. Z drugiej strony ciało zajmuje się wszystkimi innymi tagami tekstu, obrazów lub filmów itp. Innymi słowy, wszystko, co chcesz dodać do swojej strony html, jest zapisane w części kodu html.
Jedną rzeczą, którą muszę tutaj podkreślić, jest otwieranie i zamykanie tagów. Każdy zapisany znacznik musi być zamknięty. Na przykład Html ma początkowy tag, a końcowy to . Można więc zauważyć, że tag końcowy ma ukośnik, po którym następuje nazwa tagu. Podobnie wszystkie inne tagi również stosują to samo podejście. Każdy edytor tekstu jest następnie zapisywany z rozszerzeniem html. Na przykład użyliśmy pliku o nazwie przykład.html. Wtedy zobaczysz, że ikona notatnika zmieniła się w ikonę przeglądarki.
Ponieważ wyrównanie jest treścią stylizacji. Styl w html ma trzy typy. Styl liniowy, stylizacja wewnętrzna i zewnętrzna. Inline implikuje w tagu. Wewnętrzny jest napisany wewnątrz głowy. Jednocześnie styl zewnętrzny jest zapisywany w osobnym pliku CSS.
Stylizacja tekstu w linii
Przykład 1
Teraz czas na omówienie przykładu tutaj. Rozważmy obraz pokazany powyżej. W tym pliku notatnika napisaliśmy prosty tekst. Kiedy uruchomimy go jako przeglądarkę, pokaże dane wyjściowe podane poniżej w przeglądarce.
Jeśli chcemy, aby ten tekst był wyświetlany na środku, zmienimy tag.
< P styl=tekst-wyrównywać: centrum ;>
Ten tag jest tagiem wbudowanym. Napiszemy ten znacznik, gdy wprowadzimy znacznik akapitu w treści html. Po tekście zamknij znacznik akapitu. Zapisz, a następnie otwórz plik w przeglądarce.
Akapit jest wyrównany do środka, tak jak jest wyświetlany w przeglądarce. Znacznik użyty w tym przykładzie jest używany do dowolnego wyrównania, tj. do lewej, prawej i do środka. Ale jeśli chcesz wyrównać tekst tylko do środka, użyj do tego celu specjalnego tagu.
< środek > …… ..</ środek >Środkowy znacznik jest używany przed i po tekście. Spowoduje to również wyświetlenie tego samego wyniku, co w poprzednim przykładzie.
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ą tagu, jak i poprzez stylizację lub dodanie tagu align wewnątrz tagu nagłówka.
Dane wyjściowe są wyświetlane w przeglądarce. Znacznik nagłówka przekształcił zwykły tekst w nagłówek, a znacznik wyrównał go do środka.
Przykład 3
Wyrównaj tekst na środku
Rozważ przykład, w którym w przeglądarce wyświetlany jest akapit. Musimy wyrównać to w centrum.
Otworzymy ten plik w notatniku, a następnie wyrównamy go w pozycji środkowej za pomocą tagu.
< P styl =tekst-wyrównywać: centrum ;>Po dodaniu tego tagu w tagu akapitu, zapisz plik i uruchom go w przeglądarce. Zobaczysz, że akapit jest teraz wyśrodkowany i wyrównany. Zobacz obrazek poniżej.
Wyrównaj tekst do prawej
Pochylenie tekstu w prawo jest podobne do umieszczenia go na środku strony. Tylko środkowe słowo zostaje zastąpione przez prawo w tagu akapitu.
< P styl =tekst-wyrównywać: prawo ;>………..</ P >Zmiany można zobaczyć na poniższym obrazku.
Zapisz i odśwież stronę internetową w przeglądarce. Tekst jest teraz przeniesiony na prawą stronę strony.
Stylizacja wewnętrzna tekstu
Przykład 1
Jak opisano powyżej, wewnętrzny css (kaskadowy arkusz stylów) lub wewnętrzna stylizacja to rodzaj css, który jest zdefiniowany w nagłówku html strony. Działa podobnie do tagów wewnętrznych.
Rozważ stronę pokazaną powyżej; zawiera nagłówki i akapit w nim. Mamy obowiązek widzieć tekst w środku. Wyrównanie w wierszu wymaga ręcznego wpisywania znaczników w każdym akapicie. Ale wewnętrzne style można automatycznie zastosować do każdego akapitu tekstu, wymieniając p w instrukcji style. Nie ma wtedy potrzeby wpisywania żadnego znacznika wewnątrz znacznika akapitu. Teraz obserwuj kod i działa.
< styl >P{Tekst-wyrównywać: środek}
</ styl >
Ten znacznik jest zapisany w znaczniku stylu w części nagłówkowej. Teraz uruchom kod w przeglądarce.
Po uruchomieniu strony w przeglądarce zobaczysz, że wszystkie akapity są wyrównane do środka strony. Ten znacznik jest stosowany do każdego akapitu obecnego w tekście.
Przykład 2
W tym przykładzie, podobnie jak w akapicie, wyrównamy wszystkie nagłówki w tekście do prawej strony. W tym celu wymienimy nagłówki w instrukcji style wewnątrz głowy.
H2, h3{
Tekst-wyrównywać: Prawidłowy
}
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 przypadku stylizacji wewnętrznej może zaistnieć sytuacja, w której trzeba wyrównać tekst tylko niektórych akapitów w tekście, podczas gdy inne pozostaną takie same. Dlatego używamy pojęcia klasy. Wprowadzamy klasę z metodą kropki wewnątrz tagu style. Konieczne jest dodanie nazwy klasy wewnątrz znacznika akapitu, który chcesz wyrównać.
< styl >.środek{
Tekst-wyrównywać: środek}
</ styl >
klasa =centrum>……</ P >
Dodaliśmy klasę w pierwszych trzech akapitach. Teraz uruchom kod. W wynikach widać, że pierwsze trzy akapity są wyrównane do środka, podczas gdy inne nie.
Wniosek
W tym artykule wyjaśniono, że wyrównanie można wykonać na różne sposoby za pomocą znaczników wbudowanych i wewnętrznych.