Formatowanie treści#
Czcionka#
<font>...<font>
Możliwe jest podanie specjalnych atrybutów odpowiedzialnych za wygląd:
size="wartość"
- rozmiar czcionkiface="rodzaj"
- krój czcionkicolor="kolor"
- kolor czcionki
Polecenie pozwala modyfikować wygląd poszczególnych partii tekstu. Do dyspozycji mamy zmianę rozmiaru, koloru oraz rodzaju stosowanej czcionki.
Obecnie element font
wraz ze wszystkimi atrybutami jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.
Zmiana wielkości czcionki#
<font size="wartość">...<font>
Rozmiar czcionki może być regulowany wartościami bezwzględnymi: od 1 (czcionka najmniejsza) do 7 (czcionka największa). Wartością domyślną jest 3, co odpowiada czcionce 12-punktowej. Generalnie jednak wielkość wyświetlanej czcionki uzależniona jest od przeglądarki.
Przykładowy kod:
<font size="1">Czcionka o wartości bezwzględnej równej 1</font><br>
<font size="2">Czcionka o wartości bezwzględnej równej 2</font><br>
<font size="3">Czcionka o wartości bezwzględnej równej 3</font><br>
<font size="4">Czcionka o wartości bezwzględnej równej 4</font><br>
<font size="5">Czcionka o wartości bezwzględnej równej 5</font><br>
<font size="6">Czcionka o wartości bezwzględnej równej 6</font><br>
<font size="7">Czcionka o wartości bezwzględnej równej 7</font><br>
Wielkości względne umieszczamy za pomocą znaków +
lub -
, po czym podajemy cyfrę (od 1 do 7). Czyli manipulujemy wielkością w odniesieniu do rozmiaru domyślnego.
Przykładowy kod:
<font>Czcionka o rozmiarze domyślnym (prawdopodobnie 3)</font><br>
<font size="3">Czcionka o wartości bezwzględnej równej 3 (porównaj z pierwszą linią)</font><br>
<font size="-1">Czcionka pomniejszona (-1)</font><br>
<font size="-2">Czcionka pomniejszona (-2)</font><br>
<font size="-3">Czcionka pomniejszona (-3) - zwróć uwagę, że bardziej pomniejszać się nie da, możliwe są wielkości rzędu 1-7</font><br>
<font size="+1">Czcionka powiększona (+1)</font><br>
<font size="+2">Czcionka powiększona (+2)</font><br>
<font size="+3">Czcionka powiększona (+3)</font><br>
<font size="+4">Czcionka powiększona (+4)</font><br>
<font size="+5">Czcionka powiększona (+5) - zwróć uwagę, że bardziej powiększać się nie da, możliwe są wielkości rzędu 1-7</font><br>
Zwracam uwagę, że owym sposobem nie można dowolnie ustalać rozmiaru czcionki. Efekt wynikowy musi zawierać się w przedziale od 1 do 7.
Odpowiednikiem atrybutu size="wartość"
w CSS jest własność font-size
.
Zmiana kroju czcionki#
<font face="rodzaj">...<font>
lub
<font face="rodzaj1, rodzaj1, rodzaj1...">...<font>
W większości systemów operacyjnych znajdują się standardowe czcionki, z których możemy skorzystać. W doborze należy być ostrożnym, jeśli użytkownik czytający stronę, nie będzie posiadał zadeklarowanej czcionki w swoim systemie, tekst zostanie wyświetlony czcionką domyślną (zależną od stosowanej przeglądarki). Poza tym nie każda czcionka potrafi zapisać poprawnie polskie znaki.
Krój czcionki można zadeklarować podając nazwę czcionki (np. Arial
, Helvetica
) lub definiując rodzinę czcionek (np. sans-serif
). Można podać kilka rodzajów, oddzielając je przecinkiem. Gdy nazwa czcionki składa się z kilku wyrazów, należy ją umieścić w apostrofie.
Polecam od razu wypisać kilka krojów - wtedy zostanie użyta taka czcionka, którą pierwszą w kolejności podawania będzie posiadał użytkownik. Rodziny ogólne najlepiej podawać na końcu deklaracji.
Prosty przykład:
<font>Tekst napisany domyślnym krojem pisma</font><br>
<font face="Georgia, Times, serif">Tekst powinien być napisany czcionką Georgia</font><br>
<font face="'Times New Roman', serif">Tekst powinien być napisany czcionką 'Times New Roman'</font><br>
<font face="Arial, sans-serif">Tekst powinien być napisany czcionką Arial</font><br>
<font face="Verdana, sans-serif">Tekst powinien być napisany czcionką Verdana</font><br>
<font face="'Courier New', monospace">Tekst powinien być napisany czcionką 'Courier New'</font><br>
Istnieją techniki, umożliwiające osadzanie dowolnych czcionek w arkuszach stylów. Plik z definicją znaków może być pobierany bezpośrednio z Internetu. Niestety technologia nie została ujednolicona, jak zwykle odmieńcem w całej zabawie jest Internet Explorer (6, 7, 8). Więcej na temat stosowania dowolnego kroju umieszczę w kursie CSS.
Odpowiednikiem atrybutu face="rodzaj"
w CSS jest własność font-family
.
Zmiana koloru czcionki#
<font color="wartość">...<font>
Kolor można definiować poprzez podanie angielskiej nazwy np. (black, red itd.) lub za pomocą odpowiedniego zapisu szesnastkowego np. #00CC00
.
Krótki przykład
<font>Tekst napisany w domyślnym kolorze czcionki (prawdopodobnie czarnym)</font><br>
<font color="red">Tekst napisany w kolorze czerwonym (red)</font><br>
<font color="#FF0000">Tekst napisany w kolorze czerwonym (#FF0000)</font><br>
<font color="green">Tekst napisany w kolorze zielonym (green)</font><br>
<font color="#008000">Tekst napisany w kolorze zielonym (#008000)</font><br>
<font color="#3300CC">Tekst napisany w losowym kolorze (#3300CC)</font><br>
Więcej na temat deklaracji kolorów przeczytasz w dziale "Kolory".
Odpowiednikiem atrybutu color="kolor"
w CSS jest własność color
.