Wikiversity

Programmeerimise algõpe: HTML - pildid.


< Programmeerimise algõpe

Pildid [1]

edit

Pilt ja raam

edit

Pildiraamiks on <img sildiga element (HTML tag). Otsime siis selle sama lehe koodist mõne pildi.

Näiteks: 

<img src="/images/wikimedia-button.png" width="88" height="31" alt="Wikimedia Foundation"/>

Selle moodustab

  1. <img silt
  2. src atribuut , mille väärtus /images/wikimedia-button.png annab prauserile aadressi, kust ta leiab raamis kuvatava pildi.
  3. alt atribuuti kirjutatakse pildi lühitutvustus, mida näidatakse seni, kuni veebilehitseja selt aadressilt pilti pole saanud. Kui pilt ei vääri ajakulu, siis kasutaja teab prauseri punase kaldristiga (X) nupust lehe laadimise katkestada.
  4. width ja height atribuut määravad vastavalt raami laiuse ja kõrguse. Kui mõõtühikuid pole lisatud, siis mõõdetakse pikslites [2]. Kujundada tuleks edaspidi siiski CSS 'i abil, sest Javascript tarvitab width atribuuti pildi enda tegeliku laiuse määramiseks. Kui raami mõõtmed erinevad pildi tegelikest mõõtmeist, siis prauser venitab või pitsitab pildi raami suuruseks.
  5. Elementi lõpetava nurksulu > ees peab XHTML standardi kohaselt olema tõusev murdjoon /. HTML reeglite järgi seda seal olla ei tohtinud. Sulgevat paarilist </img> ei ole XHTML ega HTML süsteemis.
  • src atribuudi väärtus /images/wikimedia-button.png on siin suhteline ( URL ) aadress. Kui ma selle oma veebilehitseja aadressiribale sisestan, siis ei leia too midagi. Tegelikult prauser küsib pilti hoopis sealt: "http://beta.wikiversity.org/images/wikimedia-button.png". (Vajutan pildi peal hiire paremat klahvi ja valin avanenud loendist "Properties". Avanenud aknakeselt leiangi pildi absoluutse ( URL ) aadressi. )

Tundlik pilt

edit

Wikimedia kasutab äsja vaadeldud pilti lingina, mis suunab nende esilehele: http://wikimediafoundation.org/.

Vaatame koodi: 

<a href="http://wikimediafoundation.org/"><img src="/images/wikimedia-button.png" width="88" height="31" alt="Wikimedia Foundation"/></a>

Lahendus on lihtne. Pilt asub hüperlingi sees.

  • On ka mitmekülgsemaid võimalusi [3].

Ühel pildil saab määrata mitu tundlikku ala, mis vastavad kasutaja toimingule erinevalt.

Näiteks: 

<img
	 src="http://beta.wikiversity.org/images/wikimedia-button.png"
	 width="800"
	 height="300"
	 alt="Wikimedia Foundation"
	 usemap="#WikimediaMap"
 />

<map name="WikimediaMap" id="MapOfWikimedia">
  <area
	 shape="circle"
	 coords="140,155, 115"
	 href="http://wikimediafoundation.org/"
	 alt="wikimediafoundation"
	 title="Go to Wikimedia Foundation."
	 target="_blank"
 />
  <area
	 shape="poly"
	 coords="280,105, 475,105, 515, 25, 560,105, 760,105, 280,535, 475,535, 560,535, 760,535"
	 href="http://beta.wikiversity.org"
	 alt="wikiversity"
	 title="Go to Wikiversity."
	 target="_blank"
 />
</map>

See kood venitab sama pildi suuremale raamile, mis on küll kole, aga lihtsustab minu näidet.

  • Kui viia hiir (cursor) ümara puna-sini-rohelise pildikese kohale, siis peaks hiire asukohta märkiv nooleke muutuma osutava näpuga kämmalt kujutavaks pildikeseks, mis tavaliselt tähistab linke ja tundlikke alasid. Mõne hetke pärast peaks ilmuma väike hoiatav teade "Go to Wikimedia Foundation." ja kui selle koha peal klõpsata, siis avanebki Wikimedia Foundation'i leht uues aknas.
  • Kui viia hiir (cursor) "A WIKIMEDIA project" texti kohale, siis peaks hiire asukohta märkiv nooleke taas muutuma osutava näpuga kämmalt kujutavaks pildikeseks. Mõne hetke pärast peaks ilmuma väike hoiatav teade "Go to Wikiversity." ja kui selle koha peal klõpsata, siis avaneb Wikiversity esileht uues aknas.

