r06 2SWAL7ZAWIMEQ6U5OEVBRHTOIZEO72ZGLT7Q7YY


Rozdział 6. Połączenia
Uniform Resource Locator
Co to jest URL?
Uniform Resource Locator (URL) to adres dokumentu (lub innych zasobów) w sieci WWW.
Ogólna postać adresu WWW, na przykład: http://www.mojastrona.com/html/strona.htm
spełnia następujące reguły składni:
protokół://host.domena:port/ścieżka/nazwa_pliku
Co oznaczają poszczególne elementy adresu URL?
Nazwa protokołu określa typ usługi internetowej  w przypadku stron WWW jest to
http. Inne nazwy to na przykład file, ftp, gopher, news, telnet.
Domena to nazwa domeny internetowej, na przykład microsoft.com.
Host to oczywiście host domeny. Domyślnym hostem dla http jest www.
:port definiuje numer portu hosta  zazwyczaj go pomijamy. Domyślny numer dla
serwerów http to 80.
Ścieżka określa ścieżkę dostępu na serwerze. Jeśli nie jest podana, dokument musi
znajdować się w katalogu głównym witryny WWW.
Nazwa pliku definiuje nazwę dokumentu. Nazwa domyślna to index.html lub
default.asp, co zależy od ustawień serwera sieciowego.
Ulokowanie dokumentu a ścieżka dostępu
Zrozumienie relacji między adresem lokalnym dokumentu, w którym połączenie jest tworzone, a
adresem dokumentu, do którego ono prowadzi, jest niezwykle istotne z punktu widzenia
zrozumienia procesu definiowania połączeń.
Jakie są rodzaje ścieżek dostępu?
Każda strona WWW ma swój unikatowy adres URL (ang. Uniform Resource Locator). Jednak w
przypadku połączeń lokalnych  a więc z dokumentu do dokumentu tej samej witryny  nie ma
potrzeby wprowadzania całego adresu URL. Wystarczy określić położenie pliku względem
dokumentu bieżącego lub względem katalogu głównego witryny.
Ścieżki dostępu mogą być więc następujące:
bezwzględne (np. http:/www.magsoft.com.pl/~rsokol/nmr/index.html)
względne
o zdefiniowane względem dokumentu (np.katalog/katalog.html)
o zdefiniowane względem foldera głównego (np. /katalog/katalog.html)
Co to jest adres bezwzględny?
Adres bezwzględny to po prostu pełny adres URL, wraz z nazwą protokołu. Jeśli więc odwołujesz
się do dokumentu na innym serwerze, musisz podać pełny adres. Lokalnie nie ma potrzeby
definiowania połączeń absolutnych  jest to wręcz szkodliwe.
Kiedy i jak korzystać z adresów względnych definiowanych względem dokumentu?
Adresy zdefiniowane względem dokumentu to najlepsze rozwiązanie dla prezentacji lokalnych.
Szczególnie wówczas, gdy dokumenty  bieżący oraz te, których prowadzą połączenia  znajdują
się w jednym folderze. Nawet jeśli są w innym, wystarczy wskazać hierarchię folderów startując
od bieżącego dokumentu.
Tak więc, w przypadku odwoływania się do dokumentu w tym samym folderze wystarczy podać
nazwę pliku. Jeśli odwołanie ma prowadzić do dokumentu w folderze podrzędnym, adres składa
się z nazwy foldera podrzędnego i nazwy pliku rozdzielonych prawym ukośnikiem.
Jak definiować adresy względne?
Oto przykłady adresów względnych:
Aby utworzyć połączenie prowadzące od pliku a1.html do pliku a2.html w tym
samym folderze A, wystarczy podać nazwę pliku: a2.html (patrz rysunek 6.1).
Rys. 6.1.
Połączenie z pliku a.html
do pliku b.html
umieszczonego w folderze
podrzędnym B
Aby utworzyć połączenie z pliku a.html do pliku b.html (umieszczonego w folderze
podrzędnym B), zdefiniuj adres względny: B/b.html (patrz rysunek 6.2).
Rys. 6.1.
Połączenie z pliku a.html
do pliku b.html
umieszczonego w folderze
podrzędnym B
Aby utworzyć połączenie od pliku b.html (folder podrzędny B) do pliku a.html (folder
nadrzędny A), zdefiniuj adres jako ../a.html (../ oznacza przejście o poziom wyżej w
hierarchii folderów).
Rys. 6.2.
Połączenie z pliku b.html
do pliku a.html
umieszczonego w folderze
nadrzędnym A
Aby utworzyć połączenie z pliku c.html (folder podrzędny C) do pliku b.html (w
innym folderze podrzędnym, o nazwie B), zdefiniuj adres jako ../B/b.html (../
spowoduje przejście do foldera nadrzędnego, a / przejście w dół hierarchii, do foldera
podrzędnego B).
Rys. 6.3.
Połączenie z pliku c.html
do pliku b.html  oba w
folderach podrzędnych
względem A
W przypadku przesuwania całej grupy plików, bez naruszania powiązań między nimi, połączenia
względne nie wymagają aktualizacji. Przesunięcie pojedynczych plików taką konieczność
spowoduje.
Co to są adresy względne definiowane względem foldera nadrzędnego?
W tym przypadku adres pliku to ścieżka dostępu od foldera nadrzędnego witryny do dokumentu.
Adres rozpoczyna się od ukośnika, który oznacza folder witryny. Adres tego rodzaju: /A/a.html
jest adresem pliku a.html z foldera A, który jest folderem podrzędnym foldera całej witryny.
Korzystanie z tego typu adresów jest trudniejsze. Jeśli sprawia Ci ono kłopot, stosuj adresowanie
względem dokumentu.
Ten typ adresowania sprawdza się najlepiej, gdy pliki witryny są często przemieszczane. Jeśli
połączenia zostały zdefiniowane względem foldera prezentacji, zachowają swoją poprawność.
Połączenia definiowane względem foldera nadrzędnego są interpretowane przez serwery, a nie
przeglądarki.
Definiowanie połączeń
Połączenie to narzędzie nawigacji, które możesz wbudować w swoje strony, aby umożliwić
czytelnikom przemieszczanie się do innych miejsc na tej samej stronie, do innych stron w obrębie
prezentacji lub do zupełnie obcych, lecz ciekawych stron w sieci. Funkcję połączenia może pełnić
wyraz, fraza, a nawet obraz.
Jaki znacznik HTML umożliwia utworzenie połączenia?
Znacznik HTML, za pomocą którego tworzone jest połączenie nosi nazwę znacznika
zakotwiczenia i ma taką postać:
Tekst połączenia
Znacznik ten oprócz atrybutu href może mieć także inne atrybuty.
Co umożliwiają połączenia?
Zanim zabierzemy się za definiowane połączeń, jeszcze kilka istotnych informacji na temat
połączeń. Ich możliwości są ogromne:
Połączenia mogą prowadzić do innych dokumentów, w tym również do obrazów, plików
dzwiękowych, sekwencji wideo.
Zakotwiczenia można definiować także w obrębie tej samej strony WWW (jeśli
oznaczysz w dokumencie cele, będziesz mógł sterować sposobem odbioru strony).
Dzięki połączeniom e-mail (które już poznałeś), ułatwisz użytkownikom nawiązanie
kontaktu.
Listy menu to nic innego jak listy połączeń stanowiące ciekawy element strony.
Połączenia skryptowe pozwalają przypisać obiektom określone zachowanie. Powodują
one wykonanie określonego kodu języka JavaScript.
Jak wygląda połączenie?
Wiesz to na pewno. Połączenia mają postać niebieskiego podkreślonego tekstu (w przypadku, gdy
są tekstowe), którego kliknięcie wywołuje określoną akcję  przejście do wskazanego miejsca.
Strona WWW, do której prowadzi kliknięte połączenie zostanie wyświetlona w bieżącym oknie
przeglądarki, chyba że ustawienia dodatkowe stanowią inaczej.
Na rysunku 6.4 pokazany jest przykład strony, która z racji funkcji zbudowana jest w znacznej
mierze z połączeń.
Rys. 6.4.
Oto portal
internetowy, w
którym połączenia
pełnią dominującą
rolę
Do tworzenia połączeń służy, jak się już dowiedziałeś, para znaczników . Element a
nazywa się zakotwiczeniem. Podstawowym jego atrybutem jest href  Hypertext REFerence.
Jak definiować atrybut href?
Wartością atrybutu href jest adres URL (Uniform Resource Locator). W najprostszej sytuacji,
gdy obie łączone strony znajdują się w tym samym katalogu, stosuje się tylko nazwę pliku.
Na przykład:
Wyświetl dodatkowe informacje na ten temat.
Znacznik definiuje też styl  powoduje podkreślenie tekstu i zmianę jego koloru na niebieski.
Można go umieszczać w dowolnym elemencie HTML. Z oczywistych względów nie można
zagnieżdżać znaczników
w sobie.
Struktura adresu URL zgodna jest z formatami systemu UNIX. Oznacza to, że wszystkie nazwy i
ścieżki dostępu są czułe na wielkość znaku (za wyjątkiem nazw komputerów i adresów e-mail).
Aby utworzyć połączenie do pliku w katalogu podrzędnym bieżącego pliku, należy skorzystać z
prawego ukośnika, /, który umieszczany jest między nazwą katalogu a nazwą pliku. Oto przykład:
Lista
moich publikacji wydanych w 1999r.
Aby odwołać się do pliku w katalogu nadrzędnym, zastosujesz taką oto składnię:
Powrót do
Spisu treści.
W tym przypadku wykorzystywane są ścieżki względne. Ścieżki bezwzględne zawsze
rozpoczynają się od ukośnika, co różni je od ścieżek względnych. Po ukośniku pojawiają się
nazwy wszystkich katalogów, od katalogu najwyższego poziomu po nazwę pliku, do którego
tworzone jest łącze.
Adresowanie względne jest wygodniejsze i bezpieczniejsze  umożliwia swobodne przenoszenie
stron między katalogami i systemami.
Jeśli w adresie URL na końcu nie pojawia się nazwa pliku (a jedynie nazwa katalogu), serwer
będzie szukał pliku o nazwie domyślnej  najczęściej jest to plik index.html. Jeśli nie znajdzie
takiego pliku, zwróci listę plików w katalogu.
Do czego służy atrybut name?
Innym ważnym atrybutem elementu a jest atrybut name. Stosowany jest on do zdefiniowania
odnośnika:
Terminy i definicje
Wartością tego atrybutu jest słowo kluczowe. W przeciwieństwie do połączeń, odnośniki nie są
widoczne na stronie. Żeby skierować połączenie na wybrany odnośnik, skorzystamy z elementu
o podobnej składni jak w przypadku zwykłych połączeń. Przed nazwą należy jednak dodać
znak #:
Patrz
Dodatek A.
Zakotwiczenia o zdefiniowanych nazwach są często stosowane do utworzenia czegoś w rodzaju
 spisu treści strony WWW  w poszczególnych sekcjach dokumentu umieszczane są
