Zmiana wyglądu czcionek - HTML + CSS - kody i ich użycie
Pisanie cały czas z użyciem identycznie wyglądającej czcionki dałoby dokument w którym czytający miałby problemy z wyróżnieniem poszczególnych jego części, gdyż niemożliwe byłoby zaznaczenie nagłówków tekstu, ważnych fragmentów, cytatów, itp. Aby wyeliminować te niedogodności, wprowadzono możliwość formatowania tekstu. Zestaw poleceń formatujących HTML bazuje na poleceniach formatujących znanych z edytorów tekstu, jednak nie jest aż tak rozbudowany - aby uzyskać możliwości formatowania zbliżone do tych występujących w edytorach tekstu, należy podczas tworzenia strony użyć Kaskadowych Arkuszy Stylów (CSS).Znaczniki formatujące można podzielić na fizyczne - określają one jedynie wygląd tekstu, oraz logiczne - dzięki nim oprócz zmiany wyglądu tekstu możliwe jest określenie jego logicznej funkcji, jak np. adres czy cytat, co może być wykorzystane przez niektóre programy analizujące treść strony. Tekst w nich zawarty jest także odpowiednio formatowany przez przeglądarkę, ale tutaj formatowanie jest sprawą umowną i może być różne w różnych przeglądarkach.
Część z omawianych tutaj znaczników oraz atrybutów jest określonych jako niezalecane, i zamiast nich powinno się stosować odpowiednie komendy kaskadowych arkuszy stylów CSS. Zachęcam do takiego podejścia - strony tworzone tak aby były zgodne ze standardami są łatwiejsze w utrzymaniu i rozbudowie, a co najważniejsze - jest zdecydowanie większa szansa że otwierając swoją stronę w innej przeglądarce będzie ona nadal wyglądać tak samo dobrze, a co za tym idzie - nie będziesz musiał(a) tracić czasu na jej poprawianie aby pod tą inną przeglądarką strona też wyświetlała się poprawnie.
Szybkie wprowadzenie do arkuszy stylów CSS
Ponieważ dalej będę prezentował przykłady użycia stylów CSS do formatowania tekstu, podaję tutaj kilka podstawowych reguł dotyczących stosowania arkuszy styli CSS. Informacje te powinny wystarczyć aby zrozumieć prezentowany dalej materiał. Pełne omówienie arkuszy CSS wymaga jednak osobnego kursu.
Style CSS można umieścić na stronie na kilka sposobów. Jednym z nich jest użycie atrybutu style, i tego sposobu będę używał w tym kursie.
Kaskadowe arkusze stylów CSS definiują szereg właściwości, którym można przypisywać wartości. Przykładami takich właściwości są np. właściwości związane z formatowaniem czcionek, które znajdziesz poniżej.
Wartość właściwości od jej nazwy oddziela się za pomocą dwukropka:
<znacznik style="wlasciwosc: wartosc">
Za pomocą atrybutu style można podać też wartości dla kilku właściwości równocześnie - należy je rozdzielić od siebie średnikami:
<znacznik style="wlasciwosc1: wartosc1; wlasciwosc2: wartosc2">
Niektóre właściwości służą do określenia kilku różnych cech jednocześnie (np. ustawienie podkreślenia i przekreślenia tekstu jednocześnie) - w takim przypadku kilka różnych wartości dla właściwości należy oddzielić od siebie za pomocą spacji:
<znacznik style="wlasciwosc: wartosc1 wartosc2">
Atrybut style można dodać do większości znaczników HTML. Czasami jednak istnieją sytuacje gdy potrzeba np. podkreślić pojedyncze słowo w tekście. W takim przypadku z pomocą przychodzi znacznik <span> - sam z siebie ten znacznik nic nie robi, ale pozwala on przypisać określony styl CSS dla wycinka tekstu który się w nim znajdzie.
Znaczniki formatujące fizyczne
Fizyczne właściwości tekstu to jest to co zazwyczaj mamy na myśli myśląc o formacie tekstu, czyli np. nazwę czcionki, jej wielkość, kolor czy np. pogrubienie. Atrybuty te można ustawić zarówno stosując odpowiednie znaczniki HTML, jak i komendy arkuszy stylów CSS, dlatego też podaję tutaj te obydwie metody. Część z omawianych tutaj znaczników jest oznaczona jako niezalecane, dlatego też stosowanie podanych tutaj poleceń kaskadowych arkuszy stylów CSS zamiast tych znaczników jest jak najbardziej zalecane.
- Tekst pogrubiony - znacznik <b>:
<b>Kurs języka HTML</b>
<span style="font-weight: bold">Kurs języka HTML</span>
Kurs języka HTML
- Tekst pochylony (kursywa) - znacznik <i>:
<i>Kurs języka HTML</i>
<span style="font-style: italic">Kurs języka HTML</span>
Kurs języka HTML
- Tekst podkreślony - znacznik <u>. Znacznik ten nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:
<u>Kurs języka HTML</u>
<span style="text-decoration: underline">Kurs języka HTML</span>
Kurs języka HTML
- Tekst przekreślony - znaczniki <s> i <strike>. Znaczniki te nie są zalecane - zamiast nich powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:
<s>Kurs języka HTML</s>
<strike>Kurs języka HTML</strike>
<span style="text-decoration: line-through">Kurs języka HTML</span>
Kurs języka HTML
- Indeks górny (superskrypt) - znacznik <sup>:
Kurs <sup>języka</sup> HTML
Kurs języka HTML
Za pomocą CSS można też ustawić indeks górny, ale domyślnie rozmiar czcionki pozostanie ten sam - należy go ustawić osobno tak aby uzyskać efekt podobny jak przy znaczniku<sup>.
Kurs <span style="vertical-align: super">języka</span> HTML
Kurs języka HTML
- Indeks dolny (subskrypt) - znacznik <sub>:
Kurs <sub>języka</sub> HTML
Kurs języka HTML
Za pomocą CSS można też ustawić indeks dolny, ale domyślnie rozmiar czcionki pozostanie ten sam - należy go ustawić osobno tak aby uzyskać efekt podobny jak przy znaczniku<sup>.
Kurs <span style="vertical-align: sub">języka</span> HTML
Kurs języka HTML
- Czcionka o stałej szerokości znaku - znacznik <tt>:
<tt>Kurs języka HTML</tt>
<span style="font-family: monospace">Kurs języka HTML</span>
Kurs języka HTML
- Czcionka pomniejszona o jeden punkt - znacznik <small>:
Kurs <small>języka</small> HTML
Kurs <span style="font-size: smaller">języka</span> HTML
Kurs języka HTML
- Czcionka powiększona o jeden punkt - znacznik <big>:
Kurs <big>języka</big> HTML
Kurs <span style="font-size: larger">języka</span> HTML
Kurs języka HTML
- Dostępny jest także znacznik <font>, za pomocą którego możliwe jest ustawienie dodatkowych parametrów czcionki: nazwy używanego kroju czcionki (fontu), jej wielkości oraz koloru. Znacznik ten nie jest jednak zalecany - zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS.
Za pomocą tego znacznika, a dokładniej jego parametrów można ustawić następujące parametry tekstu:
- kolor czcionki - służy do tego parametr
color. Jako jego wartość podaje się nazwę koloru, lub jego kod w systemie szesnastkowym poprzedzony znakiem "#", po którym podaje się kolejno wartości składowych RGB (red-green-blue, czyli czerwony-zielony-niebieski).
<font color="red">Ten tekst ma kolor czerwony,</font> <font color="green">a ten zielony.</font>
<span style="color: red">Ten tekst ma kolor czerwony,</span> <span style="color: green">a ten zielony.</span>
Ten tekst ma kolor czerwony,
a ten zielony.
To samo, tylko tu kody kolorów podane są w systemie szesnastkowym:
<font color="#FF0000">Ten tekst ma kolor czerwony,</font> <font color="#008000">a ten zielony.</font>
<span style="color: #FF0000">Ten tekst ma kolor czerwony,</span> <span style="color: #008000">a ten zielony.</span>
Ten tekst ma kolor czerwony,
a ten zielony.
Przykładową listę kodów kolorów podanych w systemie szesnastkowym znajdziesz w artykule Bezpieczna paleta kolorów.
- krój (nazwę) czcionki - służy do tego parametr
face. Jako jego parametr podaje się nazwę czcionki.
<font face="Arial">To jest czcionka Arial</font>, <font face="Times New Roman">a to Times New Roman</font>
<span style="font-family: Arial">To jest czcionka Arial</span>, <span style="font-family: Times New Roman">a to Times New Roman</span>
To jest czcionka Arial,
a to Times New Roman - wielkość czcionki - służy do tego parametr
size. Jako parametr podaje się wielkość czcionki, którą się chce uzyskać - jest dostępnych siedem predefiniowanych wielkości, ponumerowanych od 1 (najmniejsza) do 7 (największa). Można także podać o ile punktów czcionka ma być większa bądź mniejsza od aktualnie używanej w danym miejscu czcionki, podając jako wartość odpowiednio wyrażania "+n" i "-n".
Czcionka <font size="+1">powiększona o jeden</font>, <font size="5">oraz o rozmiarze 5</font>
Czcionka <span style="font-size: larger">powiększona o jeden</span>, <span style="font-size: smaller">pomniejszona o jeden</span> <span style="font-size: large">oraz o rozmiarze 5</span>
Czcionka powiększona o jeden,
pomniejszona o jeden
oraz o rozmiarze 5
Arkusze stylów CSS pozwalają na znacznie precyzyjniejsze ustawienie wielkości czcionki niż za pomocą znacznika<font>- oprócz predefiniowanych siedmiu wielkości czcionki możliwe jest też podanie jej wielkości w innych jednostkach, np. w punktach (podobnie jak to się robi w edytorach tekstu):
<span style="font-size: 12pt">Kurs języka HTML</span>
Kurs języka HTML
Arkusze stylów CSS również posiadają siedem predefiniowanych wielkości czcionek - ich nazwy toxx-small,x-small,small,medium,large,x-largeixx-large. Ich wielkości są jednak nieco mniejsze niż odpowiadajacych im wielkości ustawianych za pomocą znacznika<font size="X">- wielkośćxx-largejest w przybliżeniu identyczna jak rozmiar czcionki 6 ustawiony za pomocą znacznika<font>. Nie jest to jednak istotną wadą ze względu na znacznie większe możliwości ustawiania wielkości czcionek w CSS niż w czystym HTML.
Możliwe jest oczywiście równoczesne określenie kilku parametrów czcionki:
<font color="red" face="Courier New" size="4"> Czcionka Courier New czerwona o rozmiarze 4</font>
<span style="color: red; font-family: Courier New; font-size: medium"> Czcionka Courier New czerwona o rozmiarze 4</span>
Czcionka Courier New czerwona o rozmiarze 4 - kolor czcionki - służy do tego parametr
- Możliwe jest również ustawienie czcionki jaka ma być używana w całym dokumencie, za pomocą znacznika <basefont>. Znacznik ten również nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenia kaskadowych arkuszy stylów CSS, aby ustawić odpowiednie parametry tekstu na całej stronie (zagadnienie to postaram się opisać w Kursie CSS). Znacznik ten nie wymaga zamykania. Zmiany wprowadzone za jego pomocą obowiązują do końca dokumentu, lub do kolejnego miejsca w którym znajduje się kolejny znacznik
<basefont>. Znacznik ten posiada parametrycolor,faceisize, których znaczenie jest identyczne jak w przypadku znacznika<font>. Jeżeli za pomocą tego znacznika nie ustawi się domyślnej wielkości czcionki, to wynosi ona 3.
Przykład strony zawierającej następujące polecenie:
<basefont color="green" face="Times New Roman" size="4">
możesz zobaczyć klikając tutaj. - Ustawienie koloru czcionki na całej stronie można także wykonać poprzez użycie parametru
textznacznika <body>, którego wartością będzie nazwa koloru lub jego szesnastkowy kod (atrybut ten nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS). Może to wyglądać tak:
<body text="blue">
Przykład strony na której użyty został ten parametr możesz zobaczyć klikając tutaj.
Znaczniki formatujące logiczne
Znaczniki logiczne służą do określenia funkcji jaką pełni dany fragment tekstu w całym dokumencie, np. w ten sposób można zaznaczyć fragmenty które są szczególnie ważne, są przykładowymi danymi wpisywanymi do programu lub wyświetlanymi przez program, lub też zostały dodane bądź usunięte z dokumentu.
Dostępne są także następujące znaczniki definiujące logiczne funkcje tekstu:
- Tekst wyróżniony (emfaza) - znacznik <em>:
<em>Tekst wyróżniony</em>
Tekst wyróżniony - Tekst mocno wyróżniony - znacznik <strong>:
<strong>Tekst mocno wyróżniony</strong>
Tekst mocno wyróżniony - Cytat lub odniesienie do innego tekstu - znacznik <cite>:
<cite>To jest cytat z bliżej nieokreślonego tekstu</cite>
To jest cytat z bliżej nieokreślonego tekstu - Krótki cytat (zwykle wypowiedzi) - znacznik <q>:
Tekst zawarty w tych znacznikach przez przeglądarkę powinien być otoczony cudzysłowami, dodatkowo przy zagnieżdżaniu tych znaczników przeglądarka powinna uwzględniać istniejące w danym języku (patrz dokładny opis znacznika) reguły odnośnie oznaczania zagnieżdżonych cytatów.
Uwaga: W Internet Explorerze 7 i wcześniejszych tekst nie jest otaczany cudzysłowami (chociaż wg dokumentacji znacznik jest interpretowany od wersji 4), w przypadku Netscape i Opery (sprawdzane na wersjach 6 tych przeglądarek) tekst jest zawsze otaczany podwójnymi cudzysłowami niezależnie od poziomu zagnieżdzenia.
Artur powiedział: <q>Agnieszka stwierdziła, że <q>nigdzie nie ma ochoty iść</q></q>
Artur powiedział:Agnieszka stwierdziła, że
nigdzie nie ma ochoty iść
- Definicja - znacznik <dfn>:
<dfn>To jest definicja</dfn>
To jest definicja
- Fragment kodu komputerowego, np. fragment kodu programu - znacznik <code>:
<code>if (warunek) then instrukcja;</code>
if (warunek) then instrukcja; - Przykładowy wynik działania programu, skryptu, itp. - znacznik <samp>:
<samp>Kod zakończenia programu: 0</samp>
Kod zakończenia programu: 0 - Tekst wprowadzony przez użytkownika programu (zwykle z klawiatury) - znacznik <kbd>:
<kbd>Tekst wpisany z klawiatury</kbd>
Tekst wpisany z klawiatury - Oznaczanie zmiennej lub parametru w programie - znacznik <var>:
<var>To_Jest_Zmienna_W_Programie</var>
To_Jest_Zmienna_W_Programie - Skrót, np. Prof., dr - znacznik <abbr>:
<abbr>dr hab.</abbr> Jan Kowalski
dr hab. Jan Kowalski - Akronim, np. radar, WWW - znacznik <acronym>:
<acronym>radar</acronym>
radar - Wstawiony fragment tekstu - znacznik <ins>:
<ins>Ten fragment został wstawiony</ins>
Ten fragment został wstawiony - Usunięty fragment tekstu - znacznik <del>:
<del>Ten fragment został usunięty</del>
Ten fragment został usunięty
Znaczniki można oczywiście zagnieżdżać, aby uzyskać pożądany efekt (ważne jest jedynie, aby zamykać znaczniki w kolejności odwrotnej do tej w której były otwierane):
<b><i>Tekst pogrubiony i pochylony, <u>tu też podkreślony</u></i>, <s>a tu pogrubiony i przekreślony</s></b>'
<b><i>Tekst pogrubiony i pochylony, <span style="text-decoration: underline">tu też podkreślony</span></i>, <span style="text-decoration: line-through">a tu pogrubiony i przekreślony</span></b>
tu też podkreślony,
a tu pogrubiony i przekreślony
Brak komentarzy:
Prześlij komentarz