-
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!