zakotwiczenia o zdefiniowanych nazwach, a na początku strony pojawiają się połączenia do
oznaczonych nazwami fragmentów.
Co to jest połączenie e-mail?
Specjalne połączenie  także je już poznałeś  umożliwia czytelnikowi przesłanie listu e-mail do
autora strony. Składnia jest tutaj następująca:
Wyślij do mnie list
Czy można wskazać miejsce otwieranego połączeniem dokumentu?
Kliknięcie połączenia poprowadzi Cię do dokumentu, który jest dostępny pod adresem
wskazanym przez atrybut href. Dokument ten wyświetlony zostanie w bieżącym oknie Twojej
przeglądarki, zastępując wcześniejszą zawartość. Czy możemy to zmienić? Jak najbardziej. Służy
do tego atrybut target.
Atrybut ten może przyjmować jedną z czterech wartości: _blank, _parent, _self (jest to
wartość domyślna) lub _top. Szczegółowy opis wpływu poszczególnych ustawień znajdziesz w
dodatku A. Najczęściej wykorzystuje się wartość _blank, która pozwala otwierać nową stronę w
nowym oknie.
Jeśli chcesz otworzyć stronę w nowym oknie, postać kodu html jest następująca:
Odwiedz tę
stronę!

W dalszej części rozdziału poświęcimy atrybutom znacznika więcej miejsca. Sprawdzimy
różne sposoby jego wykorzystania w dokumentach html.
Definiowanie połączenia do innej strony
Zaopatrzony we wstępne informacje na temat tworzenia połączeń możesz spróbować utworzyć
połączenie prowadzące ze strony głównej do innego dokumentu html.
Jak zdefiniować połączenie do innej strony tej samej witryny?
Witryna to zestaw kilku stron powiązanych ze sobą połączeniami. Jedna ze stron pełni w niej rolę
centrum dowodzenia  nazywamy ją stroną główną, ale wielu użytkowników stosuje też określenie
strona domowa. Zazwyczaj strona główna zawiera informacje ogólne, które rozwijane są na
stronach podrzędnych.
Aby zdefiniować połączenie spinające dwie strony, musimy więc zacząć od przygotowania dwóch
plików html. Wykorzystamy w naszych eksperymentach z połączeniami stronę o zwierzakach, z
poprzedniego rozdziału. To będzie strona główna. Strona podrzędna będzie zawierała dodatkowe
informacje na temat określony tekstem połączenia.
Przyjrzyj się postaci strony WWW i zastanów się, w jakich miejscach chciałbyś umieścić
połączenia (patrz rysunek 6.5).
Rys. 6.5.
Przekształcimy
w połączenia
nazwy
gatunków kotów
 będą
