INSTYTUT TECHNIKI Zakad Elektrotechniki i Informatyki mdymek@univ.rzeszow.pl PODSTAWY JZYKA HTML

Transkrypt

1 PODSTAWY JZYKA HTML wiczenie nr 1 I. Struktura HTML-a Polecenie (znacznik, tag) HTML jest specjalnym ci)giem znaków obj-tym nawiasami ostrymi. Wielko01 liter jest oboj-tna - znaczniki wpisane maymi i wielkimi literami s) interpretowane w ten sam sposób. W HTML-u zdefiniowane s) trzy znaczniki, które opisuj) ogóln) struktur- strony oraz dostarczaj) podstawowych informacji nagówkowych. <HTML> Pierwszym znacznikiem struktury, znajduj)cym si- na ka4dej stronie jest <HTML>. Mówi on o tym, 4e zawarto01 odczytywanego wa0nie pliku to kod, napisany w HTML-u. Caa zawarto01 pliku, czyli tre01 i znaczniki powinny znajdowa1 sipomi-dzy pocz)tkowym i ko7cowym znacznikiem <HTML<, tak jak w poni4szym przykadzie. <HTML>... caa strona... </HTML> <HEAD> Para znaczników <HEAD> </HEAD> wyznacza nagówek strony. W obr-bie nagówka znajduje si- kilka innych znaczników. W 4adnym wypadku nie nale4y umieszcza1 w tym miejscu tre0ci strony. Oto typowy przykad poprawnego u4ycia znacznika <HEAD>: 1

2 <HTML> <HEAD> <TITLE> Tytu strony </TITLE> </HEAD> </HTML> <BODY> Pozostaa cz-01 strony, czyli tekst, po)czenia, grafika itp. znajduje sipomi-dzy pocz)tkowym i ko7cowym znacznikiem <BODY>. Cay kod, )cznie ze znacznikami <HTML> i <HEAD> przedstawia si- nast-puj)co: <HTML> <HEAD> <TITLE> Tytu strony </TITLE> </HEAD> <BODY> </BODY> </HTML> Kodowanie polskich znaków w ISO Polskie znaki narodowe, cz-sto nazywane potocznie "ogonkami", sprawiaj) problemy nie tylko autorom stron WWW. Obecnie obowi)zuj)c) norm) jest standard ISO (odpowiada on Polskiej Normie PN-93 T-42118). Ka4da strona WWW powinna mie1 w sekcji HEAD nast-puj)cy element META: <HEAD> <meta http-equiv="content-type" content="text/html; charset=iso "> </HEAD> 2

3 Informuje on przegl)dark-, 4e znaki na stronie WWW zapisane s) w standardzie ISO i dzi-ki temu wida1 poprawnie polski litery. Przegl)darka maj)c tak) deklaracj- sama przestawia si- na zalecany przez autora zestaw znaków. Aby móc korzysta1 z polskich znaków trzeba mie1 polsk) czcionk- lub program KeyPlus, który pozwala pisa1 w standardzie ISO. Bardziej rozbudowane edytory do stron WWW maj) wbudowane mechanizmy do konwersji znaków. II. Tytu/ Ka4da strona, napisana w HTML-u powinna posiada1 tytu. Z tego tytuu korzystaj) pófniej przegl)darki i programy kataloguj)ce strony WWW, umieszczaj)ce je na tworzonych przez siebie listach ulubionych stron. Do nadawania tytuu su4y znacznik <TITLE>. Znacznik <TITLE> znajduje si- zawsze w obr-bie nagówka strony (znaczniki <HEAD>) i jego zadaniem jest skrótowe opisanie jej tre0ci: <HTML> <HEAD> <TITLE> Uniwersytet Rzeszowski </TITLE> </HEAD> <BODY> </BODY> </HTML> Strona mo4e posiada1 tylko jeden tytu, który z kolei mo4e zawiera1 tylko tekst - 4adne inne znaczniki nie s) dozwolone. III. Nag/ówki Nagówki su4) do podziau tekstu na cz-0ci, tak jak ksi)4ka dzielona jest na rozdziay. W HTML-u zdefiniowanych jest sze01 poziomów nagówków. Znacznik nagówka wygl)da nast-puj)co: 3

4 <H1> Nagówek stopnia pierwszego </H1> <H2> Nagówek stopnia drugiego </H2> <H3> Nagówek stopnia trzeciego </H3> <H4> Nagówek stopnia czwartego </H4> <H5> Nagówek stopnia pi9tego </H5> <H6> Nagówek stopnia szóstego </H6> Liczby okre0laj) poziom nagówka (od H1 do H6). Nagówki nie s) numerowane podczas wy0wietlania. Ró4ni) si- mi-dzy sob) wielko0ci) i atrybutami czcionki (pogrubienie, podkre0lenie, wielkie litery). Poni4ej znajduje si- przykad wykorzystania wszystkich stopni nagówków: IV. Akapity Obecnie wersji HTML-a znacznik <P> (<P> </P>) jest podwójny i oznacza odpowiednio pocz)tek i koniec akapitu. Poza tym, znacznik ko7ca akapitu jest opcjonalny. 4

