Return to Video

HTML Images (Video Version)

  • 0:00 - 0:02
    Причали смо о зечевима
  • 0:02 - 0:06
    све ово време,
    описујући их кроз пасусе и листе,
  • 0:06 - 0:09
    али, могли бисмо ставити
    и слику на нашу веб страницу
  • 0:09 - 0:12
    и заправо приказати како зечеви изгледају.
  • 0:12 - 0:16
    Па, да би ставили слику на веб страницу,
    користимо IMG таг,
  • 0:16 - 0:19
    који, као што можете погодити,
    потиче од речи слика (енгл. image).
  • 0:19 - 0:23
    Ако само укуцамо "image"
    нећемо видети ништа.
  • 0:23 - 0:24
    Зашто не?
  • 0:24 - 0:28
    Па, нисмо претраживачу рекли
    коју слику да прикаже.
  • 0:28 - 0:29
    Постоји милион слика на интернету,
  • 0:29 - 0:31
    и сигурно не желимо
    да се нека изабере насумице,
  • 0:31 - 0:34
    пошто то може бити нека ружна
    која нам се не свиђа.
  • 0:35 - 0:38
    И то такође неће бити
    оно што желимо да буде.
  • 0:38 - 0:41
    Треба да претраживачу
    проследимо URL слике.
  • 0:41 - 0:43
    URL је оно што се прикаже на врху
  • 0:43 - 0:45
    претраживача у адресном пољу.
  • 0:45 - 0:47
    И то је оно што то јесте - адреса.
  • 0:47 - 0:49
    То је начин за проналажење
    неког ресурса на вебу.
  • 0:50 - 0:52
    И то значи да можемо
    убацити само ону слику
  • 0:52 - 0:55
    која се већ налази негде на интернету.
  • 0:55 - 0:58
    Не можемо просто да убацимо слике
    које су само на нашем рачунару.
  • 0:58 - 1:01
    Постоји много начина
    да пронађемо слике на интернету,
  • 1:01 - 1:03
    али смо вам ми то овде олакшали
  • 1:03 - 1:06
    тако што смо направили бирач слика
    из колекције фотографија.
  • 1:06 - 1:08
    Да би он искочио, треба да додамо
  • 1:08 - 1:11
    један атрибут нашем тагу за слику.
  • 1:11 - 1:13
    Атрибут је додатно парче
  • 1:13 - 1:15
    информације о тагу и ово је
  • 1:15 - 1:17
    први атрибут са којим се сусрећемо.
  • 1:18 - 1:20
    Да бисмо претраживачу рекли URL, ми ћемо
  • 1:20 - 1:23
    додати атрибут назван:
    извор (енгл: source, src).
  • 1:23 - 1:26
    И додаћемо размак и онда откуцати SRC.
  • 1:28 - 1:31
    Сада, то значи извор (енгл: source),
    али је јако важно
  • 1:31 - 1:33
    да га укуцате као SRC,
    пошто ће претраживач
  • 1:33 - 1:35
    то игнорисати, ако погрешимо у писању.
  • 1:36 - 1:39
    Сада, треба да ставим
    један знак једнакости како би рекла
  • 1:39 - 1:41
    претраживачу која је вредност атрибута.
  • 1:41 - 1:45
    И сада ћу додати наводнике, а едитор ће
  • 1:45 - 1:47
    аутоматски додати завршне наводнике,
  • 1:47 - 1:51
    како би вредности атрибута увек биле
    уоквирене дуплим наводницима.
  • 1:52 - 1:56
    У реду, дакле, сада би иначе почели
    да уносимо наш URL,
  • 1:56 - 1:58
    али овде на Кхан Академији, тада ће
  • 1:58 - 2:00
    наш бирач слика искочити.
  • 2:00 - 2:04
    Само ћемо изабрати слику,
    а желим слику зеца,
  • 2:04 - 2:07
    тако да ћу кликнути на
    картицу животиња и изабраћу
  • 2:07 - 2:09
    овог неодољивог зеца и кликнути OK.
  • 2:10 - 2:13
    Видите ли како је ту URL
    унутар наших наводника?
  • 2:13 - 2:16
    И видите ли како тај URL почиње са http?
  • 2:16 - 2:18
    То је како знамо да показује
  • 2:18 - 2:20
    на неку слику негде на интернету.
  • 2:20 - 2:22
    И хеј! Видите, ено га зека
    на мојој веб страници!
  • 2:23 - 2:26
    Али шта да је сервер
    који складишти ту слику у квару,
  • 2:26 - 2:28
    и да претраживач не може је учита?
  • 2:28 - 2:31
    Како би посетилац знао шта је
    на мојој феноменалној слици?
  • 2:31 - 2:33
    Не би видели ништа и питали би се остатак
  • 2:33 - 2:35
    својих живота шта су то пропустили.
  • 2:36 - 2:39
    Баш због тога таг за слику
    поседује други атрибут - ALT,
  • 2:39 - 2:41
    који користимо да претраживачу кажемо
  • 2:41 - 2:44
    који је алтернативни текст за слику.
  • 2:44 - 2:47
    Да додамо други атрибут,
    само ставимо размак
  • 2:47 - 2:50
    после завршних наводника последњег.
  • 2:50 - 2:54
    Затим пишемо ALT,
    знак једнакости, наводнике,
  • 2:54 - 2:57
    а унутар ових наводника, текст ће бити
  • 2:57 - 2:59
    неки помоћни опис за слику
  • 2:59 - 3:04
    попут "зец са спуштеним ушима у амбару."
  • 3:05 - 3:07
    То такође помаже људима
    који виде веб странице
  • 3:07 - 3:10
    али их не могу заиста видети,
    попут слепих.
  • 3:10 - 3:11
    Они користе апликацију
    која се назива читач екрана,
  • 3:11 - 3:14
    који им буквално чита веб страницу,
  • 3:14 - 3:16
    описујући сваки таг који види.
  • 3:16 - 3:18
    Када она види таг за слику,
    прочитаће алтернативни текст
  • 3:18 - 3:21
    пошто слепа особа не може да види слике.
  • 3:21 - 3:24
    Дакле, требали бисте увек,
    увек користити алтернативни текст,
  • 3:24 - 3:28
    како би цео свет могао искусити
    вашу веб страницу.
  • 3:29 - 3:31
    У реду, вратимо се на слику
    коју можемо видети.
  • 3:31 - 3:33
    Мало је велика.
  • 3:33 - 3:34
    Хајде да јој променимо величину.
  • 3:34 - 3:36
    Можемо урадити то са више атрибута.
  • 3:37 - 3:39
    Са нашом ширином или висином.
  • 3:39 - 3:43
    Рецимо, "ширина је једнака 100."
  • 3:44 - 3:47
    У реду, дакле, сада је широка 100 пиксела.
  • 3:47 - 3:49
    То је малчице премало.
  • 3:49 - 3:51
    Ставимо наш курсор унутра и искористимо
  • 3:51 - 3:54
    мењач броја да је начинимо већом.
  • 3:54 - 3:57
    У реду, то изгледа много боље.
  • 3:57 - 3:59
    Сада, покушајмо да додамо висину.
  • 3:59 - 4:01
    Само ћу рећи, "висина је једнака са 50."
  • 4:01 - 4:03
    Ух-ох!
  • 4:03 - 4:05
    Згњечила сам мог зеку, јадни зека!
  • 4:05 - 4:09
    Видите, зато бисте иначе
    требали само да наведете
  • 4:09 - 4:11
    или ширину или висину, али не обоје.
  • 4:11 - 4:13
    Јер можете унети погрешне димензије
  • 4:13 - 4:17
    и тако згњечити ваше зеке.
    Тако да ћу ја једноставно
    препустити претраживачу
  • 4:17 - 4:21
    да уради математику и одлучи
    колика треба да буде друга димензија.
  • 4:21 - 4:22
    Обрисаћу висину.
  • 4:22 - 4:25
    Сада када можете да правите слике,
    почните да размишљате
  • 4:25 - 4:28
    о комбиновању свих тагова
    које имате у кутији са алатима.
  • 4:28 - 4:33
    Листе са сликама и пасусима,
    топ 10 најлуђих животиња...
  • 4:33 - 4:36
    Само немојте ставити превише
    слика на вашу страницу,
  • 4:36 - 4:38
    пошто ће особа
    која вам посећује страницу
  • 4:38 - 4:40
    морати да учита све њих.
  • 4:40 - 4:43
    Али, и даље се можете пуно забавити!
Title:
HTML Images (Video Version)
Description:

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

Serbian subtitles

Revisions