HTMLi kursus #6.1 – lihtsad meediaelemendid

HTMLi kursus #6.1 – lihtsad meediaelemendid

Eelmine osa: HTMLi kursus #5 – Sektsioonielemendid

Tänases HTMLi kursuse osas võtame ette meediaelemendid ehk elemendid, mis lubavad HTMLi lisada videoid, audiot, pilte ja muid renderdamisega seotud faile.

Siin postituses on välja toodud elemendid, mida on kerge HTMLi lisada ning ei vaja lisateadmisi muudest valdkondadest.

Algselt pidi tänane artikkel olema üks postitus, aga otsustasin jagada selle osa 3 väiksemaks osaks, sest originaalpostitus oli üle 4800 sõna.

Nagu ikka on valmis tehtud näidisleht (interaktiivne näide siin) ja konspekt (interaktiivne näide siin).

Näidisleht

Enne kui asun meediaelementidest rääkima, siis arvan, et nüüd oleks õige aeg selgeks teha paar spetsiifilisemat asja veebi valdkonnas, millest ma enne hoidusin, kuna ei tahtnud sind ära hirmutada ja segadusse ajada.

Isesulguvad elemendid

Lühidalt öeldes on iseseulguv element element, millel ei ole lõppmärgendit.

Täpsemalt vastates on sellel ka põhjendus.

Nimelt isesulguval elemendil ei tohi olla lapselemente. Küll aga võib isesulguval elemendil olla atribuute, mis suudavad mõjutada (isesulguva) elemendi funktsionaalsust ja käitumist.

Kuna isesulguval elemendil ei ole lapselemente, siis ei ole ka mõtet lõpumärgendil, sest algusmärgendi ja lõpumärgendi vahele käib ju elemendi sisu (ehk lapselemendid).

Tihti lõpetakse isesluguv element “/” (kaldkriipsuga). See ei ole HTML5 kohustuslik, aga ma soovitaksin seda sul teha, sest karmimas HTMLi versioonis XHTML seda nõutakse.

Ja isiklikult arvan, et see näitab üles rohkem koodija distsiplineeritust.

Täpsemalt URL’ide kohta

<img> ja <video> elemendi src atribuudil (sellest allpool) ja <a> elemendi atribuudil href saab väärtuseks olla URL – täielik veebilehe aadress või suhteline asukoht arvutis/serveris.