5 <P> Jeden akapit </P> <P> Inny akapit </P> V. Listy Najpowszechniej, oprócz nagówków i akapitów, u4ywanym elementem HTML-a s) listy. W HTML zdefiniowane s) nast-puj)ce typy list: Listy numerowane, oznaczone kolejnymi liczbami. Listy wypunktowane, oznaczone kropkami lub innymi symbolami. Listy definicji, gdzie ka4dy element skada si- z poj-cia oraz definicji, a poj-cie jest w jaki0 sposób wyró4nione. Listy menu. Listy katalogów - listy maych elementów, które mog) by1 porz)dkowane poziomo lub pionowo. Znaczniki list Wszystkie znaczniki list posiadaj) nast-puj)ce, wspólne elementy: Caa lista jest obj-ta przez znaczniki i pocz)tkowe i ko7cowe, odpowiednie dla danego rodzaju listy (na przykad <UL> i </UL>, <MENU> i </MENU>). Ka4dy element listy posiada swój wasny znacznik: <DT> i <DD> dla listy poj-1 oraz <LI> dla pozostaych list. <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <meta http-equiv="content-language" content="pl" /> </head> <body> <P> Listy: </P> <UL> 5

6 <LI> Znaczniki list <LI> Listy numerowane <LI> Listy wypunktowane <LI> Listy definicji </UL> </body> </html> INSTYTUT TECHNIKI Listy numerowane Listy numerowane to listy, w których ka4dy element posiada swój numer. Listy numerowane s) obj-te znacznikami <OL> </OL> (OL oznacza skrót od ang. Order List, lista uporz)dkowana), a ka4dy element listy rozpoczyna si- od znacznika <LI> (ang. List Item, element listy). Listy numerowane posiadaj) kilka atrybutów, za pomoc) których mo4na sterowa1 sposobem wy0wietlania listy przez przegl)dark-. Atrybuty te pozwalaj) mi-dzy innymi na wybór schematu numerowania, który zostanie wykorzystany do nadawania kolejnych numerów, pozwala te4 na okre0lenie liczby, od której numeracja ma si- rozpocz)1 (je4eli nie chce sizacz)1 od 1). 6

7 Atrybuty to specjalne elementy znaczników, które zawieraj) dodatkowe opcje lub informacje o znacznikach. Listy numerowane mo4na dopasowa1 do wasnych potrzeb na dwa sposoby: mo4na okre0li1 schemat numeracji oraz liczb-, od której ma si- ona rozpocz)1. W HTML od wersji 3.2 zosta zdefiniowany atrybut TYPE, który umo4liwia wybór jednego z pi-ciu mo4liwych schematów numerowania: "1": standardowa numeracja za pomoc) liczebników arabskich (1, 2, 3 itd.). "a": numeracja za pomoc) kolejnych, maych liter alfabetu (a, b, c, d itd.). "A": numeracja za pomoc) kolejnych, wielkich liter alfabetu (A, B, C, D itd.). "i": numeracja za pomoc) kolejnych liczb rzymskiego, zapisany maymi literami (i, ii, iii, iv itd.). "I": numeracja za pomoc) kolejnych liczb alfabetu rzymskiego, zapisanych wielkimi literami (I, II, III, IV itd.). <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <meta http-equiv="content-language" content="pl" /> </head> <body> <P> Niektóre podzespoy komputera: </P> <OL TYPE="I" START=3> <LI> Pyta gówna <LI> Procesor <LI> PamiDE RAM <LI> Dysk twardy <LI> Karta graficzna <LI> Karta dgwidkowa <LI> CD-ROM <LI> Obudowa </OL> 7

8 </body> </html> INSTYTUT TECHNIKI Listy wypunktowane W listach wypunktowanych kolejno01 wyst-powania elementów nie ma znaczenia. Z punktu widzenia HTML-a lista wypunktowana wygl)da prawie tak samo jak lista numerowana, z tym, 4e ta pierwsza zawarta jest pomi-dzy znacznikami <UL> </UL>, a nie <OL>. Elementy listy oznaczone s) znacznikiem <LI>, dokadnie tak jak w listach numerowanych. W li0cie wypunktowanej elementy oznaczone s) kropkami lub innymi symbolami. Listy wypunktowane, podobnie jak numerowane, mog) by1 w pewien ograniczony sposób dopasowane do istniej)cych potrzeb. Atrybut TYPE pozwala na zmian- tego symbolu w cz-0ci przegl)darek. Zgodnie ze specyfikacj) HTML 3.2 atrybut TYPE mo4e przyjmowa1 trzy nast-puj)ce warto0ci: "disco": kóko lub kropka, jest to warto01 przyjmowana standardowo, "square": may kwadrat, 8

9 "circle": wi-kszo01 przegl)darek wy0wietla "disco" jako wypenione kóko, ale w tym wypadku powinno pojawi1 sipuste. <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <meta http-equiv="content-language" content="pl" /> </head> <body> <P> Niektóre podzespoy komputera: </P> <UL TYPE="circle" > <LI> Pyta gówna <LI> Procesor </OL> </body> </html> Listy definicji Listy definicji ró4ni) si- nieznacznie od pozostaych. Ka4dy element listy skada si- bowiem z dwóch, a nie jednej cz-0ci: Poj-cie. Definicja. 9