Aga uurime pisut koodi!

  1. Meile tuttav <img element on saanud usemap atribuudi, mille väärtus algab # märgiga [4].
    1. Otsime # märgile järgnevat WikimediaMap juppi koodist ja leiame järgnevalt <map elemendilt sama väärtusega name atribuudi, mis tähendab, et see pilt on seotud tolle <map elemendiga, mis asub sama lehe koodis.
  2. <map elemendi sees [5] olevad
    1. <area elemendid [6] kirjeldavadki tundlikud alad pildil ja nende käitlemise tagajärjed.
      1. shape atribuut määrab selle <area elemendi ehk tundliku ala kuju [7].
        1. circle ütleb, et tundlik ala olgu ümmargune.
        2. rect ütleb, et tundlik ala olgu ristkülik.
        3. poly ütleb, et tundlik ala olgu hulknurk.
        4. default ütleb, et tundlik olgu kogu pildi pind.
      2. coords [8] atribuut määrab selle <area elemendi ehk tundliku ala kauguse pildi vasakust ülemisest nurgast pikslites [9] mõõdetuna.
        1. Kui shape atribuudi väärtus oli circle, öeldakse prauserile komaga eraldatud kolme täisarvuga sõõri keskpunkti kaugus rõht- ja püstsihis ning raadius (x,y,radius).
        2. Kui shape atribuudi väärtus oli rect, öeldakse prauserile komaga eraldatud nelja täisarvuga ristküliku vasaku ülanurga ja parema alanurga asukoht (x1,y1,x2,y2).
        3. Kui shape atribuudi väärtus oli poly, öeldakse prauserile komaga eraldatud täisarvudega hulknurga iga nurga asukoht (x1,y1,x2,y2,..,xn,yn).
        4. Kui shape atribuudi väärtus oli default, siis pole sel atribuudil mõtet.
      3. href atribuut määrab, kuhu klõpsijad edasi suunatakse.
      4. alt atribuut [10] on kohustuslik, kuigi kõik tuntumad prauserid eiravad teda. Sinna kirjutatud tundliku ala lühitutvustust peaks näidatama seni, kuni veebilehitseja pole pilti kätte saanud.
      5. title atribuudiga [11] saab anda kasutajale lisateavet selle HTML elemendi kohta, mille kohal arvutihiir (cursor) peatub. Selgitav jutt ilmub mõne hetke pärast elemendi kõrvale kollaka taustaga raami ja kaob, kui hiir selle elemendi pealt lahkub. Nii saame teavitada oma kalleid külastajaid, mis need tundlikud alad võivad teha.
      6. target atribuut [12] määrab, kus aknaraamis uus leht avatakse.
        1. target="_blank" palub selle avada uues aknas.
  • <area elementi lõpetava nurksulu > ees peab XHTML standardi kohaselt olema tõusev murdjoon /. HTML reeglite järgi seda seal olla ei tohtinud. Sulgevat paarilist </area> ei ole XHTML ega HTML süsteemis.


  • Ära pane oma lehtedele ülearu palju ega ülearu suuri pilte! Nende ilmutamine võtab palju aega. Külastaja ei tarvitse oodata, kuni prauser need kätte saab ja võib su lehelt üldse lahkuda.
  • Ära pane oma esilehele suuri pilte üldse! Hiljem õpime, kuidas viivitada piltide laadimist JavaScriptiga.


Ülesanne

edit
      • Paranda alati vead (, kui neid on), et failid valideeruksid [13] ! Kasuta sellist standardit:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html lang="et" xml:lang="et" xmlns="http://www.w3.org/1999/xhtml">
		<head>
			<meta http-equiv="content-type" content="text/html;charset=utf-8" />
			<title> Pilt </title>

		</head>
		<body>
Oma kood kirjuta siia!
		</body>
	</html>



Vastused

edit
  • õpilane :

" aga mul tekkis probleeme piltide valideerimisega - see ok loenduri antud kood ei valideeru 

<A HREF="http://counter.ok.ee/stats.php?ID=3a76c0aa39e810">
<IMG SRC="http://counter.ok.ee/counter.php?ID=3a76c0aa39e810&amp;stiil=1" 
BORDER=0 NOCACHE></A>

"


    • õpetaja : "

Esiteks meie norm nõuab atribuutide ja elementide nimede kirjutamist väiketähtedega (välja arvatud <!DOCTYPE ise). 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Peale selle validaator peaks ju ütlema, et <img element on vigane. Üks atribuut on puudu ja teine valesti kirjutatud. Ega need loenduri pakkujad ei pruugi ka kõike õigesti teha. "


  • õpilane :

