Nagłówek stopnia 1 Nagłówek stopnia 2


Nagłówki - dostępnych jest sześć różnych nagłówków, różniących się wielkością
czcionki. tworzy się je za pomocą znaczników od <h1> (największy) do <h6>
(najmniejszy).





<h1>Nagłówek
<h2>Nagłówek
<h3>Nagłówek
<h4>Nagłówek
<h5>Nagłówek
<h6>Nagłówek
stopnia
stopnia
stopnia
stopnia
stopnia
stopnia
1</h1>
2</h2>
3</h3>
4</h4>
5</h5>
6</h6>
Nagłówek stopnia 1
Nagłówek stopnia 2
Nagłówek stopnia 3
Nagłówek stopnia 4
Nagłówek stopnia 5
Nagłówek stopnia 6
Nagłówek można także wyrównywać za pomocą parametru align, przypisując mu
wartości left (wyrównanie do lewej), center (wyrównanie do środka), right
(wyrównanie do prawej strony) i justify (tekst wyjustowany). Atrybut ten nie jest
zalecany - zamiast niego powinno się stosować polecenie kaskadowych arkuszy
stylów CSS text-align.
<h2 align="left">Nagłówek wyrównany do lewego marginesu strony</h2>
<h2 align="center">Nagłówek który został wyrównany do środka
strony</h2>
<h2 align="right">Nagłówek wyrównany do prawego marginesu strony</h2>
<h2 align="justify">Nagłówek który został wyjustowany względem obydwu
marginesów</h2>
<h2 style="text-align: left">Nagłówek wyrównany do lewego marginesu
strony</h2>
<h2 style="text-align: center">Nagłówek który został wyrównany do
środka strony</h2>
<h2 style="text-align: right">Nagłówek wyrównany do prawego marginesu
strony</h2>
<h2 style="text-align: justify">Nagłówek który został wyjustowany
względem obydwu marginesów</h2>
Nagłówek wyrównany do lewego marginesu strony
Nagłówek który został wyrównany do środka strony
Nagłówek wyrównany do prawego marginesu strony
Nagłówek który został
obydwu marginesów
wyjustowany
względem
Dla nagłówka (oraz także dla bardzo wielu innych znaczników) można także
przypisać dodatkowy tekst, który zostanie przez przeglądarkę wyświetlony gdy kursor
myszki na dłużej się nad nim zatrzyma (tzw. tooltip - tekst pomocniczy). Służy do
tego parametr title
<h3 title="To jest właśnie opis który może się pokazać jako dodatkowe
wyjaśnienie">Zatrzymaj tu kursor myszki</h3>
Zatrzymaj tu kursor myszki

Paragrafy - definiuje się je za pomocą znacznika <p>. Znacznik ten posiada także
parametry które zostały wymienione powyżej przy opisywaniu znaczników
definiujących nagłówki, czyli align i title. Odnoszą się do nich także te same
uwagi.


<p>Paragraf pierwszy</p>
<p title="Pomocniczy opis">Paragraf drugi, posiada opis pokazujący
się gdy kursor myszki zatrzyma się nad nim</p>
<p align="center">Paragraf trzeci, który jest wycentrowany</p>
<p>Paragraf pierwszy</p>
<p title="Pomocniczy opis">Paragraf drugi, posiada opis pokazujący
się gdy kursor myszki zatrzyma się nad nim</p>
<p style="text-align: center">Paragraf trzeci, który jest
wycentrowany</p>
Paragraf pierwszy
Paragraf drugi, posiada opis pokazujący się gdy kursor myszki zatrzyma się nad nim
Paragraf trzeci, który jest wycentrowany

