Elementy blokowe

[ aktualizacja: 17.12.2000 ]

Tytu│ pierwszego stopnia

<H1> </H1>

Przyk│ad:

To jest tytu│ pierwszego stopnia

Zwr≤µmy od razu uwagΩ na pewien atrybut, kt≤ry mo┐na wykorzystaµ w po│▒czeniu z tytu│em, akapitem czy niemal dowolnym innym elementem na stronie. Jest to atrybut TITLE, wy╢wietlaj▒cy "dymek" z informacj▒. Na razie interpretuje go Internet Explorer 4 i Netscape 6.

W poleceniu dodajemy TITLE="jaki╢ tam tekst", np.:

<H1 TITLE="Mn≤stwo ciekawych rzeczy do kupienia, koniecznie zobacz nasz katalog">Katalog Produkt≤w</H1>

Przesu± kursor myszki nad tytu│ - zobaczysz ciekawy efekt.

Katalog Produkt≤w

Tytu│ drugiego stopnia

<H2> </H2>

Przyk│ad:

To jest tytu│ drugiego stopnia

Tytu│ trzeciego stopnia

<H3> </H3>

Przyk│ad:

To jest tytu│ trzeciego stopnia

Tytu│ czwartego stopnia

<H4> </H4>

Przyk│ad:

To jest tytu│ czwartego stopnia

Tytu│ pi▒tego stopnia

<H5> </H5>

Przyk│ad:

To jest tytu│ pi▒tego stopnia

Tytu│ sz≤stego stopnia

<H6> </H6>

Przyk│ad:

To jest tytu│ sz≤stego stopnia

Wyr≤wnywanie tytu│≤w

<Hx ALIGN=CENTER> </Hx>

Przyk│ad:

To jest tytu│ na ╢rodku strony

<Hx ALIGN=RIGHT> </Hx>

To jest tytu│ justowany do prawego marginesu

<Hx ALIGN=LEFT> </Hx>

To jest tytu│ justowany do lewego marginesu

Znacznik akapitu

<P> </P>

Przyk│ad:

To jest nieco d│u┐szy akapit, kt≤ry powinien zaj▒µ wiΩcej ni┐ jeden wiersz, aby mo┐na by│o poprawnie zobrazowaµ stosowanie tego znacznika. No, chyba ju┐. Wiersz zosta│ przeniesiony.

To jest nastΩpny akapit, oddzielony od poprzedniego interlini▒. Ka┐dy akapit jest objΩty par▒ znacznik≤w.

Akapit mo┐na wyr≤wnaµ do lewego marginesu (domy╢lne ustawienie)

Tworzenie serwisu internetowego mo┐e byµ fascynuj▒c▒ zabaw▒. Dla jednych jest po prostu przyjemno╢ci▒ sam akt tworzenia. Dla innych najwa┐niejsza jest nagroda, czyli pokazanie strony w Internecie. Dzisiejszy ╢wiat jest ju┐ zupe│nie inny ni┐ jeszcze dziesiΩµ lat temu. Komputer osobisty, Internet i swoboda wyra┐ania opinii, kt≤rych by│o pozbawione poprzednie pokolenie, s▒ szerokim oknem na ╢wiat, kt≤re trzeba jak najlepiej wykorzystaµ. To nie tylko zabawa, to tak┐e wspania│e uczucie wolno╢ci.

... lub do prawego

Tworzenie serwisu internetowego mo┐e byµ fascynuj▒c▒ zabaw▒. Dla jednych jest po prostu przyjemno╢ci▒ sam akt tworzenia. Dla innych najwa┐niejsza jest nagroda, czyli pokazanie strony w Internecie. Dzisiejszy ╢wiat jest ju┐ zupe│nie inny ni┐ jeszcze dziesiΩµ lat temu. Komputer osobisty, Internet i swoboda wyra┐ania opinii, kt≤rych by│o pozbawione poprzednie pokolenie, s▒ szerokim oknem na ╢wiat, kt≤re trzeba jak najlepiej wykorzystaµ. To nie tylko zabawa, to tak┐e wspania│e uczucie wolno╢ci.

Mo┐na go te┐ ╢rodkowaµ

