HTML. Links. Hyperlinks. Hans Roeyen V 3.0

Transcriptie

1 Links En Hyperlinks Hans Roeyen V februari 2015

2 Inhoud 1. Werken met (Hyper)links De anchor tag Het ID attribuut Oefeningen op linken Absoluut en relatief linken... 9 Hans Roeyen HTML Links 2-10

3 1. Werken met (Hyper)links 1.1. De anchor tag Om te kunnen linken naar een ander document op het web maakt HTML gebruik van een Hyperlink. Om de link te maken gebruiken we dan een anchor <a>. Een anchor kan naar eender welke bron verwijzen in het web: een HTML pagina, een geluidsbestand, een film, enz. Specifiek kan je een onderscheidt maken tussen een HTML link om te verwijzen naar een externe bron en een HTML anchor als de link verwijst naar een adres binnen een document. De syntax is als volgt: <a href= url >Tekst die getoond moet worden</a> Zo zal de onderstaande code linken naar de website van Lethas: <a href= > Website van Lethas</a> Wanneer we aan de <a> tag het target attribuut toevoegen, kunnen we aangeven waar het document zal geopend worden. Zo zal de link in de onderstaande code het document openen in een nieuw browservenster. <a href=" target= _blank >Lethas</a> Het ID attribuut Het id attribuut wordt gebruikt om een benoemd anchor te maken. Met benoemde anchors kunnen we links maken die toelaten dat gebruikers rechtsreeks naar een bepaald deel van een pagina zullen springen zonder dat ze hiervoor hoeven te scrollen. Dit is de syntax: <a id= label >Tekst die getoond moet worden</a> De onderstaande code definieert een benoemd anchor: <a id= sectie4 >ga naar de vierde sectie</a> De volgende code toont ons hoe we kunnen linken naar de eerste sectie: <a href= #sectie4 >ga naar de vierde sectie</a> De volgende code laat zien hoe we dan vanuit een andere pagina rechtsreeks kunnen linken naar de eerste sectie in het (fictieve) bestand test.html. <a href= > Ga naar de vierde sectie</a> Hans Roeyen HTML Links 3-10

4 Opmerkingen Voeg altijd een slash (/) toe aan het einde van supmap referenties. Wanneer we linken zoals in href= zullen we twee HTTP requests genereren naar de server omdat de server zelf de slash zal toevoegen op het einde van het adres. Dat wordt dan href= Benoemde anchors worden heel veel gebruikt om inhoudstabellen te maken in het geval van groot documenten. Elk hoofdstuk in het document wordt dan voorzien van een benoemd anchor en de links naar elk van deze anchors worden dan in het begin van het document geplaatst. Indien een browser een gevraagd benoemd anchor niet kan vinden, wordt de cursor per standaard aan het begin van het document geplaatst. Er wordt in geen geval een fout gegenereerd. Met <a href= #top >Naar boven</a>kunnen we een link maken die ons terug naar boven op de webpagina brengt Oefeningen op linken Voorbeeld 1: openen van een link in een nieuw browservenster <a href="test.html" target="_blank">test Pagina</a> Hans Roeyen HTML Links 4-10

5 Voorbeeld 2: linken naar een locatie binnen eenzelfde pagina <p>ga naar <a href="#hoofd 16">Hoofdstuk 16</a></p> <h2>hoofdstuk 1</h2><p>Dit is hoofdstuk 1 van de tekst</p> <h2>hoofdstuk 2</h2><p>Dit is hoofdstuk 2 van de tekst</p> <h2>hoofdstuk 3</h2><p>Dit is hoofdstuk 3 van de tekst</p> <h2>hoofdstuk 4</h2><p>Dit is hoofdstuk 4 van de tekst</p> <h2>hoofdstuk 5</h2><p>Dit is hoofdstuk 5 van de tekst</p> <h2>hoofdstuk 6</h2><p>Dit is hoofdstuk 6 van de tekst</p> <h2>hoofdstuk 7</h2><p>Dit is hoofdstuk 7 van de tekst</p> <h2>hoofdstuk 8</h2><p>Dit is hoofdstuk 8 van de tekst</p> <h2>hoofdstuk 9</h2><p>Dit is hoofdstuk 9 van de tekst</p> <h2>hoofdstuk 10</h2><p>Dit is hoofdstuk 10 van de tekst</p> <h2>hoofdstuk 11</h2><p>Dit is hoofdstuk 11 van de tekst</p> <h2>hoofdstuk 12</h2><p>Dit is hoofdstuk 12 van de tekst</p> <h2>hoofdstuk 13</h2><p>Dit is hoofdstuk 13 van de tekst</p> <h2>hoofdstuk 14</h2><p>Dit is hoofdstuk 14 van de tekst</p> <h2>hoofdstuk 15</h2><p>Dit is hoofdstuk 15 van de tekst</p> <a id="hoofd 16"> <h2>hoofdstuk 16</h2> </a><p>dit is hoofdstuk 16</p> <h2>hoofdstuk 17</h2> <p>dit is hoofdstuk 17 van de tekst</p> Hans Roeyen HTML Links 5-10

