2.4. Formatowanie i stylizacja tekstu

W tej części lekcji dowiesz się, jak formatować i stylizować tekst na swoich stronach internetowych za pomocą odpowiednich znaczników HTML.

Przerwanie linii tekstu

Czasami chcemy przerwać linię tekstu, na przykład aby umieścić nowy akapit lub stworzyć odstęp między dwoma elementami. Do tego celu używamy znacznika  . Przykład:

<p>To jest pierwszy akapit.<br>To jest drugi akapit, przerwany znacznikiem <br>.<p>

Tworzenie List

Listy pomagają w porządkowaniu treści i prezentacji informacji w sposób uporządkowany. Istnieją dwie główne rodzaje list: listy nienumerowane <ul> oraz listy numerowane <ol>.

Lista Nienumerowana (UL)

Listy nienumerowane służą do wyświetlania elementów w formie punktów. Używamy znacznika <ul> i elementów listy <li>. Przykład:

<ul>
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
</ul>

Lista Numerowana (OL)

Listy numerowane służą do wyświetlania elementów w formie numerów. Używamy znacznika <ol> i elementów listy <li>. Przykład:

<ol>
    <li>Pierwszy element</li>
    <li>Drugi element</li>
    <li>Trzeci element</li>
</ol>

Znaczenie Znacznika `<li>`

Znacznik <li> jest używany do tworzenia poszczególnych elementów listy zarówno w listach nienumerowanych, jak i numerowanych. To właśnie dzięki niemu każdy element jest odpowiednio sformatowany jako punkt lub numer na liście.

W tej lekcji nauczyłeś się, jak korzystać ze znacznika   do przerwania linii tekstu oraz jak tworzyć listy nienumerowane i numerowane za pomocą znaczników <ul> i <ol> oraz elementów <li>. W następnej lekcji przejdziemy dalej i będziemy się skupiać na bardziej zaawansowanym formatowaniu tekstu i stylizacji w HTML.

Formatowanie tekstu to istotny aspekt tworzenia stron internetowych. Dzięki odpowiednim znacznikom HTML możesz nadać swojemu tekstu różne style, akcenty i wyróżnienia, co pomaga poprawić czytelność i atrakcyjność treści.

Znaczniki Tekstowe

`` – Pogrubiony Tekst

Znacznik  służy do pogrubienia tekstu, nadając mu większą wagę semantyczną. Przykład:

<p>To jest <strong>ważny</strong> akapit.</p>

`` – Kursywa

Znacznik  stosuje się do kursywy, podkreślając tym samym ważne słowa lub frazy. Przykład:

<p>Podczas tej podróży poczułem się <em>wspaniale</em>.</p>

`` – Podkreślenie

Znacznik  służy do podkreślania tekstu. Przykład:

<p>Zadanie <u>do wykonania</u>:</p>

Formatowanie specjalnych fragmentów

`` – Wyróżnienie

Znacznik  pozwala na wyróżnienie tekstu, np. aby zaznaczyć ważne informacje. Przykład:

<p>Skontaktuj się z nami <mark>w ciągu 24 godzin</mark> po złożeniu zamówienia.</p>

Zaawansowane stylizacje

`` – Indeks Górny

Znacznik  używa się do wyświetlania indeksu górnego, np. w równaniach chemicznych. Przykład:

<p>Wzór chemiczny wody: H<sub>2</sub>O.</p>

`` – Indeks Dolny

Znacznik  służy do wyświetlania indeksu dolnego, np. w równaniach chemicznych. Przykład:

<p>Ciśnienie atmosferyczne wynosi około 1013<sup>hPa</sup>.</p>

Jakim znacznikiem HTML zmienić kolor czcionki?

Aby zmienić kolor czcionki w HTML, użyjemy atrybutu style wewnątrz znacznika tekstu. Przykładowo, jeśli chcemy zmienić kolor tekstu na czerwony, można to zrobić w następujący sposób:

<p style="color: red;">Ten tekst jest czerwony.</p>

W powyższym przykładzie atrybut style został użyty w znaczniku , a właściwość color została ustawiona na red, co oznacza czerwony kolor tekstu. Możesz zmieniać wartość właściwości color na inne kolory lub używać ich kodów, na przykład #FF0000 dla czerwonego koloru.

Podsumowanie

W tym rozdziale omówiliśmy różne znaczniki HTML, które pozwalają na formatowanie i stylizację tekstu na stronach internetowych. Znaczniki takie jak , , , ,  i  pozwalają wyróżniać, akcentować oraz dodawać efekty specjalne do tekstu, poprawiając tym samym czytelność i estetykę twojej strony.

W następnej lekcji będziemy kontynuować omawianie dalszych aspektów formatowania i stylizacji tekstu, w tym kolorów, czcionek i wielkości tekstu.

Stylizowanie i formatowanie tekstu w HTML to szeroki temat, który obejmuje wiele aspektów. Oto kilka dodatkowych informacji, które warto wiedzieć:

Kaskadowe Arkusze Stylów (CSS): Podstawowe formatowanie tekstu można osiągnąć za pomocą znaczników HTML, ale głównym narzędziem do stylizacji stron internetowych jest CSS. CSS pozwala na precyzyjne kontrolowanie wyglądu elementów na stronie, takich jak kolor tekstu, tło, czcionki, odstępy i wiele innych. Zaleca się korzystanie z CSS do bardziej zaawansowanych stylizacji.
Właściwości Czcionek: W CSS można dostosować wiele właściwości czcionek, takich jak rodzaj czcionki (font-family), wielkość (font-size), pogrubienie (font-weight), kursywa (font-style) i wiele innych. Możesz również tworzyć zmienną czcionkę (font-stack), aby wybrać preferowane czcionki w przypadku braku dostępu do danej czcionki.
Właściwości Kolorów: Możesz zmieniać kolor tekstu i tła za pomocą właściwości kolorów. Właściwość color określa kolor tekstu, a background-color kolor tła elementu.
Marginesy i Padding: Właściwości margin i padding pozwalają na kontrolowanie odstępów wokół elementów. Margin tworzy odstęp między elementem a innymi elementami, a padding tworzy odstęp między zawartością elementu a jego ramką.
Border i Ramki: Właściwość border pozwala na dodawanie obramowania do elementów, a właściwość border-radius pozwala na zaokrąglanie rogów.
Tekst Alternatywny (Alt): Oprócz stylizacji, ważne jest dodawanie tekstu alternatywnego (alt) do obrazów za pomocą znacznika <img>. Tekst alternatywny jest wyświetlany, gdy obraz nie może być załadowany, co jest istotne dla dostępności i SEO.
Responsywność: Podczas stylizacji tekstu i elementów pamiętaj o responsywności. Upewnij się, że twoja strona dobrze wygląda na różnych urządzeniach i ekranach, dostosowując się do rozmiaru ekranu.
Praktyczne Ćwiczenia: Praktyka jest kluczowa. Twórz różne style tekstu, eksperymentuj z właściwościami CSS i zobacz, jakie efekty można osiągnąć.

Pamiętaj, że stylizowanie tekstu to proces kreatywny, a dobre praktyki dostępności i responsywności są równie ważne, jak estetyka strony. Korzystaj z dokumentacji HTML i CSS, a także eksperymentuj, aby znaleźć najlepsze rozwiązania dla twojej strony internetowej.