Return to Video

HTML links

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

Polish subtitles

Revisions

Our website uses cookies for analysis purposes.