3.7 Kehysten käytöstä

Linkit kehyksissä: target

Tarkastellaanpa vielä lisää tuota navigointipalkkia aiemmassa esimerkissä.

Normaalisti kun selainikkunassa olevaa linkkiä klikataan niin ikkunaan latautuu uusi HTML-dokumentti (web-sivu). Linkki vaikuttaa siis saman ikkunan sisältöön.

Tiedotus-sivun vasemmassa reunassa oleva kehys (menu.html) pitää sisällään linkkejä tiedotteisiin, ja klikkaamalla jotakuta linkkiä sivun oikeassa reunassa olevan kehyksen sisältö muuttuu. Linkki ei siis vaikutakaan samaan vaan ihan toiseen kehykseen!

Tämä on mahdollista lisäämällä menu-kehyksessä oleviin linkkeihin attribuutti target.

Esimerkki
<a href="content.html#vastuu" target="content">Vastuu studioista</a>

target-attribuutilla määritetään, mihin kehykseen linkin osoittama HTML-dokumentti ladataan. Yllä olevassa esimerkissä linkki kohdistuu kehykseen, jonka nimi on content.

Kehykset täytyy siis jotenkin nimetä, jotta niihin voitaisiin helposti viitata. Jos tutkit tiedotus-sivun koodia (View->View source) niin saat näkyviin jo tutun koodin:

01   <html>
02   <head>
03   	<title>MUSIIKKITEKNOLOGIEN TIEDOTUSFOORUMI</title>
04   </head>
05   <frameset rows="72,*" framespacing="0" frameborder="0">
06   	<frame src="top.html">
07   	<frameset cols="200,*" frameborder="0">
08   		<frame src="menu.html" name="menu">
09   		<frame src="content.html" name="content">
10   	</frameset>
11   </frameset>
12 
13   <noframes>
14   <body>
15   	<p>Tämä sivu käyttää kehyksiä, 
     	mutta <a href="content.html">tästä</a> pääset käsiksi 
16   	keskeiseen sisältöön ilman kehyksiä.</p>
17   </body>
18   </noframes>
19
20   </html>

Yläosalle, johon latautuu dokumentti top.html, ei ole määritelty mitään nimeä. Alaosa jaetaan sivusuunnassa kahtia, joista vasemman nimi on menu ja oikeanpuoleisen kehyksen nimi content (rivit 8-9).

Menu-osiossa olevaan linkkiin kun lisätään target="content", kyseinen linkki vaikuttaa content-nimisen kehyksen sisältöön.

Entä jos linkin halutaan vaikuttavan koko ikkunaan, toisin sanoen niin että linkkiä klikkaamalla siirrytään koko kehyssysteemistä pois? Tiedotussivun yläpalkissa on tällainen linkki (kotisivulle).

<a href="../index.html" target="_top">kotisivulle</a>

Tätä klikkaamalla yläpalkki-kehykseen ei ladata index.html-dokumenttia eikä sitä ladata mihinkään muuhunkaan kehykseen, vaan koko kehyssysteemi poistuu ja selain siiryy kotisivulle.

Tämä on mahdollista käyttämällä target-attribuutissa erityistä arvoa "_top".

On olemassa toinenkin erityisarvo, joka alkaa alaviivalla: _blank. Tätä käyttämällä kyseessä oleva linkki avautuu uuteen selainikkunaan.

Jos suurin osa HTML-dokumentin linkeistä kohdistuu johonkin toiseen kehykseen kuin itseensä, voidaan dokumentin head-osaan lisätä seuraava rivi:

<base target="content">

Tällöin kaikki body-osassa olevat linkit kohdistuvat content-nimiseen kehykseen. Ja jos tästä halutaan tehdä poikkeus, kirjoitetaan yksittäisten linkkien kohdalle erikseen tuo tuttu target-attribuutti, esim.

<a href="index.html" target="_self">

Tässä tapauksessa linkki kohdistuu samaan kehykseen kuin missä linkki sijaitsee.

Yhteenveto linkin target-attribuutin arvoista

target="id|name"
Määrää mihin kehykseen linkki vaikuttaa
target="_top"
Linkki vaikuttaa ylimmän tason kehyksiin, toisin sanoen vaikka sivulla olisi useista sisäkkäisiä frameset-elementtejä, linkki vaikuttaa koko sivuun eikä mihinkään yksittäiseen kehykseen. Tällaista linkkiä klikkaamalla selaaja voi siirtyä pois vaikka koko sivustosta.
target="_blank"
Linkki ei viittaa mihinkään (kehykseen tai ikkunaan), jolloin selain avaa uuden ikkunan.
target="_self"
Linkki viittaa samaan kehykseen.

Kehysten hyödyt

  • Koodin toiston välttäminen
  • Navigoinnin helpottaminen
  • Kahden tai useamman samaan aiheeseen liittyvän HTML-dokumentin yhtäaikainen lukeminen, [esimerkki]

Kehysten haitat

Kehyksistä ei ole ainoastaan hyötyä vaan niiden käytöstä syntyy seuraavia haittoja, jotka kannattaa pitää mielessä jos mielii kehyksiä sivuilleen pistää.

  • Osoitettomuus. Kun sivu ensimmäisen kerran ladataan, on kussakin kehyksessä jokin HTML-dokumentti, mutta kun selaaja klikkailee linkkejä, kehysten sisällöt muuttuvat. Kehyksiin rakennetussa sivustossa pysyy selaimen osoite (URL) kuitenkin koko ajan samana. Ei ole mahdollista kirjoittaa URL:ia joka viittaisi kehyksiin, joissa olisi jokin tietty sisältö. Ongelmia syntyy kun käyttäjä (löydettyään mielenkiintoisen sivun) ottaa talteen selaimen osoitteen (kirjanmerkiksi tai lähettääkseen sen vaikka ystävälleen). Usein vasta myöhemmin hän huomaa että osoite viittaakin kehyksiin niiden alkutilassa, joka ei ollut tarkoitus.

    Tällöin ohjatakseen jonkun muun henkilön oikeaan paikkaan täytyy URL:in lisäksi antaa ohjeet, mitä linkkejä klikkaamalla päästään haluttuun lopputulokseen. Tämä hankaloittaa merkittävästi sivun löytämistä eli sivun saavutettavuutta (tästä lisää myöhemmin).

    Tämä ongelma voidaan kiertää siten, että jokaiselle sivulle tehdään kokonaan omat kehykset, eli jokainen linkki lataakin uuden kehyssetin eikä pelkästään yhtä HTML-dokumenttia yhteen kehykseen. Tästä on pari havainnollista esimerkkiä (katso erityisesti mitä URL:ille eli selaimen osoitteelle tapahtuu):

  • Osoitteettomuudesta seuraa toinenkin ongelma: tekijän A sivustolle voidaan upottaa jonkun ihan toisen henkilön tai yrityksen tekemä sivu. Katso esimerkki vaikka tästä.

  • Kehyksiä käytetään aivan liian usein väärin ja epäjohdonmukaisesti. Korpelalla on tässäkin jokunen sana sanottavana.

Kehyksistä ja niiden käytöstä löydät lisätietoja osoitteista