Wymuszenie przełamania wiersza (przejście do nowej linii) - służy do tego
znacznik <br>. Jak to widać z powyższego przykładu, pomiędzy paragrafami
wstawiana jest dodatkowa pusta linia rozdzielająca. Aby jej uniknąć, należy
zastosować ten znacznik. Pamiętaj jednak że stosowanie tego znacznika do podziału
tekstu na wiersze nie jest jego prawidłowym zastosowaniem - w tym celu należy
stosować pokazany wcześniej znacznik <p> (no chyba że chcesz opublikować na
swojej stronie internetowej wiersz - wtedy jego zastosowanie jest jak najbardziej
uzasadnione).
Znacznik ten jest też jednym ze znaczników które w HTML nie mają znacznika
zamykającego, dlatego pisząc swoją stronę w XHTML musisz pamiętać o jego
zamknięciu (pierwszy przykład w HTML, drugi w XHTML):

<p>Paragraf, który tutaj<br>został przełamany po raz pierwszy,
a tutaj<br>po raz kolejny</p>
<p>Paragraf, który tutaj<br />został przełamany po raz pierwszy,
a tutaj<br />po raz kolejny</p>
Paragraf, który tutaj
został przełamany po raz pierwszy, a tutaj
po raz kolejny

Centrowanie - można wykonać za pomocą znacznika <center>. Znacznik ten nie jest
zalecany - zamiast niego powinno się stosować wymienione już wcześniej polecenie
kaskadowych arkuszy stylów CSS text-align.
<center>Ten tekst jest wycentrowany</center>

Tekst preformatowany - uzyskuje się go za pomocą znacznika <pre>. W obrębie
takiego bloku tekst pisany jest czcionką o stałej szerokości znaku, uwzględniane są
także przy wyświetlaniu wszelkie spacje, tabulatory i znaki nowej linii.






<pre>Tu wstawię cztery
spacje, i Enter na końcu
Tu jest tabulator
A tu dwa tabulatory
Poniżej jest prosta tabelka
1
2
3
11 22 33
1 23
4</pre>
Tu wstawię cztery
spacje, i Enter na końcu
Tu jest tabulator
A tu dwa tabulatory
Poniżej jest prosta tabelka
1
2
3
11 22 33
1 23
4

Cytat - do stworzenia większego bloku zawierającego cytat, służy znacznik
<blockquote>. Tak stworzony cytat jest odsunięty nieco od lewego brzegu dokumentu.
Do rozdzielania kolejnych linii (np. w wierszu) należy stosować znacznik <br>.
<blockquote><div>To jest fragment jakiegoś tekstu który jest tak
długi że się nie zmieści w jednej linii i będzie musiał być
kontynuowany w kolejnej, a tu<br>wstawiony zostanie znacznik
przejścia do nowej linii</div></blockquote>
To jest fragment jakiegoś tekstu który jest tak długi że się nie zmieści w jednej
linii i będzie musiał być kontynuowany w kolejnej, a tu
wstawiony zostanie znacznik przejścia do nowej linii
Uwaga: Używanie tego znacznika wyłącznie do tworzenia wcięć nie jest zalecane.
Zamiast niego wskazane jest ustawienie lewego marginesu za pomocą odpowiedniego
polecenia kaskadowych arkuszy stylów CSS:
<div style="margin-left: 30px">To jest fragment jakiegoś tekstu który
jest tak długi że się nie zmieści w jednej linii i będzie musiał być
kontynuowany w kolejnej, a tu<br>wstawiony zostanie znacznik
przejścia do nowej linii</div>
To jest fragment jakiegoś tekstu który jest tak długi że się nie zmieści w jednej
linii i będzie musiał być kontynuowany w kolejnej, a tu
wstawiony zostanie znacznik przejścia do nowej linii

Adres - do wstawienia bloku zawierającego adres można użyć znacznika <address>
<address>Jan Trawka<br>ul. Błotna 12/34<br>56-789 Bagienko
Mniejsze</address>
Jan Trawka
ul. Błotna 12/34
56-789 Bagienko Mniejsze

Obramowanie - do stworzenia ramki otaczającej np. tekst służy znacznik <fieldset>
<fieldset>Ten napis znajduje się w ramce</fieldset>
Ten napis znajduje się w ramce
To jednak nie wszystko co oferuje ten znacznik - jeżeli wewnątrz niego wstawiony
zostanie znacznik <legend>, to ramka będzie posiadała tytuł. Taką ramkę można użyć
np. do zgrupowania przycisków radiowych w formularzu (jest to opisane w lekcji
poświęconej formularzom).
<fieldset><legend>Tytuł</legend>Tekst w ramce z tytułem</fieldset>
TytułTekst w ramce z tytułem

Pozioma linia - wstawia się ją za pomocą znacznika <hr>
tekst nad linią<hr>tekst pod linią
tekst nad linią
tekst pod linią
Za pomocą parametrów tego znacznika można uzyskać następujące efekty:
o
usunąć "cień", za pomocą parametru noshade. Ten atrybut nie jest zalecany zamiast niego powinno się stosować odpowiednie polecenie kaskadowych
arkuszy stylów CSS:
<hr noshade>
<hr style="border-bottom: solid 1px gray" />
o
zmienić grubość linii za pomocą parametru size. Ten atrybut też nie jest
zalecany - zamiast niego powinno się stosować odpowiednie polecenie
kaskadowych arkuszy stylów CSS:
linia o grubości 10<hr size="10">
linia o grubości 10<hr style="height: 10px">
linia o grubości 10
o
zmienić długości linii - odpowiednią wartość należy podać w pikselach lub w
procentach, jako wartość parametru width. Jest to kolejny atrybut który nie
jest zalecany, zamiast którego się stosować odpowiednie polecenie
kaskadowych arkuszy stylów CSS:
o
linia
linia
linia
linia
o
o
o
o
długości
długości
długości
długości
100 pikseli<hr width="100">
50%<hr width="50%">
100 pikseli<hr style="width: 100px">
50%<hr style="width: 50%">
linia o długości 100 pikseli
linia o długości 50%
o
wyrównać linię do jednego z brzegów lub do środka, za pomocą parametru
align. Dozwolone są wartości: left (wyrównanie do lewej strony), center
(wyrównanie do środka) i right (wyrównanie do prawej strony). Atrybut ten
nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenie
kaskadowych arkuszy stylów CSS:
o
o
o
o
o
linia wyrównana do lewej
<hr width="50%" align="left">
linia wyrównana do środka
<hr width="50%" align="center">
linia wyrównana do prawej
<hr width="50%" align="right">
linia wyrównana do lewej
<hr style="width: 50%; text-align: left; margin-left: 0">
linia wyrównana do środka
<hr style="width: 50%; text-align: center; margin-left: auto;
margin-right: auto">
linia wyrównana do prawej
<hr style="width: 50%; text-align: right; margin-right: 0">
linia wyrównana do lewej
linia wyrównana do środka
linia wyrównana do prawej

Element grupujący blokowy - czyli znacznik <div>. Został wprowadzony przede
wszystkim aby umożliwić łatwe zastosowanie kaskadowego arkusza stylów w
stosunku do określonej grupy znaczników HTML (zostanie to omówione w osobnym
kursie), ale można go także użyć go pozycjonowania elementów poprzez
wykorzystanie parametru align z wartościami left, center i right. Atrybut ten nie
jest zalecany - zamiast niego powinno się stosować odpowiednie polecenie
kaskadowych arkuszy stylów CSS:



<div align="right">
<p>Pierwszy paragraf wyrównany do prawej</p>
<p>Drugi paragraf wyrównany do prawej</p>
</div>
<div style="text-align: right">
<p>Pierwszy paragraf wyrównany do prawej</p>
<p>Drugi paragraf wyrównany do prawej</p>
</div>

Komentarz - w pewnych sytuacjach chcielibyśmy wstawić komentarz do pliku
HTML, aby np. oznaczyć pewne miejsca (jak np. miejsce od którego zaczyna się
menu czy właściwa treść strony), lub też "wyłączyć" pewne fragmenty kodu, które
tymczasowo nie są potrzebne. Służy do tego znacznik <!-- -->, w obrębie którego
wstawia się komentarz.
<!-- to jest komentarz -->