Menu
Pamiętacie menu, które tworzyliśmy na lekcji poprzedniej (Tworzenie List)? Zapisaliśmy strukturę menu używając w tym celu listy nieuporządkowanej <ul>. Jednak brakowało nam interaktywności, czyli właśnie linków. Przypomnijmy sobie jego strukturę, a następnie uzupełnimy nasze menu o linki.
<ul>
<li>Kurs Html
<ul>
<li>Html, Head, Body</li>
<li>Edytor Kodu</li>
<li>Nagłówek i Paragraf</li>
</ul>
</li>
<ul>
- Kurs Html
- Html, Head, Body
- Edytor Kodu
- Nagłówek i Paragraf
Menu jak widzimy jest dwupoziomowe, ale chyba już to nam żadnej trudności nie sprawia po poprzedniej lekcji. Jest ono już prawie gotowe, wystarczy jedynie dodać do niego linki. A więc do dzieła.
W tym przykładzie kurs html, będzie linkiem do tej samej strony, czyli pustym. Przypuśćmy, że nasze poszczególne lekcje znajdują się w folderach o nazwach kolejno:
- Html, Head, Body – lekcja1
- Edytor Kodu – lekcja2
- Nagłówek i Paragrafy – lekcja3
A wszystkie pliki będą nazywać się jednakowo index.html.
<ul>
<li><a href="#">Kurs Html</a>
<ul>
<li><a href="lekcja1/index.html">Html, Head, Body</a></li>
<li><a href="lekcja2/index.html">Edytor Kodu</a></li>
<li><a href="lekcja3/index.html">Nagłówek i Paragraf</a></li>
</ul>
</li>
<ul>
Wystarczy jeszcze, żebyśmy już we własnym zakresie stworzyli te pliki i umieścili je w powyższych folderach i już menu będzie sprawne i funkcjonalne. Musicie jednak pamiętać, że jeśli umieścicie ten sam kod menu na każdej stronie to niekoniecznie, a raczej na pewno nie będzie działać tak jak byście tego chcieli. Przechodząc na kolejną lekcje, nie będziemy już w folderze głównym, a w podfolderze, gdzie znajduje się dana lekcja. Najpierw musimy wyjść z podfolderu, żeby przejść na inną lekcję. Zapis znacznikowy menu na lekcji 1-szej będzie wyglądał następująco.
<ul>
<li><a href="../index.html">Kurs Html</a>
<ul>
<li><a href="#">Html, Head, Body</a></li>
<li><a href="../lekcja2/index.html">Edytor Kodu</a></li>
<li><a href="../lekcja3/index.html">Nagłówek i Paragraf</a></li>
</ul>
</li>
<ul>