plik


ÿþCMYK NA CD NEWSY Z OK£ADKI FIRMA MAGAZYN PROGRAMY WARSZTAT HTML  hiperBcza Jednym z g³ównych powodów ogromnego zainteresowania Internetem u schy³ku XX wieku by³a funkcjonalnoSæ hipertekstu. Oto bez znajomoSci ¿adnych tajemniczych komend przeciêtny u¿ytkownik móg³ wêdrowaæ po zasobach Internetu, pod¹¿aj¹c Scie¿k¹ hiper³¹czy. W artykule przyjrzymy siê nieco bli¿ej internetowym odnoSnikom i przygotujemy kilka prostych witryn wyjaSniaj¹cych tworzenie hiper³¹czy. W³odzimierz Gajda Wszystkie przykBady opisane w artykule znajduj si na doBczonej 106 INTERNET.listopad.2004 pBycie CD w katalogu Warsztat_HTML. HTML CMYK WARSZTAT PROGRAMY MAGAZYN FIRMA Z OK£ADKI NEWSY NA CD HTML iper³¹cza, w ¿argonie internautów zwane linkami, kotwicami czy na- Dodatkowe informacje znajdziesz na stronie czerwonej. wet  nieco ¿artobliwie  sznurkami, s¹ interaktywnymi odsy³acza- Hmi, które znajduj¹ siê w treSci dokumentu. Same odsy³acze nie s¹ ni- Hiper³¹cze to bêdzie mia³o postaæ: czym nowym. NowoSci¹ jest ich interaktywnoSæ. W ksi¹¿kach i innych publikacjach drukowanych mamy do czynienia Dodatkowe informacje znajdziesz na stronie z kilkoma rodzajami odsy³aczy. Jednym z nich s¹ zdania: dodatkowe infor- <A href= czerwona.html >czerwonej</A>. macje podano w rozdziale trzecim na stronie 234. W celu pod¹¿enia za ta- kim odsy³aczem, czytelnik musi przekartkowaæ ksi¹¿kê, by dotrzeæ do po- JeSli teraz internauta odwiedzaj¹cy tak przygotowan¹ stronê umieSci danej strony. Odsy³acze takie mog¹ siê ró¿niæ dok³adnoSci¹ wskazania do- wskaxnik myszy ponad napisem czerwonej, wtedy kursor myszy przyjmie celowej informacji, umiejscowieniem w tekScie oraz formatem. £¹cz¹ je postaæ d³oni. Klikniêcie mysz¹ spowoduje wySwietlenie w oknie przegl¹- natomiast nastêpuj¹ce wspólne cechy: darki treSci dokumentu zapisanego w pliku czerwona.html. wskazuj¹ inne xród³o informacji, Zwróæmy uwagê na zdanie informuj¹ce o hiper³¹czu Dodatkowe... zawieraj¹ adres umo¿liwiaj¹cy odnalezienie tego xród³a. OczywiScie w zdaniu tym zasiêg elementu A mo¿e byæ inny. TreSci¹ ele- G³ówn¹ cech¹, która odró¿nia hiper³¹cza internetowe od odsy³aczy mentu A mo¿e byæ ca³e zdanie: ksi¹¿kowych jest to, ¿e przeniesienie do wskazywanych materia³ów jest natychmiastowe. Nie musimy nic szukaæ ani kartkowaæ. Wystarczy klikn¹æ <A href= czerwona.html >Dodatkowe informacje mysz¹, a bie¿¹cy dokument zostanie zast¹piony dokumentem wskazywa- znajdziesz na stronie czerwonej</A>. nym przez odsy³acz! Kto wie, czy ta wygoda i prostota w przechodzeniu od dokumentu do dokumentu nie by³a najistotniejszym czynnikiem warun- jego fragment: kuj¹cym lawinowy wzrost popularnoSci WWW. W ten sposób nieco okrê¿n¹ drog¹ dotarliSmy do elementu A jêzyka Dodatkowe informacje znajdziesz HTML. Element ten ma postaæ: <A href= czerwona.html >na stronie czerwonej</A>. <A href= adres dokumentu >informacje o treSci</A> lub tak jak to zrobiliSmy na pocz¹tku  jedynie ostatni wyraz. Mo¿emy równie¿ zmieniæ treSæ zdania, czy nawet zast¹piæ je lakonicznym komuni- WartoSci¹ atrybutu href (ang. hypertext reference  odwo³anie hipertek- katem: Nastêpna strona czy Dalej: stowe) jest adres dokumentu, zaS zawartoSæ elementu, umieszczana pomiê- dzy znacznikami <A ...> oraz </A>, informuje o treSci. <A href= czerwona.html >Dalej</A> W poni¿szych æwiczeniach praktycznych nale¿y zwróciæ uwagê na fakt, ¿e witryny zawieraj¹ce hiper³¹cza zazwyczaj (choæ nie zawsze!) sk³a- Przyjmuj¹c jedno z powy¿szych rozwi¹zañ, powinniSmy d¹¿yæ do tego, daj¹ siê z kilku osobnych plików. W celu unikniêcia zamieszania najlepiej by podana informacja o odnoSniku by³a jasna, zwiêz³a i czytelna. Dodajmy, ka¿de z æwiczeñ wykonywaæ w osobnym folderze. ¿e oba pliki, zielona.html oraz czerwona.html nale¿y, umieSciæ w tym sa- mym folderze. ÆWICZENIE 1 Przygotuj dwie strony WWW. Strony te zatytu³uj  Zielona oraz  Czerwona . ÆWICZENIE 2 Na stronie zielonej umieSæ hiper³¹cze odwo³uj¹ce siê do strony czerwonej. Przygotuj strony WWW prezentuj¹ce trzy wiersze Juliana Tuwima. Hiper³¹cze ze strony zielonej do czerwonej Pracê rozpoczniemy od doSæ oczywistej uwagi: na æwiczenie to sk³ada- Strona zawieraj¹ca hiper³¹cza do trzech podstron j¹ siê dwa pliki. Jeden z nich bêdzie zawiera³ stronê czerwon¹, a drugi  zielon¹. Pliki te nazwiemy zielona.html oraz czerwona.html. Æwiczenie to pokazuje, w jaki sposób wykonaæ spis treSci zawieraj¹cy Rozpoczynamy od wstawienia szablonu pustej strony (w programie NotH, hiper³¹cza. Jak wynika z rysunku 2, mamy wykonaæ cztery dokumenty. przedstawionym w poprzednim artykule dotycz¹cym jêzyka HTML, aktywu- Pierwszy z nich to spis treSci, a pozosta³e trzy strony prezentuj¹ konkretne jemy skrót Ctrl+S+A), po czym w treSci strony umieszczamy tytu³, dowolny wierszyki. tekst oraz modyfikujemy kolor t³a. Uwagê koncentrujemy na hiper³¹czu. Najpierw przygotujemy strony zawieraj¹ce treSæ wierszy. Pierwsz¹ Hiper³¹cze wstawiamy do dokumentu zielona.html, stosuj¹c skrót z nich, zawieraj¹c¹ wiersz pt. Lokomotywa, zapisujemy w pliku o nazwie Ctrl+P+A. Odwo³anie to ma nas przenosiæ do strony czerwonej. Zatem ja- lokomotywa.html, wiersz Pan Hilary umieszczamy w pliku hilary.html, ko wartoSæ parametru href nale¿y podaæ nazwê pliku zawieraj¹cego stronê wiersz S³oñ Tr¹balski zapisujemy w pliku slon.html. czerwon¹, czyli czerwona.html. Informacje o zawartoSci dokumentu, do Strona g³ówna æwiczenia ma zawieraæ trzy hiper³¹cza. Nazwijmy j¹ którego przenosi nas hiper³¹cze podamy umieszczaj¹c na stronie tekst: wiersze.html. Spis treSci utworzymy umieszczaj¹c nastêpuj¹cy kod HTML: INTERNET.listopad.2004 107 CMYK NA CD NEWSY Z OK£ADKI FIRMA MAGAZYN PROGRAMY WARSZTAT HTML <A href= lokomotywa.html >Lokomotywa</A><BR> HiperBcza wewntrzne <A href= hilary.html >Pan Hilary</A><BR> Nieco innym rodzajem hiper³¹czy s¹ hiper³¹cza wewnêtrzne. Odnosz¹ <A href= slon.html >S³oñ Tr¹balski</A><BR> siê one do konkretnego miejsca w dokumencie. Wracaj¹c do analogii dotycz¹cej odnoSników w tekstach drukowanych, mo¿emy porównaæ Jak widaæ, ka¿de z tych hiper³¹czy zawiera tytu³ wiersza. JeSli w tak hiper³¹cze wewnêtrzne do wskazania konkretnego miejsca w ksi¹¿ce przygotowanym spisie wierszy klikniemy dowolny tytu³, wówczas na (np. pierwszego wyrazu w trzecim akapicie na stronie 14). ekranie pojawi siê nowy dokument zawieraj¹cy wybrany wiersz. Na JeSli chcemy przejSæ do innego miejsca w tekScie, musimy to miejsce przyk³ad hiper³¹cze <A href= hilary.html >Pan Hilary</A> powoduje, w jakiS sposób oznaczyæ. W jêzyku HTML istniej¹ dwie metody oznacza- ¿e osoba odwiedzaj¹ca stronê zobaczy w oknie przegl¹darki napis Pan nia fragmentów. Jedna z nich, preferowana, wykorzystuje atrybut id. Atry- Hilary. Napis ten informuje o zawartoSci strony, do której przenosi akty- but ten mo¿emy zdefiniowaæ w odniesieniu do dowolnego elementu, np.: wacja hiper³¹cza. KolejnoSæ w jakiej tworzymy strony sk³adaj¹ce siê na to æwiczenie <H1 id=:wierzby >O czym szumi¹ wierzby</H1> nie jest istotna. Jako pierwsz¹ mo¿emy utworzyæ stronê ze spisem treSci. W takim przypadku nie powinien dziwiæ fakt, ¿e mimo utworzenia strony lub startowej hiper³¹cza nie bêd¹ dzia³a³y a¿ do momentu przygotowania po- zosta³ych plików. <P id= wa > Równie¿ nazwy plików w æwiczeniu odgrywaj¹ rolê drugoplano- W moich snach,<BR> w¹. Zamiast wiersze.html mo¿emy u¿yæ nazwy glowna.html, zaS wier- Wci¹¿ Warszawa,<BR> sze mo¿emy ponumerowaæ: 1.html, 2.html oraz 3.html. Wa¿ne jest, by Pe³na ulic... wartoSciami atrybutów href by³y faktyczne nazwy plików. </P> ÆWICZENIE 3 W pierwszym przyk³adzie nag³ówek H1, zawieraj¹cy tytu³ O czym Przygotuj strony WWW prezentuj¹ce biografiê oraz trzy wiersze Nor- szumi¹ wierzby, zosta³ oznaczony identyfikatorem wierzby. Drugi wida. Na stronie g³ównej umieSæ spis treSci, zaS na podstronach dodaj przyk³ad przedstawia fragment piosenki zespo³u Lady Pank. Akapit hiper³¹cza powrotne do strony g³ównej. z tekstem utworu otrzyma³ identyfikator wa. Druga metoda identyfikowania fragmentu tekstu wykorzystuje ele- ment A. Atrybut name ustala nazwê, za pomoc¹ której mo¿emy siê od- Struktura serwisu z wierszam i Norwida wo³aæ do danego miejsca strony WWW: Struktura serwisu jest przedstawiona na rys. 3. Strona g³ówna zosta³a oznaczona liter¹ G, stro- <H1><A name= wierzby ></A>O czym szumi¹ na zawieraj¹ca bibliografiê  liter¹ B, zaS stro- wierzby</H1> ny z wierszami  cyframi 1, 2, 3. Strza³ki ozna- czaj¹ po³¹czenie stron hiper³¹czami, natomiast lub groty strza³ek mówi¹ o kierunku powi¹zania. Strza³ki dwukierunkowe nale¿y rozumieæ jako <P> powi¹zanie w obie strony: na stronie g³ównej <A name= wa ></A> znajduje siê odnoSnik do danej podstrony, zaS W moich snach,<BR> na podstronie jest umieszczony odnoSnik po- Wci¹¿ Warszawa,<BR> wrotny do strony g³ównej. Pe³na ulic... Omówienie æwiczenia rozpoczniemy od ustalenia nazw plików. Stronê </P> g³ówn¹ nazwiemy ckn.html (od inicja³ów poety), plik zawieraj¹cy biblio- grafiê  bibliografia.html, a dokumenty przedstawiaj¹ce wiersze  czu- Zwróæmy uwagê na zawartoSæ elementów A w dwóch powy¿szych losc.html, modlitwa.html oraz mojpsalm.html. Jak widaæ, serwis tworzy przyk³adach. Poniewa¿ pomiêdzy znacznikami <A href=  > oraz </A> piêæ plików. nie umieszczono ¿adnej treSci, zatem na ekranie nie bêd¹ one widoczne. Strona g³ówna ma zawieraæ spis treSci sk³adaj¹cy siê z hiper³¹czy. Takie u¿ycie elementu A s³u¿y jedynie identyfikacji miejsca, a nie two- Oto kod, który nale¿y umieSciæ w pliku ckn.html: rzeniu hiper³¹czy. OczywiScie element A mo¿e posiadaæ oba atrybuty: <H1>Cyprian Kamil Norwid</H1> <A name= drama href= shakespeare.html >Dramaty <P><A href= biografia.html >Biografia</A></P> W. Szekspira</A> <H2>Utwory</H2> <P> Wtedy jest on zarówno kotwic¹, jak i identyfikatorem miejsca. <A href= modlitwa.html >MODLITWA</A><BR> Pamiêtajmy, by identyfikatory stosowane na jednej stronie by³y <A href= mojpsalm.html >MÓJ PSALM</A><BR> unikalne (atrybuty id oraz name wspó³dziel¹ przestrzeñ nazewnicz¹!). <A href= czulosc.html >CZU£ORÆ</A><BR> Wiemy zatem w jaki sposób zaznaczyæ miejsce na stronie WWW. A jak siê </P> do niego odwo³aæ? S³u¿y do tego znak #. Umieszczamy go w adresie WWW po nazwie pliku, a przed identyfikatorem miejsca. Na przyk³ad odnoSnik: Kod ten zawiera cztery odnoSniki. Na stronie WWW widoczne bêd¹ <A href= tv.html#dobranocka >MiS uszatek</A> napisy Biografia, MODLITWA, MÓJ PSALM oraz CZU£ORÆ. Aktywa- wskazuje miejsce oznaczone identyfikatorem dobranocka w pliku cja powy¿szych hiper³¹czy bêdzie zastêpowa³a stronê g³ówn¹ jednym tv.html. Na stronie tv.html powinien znajdowaæ siê identyfikator: z plików tworz¹cych serwis. Powrót do strony g³ównej wykonamy w na- <P id= dobranocka >Na dobranoc, dobry wieczór, stêpuj¹cy sposób: miS pluszowy...</P> (identyfikator ten mo¿e wystêpowaæ obok dowolnego znacznika, np. <A href= ckn.html >Powrót do strony g³ównej</A> H1, BR czy STRONG). 108 INTERNET.listopad.2004 CMYK WARSZTAT PROGRAMY MAGAZYN FIRMA Z OK£ADKI NEWSY NA CD HTML Aktywacja hiper³¹cza MiS uszatek spowoduje otwarcie pliku Dodajmy, ¿e z racji na to, i¿ hiper³¹cza dotycz¹ tego samego pliku, w któ- tv.html, a nastêpnie przewiniêcie dokumentu do miejsca, w którym po- rym siê znajduj¹, u¿ycie nazwy pliku nie jest konieczne. Spis treSci w tym jawia siê identyfikator. konkretnym przypadku mo¿emy utworzyæ z nieco krótszych hiper³¹czy: ÆWICZENIE 4 <H2><A href= #arbuz >Arbuz</A></H2> Przygotuj stronê WWW przedstawiaj¹c¹ piêæ wierszy Jana Brzechwy. Wszystkie wiersze umieSæ w jednym pliku i poprzedx je spisem treSci zawie- JeSli chcielibySmy po ka¿dym wierszu umieSciæ odnoSnik wskazu- raj¹cym hiper³¹cza wewnêtrzne. Rozwi¹zanie zapisz w pliku brzechwa.html. j¹cy spis treSci, to nale¿y ustaliæ identyfikator spisu treSci: Tym razem zadanie polega na przygotowaniu jednego dokumentu HTML. Wszystkie piêæ wierszy mamy zapisaæ w jednym pliku, po- <H1 id= spis >Jan Brzechwa</H1> przedzaj¹c je spisem treSci wed³ug nastêpuj¹cego schematu: zaS wiersze zakoñczyæ znacznikiem: spis treSci wiersz pierwszy <A href= brzechwa.html#spis >Spis treSci</A> wiersz drugi ... Rozwi¹zanie takie jest zapisanie w pliku brzechwa2.html. wiersz pi¹ty Internetowe odsy³acze mog¹ wskazywaæ pliki ró¿nych formatów. Nie jest wymagane, by plik, którego nazwê podajemy jako wartoSæ atrybutu Ka¿dy z wierszy umieszczamy na stronie, stosuj¹c element PRE. TreSæ href, by³ stron¹ internetow¹. Zarówno pliki tekstowe, spakowane, multi- wiersza poprzedzamy tytu³em umieszczonym wewn¹trz elementu H2. Klikniê- medialne, jak i dowolne inne mog¹ byæ wskazywane przez hiper³¹cze. cie tytu³u wiersza w spisie treSci ma nas przenosiæ do tekstu utworu. Musimy Akcje podejmowane przez przegl¹darkê s¹ ró¿ne dla ró¿nych typów pli- wiêc oznaczyæ te fragmenty strony, od których rozpoczynaj¹ siê wiersze. Do- ków i zale¿¹ od oprogramowania zainstalowanego na komputerze. brym wyborem bêdzie umieszczenie identyfikatorów id w znacznikach zawie- raj¹cych tytu³y wierszy. Zatem wierszyk Arbuz otrzyma identyfikator arbuz: OdwoBania do stron w Internecie OdnoSnik hipertekstowy mo¿e wskazywaæ dowolny dokument znajdu- <H2 id= arbuz >Arbuz</H2> j¹cy siê w Internecie. Jako twórcy stron internetowych nie jesteSmy <PRE> ograniczeni do plików przygotowanych w³asnorêcznie. Ka¿da strona W owocarni arbuz le¿y w Internecie mo¿e stanowiæ cel naszych odnoSników. I z³oSliwie pestki szczerzy; Na przyk³ad firma Lego publikuje informacje dotycz¹ce serii Bionic- ... le na stronie http://www.bionicle.com. JeSli chcemy skierowaæ pod ten adres goSci naszej witryny, wystarczy przygotowaæ nastêpuj¹cy odnoSnik: Natomiast pocz¹tek wierszyka pt. ¯uk zaznaczymy identyfikatorem zuk: Moje ulubione <A href= http:// <H2 id= zuk >¯uk</H2> www.bionicle.com >klocki</A>. <PRE> Do biedronki przyszed³ ¿uk, Podobnie, na stronê Bia³ej Gwiazdy trafi¹ wszyscy, którzy klikn¹ odsy³acz: W okieneczko puk - puk - puk. ... Jazda! Jazda! <A href= http://www.wisla.krakow.pl >Bia³a Gwiazda</A> Podobnie postêpujemy w stosunku do pozosta³ych wierszy. Teraz wracamy na pocz¹tek dokumentu i przystêpujemy do przygoto- OczywiScie, w powy¿szych przyk³adach adres strony, do której zo- wania spisu treSci. W jaki sposób bêd¹ wygl¹da³y adresy wskazuj¹ce po- stanie odes³ana osoba klikaj¹ca hiper³¹cze, nie jest widoczny w oknie cz¹tki wierszy? Przyjrzyjmy siê, jak powstaje adres wiersza pt. Arbuz. Plik przegl¹darki (widaæ go jedynie na pasku stanu przegl¹darki w momen- nazywa siê brzechwa.html, st¹d atrybut href rozpocznie siê href= brze- cie naprowadzenia kursora myszy nad odnoSnik). W jaki sposób przy- chwa.html. Po nazwie pliku umieszczamy znak #, po którym nastêpuje gotowaæ hiper³¹cze, które bêdzie zawiera³o informacjê o adresie? Wy- identyfikator fragmentu. W przypadku wiersza Arbuz identyfikatorem jest starczy w treSci hiper³¹cza powtórzyæ adres, na przyk³ad: napis arbuz. Czyli atrybut href bêdzie mia³ postaæ: <A href= http://www.onet.pl >http://www.onet.pl</A> href= brzechwa.html#arbuz Podsumowanie natomiast ca³e hiper³¹cze bêdzie nastêpuj¹ce: Dziêki hiper³¹czom publikacje w Internecie stanowi¹ now¹ jakoSæ w stosunku do materia³ów drukowanych. Media elektroniczne umo¿li- <A href= brzechwa.html#arbuz >Arbuz</A> wiaj¹ tworzenie indeksów, bibliografii i odnoSników w taki sposób, by czytelnik nie musia³ traciæ czasu na b³¹dzenie miêdzy rega³ami i prze- A zatem spis treSci utworzymy umieszczaj¹c na pocz¹tku strony wracanie kartek. A¿ dziwnym wydaje siê fakt, ¿e wszystko to za- poni¿sze piêæ hiper³¹czy: wdziêczamy znacznikowi A, który przetrwa³ w niezmienionej postaci od pocz¹tków hipertekstu. Mam nadziejê, ¿e dzisiejsza seria æwiczeñ <H2><A href= brzechwa.html#arbuz >Arbuz</A></H2> pomo¿e pocz¹tkuj¹cym webmasterom opanowaæ umiejêtnoSci po- <H2><A href= brzechwa.html#chrzaszcz > trzebne do samodzielnego wykorzystywania hiper³¹czy. n Chrz¹szcz</A></H2> <H2><A href= brzechwa.html#foka >Foka</A></H2> wiczenia przedstawione w artykule s dostpne na stronie domowej autora <H2><A href= brzechwa.html#zaba >¯aba</A></H2> pod adresem http://www.gajdaw.pl <H2><A href= brzechwa.html#zuk >¯uk</A></H2> INTERNET.listopad.2004 109

Wyszukiwarka

Podobne podstrony:
wejsciowkaRSO27 11 2004
911 In Plane Site The truth of 9 11, 2004 (ENG)
PHP Co nowego w PHP 5 (cz 3) 11 2004
MT 11 2004 Citroen Bucefał
2004 11 Porównanie serwerów relacyjnych baz danych Open Source [Bazy Danych]
Dz U 2004 141 1492 zmiana z dnia 2003 11 28
Groff Conklin (ed) Invaders of Earth 11 Milton Lesser [ss] Pen Pal (v1 0) (html)
Inżynier Budownictwa 2004 11
Magazine Ellery Queen Mystery Magazine 2006 11 November (v1 0) [html]
Cherryh, CJ Foreigner 11 Deceiver 3S(v1)(html)
Magazine Analog Science Fiction and Fact 2004 Issue 11 November (v1 0) [txt]
Dz U 2004 242 2421 zmiana z dnia 2004 11 03
Apex Authors Apex Science Fiction and Horror Digest 11 (v1 0) [html]

więcej podobnych podstron