prowadziły do
stron
poświęconych
im konkretnie
Wybierz fragmenty tekstu, które w najbardziej reprezentatywny sposób będą charakteryzowały
punkt docelowy. W przykładzie przekształcimy w połączenia nazwy gatunków kotów, na razie
wyróżnione czcionką pogrubioną  połączenia te poprowadzą do stron poświęconych im
tematycznie.
Wyświetl w oknie edytora kod zródłowy swojej strony głównej  kod tego przykładowego
dokumentu znajdziesz w rozdziale 5., na wydruku 5.2. Zamień w nim wszystkie elementy b na
elementy a, zgodnie ze składnią:
Tekst połączenia
Oczywiście jeśli w swoim pliku nie stosowałeś znaczników , obejmij znacznikami
żądany tekst.
Wartościami atrybutu href będą nazwy poszczególnych plików html, do których wiodą
połączenia (tak będzie, jeśli wszystkie podrzędne pliki html umieścisz w tym samym folderze, w
którym znajduje się plik strony głównej  patrz rozważania na temat adresowania, na początku
rozdziału). Przygotuj pliki html w taki sam sposób jak plik strony głównej i zapisz.
Zapisz kod strony głównej i sprawdz działanie połączeń wczytując stronę główną do przeglądarki i
klikając je (patrz wydruk 6.1 oraz rysunki 6.6 i 6.7).
Wydruk 6.1. Połączenia prowadzące ze strony głównej do stron podrzędnych


