Programmeerimise algõpe: HTML raamid

From Wikiversity


< Programmeerimise algõpe

Siseraamid [1][edit]

Ühtlustamine ja koonerdamine[edit]

Programmeerimise olulisemad põhimõtted on "ühtlustamine ja koonerdamine". Nii lahenduse sisu (kood) kui välimus (kasutajaliides) peaks võimalikult suures osas olema korrapärase ehitusega ja sarnaselt vormistatud, et hoida kokku iga koodilõiguga tutvumise ja imestamise peale kuluvat aega. Parandused ja muudatused võtavad aega kordi vähem, kui parandatava või muudetava koha leidmine. Ühtlustatud lahendus hoiab kokku ka koodi mahtu. Sama lahendust ei tohiks koodi mööda laiali kopeerida, vaid see peaks asuma ainult ühes kohas ja igalpool, kus teda tarvis on, peaks kood viitama sinna samasse kohta. Siis aitab ka selle ühe koha muutmisest või parandamisest, et tulemus jõuaks kohe kõikjale ega ole tarvis selle koodijupi koopiaid ükshaaval taga ajada.

Jutt tundub väga üldine ja segane. Pealegi pakub HTML korduvkasutatava koodi kirjutamiseks vähe võimalusi, aga midagi siiski on:

Näiteks salvestasin kodukausta sellised 3 faili:

http://www.hot.ee/vikiylikool/Iframe.html 

<!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>
<a target="peaRaam" href="http://beta.wikiversity.org/wiki/Programmeerimise_alg%C3%B5pe#Programmeerimise_alg.C3.B5pe">1 Programmeerimise algõpe</a>
<a target="peaRaam" href="http://beta.wikiversity.org/wiki/Programmeerimise_alg%C3%B5pe#Eesm.C3.A4rk">1.1 Eesmärk</a>
<a target="peaRaam" href="http://beta.wikiversity.org/wiki/Programmeerimise_alg%C3%B5pe#T.C3.B6.C3.B6korraldus">1.2 Töökorraldus</a>
<a target="peaRaam" href="http://beta.wikiversity.org/wiki/Programmeerimise_alg%C3%B5pe#Vajalikud_eelteadmised">1.3 Vajalikud eelteadmised</a>
<a target="peaRaam" href="http://beta.wikiversity.org/wiki/Programmeerimise_alg%C3%B5pe#Osalejad">1.4 Osalejad</a>
<a target="peaRaam" href="http://beta.wikiversity.org/wiki/Programmeerimise_alg%C3%B5pe#.C3.95ppekava">1.5 Õppekava</a>
<a target="peaRaam" href="http://beta.wikiversity.org/wiki/Programmeerimise_alg%C3%B5pe#Ettevalmistused">1.5.1 Ettevalmistused</a>
<a target="peaRaam" href="http://beta.wikiversity.org/wiki/Programmeerimise_alg%C3%B5pe#Kodulehe_alustamine">1.5.1.1 Kodulehe alustamine</a>
<a target="peaRaam" href="http://beta.wikiversity.org/wiki/Programmeerimise_alg%C3%B5pe#HTML">1.5.2 HTML</a>
<a target="peaRaam" href="http://beta.wikiversity.org/wiki/Programmeerimise_alg%C3%B5pe#Standardid_ja_valideerimine">1.5.2.1 Standardid ja valideerimine</a>
<a target="peaRaam" href="http://beta.wikiversity.org/wiki/Programmeerimise_alg%C3%B5pe#HTML_tag_ehk_silt">1.5.2.2 HTML tag ehk silt</a>
<a target="peaRaam" href="http://beta.wikiversity.org/wiki/Programmeerimise_alg%C3%B5pe#Kujunduselemendid">1.5.2.3 Kujunduselemendid</a>
<a target="peaRaam" href="http://beta.wikiversity.org/wiki/Programmeerimise_alg%C3%B5pe#Atribuudid">1.5.2.4 Atribuudid</a>
<a target="peaRaam" href="http://beta.wikiversity.org/wiki/Programmeerimise_alg%C3%B5pe#S.C3.BCndmusatribuudid">1.5.2.5 Sündmusatribuudid</a>
<a target="peaRaam" href="http://beta.wikiversity.org/wiki/Programmeerimise_alg%C3%B5pe#Lingid_ja_j.C3.A4rjehoidjad">1.5.2.6 Lingid ja järjehoidjad</a>
<a target="peaRaam" href="http://beta.wikiversity.org/wiki/Programmeerimise_alg%C3%B5pe#Pildid">1.5.2.7 Pildid</a>
		</body>
	</html>


http://www.hot.ee/vikiylikool/Osalejad.html 

