Autorem strony jest Aktualizacja Powrót do pomocy programu
Paweł Wimmer
[e-poczta] pawel.wimmer@lupus.waw.pl
[klepsydra] 15-VI-1997 [Pajaczek 2.0] Pajaczek 2.0
[zielona kropka][zielona kropka][zielona kropka]

Formatowanie bloków

Uwaga: Jeśli przykład nie odzwierciedla oznakowania, oznacza to, że przeglądarka nie akceptuje danego znacznika



[hand]Tytuł pierwszego stopnia

<H1> </H1>

Przykład:

To jest tytuł pierwszego stopnia


[hand]Tytuł drugiego stopnia

<H2> </H2>

Przykład:

To jest tytuł drugiego stopnia


[hand]Tytuł trzeciego stopnia

<H3> </H3>

Przykład:

To jest tytuł trzeciego stopnia


[hand]Tytuł czwartego stopnia

<H4> </H4>

Przykład:

To jest tytuł czwartego stopnia


[hand]Tytuł piątego stopnia

<H5> </H5>

Przykład:

To jest tytuł piątego stopnia

[hand]Tytuł szóstego stopnia

<H6> </H6>

Przykład:

To jest tytuł szóstego stopnia

[hand]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


[hand]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>

W ostatnich kilku-kilkunastu miesiącach łącza internetowe zapchały się do granic wytrzymałości, atakowane przez dziesiątki milionów spragnionych kontaktu ze światem użytkowników. Największe powody do narzekań ma niewątpliwie świat nauki, który utracił nagle uprzywilejowaną pozycję, gdy "sklep za żółtymi firankami" zapełnił się nagle tłumami zgłodniałych profanów.

... lub do prawego

<P ALIGN=RIGHT> </P>

W ostatnich kilku-kilkunastu miesiącach łącza internetowe zapchały się do granic wytrzymałości, atakowane przez dziesiątki milionów spragnionych kontaktu ze światem użytkowników. Największe powody do narzekań ma niewątpliwie świat nauki, który utracił nagle uprzywilejowaną pozycję, gdy "sklep za żółtymi firankami" zapełnił się nagle tłumami zgłodniałych profanów.

Można go tego środkować

<P ALIGN=CENTER> </P>

W ostatnich kilku-kilkunastu miesiącach łącza internetowe zapchały się do granic wytrzymałości, atakowane przez dziesiątki milionów spragnionych kontaktu ze światem użytkowników. Największe powody do narzekań ma niewątpliwie świat nauki, który utracił nagle uprzywilejowaną pozycję, gdy "sklep za żółtymi firankami" zapełnił się nagle tłumami zgłodniałych profanów.


[hand]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
Paweł Wimmer

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:

[ENTER]

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>

[ENTER]

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.


[hand]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 "zapomnianym" uprzednio uzupełnieniem jest kolor poziomej linii, potocznie zwanej separatorem - jest to rozszerzenie Internet Explorera, nie wchodzące w skład HTML 3.2.

Polecenie:

<hr color="nazwa_koloru">

w prosty sposób zmienia barwę separatora. Możemy oczywiście manipulować szerokością i długością linii.










[hand]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

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

[hand]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.

[hand]Środkowanie

<CENTER> </CENTER>

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

To jest tekst na samym środeczku


[ENTER]

[hand]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 -->

[hand]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 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.


[ENTER]


[hand]Definicja

<DFN> </DFN>

<DFN>, czyli Defining Instance, jest poleceniem stosowanym do wyróżniania jakiegoś bloku tekstu, np. pojawiającego się po raz pierwszy w danym tekście terminu. Przeglądarka interpretuje zazwyczaj DFN jako kursywę. Na przykład:

Internet Explorer 4 to najnowsza przeglądarka firmy Microsoft.


[hand]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ć, tego wiersza nie wolno przełamać, 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ć, tego wiersza nie wolno przełamać

WBR i NOBR nie wchodzą w skład HTML 3.2.


[hand]Pisanie w szpaltach

Wprowadzonym ostatnio przez Netscape Communications poleceniem (nie uwzględnionym w specyfikacji HTML 3.2) jest <MULTICOL> </MULTICOL>, które pozwala redagować blok tekstu w szpaltach. Jak na razie, polecenie jest interpretowane przez najnowsze wersje przeglądarki Navigator 3. Ten bardzo cenny element pozwoli zrezygnować ze stosowania tabel, których komórki mogły stanowić ramy dla szpalt. Należy jednak oczekiwać, że zostanie on także zaimplementowany w innych przeglądarkach, przede wszystkim w Internet Explorerze.

