HTML # 4

Formatowanie i rozmieszczenie tekstu

Wszystkie przedstawione poni┐ej tagi s▒ wprowadzane pomiΩdzy poleceniami <BODY> i </BODY>.

Akapity

W edytorach tekstowych, aby rozpocz▒µ pisanie w nowym akapicie naciskamy klawisz Enter. W HTML-u takiej mo┐liwo╢ci nie mamy, poniewa┐ wprowadzone w ten spos≤b znaki s▒ ignorowane przez przegl▒darkΩ. Utworzenie nowego akapitu wymaga zastosowania znacznik≤w <P> i </P>:

<P>tekst</P>

Zobaczmy na przyk│adzie, ┐e wprowadzanie akapit≤w klawiszem Enter nie bΩdzie powodowa│o zmian:

<P>

tekst

tekst</P>

<P>tekst</P> <P>tekst</P>

W powy┐szym przyk│adzie, u┐ycie klawisza Enter zosta│o zignorowane. Zgodnie z wprowadzonym kodem, w pierwszej linijce zosta│y wy╢wietlone trzy napisy "tekst", a w drugiej i trzeciej - po jednym:

tekst tekst tekst

tekst

Zastosowanie znacznika <P> powoduje nie tylko stworzenie nowego akapitu, ale r≤wnie┐ wprowadzenie odstΩpu pomiΩdzy nimi. Je╢li nie chcemy tego odstΩpy, nale┐y u┐yµ polecenia <BR>:

znacznik <P>

znacznik <BR>
znacznik <BR>

Dla zachowania przejrzysto╢ci kodu mo┐na oddzielaµ ka┐dy akapit od siebie.

Wyr≤wnanie tekstu

Znacznik <P> ten mo┐e zostaµ opatrzony atrybutem "align" okre╢laj▒cym wyr≤wnanie tekstu ("left" - do lewej; "right" - do prawej; "center" - wy?rodkowanie; "justify" - wyjustowanie). Przegl?darka domy?lnie wyr≤wnuje tekst do lewej strony, wiΩc nie ma potrzeby stosowania, tego atrybutu z warto╢ci▒ "left":

<P align="left">tekst wyr≤wnany do lewej</P>

<P align="center">tekst wy╢rodkowany</P>

<P align="right">tekst wyr≤wnany do prawej</P>

<P align="justify">tekst wyr≤wnany do obu krawΩdzi, czyli tekst wyjustowany; tekst wyr≤wnany do obu krawΩdzi, czyli tekst wyjustowany; tekst wyr≤wnany do obu krawΩdzi, czyli tekst wyjustowany; tekst wyr≤wnany do obu krawΩdzi, czyli tekst wyjustowany; tekst wyr≤wnany do obu krawΩdzi, czyli tekst wyjustowany </P>

Kontrola │amania wierszy

Przegl▒darka wywietlaj▒c tekst, dzieli go automatycznie na kolejnie linie zgodnie z krawΩdzi▒ okna. Jednak niekt≤re s│owa, wyra┐enia czy zwroty, kt≤re ze wzglΩd≤w merytorycznych lub estetycznych powinny znajdowaµ siΩ obok siebie, a nie w s▒siaduj▒cyh liniach. S│u┐y do tego para znacznik≤w <NOBR> i </NOBR>:

<NOBR>tekst znajduje siΩ w jednej linii</NOBR>

Warunkowe │amanie wiersza

Wykorzstuj▒c te znaczniki nale┐y pamiΩtaµ, ┐e bez wzglΩdu na rozmiar czy d│ugoµ tekstu pomiΩdzy nimi pozostanie on w jednym wierszu. Mo┐e to doprowadziµ do sytuacji, w kt≤rej czΩ╢µ tekstu nie bΩdzie siΩ mie╢ci│a w oknie przegl╢darki i pozostanie on niewidoczny, ┐eby go przeczytaµ trzeba bΩdzie u┐yµ poziomego paska przewijania. Aby unikn▒µ tego, dobrze jest dodaµ do wyra┐enia znacznik warunkowego │amania wiersza <WBR>. Wpisujemy go w miejscu, w kt≤rym mo┐e nast▒piµ │amanie linii:

<NOBR>tekst znajduje siΩ w jednej linii,<WBR> ale posiada znacznik warunkowego │amania linii</NOBR>

Niedziel?ce spacje

Poprawnie rozmieszczony tekst powinien byµ pozbawiony pojedynczych liter na ko±cach wierszy, takich jak "a", "i" czy "w". Jest to trudne zadanie ze wzglΩdu na to, i┐ spos≤b wy╢wietlania tekstu zale┐y od zainstalowanej przegl▒darki i ustawionej rozdzielczoci. Jednak jest na to spos≤b. PomiΩdzy sp≤jnik, a wyraz wystΩpuj▒cy bezpo╢rednio po nim nale┐y wstawiµ taki symbol: " "

Nag│≤wki

CzΩsto prezentowany tekst wymaga podzielenia na poszczeg≤│ne sekcje i wyr≤┐nianiu ich nag│≤wkami. Mamy sze╢µ znacznik≤w od <H1> do <H6>:

<H1>Nag│≤wek 1</H1>

<H2>Nag│≤wek 2</H2>

<H3>Nag│≤wek 3</H3>

<H4>Nag│≤wek 4</H4>

<H5>Nag│≤wek 5</H5>

<H6>Nag│≤wek 6</H6>

Mo┐na stosowaµ znaczniki wyr≤wnania, np.:

<H4 align="center">Nag│≤wek 4 wy╢rodkowany</H4>

Linie poziome

Opr≤cz akapit≤w i nag│≤wk≤w w dzieleniu tekstu pomocne s▒ tak┐e linie poziome. Linie poziom▒ wstawia siΩ do dokumentu za pomoc▒ znacznika <HR>

Nie wymaga on zamkniΩcia. Linie domy╢lnie s▒ wy╢rodkowane. Mo┐na dodaµ do niego kilka atrybut≤w: "size" - grubo╢µ linii w pikselach, "width" - szeroko╢µ linii w procentach lub pikselach, "align" - wyr≤wnanie ("left" - do lewej, "right" - do prawej, "center" - wy╢rodkowanie), "color" - kolor linii (warto╢ci s│owne i liczbowe zosta│y przedstawione w poprzednich czΩ╢ciach), "noshade" - wy│▒czenie cienia linii. Atrybut "color" jest rozpoznawany jedynie przez IE, NN go ignoruje. Przyk│ad: linia bez cienia wyr≤wnana do prawej, grubo╢µ 5 pikseli, szeroko╢µ 300 pikseli, kolor zielony:

Zamiast znacznika <HR> mo┐na wstawiaµ do dokumentu grafikΩ. A jak to w nastepnej czΩ╢ci.

Odstepy i wciΩcia

NN rozpoznaje znacznik <SPACER> s│u┐▒cy do definiowanie odstep≤w w pionie i poziomych wciΩµ. Chc▒c oddzieliµ wiersze, wstawiamy co╢ takiego:

tekst

tekst

Poziome wciΩcie uzyskamy stosuj▒c takie atrybuty:

<SPACER type="horizontal" size="15">tekst

Mo┐na r≤wnie┐ stworzyµ pust▒ przestrze±:

<SPACER type="block" width="45" height="50 align="right">tekst

Teraz wyjanienie: warto╢ci podajemy w pikselach; "type" - dla "vertical" - pionowe odstΩpy, "horizontal" - wciΩcia w poziomie i "block" - pusta przestrze± w tek╢cie; "width" - szeroko╢µ w pikselach; "height" - wysoko╢µ w pikselach; "align" - dla "left" tekst po lewej stronie i "right" - po prawej, je╢li chcemy wyr≤wnaµ "niewidzialny" prostok▒t wzglΩdem linii textu wpisujemy: "top" - g≤ra, "middle" - "╢rodek", "bottom" - d≤│Teraz

Rozmiar, kr≤j i kolor tekstu

