< Return to Video

Dodawanie obrazów w HTML

  • 0:00 - 0:02
    Na razie opisywaliśmy króliki
  • 0:02 - 0:06
    za pomocą akapitów i list,
  • 0:06 - 0:09
    a moglibyśmy po prostu
    wstawić obrazek
  • 0:09 - 0:12
    i pokazać, jak wygląda królik.
  • 0:12 - 0:16
    Obraz umieszczamy na stronie
    za pomocą znacznika „img”,
  • 0:16 - 0:19
    od „image” (ang. obraz).
  • 0:19 - 0:23
    Ale gdy wpiszemy samo „img”,
    nic się nie pokaże.
  • 0:23 - 0:24
    Dlaczego?
  • 0:24 - 0:28
    Nie powiedzieliśmy przeglądarce,
    który obraz wyświetlić.
  • 0:28 - 0:29
    W sieci są ich miliony,
  • 0:29 - 0:31
    a nie chcemy wybierać losowo:
  • 0:31 - 0:34
    może się trafić coś wstrętnego,
  • 0:35 - 0:38
    no i obraz nie będzie
    przedstawiał tego, co powinien.
  • 0:38 - 0:41
    Musimy podać przeglądarce
    URL obrazu.
  • 0:41 - 0:43
    Adres URL znajdziecie nad stroną,
  • 0:43 - 0:45
    w pasku adresowym przeglądarki.
  • 0:45 - 0:47
    Macie? Świetnie.
  • 0:47 - 0:49
    Adres URL wskazuje na materiały,
  • 0:50 - 0:52
    które są dostępne w sieci.
  • 0:52 - 0:55
    Na stronie możecie umieścić
    obraz dostępny w sieci,
  • 0:55 - 0:58
    ale nie taki, który znajduje się
    tylko w twoim komputerze.
  • 0:58 - 1:01
    Obrazów można szukać
    na wiele sposobów.
  • 1:01 - 1:03
    Ułatwimy wam sprawę,
  • 1:03 - 1:06
    zapewniając kolekcję zdjęć
    do wyboru.
  • 1:06 - 1:08
    Żeby dodać zdjęcie, dopiszemy
  • 1:08 - 1:11
    atrybut do znacznika „img”.
  • 1:11 - 1:13
    To dodatkowa informacja
  • 1:13 - 1:15
    o znaczniku. Ten atrybut
  • 1:15 - 1:17
    będzie pierwszym, który zobaczycie.
  • 1:18 - 1:20
    Aby podać URL przeglądarce,
  • 1:20 - 1:23
    dołożymy atrybut „source”
    (ang. źródło),
  • 1:23 - 1:26
    spacja i „src”.
  • 1:28 - 1:31
    To oznacza „source”,
    ale koniecznie
  • 1:31 - 1:33
    wpiszcie „src”, bo przeglądarka
  • 1:33 - 1:35
    zignoruje znacznik,
    gdy będzie źle zapisany.
  • 1:36 - 1:39
    Teraz znak równości,
    żeby podać przeglądarce
  • 1:39 - 1:41
    wartość atrybutu.
  • 1:41 - 1:45
    Otworzę cudzysłów, a edytor
  • 1:45 - 1:47
    automatycznie go zamknie.
  • 1:47 - 1:51
    Wartości atrybutów
    zawsze są w cudzysłowie.
  • 1:52 - 1:56
    W tym momencie zwykle
    wpisujemy URL,
  • 1:56 - 1:58
    ale w portalu Khan Academy
  • 1:58 - 2:00
    wyskoczy galeria zdjęć.
  • 2:00 - 2:04
    Wybierzemy obrazek.
    Chcę obrazek z królikiem,
  • 2:04 - 2:07
    klikam na zwierzęta, wybieram
  • 2:07 - 2:09
    ślicznego królika i zatwierdzam.
  • 2:10 - 2:13
    Widzicie, że URL
    jest w cudzysłowie
  • 2:13 - 2:16
    i zaczyna się od „http”?
  • 2:16 - 2:18
    Wiemy, że adres wskazuje
  • 2:18 - 2:20
    jakiś obraz gdzieś w sieci.
  • 2:20 - 2:22
    Patrzcie! Na mojej stronie
    jest królik,
  • 2:23 - 2:26
    ale co będzie, gdy serwer
    ze zdjęciem przestanie działać
  • 2:26 - 2:28
    i przeglądarka nie załaduje zdjęcia?
  • 2:28 - 2:31
    Skąd użytkownik ma wiedzieć,
    co przedstawiało?
  • 2:31 - 2:33
    Nie zobaczy nic
    i przez resztę życia
  • 2:33 - 2:35
    będzie myślał o tym, co go ominęło.
  • 2:36 - 2:39
    Dlatego znacznik „img”
    ma inny atrybut, „alt”,
  • 2:39 - 2:41
    który informuje przeglądarkę,
  • 2:41 - 2:44
    jaki tekst ma zastąpić obraz.
  • 2:44 - 2:47
    By dodać kolejny atrybut,
    wstawiamy spację
  • 2:47 - 2:50
    po cudzysłowie poprzedniego.
  • 2:50 - 2:54
    Piszemy: alt=
    i otwieramy cudzysłów.
  • 2:54 - 2:57
    Tekst w cudzysłowie
  • 2:57 - 2:59
    ma być opisem obrazka,
  • 2:59 - 3:04
    np. „królik z opadniętymi
    uszami w stodole".
  • 3:05 - 3:07
    To pomoże osobom,
    które przeglądają strony,
  • 3:07 - 3:10
    lecz nie mogą ich przeczytać,
    jak niedowidzący.
  • 3:10 - 3:11
    Aplikacja „screen reader”
  • 3:11 - 3:14
    przeczyta im stronę,
  • 3:14 - 3:16
    z każdym znacznikiem.
  • 3:16 - 3:18
    Gdy trafi na „img”,
    odczyta tekst z „alt”,
  • 3:18 - 3:21
    bo ktoś niedowidzący
    nie obejrzy obrazów.
  • 3:21 - 3:24
    Dlatego zawsze wpisujcie
    „alt” i tekst,
  • 3:24 - 3:28
    żeby wszyscy mogli się zapoznać
    z waszymi stronami.
  • 3:29 - 3:31
    Wróćmy do obrazka, który widać.
  • 3:31 - 3:33
    Trochę za duży.
  • 3:33 - 3:34
    Zmieńmy rozmiar.
  • 3:34 - 3:36
    Posłużą temu kolejne atrybuty,
  • 3:37 - 3:39
    np. szerokość lub wysokość.
  • 3:39 - 3:43
    Dajmy: „Width=100”
    (szerokość=100).
  • 3:44 - 3:47
    Obraz ma 100 pikseli.
  • 3:47 - 3:49
    Trochę za mały.
  • 3:49 - 3:51
    Najedźmy kursorem
  • 3:51 - 3:54
    i przeciągnijmy,
    żeby powiększyć obrazek.
  • 3:54 - 3:57
    Znacznie lepiej!
  • 3:57 - 3:59
    Spróbujmy zmienić wysokość.
  • 3:59 - 4:01
    Wpiszę: „height=50”
    (wysokość=50).
  • 4:01 - 4:03
    Oj!
  • 4:03 - 4:05
    Zmiażdżyłam biednego króliczka!
  • 4:05 - 4:09
    Dlatego powinno się określać
  • 4:09 - 4:11
    albo szerokość, albo wysokość.
    Nie obie naraz.
  • 4:11 - 4:13
    Moglibyście się pomylić
  • 4:13 - 4:17
    i pozgniatać króliki.
    Niech przeglądarka
  • 4:17 - 4:21
    sama obliczy pozostałe wymiary.
  • 4:21 - 4:22
    Skasuję wysokość.
  • 4:22 - 4:25
    Umiecie już wstawiać obrazy.
    Teraz pomyślcie,
  • 4:25 - 4:28
    jak połączyć wszystkie znaczniki:
  • 4:28 - 4:33
    listy z obrazami i akapitami,
    dziesiątkę szalonych zwierzaków…
  • 4:33 - 4:36
    Tylko nie zamieszczajcie
    zbyt wielu zdjęć,
  • 4:36 - 4:38
    bo osoba oglądająca stronę
  • 4:38 - 4:40
    będzie musiała czekać,
    aż wszystkie się załadują.
  • 4:40 - 4:43
    Mimo to,
    będziecie się dobrze bawić!
Title:
Dodawanie obrazów w HTML
Description:

more » « less
Video Language:
English
Duration:
04:45

Polish subtitles

Revisions