10 Ka4da cz-01 elementu listy definicji posiada swój znacznik: <DT> oznacza poj-cie (skrót od ang. definition term), a <DD> (skrót od ang. definition definition). Obydwa te znaczniki s) pojedyncze i wyst-puj) zazwyczaj parami, chocia4 wi-kszo01 przegl)darek poprawnie wy0wietla z samym poj-ciem, czy te4 sam) definicj). Caa lista definicji obj-ta jest znacznikiem <DL> </DL> (skrót od ang. definition list). VI. Komentarze Istnieje mo4liwo01 wstawienia komentarzy do kodu napisanego w j-zyku HTML. Mog) one su4y1 opisowi elementów strony, mog) równie4 okre0la1 jej status. Skadnia komentarza jest nast-puj)ca:  Nie nale4y u4ywa1 "<", ">", "--". w komentarzach nast-puj)cych znaków: VII. Po/7czenia Odsyacze (hiper)cza, )cza hipertekstowe, odno0niki) s) chyba najbardziej charakterystycznym elementem dokumentów w 0wiatowej sieci World Wide Web. Dzi-ki odsyaczom mo4na wi)za1 ze sob) poszczególne. Odsyacz jest niczym innym, jak wskazaniem jakiego0 innego miejsca. Klikni-cie na takim wskazaniu przenosi u4ytkownika do docelowego miejsca, przy czym mo4e to by1 z powodzeniem miejsce na tej samej stronie, inna strona w ramach tego samego, zo4onego dokumentu, a nawet strona na innym serwerze. Znacznik <A> Do tworzenia hiperpo)cze7 na stronach HTML su4y znacznik <A> </A>. Znacznik ten jest cz-sto nazywany odno0nikiem, bowiem mo4e by1 równie4 u4ywany do tworzenia 10

11 specjalnych miejsc wewn)trz stron, do których prowadz) inne po)czenia. Podobnie jak wi-kszo01 znaczników HTML, tak4e <A> posiada swój znacznik zamykaj)cy </A>. Cay tekst, który znajdzie sipomi-dzy tymi znacznikami zostanie pod0wietlony i on wa0nie b-dzie widoczny na stronie jako hiperpo)czenie, np.: Po/7czenia do okre8lonych miejsc w dokumencie - etykieta Etykieta (zwana te4 kotwic) - ang. anchor) jest znakiem, swoist) elektroniczn) zakadk), podobn) do zakadek w ksi)4ce, która zaznacza jakie0 miejsce w tek0cie. Gdy utworzona zostanie etykiet-, mo4na si- odwoywa1 nie tylko do zawieraj)cej j) strony, ale i do konkretnego miejsca na stronie. W ten sposób czytelnik mo4e natychmiast przenie01 si- do wskazanego punktu. Jej konstrukcja jest nast-puj)ca: <A NAME="nazwa_etykiety"> </A> Internet Explorer pozwala u4y1 wygl)dao np. tak: atrybutu ID, i b-dzie to <A ID= "nazwa_etykiety" > </A> <A NAME="nazwa_etykiety" ID="nazwa_etykiety"> </A> Dobrym zwyczajem jest stosowanie cudzysowu obejmuj)cego etykiety, podobnie jak i adresów w odsyaczach. Gdy etykieta zawiera kilka wyrazów, ich u4ycie jest wr-cz konieczne, aby definicja bya poprawna. Nale4y te4 wraca1 11

12 uwag- na wielko01 liter, gdy4 s) one na ogó rozró4niane. Mo4na zaleca1 u4ywanie maych liter zarówno w etykietach, jak i odsyaczach do nich. Nie mo4na u4ywa1 spacji. Po/7czenia do dokumentów w sieci WWW Do tworzenia po)cze7 ze zdalnymi stronami su4y dokadnie taki sam kod jaki jest do )czenia ze sob) stron lokalnych. Je4eli ma to by1 odsyacz do konkretnego miejsca na stronie to zapis mo4e wygl)da1 w nast-puj)cy sposób: <A HREF=" góry </A> Je0li natomiast tworzony jest odsyacz do etykiety na tej samej stronie, wystarczy u4y1 samej nazwy etykiety, czyli: <A HREF= "#etykieta"> </A> Gdy utworzymy odsyacz, ci)g znaków "tekst, na którym nale4y klikn)1" b-dzie zaznaczony innym kolorem, zazwyczaj niebieskim, i podkre0lony. VIII. Formatowanie tekstu w HTML-u Style logiczne Znaczniki stylów logicznych okre0laj) rol- tekstu w dokumencie, a nie sposób jego formatowania na ekranie. Ka4dy z poni4szych znaczników skada size znacznika pocz)tkowego oraz ko7cowego i ma wpyw na tekst, znajduj)cy sipomi-dzy nimi: <EM> znacznik powoduj)cy wyró4nienie tekstu, czyli sformatowanie inaczej ni4 reszty dokumentu. W przegl)darkach graficznych zwykle jest to kursywa. 12

