Jump to content

Programmeerimise algõpe: HTML URL

From Wikiversity


< Programmeerimise algõpe

Aadressid

[edit]

src ja URL

[edit]

Piltide ja raamidega tegeldes puutusime kokku src [1] [2] ( < source ) atribuudiga , mis teatab prauserile URL [3] aadressi, kust too võiks leida raamis näidatava lehe või pildi.

Vaatame uuesti pildiga ülesannet .


Leidsime Vikiülikoodi koodist sellise näite: 

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

/images/wikimedia-button.png on relatiivne 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". See on pildifaili absoluutne aadress - prauser näitas sama pilti ka minu enda kodukausta salvestatud koodi puhul http://www.hot.ee/vikiylikool/Pilt.html. Ta lihtsalt tõi pildi http://beta.wikiversity.org masinast ehk serverist [4]. Relatiivne aadress minu koodis ei tööta, sest prauser ei saa sellelt aadressilt http://www.hot.ee/images/wikimedia-button.png midagi.


Milline silmatorkav erinevus on relatiivsel ( /images/wikimedia-button.png ) ja absoluutsel ( http://beta.wikiversity.org/images/wikimedia-button.png ) aadressil?


Relatiivse aadressi algusest puudub peamine - viide masinale, kust faili otsida ( http://beta.wikiversity.org ).

  • Kui aadress masinale ei viita, siis eeldab prauser, et fail asub samas serveris, kus on kood.
  1. /images/wikimedia-button.png viitab tegelikult sellisele kohale http://beta.wikiversity.org/images/wikimedia-button.png , sest ta algas tõusva murdjoonega / , mis tähendab, et /images kaust ei asu (serveri silmis) üheski ülemkaustas vaid otse juurikal.
    1. Aadressides pidevalt korduv tõusev murdjoon / muidugi lihtsalt eraldab teineteise sees asuvate kaustade nimesid.
  2. Ilma tõusva murdjooneta / aadressi images/wikimedia-button.png peetaks selles samas kaustas asuvaks, kuhu oli salvestatud .html kood ( http://beta.wikiversity.org/wiki/Programmeerimise_alg%C3%B5pe ).
    1. Meie puhul otsitaks teda http://beta.wikiversity.org/wiki/ kausta alamkaustast /images ehk absoluutaadressilt http://beta.wikiversity.org/wiki/images/wikimedia-button.png , kus teda praegu pole .
  3. Täpsem viide samale kaustale , kuhu oli salvestatud .html kood oleks ./ .
    1. Ka ./images/wikimedia-button.png annaks absoluutaadressiks http://beta.wikiversity.org/wiki/images/wikimedia-button.png .
  4. Kahe punktiga ../ kausta tähis ütleb, et tuleb nihkuda kausta jagu vasakule.
    1. ../images/wikimedia-button.png annaks absoluutaadressiks http://beta.wikiversity.org/images/wikimedia-button.png , mis praegusel juhul isegi kõlbaks .


Seni pole ma oma kodulehe jaoks ühtegi kausta teinud, vaid olen salvestanud kõik .html failid otse juurikale ehk majutaja masina omanimelisse kodukausta http://www.hot.ee/vikiylikool/.

Tegelikult pole see arukas, sest kui faile saab palju, siis on neid juba jube raske hallata.


Teen katse.


Loon oma kodulehe tarvis pisut mõttestatuma struktuuri:

  • http://www.hot.ee = majutaja aadress
    • vikiylikool = minule eraldatud kodukaust NB! Enamus majutajaid nõuab, et esileht ( indeks.html vm) oleks tingimata salvestatud siia, kust server teab teda otsida, kui pöördutakse failinime täpsustamata otse minu kodulehele ( http://www.hot.ee/vikiylikool ).
      • img = piltide kaust
      • css = kujunduse kaust
      • js = Javascript'i koodi salvestiste kaust
      • html = HTML failide ülemkaust
        • ylesanded = näidisülesannete kaust


  1. Salvestan img kausta pildi, mille nimi on "NeaidisPilt.gif".
  2. Salvestan ylesanded kausta faili "Aadress.html".
  3. "Aadress.html" faili kirjutan muu hulgas sellise koodi:
<img src="http://www.hot.ee/vikiylikool/img/NeaidisPilt.gif" alt="Näidispilt 1"/>
<img src="NeaidisPilt.gif" alt="Näidispilt 2"/>
<img src="/NeaidisPilt.gif" alt="Näidispilt 3"/>

Prauser peaks nüüd http://www.hot.ee/vikiylikool/html/ylesanded/Aadress.html aadressil avama lehe, millel on üks pilt, aga teiste asemel ainult lühitutvustused "Näidispilt 2" ja "Näidispilt 3".


Teen teise katse.


  1. Salvestan ylesanded kausta faili "HeaAadress.html".
  2. "HeaAadress.html" faili kirjutan muu hulgas sellise koodi:
<img src="http://www.hot.ee/vikiylikool/img/NeaidisPilt.gif" alt="Näidispilt 1"/>
<img src="../../img/NeaidisPilt.gif" alt="Näidispilt 2"/>
<img src="../../../vikiylikool/img/NeaidisPilt.gif" alt="Näidispilt 3"/>
<img src="/vikiylikool/img/NeaidisPilt.gif" alt="Näidispilt 4"/>

Prauser peaks nüüd küll http://www.hot.ee/vikiylikool/html/ylesanded/HeaAadress.html aadressil avama lehe, millel on neli ühesugust pilti.


Relatiivne aadress võimaldab meid koostada oma koduleht kõige täiega iseenda koduses arvutis ja tõsta see siis muutmatul kujul kõigi oma alamkaustadega mistahes majutaja masinasse. Samuti lihtsustab see majutaja vahetamist.


href ja <base

[edit]

Hüperlingi href [7] atribuut teatab prauserile selle lehe URL [8] aadressi, mida peaks näitama kasutajale, kui ta seda linki on vajutanud. Ka selle aadressi puhul kehtivad eelloetletud põhimõtted.

  • Neile lisaks võib meenutada, et # viitab järjehoidjale , mis asub samal lehel.
  • href atribuut on lubatud ka <base elemendile [9]. Siiani olen palunud, et kood kirjutataks <body> </body> siltide ( HTML tag ) vahele, aga <base element peab asuma HTML koodi
		<head>

		</head>

osas.

  • <base elemendi href [10] atribuut määrab absoluutse aadressi, kuhu suunatakse kõik järgneva koodi relatiivsed aadressid.

Kõik ../ üksused nihutavad aadressi nüüdsest selle lähtekausta suhtes (kausta kaupa vasakule). Juba eespool vihjasin, et kui <base element puudub, siis peetakse lähtekaustaks sama kausta, kuhu oli salvestatud .html kood.


Teen veel ühe näite.

  1. Salvestan img kausta pildi "SininePilt.gif".
  2. Salvestan otse kodukausta juurikale pildi "PunanePilt.gif".
  3. Salvestan ylesanded kausta faili "Base.html".
  4. "Base.html" faili kirjutan sellise koodi:
<!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> Base element </title>
			<base href="http://www.hot.ee/vikiylikool/img/" target="AlgAken" />
		</head>
		<body>

			<img src="NeaidisPilt.gif" alt="Näidispilt "/>

			<a href="../html/ylesanded/HeaAadress.html"
				 title="Relatiivse aadressi näide."
			>
				<img src="./SininePilt.gif" alt="Sinine Pilt"/>
			</a>

			<img src="../../vikiylikool/PunanePilt.gif" alt="Punane Pilt"
				usemap="#MinuKaart"/>
			<map name="MinuKaart" id="KaardiIdi">
			  <area
				 shape="default"
				 href="../index.html"
				 alt="index.html"
				 title="Äpardunud esilehe näide."
			 />
			</map>

		</body>
	</html>

Prauser peaks nüüd http://www.hot.ee/vikiylikool/html/ylesanded/Base.html aadressil avama lehe, millel on kolm pilti. Sinisele pildile vajutamine peaks avama relatiivsete aadresside näite lehekülje uues aknas. Punasele pildile vajutamine peaks avama äpardunud esilehe näite selles aknas, kus enne oli see relatiivsete aadresside näide .


<base element võimaldab meid näiteks hoida oma kodulehte ja pilte (vms) erinevate majutajate masinais.


"Salakiri" [12] [13]

[edit]

Anname elule pisut vürtsi.

  1. Lähen selle kursuse esilehele http://beta.wikiversity.org/wiki/Programmeerimise_algõpe .
  2. Vajutan sisukorrast linki 1.1 Eesmärk .
    1. Veebilehitseja kerib alla poole alapealkirjani " Eesmärk ". Prauseri aadressiribale (akna ülaosas) ilmub uus aadress: http://beta.wikiversity.org/wiki/Programmeerimise_alg%C3%B5pe#Eesm.C3.A4rk .

Miks asendatakse osa tähti koodiga %C3%B5pe#Eesm.C3.A4  ?

Vastus peitub 2. ülesande lahenduses.

Ülesanne

[edit]
  • 1. Paiguta ka oma kodulehe pildid ja muud failid eraldi kaustadesse! Kirjuta kood, mis kasutaks <base elementi (näiteks: 
    <base href="http://www.wikiversity.org/" target="EsimeneAken" />
    )! Linkide, piltide ja raamide aadressid olgu relatiivsed: "/jne", "../jne"  !
  • 2. Siin on kaks ühesugust linki:
  1. http://www.hot.ee/vikiylikool/html/ylesanded/Base.html
  2. http://www.hot.ee/vikiylikool/html/ylesanded/Вase.html

Miks nad ei vii samale lehele? Abi saab sellelt lehelt: http://www.w3schools.com/tags/ref_urlencode.asp .

      • Paranda alati vead (, kui neid on), et failid valideeruksid [14] ! Kasuta sellist standardit:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Vastused

[edit]
  • õpilane :

" noh... püüan nende aadressitega toime tulla ... miskipärast ei hakka teine näide tööle nende piltidega - teist pilti ei näita http://www.majutaja.com/nikinäki/aadressid.html "


    • õpetaja : "

Oota, ma seletan! 

 <p><img src="http://www.hot.ee/vikiylikool/img/NeaidisPilt.gif" alt="Näidispilt 1"/></p>
 <p><img src="NeaidisPilt.gif" alt="Näidispilt 2"/></p>
 <p><img src="/NeaidisPilt.gif" alt="Näidispilt 3"/></p>

See on sama, nagu sa kirjutaksid nii: 

 <p><img src="http://www.hot.ee/vikiylikool/img/NeaidisPilt.gif" alt="Näidispilt 1"/></p>
 <p><img src="http://www.majutaja.com/nikinäki/NeaidisPilt.gif" alt="Näidispilt 2"/></p>
 <p><img src="http://www.majutaja.com/NeaidisPilt.gif" alt="Näidispilt 3"/></p>

Sinu lehe aadress on:

http://www.majutaja.com/nikinäki/aadressid.html

See tähendab, et prauser küsib majutajalt sellist faili: "aadressid.html"

Ja ta küsib seda sellisest kaustast: "http://www.majutaja.com/nikinäki/"

Selline fail on seal kaustas olemas ja sellepärast me seda lehte näemegi.


Pildi aadressi sa väidad olevat: "http://www.majutaja.com/nikinäki/NeaidisPilt.gif".

Aga sellises kaustas ("http://www.majutaja.com/nikinäki/") ei ole sellist faili: "NeaidisPilt.gif". "


  • õpilane :

" aa... see ../ otsib siis minu masinast - minu leheküljelt jah? "


    • õpetaja : "

Just!

Loe uuesti: Relatiivse aadressi algusest puudub peamine - viide masinale, kust faili otsida ... jne .

Kas läks liiga keeruliseks? "


  • õpilane :

" pisut... :) aga vist hakkan aru saama ... ma ise olen vist kogu aeg neid relatiivseid aadresse kasutanud oma kodulehe tegemiseks ... milleks neid pikki aadresse vaja on? ... mina viitan tavaliselt nii: 

<img src="pilt.jpg" alt="pilt"/>

"


    • õpetaja : "

See "pilt.jpg" peab ju olema samas kaustas, kus on su .html fail, kui sa just <base elemendiga ümber ei suuna.


Täisaadressiga "http://www.hot.ee/vikiylikool/img/NeaidisPilt.gif" sa ju saad kätte pildi, mis on hoopis teises kohas, kui sinu leht. See võib olla näiteks:

... kas või Orkut'is või Rate's.


Siis sa ei pea pilte oma kodukataloogis hoidma ja ruumi jääb muude asjade jaoks.

Ja kui sul on kõik asjad ühes kaustas, siis ei saagi seal midagi suuremat arendada. "


Viited

[edit]
  1. ↑ HTML <img> src Attribute
  2. ↑ HTML <iframe> src Attribute
  3. ↑ Uniform Resource Locator - From Wikipedia, the free encyclopedia
  4. ↑ Server (computing) - From Wikipedia, the free encyclopedia
  5. ↑ URI scheme - From Wikipedia, the free encyclopedia
  6. ↑ Domain name - From Wikipedia, the free encyclopedia
  7. ↑ HTML <a> href Attribute
  8. ↑ Uniform Resource Locator - From Wikipedia, the free encyclopedia
  9. ↑ HTML <base> Tag
  10. ↑ HTML <base> href Attribute
  11. ↑ HTML <base> target Attribute
  12. ↑ Percent-encoding - From Wikipedia, the free encyclopedia
  13. ↑ HTML URL Encoding Reference
  14. ↑ Markup Validation Service
Retrieved from "https://beta.wikiversity.org/w/index.php?title=Programmeerimise_algõpe:_HTML_URL&oldid=101197"