Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Czcionki

Email Drukuj PDF

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 | Czcionka podkreślona | Czcionka przekreślona | Kod | Czcionka z klawiatury | Przykład | Zaznaczenie | Zmienna | Kolor czcionki | Wielkość czcionki | Krój czcionki

logo HTML 5O rozdziale (aktualizacja 21.02.2013): znaczniki opisujące czcionki znajdują powszechne 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 w wielu miejscach ich odpowiedniki w stylach CSS. W HTML 5 pojawiło się kilka drobnych uzupełnień i retuszów, w tym zredefiniowane znaczniki logiczne (zgodnie ze stałą tendencją języka HTML przechodzenia do znaczników semantycznych) uznane już wcześniej za przestarzałe.

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 w specyfikacji HTML 4 i XHTML 1.1, pozostaje też niezmienione w HTML 5. W miejsce pogrubienia zaleca się jednak 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 w specyfikacji HTML 4 i XHTML 1.1, pozostaje też niezmienione w HTML 5. W miejsce pochylenia zaleca się jednak 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 istnieje w specyfikacji HML 4 i XHTML 1.1, natomiast nie jest już wspierane w specyfikacji HTML 5.

Odpowiednik w stylach CSS: font-family: monospace - więcej...

Informacje o TT

Superskrypt (indeks górny)

Kod:

<sup> </sup>

Przykład:

Czcionka z superskryptem

Polecenie istnieje w HTML 4 i XHTML 1.1, pozostaje też niezmienione w HTML 5.

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

Informacje o SUP

Subskrypt (indeks dolny)

Kod:

<sub> </sub>

Przykład:

Czcionka z subskryptem

Polecenie istnieje w HTML 4 i XHTML 1.1, pozostaje też niezmienione w HTML 5.

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 istnieje w HTML 4 i XHTML 1.1, ale nie jest już wspierane w HTML 5.

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 jest obecne w HTML 4 i XHTML 1.1, pozostaje takze niezmienione w HTML 5.

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>

W HTML 4 polecenie definiuje cytat, natomiast w HTML 5 zaleca się używanie go do przywoływania tytułu dzieła.

Przykład:

Pan Tadeusz jest dziełem Adama Mickiewicza.

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ą na ogół <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, np. dezaktualizację jakiejs informacji. Pokazuje ono przekreślony fragment tekstu, np.:

Kod:

<del> </del>

Przykład:

Dokument dotyczący naszej polityki sprzedaży nie jest już dostępny.

W poleceniu możemy zastosować atrybuty, cite przywołujący adres internetowy (URL) z dokumentem wyjaśniającym przyczyny usunięcia oraz datetime informujacy o dacie zmiany (patrz: informacje o znaczniku).

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

W poleceniu możemy zastosować atrybuty, cite przywołujący adres internetowy (URL) z dokumentem wyjaśniającym przyczyny aktualizacji oraz datetime informujący o dacie zmiany (patrz: informacje o znaczniku).

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). Planowano, że 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. Jednak w HTML 5 polecenie acronym nie jest wspierane, natomiast zaleca się używanie w jego miejsce polecenia abbr, co upraszcza ich stosowanie.

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>. Zmienia się też nieco semantyka polecenia - w HTML 4 było to zwykłe wyróżnienie tekstu pogrubieniem, natomiast w HTML 5 zawęża się znaczenie do ważnego tekstu.

Kod:

<strong> </strong>

Przykład:

To jest ważny tekst (strong)

Informacje o STRONG

Czcionka wyróżniona (emfaza)

Polecenie <em> jest zalecane w miejsce stosowanego do tej pory powszechnie polecenia <i>.

Kod:

<em> </em>

Przykład:

To jest czcionka wyróżniona (emphasis)

Informacje o EM

Czcionka podkreślona

Polecenie <u> było przestarzałe w HTML 4, jednak w HTML 5 zostało zredefiniowane i ma wyróżniać tekst nieco odmienny od normalnego, np. źle wymawiane słowa czy nazwy własne w języku chińskim.

Kod:

<u> </u>

Przykład:

To jest akkapit.

Informacje o U

Czcionka przekreślona

Polecenie <u> było przestarzałe w HTML 4, jednak w HTML 5 zostało zredefiniowane i ma wyróżniać tekst, który nie jest już dłużej poprawny.

Kod:

<s> </s>

Przykład:

Niepoprawny tekst.

Informacje o S

Kod (tekst programu)

Kod:

<code> </code>

Przykład:

To jest kod jakiegoś programu

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:

To jest jakiś przykład (sample)

Informacje o SAMP

Zaznaczenie

Polecenie zaznacza podlewem fragment tekstu.

Kod:

<mark> </mark>

Przykład:

Adam Mickiewicz był polskim poetą.

Informacje o MARK

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

gość specjalny Helion.pl
 

HTML5. Rusz głową.

HTML5. Rusz głową!

HTML5. Ćwiczenia praktyczne.

HTML5. Ćwiczenia praktyczne.

HTML5. Nieoficjalny podręcznik.

HTML5. Nieoficjalny podręcznik

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15390737