Jeugdprogramma's op Vlaamse zenders

1. Ketnet
   1. Disney festival
   2. Samson soap
   3. Tik Tak
   ...
   
   d. bewaar het document als TVPROG3.HTM. In de code van TVPROG3.HTM is de vetgedrukte regel van belang. In plaats van te verwijzen naar een bladwijzer in de tekst, wordt er naar een ander bestand verwezen. Als dit bestand niet in dezelfde map als het hoofdbestand zit, dan moet het volledige pad aangegeven worden. De benadrukte tekst staat tussen en . Door te klikken op Ketnet of VTM beland je in het corresponderende document. De hyperlink kan niet alleen onderlijnde tekst maar ook een plaatje zijn.
   
   J. Gils – E. Goossens
   
   XHTML-CSS
   
   53
   
   4. Een document ontwerpen dat meer uitleg over VTM geeft a. Open een nieuw document in het KLADBLOK en neem de onderstaande code over.

   ---

   VTM

   ---

   Kabouter Plop

   Kleuterprogramma over de avonturen van een kabouter

   Teletubbies

   Kleuterprogramma met poppetjes

   Terug naar het hoofddocument

   
   
   In deze code wordt de hyperlink gerealiseerd met: Terug naar het hoofddocument
   
   b. Bewaar het document onder de naam VTM1.HTM. 5. Een document ontwerpen dat meer uitleg over Ketnet geeft a. Open een nieuw document in het KLADBLOK en neem de onderstaande code over.

   KETNET

   Disney festival

   Een keuze uit bekende Disney-tekenfilms

   Samson soap

   Belevenissen van Gert Verhulst en zijn hond

   Tik Tak

   Animatiereeks voor kleuters

   De boomhut

   Kindermagazine met Karel Vereertbrugghen en Alida Neslo

   Hey Arnold

   Amerikaanse animatiereeks

   Terug naar het hoofddocument

   
   
   b. Bewaar het document onder de naam KETNET1.HTM. c. Open het document KETNET1.HTM in de browser en test de werking van de hyperlinks. TIP
   
   54
   
   De verwijzingen die in voorkomen kunnen lokaal zijn (deze computer), maar zij kunnen ook betrekking hebben op andere computers binnen het netwerk of binnen het internet.
   
   XHTML-CSS
   
   J. Gils – E. Goossens
   
   Om te voorkomen dat je altijd het volledige adres moet intikken leg je met het commando het adres van je homepage vast. Dit commando zet je in de head-sectie. Bij alle links binnen je homepage volstaat dan de naam van het XHTML-document. Wordt er geen base href opgegeven, dan is de standaardverwijzing de plaats waar het XHTML-document staat. Het is dan ook alleen zinvol een base href op te geven als je website in verschillende mappen, eventueel op verschillende servers, staat.
   
   5.5
   
   Een hyperlink aan een afbeelding koppelen Het is mogelijk om een hyperlink ook aan een afbeelding te koppelen. In dat geval moet je de code van de afbeelding tussen de anker-tags zetten. Opdrachten 6. De afbeelding ‘Home Page’ aan de documenten KETNET1.HTM en VTM1.HTM toevoegen a. Open het document KETNET1.HTM in het KLADBLOK. b. Voeg juist boven de hyperlink een regel toe die de afbeelding HOMEPAGE.JPG in het document zal tonen. Zet de afbeelding en de hyperlink in dezelfde alinea. Voeg een aantal spaties toe na de figuur. c. Bewaar de wijzigingen onder de naam KETNET3.HTM. d. Bekijk het resultaat in de browser. e. Herhaal hetzelfde voor het document VTM1.HTM en bewaar de wijzigingen onder de naam VTM3.HTM. VTM3.HTM geeft op het einde van het document het volgende beeld:
   
   TIP
   
   Zet afbeeldingen die je netjes moet schikken in een tabel en verwijder de celranden. Open het voorbeeldbestand PARIJS.HTM en bekijk de XHTML-code.
   
   7. Wijzig de code van VTM3.HTM als volgt, bewaar de wijzigingen onder de naam VTM3B.HTM en bekijk het resultaat:

   ---

   VTM

   ---

   Kabouter Plop

   Kleuterprogramma over de avonturen van een kabouter

   Teletubbies

   Kleuterprogramma met poppetjes

   ---

   
   
   J. Gils – E. Goossens
   
   XHTML-CSS
   
   55
   
   

   

   
   
   De regel neemt de figuur BACKGD24.JPG als achtergrond voor de pagina. TIPS • geeft blauwe letters op een gele achtergrond. • •
   
   doet de figuur naar rechts uitlijnen.
   
   Op dezelfde wijze kun je een koppeling naar een videobestand leggen: Demo van een video
   
   of naar een geluidsbestand: Fluiten
   
   5.6
   
   Afbeeldingen in een nieuw venster openen Via hyperlinks is het mogelijk om bijvoorbeeld van een kleine figuur een vergrote versie in een nieuwe pagina te openen. Opdracht 8. Meer details van een figuur tonen a. Open een nieuwe pagina en neem de onderstaande code over. ...

   Hyperlinks naar een nieuwe pagina

   ---

   

   Een dinosauriër is geen klein dier.
   Klik op de afbeelding om zijn grote broer te ontmoeten.

   ...
   
   b. Bewaar de pagina als MEER_DETAIL.HTM en bekijk het resultaat in een browser.
   
   56
   
   XHTML-CSS
   
   J. Gils – E. Goossens
   
   Bestandsgrootte: DINOK.JPG: 6 KB DINO.JPG: 108 KB
   
   TIPS • Met bijvoorbeeld Microsoft Foto Editor kun je het formaat, en dus ook de grootte, van een foto wijzigen. Hoe groter het bestand, hoe langer het downloaden duurt. Lange downloadtijden worden als vervelend ervaren. Zet daarom nooit de foto's in hun volledige formaat op een openingspagina. •
   
   

   Het attribuut target is niet gekend in XHTML1-STRICT maar wel in XHTML1_TRANSITIONAL. Het wordt wel door de meeste browsers ondersteund. Waarde
   
   Betekenis
   
   _blank
   
   Het document zal in een nieuw venster geopend worden.
   
   _self _top
   
   Het document zal in hetzelfde venster geopend worden. Het document wordt in het hoofdvenster geopend. (Wordt bij frames gebruikt – zie verder.) Het document wordt in een frame met die naam geopend. (Wordt bij frames gebruikt – zie verder pagina 94.)
   
   naam pagina
   
   5.7
   
   Klikbare kaarten Een mooie vorm van hypergraphics is de klikbare kaart of clickable map of image map. Verschillende posities binnen een prentje krijgen dan een eigen hyperlink. Een dergelijke link wordt hotspot genoemd. Foto's waarop verschillende personen afgebeeld staan of landkaarten waarop zich verschillende plaatsen bevinden waarover uitleg gegeven wordt zijn geschikte objecten voor hotspots. Klik je op een bepaald hoofd of op een bepaalde stad, dan verschijnt er uitleg over die persoon of over die stad. De ruimte binnen de witte kader is als een hot spot gedefiniëerd. Spijtig genoeg is het niet altijd mogelijk om dit in XHTML te maken. Je moet een speciaal programmaatje schrijven, een cgi-script, om dit te verwerken of je kunt een standaardscript die op de server aanwezig is gebruiken. Over die cgi-scripts hebben we het later nog. Recente browsers kunnen dit ook zonder script, met XHTML-codes. Het met de hand definiëren van image maps is veel werk, maar om een dergelijke klikbare kaart te maken zijn op internet handige programma's zoals Map This te vinden. Daar wordt altijd ook een alternatieve tekst voorzien voor gebruikers die geen afbeeldingen wensen te zien!
   
   J. Gils – E. Goossens
   
   XHTML-CSS
   
   57
   
   Een andere mogelijkheid bestaat erin een codegenerator zoals FrontPage te gebruiken. In een paar minuten breng je makkelijk een tiental hotspots aan. Opdracht 9. Open het bestand KRETA.HTM in de webbrowser. a. Op vier verschillende plaatsen op de kaart verandert de muiswijzer in een handje. Als je op zo’n plaats klikt krijg je een afbeelding van die plaats. b. Bekijk de inhoud van het XHTML-bestand: het zal duidelijk zijn dat het niet zo eenvoudig is om die aanklikbare plaatsen correct in XHTML in te geven.

   <map name="FPMap25" id="Kreta"> <area href="samaria.jpg" alt="Samariakloof" shape="circle" coords="138, 119, 19" /> <area href="matala.jpg" alt="Matala" shape="circle" coords="295, 167, 19" /> <area href="heraklion_knossos.jpg" alt="Knossos" shape="circle" coords="331, 82, 21" /> <area href="agios_nikolaos.jpg" alt="Agios-Nikolaos" shape="circle" coords="486, 111, 21" />

   
   
   5.8
   
   Een e-mailbericht als hyperlink Vanuit een website kun je ook e-mail versturen. Neem daarvoor een anker op waarin het sleutelwoord 'mailto' voorkomt. Een voorbeeld: Je kunt ons ook een e-mailbericht sturen.
   
   Als degene die de webpagina raadpleegt online met het internet verbonden is op de benadrukte tekst e-mailbericht klikt, opent de browser een venster waarin een document voor elektronische post kan ingetikt en doorgestuurd worden. Dat veronderstelt wel dat een e-mailprogramma geïnstalleerd is. TIP
   
   58
   
   Om ervoor te zorgen dat er tussen objecten voldoende spatiëring is kun je gebruik maken van <pre> en -tags. Witruimte tussen deze tags wordt ook in de webpagina getoond.
   
   XHTML-CSS
   
   J. Gils – E. Goossens
   
   Besluit Binnen een document kunnen plaatsen gemarkeerd worden die vanuit een andere plaats bereikbaar zijn. Op analoge manier kan naar andere documenten, die zich op andere computers binnen een netwerk bevinden, gesprongen worden. Deze benadrukte teksten of plaatjes noemt men in het algemeen hyperlinks. Binnen een document spreekt men ook van bookmarks, jumpmarks of bladwijzers. In XHTML worden hyperlinks met de -tag gerealiseerd. Bestanden in een website kunnen bereikt worden door een volledige uitstippeling van het pad, vertrekkend van het WWW. In dat geval spreekt men van absolute adressering. Wordt een pad aangeduid dat vertrekt vanuit de map waarin de introductiepagina staat, dan spreekt men van relatieve adressering. In dat geval gebruikt men de notatie ../ om in een mappenstructuur een niveau op te klimmen. Om af te dalen wordt het pad vermeld, vertrekkend van de map met de introductiepagina. Je kunt er ook via een hyperlink voor zorgen dat vanuit een webpagina een e-mailbericht verstuurd wordt. Het href-attribuut van de -tag bevat in dat geval de tekst 'mailto:', gevolgd door het e-mailadres van de persoon of instelling in kwestie. De stijl background-immage maakt het mogelijk om figuren als achtergrond te gebruiken.
   
   Wat je moet kennen en kunnen: • • • • • • • •
   
   het verschil kennen tussen absolute en relatieve adressering; absolute en relatieve adressering in een website toepassen; de begrippen hyperlink, jumpmark, bookmark en bladwijzer uitleggen; teksten als hyperlinks aan een document toevoegen; afbeeldingen als hyperlinks aan een document toevoegen; een hyperlink gebruiken om een e-mailbericht te versturen; weten wat een klikbare kaart is; de voorgrond- en achtergrondkleur van een pagina wijzigen.
   
   Opdracht 10. Maak de documenten MANNEN1.HTM en VROUWEN1.HTM met de atletiekuitslagen van de vrouwen in Atlanta 96. Om tikwerk te besparen kun je gebruik maken van de bestanden MANNEN.HTM en VROUWEN.HTM. Pas de code in OLYMPSP.HTM aan zodanig dat hyperlinks naar MANNEN1.HTM en VROUWEN1.HTM gelegd worden. Sla het nieuwe XHTML-document op onder de naam OLYMPSP2.HTM. Vanuit de documenten MANNEN1.HTM en VROUWEN1.HTM moet je naar het hoofddocument OLYMPSP2.HTM kunnen terugkeren. Het resultaat van MANNEN1.HTM en VROUWEN1.HTM ziet er als volgt uit (alleen het begin en het einde van de lijst worden getoond):
   
   J. Gils – E. Goossens
   
   XHTML-CSS
   
   59