<!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> Raamid </title>

		</head>
		<body>
			<iframe src ="Iframe.html" width="100%" height="100px">
				<p>
				Sinu prauser ei tunnista siseraame, aga
					<a target="self" href="Iframe.html"> õppekava</a> avaneb, kui vajutad linki.
				</p>
			</iframe>
			<iframe name="peaRaam" src ="http://beta.wikiversity.org/wiki/Programmeerimise_alg%C3%B5pe:_osalejad" width="100%" height="700px">
				<p>
					<a target="self" href="http://beta.wikiversity.org/wiki/Programmeerimise_alg%C3%B5pe:_osalejad">Osalejate nimekiri</a> avaneb, kui vajutad seda linki.
				</p>
			</iframe>
		</body>
	</html>


http://www.hot.ee/vikiylikool/Ylevaade.html 

<!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> Raamid </title>

		</head>
		<body>
		<iframe src ="Iframe.html" width="100%" height="100px">
			<p>
			Sinu prauser ei tunnista siseraame, aga
				<a target="self" href="Iframe.html"> õppekava</a> avaneb, kui vajutad linki.
			</p>
		</iframe>
		<iframe name="peaRaam" src ="http://beta.wikiversity.org/wiki/Special:WhatLinksHere/Programmeerimise_alg%C3%B5pe" width="100%" height="700px">
			<p>
				<a target="self" href="http://beta.wikiversity.org/wiki/Special:WhatLinksHere/Programmeerimise_alg%C3%B5pe">Kursuse ülevaade</a> avaneb, kui vajutad seda linki.
			</p>
		</iframe>
		</body>
	</html>


Iframe.html nimelises fails on hulk hüperlinke - kõik atribuudiga target="peaRaam" .

Sama väärtus - peaRaam on kahes ülejäänud failis - kummaski ühel <iframe elemendil. Kummagi faili teisel <iframe elemendil on src="Iframe.html" atribuut, mis omakorda viitab esimesele failile.

Avame need kolm faili brauseris.

  1. http://www.hot.ee/vikiylikool/Iframe.html
  2. http://www.hot.ee/vikiylikool/Osalejad.html
  3. http://www.hot.ee/vikiylikool/Ylevaade.html


Iframe.html näitabki ootuste kohaselt hulka hüperlinke . Kahe ülejäänud lehe ülaosas nääme neidsamu linke, aga alaosad kuvavad kumbki erinevat Wikiversity lehte: "http://beta.wikiversity.org/wiki/Programmeerimise_alg%C3%B5pe:_osalejad" ja "http://beta.wikiversity.org/wiki/Special:WhatLinksHere/Programmeerimise_alg%C3%B5pe".


Aga milleks see vaev?


Asjal võib olla ka oma mõte.

  1. Me saame kõigil oma lehtedel neidsamu linke ( sisukorda või menüüd ) näidata alati ühel kujul ilma koodi igasse faili kopeerimata. Sellega säästame ketta mahtu ja töö aega.
  2. Kui me mõne lingi lisame, kustutame või kujundust muudame, siis ei pea minema kõiki neid lehti muutma vaid piisab muutustest ühes failis.

Niisiis:

  • target="peaRaam" viitab raamile, kus link uue lehe avab - näiteks <iframe name="peaRaam" .
  • <iframe siltide vahele kirjutatud juttu Sinu prauser ei tunnista siseraame, aga jne näitavad vanemad prauserid, mis <iframe-st veel midagi ei teadnud.


Frameset [2][edit]

Varem palju kasutatud <frameset on kohmakam lahendus ja valideerub ainult frameset.dtd -ga lehel [3]. Lehtede valideerimine on vajalik selleks, et CSS, JavaScript või mõne prauseri iseärasus meile vähem peavalu valmistaks , sest vigast lehte näitab iga prauser nii nagu tema paremaks peab.


Ülesanne[edit]

  • 1. Katseta <iframe elemendile lubatud atribuute [4]  !
  • 2. Asenda esimese ja viimase hüperlingi target="peaRaam" atribuut target="puuduvRaam" atribuudiga! Kus avanevad need lehed nüüd ? [5] Muuda veel mõni target  ! Millise seaduspära leidsid ?
  • 3. Võta tekst sellelt samalt või mõnelt muult Creative Commons Attribution/Share-Alike-litsentsi tingimustel kasutatavalt leheküljelt ja salvesta oma kodulehe kausta võimalikult sarnase kujundusega HTML lehena aga ilma CSS 'i abita! Lehe alaosa ( Text is available under the jms) salvesta eraldi faili! Kasuta selle kuvamiseks <iframe elementi!
      • Paranda alati vead (, kui neid on), et failid valideeruksid [6] ! Kasuta sellist standardit:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Viited[edit]

  1. ↑ HTML <iframe> Tag
  2. ↑ HTML <frameset> Tag
  3. ↑ HTML <!DOCTYPE> Declaration
  4. ↑ HTML <iframe> Tag
  5. ↑ HTML <a> target Attribute
  6. ↑ Markup Validation Service
Retrieved from "https://beta.wikiversity.org/w/index.php?title=Programmeerimise_algõpe:_HTML_raamid&oldid=61175"