Pełny adres pocztowy zaprowadzi każdego z dowolnego miejsca. „Drugie drzwi w lewo” działa tylko, gdy wiadomo, gdzie stoicie. Adresy w href są dokładnie takie:
Rodzaj
Jak wygląda
Kiedy
bezwzględny
https://www.example.com/projects/
obca strona, inny serwer
względny
contact.html, pages/about.html, ../index.html
pliki Waszej własnej strony
Adres względny liczy się od pliku, w którym piszecie łącze. Przenosicie cały folder na serwer albo na pendrive i wszystko dalej działa. Adres bezwzględny zawsze wskazuje to samo miejsce w internecie.
MDN: Creating links (absolute versus relative URLs) · developer.mozilla.org/docs/Learn_web_development/Core/Structuring_content/Creating_links
Adresy · ścieżki względne
Ścieżka względna: skąd i dokąd
Windows pisze C:\xampp\htdocs, ale w HTML zawsze zwykły ukośnik /. Nazwy plików małymi literami, bez spacji, z myślnikiem: about.html.
MDN: Dealing with files (file paths) · developer.mozilla.org/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files
Łącze do miejsca na stronie
Kotwica: id na celu, # w łączu
Cel dostaje atrybut id="hours" (nazwa jedyna na stronie). Łącze prowadzi do niego przez #hours: przeglądarka przewija stronę do tego miejsca.
Na tej samej stronie wystarczy href="#hours". Z innej strony: plik, potem # i nazwa: contact.html#hours.
W href nie musi być plik. Zamiast adresu strony może być polecenie: „napisz e-mail” albo „zadzwoń”.
<ahref="mailto:kontakt@przyklad.pl">Napisz do nas</a>program pocztowy<ahref="mailto:kontakt@przyklad.pl?subject=Pytanie">…</a>temat po „?”<ahref="tel:+48123456789">Zadzwoń: 123 456 789</a>wybiera numer
mailto: i tel: to nie nazwy plików, tylko rodzaj adresu, jak https:. Bez spacji po dwukropku.
W temacie spację zapisujecie jako %20, np. subject=Pytanie%20o%20cennik. Numer telefonu podajecie z kierunkowym kraju.
Ciekawostka: adresowi mailto: możecie dopisać nie tylko temat, ale też odbiorcę do kopii (cc) albo gotową treść wiadomości (body). Tylko subject i body muszą zadziałać w każdym programie pocztowym, reszta zależy od tego, z jakiego programu korzysta odbiorca.
MDN: Creating links (e-mail links) i <a> HTML anchor element (href: tel:) · developer.mozilla.org/docs/Web/HTML/Reference/Elements/a · ciekawostka: RFC 6068, sekcja 4 (rfc-editor.org/rfc/rfc6068)
Dobre łącze · trzy zasady
Tekst z sensem, nowa karta z rozwagą, dymek
Źle
Dobrze
Dlaczego
<a href="prices.html">kliknij tutaj</a>
<a href="prices.html">zobacz cennik</a>
tekst ma mówić, dokąd prowadzi, nawet czytany osobno
target="_blank" samo
target="_blank" rel="noopener" + „(nowa karta)” w tekście
nowa karta bez dostępu do Waszej; użytkownik wie, co się stanie
ważna informacja tylko w title
title="Otwiera plik PDF" jako dodatek
dymek widać tylko po najechaniu myszą, nie na telefonie
Nowe przeglądarki przy target="_blank" same odcinają dostęp do Waszej karty. rel="noopener" dopisujecie i tak, bo działa też w starszych. Nowa karta tylko dla obcych stron, Wasze podstrony w tej samej.
MDN: Creating links (best practices, title) i <a> HTML anchor element · developer.mozilla.org/docs/Web/HTML/Reference/Elements/a
Łącza · egzamin
Tak pytają na egzaminie
1.<a href="http://google.com">strona Google</a> W języku HTML zdefiniowano odnośnik do strony internetowej. Aby strona otwierała się w nowym oknie lub zakładce przeglądarki, należy dopisać do definicji odnośnika atrybut
A. rel = "next"
B. rel = "external"
C. target = "_blank"
D. target = "_parent"
2.<a href="#dane"> W języku HTML zdefiniowano hiperłącze ze znakiem #. Co stanie się po wybraniu przedstawionego odsyłacza?
A. Zostanie wywołany skrypt o nazwie dane.
B. Otworzy się osobna karta przeglądarki o nazwie dane.
C. Zostanie wybrany adres względny URL o nazwie dane.
D. Strona przewinie się do elementu o wartości id równej dane.
Ma działać: z każdej strony dojdziesz do każdej innej, nic nie pokazuje „Not Found”, „Godziny otwarcia” przewija do sekcji, e-mail otwiera program pocztowy.
Ćwiczenie 2 · na kartce · 4 minuty
Ćwiczenie 2: jaki href?
Folder jak na drzewie: index.html, contact.html, pages/about.html. Do każdej sytuacji dopisz wartość href:
Z index.html do contact.html.
Z pages/about.html z powrotem do index.html.
Do nagłówka id="hours" na tej samej stronie.
Do obcej strony www.example.com, w nowej karcie.
„Napisz do nas” na adres kontakt@przyklad.pl.
Pytania kontrolne
Trzy pytania na koniec
Czym różni się adres względny od bezwzględnego i kiedy używacie którego?
Co musi mieć element na stronie, żeby dało się do niego zrobić łącze z #?
Dlaczego „kliknij tutaj” to zły tekst łącza?
Na następnej lekcji: obrazy w HTML, czyli img, src, alt i obraz jako łącze.
Rozkład: Łącza w HTML → Obrazy w HTML
Z realnych wdrożeń
A jak to wygląda w produkcji?
Na lekcji
W produkcji
Status
Ścieżki względne między podstronami
Standard w projektach: ten sam kod działa na komputerze programisty, na serwerze testowym i u klienta.
nadal w użyciu
Przeklikanie łączy ręcznie
Robot (link checker) przechodzi całą stronę i zgłasza zerwane łącza (błąd 404) przed wdrożeniem. Zerwane łącze to stracony klient i gorsza pozycja strony w wyszukiwarce.
narzędzia
rel="noopener" przy nowej karcie
Przeglądarki robią to same, ale narzędzia sprawdzające kod dalej wymagają wpisu; zespoły zostawiają go dla starszych przeglądarek.
nadal w użyciu
„kliknij tutaj”
Audyt dostępności to wyłapuje; w sklepach i bankach tekst łącza jest częścią treści, którą pisze redaktor.
unikane
http://localhost/nazwisko/
Na serwerze strona leży w głównym folderze, więc adresy od korzenia (/index.html) zachowują się inaczej niż w XAMPP. Dlatego uczymy się względnych.