Poznaliście już parę znaczników HTML.
A wiecie, co znaczy ten skrót?
HyperText Markup Language (hipertekstowy język znaczników).
Metoda oznaczania treści za pomocą znaczników.
A termin „hipertekst”?
Powstał, gdy jeszcze nie było Internetu,
w latach 60. XX w. Oznacza tekst powiązany z innym,
do którego czytelnik może przejść od razu.
Tim Berners-Lee wymyślił HTML
i inne elementy Internetu, np. HTTP,
by łączyć jeden tekst z innym,
znajdującym się gdzie indziej.
Jak łączymy strony www z innymi
w HTML-u?
Oczywiście hiperlinkiem!
Teraz mówimy już tylko „link”.
A jak robimy link w HTML-u?
Teraz będzie dziwnie.
Myślicie, że użyjemy znacznika „link”?
On jest używany do innych linków w HTML-u.
Stosujemy znacznik „a”, od „anchor” (ang. kotwica).
Zakotwicza link na stronie w pewnym miejscu
i łączy tę kotwicę z inną stroną.
Aby zrobić link, musimy wpisać znacznik,
wybrać tekst do linku
i adres, do którego link odsyła.
Zróbmy link do strony z informacjami o narodzinach Internetu.
Tekst linku znajdzie się między znacznikiem początkowym a końcowym.
Ustawiam tu kursor i piszę:
„Przeczytaj więcej o historii HTML-u”.
Tekst już wygląda jak link,
lecz jeszcze nigdzie nie wysyła. Trzeba dodać adres.
Nie chcemy, by był widoczny na stronie,
ale przeglądarka musi go znać.
Umieścimy go w atrybucie znacznika.
To atrybut „href”.
Co oznacza „href”?
Podpowiem. Często widujecie to „h”.
Oznacza „hiper”. Hiperreferencja.
Wkleję teraz adres, nazywany też URL.
Zauważyliście, że zaczyna się od „http:”?
Zgadnijcie, co oznacza „h”. Hiper!
W HTML-u wszystko jest hiper!
Adres URL podaje przeglądarce dane do znalezienia strony:
używany protokół,
domenę, w której strona się znajduje,
a także ścieżkę na serwerze.
Ścieżki pełne nazywamy bezwzględnymi adresami URL.
Czasem zobaczycie adres URL tylko z ukośnikiem i ścieżką.
Każe przeglądarce szukać zasobów
w tej samej domenie.
To jest „adres URL względny”.
Używamy takich w Khan Academy, do łączenia zasobów.
W stronach, które tworzycie, stosujcie adresy bezwzględne.
Tak będzie bezpieczniej.
Mówimy też przeglądarce, gdzie otworzyć stronę:
w oknie bieżącym czy w nowym.
Żeby otworzyła link w nowym oknie,
dodajemy atrybut „target” (ang. cel).
target="_blank"
Przerwijcie oglądanie i kliknijcie link.
Już, ja zaczekam. Klik-klik!
Co się stało?
Zobaczyliście komunikat:
link jest ze strony stworzonej przez użytkownika.
Otwiera się po kliknięciu „OK”.
Linki zewnętrzne na waszych stronach
traktujemy inaczej.
Żeby użytkownicy nie myśleli, że linki z Khan Academy
odsyłają w jakieś straszne miejsce.
Każdy link stworzony tutaj będzie tak ostrzegał
i otwierał się w nowym oknie.
To znaczy, że mogę skasować atrybut „target”,
bo sprawa zostaje załatwiona za kulisami.
Mogę go zostawić,
żeby kiedyś wziąć ten kod z Khan Academy
i mieć pewność, że będzie otwierał się w nowym oknie.
Kiedy „target” jest niezbędny?
Gdy link odsyła do innej strony w tej samej domenie i ma
otwierać się w tym samym oknie.
A gdy odsyła do innej domeny - w nowym.
Dość gadania,
pokażę jeszcze coś świetnego.
Możemy podlinkować nie tylko tekst,
ale obrazy albo tekst z obrazami!
Tu mamy zdjęcie Tima Bernersa-Lee.
Wytnę je…
i wkleję wewnątrz linku.
Pięknie!
Gdy najadę myszką na obraz,
kursor zmieni się we wskaźnik,
a kliknięcie przeniesie mnie na stronę CERN-u.
Moglibyście podlinkować całą swoją stronę,
tak, że wszystko byłoby niebieskie i podkreślone.
Ale proszę, nie róbcie tego! Linkujcie życzliwie, przyjaciele!