WEBVTT

00:00:00.000 --> 00:00:02.843
Poznaliście już parę znaczników HTML.

00:00:03.000 --> 00:00:04.800
A wiecie, co znaczy ten skrót?

00:00:04.850 --> 00:00:09.091
HyperText Markup Language
(hipertekstowy język znaczników).

00:00:11.470 --> 00:00:14.177
Metoda oznaczania treści
za pomocą znaczników.

00:00:14.181 --> 00:00:16.860
A termin „hipertekst”?

00:00:16.869 --> 00:00:20.494
Powstał, gdy jeszcze
nie było Internetu,

00:00:20.494 --> 00:00:23.823
w latach 60. XX w. Oznacza
tekst powiązany z innym,

00:00:23.823 --> 00:00:26.263
do którego czytelnik
może przejść od razu.

00:00:26.273 --> 00:00:29.720
Tim Berners-Lee
wymyślił HTML

00:00:29.720 --> 00:00:32.756
i inne elementy Internetu,
np. HTTP,

00:00:32.787 --> 00:00:34.912
by łączyć jeden tekst z innym,

00:00:34.912 --> 00:00:36.722
znajdującym się gdzie indziej.

00:00:36.751 --> 00:00:39.191
Jak łączymy strony www z innymi

00:00:39.191 --> 00:00:41.280
w HTML-u?

00:00:41.282 --> 00:00:43.451
Oczywiście hiperlinkiem!

00:00:43.451 --> 00:00:46.280
Teraz mówimy już tylko „link”.

00:00:46.280 --> 00:00:48.599
A jak robimy link w HTML-u?

00:00:48.636 --> 00:00:50.304
Teraz będzie dziwnie.

00:00:50.304 --> 00:00:52.770
Myślicie, że użyjemy
znacznika „link”?

00:00:52.770 --> 00:00:57.633
On jest używany do innych
linków w HTML-u.

00:00:57.633 --> 00:01:03.106
Stosujemy znacznik „a”,
od „anchor” (ang. kotwica).

00:01:03.172 --> 00:01:06.453
Zakotwicza link na stronie
w pewnym miejscu

00:01:06.453 --> 00:01:09.420
i łączy tę kotwicę z inną stroną.

00:01:09.443 --> 00:01:11.989
Aby zrobić link,
musimy wpisać znacznik,

00:01:11.989 --> 00:01:14.621
wybrać tekst do linku

00:01:14.621 --> 00:01:17.219
i adres, do którego link odsyła.

00:01:17.233 --> 00:01:24.068
Zróbmy link do strony z informacjami
o narodzinach Internetu.

00:01:24.068 --> 00:01:29.506
Tekst linku znajdzie się między
znacznikiem początkowym a końcowym.

00:01:29.599 --> 00:01:31.900
Ustawiam tu kursor i piszę:

00:01:31.900 --> 00:01:36.610
„Przeczytaj więcej
o historii HTML-u”.

00:01:36.610 --> 00:01:41.017
Tekst już wygląda jak link,

00:01:41.061 --> 00:01:44.317
lecz jeszcze nigdzie nie wysyła.
Trzeba dodać adres.

00:01:44.347 --> 00:01:47.480
Nie chcemy, by był
widoczny na stronie,

00:01:47.480 --> 00:01:49.937
ale przeglądarka musi go znać.

00:01:49.990 --> 00:01:53.040
Umieścimy go w atrybucie znacznika.

00:01:53.088 --> 00:01:56.942
To atrybut „href”.

00:01:56.985 --> 00:01:59.749
Co oznacza „href”?

00:01:59.769 --> 00:02:03.264
Podpowiem. Często widujecie to „h”.

00:02:03.283 --> 00:02:06.124
Oznacza „hiper”. Hiperreferencja.

00:02:06.124 --> 00:02:11.966
Wkleję teraz adres, nazywany też URL.

00:02:12.036 --> 00:02:15.940
Zauważyliście, że zaczyna się
od „http:”?

00:02:16.051 --> 00:02:19.044
Zgadnijcie, co oznacza „h”. Hiper!

00:02:19.084 --> 00:02:21.483
W HTML-u wszystko jest hiper!

00:02:21.553 --> 00:02:25.664
Adres URL podaje przeglądarce dane
do znalezienia strony:

00:02:25.724 --> 00:02:27.965
używany protokół,

00:02:28.035 --> 00:02:30.357
domenę, w której strona się znajduje,

00:02:30.457 --> 00:02:34.265
a także ścieżkę na serwerze.

00:02:34.294 --> 00:02:38.579
Ścieżki pełne nazywamy
bezwzględnymi adresami URL.