Teraz co╢ o formatowaniu tekstu:

<FONT face="Times New Roman CE" size="5" color="green">tekst tekst</FONT>

Znacznik <FONT> posiada trzy atrybuty:

I - "size" - wielko╢µ tekstu, wpisujemy liczbΩ ca│kowit▒ z przedzia│u 1-7, nale┐y pamiΩtaµ, ┐e liczba tu wpisana nie odpowiada wielko╢ci tekstu wyra┐onej w punktach. Mo┐na r≤wnie┐ wpisaµ liczbΩ od -6 do +6. Wtedy od bie┐▒cej wielko╢ci tekstu zostanie dodana lub odjΩta wprowadzona warto╢µ, np. je╢li rozmiar tekstu wynosi 5 i wprowadzymy warto╢µ -3, to wielko╢µ tekstu bΩdzie r≤wna 2. A co je╢li rozmiar tekstu r≤wny 1 i wprowadzimy -6? Wtedy zostanie u┐yta najmniejsze (1) lub najwiΩksza (7) dozwolona warto╢µ.

II - "face" - kr≤j czcionki, wystarczy wpisaµ nazwΩ czcionki. Je╢li jednak u┐ytkownik nie bΩdzie mia│ takiej czcionki zainstalowanej w systemie, zostanie u┐yty kr≤j zdefiniowany w przegl▒darce. Warto, wiΩc testowaµ strony z r≤┐nymi fontami. Mo┐na te┐ pisaµ skrypty automatycznie instaluj▒ce czcionki u┐yte na stronie w systemie u┐ytkownika, ale nie o tym mowa.

III - "color" - co tu du┐o m≤wiµ, wprowadzamy warto╢µ s│own▒ lub liczbow▒ (warto╢ci w poprzedniej czΩ╢ci).

Znacznik <FONT> musi zostaµ zamkniΩty (</FONT>), mo┐na zrobiµ tak:

U┐ycie tego znacznika spowoduje podanych parametr≤w do ca│ego tekstu w dokumencie. Najlepiej umie╢ciµ go na pocz▒tku strony, zaraz przed lub po <BODY>.

Wyr≤┐nianie

Tekst mo┐na jeszcze wyr≤┐niaµ stosuj▒c takie tagi (wymagaj▒ zamkniΩcia):

<B>pogrubienie</B>

<U>podkre╢lenie</U>

<I>kursywa</I>

<SUP>^{indeks g≤rny}<SUP>

<SUB>_{indeks dolny}<SUB>

<CITE>cytat<CITE>

adres

<EM>emfaza<EM>

<STRONG>mocne wyr≤┐nienie<STRONG>

<INS>podkre╢lenie<INS>

<DEL>~~przekre╢lenie~~<DEL>

<S>~~przekre╢lenie~~<S>

<STRIKE>~~przekre╢lenie~~<STRIKE>

<CODE>kod - sta│a szeroko╢µ<CODE>

<KBD>sta│a szeroko╢µ<KBD>

<SAMP>sta│a szeroko╢µ<SAMP>

<PRE>

sta│a szeroko╢µ

<PRE>

<TT>sta│a szeroko╢µ<TT>

Niekt≤re napisy mog▒ byµ nieczytelne, ale chcia│em pokazaµ efekt dzia│ania tych znacznik≤w. Uwagi: przy stosowaniu indeks≤w, dla lepszego efektu mo┐na zmniejszyµ rozmiat tekstu o 1-2; znaczniki <DEL>, <S>, <STRIKE> s▒ rzadziej stosowane ze wzglΩdu na estetykΩ; znaczniki <TT>, <SAMP>, <CODE>, <KBD> i <PRE> wy╢wietlaj▒ tekst o sta│ej szeroko╢ci znak≤w (zastosowawnie: np. prezentowanie kod≤w ╝r≤d│owych); znacznik <PRE> ma jeszcze jedn▒ zaletΩ, mianowicie pozwala na umieszczenie na stronie tekstu pobranego z edytora z zachowaniem wszystkich linii podzia│u, czyli wielokrotne spacje, akapity, mo┐na zastosowaµ do prezentowania nieskomplikowanych tabel.

