przykładowy rozdział - Wyższa Szkoła Zarządzania i Bankowości w

Wyższa Szkoła Zarządzania i Bankowości w Krakowie
www.wszib.edu.pl
<META HTTP-EQUIV="Creation-Date" CONTENT="Tue, 23 Oct 2000
22:54:34 GMT"> - w ten sposób wpisujemy informację o dacie utworzenia dokumentu. Tez znacznik jest bardzo rzadko spotykany. W zasadzie jest wykorzystywany tylko przez edytory, które same wklejają ten fragment kodu. Kodowanie
daty i godziny może być inne niż podane powyżej, jednak ten sposób jest najpopularniejszy.
<META HTTP-EQIUV="Refresh" CONTENT="sec; URL=url"> - ta konstrukcja umożliwia wywołanie po określonym czasie, podanym jako parametr sec
określonej strony (określonej atrybutem url). Możemy wywołać dowolną inną stronę,
jak i tę samą, tworząc swoistą pętlę, w której strona co określoną ilość sekund
będzie wywoływała samą siebie.
Kolejną instrukcją jest <LINK>. Tag ten w dalszym ciągu nie znalazł szerokiego zastosowania. Służy on do określania zależności między dokumentami.
Możemy podać dokument następny <LINK REL="NEXT" HREF="nastepny.html">, poprzedni <LINKREL= "PREV" HREF= "poprzedni.html"> oraz tytułowy <LINK REL="1NDEX" HREF= "index.html">. Te funkcje nie są
wykorzystywane. Natomiast wykorzystuje się konstrukcję <LINKREL= "STYLESHEET" HREF= "style.css ">, która służy do powiązania dokumentu z plikiem, w
którym zawarliśmy definicje własnych stylów.
Do zdefiniowanych łącz NEXT, PREV oraz INDEX odnosimy się w kodzie
HTML w następujący sposób <A HREF="NEXT">...</A>.
Dzięki możliwości zdefiniowania ścieżki do pliku zawierającego definicje stylów,
możemy za jego pomocą ujednolicić i uatrakcyjnić naszą stronę, tworząc nowe style
wyświetlania zawartości dokumentu. O stylach porozmawiamy jeszcze w tym
rozdziale.
3.4. Formatowanie tekstu
Jak już zostało powiedziane, HTML jest językiem opisu strony, czyli sposobu,
w jaki na tej stronie ma być wyświetlany tekst. By to zrealizować, twórcy języka
HTML dostarczyli nam wielu instrukcji formatujących.
Instrukcje te będą opisywane swego rodzaju grupami, po każdej z nich zostanie
podany przykład ich wykorzystania.
Na początku dowiemy się, jak wyświetlać akapity. Jeśli wpiszemy w edytorze
długi tekst, to bez względu na to, czy użyjemy kilkukrotnie spacji, klawisza enter
czy tabulacji, ten tekst będzie wyświetlany jako jedna długa linia, łamana wtedy,
gdy napotka margines strony ustawiony w przeglądarce. Dzieje się tak dlatego, że
przeglądarki wszystkie spacje, tabulatory, czy wreszcie przejścia do nowej linii
traktują jako jedną spację, o czym należy pamiętać. By efekt na ekranie był taki
sam jak w edytorze, musimy użyć znacznika <PRE> </PRE>. Znacznik ten informuje interpreter kodu HTML, że teraz nastąpi tekst preformatowany, czyli należy
Wyższa Szkoła Zarządzania i Bankowości w Krakowie
www.wszib.edu.pl
go wyświetlać ze wszystkimi użytymi spacjami, tabulacjami i przejściami do nowej
linii. Oto przykład.
Efekt wyświetlania tekstu preformatowanego
Zauważyliśmy, że tekst objęty tagami <PRE> </PRE> zmienia czcionkę. Standardowo w Windows jest to Courier, jednak wszystko zależy od tego, jak użytkownik ma to zdefiniowane w swoim komputerze.
Wyższa Szkoła Zarządzania i Bankowości w Krakowie
www.wszib.edu.pl
Jeśli chcemy, by nasz tekst znalazł się w nowej linii, używamy tagu <BR>.
Zauważmy, że tag ten nie posiada znacznika zamykającego. Jego działaniem jest
złamanie tekstu i przeniesienie go do nowej linii.
Natomiast jeśli chcemy, by pewien fragment tekstu pod żadnym pozorem nie
został złamany, obejmujemy go tagami <NOBR> </NOBR>. Między tymi znacznikami tekst nie będzie zawijany, nawet jeśli będzie się to wiązało z wyjściem
poza okno przeglądarki (wtedy pojawi się poziomy pasek przewijania). Istnieje
jednak znacznik, który umożliwia w takim bloku złamanie tekstu - <WBR>.
Istnieje też inna możliwość wprowadzenia niezłamanego tekstu. Jest to jeden z
wewnętrznych kodów sterujących HTML (większość najczęściej używanych
znajduje się na końcu książki) i wygląda troszkę niepokojąco: &nbsp;. Powoduje on
wprowadzenie niełamliwej (tzw. twardej) spacji, pamiętajmy, tylko pomiędzy tymi
wyrazami, gdzie ten kod się znajduje. Nie wolno nam zapomnieć ani o znaku
ampersand (&) na początku, jak i średniku na końcu tego kodu.
Oto przykład obrazujący obie możliwości:
<HTML>
<BODY>
< NOBR > Pomiędzy tymi dwoma znacznikami tekst nie zostanie złamany, nawet jeśli doj
dzie do końca okna przeglądarki. Pojawiła się listwa przewijania poziomego, praw
da? <WBR>
A dzięki temu tagowi
Zawinęliśmy tekst. </NOBR >
<BR>
Parę
<BR>
<BR>
odstępów.
<BR>
<BR>
A tu jest tekst, który nie&nbsp; zostanie złamany pod żadnym pozorem!
</BODY>
</HTML>
'
Wyższa Szkoła Zarządzania i Bankowości w Krakowie
www.wszib.edu.pl
Łamać czy nie łamać? -problematyka łamania linii
Tag <P> oznacza tworzenie nowego akapitu. Jest on o tyle interesujący, że
posiada tag zamykający, jednakże nie jest wymagane jego stosowanie. Znacznik
ten powoduje przejście do nowej linii oraz utworzenie linii przerwy między tekstem. Standardowo tekst wyrównywany jest do lewego marginesu. Jeśli chcemy to
zmienić, możemy użyć atrybutu ALIGN=pos. Możemy tekst wyśrodkować (wpisując pod pos wartość CENTER), dosunąć do prawego marginesu (RIGHT) lub
lewego (LEFT). Jeśli chcemy wyśrodkować akapit, piszemy: <P ALIGN =
CENTER>.
Jednakże nie jest to najlepsza metoda. Znacznie lepiej jest użyć tagu <DIV>
</DIV>. Ten znacznik odpowiedzialny jest za położenie tekstu na stronie. Za jego
pomocą każdy element składowy możemy umieścić bądź centralnie, bądź dosunąć do
któregoś marginesu. Jego składnia jest następująca: <DIV ALIGN=LEFT> -ten
przykład dosunie tekst do lewej strony ekranu. Możemy używać jako parametru tych
samych wartości, co w przypadku <P>.
Należy zapamiętać, że to samo działanie co <DIV ALIGN=CENTER> ma para
znaczników <CENTER> </CENTER>, a ich użycie jest znacznie szybsze.
Zobaczmy przykład:
<HTML>
<BODY>
Wyższa Szkoła Zarządzania i Bankowości w Krakowie
www.wszib.edu.pl
Piszemy coś<BR>
Od nowej linii.
<P> A to nowy akapit. </P>
< P > A to kolejny akapit. < |P >
<DIVALIGI\I = CENTER>
Piszemy na środku okna.
</DIV>
<DIVALIGN = RIGHT>
Piszemy po prawej.
</DIV>
<CENTER>
l znowu na środku.
</CENTER>
</BODY>
</HTML>
Wykorzystanie możliwości znacznika <DIV>
Podobne działanie do znacznika <P> ma tag <BLOCKQUOTE> </BLOCKQUOTE>. Za
pomocą tej instrukcji tworzymy rodzaj wciętego akapitu.
Jeśli chcemy odsunąć pierwszą linie, od marginesu i stworzyć wcięcie nowego
akapitu, można użyć znacznika <SPACER> wraz z atrybutem TYPE=HORIZONTAL
Wyższa Szkoła Zarządzania i Bankowości w Krakowie
www.wszib.edu.pl
SIZE=n, gdzie za n podstawiamy odległość wcięcia w pikselach. Możemy użyć także
atrybutu TYPE= YERTICAL SIZE=n, czyli odstęp pionowy w pikselach. Znacznik ten
ma jeszcze kilka atrybutów, jednakże nie są one praktycznie w ogóle
wykorzystywane.
Teraz poznamy znacznik, którego działanie jest troszkę inne. Wyprowadza on
mianowicie poziomą linię. Tag <HR>, bo o nim mowa, może być użyty bez atrybutów (i tak się najczęściej dzieje), jak również z atrybutami. Oto one.
NOSHADE-za pomocą tego parametru wyłączamy standardowy efekt cienia.
ALIGN=pos - działanie i wartości ma takie same, jak poznany wcześniej
<DIV>. Pozwala na ułożenie linii na ekranie.
Atrybut COLOR=color też znamy, tutaj jego działanie jest identyczne.
Za pomocą SIZE=n można stworzyć grubą <HR SIZE=10> lub cieniutką <HR
S1ZE=]> Jjflję.
I wreszcie WIDTH=n odpowiada za długość linii na ekranie. Możemy podstawiać
ją w pikselach <HR WIDTH=200>, jak i w procentowym stosunku do dłu-gości
okna <HR WIDTH=50%>
Zobaczmy przykład.
<HTML>
<BODY>
<BLOCKQUOTE>
To pierwszy akapit.
</BLOCKQUOTE>
Tu jest tekst miĘdzy akapitami.
<BLOCKQUOTE>
A to drugi akapit.
</BLOCKQUOTE>
Zwykła linia
<HR>
A teraz krótsza, na środku i bez cieniowania
< HR ALIGN-CENTER NOSHADE WIDTH = 70% >
A teraz z prawej strony, gruba i na połową ekranu.
<HRALIGN = RIGHTSIZE = 15WIDTH = 50%>
</BODY>
</HTML>
Poniższe znaczniki będą wymagały parzystości (czyli tagu otwierającego i zamykającego).
Znaczniki <Hn> </Hn> umożliwiająbudowanie nagłówków kilku poziomów. Za
n podstawiamy cyfrę od l do 6. Nagłówek <H1> jest nazywany nagłówkiem
najwyższego poziomu. Na stronie zobaczymy tekst wypisany największą czcionką.
Każdy nagłówek niższego stopnia wyświetlany jest mniejszą czcionką.
Wyższa Szkoła Zarządzania i Bankowości w Krakowie
www.wszib.edu.pl
Jak wykorzystać poziome linie
Do zmiany wielkości czcionki może posłużyć parzysty znacznik <FONT>.
Od tej chwili jeśli tag będzie posiadał swój odpowiednik zamykający (na przykład
<P> </P>), będzie on określany jako parzysty.
Znacznik <FONT> posiada kilka atrybutów. Za jego pomocą możemy określić
wielkość, kolor oraz krój czcionki. Atrybut SIZE=n określa wielkość czcionki.
Parametr n może przyjmować wartości od l do 7 lub też -2, —l, +1, +2, +3.
Pierwszy sposób określa kilka ustalonych wartości, zależnych od ustawień przeglądarki. Drugi sposób opisuje różnicę między wielkością bazową a aktualną. Za
pomocą tagu <BASEFONTSIZE=n> możemy ustalić wielkość bazową czcionki,
podstawiając wartości od l do 7.