Nüüd, et viidata mingile veebilehele tuleb lihtsalt kopeerida mingi veebilehe aadress koos protokolliga – see on täielik veebilehe aadress (näiteks minu blogi asub aadressil https://oliverpaljak.com; https:// on protokoll).

Loomulikult kui lisad src väärtust <img> elemendile, siis aadress peaks viitama pildile (nagu näiteks siin https://oliverpaljak.com/wp-content/uploads/2016/12/StockSnap_CWYK8CLC61.jpg).

 

Aga et saada URLi kätte serverist/arvutist (olenemata domeeninimest), siis tuleb kirjutada atribuudi väärtuseks tahetud faili suhteline asukoht.

Suhteline asukoht on asukoht serveris, mis ei sõltu domeeninimest, vaid sellest, kus me parasjagu asume serveris.

Kujuta veebiserverit ette tavalise kaustana (tegelikult need sellised ongi). Selle kausta nimeks on näiteks “veebiserver”.

“Veebiserveri” sees on omakorda teised kaustad. Need tähistavad veebilehti, nagu näiteks “oliverpaljak.com” ja “ansiveeb.ee”.

Kausta “oliverpaljak.com” on oliverpaljak.com’iga seotud failid. Ning kausta “ansiveeb.ee” on ansiveeb.ee’ga seotud failid.

Oletame, et sa lood sinna “veebiserverisse” uue veebilehe nimega “random.ee”. Sinna sisse lood sa selle veebilehega seotud failid/alamkaustad.

Nüüd kui sa oled “random.ee” kaustas, siis sa näed neid faile/kausti, mis selles “random.ee” kaustas asuvad.

Ning sa saad minna “random.ee” alamkaustadesse ilma, et sa peaksid uuesti minema “random.ee” kausta. Sa pääsed otse nendele ligi.

Ja täpselt samamoodi näeb ka HTML asju.

See on suhteline (ka otsene) URL, sest me ei lisa ette domeeninime ehk me ei ütle HTMLile, et mine random.ee’sse ja otsi sealt faile. Vaid, me ütleme, et otsi faile sealt, kus sa ise oled.

 

Oletame, et sinu põhi HTML fail (fail, mille kallal praegu töötad; edaspidi nimetame seda “index.html”) ja sinu alamleht ning pilt on ühes ja samas kaustas (nimetame pilti edaspidi “pilt.jpg” ja alamlehte “kontakt.html”).

Seega, et pilt HTMLi lisada tuleb kirjutada src väärtuseks lihtsalt src="pilt.jpg".

Pikk ja mitte suhteline asukoht oleks failil “pilt.jpg” midagi sellist: http://sinudomeen.com/pilt.jpg. Kuid kuna “index.html” on kaustas, kus ta näeb “pilt.jpg”, siis ta saab sellele ligi otse/suhteliselt, ilma domeeninimeta.

Tähtis on ka faililõpp (.jpg – failiformaat), et brauser saaks aru, mis failiga on tegu. Näiteks võib meil olla ka samas kaustas teine pilt “pilt.png”, mille formaat on png.

Bauser tuleb ja otsib pilti nimega “pilt.jpg”, leiab ja lisab selle HTMLi. “pilt.png” jäetakse välja, sest tegemist on teise failiformaadiga.

Alamlehe lisamine on täpselt sama lihtne – href="kontakt.html". Sama jutt, mis käis failiformaatide kohta, kehtib ka siin.

 

Nüüd aga oletame, et “pilt.jpg” on selle kausta, kus asus “index.html”, alamkaustas “pildid”. Ja oletame veel, et “kontakt.html” on ka lisatud alamkausta “alamlehed”.

Ega siin ka tegelikult midagi väga keerulist ei ole.

src väärtuseks tuleb kirjutada src="pildid/pilt.jpg". Nüüd brauser tuleb kausta, kus asub “index.html” ja otsib selle alamkausta “pildid”.

Kui brauser leiab selle, siis ta vaatab alamkausta sisse ja otsib faili nimega pilt.jpg. Leides “pilt.jpg” lisab brauser selle HTMLi.

Ja täpselt sama lugu on ka alamlehega. href väärtuseks on href="alamlehed/kontakt.html".

 

HTML pääseb ka ligi failidele, mis asuvad tema asukohast kõrgemal ehk HTML saab ka teisi faile võtta emakaustast (või emakaustadest).

Näiteks on “index.html” “random.ee” kaustas ning sul on vaja millegipärast ligi pääseda veebiserveri failidele.

Siis võib näiteks href olla selline: href="../fail_veebiserverist.for"

"../" ütleb HTMLile, et mine üks kaust ülespoole.

 

URLidega on veel üks nipp.

Nimelt on võimalik protokoll eest ära (see tähendab, kas http: või https:) võtta.

Ma soovitaks seda teha, sest protokollid võivad aeg-ajalt muutuda. Näiteks praegusel ajal vahetakse pidevalt http pealt turvalisema https peale.

Kui protokoll on vale, siis on resurssi kätte saamine takistatud.

Protokolli ära jätmiseks lihtsalt kirjuta URL ilma protokollita (nt. http://oliverpaljak.com –> //oliverpaljak.com).

Kahendloogika atribuudid

Viimane <img> elemendi atribuut, mille välja tõin (ismap – sellest ka loomulikult allpool) on kahendloogika atribuut (ehk kas tõene või väär).

Kui sa mingi kahendloogika atribuudi HTMLis ükskõik, mis elemendile lisad, siis automaatselt on lisatud kahendloogika atribuut tõese väärtusega. Kui sa aga ei lisa kahendloogika atribuuti, siis elemendil on see atribuut väära väärtusega.

Kahendloogika atribuudi väärtuseks ei ole HTMLis midagi, kuid XHTMLis (HTMLi karmimas versioonis) on kahendloogika atribuudi väärtuseks tema nimi.

Näited kahendloogika atribuudidest

<!--Tegemist ON pildi kaardiga vastavalt HTML5-->
<img src="mingi/pildi/URL" alt="mingi pilt" ismap />

<!--Tegemist ON pildi kaardiga vastavalt XHTMLile-->
<img src="mingi/pildi/URL" alt="mingi pilt" ismap="ismap" />

<!--Tegemist EI OLE pildi kaardiga vastavalt nii HTML5 kui ka XHTMLile-->
<img src="mingi/pildi/URL" alt="mingi pilt" />

Jällegi on siin täpselt samamoodi kui isesulguva elemendiga. Mina soovitaksin sul kasutada kahendloogika atribuudi väärtuseks tema nime, kuid HTMLis see midagi juurde ei anna.

Tegemist oleks lihtsalt minu arust parema koodi kirjutamisega.

Lihtsad meediaelemendid seletatult

<img /> – nagu näha on tegemist isesulguva elemendiga. <img> element defineerib HTMLis ära pildi. Kasutataksegi ükskõik, mis pildi faili näitamiseks HTMLis. Lühend img tuleb ingliskeelsest sõnast image, mis eesti keeles tähendab pilti/imagot.

<img> elemendil on üsnagi palju atribuute, millest kahte võib pidada kohustuslikuks

  • src="URL" – tähistab pildi faili URLi (veebilehe asukoht või otsene asukoht serveris/arvutis; loe src kasutamisest üleval). Siit saab HTML pildi. See on <img> elemendi esimene kohustuslik parameeter.
  • alt="alternatiivne tekst pildile" – seda atribuuti kasutatakse tihti pildi kirjeldamiseks. Atribuudi väärtus tuleb kasuks, siis kui HTML ei saa pilti mingil põhjusel antud asukohast kätte. Kui pildifail on vigane või seda ei leita üles, näidatakse seda pildi asemel. See on teine kohustuslik atribuut.
  • width="laius pikslites"– paneb paika pildi laiuse pikslites (pildi laius läheb antud väärtuse suuruseks). Võib pildi õigest proportsioonist välja viia.
  • height="kõrgus pikslites" – paneb paika pildi kõrguse pikslites (pildi kõrgus läheb antud väärtuse suuruseks). Võib pildi õigest proportsioonist välja viia.
  • longdesc="URL pikale kirjeldusele" – annab pildile (pika) kirjelduse mingist teisest allikast. Teine allikas võib asuda ka samal veebilehel, ainult teise elemendina (selle viitamisest praegu ei räägi, kuna tegemist on üsnagi harva kasutatava atribuudiga).
  • usemap="#kaardi_nimi" – lisame pildile juurde pildikaardi/hüperpildi (sellest allpool).
  • ismap="ismap" – kas tegemist on pildikaardiga (hüperpildiga)? Selle atribuudiga kaasneb ka üks kohustus, nimelt peab selle atribuudi kasutamisel olema pildi emaelemendiks <a> element.

<img> elemendil on veel atribuute, aga kuna ma enamus nendest seletan ära RWD elementidega seoses, siis kõiki ma siia ei lisanud. Täielikult välja jätan atribuudi cross-origin, sest tegemist on üsna spetsifiilise atribuudiga, mida kasutatakse harva.

<img> elementi kasutasin näidislehes esimese punkti juures, et luua lugejale mingi kujutlus, millega mulle meeldib tegeleda.

Veel kasutasin <img> elementi pildikaardina (front-end veebiarenduse kolm põhikeelt), kus lisasin <img> atribuudideks peale teiste parameetrite ka usemap, mille väärtuseks andsin pildikaardi name väärtuse koos #-märgiga alguses.

Veel lisasin atribuudiks ismap, mis ütleb, et tegemist on hüperkaardiga.

 

<map></map> – tähistab HTMLis pildikaarti. Pildikaart (ehk hüperkaart) on põhimõtteliselt pilt, millel saab määratud osade peale klikata. Määratud osad pannakse paika <area> elemendiga (sellest allpool). Ilma <area> ei ole <map> elemendist erilist kasu. Sõna map tuleb ingliskeelest ja tähendab eesti keeles kaarti.

<map> elemendil on üks temale iseloomulik ja kohustuslik atribuut:

  • name="täpne_nimi" – annab <map> spetsiifilise nime, et <img> saaks seostada ennast selle <map> elemendiga

<map> elementi kasutasin loomaks teise <img> elemendi (front-end veebiarenduse kolm põhikeelt) jaoks pildikaarti.

 

<area /> – tähistab pildikaardis klikitavat osa. Kohustuslikuks emaelemendiks on <map>.  Sõna area tuleb ingliskeelest ja tähendab eesti keeles ala.

<area> funktsionaalsus sõltub väga palju atribuudidest (paljud atribuudid on samad <a> elemendiga – otsustasin, et toon välja kõik atribuudid, ka need, mida HTMLi kursuse 3. osas ei toonud).

  • href="URL" – määrab ära kuhu kasutaja viiakse (või mida kasutajale näidatakse) brauseris (ehk ühesõnaga URL sihtkoha jaoks), kui kasutaja klikkab ala peal.
  • hreflang="tähestiku_kood" – paneb paika, mis tähti toetab href atribuudi väärtus. Terve nimekirja tähestiku koodidest võib leida siit. Kõige kasutatum on arvatavasti UTF-8, mis toetab väga palju tähti, sealhulgas ka täpitähti.
  • alt="kirjeldav tekst alale" – seda atribuuti kasutatakse pildikaardi ala kirjeldamiseks. Kohustuslik kui href atribuut on esindatud.
  • download="download" – kahendloogika atribuut; kas href väärtuse (ehk sihtkoha faili) peaks alla laadima klikkimise ajal?
  • type="MIME-type" – defineerib ära, mis on sihtkoha faili täpne failiformaat.
  • rel="väärtus" – määrab ära suhte praeguse dokumendi ja sihtkoha vahel. Täpsemalt selle atribuudi kohta loe siit – tegemist ei ole tihti kasutava atribuudiga.
  • target="väärtus" – defineerib ära, kuidas link avatakse. Olen korra selle parameetri ka läbi võtnud <a> elemendiga HTMLi kursuse 3. osas.
  • shape="default | rect | circle | poly" – määrab ära milline on klikitava ala kuju. shape parameetrit kasutatakse koos coords parameetriga.
    • shape="default" – määrab kujundiks terve pildikaardi
    • shape="rect" – määrab kujundiks ristküliku
    • shape="circle" – määrab kujundiks ringi
    • shape="poly" – määrab kujundiks hulknurga
  • coords="väärtus" – määrab ära <area> elemendi shape koordinaadid ja ka suurused pikslites. coords väärtus sõltub shape väärtusest, seega kui:
    • shape="default", siis coords atribuuti pole mõtet defineerida, sest shape="default" paneb paika, et <area> on terve pildikaardi suurune
    • shape="rect", siis coords="x, y, x2, y2", kus x on ristküliku vasakpoolse külje kaugus pildikaardi vasakust servast ; y on ristküliku ülemise külje kaugus pildikaardi ülemisest servast; x2 on ristküliku paremapoolse külje kaugus vasakust servast; y2 on ristküliku alumise külje kaugus ülemisest servast.
    • shape="circle", siis coords="x, y, r", kus x on ringi keskpunkti kaugus vasakust servast; y on ringi keskpunkti kaugus ülemisest servast; r on ringi raadius.
    • shape="poly", siis coords="x1, y1, x2, y2, ... , xn, yn", kus koordinaadid määravad ära hulknurga külje tipud. Kui hulknurga viimase külje tipud ei ühti hulknurga algus kordinaatidega, siis brauser “sulgeb” hulknurga ise.

Et sa asjast natukene paremini aru saaksid, siis ma korra laskun arvutigraafika maailma, täpsemalt 2D graafika maailma.

Kujundeid/aknaid joonistatakse arvutites nõnda, et ekraani üleval vasakul olev nurk on null ehk algpositsioon. See tähendab, et selle koordinaadid on (0; 0) ehk x on 0 ja y on 0.

Ning maksimum positsioon on all paremal olev nurk. See sõltub ekraani laiusest ja kõrgusest. Aga kui ekraani laiuseks on 800 ja kõrguseks 600, siis selle punkti koordinaadid on (800; 600)

Et nüüd joonistada näiteks ristkülik ekraanile, tuleb panna paika, kus me tahame kõigepeaelt ristküliku joonistada.

Oletame, et paneme ristküliku algus koordinaatideks (100; 50) ehk ristkülik on ekraani vasakust äärest 100 ühikut paremal pool ja 50 ühikut ekraani ülevast äärest allpool.

Nüüd kui paika paneme laiuse ja kõrguse (näiteks laius: 50 ja kõrgus: 100), siis arvuti (või joonistustööriist) lisab x koordinaadile 50 ühikut ja täidab näiteks x kordinaadi ja laiuse vahele jäänud ala valitud värviga.

Ja täpselt samamoodi toimub asi ka y koordinaadi ja kõrgusega.

Väikene joonis arvutigraafika põhiprintsiipidest

 

Põhimõtteliselt on printsiibid samad ka pildikaardi juures. Aga ainult ristkülik (shape="rect") ja hulknurk (shape="poly") on erinevad.

Hulknurk erineb väga palju (ka tavalistes joonistamismeetodites), selletõttu praegu hulknurgast ma ei räägi. Räägin ainult pildikaardi ristkülikust.

Nimelt on shape="rect" võimalikeks koordinaatideks coords="x, y, x2, y2", see tähendab seda, et meil ei ole paika pandud laiust ja kõrgust ise, vaid see on välja toodud teise koordinaadina.

Põhimõtteliselt saab shape="rect" laiust muuta nõnda, et x väärtus on väiksem kui x2 oma. Ehk laius = x2x

Näiteks kui x väärtuseks on 20 ja x2 väärtuseks 30, siis brauser joonistab esimese külje 20 ühikut pildikaardi vasakust küljest ja teise ( x küljega paralleeris oleva) külje 30 ühikut pildikaardi vasakust küljest.

Seega laius oleks praegusel juhul: laius = 30 - 20 = 10.

Täpselt samamoodi toimub ka kõrgusega.

 

Nüüd tagasi <area> elemendi juurde. Nimelt kasutasin ma <area> elementi <map> sees, et loomulikult ära defineerida klikitavad alad hüperkaardi sees (kolme veebiarenduse põhikeele logod).

 

<source /> – defineerib HTMLis ära pildi-/video-/audiofaili allika URLi koos faili tüübiga. Seda kasutatakse tihti erinevatele failidele viitamiseks. See tuleb kasuks, siis kui mingi fail on kadunud või seda ei toetata. Lisaks sellele on <source> element tähtis ka RWD’s. Sõna source tuleb ingliskeelest ja tähendab eesti keeles allikat/lähet.

<source> elemendi atribuudid sõltuvad tema emaelemendist. Ma seletan iga emaelemendi juures täpsemalt, mida mingi atribuut tähendab või teeb, aga ma toon siin välja kõik (välja arvatud RWD’ga seotud) atribuudid.

  • src="URL" – kohustuslik, siis kui emaelemendiks on <audio> või <video>. Tähistab video või audio faili URLi.
  • type="MIME-type" – defineerib ära täpselt, mis failiga on tegemist. Kõik MIME tüübid võib leida siit. type ei ole kohustuslik, aga see on soovituslik, sest nii saab brauser paremini koodist aru.

Enda veebilehes kasutasin <source> elementi nii videote kui ka audiofailide kätte saamiseks allikatest.

 

<video></video> – defineerib HTMLis ära video. Lubatud video formaadid on MP4 (kõige rohkem toetatud), Ogg ja/või WebM. Kui <video> elemendi sisse panna tekst, siis seda näidatakse videote asemel brauserites, mis <video> elementi ei toeta (seda võib nimetada ka veatekstiks). Sõna video tuleb inglisekeelest ja tähendab eesti keeles videot.

Sarnaselt <img>elemendile on <video> elemendil ünsagi palju ja ühesuguseid atribuute. <video> elemendil on üks poolkohustuslik atribuut ja see on src.

  • src="URL" – tähistab video faili URLi. Siit saab HTML video.
  • poster="URL" – video pisipilt, mida näidetakse enne video mängimist või video laadimise ajal. Kui seda parameetrit ei ole, kasutab brauser video esimest kaadrit pisipildina.
  • controls="controls" – kahendloogika atribuut; kas videol peaksid olema kontrollnupud (kasutaja saab videot käivitada, seisma panna jne)
  • autoplay="autoplay" – kahendloogika atribuut; kas video peaks algama koheselt kui video laetud saab
  • loop="loop" – kahendloogika atribuut; kas video peaks ära lõppemisel uuesti otsast alustama (kas video on silmuses)?
  • muted="muted" – kahendloogika atribuut; kas video on hääletu?
  • width="laius pikslites"– paneb paika video laiuse pikslites (laius läheb antud väärtuse suuruseks). Võib video õigest proportsioonist välja viia.
  • height="kõrgus pikslites" – paneb paika video kõrguse pikslites (kõrgus läheb antud väärtuse suuruseks). Võib video õigest proportsioonist välja viia.
  • preload="auto | metadata | none" – paneb paika, millal video veebilehte laetakse. NB! video laadimine ei tähenda video mängimist (video mängimist kontrollivad atribuudid controls ja autoplay).
    • preload="auto" – kogu video laaditakse veebilehe laadimise ajal. See on olemas ka vaikimisi
    • preload="metadata" – ainult video metadata (lühidalt öeldes andmete digitaalne kirjeldus) laaditakse veebilehe laadimise ajal. Tavaliselt laetakse kogu video ära, siis kui kasutaja otsustab videot vaadata.
    • preload="none" – videot ega selle metadata ei laadita üldse veebilehe laadimise ajal. Tavaliselt laetakse video ära, siis kui kasutaja otsustab videot vaadata.

<video> elementi kasutasin enda veebilehes tegelikult kahes kohas. Esimeses kasutasin videot src atribuudiga (blogi näide – Tere internet! See on minu esimene postitus) ning teises kohas <source> elemendiga (investeerimisest näide). Kasutuste eesmärgiks oli täpselt sama, mis pildiga – luua lugejale väikene ettekujutus sellest, millega tegelen.

Blogi näites kasutasin atribuute, mis ei andnud kasutajale erilist kontrolli video üle, kuid investeerimisega seotud näites saab kasutaja videot pausi peale panna, minna valitud minutile ning teha video suureks.

<source> elementi kasutasin kaks korda, et defineerida kaks sama sisuga, aga erineva failiformaadiga video URL’i.

Kood <video> elemendis, mis kasutas <source> elementi.

<video controls="controls" muted="muted">

  <!--Esimene video fail, mis näidatakse, siis kui brauser toetab seda-->
  <source src="http://oliverpaljak.com/wp-content/uploads/2017/01/stock_ipsum_video.webm" type="video/webm"/>

  <!--Teine video fail, mis näidatakse, siis kui brauser ei toeta esimest-->
  <source src="http://oliverpaljak.com/wp-content/uploads/2017/01/stock_ipsum_video.mp4" type="video/mp4"/>

  <!--Veatekst, kui brauser ei toeta video elementi-->
  Video ei ole sinu brauseris toetatud
</video>

 

<audio></audio> – tähistab HTMLis heli või muusikat. Lubatud heli faili formaadid on MP3 (kõige rohkem toetatud), Ogg ja/või Wav. Kui <audio> elemendi sisse panna teksti, siis seda näidatakse audio asemel brauserites, mis ei toeta <audio> elementi (ehk veatekst). Sõna audio tuleb ingliskeelest ja tähendab eesti keeles heli.

Nagu näha on <audio> element väga sarnane <video> elemendiga.

Ja nii on ka atribuutide koha pealt. Kõik atribuudid on samad, mis <video> elemendil, välja arvatud poster, width ja height. Neid kolme ei ole <audio> elemendil esindatud.

Enda veebilehes kasutasin <audio> elementi, et lugeja saaks kuulata ühe episoodi raadiost “Äripäev eetris”.

<audio> element koos <source> elemendiga on täpselt samasugune kui <video> elemendil.

 

<iframe></iframe> – defineerib HTMLis ära sisemise “raami”. Tegemist võib olla natukene raskesti mõistetava elemendiga, aga põhiliseks ülesandeks on <iframe> lisada HTMLi kuskilt mujalt veebilehest saadud resurss/sisu. Selleks võib olla nii pilt, video kui ka teine veebileht ise. <iframe> saab lisada ükskõik, mis meediafaili veebilehte jättes samal ajal alles kõik stiilid ja funktsioonid, mis on originaalses veebilehes. Veateksti, kui brauser <iframe> elementi ei toeta, saab lisada <iframe> sisse. Lühend iframe tuleb ingliskeelsest väljendist inline frame ning eesti keeles tähendab see otsetõlkes sisemist raami.

Näiteks saab YouTube’st videoid <iframe> elemendiga lisada enda veebilehte. <iframe> jätab alles kõik YouTube’i video stiilid ja funktsioonid

<iframe> atribuudid on järgmised:

  • src="URL" – tähistab <iframe> sisu kõrvalisest allikast ehk URL’i. Võib olla ükskõik, mis (veebileht, video, pilt, audio jne)
  • srcdoc="HTML_kood" – tähistab <iframe> ise tehtud sisu. Väärtuseks on tavaline HTMLi kood. Seda kasutatakse, siis kui on soov luua <iframe> elementi uus sisu, mis ei sõltu src atribuudist. NB! Kui brauser ei toeta srcdoc atribuuti, siis brauser võtab siiski <iframe> elemendi sisu src atribuudist (kui src atribuut on olemas)
  • name="tekst" – nimi <iframe> elemendile
  • width="laius pikslites" – paneb paika <iframe> kindla laiuse pikslites
  • height="kõrgus pikslites" – paneb paika <iframe> kindla kõrguse pikslites
  • sandbox="väärtus" – lisa <iframe> “liivakasti moodis” (piira <iframe> tegevusi)
    • sandbox="sandbox"<iframe> elemendis on keelatud formid, APId, hüpikaknad kui ka skriptid
    • sandbox="allow-forms" – luba formid
    • sandbox="allow-pointer-lock" – luba APId
    • sandbox="allow-popups" – luba hüpikaknad
    • sandbox="allow-same-origin" – luba <iframe> elemendil käituda täpselt samamoodi kui originaalses allikas
    • sandbox="allow-scripts" – luba skriptid

Väikene side-note.

Nimelt võivad osadel parameetridel olla mitu väärtust koos (tühikuga eraldatud).

Näiteks sandbox parameetris võime panna väärtuseks sandbox="allow-forms allow-scripts" – see tähendab, et luba formid ja luba skriptid.

NB! See ei kehti paljudel atribuutidel, aga osadel küll.

Enda veebilehes kasutasin <iframe> elementi, et lisada mu blogi veebilehele, et kasutajad, kes ei viitsi minna mu blogile, saavad blogile ligi otse sealt.

 

<object></object> – tegemist on meediafailide multitool’iga, sest <object> elementi saab panna sisu piltidest kuni välispluginateni välja. See on väga dünaamiline element ning sarnaneb tegelikult <iframe> elemendiga, kuid kui <iframe> kasutatakse selleks, et saada mingit sisu kätte teistest veebilehtedest, siis <object> elementi kasutatakse nii sisu kätte saamiseks teistest veebilehtedest, piltide näitamiseks, videote/audio mängimiseks kui ka välispluginate töötamiseks HTMLis. Veateksti saab loomulikult lisada
<object></object> sisse. Sõna object on ingliskeelne sõna ja eesti keeles tähendab see objekti.

Loomulikult sõltub <object> elemendi funktsionaalsus väga palju atribuudidest:

  • data="URL" – põhiliselt sama, mis <iframe>  atribuut src="URL".  Tähistab <object> sisu URL’ist.
  • form="form_id" – tähistab ära, milliste formide juurde <object> kuulub, aga kuna tegemist on järgmise postituse teemaga, siis siinkohal ma rohkem sellest ei räägi.
  • name="tekst" – annab <object> elemendile kindla ja spetsiiflise nimetuse
  • type="MIME-type" – määrab täpselt ära, mis liiki failiformaat on <object> element
  • usemap="#kaardi_nimi" – kuna <object> saab olla ka pilt, siis saab seda ka kasutada kui hüperkaarti
  • width="laius pikslites" – paneb paika <object> kindla laiuse pikslites
  • height="kõrgus pikslites" – paneb paika <object> kindla kõrguse pikslites

Enda veebilehes kasutasin <object> elementi oma veebilehe lõpetamiseks. Mul ei tulnud midagi paremat pähe kui lisada <object> element pildi elemendina, kuigi oleks parem kasutada <img> elementi, sest see on selleks mõeldud.

 

Et <object> saaks paremini töötada, siis on ka tal olemas abilapselement, mis suudab mõjutada <object> elemendi funktsionaalsust.

See element on <param>.

<param /> – väga, väga umbmäärane element. Miks? Sest sellega saab paika panna ükskõik, mis parameetrid (ehk atribuudid) ja nende väärtuseks saab ka panna ükskõik mida. Sellele umbmäärasusele aitab kaasa ka veel see, et <object> element võib olla, mis tahes.

<param> elemendil on kaks atribuuti

  • name="parameetri nimi" – määrab ära, mis parameetriga/atribuudiga on tegemist
  • value="parameetri väärtus" – annab parameetrile väärtuse

Näiteks on sul <object> elemendiks audiofail. Siis sa saad <param> elemendiga paika panna selle audiofaili parameetrid/atribuudid.

Näide

<object data="mingi_audio.mp3" type="audio/mp3">
  <!--Alusta audio mängimist koheselt-->
  <param name="autoplay" value="true">
</object>

<!--Ülemine kood on samaväärne sellega siin-->
<audio src="mingi_audio.mp3" autoplay="autoplay"></audio>

 

 

<embed /> – jällegi väga sarnane element kahe eelmisega. HTML on ikka segadust tekitav 😀 . <embed> elemendi ülesandeks lisada veebilehte kas pluginaid või muud interaktiivset sisu. Interaktiivse sisu all mõeldakse sisu, millega kasutaja peab suhtlema. Nüüd <embed> saab kasutada ka muusuguste meediafailide näitamiseks (pildid, videod jne), aga see pole soovituslik, sest see on tegelikult ünsagi vana element ja soovutuslik oleks kasutada <iframe> või äärmisel juhul (kui  <iframe> ei toeta meediafaili, nt erinevad pluginad) <object> elementi.

<embed> elementi võib pidada jäänukiks, kuigi esmakordselt võeti <embed> element kasutusele just HTML5. Varem brauserid lihtsalt toetasid seda, HTML4 seda ametlikult ei toetanud.

Selletõttu oleks ka parem kasutada <object> elementi ka pluginate ja muude interaktiivse sisu juures.

Aga kuna <embed> element HTML5 sees, siis selle atribuudid on järgmised:

  • src="URL" –  tähistab <embed> sisu URL’ist.
  • type="MIME-type" – määrab täpselt ära, mis liiki failiformaat on <embed> element
  • width="laius pikslites" – paneb paika <embed> kindla laiuse pikslites
  • height="kõrgus pikslites" – paneb paika <embed> kindla kõrguse pikslites

Näide

<embed type="video/quicktime" src="movie.mov" width="640" height="480" />

 

 

Nüüd <object> ja <embed> elemendiga saab lisada põhimõtteliselt ükskõik, mis meediafailid. See on nii hea kui ka halb.

Nimelt kui HTMLis ei ole spetsiaalselt olemas sellist meediaelementi, mida tahaksid lisada, siis <object>  või <embed> saavad sellega väga hästi hakkama.

Kuid kui HTMLis on olemas soovitud meediaelement (näiteks audio, videod ja pildid), siis ma soovitaksin kasutada neid olemasolevaid elemente, sest need on optimeeritud just nendele meediafailidele (jõudlus on parem).

 

Koduseks ülesandeks annaksin ma sulle selle, et sa teeksid veebilehe, kus kasutad kõiki lihtsamaid meediaelemente. Hea oleks, kui kasutad ka varem õpitut!

Ning nagu ikka, kui küsimusi tekib, siis küsi neid julgelt kommentaarides 🙂 !

 

Järgmine osa: HTMLi kursus #6.2 – keerulised meediaelemendid

 

Senikaua ole tugev ja kohtume juba järgmistes postitustes,

Tähelepanu eest tänades – Oliver Paljak

P.S! Kui oled huvitatud animatsioonilisest veebilehest, siis võta minuga julgelt ühendust AnsiVeebi kodulehel.

Leave a Reply

Your email address will not be published. Required fields are marked *