HTML
HTML: obrazki i odnośniki
Potrafimy już tworzyć złożone strony WWW. Ciągle
CZEGO SIĘ DOWIESZ Z TEGO ARTYKUŁU:
jednak brak na nich grafiki i odnośników, bez których
nauczysz się tworzyć obrazki i odnoS
niki na
nie można stworzyć nawigacji, ani odesłać czytelnika stronach internetowych
do zasobów znajdujących się w internecie. Strona
WYMAGANA WIEDZA:
bez odnośników jest bardzo uboga. W tej części kur-
podstawowa umiejętnoS
ć posługiwania się
su zajmiemy się tym tematem.
komputerem oraz systemem Windows
materiał zawarty w poprzedniej częS
ci kursu
(MI 5/06)
Marcin Staniszczak
Format adresu URL powyżej katalogu bieżącego, przejścia w górę dokonuje się za pomocą  ../ .
Zanim zajmiemy się obrazkami i odnośnikami, musimy zapoznać się ze spo- W przypadku ścieżek względnych nie określa się typu protokołu (http) oraz
sobem budowania adresów internetowych. adresu serwera  protokół przyjmowany jest domyślnie na http, adres
Wpisując w przeglądarce adres strony internetowej, informujemy serwera jest zaś taki sam, jak strony aktualnie oglądanej.
przeglądarkę z jakim serwerem ma się połączyć oraz o jaki plik poprosić. Aby upewnić się czy na pewno wiemy w jaki sposób tworzy się adresy
Adres taki nazywa się w skrócie URL (Uniform Resource Locator) i zbudo- względne oraz bezwzględne, spójrzmy na rysunki 4 oraz 5 i wykonajmy znajdują-
wany jest według wzoru przedstawionego na rys. 1. ce się na nich polecenia. Na ostatniej stronie artykułu są odpowiedzi do zadań.
Wzór rozpoczyna się od określenia typu protokołu  w przypadku stron in-
ternetowych protokół to http (Hypertext Transfer Protocol  protokół okre- Obrazki
ślający sposób komunikacji przeglądarki internetowej z serwerem HTTP do- Do umieszczania obrazków na stronach internetowych służy znacznik
starczającym przeglądarce stron, które ma ona wyświetlić). Następnie po- . Przyjmuje on wiele parametrów, z których najważniejsze to:
dawany jest adres serwera internetowego (np. www.mi.com.pl), po którym src  adres URL wskazujący na obrazek, który ma zostać wyświetlo-
znajduje się ścieżka określająca położenie żądanego pliku na serwerze. ny przez przeglądarkę w miejscu znacznika,
Trzeba pamiętać, że ścieżka dostępu do plików podawana jest w stosunku alt  tekst alternatywny  wyświetla się, gdy przeglądarka z jakiegoś
do głównego serwera HTTP  na serwerach uniksowych nazywa się on za- powodu nie może wyświetlić obrazka,
zwyczaj public_html i jest umieszczony w katalogu domowym użytkownika (nie height  wysokość obrazka wyrażona w pikselach,
trzeba znać dokładnego położenia swojego katalogu domowego)  rys. 2. width  szerokość obrazka wyrażona w pikselach.
Adresy, które poznaliśmy do tej pory, to tak zwane adresy bezwzględne. Istnieje jeszcze kilka innych atrybutów, z którymi możemy się spotkać
Określają one dokładny adres położenia pliku na konkretnym serwerze. w wielu kursach w internecie, jednak są one już przestarzałe i nie powinny
Często jednak wygodniej korzystać z adresów względnych, które określają być stosowane.
położenie plików na bieżącym serwerze. Należy pamiętać o tym, że adresy Znacznik nie ma formy zamykającej, więc zgodnie z wymoga-
względne określają położenie pliku względem aktualnie oglądanej strony mi XHTML-a musi być zapisywany w podobnej postaci jak tag
. Oto
(rys. 3). Jeśli plik, do którego chcemy się odwołać znajduje się w katalogu przykład umieszczenia obrazka na stronie:
Wzór, według którego tworzy się adresy URL Względne ścieżki do plików na serwerze
1 3
Budowanie ścieżek do pliku znajdującego się na serwerze
2
Utwórz adresy bezwzględne
4
INTERNET.czerwiec.2006
92
www.mi.com.pl
WEBMASTERING
Utwórz adresy względne Tło na stronie internetowej
5 7
Odnośniki w postaci tekstu oraz obrazka
Obrazek otoczony tekstem
8
6
Menu a listy
Rozwiązania zadań z rys. 4 i 5 są na stronie 101.
W dobie XHTML-a menu umieszczane na
stronach internetowych powinny być połą-
), tabel czy po-
czeniem list, odnoS
ników oraz stylów. Me-
width= 800 height= 600 /> szczególnych komórek tabel.
nu na pewno nie jest tabelą, nie jest też
Obrazek z powyższego przykładu znajduje się w tym samym katalogu, co
akapitem, wydaje się być jednak swojego
wyświetlający go plik HTML. Jeśli obrazek znajdowałby się na innym serwe- OdnoS
niki
rodzaju listą, czy to opcji, czy podstron.
rze, należy podać pełny adres URL: Odnośniki są jednymi z najistotniej-
Ponieważ tworzenie menu w postaci listy
alt= Zdjęcie komputera width= 800 height= 600 /> ternetowej, bez których niemożliwa w dużej mierze zależne od stylów), zachę-
cam do odwiedzenia stron http://css.
Tak jak w przypadku innych znaczników, także ten może być formatowa- byłaby nawigacja po własnej stro-
maxdesign.com.au/listamatic/ oraz
ny za pomocą stylów. Poniżej jest przykład obrazka, który ma zostać oto- nie, jak również odwołania do stron
http://css.maxdesign.com.au/listamatic2/
czony tekstem oraz pustym odstępem o szerokości 8 pt: zewnętrznych. Na szczęście prawie
index.htm. Znajduje się tam wiele przykła-
dów menu, które warto przeanalizować.
style= float: left; padding: 8pt /> rem wielu odnośników (inaczej zwa-
Przykład działania takiego znacznika znajduje się na rys. 6. nych linkami). Do tworzenia odnoś-
Należy także pamiętać, że obrazki używane na stronach internetowych ników służy znacznik ...:
powinny być zapisane w jednym z następujących formatów: Magazyn INTERNET
GIF (rozszerzenie .gif)  do zapisywania obrazków nienaturalnych, Adres strony, do której prowadzi odnośnik, podany jest w parametrze href.
stworzonych przez człowieka (np. elementy wyglądu strony  ramki, Większość odnośników z jakimi spotykamy się w internecie ma właśnie taką
tła itd.); pozwala na zapisanie obrazka maksymalnie w 256 kolorach, postać. Teoretycznie w adresie można pominąć określenie protokołu, wówczas
JPEG (rozszerzenia .jpg lub .jpeg)  do zapisywania wszelkiego rodza- zostanie on domyślnie ustawiony na HTTP, jednak dobrą praktyką jest podawa-
ju zdjęć; stosuje pełną gamę kolorów, wykorzystując przy tym kom- nie go (oczywiście za wyjątkiem sytuacji, w której stosujemy adresy względne).
presję stratną (im mniejszy skompresowany obrazek  czyli im moc- Poza parametrem href znacznik ... przyjmuje wiele innych pa-
niej skompresowany  tym gorsza jego jakość, za to zostanie szybciej rametrów. Z większością z nich zapoznamy się w kolejnych częściach kursu.
przesłany do przeglądarki), Na rys. 8 odnośnik przyjmuje postać napisu (Magazyn INTERNET). Aby
PNG (rozszerzenie .png)  stosuje kompresję bezstratną, pozwala dobrze utworzyć odnośnik w postaci obrazka, wystarczy, że zamiast napisu mię-
zapisać zarówno obrazki stworzone przez człowieka, jak i zdjęcia (niestety dzy znaczniki i wstawimy znacznik :
nie wszystkie przeglądarki w pełni radzą sobie z tym formatem). Obrazki mogą być także stosowane jako tło innych elementów strony. alt= Magazyn INTERNET />
W tym celu musimy skorzystać ze stylów. Oto przykład: aby umieścić tło dla Rys. 8 demonstruje obie postaci odnośników. W lewym dolnym rogu znaj-
całej strony, można w znaczniku body dodać następującą definicję opisującą tło: duje się wycinek tej samej strony w Internet Explorerze. Dookoła obrazka wi-
dać brzydką ramkę. Można ją wyeliminować korzystając ze stylów:
Styl background-image przyjmuje jako parametr adres URL, który powi- nien być umieszczony wewnątrz funkcji URL(). Rys. 7 przedstawia stronę in- alt= Magazyn INTERNET style= border: none />
ternetową z tłem w postaci obrazka. Tło można również zastosować do kon-
(dokończenie na str. 101)
Chcesz wiedzieć więcej? Odwiedz
nasze forum:
INTERNET.czerwiec.2006
http://forum.mi.com.pl 93
www.mi.com.pl
Inne odnoS
niki
HTML: obrazki i odnośniki Nie zdołaliśmy opisać wszystkich rodzajów odnośników. Część z nich po-
znamy wraz z nowymi elementami HTML-a. Na zakończenie jednak chciał-
(dokończenie ze str. 93)
bym zwrócić uwagę na kilka spraw:
Tworząc tak zwany layout (wygląd) strony nie należy stosować tabel.
Styl border określa sposób obramowania, wartość none natomiast wy- Do tego celu należy wykorzystywać kontenery, akapity i inne znaczniki
łącza obramowanie wokół danego elementu (w tym wypadku obrazka). w połączeniu ze stylami (wielu elementom HTML-a można za pomocą
stylów nadać obrazkowe tło).
OdnoS
niki wewnątrz jednego dokumentu Projektując menu korzystajmy z list oraz odnośników.
Poza odnośnikami prowadzącymi czytelnika pomiędzy wieloma stronami inter- Zawsze stosujmy parametr alt w tagu  wymaga to nie-
netowymi, istnieją także odnośniki operujące w ramach jednej strony. Pozwala- wiele większego nakładu pracy, a znacznie polepsza odbiór strony
ją one na szybkie poruszanie się po elementach danej strony. Takie odnośniki są przez użytkowników, którzy korzystają z tekstowych przeglądarek lub
także bardzo przydatne dla twórców innych stron  mogą oni odsyłać swoich w przeglądarce graficznej mają wyłączone pobieranie obrazków.
czytelników bezpośrednio do konkretnego elementu naszej strony, eliminując
konieczność poszukiwania treści, do której zostali odesłani. Warto więc usta-
wiać tak zwane kotwice w pobliżu nagłówków umieszczonych na stronie.
Kotwice tworzy się za pomocą tego samego znacznika co odnośniki, lecz
nie używa się w nich parametru href, zamiast tego w parametrze name
podaje się nazwę odnośnika. Dodatkowo kotwica jest krótką wersją znacz-
nika ..., nie ma więc znacznika zamykającego:

