Wszystko o czcionce

Dodawanie komentarzy

Aby nie zapomnieć co chciało się osiągnąć podczas tworzenia dokumentu, wykorzystując takie, a nie inne znaczniki, stosuje się komentarze opisujące znaczenie znaczników zastosowanych w danym miejscu. Komentarze pomagają zrozumieć tekst źródłowy, natomiast nie są wyświetlane przez przeglądarkę w treści właściwej dokumentu.

Poniżej przedstawiony jest kod źródłowy przykładowego dokumentu - należy zwrócić uwagę na sposób umieszczania w dokumencie komentarzy wewnątrz tekstu źródłowego (tekst pisany kolorem czerwonym nie jest częścią kodu źródłowego).

Znaczniki fizyczne i logiczne czcionki

Znaczniki fizyczne - atrybuty

Znaczniki fizyczne działają w podobny sposób jak atrybuty czcionek w edytorze tekstów.

Kolory czcionki

Dowolnemu fragmentowi tekstu można nadać kolor, obejmując go znacznikami koloru. Poniżej przedstawiamy listę 16 podstawowych barw stosowanych w dokumentach internetowych - są one widoczne w przeglądarkach Netscape Navigator i Microsoft Internet Explorer. Naturalnie możemy w dowolny sposób kombinować barwy z atrybutami i stylami.

Składnia: <FONT COLOR="nazwa_koloru"> </FONT>

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(Tutaj jest kolor silver, ale nie widać go ze względu na kolor tła)

tekst próbny - yellow

tekst próbny - aqua

Wielkość czcionki

Czcionka może mieć wielkość zależną od osoby redagującej dokument HTML. Wystarczy objąć fragment tekstu parą znaczników

 <FONT SIZE="xx"> </FONT>. Na przykład:

To jest tekst normalny

To jest tekst nieco większy.

To jest tekst nieco mniejszy.

I znów tekst normalny.

A teraz całkiem już spory.

I całkiem malutki.

Czcionka normalna ma przypisaną wartość 3 (nie mylić ze stopniem pisma). Pozostałe wartości są zawarte w przedziale od 1 do 7.

Gdy redagujemy tekst, możemy w dowolnej chwili zmienić wielkość czcionki, przypisując jej wartość bezwzględną z przedziału 1-7, posługując się podanym wyżej parametrem. Możemy jednak także użyć innego parametru, który zwiększa lub zmniejsza wielkość czcionki o zadaną wartość.

<FONT SIZE="+x"> </FONT>

Na przykład:

To jest tekst normalny, który teraz powiększamy o 1, a następnie zmniejszamy o 1, po czym powracamy do standardowej wielkości.

Zmiana kroju czcionki

Jeszcze jedną możliwość urozmaicenia dokumentu daje polecenie <FONT FACE="nazwa_kroju"> </FONT>.

Pozwala ono zmienić krój czcionki dla danego dokumentu. Na przykład:

To jest tekst, który zapewne widzisz jako Times. A teraz zmieniamy go na moment na Arial, przechodzimy do kroju courier, aby powrócić do Times.

Możemy nawet podać listę krojów, oddzielonych przecinkami, dzięki czemu w przeglądarce odbiorcy zostanie zastosowany jeden z nich (na dobrą sprawę nie wiemy, jakimi dysponuje, więc należy być ostrożnym). Szczególnie warto polecać w takich sytuacjach stosowanie ciągu w rodzaju <FONT FACE="Arial CE", Arial, Helvetica>, gdyż zabezpieczymy się w ten sposób przed ryzykiem niepoprawnego wyświetlania polskich znaków w Windows 3.1.

Uwaga: polecenie FONT FACE nie jest zalecanym poleceniem HTML i sugeruje się rezygnowanie z niego na rzecz stylów. 


<!--tekst tu zawarty nie jest może wyszukany,
ale szukajmy sensu w zastosowaniu znaczników, a nie w treści komentarza-->

<!-- jest znakiem rozpoczynającym komentarz, a   --> jest znakiem kończącym tenże komentarz