Efekty specjalne

Istniej▒ dwa tagi umo┐liwiaj▒ce uzyskanie prostych animacji na stronie. Jednak nie wchodz▒ one w zakres standardu HTML 4, wiΩc efekty zale┐▒ od u┐ywanej przegl▒darki. Pierwszy <BLINK> jest rozpoznawany jedynie przez SylabΩ Komunikatora. Sprawia, ┐e tekst miga na ekranie, nie posiada ┐adnych atrybut≤w, mo┐na jedynie wykorzystaµ znacznik &#FONT>, np.

<BLINK><FONT size="4" color="red">przyk│adowy tekst</FONT></BLINK>

Drugi to <MARQUEE> interpretowany jedynie przez IE. Przyk│ad:

przyk│adowy tekst

Atrybut "behavior" (zachowanie z ang.) okre╢la spos≤b poruszania siΩ: warto╢µ "scroll" - tekst porusza siΩ od jednej krawΩdzi do drugiej, znika za ni▒ i wyp│ywa zza pierwszej; "slide" - tekst raz przesunie siΩ przez ca│▒ szeroko╢µ ekranu i pozostanie przy krawΩdzi; "alternate" - odbija siΩ od krawΩdzi. "height" (wysoko╢µ) i "width" (szerko╢µ) to fiyczne wymiary drogi poruszj▒cego siΩ tekstu. Kierunek ruchu to parametr "direction" - "left" w lewo, "right" - w prawo, warto╢µ domy╢lna to "left". Dalej: "hspace" i "vspace" - odleg│o╢µ w poziomie i w pionie animacji od pozosta│ych element≤w strony wyra┐ona w pikselach. "scrollamount" i "scrolldelay" - pierwszy wprowadza tekst w ruch skokowy o okre╢lon▒ liczbΩ pikseli, im wiΩksza warto╢µ tym szybszy i mniej p│ynny ruch. Drugi okre╢la w milisekundach odstΩpy pomiΩdzy skokami, 1 sek = 1000 milisekund. Mo┐na dodaµ jeszcze parametr "loop" okre╢laj▒cy liczbΩ powt≤rze± ruchu tekstu (liczba ca│kowita). Znacznik <FONT> i <U> - wiadomo. Zamiast tekstu mo┐na wstawiµ r≤wnie┐ grafikΩ wykorzystuj▒c znacznik <IMG>, ale o tym za miesi▒c.

Listy nieuporz▒dkowane

Czasem zale┐y nam na czytelnej i zwiΩz│ej prezentacji informacji na stronie. HTML oferuje trzy rodzaje list. Pierwszy to listy nieuporz▒dkowane, np:

punkt 1
punkt 2
punkt 3

Kod:

<UL type="square">lista nieuporz▒dkowana
LI> punkt 1</LI>
LI type="circle">punkt 2</LI>
LI> punkt 3 </LI>
</UL>

Wyja╢nienie:

Znacznik <UL> oznacza pocz▒tek listy, a <UL> ko±czy j▒. Atrybut "type" definiuje znaczek znajduj▒cy siΩ przed ka┐d▒ pozycj▒ listy, do wboru mamy: "circle" - pusty okrΩg, "disc" - wype│niony okrΩg (domy╢lna), "square" - kwadrat, "round" - w NN i IE 5.5 jako pusty okrΩg, a w ni┐szych wersjach IE - wype│niony. Aby utworzyµ listΩ potrzeba jeszcze znacznika <LI> (mo┐na, ale nie trzeba u┐ywaµ taga zamkaj▒cego - </LI>). Ka┐dy taki znacznik to kolejna pozycja listy, wewn▒trz tego taga mo┐na stosowaµ r≤wnie┐ atrybut "type" w odniesieniu do aktualnej pozycji. Jednak taki zapis zostanie poprawnie zinterpretowany tylko przez IE, NN uniewa┐ni poprzedni atrybut "type" i do ko±ca listy bΩdzie stosowana warto╢µ z ostatniego wprowadzonego atrybutu. Mo┐na zwiΩkszyµ wciΩcie listy stosuj▒c podw≤jny znacznik <LU>:

punkt 1
punkt 2
punkt 3

Zamiast kropek i kwadrat≤w mo┐emy stosowaµ w│asn▒ grafikΩ. Jednak trzeba zrezygnowaµ z list, poniewa┐ atrybut "type" nie pozwala na wstawianie grafiki zamiast symboli:

lista nieuporz▒dkowana
punkt 1
punkt 2
punkt 3

Kod:

<UL><P>lista nieuporz▒dkowana<BR>
<IMG src="punkt.gif" width="10" height="10" hspace="10">punkt 1<BR>
<IMG src="punkt.gif" width="10" height="10" hspace="10">punkt 2<BR>
<IMG src="punkt.gif" width="10" height="10" hspace="10">punkt 3</P></UL>

Powiem kr≤tko: znacznik <IMG> umo┐liwia wstawianie do dokumentu grafiki, atrybut "src" - ╢cie┐ka dostΩpu do pliku, "width" - szeroko╢µ, "height" - wysoko╢µ, "hspace" - odleg│o╢µ w poziomie od tekstu, wiΩcej o tym za miesi▒c. Znacznik <UL> zosta│ wykorzystany do stworzenia wciΩcia, taki sam efekt daje zastosowanie taga <OL>

Listy uporz▒dkowane

Na pocz▒tek przyk│ad:

pozycja pierwsza
pozycja druga
pozycja trzecia

Struktura listy jest podobna do listy punktowanej, czyli znacznik <OL> otwiera, a </OL> ko±czy listΩ. Znaczniki <LI>, to pozycjΩ listy. Atrybut "type" przyjmuje jednak inne warto╢ci: "I" - du┐e cyfry rzymskie, "i" - ma│e cyfry rzymskie, "A" - du┐e litery, "a" - ma│e litery, "1" - cyfry arabskie (domy╢lna). Warto╢c atrybutu "start" to znak od, kt≤rego ma siΩ zacz▒µ numerowanie. R≤┐nice w interpretowaniu przez IE i NN s▒ takie same.

Teraz definicje:

has│o 1: definicja 1
has│o 2: definicja 2

<DL>
<DT>has│o 1
<DD>definicja 1
<DT>has│o 2
<DD>definicja 2
</DL>

Du┐o wyja╢nie± tu nie potrzeba. Znacznik <DL> otwiera listΩ definicji, <DT> to has│o, a <DD> - definicja. I oczywi╢cie zamykamy listΩ tagiem </DL>.

Oczywi╢cie wraz z powy┐szymi tagami mo┐na stsowaµ znaczniki formatowania tekstu, a przy zagnie┐d┐aniu list pamiΩtaj o kolejno╢ci otwierania i zamykania tag≤w.

Historia

We wstΩpnej wersji HTML istniao piΩµ rodzaj≤w list, ale tylko trzy znalaz│o praktyczne zastosowanie. Ich zadaniem by│o umo┐liwienie dalszego formatowania struktur tekstowych. Dla wy╢wietlenia zawarto╢ci katalog≤w znacznik <IL> zastΩpowano parzystym tagiem <DIR>, a przy tworzeniu spisu z odno╢nikami do konkretnuch fragment≤w tekstu - znacznikiem <MENU>. Ich wykorzystanie powoduje identyczne efekty jak <UL>. Teraz maj▒ znaczenie jedynie historyczne.

Komentarze

Gdy posiadamy skomplikowan▒ stronΩ │awto mo┐na siΩ w niej pogubiµ. Dlatego wymy╢lono komentarze. Istniej▒ dwa rodzaje:

<COMMENT>komentarz</COMMENT>

Tekst umieszczony pomiΩdzy takimi znacznikami nie bΩdzie brany pod uwagΩ prze przgl▒darki.

Kolejna czΩ╢µ o grafice

TiGeR