Kurs HTML - Czcionki i formatowanie tekstu

Autor: Rafał Jan Świrk

Opublikowano: 2011-09-16

Zapewne każdy z nas widział już dziesiątki stron internetowych. Jedne były wykonane lepiej, inne gorzej. O tym, które są ładniejsze, nie będziemy dywagować, ponieważ o gustach się nie dyskutuje. Możemy jednak śmiało stwierdzić, że efekciarstwo daje marne efekty w sztuce tworzenia stron WWW. Tutaj liczy się treść. Owszem, można ją przedstawić na obrazkach, ale bardzo efektywne jest wstawienie tekstu. A z tym nierozłącznie związany jest problem formatowania tekstu i doboru odpowiednich czcionek. Wbrew pozorom, HTML umożliwia nam bardzo wiele w tym zakresie. Oczywiście wprowadza także pewne ograniczenia. Zostaną one opisane w poniższym tekście.

Po zapoznaniu się z tym artykułem będziesz:

• wiedział, dlaczego należy używać czcionek web-safe,
• znał podstawowe znaczniki formatujące tekst oraz zmieniające jego kolor,
• potrafił poradzić sobie z podstawowymi problemami formatowania tekstu w języku HTML, np. z wstawieniem kilku znaków spacji.

Implementacja

Czcionki web-safe

Projektując stronę WWW często mamy zamiar ją przyozdobić. Dobór nietypowej czcionki nam to bardzo ułatwia. Tworząc np. artykuł o historii, aby lepiej wczuć się w klimat, możemy ustawić czcionkę, która sprawi, że nasz tekst będzie wyglądał jak wyjęty żywcem ze średniowiecznej księgi, pisanej przez mnicha w mrocznym klasztorze przy świecy. Do tego możemy dołożyć ładne tło, odpowiednie kolory i dzieło gotowe. Następnie możemy opublikować naszą stronę w internecie, aby zaprezentować światu efekt naszej pracy. Jednak może się okazać, że nasz trud poszedł na marne. Osoba przeglądająca naszą stronę może korzystać z innego systemu operacyjnego, albo całkiem innego urządzenia niż komputer PC, np. telefonu komórkowego. Wtedy nasza piękna, wystylizowana czcionka może zamienić się w jedną z najbardziej standardowych, np. „Arial”, która sprawi, że klimat strony pryśnie jak bańka mydlana. Przyjrzyjmy się czcionkom od strony technicznej. Najprościej można je podzielić następująco:

• szeryfowe (np.Georgia),
• bezszeryfowe (np. Arial),
• monospace (np. Courier New),
• cursive.

Zacznijmy od pierwszych dwóch. Cała kwestia rozchodzi się o tak zwane „ogonki”. Nie chodzi mi o polskie znaki, ale bardziej o wykończenia każdej literki. Czcionki szeryfowe w większym stopniu przypominają pismo odręczne i są trudniejsze do wyświetlenia. jest czcionki bezszeryfowe są dużo prostsze. Nie zawierają tylu ozdobników. Każdy znak ma dokładnie tyle pikseli, żeby poprawnie go odzwierciedlić.

W przypadku monospace sprawa jest prosta, a rozwiązanie zagadki kryje się w nazwie. Czcionki te mają stałą odległość między znakami. A jeśli mówimy o typie cursive to mamy na myśli czcionki, przypominające pismo odręczne.

W przypadku stron WWW powinniśmy stosować krój bezszeryfowy. Niestety środowiska komputerowe często bardzo różnią się od siebie. Aby je ujednolicić, wprowadza się standardy, które przynajmniej teoretycznie powinny być spełniane. Jednym z nich jest „Web safe fonts”, można to określić jako bezpieczne czcionki webowe. Jest to zbiór czcionek, które bez problemów powinny być wyświetlane w różnych przeglądarkach internetowych, zainstalowanych w rozmaitych systemach, są to m.in.: Arial, Comic Sans MS, Impact, Times New Roman, itp.

Podstawowe znaczniki

Znacznik font może przyjmować kilka parametrów:

• size – rozmiar czcionki, wyróżniamy względny i bezwzględny; ten pierwszy, jak sama nazwa wskazuje, ustalamy na podstawie czcionki bazowej, np. o trzy pkt. większa od standardowej, w drugim przypadku po prostu podajemy wartość, która nas interesuje:

  <font size="12">Tekst o rozmiarze 12</font>
  <font size="-8">Tekst pomniejszony o 8 pkt.</font>

• color – kolor, możemy podać jego nazwę (np. black) lub wpisać kod szesnastkowo

  <font color="red">Czerwona czcionka</font>
  <font color="FF0000">Czerwona czcionka zapisana heksadecymalnie</font>

• face – rodzaj czcionki

  <font face="Times New Roman"> Czcionka Times New Roman </font>

*
Rys. 1. Powyższe kody w praktyce.*

Bardzo ważnym elementem każdego tekstu są nagłówki. W prosty sposób wyróżniają ważne elementy tekstu, takie jak np. początek rozdziału. W takich sytuacjach możemy wykorzystać czcionki szeryfowe. Do wyróżnienia nagłówka używamy znacznika <hn>...</hn>, gdzie n to numer znacznika, mamy do dyspozycji sześć warstw, np.:

<h1>Nagłówek 1</h1>

<h2>Nagłówek 2</h2>

<h3>Nagłówek 3</h3>

<h4>Nagłówek 4</h4>

*
Rys. 2. Zastosowanie nagłówków.*

Czym byłoby formatowanie tekstu bez najczęściej używanych opcji, takich jak choćby kursywa. Przyjrzyjmy się, jak one prezentują się w HTML:

