Nauczyliśmy się już budować listy oraz wstępnie formatować tekst. Tym razem dowiemy się jak poprawnie podzielić tekst na akapity, jak z akapitów zrobić bloki, które następnie będzie można pozycjonować za pomocą stylów, oraz jak wstawiać na stronę nagłówki.
Wiemy jak tworzyć akapity stosując tagi {html}
{/html}. Musimy jednak pamiętać, że nowa linia wprowadzona z klawiatury poprzez wciśnięcie klawisza Enter jest ignorowana przez przeglądarki.
Tekst napisany w ten sposób nadal jest wyświetlany w jednej linii – dokładniej jest on łamany w miejscu, które przeglądarka uzna za słuszne lub gdy przestaje się mieścić na ekranie. Mimo że dawało to zadowalające rezultaty, nie jest to rozwiązanie poprawne, a ponadto mało elastyczne. Zapoznajmy się więc z poprawnym sposobem podziału tekstu na akapity w HTML-u.
Akapity
Do wydzielania akapitów w języku HTML służy znacznik {html}
{/html}. Używa się go w sposób podobny do większości znaczników: tekst, który jest akapitem, trzeba umieścić pomiędzy {html}
{/html} a {html}
{/html}:
Każdy akapit w HTML-u powinien być umieszczany pomiędzy znacznikami <p> a </p>
Stosowanie akapitów w tej postaci pozwala także na formatowanie położenia tekstu w akapicie za pomocą stylów. Dowiemy się jak za ich pomocą wyjustować tekst w akapicie.
W tym celu odpowiedni styl umieszczamy w parametrze style znacznika {html}
{/html}. Do justowania tekstu w akapicie należy użyć stylu o nazwie text-align, który przyjmuje następujące wartości:
- left – wyrównuje tekst do lewej strony,
- right – wyrównuje tekst do prawej strony,
- center – wyrównuje tekst do środka,
- justify – wyrównuje tekst do obu stron.
Oto przykład:
Tekst umieszczony w akapicie można justować korzystając ze stylów, tak jak to zrobiono tutaj.
Przydatna może się też okazać możliwość zmiany koloru tekstu w akapicie lub koloru tła. Do zmiany koloru tekstu służy styl color. Jego parametrem jest kod koloru zapisany w postaci szesnastkowej:
gdzie RR odpowiada składowej czerwonej, GG składowej zielonej, natomiast BB składowej niebieskiej koloru. Można to także zapisać w taki sposób:
gdzie R, G, B są wartościami poszczególnych składowych zapisanych jako cyfry dziesiętne. Może wydawać się to skomplikowane, warto więc zapamiętać, że każdy program graficzny podczas wyboru koloru pokazuje także te trzy składowe wybranego koloru – Paint pozwala odczytać wartość RGB w postaci dziesiętnej.
Zamiast składowych RGB można także użyć kilku predefiniowanych nazw kolorów (rys. 1): aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white oraz yellow.
Do zmiany koloru tła trzeba użyć stylu background-color, który przyjmuje dokładnie takie same parametry co styl color.
Nagłówki
Nagłówki dzielą stronę na części i stanowią najczęściej swoisty tytuł danej części – pełnią podobną rolę do nazw rozdziałów w książce, tytułów artykułów czy też tytułów nad akapitami w tym artykule. W HTML-u zdefiniowano sześć poziomów nagłówków. Ich znaczniki to \”{html}
HYML
Formatowanie tekstu
Znaczniki logiczne
Znaczniki fizyczne
Listy
Listy wypunktowane
Listy numerowane
Listy definicji
Bloki tekstu
Akapity
Nagłówki
Bloki <div>
Nagłówki nie służą do wyróżniania fragmentów tekstu – do tego służą znaczniki przedstawione w pierwszej części kursu.
Częstą praktyką jest umieszczanie na górze strony nagłówka, który odpowiada tytułowi strony (znacznik {html}