Tworzenie serwisu internetowego mo┐e byµ fascynuj▒c▒ zabaw▒. Dla jednych jest po prostu przyjemno╢ci▒ sam akt tworzenia. Dla innych najwa┐niejsza jest nagroda, czyli pokazanie strony w Internecie. Dzisiejszy ╢wiat jest ju┐ zupe│nie inny ni┐ jeszcze dziesiΩµ lat temu. Komputer osobisty, Internet i swoboda wyra┐ania opinii, kt≤rych by│o pozbawione poprzednie pokolenie, s▒ szerokim oknem na ╢wiat, kt≤re trzeba jak najlepiej wykorzystaµ. To nie tylko zabawa, to tak┐e wspania│e uczucie wolno╢ci.

A tak┐e wyr≤wnywaµ do obu margines≤w

Tworzenie serwisu internetowego mo┐e byµ fascynuj▒c▒ zabaw▒. Dla jednych jest po prostu przyjemno╢ci▒ sam akt tworzenia. Dla innych najwa┐niejsza jest nagroda, czyli pokazanie strony w Internecie. Dzisiejszy ╢wiat jest ju┐ zupe│nie inny ni┐ jeszcze dziesiΩµ lat temu. Komputer osobisty, Internet i swoboda wyra┐ania opinii, kt≤rych by│o pozbawione poprzednie pokolenie, s▒ szerokim oknem na ╢wiat, kt≤re trzeba jak najlepiej wykorzystaµ. To nie tylko zabawa, to tak┐e wspania│e uczucie wolno╢ci.

Znacznik ko±ca wiersza

<BR>

Przyk│ad:

Pierwszy akapit, w kt≤rym zastosowali╢my przenoszenie wiersza. Uwaga, przenosimy...
NastΩpny wiersz tego samego akapitu, wpisywany po znaczniku <BR>, dziΩki kt≤remu zosta│ utworzony.

A teraz nastΩpny akapit, w kt≤rym zastosujemy...
ten sam manewr.
W taki spos≤b mo┐emy skracaµ wiersze akapitu i przenosiµ je ni┐ej, co bardzo siΩ przyda we wsp≤│czesnej poezji
pisanej
czΩsto
w s│upkach (taka moda)

Piµ
albo nie piµ,
oto jest pytanie...
a odpowiedzi
udzieli Ci na nie...
stosowna komisja parlamentarna Sejmu RP

Znacznik ko±ca wiersza mo┐e byµ obecnie opatrywany dodatkowymi parametrami: CLEAR=LEFT, CLEAR=RIGHT i CLEAR=ALL. Parametry te s▒ wykorzystywane przy pozycjonowaniu grafiki i tekstu.

Gdy zastosujemy polecenie <IMG SRC="obrazek" ALIGN=LEFT>, obrazek zostanie ustawiony przy lewym marginesie strony, a znajduj▒cy siΩ za obrazkiem tekst bΩdzie ustawiany na tym samym poziomie.

U┐ycie parametru CLEAR pozwoli nam w odpowiednim momencie "zrzuciµ" tekst, poni┐ej grafiki. Na przyk│ad:

To jest strona ENTER-a

Analogiczne polecenie mo┐na zastosowaµ w przypadku obrazka przesuniΩtego w prawo (align=right), gdzie stosujemy <BR CLEAR=RIGHT>

To jest strona ENTER-a

Gdy na jednym poziomie na stronie znajduj▒ siΩ np. dwa obrazki i bΩdziemy chcieli "zrzuciµ" tekst poni┐ej ich poziomu, mo┐emy u┐yµ CLEAR=ALL.

Ten sam efekt uzyskaliby╢my, w tym konkretnym przypadku, stosuj▒c CLEAR=RIGHT, gdy┐ prawy obrazek jest wiΩkszy. U┐ycie CLEAR=LEFT przesunie tekst poni┐ej lewego obrazka, ale nie poni┐ej prawego. CLEAR=ALL jest o tyle lepsze, ┐e w pewnym momencie mogliby╢my zechcieµ zmieniµ wielko╢µ obu obrazk≤w (lewy wiΩkszy) i trzeba by pamiΩtaµ o zmianie parametru CLEAR.

Parametr CLEAR mo┐na r≤wnie┐ stosowaµ w ustawianiu tabel i tekstu, ale nie przy wykazach.

Pozioma linia

<HR>

Przyk│ad:

Linia mo┐e byµ pozbawiona cieniowania

Linii mo┐emy nadaµ dowoln▒ grubo╢µ

<HR SIZE=5>

Linia mo┐e mieµ okre╢lon▒ d│ugo╢µ w pikselach

<HR WIDTH=300>

lub w procencie szeroko╢ci strony

<HR WIDTH=50%>

Linia mo┐e byµ umieszczona na ╢rodku (domy╢lnie)

<HR ALIGN=center>

<HR ALIGN=center SIZE=8 WIDTH=200>

Mo┐e byµ justowana do lewego brzegu strony...

<HR ALIGN=left>

<HR ALIGN=left NOSHADE SIZE=4 WIDTH=300>

... lub do prawego

<HR ALIGN=right>

<HR ALIGN=right SIZE=3 WIDTH=400>

Jeszcze jednym uzupe│nieniem jest kolor poziomej linii, potocznie zwanej separatorem - jest to rozszerzenie Internet Explorera, nie wchodz▒ce jednak w sk│ad HTML 4. Zaleca siΩ raczej stosowanie styl≤w.

Polecenie:

w prosty spos≤b zmienia barwΩ separatora. Mo┐emy oczywi╢cie manipulowaµ szeroko╢ci▒ i d│ugo╢ci▒ linii.

Blok preformatowany

<PRE> </PRE>

Tekst preformatowany, wy╢wietlany czcionk▒ monotypiczn▒ (o sta│ej szeroko╢ci znaku) 
pozwala     wprowadzaµ    dodatkowe    spacje,

	uwzglΩdnia tak┐e
		punkty tabulacji,
i znaki ko±ca akapitu.
a1	a2	a3	a4
b1	b2	b3	b4

Polecenie PRE jest zalecane zamiast przestarza│ych (nie istniej▒cych ju┐ w specyfikacji jΩzyka) konstrukcji LISTING, PLAINTEXT i XMP.

Blok cytowany

<BLOCKQUOTE> </BLOCKQUOTE>

Bloku cytowanego mo┐emy u┐yµ przy powo│ywaniu siΩ na jakie╢ ╝r≤d│o. Cytat jest wy╢wietlany z uwzglΩdnieniem tabulacji. Na przyk│ad:

Wydaje mi siΩ, ┐e wiersz ko±czy siΩ fragmentem

Soft you now, the fair Ophelia.
Nymph, in thy orisons,
be all my sins remembered.

Ale nie mam pewno╢ci.

Cytat w wierszu

Nowym poleceniem HTML jest kr≤tki cytat w ramach wiersza (in-line quote), wprowadzany za pomoc▒ <Q></Q>.

Polecenie ma automatycznie obejmowaµ cytowany tekst cudzys│owem, przy czym od definicji jΩzyka zale┐y spos≤b wy╢wietlania cudzys│owu. Na przyk│ad, dla jΩzyka angielskiego, zagnie┐d┐one polecenie:

John said, <Q lang="en">I saw Lucy at lunch, she says <Q lang="en">Mary wants you to get some ice cream on your way home.</Q> I think I will get some at Ben and Jerry's, on Gloucester Road.</Q>

powinno daµ w efekcie

John said, "I saw Lucy at lunch, she told me 'Mary wants you to get some ice cream on your way home.' I think I will get some at Ben and Jerry's, on Gloucester Road."

Jak widaµ, "zewnΩtrzne" Q tworzy cudzys│≤w " ", a "wewnΩtrzne" - apostrofy ' '.

Uwaga: w przyk│adzie cudzys│owy zosta│y wprowadzone rΩcznie.

Polecenie to interpretuj▒ Netscape 6 i Opera 5, ale wprowadzaj▒ w obu miejscach cudzys│≤w.

(przyk│ad pochodzi z HTML Reference Library)

Adres

Polecenie jest interpretowane jako kursywa i jest czΩsto stosowane w odniesieniu do bloku tekstu zawieraj▒cego imiΩ i nazwisko, adres pocztowy, adres poczty elektronicznej, np.:

ªrodkowanie

Polecenie s│u┐y do ╢rodkowania na stronie wskazanego elementu, np. tekst lub obrazka.

Komentarz

