Kurs Języka HTML: Elementy Blokowe

Strona główna Spis poleceń HTML | Wstęp | Etykieta webmastera | HTML dla bardzo początkujących | Struktura dokumentu | Czcionki | Elementy blokowe | Odsyłacze | Wykazy | Grafika i multimedia | Tabele | Style | Ramki | Pływające ramki | Formularze | Znaki specjalne | Kolory | Ankieta Księga gości | Wprowadzenie do JavaScript | Przydatne skrypty | Response-O-Matic | Liczniki wizyt | Kilka słów o narzędziach | Leksykon webmastera | Wprowadzenie do FrontPage Express | Jak publikować w języku Esperanto? | Tworzenie stron z ActiveX | Tworzenie stron z HTML Help Java Applet | Narzędzia ICQ | Zasoby webmasterskie Elementy blokowe Tytuł pierwszego stopnia | Tytuł drugiego stopnia | Tytuł trzeciego stopnia | Tytuł czwartego stopnia | Tytuł piątego stopnia | Tytuł szóstego stopnia | Wyrównywanie tytułów | Znacznik akapitu | Znacznik końca wiersza | Pozioma linia | Blok preformatowany | Blok cytowany | Cytat w wierszu | Adres | Środkowanie | Komentarz | Wycinek dokumentu | Obramowanie | Blokada i wymuszenie przełamania

[ 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)

<P ALIGN=LEFT> </P>

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

<P ALIGN=RIGHT> </P>

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ć

<P ALIGN=CENTER> </P>

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

<P ALIGN=JUSTIFY> </P>

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 poezjipisanejczęstow słupkach (taka moda)

Pićalbo nie pić,oto jest pytanie...a odpowiedziudzieli 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.

<BR CLEAR=abc>

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

ENTER to takie pismo.

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

To jest strona ENTER-a

ENTER to takie pismo.

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

<HR NOSHADE>

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:

<hr color="nazwa_koloru">

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.

(Przykład zaczerpnięty z HTML Reference Library)

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.

I saw Lucy at lunch, she says 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.

(przykład pochodzi z HTML Reference Library)

Adres

<ADDRESS> </ADDRESS>

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.:

Mr. Cosmic Kumquat SSL Trusters Inc. 1234 Squeamish Ossifrage Road Anywhere NY 12345 U.S.A.

Środkowanie

<CENTER> </CENTER>

Polecenie służy do środkowania na stronie wskazanego elementu, np. tekst lub obrazka.

To jest tekst na samym środeczku

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:

<!-- Ten dokument jest w trakcie budowania. Najprawdopodobniej nast�pne zmiany pojawi� si� w przysz�ym miesi�cu -->

Wycinek dokumentu

<DIV> </DIV>

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>

To jest tekst objęty obramowaniem

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:

Wykaz elementów to jest pierwszy element wykazu to jest drugi element wykazu to jest trzeci element wykazu

Inny przykład, zaczerpnięty z HTML Reference Library

Wybierz kolor

Red :	Orange :
Green :	Purple :
Blue :	Aqua :

Blokada i wymuszenie przełamania

<NOBR> </NOBR>

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.

tego wiersza nie wolno przełamać, tego wiersza nie wolno przełamać, tego wiersza nie wolno przełamać, tego wiersza nie wolno przełamać, tego wiersza nie wolno przełamać, tego wiersza nie wolno przełamać, tego wiersza nie wolno przełamać

Proszę zwrócić uwagę na dolny suwak przeglądarki.

<WBR>

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.