13 <STRONG> <CODE> <SAMP> <KBD> <VAR> <DFN> <CITE> znaki obj-te tym znacznikiem powinny by1 wyró4nione jeszcze wyrafniej ni4 ma to miejsce w wypadku <EM>. Wi-kszo01 przegl)darek wykorzystuje do tego celu pogrubienie. tekst obj-ty tak) par) znaczników to fragment kodu (np. programu lub po prostu HTML-a) i powinien by1 wy0wietlony czcionk) o staej szeroko0ci znaku. ten znacznik oznacza tekst przykadowy, który jest wy0wietlany bardzo podobnie do <CODE> w tym wypadku chodzi o tekst, który powinien by1 wpisany przez u4ytkownika z klawiatury (st)d nazwa znacznika, która jest skrótem od ang. keybord klawiatura). ten znacznik wskazuje nazw- zmiennej lub innego elementu, który powinien zosta1 zast)piony przez jak)0 warto01. Z reguy jest wy0wietlany kursyw) lub podkre0lony. znacznik definicji. Jest on wykorzystywany do oznaczania sowa, które b-dzie lub wa0nie zostao zdefiniowane. za pomoc) tego znacznika oznacza si- krótkie cytaty. Style fizyczne Podobnie jak znaczniki stylów logicznych, tak i w przypadku stylów fizycznych ka4dy znacznik ma swój pocz)tek i koniec. Poni4ej niektóre z nich: <B> <I> <TT> <U> <S> <BIG> pogrubienie kursywa czcionka maszynowa podkre0lenie przekre0lenie czcionka wi-ksza od reszty tekstu 13

14 <SMALL> <SUB> <SUP> czcionka mniejsza od reszty tekstu indeks dolny indeks górny Tekst preformatowany W wi-kszo0ci przypadków tekst z pliku HTML jest formatowany przez przegl)dark- wy)cznie na podstawie znajduj)cych si- w nim znaczników. Jedynym wyj)tkiem od tej reguy jest znacznik tekstu preformatowanego <PRE>. Ka4da spacja, znajduj)ca sipomi-dzy znacznikami <PRE> i </PRE> zostanie wy0wietlona. Linie poziome Znacznik <HR> nie posiada znacznika zamykaj)cego, ani te4 nie jest w 4aden sposób zwi)zany z tekstem jego zadaniem jest wstawienie na stronie poziomej linii. Znacznik <HR> posiada kilka atrybutów, jak np.: SIZE okre0la grubo01 linii, podawan) w pikselach (standardow) warto0ci) jest 2); WIDTH okre0la dugo01 linii w poziomie, mo4e ona zosta1 podana w pikselach, ale te4 jako okre0lony procent aktualnej szeroko0ci ekranu (np. 30%). >amanie linii Znacznik <BR> powoduje przeamanie linii, co oznacza, 4e tekst nast-puj)cy po nim jest wy0wietlany przez przegl)darkod nowej linii, czyli od lewego marginesu, przy czym jest to margines odpowiedni dla elementu strony, w którym wyst)pi <BR>. 14

15 Adresy INSTYTUT TECHNIKI Para znaczników <ADDRESS> </ADDRESS> su4y do wstawiania do stron WWW czego0 w rodzaju podpisu. Wstawia si- go zwykle na dole strony, a obejmuje takie informacje jak nazwisko twórcy, sposób kontaktu z nim, dat- powstania strony, informacje o prawach autorskich itp. Cytaty Znacznik <BLOCKQUOTE> su4y do oznaczania cytatów (w przeciwie7stwie do <CITE>, który oznacza cytaty krótsze, <BLOCKQUOTE> powinien by1 stosowany tylko do du4szych fragmentów, które nie s) zagnie4d4one w akapitach). Znaki specjalne Kody znaków specjalnych dziel) si- na nazwane i numerowane. Kody nazw rozpoczynaj) si- od znaku &, a ko7cz) si- 0rednikiem (;). Pomi-dzy tymi symbolami znajduje si- nazwa znaku (a dokadnie jej skrócona wersja). &alt; < > > & & " spacja nierozdzielaj)ca Po/oBenie tekstu na stronie Aby uo4y1 w dowolny sposób nagówek lub akapit, mo4na skorzysta1 z atrybutu ALIGN. Posiada on trzy warto0ci: LEFT, RIGHT i CENTERED. Nieco bardziej elastyczn) metod) kontroli poo4enia elementów tekstu jest znacznik <DIV>. Znacznik ten posiada 15

16 równie4 atrybut ALIGN, podobnie jak nagówki i akapity. Jednak4e <DIV> su4y do oznaczenia dowolnego fragmentu kodu HTML (który mo4e zawiera1 równie4 inne znaczniki) - ma on wtedy wpyw na wszystko, co znajdzie sipomi-dzy znacznikiem otwieraj)cym i zamykaj)cym (</DIV>). <DIV ALIGN=LEFT> formatowane akapity </DIV> Czcionki i ich rozmiar Znacznik <FONT> su4y do zachowania kontroli nad fragmentami tekstu, nie obj-tymi stylami znaków. Najpowszechniejszym zastosowaniem znacznika <FONT> jest zmiana rozmiaru czcionki pojedynczego znaku, sowa, zdania, czy te4 innego fragmentu tekstu. Wybrany tekst znajduje sipomi-dzy sowami <FONT> i </FONT>, a atrybut SIZE okre0la 4)dany rozmiar. Atrybut SIZE mo4e przyjmowa1 warto0ci od 1 do 7, gdzie 3 jest warto0ci) standardow). <FONT SIZE=5> tekst </FONT> Migaj7cy <BLINK> Para znaczników <BLINK> </BLINK> powoduje, 4e tekst zawarty pomi-dzy nimi wy0wietlany jest z efektem migania. <NOBR> i <WBR> Para znaczników <NOBR> </NOBR> jest przeciwie7stwem znacznika <BR>. Tekst, znajduj)cy siw obr-bie tych znaczników zawsze b-dzie wy0wietlany w jednej linii. 16