Polecenie pozwala wstawiaµ do dokumentu komentarz autora. Tre╢µ komentarza nie bΩdzie wy╢wietlana na ekranie, ale stanowi dodatkow▒ informacjΩ dla samego autora lub osoby czytaj▒cej, gdy zajrzy do ╝r≤d│a dokumentu. Na przyk│ad:

Wycinek dokumentu

Polecenie pozwala wydzieliµ wiΩkszy blok w dokumencie, np. fragment tekstu, grafikΩ czy wykaz (nawet kilka r≤┐nych element≤w jednocze╢nie), a nastΩpnie nadaµ mu jaki╢ rodzaj formatowania - ╢rodkowanie lub dosuniΩcie do prawego marginesu. DIV jest czΩsto stosowane przy definiowaniu styl≤w. Przyk│ad u┐ycia <DIV align=right>

Wykaz

• pierwszy punkt wykazu
• drugi punkt wykazu
• trzeci punkt wykazu

jaki╢ tam tekst, jaki╢ tam tekst, jaki╢ tam tekst, jaki╢ tam tekst, jaki╢ tam tekst, jaki╢ tam tekst, jaki╢ tam tekst, jaki╢ tam tekst, jaki╢ tam tekst, jaki╢ tam tekst, jaki╢ tam tekst, jaki╢ tam tekst, jaki╢ tam tekst, jaki╢ tam tekst, jaki╢ tam tekst, jaki╢ tam tekst, jaki╢ tam tekst, jaki╢ tam tekst.

Obramowanie

W specyfikacji HTML 4 pojawi│o siΩ polecenie FIELDSET, kt≤re tworzy obramowanie dla znajduj▒cego siΩ w jego ramach elementu. Interpretuje je na razie Internet Explorer 4, 5 i Netscape 6.

<FIELDSET>jaki╢ tam element</FIELDSET>

Samo obramowanie mo┐na oczywi╢cie uzyskaµ za pomoc▒ styl≤w, wiΩc wprowadzanie nowego polecenia nie by│oby zasadne. Rzeczywisty efekt widzimy dopiero po po│▒czeniu go ze znacznikiem <LEGEND>.

<FIELDSET>
<LEGEND>Wykaz element≤w</LEGEND>
pierwszy element
drugi element
trzeci element
</FIELDSET>

A oto wynik:

Inny przyk│ad, zaczerpniΩty z HTML Reference Library

Blokada i wymuszenie prze│amania

Niekiedy zdarza siΩ, ┐e jaki╢ tekst powinien byµ wy╢wietlany w jednym wierszu. Aby zapobiec prze│amaniu wiersza, mo┐emy obj▒µ tekst poleceniem <NOBR> </NOBR>.

Nale┐y je stosowaµ ostro┐nie, gdy┐ przegl▒darka jest wtedy zmuszona do sztucznego poszerzania okna. Gdyby tekst by│ d│ugi, u┐ytkownik by│by zmuszony do k│opotliwego przewijania okna wszerz, aby przeczytaµ ca│▒ zawarto╢µ wiersza.

ProszΩ zwr≤ciµ uwagΩ na dolny suwak przegl▒darki.

Razem z <NOBR> stosuje siΩ niekiedy wymuszenie prze│amania wiersza, za pomoc▒ <WBR> - Word Break. Wstawienie polecenia spowoduje prze│amanie wiersza, tj. przeniesienie wyrazu za poleceniem i nastΩpuj▒cego po nim tekstu o jeden wiersz. W dalszym ci▒gu jednak ca│o╢µ jest objΩta dzia│aniem <NOBR>.

tego wiersza nie wolno prze│amaµ, tego wiersza nie wolno prze│amaµ,a jednak go prze│amali╢my, ale dalej tego wiersza nie wolno prze│amaµ, tego wiersza nie wolno prze│amaµ

WBR i NOBR s▒ poleceniami przestarza│ymi, nie wchodz▒cymi w sk│ad HTML 4, aczkolwiek obs│uguj▒ je ci▒gle Navigator 4 i Internet Explorer. Netscape 6 i Opera 5 zrezygnowa│y ju┐ z WBR.

Uwaga: usunΩli╢my polecenia SPACER i MULTICOL, gdy┐ Netscape zrezygnowa│ ju┐ z tych rozszerze± - nie wchodzi│y one zreszt▒ w sk│ad HTML 4.