SEOTUD LEHED EELNEVAST NÄITEST PAISTIS ET PALJAKS TUTVUSTUSEKS PIISAB

SEOTUD LEHED EELNEVAST NÄITEST PAISTIS ET PALJAKS TUTVUSTUSEKS PIISAB




Seotud lehed

Seotud lehed


Eelnevast näitest paistis, et paljaks tutvustuseks piisab ühest lehest. Rohkemate andmete põhjal pole aga põhjust kõike korraga näidata – vastavalt vajadusele saab lugeja valida omale parasjagu vajalikke lehti. Enne lehtede omavahelist sidumist tuleb aga need kõigepealt valmis teha – siis on mugavam teada anda, kust kuhu liigelda saab. Siin näites lisame peokuulutuse kõrvale lehe, kus kirjas, mille eest keegi korralduse juures vastutab. Ehk siis taas Solution Exploreris rakenduse kausta juures parem hiireklõps, sealt uus HTML-leht, mil nimeks vastutajad.html. Osa kujundust on mugav disainivaates teha. Et tulemuseks aga HTML-kood, siis ei saa disainivaates teha midagi sellist, mida otse koodi sisse kirjutada ei saa. Vastupidi aga küll. Üheks selliseks mooduseks on definitsiooniloend – sõna ja tema seletus. Ehk siin on sõna ehk definitsiooni rollis klassi number, selgituseks aga nende roll peol. Kogu selle loo ülesmärkimiseks on vaja kolme eri HTML-käsklust. Käsk dl ehk definition list teatab, et nüüd loetelu algab, nüüd lõpeb. Definition term ehk dt märgib seletatava termini, dd ehk definition definition määrab termini vaste. Ning nende abil saab iga klassi koos oma rolliga kirja panna.


SEOTUD LEHED EELNEVAST NÄITEST PAISTIS ET PALJAKS TUTVUSTUSEKS PIISAB


Kood otse eraldi ka.


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


<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Peo vastutajad</title>

</head>

<body>

<h1>Peo korralduse eest vastutajad</h1>

<dl>

<dt>10. klass</dt>

<dd>Rebased</dd>

<dt>11. klass</dt>

<dd>Võistluste ja katsumuste läbiviijad</dd>

<dt>12. klass</dt>

<dd>Muusika eest hoolitsejad</dd>

</dl>

</body>

</html>


SEOTUD LEHED EELNEVAST NÄITEST PAISTIS ET PALJAKS TUTVUSTUSEKS PIISAB

Disainivaates on näha, et klassid on tõmmatud vasakule, nende juurde kuuluvad seletused aga mõningasse taandesse sinna kõrvale.




Kaks eraldi lehte olemas, nüüd siis tarvis nad omavahel siduda. Ja praegusel juhul soovitavalt mõlemat pidi – nii et avalehelt saaks vastutajate lehele ning viimasest omakorda tagasi avalehele. Viite loomiseks on vajalik teada anda kaks asja: mille peale vajutades viide käivitub ning kuhu vajutades satutakse. Viidetega ümber käimiseks on HTMLi sisse mõeldud element nimega a. Selline lihtne ühetäheline nimi, pärit sõnast anchor (ankur). Kõige lihtsam ühendusmoodus on avada avalehe lähtekood ning sinna sobivasse kohta lihtsalt vedada Solution Exploreri alt vastav fail. Ehk siis haaran hiirega kinni failinimest vastutajad.html ning sikutan ta lehe lähtekoodis kohta, kus võiks viide olla.


SEOTUD LEHED EELNEVAST NÄITEST PAISTIS ET PALJAKS TUTVUSTUSEKS PIISAB

Tulemusena tekkis siis rida

<a href="vastutajad.html">vastutajad.html</a>


