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!