00:02:38.622 --> 00:02:43.499
Czasem zobaczycie adres URL
tylko z ukośnikiem i ścieżką.

00:02:43.562 --> 00:02:46.179
Każe przeglądarce szukać zasobów

00:02:46.179 --> 00:02:48.634
w tej samej domenie.

00:02:48.645 --> 00:02:50.631
To jest „adres URL względny”.

00:02:50.682 --> 00:02:54.054
Używamy takich w Khan Academy,
do łączenia zasobów.

00:02:54.136 --> 00:02:57.623
W stronach, które tworzycie,
stosujcie adresy bezwzględne.

00:02:57.623 --> 00:02:59.288
Tak będzie bezpieczniej.

00:02:59.321 --> 00:03:02.146
Mówimy też przeglądarce,
gdzie otworzyć stronę:

00:03:02.146 --> 00:03:04.728
w oknie bieżącym czy w nowym.

00:03:04.769 --> 00:03:07.061
Żeby otworzyła link w nowym oknie,

00:03:07.061 --> 00:03:10.748
dodajemy atrybut „target” (ang. cel).

00:03:10.796 --> 00:03:15.258
target="_blank"

00:03:15.288 --> 00:03:19.406
Przerwijcie oglądanie
i kliknijcie link.

00:03:19.444 --> 00:03:23.373
Już, ja zaczekam. Klik-klik!

00:03:23.393 --> 00:03:24.372
Co się stało?

00:03:24.432 --> 00:03:25.802
Zobaczyliście komunikat:

00:03:25.802 --> 00:03:28.244
link jest ze strony
stworzonej przez użytkownika.

00:03:28.244 --> 00:03:30.625
Otwiera się po kliknięciu „OK”.

00:03:30.676 --> 00:03:33.122
Linki zewnętrzne na waszych stronach

00:03:33.122 --> 00:03:34.395
traktujemy inaczej.

00:03:34.423 --> 00:03:37.797
Żeby użytkownicy nie myśleli,
że linki z Khan Academy

00:03:37.797 --> 00:03:41.054
odsyłają w jakieś straszne miejsce.

00:03:41.066 --> 00:03:43.992
Każdy link stworzony tutaj
będzie tak ostrzegał

00:03:43.992 --> 00:03:46.163
i otwierał się w nowym oknie.

00:03:46.300 --> 00:03:50.223
To znaczy, że mogę skasować
atrybut „target”,

00:03:50.223 --> 00:03:53.048
bo sprawa zostaje załatwiona
za kulisami.

00:03:53.088 --> 00:03:54.420
Mogę go zostawić,

00:03:54.420 --> 00:03:57.764
żeby kiedyś wziąć ten kod
z Khan Academy

00:03:57.764 --> 00:04:00.840
i mieć pewność, że będzie
otwierał się w nowym oknie.

00:04:00.870 --> 00:04:02.723
Kiedy „target” jest niezbędny?

00:04:02.783 --> 00:04:06.302
Gdy link odsyła do innej strony
w tej samej domenie i ma

00:04:06.302 --> 00:04:08.023
otwierać się w tym samym oknie.

00:04:08.023 --> 00:04:12.179
A gdy odsyła do innej domeny
- w nowym.

00:04:12.239 --> 00:04:13.641
Dość gadania,

00:04:13.641 --> 00:04:16.649
pokażę jeszcze coś świetnego.

00:04:16.689 --> 00:04:18.653
Możemy podlinkować nie tylko tekst,

00:04:18.653 --> 00:04:21.627
ale obrazy albo tekst z obrazami!

00:04:21.656 --> 00:04:26.815
Tu mamy zdjęcie Tima Bernersa-Lee.

00:04:26.867 --> 00:04:30.454
Wytnę je…

00:04:30.464 --> 00:04:34.067
i wkleję wewnątrz linku.

00:04:34.094 --> 00:04:36.068
Pięknie!

00:04:36.068 --> 00:04:38.958
Gdy najadę myszką na obraz,

00:04:38.958 --> 00:04:41.309
kursor zmieni się we wskaźnik,

00:04:41.309 --> 00:04:44.379
a kliknięcie przeniesie mnie
na stronę CERN-u.

00:04:44.379 --> 00:04:46.948
Moglibyście podlinkować
całą swoją stronę,

00:04:46.948 --> 00:04:49.867
tak, że wszystko byłoby
niebieskie i podkreślone.

00:04:49.867 --> 00:04:57.000
Ale proszę, nie róbcie tego!
Linkujcie życzliwie, przyjaciele!