17 IX. Wykorzystanie obrazów, koloru i t/a Obrazy wewnetrzne na stronach WWW: znacznik <IMG> Maj)c przygotowany plik graficzny w formacie GIF lub JPEG, mo4na umie0ci1 go na stronie WWW. Do tego celu su4y znacznik <IMG>. Znacznik ten, podobnie jak <HR> i <BR> nie posiada znacznika zamykaj)cego, ale ma za to du4o atrybutów. Podstawowa konstrukcja ma nast-puj)c) posta1: <img src="plik_graficzny"> IMG jest skrótem od Image (obraz), natomiast SRC jest skrótem od Source (4ródo). Je0li nie stosowane s) 4adne dodatkowe parametry, obrazek jest ustawiany przy lewym brzegu dokumentu i ma wielko01 oryginau. Mo4na jednak u4y1 szeregu parametrów, które zmieni) poo4enie, wielko01 i inne cechy obrazka. Wielko01 obrazka mo4emy regulowa1 za pomoc) parametrów HEIGHT (wysoko01) i WIDTH (szeroko01). Na przykad: <IMG SRC="logour.gif" HEIGHT=180> <IMG SRC="logour.gif" WIDTH=200> <IMG SRC="logour.gif" WIDTH=70 HEIGHT=50> Przy zwi-kszaniu wymiarów w stosunku do warto0ci oryginalnych pami-ta1 nale4y o malej)cej rozdzielczo0ci obrazka na ekranie przegl)darki. Parametr BORDER pozwala wy0wietli1 wokó obrazka ramk- o grubo0ci równej x pikseli: <IMG SRC="logo.gif" WIDTH=120 HEIGHT=160 BORDER=5> Parametry VSPACE (vertical space) i HSPACE (horizontal space) pozwalaj) ustali1 odlego01 obrazka, w pikselach, od oblewaj)cego go tekstu, na przykad: <IMG SRC="ur.gif" HSPACE=50> 17

18 <IMG SRC="ur.gif" VSPACE=50> Obrazy i tekst Aby wstawi1 obrazek obok tekstu, nale4y u4y1 znacznika <IMG> we wa0ciwym miejscu, czyli wewn)trz odpowiedniego znacznika (<H1>, <P>, <ADDRESS> itp.) jak pokazane jest poni4ej: <H1><IMG SRC="plik.gif"> Plik graficzny </H1> Znacznik <IMG> zawiera atrybut ALIGN (TOP MIDDLE BOTTOM), który umo4liwia uo4enie obrazu powy4ej lub poni4ej otaczaj)cego go tekstu lub innych obrazów w tej samej linii. <P> Przykadowy tekst Przykadowy tekst Przykadowy tekst Przykadowy tekst <A HREF="index.htm"> <IMG SRC="rysunek.gif" ALIGN=TOP></A> Przykadowy tekst Przykadowy tekst Przykadowy tekst Przykadowy tekst </P> 18

19 Grafika i po/7czenia INSTYTUT TECHNIKI Aby obraz by jednocze0nie po)czeniem nale4y wstawi1 znacznik <IMG> pomi-dzy otwieraj)cy i zamykaj)cy znacznik <A>. <A HREF="index.htm"> <IMG SRC="index.gif" ALIGN=MIDDLE></A> Obrazy zewnetrzne W przeciwie7stwie do wewn-trznych, obrazy zewn-trzne nie s) bezpo0rednio widoczne na stronach WWW. S) one przechowywane osobno i ze stron WWW prowadzi si- do nich takie same po)czenia, jakie tworzy si- do innych zwykych dokumentów. Przykadem po)czenia do zewn-trznego obrazu jest: <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <meta http-equiv="content-language" content="pl" /> </head> <body> <A HREF="komputer.gif"><IMG SRC="minia_komp.gif"></A> </body> </html> Kolory Barwy mo4na okre0la1 za pomoc) rozszerze7 kolorów HTML na dwa ró4ne sposoby: za pomoc) liczby szesnastkowej za pomoc) predefiniowanej nazwy 19

20 Posta1 liczby, potrzebnej do okre0lenia koloru w HTML-u, to trzy liczby szesnastkowe po)czone razem i poprzedzone znakiem # (hash), np.: # #FFFFFF Aby zmieni1 kolor ta strony WWW, nale4y umie0ci1 jego warto01 (nazw- lub liczbszesnastkow)) obok atrybutu BGCOLOR, w znaczniku <BODY>. Aby do okre0lenia koloru ta strony WWW wykorzysta1 liczbszesnastkow) nale4y poda1 j) w cudzysowie jako warto01 atrybutu BGCOLOR. <BODY BGCOLOR = "#FFFFFF"> <BODY BGCOLOR = "#934CE8"> Natomiast aby wykorzysta1 nazw- koloru, wystarczy wpisa1 j) po BGCOLOR (bez cudzysowie): <BODY BGCOLOR = white> <BODY BGCOLOR = green> Grafika i dgwiek w tle W HTML-u istnieje mo4liwo01 wykorzystywania obrazów jako ta dokumentu WWW w miejsce ta o jednolitym kolorze. Obraz wykorzystywany w taki sposób jest wy0wietlany na zasadzie kafli, co oznacza, 4e ten sam motyw pojawia si- obok siebie tyle razy, ile potrzeba aby wypeni1 okno przegl)darki. Przygotowuj)c plik do takiego ta nale4y zwróci1 uwag-, aby przej0cie od jednej cz-0ci do drugiej po ich po)czeniu byo mo4liwie jak najbardziej pynne. Do umieszczenia rysunku jako ta strony su4y atrybut znacznika <BODY> o nazwie BACKGROUND. Jego warto0ci) jest nazwa pliku lub URL wskazuj)cy obraz, który b-dzie u4ywany jako to: <BODY BACKGROUND = "rys.gif" > 20