Atribuudi href (hyperlink reference) juures on kirjas avatava faili nimi. Elemendi a sisu (ehk siis <a href="vastutajad.html"> ja </a> vahelt on lehel nähtav tekst. Praegu seal lihtsalt sama faili nimi, sest lohistamise peale ei mõistnud veebiredaktor sinna paremat selgitust anda. Ise aga saab sinna mõnevõrra pikemalt kirjutada. Näiteks


<a href="vastutajad.html">Peo osaliste tööjaotus</a>


mis siis veebilehel näeb välja ilusasti viitena


SEOTUD LEHED EELNEVAST NÄITEST PAISTIS ET PALJAKS TUTVUSTUSEKS PIISAB



Terviklik avalehe kood siis


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


<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Koolipidu</title>

</head>

<body>


<h1>

Koolipidu</h1>

<p>

Septembri viimasel reedel kell 19 kooli saalis rebastega tutvumise ning nende

ristimise pidu. Kogu koolirahvas oodatud!</p>


<p>

<img alt="Päevakangelase pilt" src="rebane.png"

style="width: 134px; height: 165px" /></p>

<a href="vastutajad.html">Peo osaliste tööjaotus</a>

</body>

</html>


Sarnane viide ka vastutajate lehe koodi


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


<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Peo vastutajad</title>

</head>

<body>

<h1>Peo korralduse eest vastutajad</h1>

<dl>

<dt>10. klass</dt>

<dd>Rebased</dd>

<dt>11. klass</dt>

<dd>Võistluste ja katsumuste läbiviijad</dd>

<dt>12. klass</dt>

<dd>Muusika eest hoolitsejad</dd>

</dl>

<a href="peokuulutus.html">Avalehele</a>


</body>

</html>


ning juba võibki viiteid pidi kahe lehe vahet liikuma hakata.


SEOTUD LEHED EELNEVAST NÄITEST PAISTIS ET PALJAKS TUTVUSTUSEKS PIISAB


Viited aga ei pea sugugi olema vaid paari kohaliku lehe vahel. Kuna veebiaadressi kaudu saab ligi lehtedele üle Interneti, siis piisab sobiva viite lisamisest oma lehele. Lihtsa failinime puhul saab lehitseja aru, et seda otsitakse kohalikust kataloogist. Kui aga aadressil on kirjas ees http:// (või mõni muu protokolli tähis nt. ftp), siis teatakse, et vastavat faili tuleb välisvõrgust otsima hakata. Sellest ka põhjus, miks viidetele tuleb nood http-d ette kirjutada. Muul juhul kipub lehitseja otsima kohalikust kataloogist faili nimega www.ilm.ee (või näiteks faili nimega microsoft.com) ja ei leia kuidagi.


<p>

<a href="vastutajad.html">Peo osaliste tööjaotus</a> <br />

Vaata <a href="http://www.ilm.ee">ilmateadet</a> ja vali enesele sobiv riietus!

</p>


Käsklus br tähistab reavahetust (break). Segadust kipub vahel tekitama, miks tol elemendil on kaldkriips lõpus, kui mõneski muus kohas kipub kaldkriips olema enne elemendi nime. Selgituseks, et siin on elemendi algus ja lõpp koos, st. tegemist on käsu <br></br> lühendatud kujuga. XHTML vastab XMLi reeglitele ning sealtkaudu nõutakse iga elemendi puhul algust ja lõppu. Elemendil a on näiteks sinna vahele põhjust atribuudina panna avatav aadress ning tekstilise väärtusena kasutajale nähtav jutt. Käsk br tähistab aga ainult reavahetust ning kui sinna täiendavaid andmeid (nt. rea kõrgust) ei lisata, siis piisabki vaid elemendi nimest. Mille taga kaldkriips annab teada, et sellega on vastava elemendi mõjupiirkond ühtlasi lõppenud.


Lõpetuseks siis lehitsejas töötav viidetega leht.


SEOTUD LEHED EELNEVAST NÄITEST PAISTIS ET PALJAKS TUTVUSTUSEKS PIISAB


ja tema lähtekood


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


<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Koolipidu</title>

</head>

<body>


<h1>

Koolipidu</h1>

<p>

Septembri viimasel reedel kell 19 kooli saalis rebastega tutvumise ning nende

ristimise pidu. Kogu koolirahvas oodatud!</p>


<p>

<img alt="Päevakangelase pilt" src="rebane.png"

style="width: 134px; height: 165px" /></p>

<p>

<a href="vastutajad.html">Peo osaliste tööjaotus</a> <br />

Vaata <a href="http://www.ilm.ee">ilmateadet</a> ja vali enesele sobiv riietus!

</p>

</body>

</html>






Tags: eelnevast näitest, eelnevast, paljaks, paistis, piisab, seotud, lehed, tutvustuseks, näitest