Czcionki
Znaczniki czcionki
O rozdziale:
Znaczniki opisujące czcionki znajdują ciągle zastosowanie na stronach WWW. Pamiętaj jednak, że kilka z nich uznano za przestarzałe, wielu z nich praktycznie się już nie używa, zaś World Wide Web Consortium zaleca generalnie wykorzystywanie do opisu czcionek stylów. Obok klasycznych poleceń HTML podajemy zatem także ich odpowiedniki w stylach CSS.
Znaczniki fizyczne
Znaczniki fizyczne działają w podobny sposób jak atrybuty czcionek w edytorze tekstów, tworząc warstwę prezentacyjną redagowanego tekstu - wyróżniają one pewne fragmenty z całego przekazu.
Czcionka pogrubiona
Kod:
<b> </b>
Przykład:
To jest czcionka pogrubiona (bold)
Polecenie pogrubienia istnieje jeszcze w specyfikacji XHTML 1.1, natomiast prawdopodobnie zostanie wycofane w XHTML 2.0. Już teraz w miejsce pogrubienia zaleca się stosowanie polecenia strong, które ma charakter logiczny, a nie fizyczny.
Odpowiednik w stylach CSS: font-weight: bold
Czcionka pochylona
Kod:
<i> </i>
Przykład:
To jest czcionka pochylona (italic)
Polecenie pochylenia istnieje jeszcze w specyfikacji XHTML 1.1, natomiast prawdopodobnie zostanie wycofane w XHTML 2.0. Już teraz w miejsce pochylenia zaleca się stosowanie polecenia em, które ma charakter logiczny, a nie fizyczny.
Odpowiednik w stylach CSS: font-style: italic -
Czcionka o stałej szerokości znaku
Kod:
<tt> </tt>
Przykład:
To jest czcionka monotypiczna, o stałej szerokości znaku (fixed width = teletype)
Polecenie zostało zachowane jeszcze w specyfikacji XHTML 1.1, ale prawdopodobnie zostanie wycofane z wersji XHTML 2.0
Odpowiednik w stylach CSS: font-family: monospace -
Superskrypt (indeks górny)
Kod:
<sup> </sup>
Przykład:
Czcionka z superskryptem
Odpowiednik w stylach CSS: vertical-align: super
Subskrypt (indeks dolny)
Kod:
<sub> </sub>
Przykład:
Czcionka z subskryptem
Odpowiednik w stylach CSS: vertical-align: sub
Duża czcionka (+1 punkt)
Kod:
<big> </big>
Przykład:
Duża czcionka
Polecenie zostało jeszcze zachowane w XHTML 1.1, ale prawdopodobnie zostanie wycofane z XHTML 2.0.
Mała czcionka (-1 punkt)
Kod:
<small> </small>
Przykład:
Mała czcionka
Polecenie zostało jeszcze zachowane w XHTML 1.1, ale prawdopodobnie zostanie wycofane z XHTML 2.0.
Znaczniki logiczne
Znaczniki logiczne odnoszą się do konkretnych zastosowań, ale wizualny efekt ich działania jest analogiczny jak w przypadku znaczników fizycznych. Czcionka pogrubiona, pochylona lub monotypiczna są domyślnie przypisane do wybranego znacznika logicznego.
Odwołanie do źródła
Kod:
<cite> </cite>
Przykład:
To jest odwołanie do źródła
Definicja
Kod:
<dfn> </dfn>
Znacznik <dfn>, czyli Defining Instance, jest poleceniem stosowanym do wyróżniania jakiegoś fragmentu tekstu, np. pojawiającego się po raz pierwszy w danym tekście terminu. Przeglądarki interpretują <dfn> jako kursywę. Na przykład:
Firefox to przeglądarka Mozilli.
Element usunięty
Przy najrozmaitszych rewizjach tekstów możemy się posłużyć poleceniem <del>, które sygnalizuje zmiany. Pokazuje ono przekreślony fragment tekstu, np.:
Kod:
<del> </del>
Przykład:
Dokument dotyczący naszej polityki sprzedaży nie jest już dostępny.
Element wstawiony
Gdy chcemy wyraźnie podkreślić jakąś nowość, możemy się posłużyć poleceniem <ins>.
Kod:
<ins> </ins>
Przykład:
To jest nowe opracowanie tematu
Skrót i akronim
Nowymi poleceniami HTML 4 są skrót i akronim. Oba polecenia sygnalizują obecność skrótów (np. dyr., prof.) i akronimów (np. WWW, AWS) i będą mogły być wykorzystywane w trakcie syntezy dźwięku przez odpowiednie oprogramowanie, systemy wyszukiwawcze, korektory poprawności ortograficznej czy systemy automatycznego tłumaczenia. Atrybut języka precyzuje język dla poprawnego działania tych systemów.
Kod:
<abbr lang="pl" title="Profesor">Prof.</abbr>
<acronym lang="en" title="World Wide Web">WWW</acronym>
Przykład:
Prof.
WWW
Czcionka mocno wyróżniona (strong)
Polecenie <strong> jest zalecane w miejsce stosowanego do tej pory powszechnie polecenia <b>, które prawdopodobnie zostanie wycofane ze specyfikacji w XHTML 2.0
Kod:
<strong> </strong>
Przykład:
To jest czcionka mocno wyróżniona (strong)
Czcionka wyróżniona (emfaza)
Polecenie <em> jest zalecane w miejsce stosowanego do tej pory powszechnie polecenia <i>, które prawdopodobnie zostanie wycofane ze specyfikacji w XHTML 2.0
Kod:
<em> </em>
Przykład:
To jest czcionka wyróżniona (emphasis)
Kod (tekst programu)
Kod:
<code> </code>
Przykład:
To jest kod (code)
Czcionka wprowadzana z klawiatury
Kod:
<kbd> </kbd>
Przykład:
Czcionka z klawiatury
Przykład
Kod:
<samp> </samp>
Przykład:
Przykład (sample)
Zmienna (słowo kluczowe języka)
Kod:
<var> </var>
Przykład:
Zmienna (variable)
Kolory czcionki
Dowolnemu fragmentowi tekstu można nadać kolor. W starszych wersjach HTML stosowano polecenie font color="nazwa_koloru", jednak w HTML 4 zostało ono uznane za przestarzałe i do określania koloru stosuje się obecnie style.
<p style="color: blue; ">Tekst w kolorze niebieskim.</p>
Tekst w kolorze niebieskim.
Poniżej przedstawiamy listę 16 podstawowych barw (nazwy imienne) stosowanych w dokumentach internetowych.
Przykład:
tekst próbny - black
tekst próbny - olive
tekst próbny - teal
tekst próbny - red
tekst próbny - blue
tekst próbny - maroon
tekst próbny - navy
tekst próbny - gray
tekst próbny - lime
tekst próbny - fuchsia
tekst próbny - white
tekst próbny - green
tekst próbny - purple
tekst próbny - silver
tekst próbny - yellow
tekst próbny - aqua
Wielkość czcionki
Dowolnemu fragmentowi tekstu można nadać wielkość czcionki. W starszych wersjach HTML stosowano polecenie font size="wielkość", jednak w HTML 4 zostało ono uznane za przestarzałe i do określania wielkości stosuje się obecnie style.
<p style="font-size: large; ">Tekst o wielkości large</p>
Tekst o wielkości large
Przykład:
To jest tekst normalny
Tekst o wielkości xx-small
Tekst o wielkości x-small
Tekst o wielkości small
Tekst o wielkości medium
Tekst o wielkości large
Tekst o wielkości x-large
Tekst o wielkości xx-large
Krój czcionki
W starszych wersjach HTML stosowano polecenie font face="nazwa_kroju". W HTML 4.01 zrezygnowano z niego na rzecz stylów. Na przykład:
<p style="font-family: arial; ">Treść akapitu wyświetlona krojem Arial</p>
Treść akapitu wyświetlona krojem Arial
Treść akapitu wyświetlona krojem Courier
Treść akapitu wyświetlona krojem Verdana
