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ć?
- Odnośniki bezwględne używaj tylko do łączenia się ze stronami zewnętrznymi.
- 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
- W katalogu tego ćwiczenia zapisz plik
plik_docelowy.html, który wbodybędzie tylko zawierał napisTo jest plik docelowy otwierany odsyłaczem - Wykonaj stronę, w której umieścisz link do tego pliku, tak aby był otwierany w nowej karcie przeglądarki
- 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:
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:
Link do pliku znajdującego się kilka poziomow niżej - ćwiczenie 2_4_3_2
- Przekopiuj do folderu ćwiczenia plik_docelowy.html z poprzedniego ćwiczenia.
- 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.
- plik_docelowy.html przenieś do katalogu k4.
- 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:
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
- Przekopiuj do folderu ćwiczenia plik_docelowy.html z poprzedniego ćwiczenia.
- 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.
- plik_docelowy.html przenieś do katalogu k1.
- 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:
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
- Przekopiuj do folderu ćwiczenia plik_docelowy.html z poprzedniego ćwiczenia.
- 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.
- plik_docelowy.html przenieś do katalogu k4.
- 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:
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.