Uwaga
Opracowanie dotyczy najczęściej stosowanych znaczników
języka HTML w wersji 5.0.

ZNACZNIK

OPIS ZNACZNIKA

<em> </em>

Znacznik służy do zaakcentowania wybranego fragmentu tekstu (emfaza). Najczęściej tekst objęty tym znacznikiem jest przedstawiany jako pochylony (italika – kursywa)

fragment kodu Źródłowego:

(...)

Najczęściej tekst objęty tym znacznikiem jest przedstawiany jako pochylony (<em>italika – kursywa</em>)

(...)

uzyskany efekt:

ZNACZNIK

OPIS ZNACZNIKA

<strong> </strong>

Znacznik służy do mocniejszego wyróżnienia fragmentu tekstu. Najczęściej tekst objęty tym znacznikiem jest przedstawiany jako pogrubiony.

fragment kodu Źródłowego:

(...)

Najczęściej tekst objęty tym znacznikiem jest przedstawiany jako <strong>pogrubiony</strong>.

(...)

uzyskany efekt:

ZNACZNIK

OPIS ZNACZNIKA

<small> </small>

Znacznik służy do przedstawienia fragmentu tekstu czcionką o jeden stopień mniejszą niż pozostały tekst.

fragment kodu Źródłowego:

(...)

<p>

   Normalny tekst. <small>Tekst mniejszy.</small>
   Tekst normalny.

</p>

(...)

uzyskany efekt:

ZNACZNIK

OPIS ZNACZNIKA

<q> </q>

Znacznik służy do przedstawienia cytatu w większym fragmencie tekstu.
Dla wykazania różnicy między znacznikiem <blockquote> a <q> pokazujemy poniższy przykład.

fragment kodu Źródłowego:

(...)

<p>

   Normalny tekst <q>cytacik</q> Tekst normalny.

</p>

<blockquote>

Dłuższy, zacytowany fragment tekstu. Dłuższy, zacytowany fragment tekstu. Dłuższy, zacytowany fragment tekstu. Dłuższy, zacytowany fragment tekstu. Dłuższy, zacytowany fragment tekstu. Dłuższy, zacytowany fragment tekstu.

<blockquote>

(...)

uzyskany efekt:

ZNACZNIK

OPIS ZNACZNIKA

<br>

Znacznik służy do łamania linii tekstu (przejście do następnej linii). Znacznik ten nie ma pary zamykającej.

fragment kodu Źródłowego:

(...)

<p>

Krocz spokojnie wśród zgiełku i pośpiechu - pamiętaj jaki pokój może być w ciszy.<br>Tak dalece jak to możliwe nie wyrzekając się siebie, bądź w dobrych stosunkach z innymi ludźmi.<br>Prawdę swą głoś spokojnie i jasno, słuchaj też tego co mówią inni, nawet głupcy i ignoranci, oni też mają swoją opowieść.<br>Jeśli porównujesz się z innymi możesz stać się próżny lub zgorzkniały, albowiem zawsze będą lepsi i gorsi od ciebie.

</p>

(...)

uzyskany efekt:

ZNACZNIK

OPIS ZNACZNIKA

<code> </code>

Znacznik służy do oznaczania kodu programistycznego na stronie WWW. Tekst będzie wyświetlany czcionką o stałej szerokości.

fragment kodu Źródłowego:

(...)

<code>

oto korona :ile<br>

cs pod<br>

niech "p 500 / (:ile + 1)<br>

niech "a :p / PWK 2)<br>

niech "aa 2 * :a)<br>

niech "d 500 - :p)<br>

niech "n :ile - 1)<br>

ws 150 lw 90 np 250 - (:p / 2) pw 90<br>

ukm "zielony<br>

lw 45<br>

wielokąt[np :a pw 90 np :a pw 135 np :p]<br>

pw 45<br>

ukm "żółty

wielokąt[np 300 pw 135 np :a powtórz :n[lw 90 np :a pw 90 np :a] lw 90 np :a pw 135 np 300 pw 90 np :d]<br>

ukm "czerwony<br>

powtórz :ile[wielokąt[pw 45 np :aa lw 135 np :p lw 135 np :aa pw 135 np :p]<br>

pw 90 np :p lw 90]

pw 45<br>

ukm "zielony<br>

wielokąt[np :a lw 90 np :a lw 135 np :p]<br>

wróć<br>

już<br>

<code>

(...)

uzyskany efekt:

ZNACZNIK

OPIS ZNACZNIKA



Znacznik służy do oznaczania tekstu do wyświetlania w indeksie górnym.

fragment kodu Źródłowego:

(...)

<p>

   <h3>Twierdzenie Pitagorasa</h3>

   c² = a² + b²

<p>

(...)

uzyskany efekt:

ZNACZNIK

OPIS ZNACZNIKA



Znacznik służy do oznaczania tekstu do wyświetlania w indeksie dolnym.

fragment kodu Źródłowego:

(...)

<p>

   <h3>Kwas siarkowy</h3>

   H₂SO₄

<p>

(...)

uzyskany efekt:

ZNACZNIK

OPIS ZNACZNIKA

<i> </i>

Znacznik oznacza tekst, do wyświetlania kursywą.

fragment kodu Źródłowego:

(...)

Podręcznik <i>Lekcje z komputerem</i> do informatyki.

(...)

uzyskany efekt:

ZNACZNIK

OPIS ZNACZNIKA

<span> </span>

Znacznik sam w sobie nie wpływa na formatowanie tekstu, w połączeniu z kaskadowymi arkuszami stylów daje jednak ogromne możliwości w tym zakresie.

fragment kodu Źródłowego:

(...)

Podręcznik <span>Lekcje z komputerem</span> do informatyki.

<br>

Podręcznik <span style="background-color: black; color: yellow; font-family: sans-serif; font-size: larger">Lekcje z komputerem</span> do informatyki. (...)

uzyskany efekt: