Linki HTML do podstron
Kolejnym rodzajem linków wewnętrznych są linki do kolejnych podstron danej domeny. Jak tworzymy ten rodzaj linków? Tu jest sprawa trochę bardziej skomplikowana. Pamiętacie pewnie jeszcze, że strona internetowa jest plikiem html. Linki do podstron są to tak na prawdę ścieżki dostępu do plików html z tymi stronami. Zanim zaczniemy tworzyć te linki musimy stworzyć strukturę plików i folderów naszej strony na komputerze. A więc do dzieła.
Stwórzmy folder o nazwie strona i umieśćmy tam nasz plik ze stroną o nazwie index.html. Żebyśmy mieli do czego się odwoływać musimy stworzyć co najmniej jeszcze jedną stronę. Do folderu o nazwie strona dodajmy folder o nazwie kontakt i umieśćmy tam również plik o nazwie index.html. Dobrą praktyką jest dodawanie nazw strony nie do samych plików html, a do folderów, w których będziemy je lokalizować. W jednym folderze powinien znajdować się jeden plik o nazwie index.html.
Nasza strona główna powinna znajdować się w głównym folderze, czyli w tym przypadku będzie to folder o nazwie strona. Zobaczmy teraz jak sformatować wartość atrybutu href, aby link ze strony głównej zabrał nas do podstrony kontakt.
<a href="kontakt/index.html">Kontakt</a>
Jeśli ze strony głównej (głównego folderu) chcemy przejść do podstrony kontakt, musimy najpierw dostać się do folderu zawierającego tą stronę, a następnie wskazać plik z tą stroną, czyli index.html. Do kolejnych podfolderów wchodzimy poprzez zastosowanie forward slash’a /.
Teraz jak dostać się z powrotem do strony głównej z podstrony kontakt. Na podstronie kontakt musimy dodać następujący link.
<a href="../index.html">Strona Główna</a>
Pojawił nam się nowy zapis. Co on oznacza? Przechodzenie o jeden poziom wyżej w hierarchii zapisywane jest przy użyciu kombinacji znaków ../ zastosowanej na początku wyrażenia.
Jednak widzimy, że jak przechodzimy ze strony do strony to mamy tylko jeden link bo ten drugi nam znika. Tak zazwyczaj nie chcemy, żeby się działo, dlatego link strony do samej siebie zapisujemy jako pusty, używając w tym celu znaku krzyżyka #.
Zapis linków na stronie głównej.
<a href="#">Strona Główna</a> <a href="kontakt/index.html">Kontakt</a>
Zapis linków na podstronie kontakt.
<a href="../index.html">Strona Główna</a> <a href="#">Kontakt</a>
Można powiedzieć, że skonstruowaliśmy proste menu. Jednak z poprzedniej lekcji wiemy, że lepiej by było, gdybyśmy zawarli poszczególne linki w nieuporządkowanej liście. I właśnie pod koniec lekcji się tym zajmiemy.