Kurs języka HTML - poradnik webmastera: Znaczniki fizyczne i logiczne czcionki

















Tematy: Czcionka pogrubiona | Czcionka pochylona | Czcionka o stałej szerokości | Superskrypt | Subskrypt | Duża czcionka | Mała czcionka | Odwołanie do źródła | Definicja | Element usunięty | Element wstawiony | Skrót i akronim | Czcionka mocno wyróżniona | Czcionka wyróżniona | Kod | Czcionka z klawiatury | Przykład | Zmienna | Kolor czcionki | Wielkość czcionki | Krój czcionki





Strona główna kursu

Spis poleceń

Wstęp

Etykieta webmastera

HTML dla początkujących

Struktura dokumentu

Elementy blokowe

Czcionki

Odsyłacze

Wykazy

Grafika

Multimedia

Tabele

Formularze

Style

Ramki

Pływające ramki

Znaki specjalne

Kolory

Ankieta

Poprawność dokumentów

Inne materiały





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 - więcej...

Informacje o B



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 - więcej...

Informacje o I



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 - więcej...

Informacje o TT



Superskrypt (indeks górny)

Kod:



Przykład:

Czcionka z superskryptem

Odpowiednik w stylach CSS: vertical-align: super - więcej...

Informacje o SUP



Subskrypt (indeks dolny)

Kod:



Przykład:

Czcionka z subskryptem

Odpowiednik w stylach CSS: vertical-align: sub - więcej...

Informacje o 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.

Odpowiednik w stylach CSS: font-size: larger - więcej...

Informacje o BIG



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.

Odpowiednik w stylach CSS: font-size:smaller - więcej...

Informacje o SMALL

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

Informacje o CITE



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.

Informacje o DFN



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.

Informacje o DEL



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

Informacje o INS



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

Informacje o ABBR

Informacje o ACRONYM



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)

Informacje o 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)

Informacje o EM



Kod (tekst programu)

Kod:

<code> </code>

Przykład:

To jest kod (code)

Informacje o CODE



Czcionka wprowadzana z klawiatury

Kod:

<kbd> </kbd>

Przykład:

Czcionka z klawiatury

Informacje o KBD



Przykład

Kod:

<samp> </samp>

Przykład:

Przykład (sample)

Informacje o SAMP



Zmienna (słowo kluczowe języka)

Kod:

<var> </var>

Przykład:

Zmienna (variable)

Informacje o VAR



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


Więcej informacji - rozdział Kolor w stylach...



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


Więcej informacji - rozdział Wielkość czcionki o stylach



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

Więcej informacji: - rozdział Rodzina czcionek w stylach