Jedynym obowiązkowym parametrem polecenia jest liczba szpalt. Wprowadzamy ją za pomocą polecenia:

<MULTICOL cols="x"> </MULTICOL>

Parametr GUTTER, podawany w pikselach, określa odstęp między szpaltami.

Parametr WIDTH, podawany w pikselach lub procencie szerokości okna, określa szerokość, jaką zajmują szpalty.

Przykład (tylko Navigator 3):

Coraz popularniejszy w ostatnim czasie Internet, a w szczególności jego "graficzna" część, znana pod potoczną nazwą World Wide Web (WWW lub W3), przyciąga miliony użytkowników komputerów na całym świecie. W Polsce dostęp do Internetu ma już kilkaset tysięcy osób i liczba ta bardzo szybko rośnie.

W Internecie znajdziemy już kilkaset tysięcy serwerów, zawierających dziesiątki milionów stron. To przeogromne bogactwo informacji, dostępnej za pośrednictwem komputera i przeglądarki WWW, stwarza wręcz kłopot swą obfitością, dając chleb rozmaitym serwisom, które usiłują zaprowadzić elementarny porządek w dostępie do niej.

Znakomita większość użytkowników Internetu jest zainteresowana czytaniem stron WWW, wymianą poczty elektronicznej czy uczestnictwem w grupach dyskusyjnych (Usenet). Coraz więcej jednak osób interesuje się także bardziej aktywnym zaistnieniem w Internecie, chcąc zaprezentować siebie samych, swoje poglądy i swoje dokonania - zawodowe i pozazawodowe. Osoby te, chcąc umieścić w Internecie swoje własne strony WWW, muszą jednak poznać specyficzny język HTML (HyperText Markup Language), dzięki któremu dokument HTML jest czytelny dla innych osób.

Język HTML jest zbiorem specjalnych znaczników (ang. tag), którymi są opatrywane poszczególne części dokumentu, a które z kolei są interpretowane przez przeglądarkę WWW, a także reguł ich stosowania. Znaczników nie jest wiele i można je opanować stosunkowo szybko - sprzyja temu fakt, że już znajomość 20-30 poleceń wystarcza z powodzeniem do konstruowania efektownie wyglądających stron. Dlatego zaczniemy nasz podręcznik od zaprezentowania elementarnego, naszym zdaniem, zbioru. Nabranie wprawy w ich stosowaniu zapewne zachęci wiele osób do sięgnięcia do bardziej zaawansowanych metod budowania stron, stosownie do pojawiających się potrzeb.


[hand]Pusta przestrzeń

<SPACER>

Netscape Communications wprowadziła w najnowszej wersji Navigatora interpretację polecenia <SPACER>, które wstawia pustą przestrzeń w danym miejscu strony (polecenie nie jest częścią HTML 3.2).

Polecenie zawiera kilka parametrów, które precyzują jego działanie:

TYPE=horizontal (vertical, block) określa, czy wolna przestrzeń jest wstawiana poziomo, pionowo czy też w postaci bloku.

SIZE=wartość_w_pikselach (dotyczy wersji poziomej lub pionowej)

WIDTH= wartość_w_pikselach (dotyczy bloku)

HEIGHT=wartość_w_pikselach (dotyczy bloku)

ALIGN=left (center, right) - wyrównanie bloku do lewego marginesu, środkowanie bloku lub dosunięcie bloku do prawego marginesu.

Przykładowo, polecenie <SPACER TYPE="horizontal" SIZE=100> wprowadzi w danym miejscu wiersza 100-punktowy odstęp.

A to jest przykład.

<SPACER TYPE="vertical" SIZE=50> pozwoli np. oddzielić od siebie dwa bloki tekstu o 50 punktów w pionie.

<SPACER TYPE="block" HEIGHT=50 WIDTH=100 ALIGN=LEFT> wprowadzi pusty blok przy lewym marginesie.


Źródła:
  1. Włodzimierz Macewicz "Język składu dokumentu hipertekstowego", Wydawnictwo Mikom, Warszawa 1996
  2. Stephen Le Hunte "HTML Reference Library", plik Helpu dla Windows 3.1 i 95
  3. Ian Graham "HTML Sourcebook. A Complete Guide to HTML 3.0", New York 1996
  4. Hot Dog Professional, plik Helpu
  5. Rafał Wiosna "Każdy chce mieć własną stronę", cykl publikacji w numerach 26/95, 3/96 dwutygodnika PCkurier