Nagłówki i linki

Wstęp

Jak już się na pewno domyślasz po tytule tej lekcji, tym razem zajmiemy się nagłówkami oraz linkami. Omówimy kilka dostępnych wielkości nagłówków oraz dodatkowe elementy pozwalające wprowadzić strukturę na stronie. Pokażemy Ci również kilka rodzajów linków, będą to linki do zewnętrznych stron, naszych podstron oraz konkretnego fragmentu aktualnej strony.

Nie ma sensu przedłużać wstępu, przejdźmy więc do konkretów.

Nagłówki

Z jednym elementem definiującym nagłówek miałeś się już okazję spotkać w tym kursie. Był to elementh1, a przykład jego użycia znajduje się poniżej.

Uruchom przykład

Oprócz nagłówkah1mamy jeszcze do dyspozycjih2,h3,h4,h5ih6. Jak widzisz w każdym z nich znajduje się inna liczba, służy ona do określenia wielkości oraz ważności nagłówka.h1jest największy, ah6najmniejszy.

Poniżej znajduje się przykład pokazujący wielkość każdego z nagłówków.

Uruchom przykład

Elementyh5ih6są dość rzadko używane, ponieważ tekst przez nie wyświetlany jest domyślnie mniejszy niż tekst wyświetlany przez elementp. Wielkość tekstu każdego z nagłówków można zmienić, ale tym zajmiemy się dopiero pod koniec kursu.

Zadanie 1

Dodaj największy możliwy nagłówek z tekstem “Duży nagłówek” oraz najmniejszy nagłówek z tekstem “Mały nagłówek”.

Rozwiąż zadanie

Pozioma linia

Elementyh1doh6są używane do nadania pewnej struktury dokumentom HTML, kolejnym elementem, który nam to umożliwia jest<hr>, czyli pozioma linia. Skróthr_pochodzi od_horizontal rule, a to możemy tłumaczyć na język polski właśnie jakolinia pozioma.

Uruchom poniższy przykład, aby zobaczyć jak wygląda taka linia.

Uruchom przykład

Zwróć uwagę na to, że taguhrnie trzeba zamykać, jest to sytuacja analogiczna do użycia elementubr.

Zadanie 2

Dodaj poziomą linię rozdzielającą dwa akapity widoczne na stronie.

Rozwiąż zadanie

Linki

Korzystasz w tej chwili z internetu, więc pewnie wiesz czym są linki, jednak zaczniemy tą część lekcji od wyjaśnienia tego pojęcia. Link, nazywany również odnośnikiem, odsyłaczem lub bardziej formalnie hiperłączem, to element umieszczony w dokumencie elektronicznym, np. na stronie www, który odwołuje się do innego dokumentu lub innego miejsca w tym samym dokumencie. Linkiem jest najczęściej krótki tekst lub obrazek, po jego kliknięciu następuje przekierowanie, czyli otwarcie strony, do której odwołuje się hiperłącze.

Używając internetu na pewno wiele razy korzystałeś już z linków, stwórzmy więc i nasze linki. Aby to zrobić należy użyć elementua, pomiędzy tagiem otwierającym, a zamykającym należy umieścić zawartość, która ma stać się linkiem. Najczęściej jest to po prostu tekst. Nazwaa_to skrót od_anchor, czyli po polskukotwica.

Link który widzisz powyżej jest poprawnym elementema, jednak nie zadziała tak, jakbyśmy tego chcieli. Musimy jeszcze przekazać informację na temat tego, do jakiej strony ma prowadzić link. Robi się to następująco:

Uruchom przykład

Po kliknięciu linku utworzonego przez powyższy element zostaniemy przekierowani na stronę Google.

W powyższym przykładzie użyliśmy tak zwanego atrybutu. Atrybuty są określane w tagu otwierającym elementu HTML i używamy ich do przekazania dodatkowych informacji na temat danego elementu. Najczęściej dodajemy je poprzez umieszczenie pary nazwa wartość w następującej formie:nazwa="wartość".

Atrybuthrefsłuży w elemencieado określenia adresu strony, do której prowadzi hiperłącze. Zwróć uwagę na to, w jakiej formie wpisujemy adres. Nie można po prostu wpisać “google.pl”, ponieważ taki adres nie zadziała. Jeśli masz problem z poprawnym zapisem adresu strony, do której ma prowadzić twój link, to najlepiej otwórz tą stronę w przeglądarce i skopiuj adres z paska w górnej części okna.

