Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Adresy względne i bezwzględne

Podczas tworzenia odsyłaczy stosowaliśmy atrybut href="", który zawierał adres pliku. Struktura katalogów witryny bywa nieraz bardzo skomplikowana i wielopoziomowa. Musimy bowiem uporządkować setki a nawet tysiące różnych plików. Utworzony przez nas plik nazwijmy go pierwszy.html znajdzie się również w tej strukturze i jeżeli chcemy w nim umieścić link do pliku drugi.html, znajdującego się w innym miejscu struktury katalogów, to musimy umieć się po tej strukturze poruszać. Jeżeli spojrzymy na drugi.html z miejsca lokalizacji pliku pierwszy.html, to możemy określić adres względny. Jest to ścieżka, którą należałoby "przejść" aby wychodząc z katalogu pliku pierwszy.html, dojść do pliku drugi.html. Jeżeli oba pliki znajdują się w tym samym katalogu, to "widzą się" wzajemnie i po żadnych innych katalogach nie trzeba łazić. Wtedy w adresie względnym pliku drugi.html napiszemy tylko jego nazwę. Jeżeli natomiast drugi.html znajduje się w innym katalogu to ścieżka do niego może być skomplikowana. Jest także inny sposób adresowania zwany bezwzględnym. Adres bezwzględny widzisz w pasku adresu przeglądarki. W przypadku strony, którą w tej chwili oglądasz ten adres to http://www.teacher.webd.pl/kurs_html5/k_2_4_3.php. Jakie więc adresy stosować?

  1. Odnośniki bezwględne używaj tylko do łączenia się ze stronami zewnętrznymi.
  2. W dokumentach wewnątrz witryny należy stosować adresowanie względne. Co będzie, gdy będziesz chciał przenieść swój serwis na inny serwer a stosowałeś adresy bezwzględne? Współczuję - będziesz musiał je wszystkie pozmieniać.

Na tych zajęciach, zajmiemy się adresowaniem względnym, bo głównie takie będziesz stosował.

Link do pliku znajdującego się w tym samym katalogu - ćwiczenie 2_4_3_1

  1. W katalogu tego ćwiczenia zapisz plik plik_docelowy.html, który w body będzie tylko zawierał napis To jest plik docelowy otwierany odsyłaczem
  2. Wykonaj stronę, w której umieścisz link do tego pliku, tak aby był otwierany w nowej karcie przeglądarki
  3. Oba pliki mają się znajdować w katalogu tego ćwiczenia.

Kod potrzebny do wykonania zadania: <a href="plik_docelowy.html" target="_blank">Otwórz na nowej zakładce plik docelowy</a>. Układ plików i folderów ma być następujący:

Rysunek 2_4_3_1_a. Plik docelowy znajduje się w tym samym katalogu - zrzut ekranu

Zadanie będzie wykonane poprawnie, jeżeli otworzysz stronę cwicz_2_4_3_1.html i po kliknięciu utworzonego tam linku, na nowej karcie przeglądarki zostanie pokazany plik_docelowy.html.

W tym ćwiczeniu układ plików i folderów został pokazany na zrzucie ekranu, w następnych przykładach będzie pokazany tylko na schemacie, przy czym dokument w którym umieszczamy link będzie nazywany A, natomiast plik_docelowy.html - B. Ty jednak zawsze stosuj nazewnictwo zgodne z numeracją ćwiczenia, tak jak to zostało pokazane na powyższym zrzucie ekranu. Dla tego ćwiczenia, taki schemat będzie następujący:

Rysunek 2_4_3_1_b. Plik docelowy znajduje się w tym samym katalogu k1 - schemat

Link do pliku znajdującego się kilka poziomow niżej - ćwiczenie 2_4_3_2

  1. Przekopiuj do folderu ćwiczenia plik_docelowy.html z poprzedniego ćwiczenia.
  2. Utwórz w folderze ćwiczenia strukturę katalogów k1\k2\k3\k4 - utwórz katalog k1, w nim katalog k2, w nim katalog k3 a w nim katalog k4.
  3. plik_docelowy.html przenieś do katalogu k4.
  4. W folderze k1 uwórz stronę z linkiem do pliku plik_docelowy.html.

