Liigu peamise sisu juurde

Pildid, videod ja helifailid

Lisaks tekstile teeb veebilehe unikaalseks sinna lisatud pildid, videod ja helid.

Pildid​

HTML-is kasutatakse piltide kuvamiseks silti <img/>.

  • src on viide pildile. See võib olla kas lokaalne fail või link internetist leitud pildile. Faili lõpus peab olema pildi formaat (nt .jpg, .png, .gif, .svg jne).
  • alt on pildi alternatiivne teskt, mis kuvatakse juhul, kui pilt ei lae. Lisaks loevad ekraanilugerid selle ette vaegnägijatele.
  • width ja height määravad pildi laiuse ja kõrguse. Kui neid ei määra, kuvatakse pilt originaalsuruses, mis võib veebilehel paigutust rikkuda. Hea tava on pildi suurust muuta CSS-i abil, mitte otse HTML-is. 1 2

Videod​

Olemasoleva video lisamine veebilehele​

Kui video on lokaalselt salvestatud, saab kasutada silti <video> </video>. Selle sisse tuleb panna <soruce/>, kus määratakse video fail.

Sildile <video> saab lisada atribuute:3

  • controls lisab kasutajale võimaluse video käivitada, seda edasi-tagsi kerida, täisekraanile panna ja video heli reguleerida;
  • muted kui video pannakse tööle, siis käivitub see algselt helita;
  • loop video hakkab pärast lõppu uuesti mängima;
  • poster määrab pildi, mida kuvatakse enne video käivitamist;
  • autoplay video hakkab automaatselt mängima, kui see on laadinud. NB! Automaatne käivitumine ei pruugi kõikides brauserites toimida, kui videole pole lisatud muted atribuut.

Youtube'i video lisamine veebilehele​

Youtube'i videote puhul kasutatakse <iframe></iframe> silti, mille puhul video kuvatakse eraldi veebilehena lehe sees.

Adding Youtube Video Tutorial

Helifailid​

Helifaili kuvamiseks kasutatakse silti <audio> </audio> koos <source/> sildiga.

PEA MEELES! Audio näitamiseks peame lisama silti <audio> atribuudi . Selle puudumisel helifaili ei kuvata leheküljel.

Oluline! Kui lisada ainult <audio> ilma controls atribuudita, ei saa kasutaja faili ise käivitada ega peatada.

Sildile <audio> saame lisada järgnevad atribuudid:4

  • autoplay fail hakkab automaatselt mängima, kui leht on laadinud;
  • controls lisab kasutajale võimaluse faili mängida, pausile panna, kerida ja helitugevust muuta;
  • loop helifail hakkab pärast lõppu uuesti mängima;
  • muted heli on vaikimisi maha keeratud.

Footnotes​

  1. https://www.w3schools.com/tags/tag_img.asp ↩

  2. https://www.w3schools.com/html/html_images.asp ↩

  3. https://www.w3schools.com/tags/tag_video.asp ↩

  4. https://www.w3schools.com/tags/tag_audio.asp ↩