Opróczhref, możemy jeszcze używać kilku atrybutów podczas tworzenia elementua, jednym z ciekawszych jesttarget, czyli po polskucel. Atrybut ten określa okno w którym ma być otwarty dany link. Jeśli nie zostanie on określony, to link otwiera się w aktualnym oknie. Jedną z popularniejszych wartości tego atrybutu jest"_blank", której efektem jest otwieranie odnośnika w nowej karcie przeglądarki. Jest to działanie, z którym na pewno się już spotkałeś.

Poniżej znajduje się przykład który korzysta właśnie z atrybututarget="_blank"i otwiera stronę Google w nowej karcie.

Uruchom przykład

Zadanie 3

Stwórz link prowadzący do stronyhttps://codequack.com/pl. Powinien on wyświetlać tekst “CodeQuack”.

Pamiętaj, że uruchomieniu kodu i kliknięciu linku zostaniesz przeniesiony na inną stronę i wynik Twojej pracy może nie zostać zapisany, jeśli nie klikniesz wcześniejUruchom i Sprawdź.

Rozwiąż zadanie

Lokalne linki

Linki które do tej pory tworzyliśmy były linkami do jakiejś strony w internecie, zawierały one bezwzględne, czyli pełne, adresy URL. Jeśli Twoja strona posiada kilka podstron, to możesz również tworzyć lokalne linki, prowadzące do tej samej strony internetowej, używające względnych adresów URL, czyli takich, które nie zawierają całego adresu.

Jeśli brzmi to dla Ciebie trochę mało zrozumiale, to już podaję przykład. Załóżmy, że tworzysz stronę firmy budowlanej. Posiada ona dwie podstrony, które znajdują się w dwóch osobnych plikach:index.html- strona główna orazcontact.html- strona z danymi kontaktowymi. Jeśli będziesz chciał stworzyć link prowadzący ze strony głównej do strony kontaktu, to nie powinieneś używać linku z pełnym adresem strony, czyli z bezwzględnym adresem URL, ponieważ podczas tworzenia strony najprawdopodobniej jeszcze nie wiesz pod jakim adresem będzie się ona znajdować. W takim przypadku lepiej użyć lokalnych linków korzystających ze względnych adresów URL.

W przypadku gdy będziesz chciał na stronieindex.htmlumieścić link do podstronycontact.html, to jeśli oba pliki znajdują się w tym samym folderze, możesz to zrobić tak, jak pokazano poniżej.

Jak widzisz, jako wartość atrybutuhrefzostała przekazana tylko nazwa podstrony. Dzięki temu link będzie działał poprawnie, bez względu na to, czy strona jest otwarta poprzez otwarcie pliku.htmlna komputerze, czy znajduje się już na serwerze pod dowolnym adresem.

Linki do aktualnej strony

Co ciekawe linków możemy również używać na nawigowania po aktualnej stronie. Być może zastanawiasz się po co to robić. Tego typu działanie jeszcze szczególnie przydatne w przypadku długich stron, np. różnego rodzaju dokumentacji programistycznych. Rozwiązanie to pozwala nam na stworzenie spisu treści na początku strony, a kliknięcie na konkretną pozycję spowoduje przewinięcie strony do określonego miejsca.

Aby móc używać tej techniki, musimy najpierw nadać odpowiednią wartość atrybutuidelementowi, do którego chcemy nawigować.

Atrybutidmożna nadać praktycznie każdemu elementowi w sekcjibody, nie musi to byćp.

Aby utworzyć link prowadzący do wyżej pokazanego elementu, jako atrybuthrefmusimy przekazać odpowiednią wartośćidwraz z znakiem#na początku. Dla naszego przykładu może to wyglądać następująco.

Całość może wyglądać następująco:

Podsumowanie

W tej lekcji miałeś okazję dokładniej poznać nagłówki i linki. Rozpoczęliśmy od omówienia elementówh1-h6, a następnie poznałeś taghr, tworzący linię horyzontalną, której można użyć do zaznaczenia podziału strony. W kolejnej części zajęliśmy się linkami. Rozpoczęliśmy od linków do zewnętrznych stron, następnie do naszych podstron, a na koniec do konkretnej części aktualnego dokumentu. W tej lekcji miałeś również poznać i zobaczyć w praktyce użycie atrybutów.