Zwierzaki




Lampartheight="100">Koty duże



Lwa, tygrysa,
panterę, geparda i
jaguara nazywamy wielkimi kotami.



Należą do gromady ssaków, rzędu drapieżnych, rodziny kotowatych
(Felidae). Do tej rodziny należą też małe koty: ryś, ocelot,
serwal. W sumie rodzina kotowatych obejmuje 40
gatunków zwierząt. Samce są większe od samic. Wszystkie mruczą, gdy są
zadowolone. Rozzłoszczone - powarkują, prychają. Tylko wielkie koty
potrafią ryczeć.






Kotekheight="75"> Koty małe



Kot domowy najprawdopodobniej pochodzi
od dwóch gatunków: od
kota nubijskiego (Felis silvestris
lybica
) i od
azjatyckiego kota stepowego (Felis
silvestris ornata
).



Do dziś nie wiadomo dokładnie kiedy i jak kot stał się zwierzęciem
domowym. Jednak najczęściej wymienia się okres około 5000 lat temu. Miało
to miejsce w dolinie Nilu.




Rys. 6.6.
Wszystkie
nazwy zostały
przekształcone
w połączenia do
innych
dokumentów
html tej samej
witryny
Rys. 6.7.
Kliknięcie
połączenia
powoduje
wyświetlenie w
oknie
przeglądarki
pliku
kot_domowy.ht
ml
Jak zdefiniować połączenie do zewnętrznej strony?
Połączenia do stron WWW znajdujących się na innych serwerach definiuje się korzystając z tego
samego elementu a. Cała tajemnica tkwi w adresie url, który musi być w tym przypadku pełny.
Jeśli więc chcesz umieścić na swojej stronie połączenie prowadzące do innej interesującej strony,
spoza Twojej witryny, musisz jako wartość atrybutu href podać adres bezwzględny witryny. Na
wydruku znajdziesz proste porównanie kodu html definiującego połączenie lokalne z
odpowiednim kodem dla połączenia zewnętrznego. Zwróć uwagę, że na ekranie nie ma różnicy
(patrz rysunek 6.8).
Wydruk 6.2. Połączenia lokalne i zewnętrzne


Połączenia lokalne i zewnętrzne





Ten fragment tekstu
to połączenie do innej strony tej samej witryny.




Ten fragment tekstu
to połączenie prowadzące do witryny Microsoft.




Rys. 6.8.
Połączenia
lokalne nie
różnią się
wyglądem od
zewnętrznych
Czy można dowiedzieć się pod jaki adres URL prowadzą połączenia?
Podglądając postać zródłową strony WWW dowiesz się jak zdefiniowano na niej połączenia. Jest
jednak prostsza metoda. Wystarczy spojrzeć na pasek stanu, z lewej strony (patrz rysunek 6.9).
Rys. 6.9.
Na pasku stanu
wyświetlany jest
adres URL
wskazywanego
myszką
połączenia
Jak wrócić do strony głównej?
Element a pozwala zdefiniować połączenie, które poprowadzi Cię do innego dokumentu html
Twojej witryny. A jak z niego wrócić?
Jeśli chcesz tworzyć poprawne technicznie strony WWW, nie możesz skazywać czytelnika
Twoich stron na korzystanie z przycisków nawigacyjnych przeglądarki. Zaplanowanie
odpowiedniego systemu nawigacji między stronami jest tym ważniejsze, że daje Ci on możliwość
sterowania sposobem przeglądania stron, co zwiększa prawdopodobieństwo skutecznego przekazu
informacji.
Co to oznacza? Oznacza mianowicie, że na wszystkich stronach witryny powinieneś wstawić
połączenia prowadzące do strony głównej, a w idealnym przypadku także do pozostałych stron.
Czy obraz może być połączeniem?
Jak wiesz, nie tylko tekst może zostać przekształcony w połączenie. Równie dobrze nadają się do
tego celu obrazy. Ikony nawigacyjne zamiast zwykłych połączeń na pewno uatrakcyjnią Twoje
strony. Mogą one mieć na przykład postać przycisków lub niewielkich obrazków  jest to kwestia
Twojej inwencji. Odpowiednie ikony znajdziesz wśród rysunków dołączonych do pakietu
Microsoft Office lub możesz je sam przygotować.
Posłużmy się takim obrazkiem, aby utworzyć graficzne połączenie pozwalające powrócić do
strony głównej.
Składnia wyrażenia przekształcającego obraz w połączenie jest podobna jak w przypadku tekstu:

Element a obejmuje tym razem znacznik a nie tekst.
Przygotuj lub wybierz plik .GIF lub .JPG, który chcesz zastosować jako ikonę nawigacyjną.
Otwórz plik. Oddziel treść strony od menu ikon nawigacyjnych linią poziomą (użyj w tym celu
znacznika
).
Dodaj na początku lub na końcu strony połączenie do strony głównej. Oto odpowiedni kod (patrz
wydruk 6.3):
Wydruk 6.3. Ikona nawigacyjna


Kot domowy