6 Opmerking: de volgende voorbeelden dienen enkel ter illustratie van de mogelijkheden met links en zullen niet allemaal volledig werken. In een aantal voorbeelden wordt verwezen naar gegevens of bronnen die niet aanwezig zijn. Toch kan je de voorbeelden uittesten! Voorbeeld 3: ontsnappen uit een frame ( zie ook sectie over frames verderop in de cursus) <p>hoe kom ik hier weg?</p> <a href=" target="top"> Klik hier!</a> Voorbeeld 4: creëren van een mailto link <p>dit is een mail link: <a href="mailto:[email protected]?subject=hallo%20iedereen"> Verstuur mail</a> </p> <p> <b>nota</b> Spaties tussen woorden zouden vervangen moeten worden door %20 om zeker te zijn dat de browser onze tekst correct zal weergeven</p> Hans Roeyen HTML Links 6-10

7 Voorbeeld 5: creëren van een iets complexere mailto link <p>dit is een mail link: <a &body=u%20bent%20uitgenodigd%20op%20onze%20jaarlijkse%20uitstap!"> Verstuur mail</a></p> Voorbeeld 6: de volgende code verschaft ons toegang tot een nieuwsgroep <p>dit is een link naar een nieuwsgroep: <a href="news:alt.html">html Newsgroup</a> </p> Hans Roeyen HTML Links 7-10

8 Voorbeeld 7: met de volgende code kunnen we een bestand downloaden met FTP <p> <a href=" ftp.gimp.org/pub/gimp/v2.8/windows/">download Gimp</a> </p> Voorbeeld 8: met de volgende code kunnen we een afbeelding als link gebruiken <p>we kunnen ook een afbeelding gebruiken als link: <a href="test.html"><img border="0" src="zonsondergang.jpg" width="65" height="38"></a></p> Een hoofdstuk over linking zou niet volledig zijn zonder iets te zeggen over absolute en relative linking Hans Roeyen HTML Links 8-10

9 Absoluut en relatief linken Met absolute linking geven we een volledige url in om te linken naar een andere pagina. Dit gebruiken we om te linken naar documenten die zich op andere servers bevinden in het web. In voorbeeld 3 ( hebben we deze manier gebruikt. Wanneer we een link maken vanuit een pagina naar een andere pagina op dezelfde server, hoeven we geen volledige url te vermelden. Stel dat je wilt linken naar een andere pagina die in dezelfde map zit als de pagina waaruit we linken, dan volstaat een verwijzing met enkel de naam van het bestand. In voorbeeld 8 is deze manier gebruikt. Dit noemt men dan relative linkink. Zo kunnen we binnenin onze mapstructuur gemakkelijk verwijzen naar andere pagina s. Bekijk even de onderstaande voorbeelden: <a href= winkel/bestel.html >Bestel hier</a> <a href=../index.html >Terug naar startpagina</a> <a href=../../index.html >Home</a> <a href=../contact.html >Contact</a> Relative linking gebruiken we dus om te linken naar pagina s die deel uitmaken van onze eigen website. TAG <a> Functie Definieert een anchor Opdracht HTML: Oefening op relative linking Hans Roeyen HTML Links 9-10

10 TEST Foto 2006 Vakantie 2007 Hobby Theater Contact Maak deze mappenstructuur na in je verkenner. In elke map zit een HTML bestand dat de naam heeft van de map. Bijvoorbeeld: in de map Foto zit dus het bestand foto.html In elk bestand zet je bovenaan een titel met de naam van de map waarin het bestand zit. In de map Test plaats je het bestand index.html welke de home pagina is. Opdracht: Zorg dat we vanuit eender welke pagina naar eender welke andere pagina kunnen door te klikken op een hyperlink. Let wel: Je mag enkel gebruik maken van relative linkink en dus NIET van absolute linking!! Hans Roeyen HTML Links 10-10