Animacja MARQEE

  • Podstawowa (domyślnie): 

    <marquee>Tu wpisz tekst</marquee>

    Wewnątrz znacznika <marquee>...</marquee> można umieścić nie tylko tekst, ale również inne elementy np grafikę

     

    Określonego typu: 

    <marquee behavior="typ">Tu wpisz tekst</marquee>
    gdzie jako "typ" należy wpisać:
    • "scroll" - tekst przesuwa się od prawej do lewej (domyślnie)
    • "alternate" - tekst przesuwa się od prawej do lewej, a następnie "odbija się" i powraca
    • "slide" - tekst przesunie się od prawej do lewej tylko raz, a później się zatrzyma i pozostanie nieruchomy
     
    O określonym kierunku przesuwania: 
    <marquee direction="kierunek">Tu wpisz tekst</marquee>
    gdzie jako "kierunek" należy wpisać:
    • "left" - tekst będzie przesuwał się w lewo (domyślnie)
    • "right" - tekst będzie przesuwał się w prawo
    • "up" - przesuwanie w górę (nie obsługuje MSIE 3.01 ani Netscape 7)
    • "down" - przesuwanie w dół (nie obsługuje MSIE 3.01 ani Netscape 7)

     

  • O określonym kolorze tła

    <marquee bgcolor="kolor">Tu wpisz tekst</marquee>
    gdzie "kolor" oznacza definicję koloru zobacz kolory
     
    O określonych rozmiarach na ekranie: 
    <marquee width="x" height="y">Tu wpisz tekst</marquee>
    lub 
    <marquee width="x%" height="y%">Tu wpisz tekst</marquee>
    gdzie "x" oznacza szerokość w pikselach, a "y" wysokość (również w pikselach).
    Natomiast "x%" oznacza szerokość w procentach ekranu, a "y" wysokość (również w procentach).
     
    O określonej odległości od tekstu (nie obsługuje Netscape 7): 
    <marquee hspace="x" vspace="y">Tu wpisz tekst</marquee>
    gdzie "x" oznacza poziomą odległość w pikselach, a "y" pionową odległość (również w pikselach).
     
    O określonej ilości powtórzeń: 
    <marquee loop="n">Tu wpisz tekst</marquee>
    gdzie "n" oznacza ilość powtórzeń.

    O określonej szybkości przesuwania się tekstu: 

    <marquee scrollamount="n">Tu wpisz tekst</marquee>
    lub 
    <marquee scrolldelay="ms">Tu wpisz tekst</marquee>
    lub
    gdzie jako "n" należy podać szybkość przesuwania w pikselach.
    Natomiast jako "ms" należy podać szybkość przesuwania w milisekundach (1 milisekunda = 0.001 sekundy, 1000 milisekund = 1 sekunda).

    Atrybut scrollamount="..." określa, o ile pikseli ma "przeskoczyć" tekst podczas jednego kroku animacji, natomiast scrolldelay="..." pozwala ustalić odstęp czasu pomiędzy tymi skokami. Łącząc oba parametry, mamy możliwość pełnej kontroli płynności ruchu (scrollamount) oraz jego szybkości (scrolldelay). Mniejsze wartości scrollamount="...", to mniej szarpany ruch, natomiast niższe scrolldelay="...", to szybsza animacja.

    Czcionka pogrubiona

    <B> </B>

    Przykład:

    To jest czcionka pogrubiona (bold)

    Czcionka pochylona

    <I> </I>

    Przykład:

    To jest czcionka pochylona (italic)

    Czcionka migająca

    <BLINK> </BLINK>

    Przykład:

    To jest czcionka migająca (blink) - jest to rozszerzenie Netscape'a, nie znajdujące się w specyfikacji HTML 4.

    Czcionka podkreślona

    <U> </U>

    Przykład:

    To jest czcionka podkreślona (underline)

    Czcionka o stałej szerokości znaku

    <TT> </TT>

    Przykład:

    To jest czcionka monotypiczna, o stałej szerokości znaku (fixed width = teletype)

    Czcionka przekreślona

    <STRIKE> </STRIKE>

    Przykład:

    Czcionka przekreślona

    Alternatywnie jest używane równoważne polecenie <S></S>:. Oba polecenia istnieją w specyfikacji HTML 4 i są w dalszym ciągu interpretowane przez przeglądarki, ale autorzy specyfikacji zalecają ich stopniowe zastępowanie przez nowsze konstrukcje języka.

    Superskrypt (indeks górny)

    <SUP> </SUP>

    Przykład:

    Czcionka z superskryptem

    Subskrypt (indeks dolny)

    <SUB> </SUB>

    Przykład:

    Czcionka z subskryptem

    Duża czcionka (+1 punkt)

    <BIG> </BIG>

    Przykład:

    Duża czcionka

    Mała czcionka (-1 punkt)

    <SMALL> </SMALL>

    Przykład:

    Mała czcionka

    Znaczniki logiczne - style

    Znaczniki logiczne odnoszą się do konkretnych zastosowań, ale efekt ich działania jest analogiczny jak w przypadku znaczników fizycznych. Czcionka pogrubiona, pochylona lub monotypiczna są domyślnie przypisane do wybranego stylu

    Cytat blokowy

    <CITE> </CITE>

    Przykład:

    To jest cytat (citation)

    Definicja

    <DFN> </DFN>

    <DFN>, czyli Defining Instance, jest poleceniem stosowanym do wyróżniania jakiegoś bloku tekstu, np. pojawiającego się po raz pierwszy w danym tekście terminu. Przeglądarka interpretuje DFN jako kursywę (IE4) lub nie wyróżnia czcionki (NC4). Na przykład:

    Internet Explorer 5 to najnowsza przeglądarka firmy Microsoft.

    Element wstawiony

    Gdy chcemy wyraźnie podkreślić jakąś nowość, możemy się posłużyć poleceniem INS.

    <ins>To jest nowe opracowanie tematu.</ins>

    To jest nowe opracowanie tematu

    Polecenie jest interpretowane przez IE4 i 5.

    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.

    <ABBR lang="pl">Prof.</ABBR>

    <ACRONYM lang="en">WWW</ACRONYM>

    Czcionka mocno wyróżniona

    <STRONG> </STRONG>

    Przykład:

    To jest czcionka mocno wyróżniona (strong)

    Czcionka wyróżniona (emfaza)

    <EM> </EM>

    Przykład:

    To jest czcionka wyróżniona (emphasis)

    Kod (tekst programu)

    <CODE> </CODE>

    Przykład:

    To jest kod (code)

    Czcionka wprowadzana z klawiatury

    <KBD> </KBD>

    Przykład:

    Czcionka z klawiatury

    Przykład

    <SAMP> </SAMP>

    Przykład:

    Przykład (sample)

    Zmienna (słowo kluczowe języka)

    <VAR> </VAR>

    Przykład:

    Zmienna (variable)

    </body>
</html>
    		•



    Niżej możesz poeksperymentować.

    W oknie edytora możesz wprowadzić zmiany w tekście kodu HTML, a po naciśnięciu przycisku "Pokaż HTML" zobaczysz efekt działania zmodyfikowanego kodu.