KOT DOMOWY (Felis domestica) pochodzi od dzikich gatunków kotów (m.in.
od żbika). Istnieje wiele ras i odmian barwnych kotów, a główne rasy to:
kot syjamski  krótkowłosy o długiej, proporcjonalnej głowie z dużymi,
szeroko rozstawionymi uszami i skośnymi, niebieskimi oczami, oraz kot
perski  długowłosy o okrągłej, masywnej głowie z małymi, zaokrąglonymi
na końcach uszami i dużymi, okrągłymi, zwykle pomarańczowymi oczami.


Długość ciała kota to 70 80 cm, ogona 25 35 cm, masa ciała ok. 3 5 kg
(wyjątkowo nawet do 20 kg). Koty osiągają dojrzałość płciową w 6 10
miesiącu życia. Ruja występuje u kotek 2 3 razy w roku, a ciąża trwa ok.
60 dni. Zazwyczaj rodzi się od 4 8 młodych.






Oto obraz, który pełni rolę połączenia powrotnego:

strony głównej >




W tym przypadku kod został dodany na końcu strony. Zwróć uwagę, że obok ikony umieszczono
też tekst opisujący dokąd prowadzi obraz-połączenie. Taki tekst można także przekształcić w
połączenie. W naszym przykładzie ma on jedynie aspekt informacyjny. Ponieważ skorzystaliśmy z
obrazu, możemy też dołączyć dodatkowe informacje definiując za pomocą atrybutu alt tekst
alternatywny (patrz rysunek 6.10).
Rys. 6.10.
Ikona dodana na
końcu strony
pozwala powrócić
do strony głównej
bez konieczności
korzystania z
przycisków
nawigacyjnych
przeglądarki
Odnośniki
Jak już wspominałam, odnośniki  zakotwiczenia o zdefiniowanych nazwach  tworzy się przy
użyciu tego samego znacznika , który poznaliśmy przy okazji połączeń. Zamiast atrybutu
href stosowany jest tu atrybut name. Atrybut ten zawiera słowa kluczowe, które będą stanowiły
nazwę odnośnika:
tekst
Żeby skierować połączenie na wybrany odnośnik, musimy utworzyć  zwykłe połączenie, z tym
że wartością atrybutu href jest w tym przypadku nazwa odnośnika poprzedzona znakiem #.
inny tekst
Jakie może być zastosowanie odnośników?
Zdarza się, że strona zawiera omówienie jakiegoś zagadnienia (jest na przykład instrukcją obsługi
lub zawiera wybrane fragmenty literackie). W takich obszernych tekstowo stronach przydatna jest
komunikacja wewnętrzna, która umożliwi czytelnikowi przechodzenie do wybranych tematów
oraz powrót.
W przełożeniu na język praktyki chodzi tu o umieszczenie na początku dokumentu czegoś w
rodzaju spisu treści strony, którego pozycje będą prowadziły do kolejnych fragmentów. Z tej
samej opcji można skorzystać definiując połączenie prowadzące na początek strony.
Jak zdefiniować odnośniki?
Utworzymy prosty plik, w którym zbudujemy spis treści strony. Na początku dokumentu pojawią
się połączenia prowadzące do umieszczonych gdzieś w tekście zakotwiczeń o zdefiniowanych
nazwach. Po przeanalizowaniu wydruku 6.4, bez trudu złapiesz, o co w tego typu konstrukcji
chodzi. Zapisz swój plik, wczytaj stronę do przeglądarki i sprawdz działanie odnośników (patrz
rysunek 6.11).
Wydruk 6.4. Definiujemy odnośniki


Spis treści





Do rozdziału 1.




Do rozdziału 2.




Do Rozdziału 3.




Do rozdziału 4.




Do rozdziału 5.




Do rozdziału 6.




Do rozdziału 7.



Rozdział 1


Ten rozdział zawiera bla bla bla bla


Rozdział 2


Ten rozdział zawiera bla bla bla bla


Rozdział 3


Ten rozdział zawiera bla bla bla bla


Rozdział 4


Ten rozdział zawiera bla bla bla bla


Rozdział 5


Ten rozdział zawiera bla bla bla bla


Rozdział 6


Ten rozdział zawiera bla bla bla bla


Rozdział 7


Ten rozdział zawiera bla bla bla bla




Rys. 6.11.
Strona, na której utworzony
został spis treści  kliknięcie
pozycji spisu przeniesie Cię
do odpowiedniego rozdziału
Jak wykorzystać odnośniki do przechodzenia na początek strony?
Oczywiście w tym przypadku obowiązuje ten sam mechanizm. Spróbujmy jednak troszeczkę
utrudnić sobie życie i przygotujmy obraz-połączenie.
Scenariusz jest następujący: gdzieś na początku strony, na przykład w elemencie h1 (w
przykładowym pliku jest on pierwszym elementem zawartości) umieścimy zakotwiczenie o
zdefiniowanej nazwie; na końcu strony wstawimy element a, w którym atrybut href ma wartość
odpowiadającą nazwie zakotwiczenia ze znakiem #. I to wszystko. Wydruk 6.5 zawiera przekład
tego, co powiedzieliśmy na język HTML. Odpowiednie fragmenty kodu zostały wyróżnione
czcionką pogrubioną. Pamiętaj, aby umieścić obraz stanowiący połączenie na początek strony w
odpowiednim folderze!
Wydruk 6.5. Powrót na początek strony