Kod potrzebny do wykonania zadania: <a href="k2/k3/k4/plik_docelowy.html" target="_blank">Otwórz na nowej zakładce plik docelowy</a>. Układ plików i folderów ma być następujący:

Rysunek 2_4_3_2. Plik docelowy znajduje się kilka poziomów niżej

Zadanie będzie wykonane poprawnie, jeżeli otworzysz stronę cwicz_2_4_3_2.html i po kliknięciu utworzonego tam linku, na nowej karcie przeglądarki zostanie pokazany plik_docelowy.html.

Link do pliku znajdującego się kilka poziomow wyżej - ćwiczenie 2_4_3_3

  1. Przekopiuj do folderu ćwiczenia plik_docelowy.html z poprzedniego ćwiczenia.
  2. Utwórz w folderze ćwiczenia strukturę katalogów k1\k2\k3\k4 - utwórz katalog k1, w nim katalog k2, w nim katalog k3 a w nim katalog k4.
  3. plik_docelowy.html przenieś do katalogu k1.
  4. W folderze k4 uwórz stronę z linkiem do pliku plik_docelowy.html.

Kod potrzebny do wykonania zadania: <a href="../../../plik_docelowy.html" target="_blank">Otwórz na nowej zakładce plik docelowy</a>. Układ plików i folderów ma być następujący:

Rysunek 2_4_3_3. Plik docelowy znajduje się kilka poziomów wyżej

Zwróć uwagę na fragment ścieżki ../. Oznacza on poziom w górę. W naszym ćwiczeniu musimy przejść trzy poziomy w górę aby się dostać do katalogu k1. Zadanie będzie wykonane poprawnie, jeżeli otworzysz stronę cwicz_2_4_3_3.html i po kliknięciu utworzonego tam linku, na nowej karcie przeglądarki zostanie pokazany plik_docelowy.html.

Link do pliku znajdującego się na innej gałęzi drzewa katalogów - ćwiczenie 2_4_3_4

  1. Przekopiuj do folderu ćwiczenia plik_docelowy.html z poprzedniego ćwiczenia.
  2. Utwórz w folderze ćwiczenia struktury katalogów k1\k2\ oraz k3\k4 - utwórz katalog k1, w nim katalog k2, oraz katalog k3 a w nim katalog k4.
  3. plik_docelowy.html przenieś do katalogu k4.
  4. W folderze k2 uwórz stronę z linkiem do pliku plik_docelowy.html.

Kod potrzebny do wykonania zadania: <a href="../../k3/k4/plik_docelowy.html" target="_blank">Otwórz na nowej zakładce plik docelowy</a>. Układ plików i folderów ma być następujący:

Rysunek 2_4_3_4. Plik docelowy znajduje się na innej gałęzi drzewa folderów

Zwróć uwagę na fragment ścieżki ../. Oznacza on poziom w górę. W naszym ćwiczeniu musimy najpierw przejść dwa poziomy w górę aby zejść z gałęzi k1/k2 a następnie się dostać do katalogu k4. Zadanie będzie wykonane poprawnie, jeżeli otworzysz stronę cwicz_2_4_3_4.html i po kliknięciu utworzonego tam linku, na nowej karcie przeglądarki zostanie pokazany plik_docelowy.html.

Ukośnik / czy \

Jak na pewno zauważyłeś, piszemy raz jeden raz drugi - kiedy jaki stosować?
  • W kodzie HTML zawsze stosuj / (slash, prawy ukośnik) - w oprogramowaniu stosowanym na serwerach taki ukosnik jest stosowany.
  • Ukośnik \ (backslash, lewy, wsteczny) - jest stosowany w Windowsach, więc kiedy piszemy o strukturze katalogów na dysku i mamy Windowsa, to wtedy go stosujemy.

Praca domowa

Wykonaj ponownie ćwiczenia z zajęć.


Jeżeli nie jesteś pewny, jak wykonane zadania zapisać na pendriwie, to zajrzyj do pierwszego ćwiczenia, w którym zostało to dokładnie wytłumaczone.