Po rozmieszczeniu kotwic na stronie możemy stworzyć odnośniki prze-
noszące do miejsc, na które wskazują kotwice:
Odnośniki
Nazwę kotwicy w odnośniku należy poprzedzić znakiem #. Taki odnośnik
przenosi do kotwicy znajdującej się w tym samym pliku HTML co on. Moż-
na jednak przenieść do kotwicy znajdującej się na innej stronie:
Odnośniki
Nazwę kotwicy należy podawać po całym adresie URL, kierującym do
strony, na której kotwica została zamieszczona.
) obrazki/bananowe.jpg
c
b) przepisy/ciasta/owocowe/jablecznik.html
przepisy/ciasta/mazurki/mazurek.html
3. a)
) ../../../obrazki/mazurek.jpg
c
a) mazurek.html; b) ../owocowe/bananowe.html;
2.
1. a) ../../../index.html; b) bananowe.html
ys. 5:
R
e) http://www.mojastrona.pl/obrazki/mazurek_orzechowy.jpg
d) http://www.mojastrona.pl/obrazki/bananowe.jpg
c) http://www.mojastrona.pl/przepisy/ciasta/owocowe/bananowe.html
b) http://www.mojastrona.pl/przepisy/ciasta/mazurki/index.html
a) http://www.mojastrona.pl/index.html
Rys. 4:
Rozwiązania zadań z rys. 4 i 5