Kot domowy



KOT DOMOWY (Felis domestica)


Pochodzi od dzikich gatunków kotów (m.in. od żbika). Istnieje wiele
ras i odmian barwnych kotów, a główne rasy to: kot syjamski - krótkowłosy
o długiej, proporcjonalnej głowie z dużymi, szeroko rozstawionymi uszami
i skośnymi, niebieskimi oczami, oraz kot perski - długowłosy o okrągłej,
masywnej głowie z małymi, zaokrąglonymi na końcach uszami i dużymi,
okrągłymi, zwykle pomarańczowymi oczami.


Długość ciała kota to 70-80 cm, ogona 25-35 cm, masa ciała ok. 3-5 kg
(wyjątkowo nawet do 20 kg). Koty osiągają dojrzałość płciową w 6-10
miesiącu życia. Ruja występuje u kotek 2-3 razy w roku, a ciąża trwa ok.
60 dni. Zazwyczaj rodzi się od 4-8 młodych.










Oto obraz, który jest połączeniem powrotnym:

Połączenie do<br>strony głównej




Oto obraz, który prowadzi na początek strony:

Na początek<br>strony




Rysunek 6.12 prezentuje nasz nowy element nawigacji w obszarze strony.
Rys. 6.12.
Strona, na której utworzony
został spis treści  kliknięcie
pozycji spisu przeniesie Cię
do odpowiedniego rozdziału
Więcej o obrazach pełniących funkcję
połączeń
Ja wykorzystać ikony do prezentacji obrazów?
Często na stronie umieszcza się ikonę obrazu  obrazek o niewielkich rozmiarach, i konfiguruje ją
jako połączenie prowadzące do zewnętrznego pliku zawierającego obraz. Zmniejsza to rozmiar
strony, skraca czas jej ładowania i daje czytelnikowi swobodę w podejmowaniu decyzji odnośnie
ściągania pliku.
Jeśli chciałbyś skorzystać z tego sposobu, przygotuj miniaturę obrazu i zapisz  rozmiar takiego
pliku jest o jeden rząd wielkości mniejszy od pliku obrazu. Umieść ikonę na stronie i przekształć
ją w połączenie prowadzące do pliku zawierającego obraz w pełnych wymiarach. Można tu
wykorzystać w połączeniu atrybut target znacznika , aby obraz oryginalny był wyświetlany w
nowym oknie. Kod strony przedstawiony jest na wydruku 6.6, a efekt jego działania na rysunku
6.13.
Wydruk 6.6. Stosowanie pomniejszonych obrazów jako połączeń do większych odpowiedników


Koty



Kot w worku






Rys. 6.13.
Ikona jest tu połączeniem
prowadzącym do
zewnętrznego pliku obrazu;
dzięki użyciu atrybutu target
z wartością _blank obraz jest
wyświetlany w nowym oknie
Jak dodać do ikon informacje o wielkości plików?
Do ikon zapraszających użytkownika do ściągnięcia obrazu można dołączyć informację o
wielkości pliku. Ta sama metoda może posłużyć do podłączania także innych plików,
niekoniecznie graficznych.
Wydruk 6.7. Informacja o plikach


Koty



Kot w worku






Rys. 6.14.
Miniatura może zachęcać do
wyświetlenia obrazu;
informacja o rozmiarze pliku
będzie cenna dla tych, którzy
chcą obraz ściągnąć
Co to są mapy odsyłaczy?
Mapy odsyłaczy to obrazy, które pełnią funkcje wielu połączeń jednocześnie. Kliknięcie zwykłego
połączenia  tekstowego czy też w postaci obrazu  prowadzi pod konkretny adres URL z nim
stowarzyszony. W przypadku obrazu zdefiniowanego jako mapa odsyłaczy, adres docelowy
będzie zależny od obszaru obrazu, w którym nastąpiło kliknięcie.
Mapy odsyłaczy działające po stronie klienta stanowią element specyfikacji HTML 3.2. Ze
względu na swoją naturę działają tylko w przeglądarkach graficznych. W tekstowych, na przykład
w przeglądarce Lynx, nie będzie ani obrazu, ani jego funkcji nawigacyjnych. Musisz więc
utworzyć ekwiwalent tekstowy obrazu, dzięki któremu użytkownicy przeglądarek tekstowych nie
stracą dostępu do strony.
Mapy odsyłaczy mogą z powodzeniem być stosowane jako centra nawigacji na stronach
głównych.
Jak przygotować mapę odsyłaczy?
Proces przygotowania mapy odsyłaczy działającej po stronie klienta składa się z następujących
etapów:
1. Wybór obrazu  obraz powinien zawierać odrębne wizualnie obszary, aby
definicje połączeń mogły być jednoznaczne.
2. Przygotowanie definicji mapy:
Naszkicuj obraz i podziel go ręcznie na obszary (obszar może być prostokątem,
wielokątem lub okręgiem).
Wyświetl obraz w oknie programu do obróbki grafiki (np. może być to program Paint
Shop Pro) i zanotuj współrzędne wskaznika myszki w punktach krańcowych obszarów.
W przypadku prostokąta, będą to współrzędne lewego górnego wierzchołka i prawego
dolnego; w przypadku okręgu  współrzędne jego środka i długość promienia. Jeśli
obszar jest wielokątem, zanotuj współrzędne wszystkich wierzchołków.
Przygotuj adresy URL (lub odsyłacze działające w obrębie strony), z którymi
stowarzyszysz poszczególne obszary.
3. Umieszczenie mapy odsyłaczy w dokumencie HTML  służy do tego znacznik
. Jego składnia jest następująca:
współrzędne i adresy
Wartością atrybutu name jest nazwa definicji mapy. Nazwa ta będzie wykorzystywana pózniej w
celu stowarzyszenia obrazu z odpowiadającymi mu współrzędnymi i odwołaniami. Między
znacznikami umieszczane są współrzędne każdego z obszarów mapy odsyłaczy
oraz adresy miejsc docelowych, do których wiodą poszczególne połączenia. Pojawiają się one w
obrębie kolejnego znacznika  . Jego postać może być następująca:
,
lub

