Formatowanie tekstu
Pogrubienie tekstu
Tekst można pogrubić i powiększyć, dzięki użyciu tagów nagłówków h1-h6. Wspominaliśmy wtedy jednak, że powinny one być używane do wprowadzenia struktury dokumentu, a nie jako sposób na pogrubienie tekstu.
Najprostszym sposobem aby pogrubić fragment tekstu, np. fragment zawartości elementup, jest użycie tagubi umieszczenie zawartości pomiędzy jego tagiem otwierającym i zamykającym. Nazwabto skrót odbold, po polsku oznacza to po prostu pogrubienie.
| 123 | <p> Lubię <b>placki</b>. A ty co o nich myślisz?</p> |
|---|---|
W powyższym fragmencie słowoplackizostanie pogrubione.
Co ciekawe, możemy również pogrubić tekst przy pomocy tagustrong(pl.silny).
| 123 | <p> Lubię <strong>placki</strong>. A ty co o nich myślisz?</p> |
|---|---|
Oba powyższe fragmenty wyglądają w przeglądarce najczęściej tak samo. Zastanawiasz się pewnie po co nam dwa tagi, służące właściwie do tego samego, już wyjaśniam. Tagbbył pierwszy, następnie w jednej z wersji HTML postanowiono wprowadzić tagstrong. Wynikało to ze zmiany podejścia do formatowania tekstu. Zamiast po prostu pogrubić tekst, postanowiono podkreślić znaczenie tej operacji - wzmocnienie wagi (ang.strong importance) tekstu. Jednak tagbprzetrwał, z uwagi na jego krótszy zapis. Efekt jest taki, że w dzisiejszych czasach mamy dwa tagi służące praktycznie do tego samego.
Aby twórcy stron wiedzieli kiedy używaćb, a kiedystrong, wprowadzono następujące rekomendacje:
Znacznika
strongnależy używać dla ważnego tekstu, który powinien wyróżniać się na tle reszty.Elementu
bpowinniśmy używać dla tekstu, który chcemy pogrubić, lecz nie jest on ważniejszy niż reszta. Dotyczy to przede wszystkim słów kluczowych, czy nazw własnych.
Przykład użycia obu tych tagów może wyglądać następująco:
| 123 | <p><strong>Ważna informacja:</strong> Lubię <b>placki</b>. A ty co o nich myślisz?</p> |
|---|---|
Zadanie 1
Utwórz akapit zawierający pogrubiony fragment. Do pogrubienia użyj jednego z poznanych w tej lekcji tagów.
Kursywa
Kursywa to po prostu pochylony tekst. Spotykamy się z bardzo podobną sytuacją jak w przypadku pogrubienia, tym razem możemy używać tagówi(ang.italics- pl.kursywa) orazem(ang.emphasis- pl.nacisk, akcentowanie, emfaza).
Znacznikaempowinniśmy używać do nadania słowu emfazy, czyli pewnego akcentowania lub nacisku. Natomiast elementipowinien zostać użyty do wyróżnienia fragmentów pozbawionych emfazy, czyli np. obcojęzycznych słów, czy terminów technicznych.
| 1234567 | <p> To jest <em>emfaza</em>.</p><p> A to <i>kursywa</i>.</p> |
|---|---|
Kolejne formatowania tekstu
Ciekawym elementem formatującym jest mark (marked-oznaczony, wyróżniony). Służy on do wyodrębnienia w tekście fragmentu, który ma zostać wyróżniony. Domyślnie tekst zostaje wyróżniony żółtym tłem, ale można to zmienić przy pomocy stylów CSS, które poznamy już niedługo. Znacznikmarkmoże zostać użyty do wyróżnienia istotnych treści, słów kluczowych, bądź wyników różnego rodzaju wyszukiwania. Jest to też dobry sposób do pokazania ostatnio dodanych zmian w plikach.
| 123 | <p> To jest <mark>oznaczony fragment tekstu</mark>. Pozostała część jest wyświetlana standardowo.</p> |
|---|---|
Jeśli chcesz, aby pewien fragment Twojego tekstu został przekreślony, możesz użyć tagudel(deleted-usunięty). Dobrze sprawdza się on w połączeniu zmark. Możemy starą zawartość przekreślić tagiemdel, a nową oznaczyć poprzezmark.
| 123 | <p> Lubię jeździć <del>skuterem</del><mark>motocyklem</mark>.</p> |
|---|---|
Skoro wiesz już jak dodać przekreślony i oznaczony tekst, to dobrze byłoby jeszcze wiedzieć jak stworzyć podkreślony tekst. Robi się to poprzez użycie taguins(inserted-wstawiony, dodany).
| 123 | <p> Kolejny fragment jest <ins>podkreślony</ins>.</p> |
|---|---|
Zadanie 2
Co ciekawe tagi formatujące możemy łączyć, wystarczy pomiędzy tagiem otwierający a zamykającym jednego z nich dodać kolejny tag wraz z zawartością.
Utwórz akapit zawierający fragment, który będzie jednocześnie podkreślony i wyróżniony tagiemmark.
Sformatowany tekst na stronie
Czasami zdarzają się sytuacje, kiedy chcemy umieścić na stronie tekst, który już posiada pewnego rodzaju formatowanie, np. są to nowe linie. Może tak być np. gdy będziesz chciał umieścić na stronie wiersz, tekst piosenki lub chociażby fragment kodu języka programowania. W takiej sytuacji zależ nam na tym, aby tekst został wyświetlony w takiej formie, w jakiej umieścimy go w kodzie HTML.
Jeśli umieścisz w kodzie poniższy fragment, to cała zawartość paragrafu i tak zostanie wypisana w jednej linii, a wiele spacji znajdujących się w pierwszej linii zostanie zastąpionych pojedynczym odstępem.
| 1 2 3 4 5 6 7 8 910 | <p> Linia 1 Linia 2 Linia 3 Refren Linia 4 Linia 5</p> |
|---|---|
Oczywiście moglibyśmy użyć tagówbr, aby podzielić tekst, jednak takie rozwiązanie jest bardzo pracochłonne, szczególnie dla dłuższych tekstów, gdzie musielibyśmy dodać bardzo wiele tagów.
Rozwiązaniem tego problemu jest użycie znacznikapre. Jego nazwa to skrót odpreformatted text, czylisformatowany tekst. Treść którą przekażesz do tego tagu zostanie wyświetlona w takiej formie, w jakiej została umieszczona w kodzie. Zostaną zachowane zarówno znaki nowej linii jak i wielokrotne spacje.
| 1 2 3 4 5 6 7 8 910 | <pre> Linia 1 Linia 2 Linia 3 Refren Linia 4 Linia 5</pre> |
|---|---|
Zadanie 3
Na stronie tego zadanie znajduje się dowcip. Popraw kod tak, aby tekst był wyświetlany w takiej formie, w jakiej znajduje się w kodzie, czyli wraz z odstępami i podziałem na linie.
Dowcip nie ma na celu kogokolwiek.
Podsumowanie
Tym razem zajmowaliśmy się formatowaniem tekstu. Na początku omówiliśmy dwa sposoby pozwalające na pogrubienie tekstu oraz wyjaśniliśmy różnicę pomiędzy nimi. Następnie zajęliśmy się tekstem pisanym kursywą, również tym razem miałeś okazję poznać dwa znaczniki, które na to umożliwiają. W dalszej części lekcji zajęliśmy się tekstem podkreślonym, przekreślonym i oznaczonym. Na koniec miałeś okazję poznać tagpreumożliwiający umieszczenie na stronie już sformatowanego tekstu.