21 Polecenie definiuje odtwarzanie dfwi-ku w tle. Nie wchodzi ono w skad HTML 4.01, ale jest do01 ch-tnie stosowane. Przykad: <bgsound src="plik.wav" loop="2" volume="0"> Atrybuty bgsound: src Fródo dfwi-ku loop volume balance liczba odtworze7 dfwi-ku reguluje go0no01 reguluje równowag- mi-dzy go0nikami X. Tabele Tworzenie prostych tabel Definicja tabeli musi by1 umieszczona mi-dzy dwoma znacznikami <TABLE> </TABLE>. W ich ramach s) umieszczane definicje rz-dów, definicje komórek w rz-dach, konkretne dane w komórkach, tytu tabeli i nagówki wierszy i kolumn. Wiersz jest tworzony za pomoc) znacznika otwieraj)cego <TR> i znacznika zamykaj)cego </TR>. Z kolei ka4dy z wierszy ma swoje komórki, które s) definiowane za pomoc) pary znaczników <TH> </TH> (w przypadku komórek nagówka) i pary <TD> </TD> (dla komórek danych). Liczba wierszy nie jest ograniczona, równie4 nie ma ogranicze7 co do liczby komórek w wierszu. <TABLE> <TR> <TH> Nagówek </TH> <TD> Dane </TD> <TD> Dane </TD> </TR> </TABLE> 21

22 Komórka zawiera konkretne dane. Mi-dzy jej znacznikami mo4na umieszcza1 tekst i grafik-. Konkretne komórki s) umieszczane mi-dzy znacznikami wybranego rz-du, na przykad: <TABLE> <TR> <TD> a1 </TD><TD> a2 </TD><TD> a3 </TD></TR> <TR> <TD> b1 </TD><TD> b2 </TD><TD> b3 </TD></TR> <TR> <TD> c1 </TD><TD> c2 </TD><TD> c3 </TD></TR> </TABLE> Przykad: Jak wida1, tabela zawiera 3 rz-dy, w ka4dym po 3 komórki, za0 w konkretnych komórkach zostay umieszczone dane: od a1 do c3. Jest to najprostszy przykad tabeli, która nie zawiera 4adnych obramowa7, barw, nagówków i podpisu. Aby tabela zawieraa naokoo obramowanie, wystarczy rozszerzy1 definicj- o parametr BORDER. Je0li nie podamy szeroko0ci obramowania, przyjmowana jest jej domy0lna warto01. <TABLE BORDER> </TABLE> 22

23 Gdyby zostaa podana szeroko01 obramowania w pikselach, zostanie ona odpowiednio zinterpretowana przez przegl)dark-, na przykad: <TABLE BORDER=10> </TABLE> Aby komórki (nie tabela!) zawieray inne obramowanie ni4 domy0lne, mo4na u4y1 parametru CELLSPACING. <TABLE BORDER CELLSPACING=8> </TABLE> Je0li uznane zostanie, 4e odst-p mi-dzy zawarto0ci) komórki a jej obramowaniem jest zbyt may, mo4na u4y1 parametru CELLPADDING (domy0lnie wynosi on 1). <TABLE BORDER CELLSPACING=5 CELLPADDING=15> </TABLE> Dotychczas tworzone byy tabele, które przybieray domy0ln) szeroko01 na ekranie przegl)darki. Parametr WIDTH daje mo4liwo01 samodzielnego zdefiniowania szeroko0ci tabeli. Podany parametr jest "silniejszy" od innych parametrów, które wpywaj) na szeroko01 tabeli na ekranie. <TABLE BORDER WIDTH=600> </TABLE> 23

24 Zamiast warto0ci absolutnej w pikselach mo4na tak4e u4y1 warto0ci procentowej, np. pó szeroko0ci ekranu przegl)darki. <TABLE BORDER WIDTH=50%> </TABLE> Parametr WIDTH mo4na wykorzysta1 tak4e de zdefiniowania szeroko0ci komórki, umieszczaj)c go w ramach definicji wybranej komórki, np. <TD WIDTH=100> </TD>. Mo4na te4 poda1 warto01 procentow), która odnosi si- do szeroko0ci komórki w ramach tabeli, a nie caego ekranu (akceptuj) j) Navigator i Internet Explorer, ale HTML 4.0 zaleca unikania tego polecenia). Parametr ALIGN mo4na tak4e wykorzysta1 do poziomego wyrównania zawarto0ci komórki - 0rodkowania, justowania do lewej i justowania do prawej. <TD ALIGN=center></TD> <TD ALIGN=left> </TD> <TD ALIGN=right> </TD>. Mo4na tak4e zdefiniowa1 wysoko01 tabeli (polecenie nie wchodzi w skad HTML 4.0), podaj)c parametr HEIGHT, wyra4ony w pikselach lub procencie widocznej strony. W poni4szym przykadzie zostay u4yte parametry <TABLE BORDER WIDTH="50%" HEIGHT="30%"> Parametr VALIGN (vertical) su4y do pionowego wyrównania zawarto0ci komórki - do górnego brzegu, do 0rodka i do dolnego brzegu. U4ywamy wówczas odpowiednio konstrukcji: <TD VALIGN=top> </TD> <TD VALIGN=middle> </TD> <TD VALIGN=bottom> </TD>. Microsoft Internet Explorer i Nescape Communicator pozwalaj) wykorzysta1 kolor ta tabeli. W tym celu nale4y w definicji tabeli doda1 parametr <BGCOLOR=barwa>, np. <TABLE BORDER HEIGHT=200 BGCOLOR=yellow> 24