" img elemendil oli / lõpust puudu. aga teisest ma küll aru ei saa - kus see on? "


    • õpetaja : "

http://www.w3schools.com/tags/tag_IMG.asp 

Required Attributes

...
Attribute 	Value 	Description 	DTD
alt 	text 	Specifies an alternate text for an image 	STF
src 	URL 	Specifies the URL of an image 	STF

"


  • õpilane :

" aga kuidas ma selle siis valideruma peaks panema? "


    • õpetaja : "

Mida tähendab Required Attributes? "


  • õpilane :

" nõutud atribuudid "


    • õpetaja : "

Just! Ja milliseid atribuute see <img element siis igal juhul nõuab? "


  • õpilane :

" src, alt, width ja height?

aga need mõõtmed on ju soovituslikud või pole? "


    • õpetaja : "

Miks sa arvad, et just need? "


  • õpilane :

" no src on vist kõige tähtsam - see näitab, kust pilt võtta

alt on ka soovituslik vist? "


    • õpetaja : "

Loe rahulikult läbi! Ära rabista!

Mine ikka sinna lehele lugema! Ära ela ainult msn 'is! "


  • õpilane :

" puudu on alt ja seda nocache pole vaja?????? "


    • õpetaja : "

JUst 

Line 60, Column 18: "nocache" is not a member of a group specified for any attribute 
 border=0 nocache></a>

Selle ehk parandad ise: 

 alt="kaunter ehk loendur/>

Selle kah: 

  border=0

"


  • õpilane :

" ma ilmselt ei oskaseda siis lugeda ::) "


    • õpetaja : "
Line 11, Column 111: general entity "stiil" not defined and no default entity 
…rc="http://counter.ok.ee/counter.php?ID=3a76c0aa39e810&stiil=5" 

✉ 

This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. 
See the previous message for further details.

See tähendab lühidalt, et aadress on neil kah vigane. Peab olema: src="http://counter.ok.ee/counter.php?ID=3a76c0aa39e810&amp;stiil=5"


Sellest räägime hiljem:

http://beta.wikiversity.org/wiki/Programmeerimise_algõpe:_HTML_ja_tähestikud#T.C3.A4hekoodid_.5B11.5D_.5B12.5D_.5B13.5D_.5B14.5D "


  • õpilane :

" ee... ma ei saa aru, kuidas see tähestik sinna puutub

see stiil=5 näitab ju et valisin 5nda stiili oma kaunteri välimuseks "


    • õpetaja : "

Tähestikust pole aega täna rääkida.

Ta lõikab selle aadressi & koha pealt katki, arvab, et sa oled unustanud jutumärgid sulgeda ja siis üritab leiutada mingit stiil'i.

& ja ka mõne teise märgiga ei tohi HTML'is möllata, näiteks < tekitas meil kah kunagi segaduse. Prauser ju ei näidanudki meile osa juttu. "


  • õpilane :

" selge... aga see siis ei hakkagi valideeruma või? "


    • õpetaja : "

Parandasin ju ää.

&amp; peab & asemel olema.

Ja igal pool mujal kah HTML'is. "


  • õpilane :

" üldse näitab see loendur suure viitega (nagu oleks viimane vaatamine olnud 10 jaanuar) "


    • õpetaja : "

Ei näita ju. 

Viimased 10 külastajat:
62.65.217.31.cable.starman.ee 2010-01-26 15:17:14
62.65.210.9.cable.starman.ee 2010-01-20 17:30:30
80.235.36.205 2010-01-12 23:34:58
80-235-34-45-dsl.mus.estpak.ee 2010-01-05 15:59:00

2010-01-26 oli viimane. "


Viited

edit
  1. ↑ HTML <img> Tag
  2. ↑ Pixel From Wikipedia, the free encyclopedia
  3. ↑ HTML <img> usemap Attribute
  4. ↑ HTML <img> usemap Attribute
  5. ↑ HTML <map> Tag
  6. ↑ HTML <area> Tag
  7. ↑ HTML <area> shape Attribute
  8. ↑ HTML <area> coords Attribute
  9. ↑ Pixel From Wikipedia, the free encyclopedia
  10. ↑ HTML <area> alt Attribute
  11. ↑ HTML title Attribute
  12. ↑ HTML <area> target Attribute
  13. ↑ Markup Validation Service
Retrieved from "https://beta.wikiversity.org/w/index.php?title=Programmeerimise_algõpe:_HTML_-_pildid.&oldid=101196"