Aplikacje internetowe

Formatowanie tekstu w HTML-u

Style znakówDotychczas poznane znaczniki HTML, które dotyczyły akapitów, list i nagłówków, odnosiły się do pewnego fragmentu tekstu traktowanego jako całość, powodowały zmianę atrybutów czcionki, odległości pomiędzy liniami bądź wstawienie dodatkowego znaku (listy wypunktowane).

Style znaków to znaczniki funkcjonujące inaczej — służą do zmiany wyglądu pojedynczych wyrazów czy nawet znaków, będących częściami składowymi innych elementów HTML-a.

Do zmiany wyglądu zbioru znaków, znajdujących się w tekście, służą dwa rodzaje znaczników:

• style logiczne,

• style fizyczne.

Style logiczne

Znaczniki z grupy stylów logicznych określają, w jaki sposób dany fragment tekstu ma zostać w dokumencie wykorzystany, a nie wyświetlony. Są one w zasadzie bardzo podobne do znaczników akapitu czy nagłówków, nie wskazują bowiem konkretnie, w jaki sposób tekst ma zostać sformatowany, ale jaka jest jego rola w dokumencie. Style logiczne to, na przykład, definicje, fragmenty kodu bądź wyróżnione słowa.

Znacznik <em>

Znacznik ten mówi, że tekst powinien być w jakiś sposób wyróżniony, czyli sformatowany inaczej niż reszta dokumentu. W przeglądarkach graficznych zwykle do tego celu wykorzystywana jest kursywa. Oto przykład:

<p>Mrówkojad jest <em>najdziwniej</em> wyglądającym zwierzęciem, nieprawdaż?</p>

Znacznik <strong>

Znaki objęte tym znacznikiem powinny być wyróżnione jeszcze wyraźniej, niż ma to miejsce w wypadku <em>. Większość przeglądarek wykorzystuje do tego celu pogrubienie:

<p>Skręć <strong>w lewo</strong> przy <strong>stacji benzynowej</strong></p>

Znacznik <code>

Tekst objęty taką parą znaczników to fragment kodu (na przykład, programu lub po prostu HTML-a) i powinien być wyświetlony czcionką o stałej szerokości znaku (w graficznych przeglądarkach jest to Courier):

<p><code>#include "trans.h" </code></p>

Znacznik <samp>

Ten znacznik oznacza tekst przykładowy, który jest wyświetlany bardzo podobnie do <CODE>:

<p>URL tej strony, to <samp>http://www.cern.ch/</samp> </p>

Znacznik <kbd>

W tym wypadku chodzi o tekst, który powinien być wpisany przez użytkownika z klawiatury (stąd nazwa znacznika, która jest skrótem od ang. keyboard — klawiatura):

<p>Wprowadź następującą komendę: <kbd>find . –name "prune" -print</kbd></p>

Znacznik <var>

Ten znacznik wskazuje nazwę zmiennej lub innego elementu, który powinien zostać zastąpiony przez jakąś wartość. Z reguły jest wyświetlany kursywą lub podkreślony:

<p><code>chown </code><var>twoje_imie nazwa_pliku</var></p>

Znacznik <dfn>

Znacznik definicji. Jest on wykorzystywany do oznaczania słowa, które będzie lub właśnie zostało zdefiniowane:

<p>Style używane jak wyżej nazywamy <dfn>stylami znaków</dfn>.</p>

Znacznik <cite>

Za pomocą tego znacznika oznacza się krótkie cytaty, na przykład:

<p>Oberżyna jest znana ze swych właściwości do wywoływania ostrych mdłości <cite> (Lemay, 1994)</cite></p>

Znacznik <abbr>

Ten znacznik oznacza skrót słowa; oto przykład jego zastosowania:

<p>Zastosuj standardowe skróty oznaczające nazwy stanów (takie jak <abbr>CA</abbr> oznaczający Kalifornię).</p>

Znacznik <acronym>

Podobny do znacznika <ABBR>, oznacza słowo utworzone z pierwszych liter kilku innych słów, na przykład:

<p>Największym polskim ubezpieczycielem jest <acronym>PZU</acronym> (Powszechny Zakład Ubezpieczeń).</p>

Efekt w przeglądarce internetowej

Style fizyczne

Obok stylów logicznych, opisanych w poprzednim punkcie, funkcjonuje także inna grupa znaczników, które pozwalają na ściśle określoną zmianę wyglądu danego fragmentu tekstu (pogrubienie, kursywa, jednakowa szerokość liter). Znaczniki te noszą nazwę stylów fizycznych.

Znaczniku stylów fizycznych

• <b> Pogrubienie,• <i> Kursywa,• <u> Podkreślenie• <tt> Czcionka maszynowa (znaki o jednakowej

szerokości).• <s> Przekreślenie (zarzucony w wersji 4.0),• <big> Czcionka większa od reszty tekstu,• <small> Czcionka mniejsza od reszty tekstu,• <sub> indeks dolny,• <sup> indeks górny.

Przykład<p>W <i>Piekle</i> Dantego, Złe Doły były ósmym kręgiem, a przebywali tam złośliwcy i oszuści.</p><p>Wszystkie zgłoszenia należy przesłać do <b>26 sierpnia 1996</b>.</p><p>Wpisz <tt>lpr -Pbirch myfile.txt</tt>, by wydrukować ten plik.</p><p>Wpisz nazwisko w zaznaczonym miejscu <u>Podpisz tutaj</u>:</p><p>Ludzie noszący pomarańczowe podkoszulki i zwykłe kalesony <s>nie mają gustu</s> są wyzywający.</p><p>Maty podłogowe dają <big>WIELKIE</big> oszczędności!</p><p>Wtedy, z rogu pokoju dobiegł do niego <small>cichy głos</small>.</p><p>Na dzisiejszej giełdzie wartość akcji Consolidated Orange Trucking wzrosła o ¹/₄ punktu.</p>

Efekt w przeglądarce internetowej