Info-books AL10 Toegepaste Informatica Deel 10: Electronisch publiceren: XHTML en CSS Jos Gils Erik Goossens
Hoofdstuk 5 Hyperlinks 5.1 Probleemstelling In uitgebreide documenten wens je op een eenvoudige en handige manier te navigeren. Dat kan in webpagina's via hyperlinks. Een hyperlink bevat benadrukte woorden, teksten of afbeeldingen. Klik je op een dergelijk item, dan beland je op een andere plaats waar het benadrukte verder behandeld wordt. Het is trouwens dit principe dat in de Windows-helpfunctie toegepast wordt. In XHTML worden deze links met de tag <a> aangestuurd. A staat voor Anchor of Anker. Een plaats in een document of het document zelf kan op deze manier verankerd worden met een andere plaats of met een ander document. Een anker of hyperlink kan heel ver reiken: bijvoorbeeld een bestand op een server in Australië die via het internet bereikbaar is. Vooraleer hyperlinks behandeld kunnen worden is het nodig dat je inzicht hebt in absolute en relatieve adressen. 5.2 Relatieve en absolute adressen Bij een relatieve adresaanduiding vertrek je van de actieve map. Veronderstel dat je op het C-station een map HTML hebt met als submappen HTMLA en HTMLB en het bestand VB1.HTM. HTMLA heeft als submappen HTMLA1 en HTMLA2. VB1.HTM zit in de map HTML, VB1A.HTM zit in de map HTMLA en VB1A1.HTM zit in de map HTMLA1. Hoe bereik je vanuit een document in map HTMLA een document in map HTML, bijvoorbeeld VB1.HTM? <a href = "../vb1.htm"> Om één map in de hiërarchie op te klimmen gebruik je de notatie../ (of..\). Hoe bereik je vanuit een document in map HTMLA1 een document in map HTML, bijvoorbeeld VB1.HTM? <a href = "../../vb1.htm"> Hoe bereik je vanuit een document in map HTML een document in map HTMLA, bijvoorbeeld VB1A.HTM? <a href = "htmla/vb1a.htm"> 48 XHTML-CSS J. Gils E. Goossens
Hoe bereik je vanuit een document in map HTML een document in map HTMLA1, bijvoorbeeld VB1A1.HTM? <a href = "htmla/htmla1/vb1a1.htm"> Voor hoger gelegen mappen in de mappenstructuur zet je per niveau../ in het pad, voor lager gelegen mappen noteer je het pad, vertrekkend van de actieve map. Alle browsers begrijpen de padaanduiding met /, de meeste ook die met \. Ook absolute adresaanduidingen zijn mogelijk, maar die werken alleen op je eigen systeem. Een voorbeeld: <a href = "file:///c:/html/htmla/vb1a.htm"> Je plaatst dus de aanduiding file:/// voor het absolute adres. De aanduiding file:/// slaat op het eigen systeem. Voor XHTML-pagina's die later op het WWW geplaatst worden gebruik je best bij lokale links relatieve adressen want je weet niet op voorhand in welke mappen en op welke server je bestanden zullen terechtkomen. Opdracht 1. Bekijk de onderstaande mappen- en bestandsstructuur: map SITE map IMAGES map JPEG DINO.JPG FRED.JPG map PAGINA_S map SOUND INDEX.HTM map BMP map GIF BEDROCK.HTM PALEO.HTM JABA.WAV a. Hoe bereik je vanuit de map SITE het bestand BAMBAM.GIF? b. Hoe bereik je vanuit de map IMAGES het bestand INDEX.HTM? c. Hoe bereik je vanuit de map GIF het bestand INDEX.HTM? d. Hoe bereik je vanuit de map SITE het bestand JABA.WAV? 5.3 Hyperlinks in een bepaald document WILMA.BMP BETTY.BMP BARNEY.GIF BAMBAM.GIF Bekijk de vetgedrukte regels in het XHTML-document op de volgende pagina aandachtig. <a id="zgdn"><b>zoogdieren<b></a> 'Zoogdieren ' is tekst die de browser letterlijk zal tonen, <a id = "Zgdn"> zorgt ervoor dat op deze plaats in het document een herkenningspunt, een anker of bladwijzer, met de naam "Zgdn" gezet wordt. </a> sluit de anker-tag af. J. Gils E. Goossens XHTML-CSS 49
<a href="#zgdn">zoogdieren</a> 'Zoogdieren' wordt letterlijk getoond, <a href = #Zgdn > verwijst naar de plaats (bladwijzer) met de naam Zgdn in het document. 'Zoogdieren' zelf zal benadrukt worden. Klik je daarop dan wordt in het document een sprong gemaakt naar het herkenningspunt met de naam "Zgdn". Een dergelijk herkenningspunt wordt jumpmark of bookmark of bladwijzer genoemd. TIP In plaats van id kun je ook de eigenschap name gebruiken, hoewel id de voorkeur heeft. Je kunt ze zelfs naast mekaar gebruiken: in dat geval moeten ze dezelfde naam hebben. FrontPage genereert de eigenschap name. Dreamweaver genereert zowel name als id. <a name="zgdn" id="zgdn" ><b>zoogdieren<b></a> <html> <head> title>dieren</title> </head> <body> <h2><a id="dierenrijk" >Het dierenrijk </a></h2> <ol> <li><a href="#zgdr"> Zoogdieren </a></li> <li><a href="#vgl"> Vogels </a></li> <li><a href="#vis"> Vissen </a></li> </ol> <ol> <li><a id="zgdr"><b>zoogdieren</b> </a> <ul> <li>aap</li> <li>ezel</li> <li>geit</li> </ul> </li> <li><a id="vgl" ><b>vogels </b> </a> <ul> <li>albatros</li> <li>ekster</li> </ul> </li> <li><a id="vis" ><b>vissen </b></a> </li> </ol> <p><a href="#dierenrijk"> Naar boven </a></p> Met een bladwijzer geef je een woord of een zin in het document een bepaald etiket en bij de zin of het woord die de hyperlink vormen geef je aan dat deze naar dat bepaalde etiket moet zoeken. 50 XHTML-CSS J. Gils E. Goossens
Deze tags worden vaak gebruikt om in uitgebreide documenten vanuit een inhoudstabel naar de behandelde items en omgekeerd te springen. Als je een van de onderlijnde woorden uit de inhoudsopgave aanklikt, beland je automatisch bij het betreffende hoofdstuk. De hypertext link zal anders gekleurd en onderlijnd worden (meestal blauw, afhankelijk van de instellingen van de browser). Bovendien verandert het pijltje in een handje als je met de muis over de link beweegt. Indien je deze link recent nog gebruikt hebt, zal nog een andere kleur worden gebruikt (bijvoorbeeld bruin). Op dezelfde wijze kun je ook linken naar een bepaalde plaats in een ander document in dezelfde map of ergens anders. Je moet in het laatste geval wel het pad opgeven voor het #- symbool. Als de bladwijzer een bepaalde opmaak moet krijgen kun je een stijl-attribuut aan de <a>tag toevoegen: bijv. grote rode letters, vetjes en onderlijnd: <a id="zgdr" style="font-size:16px;font-weight:800;color:red; text-decoration:underline"> TIP Let op dat een bladwijzer die geen hoofdingopmaak heeft of niet in een lijst staat altijd door <p>-tags moet omgeven zijn. <p><a href="#dierenrijk">naar boven</a></p> Een voorbeeld (een hyperlink in een pagina die in dezelfde map staat): terug naar <a href="demo2.htm#body">body</a> Opdracht 2. Een hyperlink aan een document toevoegen a. Open het document DIEREN.HTM in het KLADBLOK. b. Wijzig met een paar kleine ingrepen de opmaak zodat de dierennamen in een niet genummerde lijst verschijnen, zoals in het hoger afgebeelde voorbeeld getoond is. c. Zet onder de titel 'Het dierenrijk' een lijst van de verschillende diersoorten. Laat elk item van de lijst verwijzen naar de overeenkomstige plaats op de pagina. Zet onderaan de pagina de tekst 'Naar boven' die naar de titel 'Het dierenrijk' verwijst. d. Bewaar de code onder de naam DIEREN2.HTM. e. Open het document in de browser en gebruik de verticale schuifbalk om naar het einde te gaan. f. Klik met de muiswijzer onderaan op de hyperlink Naar boven. Wat is het effect? Hoe verandert het adres in de werkbalk? 5.4 Ankers tussen documenten Om een link te maken doe je het volgende: open de tag met <a, specificeer het gelinkte document met de parameter href="pad-/bestandsnaam", geef na > de te accentueren tekst waarop in het document zal moeten geklikt worden, beëindig de link met </a>. J. Gils E. Goossens XHTML-CSS 51
Bij een relatieve padnaam geef je enkel het pad vanuit de huidige map aan. Als de huidige webpagina het adres HTTP://WWW.CURSHTM.EG.ZELE/INDEX.HTM heeft, en de link gaat naar HTTP://WWW.CURSHTM.EG.ZELE/PAGES/PAGINA1.HTM, dan volstaat het in te tikken: <a href="pages/pagina1.htm "> pagina1.htm </a> Als je van PAGINA1.HTM terug naar de hoofdpagina wilt, dan moet de link bevatten. <a href="../index.htm"> Voor bestanden die niet rechtstreeks verbonden zijn met het huidige document (die niet op dezelfde server staan), is het aan te raden de absolute padnaam te gebruiken: je geeft dan het volledige pad in. Indien de documenten rechtstreeks gerelateerd zijn, gebruik je best de relatieve naamgeving, want dat vraagt minder typwerk, het is gemakkelijker om de hele groep documenten te verplaatsen (de paden blijven geldig), en het is efficiënter. Wanneer in een website verwezen wordt naar andere websites dan gebeurt dat met een absolute verwijzing. Wanneer een website waar naar verwezen wordt opgedoekt wordt, een andere naam krijgt of verplaatst wordt dan zijn de hyperlinks naar die website niet meer geldig. Het is dus belangrijk dat de maker van een website regelmatig controleert of de verwijzingen die vanuit zijn website vertrekken nog altijd geldig zijn. Veronderstel dat je in het voorbeeld van de jeugdprogramma s op Ketnet en VTM (TVPROG2.HTM) in een apart scherm nog wat meer uitleg wenst. Je maakt een XHTML-document met uitleg over Ketnet (KETNET1.HTM) en VTM (VTM1.HTM). Vanuit het hoofddocument, dat je nu TVPROG3.HTM noemt, leg je de links naar de twee andere documenten. Een link in omgekeerde richting (Terug naar het hoofddocument) vertrekt vanuit KETNET1.HTM en VTM1.HTM. Het document TVPROG3.HTM: 52 XHTML-CSS J. Gils E. Goossens
Het document KETNET1.HTM: Het document VTM1.HTM: Opdrachten 3. Met een hyperlink vanuit het hoofddocument naar een ander document verwijzen a. Open het document TVPROG2.HTM in het KLADBLOK. b. Vervang de regel <li>ketnet door <li><a href="ketnet1.htm">ketnet</a>. c. Vervang de regel <li>vtm door <li><a href="vtm1.htm">vtm</a>. <body> <h1>jeugdprogramma's op Vlaamse zenders</h1> <ol> <li><a href="ketnet1.htm">ketnet</a> <ol> <li>disney festival</li> <li>samson soap</li> <li>tik Tak</li> 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 <a > en </a>. 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. <html> <head> <title>vtm</title> </head> <body> <h1>vtm</h1> <h3>kabouter Plop</h3> <p>kleuterprogramma over de avonturen van een kabouter</p> <h3>teletubbies</h3> <p>kleuterprogramma met poppetjes</p> <p><a href="tvprog3.htm">terug naar het hoofddocument</a></p> </body> </html> In deze code wordt de hyperlink gerealiseerd met: <a href="tvprog3.htm">terug naar het hoofddocument</a> 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. <html> <head> <title>ketnet</title> </head> <body> <h2>ketnet</h2> <h4>disney festival</h4> <p>een keuze uit bekende Disney-tekenfilms</p> <h4>samson soap</h4> <p>belevenissen van Gert Verhulst en zijn hond</p> <h4>tik Tak</h4> <p>animatiereeks voor kleuters</p> <h4>de boomhut</h4> <p>kindermagazine met Karel Vereertbrugghen en Alida Neslo</p> <h4>hey Arnold</h4> <p>amerikaanse animatiereeks</p> <p><a href="tvprog3.htm">terug naar het hoofddocument</a></p> </body> </html> 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 De verwijzingen die in <a href= > voorkomen kunnen lokaal zijn (deze computer), maar zij kunnen ook betrekking hebben op andere computers binnen het netwerk of binnen het internet. 54 XHTML-CSS J. Gils E. Goossens
Om te voorkomen dat je altijd het volledige adres moet intikken leg je met het commando <base href = > 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: <html> <head> <title>vtm</title> </head> <body style="background-image:url(backgd24.jpg);"> <h1>vtm</h1> <h3>kabouter Plop</h3> <p>kleuterprogramma over de avonturen van een kabouter</p> <h3>teletubbies</h3> <p>kleuterprogramma met poppetjes</p> J. Gils E. Goossens XHTML-CSS 55
<p><a href="tvprog3.htm"> <img src="homepage.jpg" alt="homepage" title="homepage" width="50px" height="50px" style="vertical-align:middle"/> </a></p> </body> </html> De regel <body style="background-image:url(backgd24.jpg);"> neemt de figuur BACKGD24.JPG als achtergrond voor de pagina. TIPS <body style="color:yellow;background-color:blue"> geeft blauwe letters op een gele achtergrond. <img style="float:right" > doet de figuur naar rechts uitlijnen. Op dezelfde wijze kun je een koppeling naar een videobestand leggen: <a href = Radar.avi >Demo van een video</a> of naar een geluidsbestand: <a href = Fluiten.wav >Fluiten</a> 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. <body style="background-color:#c0c0c0;color:#800000"> <h1>hyperlinks naar een nieuwe pagina</h1> <p><a href="dino.jpg"> <img src="../werkbestanden/dinok.jpg" alt="kleine dino" width="114px" height="74px"/></a></p> <p>een dinosauriër is geen klein dier. <br/> Klik op de afbeelding om zijn grote broer te ontmoeten.</p> </body> 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. <p><a href="dino.jpg" target="_blank"> Het attribuut target is niet gekend in XHTML1-STRICT maar wel in XHTML1_TRANSITIONAL. Het wordt wel door de meeste browsers ondersteund. Waarde _blank _self _top naam pagina Betekenis Het document zal in een nieuw venster geopend worden. 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.) 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. <p style="text-align:center"> <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" /> </map> <img src="kreta.jpg" width="611px" height="207px" usemap="#fpmap25" alt="kreta" /></p> 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 <a href = "mailto:erik.goossens@telenet.be"> e-mailbericht</a> 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 Om ervoor te zorgen dat er tussen objecten voldoende spatiëring is kun je gebruik maken van <pre> en </pre>-tags. Witruimte tussen deze tags wordt ook in de webpagina getoond. 58 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 <a>-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 <a>-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