25 Do podstawowych kolorów nale4): Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver (silver), Yellow, Aqua Podpis pod tabel7 Tabela powinna na ogó zawiera1 tytu, wyja0niaj)cy jej tre01. Nale4y go umie0ci1 zaraz za ogóln) definicj) tabeli. Na przykad: <TABLE BORDER WIDTH=300> <CAPTION ALIGN=top> Tytu tabeli umieszczony u góry </CAPTION> Microsoft Internet Explorer pozwala dodatkowo dosun)1 podpis do lewej lub prawej strony, przy u4yciu parametru VALIGN. Na przykad: <TABLE BORDER WIDTH=300> <CAPTION VALIGN=top ALIGN=left> Tytu u góry </CAPTION> a tak4e <TABLE BORDER WIDTH=300> <CAPTION VALIGN=bottom ALIGN=right> Tytu u góry </CAPTION> Komórki rozpiete na kilku wierszach i kolumnach Aby stworzy1 komórk- rozpi-t) na kilku wierszach i/lub kolumnach, nale4y znacznika <TH> lub <TD> doda1 atrybuty ROWSPAN i/lub COLSPAN oraz przypisa1 im odpowiednie warto0ci, które okre0l) liczb- wierszy i/lub kolumn, na których komórka jest rozpi-ta. Dane umieszczone w takiej komórce wypeni) obszar o dugo0ci i/lub szeroko0ci odpowiadaj)cej rozpi-to0ci. 25

26 <TABLE BORDER> <TR> <TH COLSPAN=2> Nagówek </TH> </TR> <TR> <TD> Dane </TD> <TD> Dane </TD> </TR> </TABLE> XI. Ramki Po/7czenia do ramek Wszystkie wa4niejsze przegl)darki potrafi) interpretowa1 ramki, które stay si- ju4 oficjalnym standardem j-zyka HTML (w wersji 4.0). Ramki uatwiaj) nawigowanie w wielostronicowych dokumentach HTML i dlatego s) ch-tnie stosowane przez wielu webmasterów. Najbardziej typowym przykadem u4ycia ramek jest umieszczenie w jednej spisu tre0ci i przeznaczenie drugiej na wywoywane dokumenty (odr-bne strony HTML), dowi)zane do poszczególnych pozycji spisu. Podstawow) rol- w dokumencie skadaj)cym si- z ramek peni specjalna strona, na której definiuje si- liczb-, wielko01 i pozycj- ramek oraz zachowanie si- innych dokumentów w momencie uaktywnienia )cza hipertekstowego. Pozostae 26

27 strony, wchodz)ce w skad caego, wielostronicowego dokumentu, s) stronami podrz-dnymi. Nale4y zwróci1 uwag-, 4e na podstawowej stronie nie powinno by1 4adnych znaczników poza blokiem nagówkowym i definicj) samych ramek. Dopiero znaczniki NOFRAMES pozwalaj) umie0ci1 tre01, która b-dzie wy0wietlana przez przegl)darki nie interpretuj)ce ramek. Znaczniki <BODY></BODY> mog) by1 umieszczane jedynie w obr-bie NOFRAMES, aczkolwiek ich obecno01 nie jest konieczna. Poni4szy przykad obrazuje znaczniki wprowadzone na fikcyjnej stronie prezentuj)cej list- niektórych instytutów UR. <HTML> <HEAD> <TITLE> Instytuty UR</TITLE> </HEAD> <FRAMESET COLS="25%,*%"> <FRAME SCROLLING="auto" NAME = "lista instytutów" SRC="lista_inst.htm"> <FRAME SCROLLING="yes" NAME = "instytuty" SRC="instytut.htm"> <NOFRAMES> <BODY> ZawartoTE strony dla przegl9darek nie obsuguj9cych ramek </BODY> </NOFRAMES> </FRAMESET> </HTML> 27