• pogrubienie:

  <b>Pogrubienie</b>

• kursywa:

  <i>Kursywa</i>

• podkreślenie

  <u>Podkreślenie</u>

• przekreślenie

  <s>Przekreślenie</s>

Rys. 3. Różne typy formatowania.

Informacja

Należy pamiętać o umiejętnym zagnieżdżaniu znaczników. Znacznik, który jest otwierany jako pierwszy, musi być zamykany na samym końcu, np. <b><i>...</i></b>. Nie powinniśmy ich mieszać w następującej kolejności: <b><i>...</b></i>, ponieważ taki kod może być interpretowany w inny sposób przez różne przeglądarki.

Oczywiście na tym możliwości języka HTML się nie kończą. Zapoznamy się teraz z rzadziej używanymi znacznikami formatującymi:

• emfaza – wyróżnienie tekstu, najczęściej poprzez kursywę
  <em>Wyszczególniony tekst</em>,

• strong – wyróżnienie poprzez pogrubienie

  <strong>Wyszczególniony tekst</strong>

• code – fragment tekstu, który ma być wyświetlony czcionką o stałej szerokości, bardzo przydatny znacznik przy prezentowaniu kodów programów

  <code>kod programu...</code>

• samp – pokazuje tak zwany „przykładowy tekst”, w działaniu podobny do code

  <samp>przykład</samp>

• kbd – oznacza tekst, który ma być wpisany z klawiatury, przez przeglądarki najczęściej wyświetlany w formie czcionki o stałej szerokości znaków

  <b>W oknie konsoli wpisz<kbd>dir system 32</kbd></b>

• var – obejmuje zmienne, które użytkownik powinien zastąpić

  <b>rm <var>nazwa_pliku</var></b>

• cite – wykorzystywany, gdy w tekście używamy cytatów

  <cite>640 KB pamięci operacyjnej powinno każdemu wystarczyć</cite>

• tt – czcionka maszynowa o jednakowej szerokości znaków

  <tt>przykładowy tekst</tt>

• big – czcionka powiększona względem reszty tekstu

  <big>gdy chcemy powiększyć fragment tekstu, używamy znacznika big</big>

• small – jak sama nazwa wskazuje pomniejsza fragment względem reszty tekstu

  <small> ten fragment tekstu będzie mniejszy od reszty</small>

• sup – tekst będzie wyświetlany jako indeks górny

  <sup>indeks górny</sup>

• sub – tekst będzie wyświetlany jako indeks dolny

  <sup>indeks dolny</sup>

• dfn – definiuje tekst jako definicję

  <dfn> definicja...</dfn>

• del oraz ins – znaczniki te często występują w parze, określają fragment błędnego tekstu i podkreślają poprawny

  2+2 = <del>5</del><ins>4</ins>

  *
  Rys. 4. Zastosowanie znaczników del i ins.*

• abbr – służy do oznaczania skrótów wyrazów

  <abbr> mgr inż.</abbr>

• acronym – wskazuje akronim (wyraz utworzony z pierwszych liter innych wyrazów)

  <acronym>NATO</acronym>

• br – nowa linia

  <br> zaczynamy nową linię, nie posiada znacznika zamykającego

• hr – rysuje poziomą linię, nie posiada znacznika zamykającego

  <hr>

• center – wyśrodkowuje tekst

  <center> tekst, który ma być wyśrodkowany</center>

Jak widzimy, znaczników jest całkiem sporo, niektóre z nich są bardzo podobne w działaniu. Bardzo ważnym znacznikiem, o którym nie było jeszcze mowy jest ol. Umożliwia on utworzenie listy uporządkowanych punktów. Zagnieżdżając w nim znaczniki ul (punkty numerowane) oraz li (punkty bez numeracji) możemy bardzo szybko utworzyć ładną listę lub spis treści. Przykład znajduje się poniżej:

<html>
<head>
<title>Czcionki i formatowanie tekstu</title>
</head>
<body>
      <h1>Lista numerowana</h1>
      <ol>
          <li>pkt. 1</li>
          <ul>
              <li>pkt. 1</li>
          </ul>
          <li>pkt. 2</li>
          <ul>
              <li>pkt. 1</li>
          </ul>
      </ol>
</body>
</html>

*
Rys. 5. Zastosowanie znacznika ul.*

Problemy związane z formatowaniem

Dobrze, że mamy tyle znaczników formatujących. Jednak co zrobimy w przypadku, jeśli będziemy chcieli wstawić kilka spacji? Wklepanie ich w kodzie nie pomoże, ponieważ taki ciąg białych znaków przeglądarka zinterpretuje jako pojedynczy. W tym celu używamy znaków specjalnych. Do wstawiania spacji używamy &nbsp;. Gdy chcemy wyświetlić znaki większości lub mniejszości, które nie mogą wystąpić od tak sobie w kodzie, ponieważ otwierają i zamykają znaczniki, używamy odpowiednio: &gt; dla „>” oraz &lt; dla „<”. Symbol „&” możemy wyświetlić poprzez &amp;.

Podsumowanie

Temat formatowania tekstu, przy użyciu języka HTML, jest bardzo rozległy. Można na to poświęcić kilka rozdziałów książki. Dość istotne jest tutaj również CSS. W tym artykule dowiedzieliśmy się, dlaczego należy stosować czcionki web-safe. Poznaliśmy najczęściej wykorzystywane znaczniki, które służą do formatowania tekstu oraz dowiedzieliśmy się, jak rozwiązać problem z wstawianiem białych znaków do dokumentu HTML.

---