Wyższa Szkoła Zarządzania i Bankowości w Krakowie

Wielkość: px

Rozpocząć pokaz od strony:

Download "Wyższa Szkoła Zarządzania i Bankowości w Krakowie www.wszib.edu.pl"

Klaudia Mikołajczyk
8 lat temu
Przeglądów:

1 <META HTTP-EQUIV="Creation-Date" CONTENT="Tue, 23 Oct :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= "STYLE- SHEET" 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 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

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

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

Efekt wyświetlania tekstu preformatowanego Zauważyliśmy, że tekst objęty tagami

3 Jeśli chcemy, by nasz tekst znalazł się w nowej linii, używamy tagu. 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:. 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 > Parę odstępów. A tu jest tekst, który nie zostanie złamany pod żadnym pozorem! </BODY> </HTML> '

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

4 Ł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>

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

5 Piszemy coś 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

</CENTER> </BODY> </HTML> Wykorzystanie możliwości znacznika <DIV> Podobne działanie do znacznika <P> ma tag <BLOCKQUOTE> </BLOCKQUOTE>.

6 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ą.

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.

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

Za jego pomocą możemy określić wielkość, kolor oraz krój czcionki. Atrybut SIZE=n określa wielkość czcionki.

Podobne dokumenty

Elementy typografii. Technologia Informacyjna Lekcja 22

Elementy typografii. Technologia Informacyjna Lekcja 22 Elementy typografii Technologia Informacyjna Lekcja 22 Jakie sąs zalety komputerowego tworzenia tekstu? Podstawowe kroje pisma Krój szeryfowy uŝywany jest do składu gazet, ksiąŝ ąŝek, wypracowań,, małe