Atrybut shape określa kształt obszaru. Jego wartości to "poly" (wielokąt), "rect" (prostokąt)
lub "circle" (okrąg).
Jak wygląda w praktyce proces definiowania mapy odsyłaczy?
Proces przygotowania obrazu jako mapy odsyłaczy jest naprawdę prosty. Spróbujmy prześledzić
go na konkretnym przykładzie.
Zacznijmy od wybrania obrazu zdefiniowaniu obszarów, które będą pełniły rolę łączy. Wybierz
odpowiedni obraz i przygotuj jego szkic na kartce. Może to być na przykład prosta struktura
Twojej witryny. Podziel obraz na reprezentatywne obszary (patrz rysunek 6.16.).
Rys. 6.15.
Orientacyjny podział rysunku
na obszary
Wyświetl obraz w programie umożliwiającym obróbkę grafiki (np. takim jak Paint Shop Pro).
Umieszczaj wskaznik myszki w tych punktach obrazu, które definiują współrzędne obszarów  w
tym przypadku obszary mogą mieć postać okręgów (patrz rysunek 6.15). Gdy przesuniesz kursor
nad środek okręgu, w lewym dolnym rogu okna programu pojawiają się jego współrzędne x i y
(patrz rysunek 6.16)  zanotuj je. Trzeba jeszcze oszacować promień okręgu, a to można zrobić
umieszczając kursor nad krawędzią okręgu  uzyskamy w ten sposób wartość współrzędnej x1.
Różnica x-x1 to promień.
Rys. 6.16.
Rejestracja
współrzędnych
obszarów
mapy
odsyłaczy  w
lewym dolnym
rogu okna
programu
pojawiają się
współrzędne
Czas na umieszczenie definicji mapy odsyłaczy w kodzie dokumentu. Mapa, którą tutaj
preparujemy, świetnie nadaje się na centrum nawigacyjne (musisz ją jednak dopracować pod
względem graficznym). Wstawimy ją wobec tego na pustej stronie, utworzonej w oparciu o
szablon.
Zaczniemy od nagłówka

informującego użytkownika co powinien zrobić, aby uzyskać
określone informacje, a za nim umieścimy obraz, który będzie pełnił rolę mapy odsyłaczy.
Dołącz do znacznika atrybut usemap i przypisz mu jako wartość nazwę mapy
zdefiniowanej za pomocą znacznika  w naszym przykładzie
mapa nosi nazwę strony. Nazwa mapy musi być poprzedzona znakiem # (patrz wydruk 6.8).
Wydruk 6.8. Mapa odsyłaczy

Kliknij interesujący Cię obszar tematyczny:



alt="mapa_witryny" usemap="#mapa_witryny" border="0">

W kolejnych wierszach kodu pojawią się definicje obszarów mapy (patrz wydruk 6.9). Obszary
jak pamiętasz są okręgami (a więc atrybut shape ma wartość  circle ). Wartością atrybutów
href będą połączenia do innych stron witryny wiążących się z danym fragmentem obrazu.
Zamiast odwołań tego typu możesz tu umieścić odnośniki do sekcji danej strony.
Wydruk 6.9. Mapa odsyłaczy  c.d.
&
href="podstawy.html" alt="Informacje podstawowe">
href="Style.html" alt="Style i nie tylko..">
href="Skrypty.html" alt="Trochę skryptów">
href="DHTML.html" alt="Dynamiczny HTML">
&
Zapisz swój plik i przetestuj. Pełny kod html mapy odsyłaczy prezentuje wydruk 6.10. Na
rysunkach 6.17 i 6.18 możesz zobaczyć mapę w działaniu.
Wydruk 6.10. Pełny kod html mapy odsyłaczy


Mapa odsyłaczy



Kliknij interesujący Cię obszar tematyczny:



alt="mapa_witryny" usemap="#mapa_witryny" border="0">