28 Kluczowe znaczenie ma para znaczników <FRAMESET> </FRAMESET>. Stanowi) one, z dodatkowymi parametrami, ramy dla caej konstrukcji i mi-dzy nimi s) umieszczane bardziej szczegóowe znaczniki, dotycz)ce liczby ramek, podziau strony i wielko0ci ramek. Para znaczników <NOFRAMES> </NOFRAMES> su4) do wprowadzenia elementów strony, które b-d) widoczne dla posiadacza przegl)darki, która nie akceptuje ramek. Je0li natomiast czytelnik strony u4ywa Navigatora lub Internet Explorera, wszelkie informacje mi-dzy tymi znacznikami zostan) zignorowane. W ten sposób autor strony mo4e utworzy1 dokument uniwersalny, uniezale4niony od konkretnej przegl)darki. Znacznik <FRAME> su4y do wprowadzenia konkretnej ramki. Znacznik jest uzupeniany dodatkowymi parametrami, mówi)cymi o zawarto0ci (zagnie4d4one strony), o tym, czy ramka zawiera suwaki, a tak4e definiuj)cymi nazw- ramki. Parametry FRAMESET Aby konstrukcja moga dziaa1, konieczne jest podzielenie strony - pionowe lub poziome. Poni4szy kod zawiera informacjo podzieleniu strony na dwie kolumny. Su4y do tego parametr COLS="x,y", umieszczany w otwieraj)cym znaczniku FRAMESET. Liczby x i y su4) do liczbowego okre0lenia szeroko0ci ramek. Mo4na poda1 obie warto0ci w pikselach, w procentach szeroko0ci strony, a tak4e okre0li1 szeroko01 jednej kolumny i oznaczy1 szeroko01 drugiej za pomoc) wieloznacznika * (ma to sens przy podziale na wi-ksz) liczbkolumn lub wierszy). Mo4na zastosowa1 parametr BORDER=x, który okre0la w pikselach szeroko01 obramowania rozdzielaj)cego ramki. Parametr BORDERCOLOR=kolor pozwala okre0li1 kolor obramowania rozdzielaj)cego ramki. Parametr FRAMEBORDER=[yes no] lub [1 0] (zalecana jest "liczbowa" posta1) pozwala wy0wietla1 lub chowa1 obramowanie rozdzielaj)ce ramki (domy0lnie jest ono wy0wietlane). Parametr jest akceptowany przez Navigatora 4.04 i Internet Explorera

29 Uwaga: aby usun)1 obramowania w Internet Explorerze, we FRAMESET oprócz FRAMEBORDER=0 nale4y jeszcze u4y1 parametru FRAMESPACING=0. Mo4na tak4e doda1 BORDER=0, co usunie obramowania z Navigatora, np.: <frameset cols="20%,*"framespacing="0" frameborder="0" border="0"> Parametry FRAME Oprócz podziau na ramki nale4y im jeszcze przypisa1 jakie0 dokumenty, zazwyczaj w formacie HTML. Aby przypisa1 ramce dokument, nale4y poda1 Fródo dokumentu. Nale4y w tym celu u4y1 konstrukcji: <FRAME SRC="nazwa_pliku.htm"> Przywoywany plik mo4e si- znajdowa1 w tym samym katalogu lub jakimkolwiek innym - podaje si- wtedy nazw- pliku z pen) 0cie4k) dost-pu. Atrybut Warto8I Opis SCROLLING SCROLLING SCROLLING NORESIZE AUTO NO YES Domy0lnie, je0li zawarto01 ramki zajmuje wi-kszy obszar ni4 obszar udost-pniony przez ramk-, przegl)darka automatycznie wyposa4a ramk- w paski przewijania, aby u4ytkownicy przewijaj)c zawarto01 mieli dost-p do caego dokumentu. Takie ustawienie powoduje, 4e paski przewijania nie b-d) wy0wietlane. W takim przypadku paski przewijania b-d) wy0wietlane w ramce zawsze, niezale4nie od potrzeb. Domy0lnie u4ytkownicy mog) zmienia1 rozmiary ramek. Za pomoc) tego atrybutu mo4na temu zapobiec. MARGINHEIGHT piksele Okre0la szeroko01 marginesu, który 29

30 pojawia si- nad i pod ramk) (w pikselach). MARGINHEIGHT piksele Okre0la szeroko01 marginesu, który pojawia si- szeroko01 prawej i lewej strony ramki (w pikselach). W przypadku parametru TARGET s) cztery mo4liwo0ci: TARGET="_blank" TARGET="_self" TARGET="_parent" TARGET="_top" W pierwszym przypadku przywoywany dokument zostanie zaadowany do nowego, pustego okna (uruchomi now) kopiprzegl)darki. W drugim przypadku (przypadek domy0lny) nowy dokument zamieni w ramce dokument, z którego dokonujemy skoku. W trzecim przypadku przywoywany dokument zamieni dokument nadrz-dny w hierarchii dla bie4)cego dokumentu. W czwartym przypadku przywoywany dokument zostanie wstawiony na miejsce dokumentu pierwszego w hierarchii naszych skoków, a wi-c na sam) "gór-". index.htm <html> <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=iso "> <META HTTP-EQUIV="Content-Language" CONTENT="pl"> <head> <title>instytut Techniki</title> </head> <frameset framespacing="0" rows="90,*"> <frame scrolling="no" name="top" target="contents" src="nag.htm" > 30

31 <frameset framespacing="0" cols="180,*" > <frame scrolling="no" framespacing="0" name="contents" target="main" src="menu.htm" noresize> <frame framespacing="0" name="main" src="main.htm" scrolling="yes" > </frameset> <noframes> <body> <p>strona ta uvywa ramek, lecz Twoja przegl9darka nie obsuguje ich.</p> </body> </noframes> </frameset> </html> menu.htm <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <meta http-equiv="content-language" content="pl" /> </head> <body> <P> <A HREF="instt.htm" target='main'>instytut Techniki</A> <BR> <A HREF="instf.htm" target='main'>instytut Fizyki</A> <BR> <A HREF="instm.htm" target='main'>instytut Matematyki</A> <BR> </P> </body> </html> 31

32 32