Html pildid
HTML'i abil saab kasutada pilte veebidokumendis.
Pilt määratletakse <img> märgisega. See märgis sisaldab ainult atribuute ja sellel puudub lõpumärgis.
Selleks, et pilt kuvataks on vaja veel kasutada src ("source") atribuuti. Atribuudi väärtuseks on URL aadress, kus pilt asub.
Selline on Html kirjapilt:
<img src="url">
Brauser paigutab pildi just sinna kuhu pildi märgis on kirjutatud. Kui pilt paigutada kahe paragrahvi vahele siis kuvatakse kõigepealt paragrahv, seejärel pilt ning siis teine paragrahv.
"Alt" atribuut
Seda atribuuti kasutatakse pildi alternatiiv-teksti kuvamiseks. "Alt" atribuudi väärtuseks on pildi autori poolt valitud tekst.
<img src="pall.gif" alt="Kirju Pall">
Alternatiiv-tekst on vajalik sellisel juhul kui brauser ei suuda pilti ülesse leida v. alla laadida. Sellisel juhul ilmub ekraanile pildi asemel alternatiiv-tekst.
Samuti on see vajalik külastajatele kes kasutavad ainult tekstipõhiseid brausereid.
NB! Ole piltide kasutamisel tagasihoidlik. Suurte piltide alla laadimine võtab aega.
Vajalikud Näpunäited
Selleks, et pilti oma veebilehele paigutada on vaja see kõigepealt alla laadida. Internetis leidub palju tasuta pilte mida võib kasutada ja muuta oma tahtmise järgi. Kui vajalik pilt leitud siis tee parem-klõps pildil ning vali "Save picture as...".
Pane tähele: Salvesta pilt samas fali-formaadis ja suuruses nagu originaalis.
Nüüd kus pilt on sinu arvutis võid seda hakata töötlema. Näiteks: kärpida v. suurendada, muuta heledust-kontrastsust, lisada ja kustutada detaile jne. jne.
Kui pilt valmis siis tuleb see oma veebikontole ülesse laadida. Pärast seda toimingut saab pilt oma veebiaadressi. Seda aadressi kasuta oma pildi kuvamiseks veebilehel.
Näiteks:
<html>
<body>
<img src="http://www.minusait.net/pildid/minupilt.gif"
alt="minupilt"
width="100" height="120">
</body>
</html>
Pane tähele: Pilt peab alati olema "body" elemendi sees.
Pane tähele: Kui sa kasutad XHTML'i siis tuleb pildi element sulgeda lõpumärgiga.
Näiteks:
<img src="http://www.minusait.net/pildid/minupilt.gif" alt="minupilt" width="100" height="120" />
Pane tähele: Ära kasuta "width" ja "height" pildi suuruse muutmiseks. Vastasel juhul kuvab brauser seda halvasti.
Pildi paigutamine teksti suhtes
Pilt ja tekst on mõlemad veebielemendid. Kui need kirjutada üksteise järel HTML koodi siis brauser kuvab need samuti üksteise järel. S.t. et pildi kõrval olev veebilehe osa jääb tühjaks. Selleks, et seda vältida ja veebilehe ruumi kokku hoida on vaja kasutada align atribuuti, elemendi sees.
Näiteks:
<img src="URL" alt="alternatiiv tekst" width="laius" height="kõrgus"
align="right" />
Ülal toodud näites nihutatakse pilt teksti suhtes paremale.
See on üks võimalus manipuleerida Html elementidega kuid soovitav on siiski kasutada CSS stiili elemente
Pealkirja lisamine pildile
Alapealkiri võimaldab pildile anda lisa informatsiooni. Selleks tuleb kasutada lisa Html v. Css elemente.
Näiteks:
<div style="width:223px;
font-size:80%; text-align:center;">
<img src="pilt.png"
alt="Pilt"
width="223" height="128"
style="padding-bottom:0.5em;" />
VermeerVanDelft
</div>
Mida me siis tegime? Kõigepealt:
- Piirame pildi div märgisega
- Lisame div märgisele atribuudi style
- Lisame div laiuse, mis on sama suur kui pildil
- Tavaliselt on pildi pealkiri põhitekstist erinev. Seepärast lisame font-size omaduse
- Parema tulemuse saab siis kui pilt ja pealkiri asetsevad kohakuti. Selleks kasutame text-align omadust
- Selleks, et pilt ja pealkiri poleks teineteises kinni, kasutame badding-bottom omadust "style" elemendis
- Lõpuks lisame pealkirja kohe pärast pilti
Tulemus peaks olema selline:
VermeerVanDelft
Nipid:
CSS "width" mõõdud on mitmesugused. IE's lisa alati px väärtus.
width: 100 px;
Pildi mõõdud on alati pikselites. Seega võib IE's px lõpust ära jätta.
width: "100"
Juhul kui div laius on suurem kui pildi laius siis võib juhtuda, et brauser kuvab pildi pealkirja, pildi kõrval. Selle vältimiseks lisa <br /> märgis kohe pealkirja ette.
Kui soovid, et ülejäänud tekst kuvatakse pildi kõrval siis lisa "float" v. "align" omadus div märgise mitte pildimärgise sisse.
Näited
Pildi lisamine
Kuidas kuvatakse pilte veebilehel.
Pildi lisamine teisest kaustast
Kuidas lisada pilte serverist v.teisest kaustast.
Tausta pilt
Veebilehe kujundamine tausta-pildi abil.
Pildi nihutamine
Kuidas paigutada pilti teksti suhtes.
Pildi hõljumine (float)
Niimoodi saab pilti hõljutada paragrahvist paremale v. vasakule.
Pildi suuruse muutmine
Niimoodi saab pildi suurust muuta Html dokumendis.
Alternatiiv-tekst
Alternatiiv-teksti lisamine pildile. (Juhul kui brauser ei suuda pilti leida v. allalaadida).
Pilt lingina-2
Niimoodi saab pilti kasutada lingina, mis viib uuele veebilehele.
Pildikaart (Image map)
Pilt mille erinevad regioonid on lingid.
Pildi märgised:
| Märgis | Kirjeldus |
|---|---|
| <img> | Määratleb pildi ( kujundi ) |
| <map> | Määratleb pildivälja |
| <area> | Määratleb ala pildi sees |