href="podstawy.html" alt="Informacje podstawowe">
href="Style.html" alt="Style i nie tylko..">
href="Skrypty.html" alt="Trochę skryptów">
href="DHTML.html" alt="Dynamiczny HTML">




Rys. 6.17.
Mapa odsyłaczy jest
gotowa do pracy  po
umieszczeniu
wskaznika myszki nad
obszarem aktywnym,
forma wskaznika
zmienia się w typową
dla połączeń
Rys. 6.18.
Po kliknięciu, w oknie
wyświetlony został
dokument, do którego
prowadziło połączenie
stowarzyszone z
obszarem aktywnym
Połączenia do archiwów FTP
Czasami można spotkać w Internecie strony, na których autorzy oferują własne programy lub pliki
mp3. Jeśli chciałbyś na swojej stronie umieścić połączenie do takiego archiwum, zrób to tak (patrz
wydruk 6.11):
Wydruk 6.11. Połączenie prowadzące do archiwum FTP


FTP



Archiwum FTP


Jeśli interesują Cię moje pliki,
idz do
mojego archiwum FTP!




Rysunek 6.19 pokazuje efekt działania kodu.
Rys. 6.19.
To połączenie prowadzi do
archiwum FTP
Najważniejsze informacje
Uniform Resource Locator (URL) to adres dokumentu (lub innych zasobów) w sieci
WWW.
Ogólna postać adresu WWW, na przykład:
http://www.mojastrona.com/html/strona.htm spełnia następujące reguły
składni: protokół://host.domena:port/ścieżka/nazwa_pliku
Połączenia lokalne  a więc z dokumentu do dokumentu tej samej witryny  nie
wymagają wprowadzania całego adresu URL. Wystarczy określić położenie pliku
względem dokumentu bieżącego lub względem katalogu głównego witryny.
Adres bezwzględny to pełny adres URL, wraz z nazwą protokołu.
Adresy względne mogą być zdefiniowane względem dokumentu
(np.katalog/katalog.html) lub względem foldera głównego (np.
/katalog/katalog.html).
Adresy zdefiniowane względem dokumentu to najlepsze rozwiązanie dla prezentacji
lokalnych.
W przypadku gdy adresy względne są definiowane względem foldera nadrzędnego, adres
pliku to ścieżka dostępu od foldera nadrzędnego witryny do dokumentu.
Połączenie to narzędzie nawigacji, które możesz wbudować w swoje strony, aby
umożliwić czytelnikom przemieszczanie się do innych miejsc na tej samej stronie, do
innych stron w obrębie prezentacji lub do zupełnie obcych, lecz ciekawych stron w sieci.
Funkcję połączenia może pełnić wyraz, fraza, a nawet obraz.
Znacznik HTML, za pomocą którego tworzone jest połączenie nosi nazwę znacznika
zakotwiczenia i ma taką postać: Tekst
połączenia
. Wartością atrybutu href jest adres URL.
Połączenie e-mail umożliwia czytelnikowi przesłanie listu e-mail do autora strony.
Składnia jest tutaj następująca: Tekst
Witryna to zestaw kilku stron powiązanych ze sobą połączeniami. Jedna ze stron pełni
rolę centralną  jest to tak zwana strona główna lub domowa. Zazwyczaj strona główna
zawiera informacje ogólne, które rozwijane są na stronach podrzędnych.
Połączenia są definiowane przy pomocy elementu a. Składnia wyrażenia jest
następująca: Tekst połączenia.
Wartościami atrybutu href są nazwy poszczególnych plików html, do których wiodą
połączenia.
Połączenia do stron WWW znajdujących się na innych serwerach definiuje się
korzystając z tego samego elementu a, lecz adres url, musi być w tym przypadku
bezwzględny.
Nie tylko tekst może zostać przekształcony w połączenie. Równie dobrze nadają się do
tego celu obrazy. Element a obejmuje w takim przypadku znacznik a nie tekst.
Składnia wyrażenia przekształcającego obraz w połączenie jest podobna jak w
przypadku tekstu: alt= tekst_alternatywny>.
Odnośniki  zakotwiczenia o zdefiniowanych nazwach  tworzy się przy użyciu tego
samego znacznika , który służy do tworzenia połączeń. Zamiast atrybutu href
stosowany jest tu atrybut name. Atrybut ten zawiera słowa kluczowe, które będą
stanowiły nazwę odnośnika:
tekst.
Żeby skierować połączenie na wybrany odnośnik, należy utworzyć  zwykłe połączenie,
z tym że wartością atrybutu href jest w tym przypadku nazwa odnośnika poprzedzona
znakiem #: inny tekst.
Mapy odsyłaczy to obrazy, które pełnią funkcje wielu połączeń jednocześnie. W
przypadku obrazu zdefiniowanego jako mapa odsyłaczy, adres docelowy będzie zależny
od obszaru obrazu, w którym nastąpiło kliknięcie.


Wyszukiwarka

Podobne podstrony:
r06 04 qla3mfniflkmarunvvl5sj4owxh65d7c7ekfkoy
r06
r06 0001
r06 01
R06 (7)

więcej podobnych podstron