W tej lekcji podejmiemy kilka tematów, a mianowicie: odsyłącze (linki,hiperłącza) oraz osadzanie obrazów na stronie.
Dlaczego dwa tematy na raz? Po pierwsze każdy z nich z osobna byłby za krótki na jedną lekcję, a po drugie tematy te jak zauważymy w trakcie lekcji zazębiają się i dlatego logiczne wydało mi się omówienie ich razem.
Linki
<a>...</a> - znacznik służący do stawiania odnośników na stonę
<a href="http://onet.pl" title="strona Onetu">Onet.pl</a> - podstawowa forma wstawiania linku zewnętrznego na stronę. Parametr href określa adres docelowy, ale także protokół transmisji danych. Umożliwia nam to używanie znacznika a z parametrem href nie tylko do podlinkowania innej strony. Możemy tu użyć protokołu ftp lub mailto (uruchomi się program pocztowy do wysłania maila na podany adres):
<a href="mailto:Ten adres pocztowy jest chroniony przed spamowaniem. Aby go zobaczyć, konieczne jest włączenie w przeglądarce obsługi JavaScript.">Ten adres pocztowy jest chroniony przed spamowaniem. Aby go zobaczyć, konieczne jest włączenie w przeglądarce obsługi JavaScript.</a>
Odnośników używamy również w sytuacji, gdy nasz serwis internetowy posiada kilka(-naście, -dziesiąt, -set) podstron. Tworzymy wtedy menu:
<a href="/strona1.html">Podstrona 1</a>
<a href="/strona2.html">Podstrona 2</a>
<a href="/strona3.html">Podstrona 3</a>
Kolejnym zastosowaniem odnośników jest linkowanie wewnątrz jednej strony. Wyobraźmy sobie sytuacje, gdy nasza strona jest bardzo długa, zawiera dużo treści podzielonej na rozdziały. Czytelnik, który wszedł na naszą stronę chciał przeczytać jeden konkretny rozdział a nie wszystko co tu umieściliśmy. Wtedy na górze strony warto umieścić menu, które będzie wskazywało wszystkie rozdziały i jednym kliknięciem można szybko przeskoczyć do interesującej treści, zamiast przeszukiwać całą stronę. Aby to zrobić należy podać przy każdym rozdziale identyfikator i dopiero do niego wstawić linka:
<h2 id="rozdzial5">To jest rozdział 5</h2>
<a href="#rozdzial5">Idź do rozdziału 5</a>
Obrazki
<img /> - znacznik służący do wyświetlania obrazów. Jak wspominałem w pierwszych lekcjach, znacznik ten nie posiada zamknięcia, więc w XHTML musimy go domykać sami
<img src="/images/obraz1.jpg" /> - najprostsza forma wklejenia obrazu na stronę.
Znacznik img warto uzupełnić o kilka parametrów:
alt="tekst alternatywny" - słowny opis obrazka pojawiający się gdy z jakiegoś powodu obrazek nie będzie możliwy do wyświetlenia
width="x" - szerokość obrazka w pikselach
height="y" - wysokość obrazka w pikselach
Oba te parametry są opcjonalne. Bez nich obrazek będzie wyświetlany w normalnej wielkości. Gdy podamy jeden z nich, obrazek zostanie przeskalowany proporcjonalnie.
Ponieważ na początku lekcji napisałem, że wszystkie omawiane tu tematy się zazębiają, to teraz pokaże pierwszy przykład, że tak rzeczywiście jest. Możemy umieścić na stronie link nie tylko w postaci tekstu, ale także w postaci grafiki:
<a href="http://onet.pl"><img src="http://ocdn.eu/images/pulscms/NDM7MDA_/b5c5fb9cdc2e52baabb3b537ab25ad67.png"></a>
Mamy tu linka do strony Onetu, gdzie zamiast słowa kluczowego mamy obrazek. Tu wykorzystałem adres loga Onetu zamieszczonego na ich stronie. Mógłbym go skopiować na własny serwer, ale można również używać grafik z innych zasobów niż własne foldery.
