diff options
Diffstat (limited to 'files/nl/learn/html/introduction_to_html/creating_hyperlinks/index.html')
| -rw-r--r-- | files/nl/learn/html/introduction_to_html/creating_hyperlinks/index.html | 307 |
1 files changed, 0 insertions, 307 deletions
diff --git a/files/nl/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/nl/learn/html/introduction_to_html/creating_hyperlinks/index.html deleted file mode 100644 index d5de570e2e..0000000000 --- a/files/nl/learn/html/introduction_to_html/creating_hyperlinks/index.html +++ /dev/null @@ -1,307 +0,0 @@ ---- -title: Hyperlinks maken -slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks -translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks -original_slug: Learn/HTML/Introduction_to_HTML/Hyperlinks_maken ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div> - -<p class="summary">Hyperlinks zijn heel belangrijk – ze maken van het web <em>een Web</em>. Dit artikel toont de vereiste syntaxis voor het maken van een koppeling en bespreekt de beste werkwijzen om met koppelingen te werken.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Vereisten:</th> - <td>Basiskennis van HTML, zoals beschreven in <a href="/nl/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Beginnen met HTML</a>. Kennis over HTML-tekstopmaak, zoals beschreven in <a href="/nl/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Grondbeginselen van HTML-tekst</a>.</td> - </tr> - <tr> - <th scope="row">Doel:</th> - <td>U leert hoe u een hyperlink op een doeltreffende manier aan uw inhoud kunt toevoegen en meerdere bestanden met elkaar kunt verbinden.</td> - </tr> - </tbody> -</table> - -<h2 id="Wat_is_een_hyperlink">Wat is een hyperlink?</h2> - -<p>Hyperlinks zijn een van de meest opwindende vernieuwingen die het web ons biedt. Eigenlijk horen ze er al sinds het allereerste begin bij, maar zij zijn wat van het web <em>een Web</em> maakt - hiermee kunnen we onze documenten met andere documenten (of met een andere informatiebron) verbinden. Ook kunnen we specifieke onderdelen van documenten met elkaar verbinden, en we kunnen apps op een eenvoudig webadres beschikbaar maken (in tegenstelling tot ‘native’ apps, die op voorhand moeten worden geïnstalleerd). Bijna alle webinhoud kan in een koppeling worden omgezet, zodat wanneer hierop wordt geklikt (of deze op een andere manier wordt geactiveerd), de webbrowser naar een ander webadres zal gaan ({{glossary("URL")}}.)</p> - -<div class="note"> -<p><strong>Noot</strong>: een URL wijst ook naar HTML-bestanden, tekstbestanden, afbeeldingen, tekstdocumenten, video- en audiobestanden en alles wat er op het web kan leven. Als de browser niet weet hoe deze het bestand moet weergeven of behandelen, zal worden gevraagd of u het bestand wilt openen of downloaden (in dat geval kunt u er later uw ding mee doen). Als u wordt gevraagd het bestand te openen, wordt de verantwoordelijkheid voor die taak doorgegeven naar een geschikte systeemeigen app op het apparaat.</p> -</div> - -<p>De startpagina van de BBC bijvoorbeeld bevat een groot aantal koppelingen die niet alleen naar meerdere nieuwsartikelen wijzen, maar ook naar verschillende gebieden van de website (navigatiefunctionaliteit), aanmeldings-/registratiepagina’s (gebruikershulpmiddelen) en meer.</p> - -<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p> - -<h2 id="Anatomie_van_een_koppeling">Anatomie van een koppeling</h2> - -<p>Een eenvoudige koppeling wordt gemaakt door de tekst (of andere inhoud, zie {{anch("Koppelingen op blokniveau")}}) die u in een koppeling wilt omzetten binnen een {{htmlelement("a")}}-element op te nemen, en dat element een {{htmlattrxref("href", "a")}}-attribuut te geven (ook bekend als een <strong>Hypertext Reference</strong> of <strong>target</strong>) dat het webadres zal bevatten waarnaar u de koppeling wilt laten wijzen.</p> - -<pre class="brush: html"><p>Ik ben een koppeling naar -<a href="https://www.mozilla.org/nl/">de Mozilla-startpagina</a> aan het maken. -</p></pre> - -<p>Dit geeft het volgende resultaat:</p> - -<p>Ik ben een koppeling naar <a class="ignore-external" href="https://www.mozilla.org/nl/">de Mozilla-startpagina</a> aan het maken.</p> - -<h3 id="Ondersteunende_informatie_toevoegen_met_het_title-attribuut">Ondersteunende informatie toevoegen met het title-attribuut</h3> - -<p>Een andere attribuut dat u mogelijk aan uw koppelingen wilt toevoegen is <code>title</code>; dit is bedoeld voor extra nuttige informatie over de koppeling, zoals het type informatie dat de pagina bevat, of zaken waarvan u zich bewust moet zijn. Voorbeeld:</p> - -<pre class="brush: html"><p>Ik ben een koppeling naar -<a href="https://www.mozilla.org/nl/" - title="De beste plek om meer informatie over Mozilla’s - missie te vinden en hoe u daaraan kunt bijdragen">de Mozilla-startpagina</a> -aan het maken.</p></pre> - -<p>De code hierboven zorgt ervoor dat de title als een tooltip verschijnt als u de muisaanwijzer boven een koppeling houdt:</p> - -<p>Ik ben een koppeling naar <a class="ignore-external" href="https://www.mozilla.org/nl/" title="De beste plek om meer informatie over Mozilla’s missie te vinden en hoe u daaraan kunt bijdragen">de Mozilla-startpagina</a> aan het maken.</p> - -<div class="note"> -<p><strong>Noot</strong>: een hyperlink-titel zal alleen verschijnen als u de muis erboven houdt. Dit betekent dat mensen die een toetsenbord gebruiken om in een webpagina te navigeren moeite zullen hebben om de informatie in de tooltip te lezen. Als de informatie van een titel echt nodig is om de pagina te kunnen gebruiken, zou u die moeten aabieden op een manier die voor alle gebruikers toegankelijk is. U kunt de informatie bijvoorbeeld in de normale tekst van de webpagina zetten.</p> -</div> - -<h3 id="Actief_leren_uw_eigen_voorbeeldkoppeling_maken">Actief leren: uw eigen voorbeeldkoppeling maken</h3> - -<p>Tijd om actief te leren: we zouden graag zien dat u een HTML-document maakt met uw lokale broncode-editor. (Ons <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">‘getting started’-sjabloon</a> is zeer geschikt voor dat doel.)</p> - -<ul> - <li>In de HTML-body voegt u een of meer alinea’s (of andere inhoudstypen waarover u hebt geleerd) toe.</li> - <li>Zet een deel van de inhoud om in hyperlinks.</li> - <li>Voeg title-attributen toe.</li> -</ul> - -<h3 id="Koppelingen_op_blokniveau">Koppelingen op blokniveau</h3> - -<p>We hebben al vermeld dat u ongeveer alle inhoud in een hyperlink kunt omzetten, zelfs <a href="/nl/Learn/HTML/Introduction_to_HTML/Getting_started#Blok-_versus_inline-elementen">elementen op blokniveau</a>. Als u een afbeelding in een koppeling zou willen omzetten, kon u die afbeelding gewoon tussen <code><a></a></code>-labels zeten.</p> - -<pre class="brush: html"><a href="https://www.mozilla.org/nl/"> - <img src="mozilla-image.png" alt="mozilla-logo dat naar de mozilla-startpagina verwijst"> -</a></pre> - -<div class="note"> -<p><strong>Noot</strong>: in een later artikel zult u nog veel meer over het gebruik van afbeeldingen op het web ontdekken.</p> -</div> - -<h2 id="Een_snelle_uitleg_over_URL’s_en_paden">Een snelle uitleg over URL’s en paden</h2> - -<p>Om het doel van een hyperlink volledig te begrijpen, moet u URL’s en bestandspaden begrijpen. Deze sectie verschaft u de informatie die u daarvoor nodig hebt.</p> - -<p>Een URL, of Uniform Resource Locator, is gewoon een string (tekst) die bepaalt waar iets op het web kan worden gevonden. Mozilla’s Nederlandstalige startpagina bijvoorbeeld bevindt zich op <code>https://www.mozilla.org/nl/</code>.</p> - -<p>URL’s gebruiken paden om bestanden te vinden. Paden tonen ons waar een bestand zich in een bestandssysteem bevindt. Laten we een eenvoudig voorbeeld van een mapstructuur bekijken (zie de map <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a>.)</p> - -<p><img alt="Een eenvoudige mapstructuur. De bovenliggende map heet creating-hyperlinks en bevat twee bestanden met de naam index.html en contacts.html, en twee mappen met de naam projects en pdfs, die respectievelijk een bestand index.html en een bestand project-brief.pdf bevatten" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p> - -<p>De <strong>hoofdmap</strong> van deze mapstructuur heet <code>creating-hyperlinks</code>. Als u op uw lokale computer aan een website werkt, zult u een map hebben waarbinnen de volledige website zich bevindt. In de hoofdmap hebben we een bestand <code>index.html</code> en een <code>contacts.html</code>. Op een echte website zou <code>index.html</code> onze startpagina of landingspagina zijn (een webpagina die als het startpunt voor een website of een bepaalde sectie van een website dient).</p> - -<p>In onze hoofdmap zitten ook twee andere mappen – <code>pdfs</code> en <code>projects</code>. In elk van hen steekt één bestand – respectievelijk een PDF-bestand (<code>project-brief.pdf</code>) en een <code>index.html-bestand</code>. Twee <code>index.html</code>-bestanden kunnnen dus heel goed in één project bestaan, zolang ze op verschillende locaties in het bestandsysteem zijn opgeslagen. Bij veel websites is dit het geval. De tweede <code>index.html</code> is misschien de landingspagina voor projectgerelateerde informatie. (Tussen haakjes: een <strong>landingspagina</strong> is een pagina op uw website die specifiek is ingericht voor bezoekers die op die pagina binnenkomen (landen). De bezoeker kan op uw pagina landen via een zoekopdracht of bijvoorbeeld een online- of offlinecampagne die hem of haar naar die specfieke pagina stuurt.)</p> - -<ul> - <li> - <p><strong>Dezelfde map</strong>: stel dat u een hyperlink aan het bestand <code>index.html</code> op het hoogste niveau wilt toevoegen. De hyperlink in deze index.html wijst naar <code>contacts.html.</code> U hoeft dan alleen de bestandsnaam van het bestand waarnaar u wilt verwijzen op te geven, omdat dit zich in dezelfde map bevindt als het huidige bestand. De URL is dus gewoon <code>contacts.html</code>:</p> - - <pre class="brush: html"><p>Wilt u contact opnemen met een staflid? -Details vindt u op onze <a href="contacts.html">contactpagina</a>.</p></pre> - </li> - <li> - <p><strong>Afdalen naar submappen</strong>: stel dat u opnieuw een hyperlink aan het bestand <code>index.html</code> in de hoofdmap wilt toevoegen, maar deze keer wijst de hyperlink naar <code>projects/index.html</code>. In dat geval zou u omlaag naar de map <code>projects</code> moeten gaan voordat u het bestand aangeeft waarnaar u wilt verwijzen. Dit doet u door eerst de naam van de map te noteren, dan een voorwaartse schuine streep te schrijven, en dan de naam van het bestand. De URL zal er dus zo uitzien: <code>projects/index.html</code>:</p> - - <pre class="brush: html"><p>Bezoek mijn <a href="projects/index.html">project-startpagina</a>.</p></pre> - </li> - <li> - <p><strong>Teruggaan naar bovenliggende mappen</strong>: als u een hyperlink in <code>projects/index.html</code> wilt plaatsen en u wilt dat die koppeling naar <code>pdfs/project-brief.pdf</code> wijst, moet u een niveau omhoog gaan, en dan opnieuw omlaag naar de map <code>pdf</code>. ‘Naar een bovenliggende map gaan’ wordt aangegeven via twee puntjes – <code>..</code> – dus de te gebruiken URL is <code>../pdfs/project-brief.pdf</code>:</p> - - <pre class="brush: html"><p>Een hyperlink naar mijn <a href="../pdfs/project-brief.pdf">projectsamenvatting</a>.</p></pre> - </li> -</ul> - -<div class="note"> -<p><strong>Noot</strong>: zo nodig kunt u meerdere instanties van deze eigenschappen in complexe URL’s combineren, bijvoorbeeld <code>../../../complex/pad/naar/mijn/bestand.html</code>.</p> -</div> - -<h3 id="Documentfragmenten">Documentfragmenten</h3> - -<p>Het is mogelijk om naar een specifiek deel van een HTML-document te verwijzen. Dit specifieke deel noemen we een <strong>documentfragment</strong>. Om dit te doen hebt u een {{htmlattrxref("id")}}-attribuut nodig. U moet het toekennen aan het element waarnaar u uw hyperlink wilt laten wijzen. Het is meestal zinvol om er een geschikte kop voor te gebruiken. Die kop zal er ongeveer zo uitzien:</p> - -<pre class="brush: html"><h2 id="E-mailadres">E-mailadres</h2></pre> - -<p>Om dan naar dat specifieke <code>id</code> te verwijzen, voegt u de inhoud van het id aan het einde van de URL toe, voorafgegaan door een hekje (#). Voorbeeld:</p> - -<pre class="brush: html"><p>Wilt u ons een brief schrijven? Gebruik dan ons <a href="contacts.html#e-mailadres">e-mailadres</a>.</p></pre> - -<p>U kunt het documentfragment zelfs aan <em>een ander deel van hetzelfde document</em> koppelen:</p> - -<pre class="brush: html"><p>Het<a href="#e-mailadres">e-mailadres van ons bedrijf</a> vindt u onderaan de pagina.</p></pre> - -<h3 id="Absolute_versus_relatieve_URL’s">Absolute versus relatieve URL’s</h3> - -<p>Twee termen die u op het web zult tegenkomen zijn <strong>absolute URL</strong> en <strong>relatieve URL:</strong></p> - -<p><strong>Een absolute URL</strong> wijst naar de absolute locatie op het web. Die locatie houdt ook het {{glossary("protocol")}} en de {{glossary("domain name")}} in. Stel bijvoorbeeld dat een pagina <code>index.html</code> wordt geüpload naar een map die <code>projects</code> heet. Als die zich in de hoofdmap (root in het Engels) van een webserver bevindt en het domein van de website is <code>http://www.example.com</code>, zou u de pagina op <code>http://www.example.com/projects/index.html</code> kunnen vinden. (Of zelfs alleen <code>http://www.example.com/projects/</code>, want de meeste webservers zoeken naar een landingspagina zoals <code>index.html</code> die ze kunnen laden als deze niet in de URL wordt vermeld.)</p> - -<p>Een absolute URL zal altijd naar dezelfde locatie wijzen, waar deze ook wordt gebruikt.</p> - -<p><strong>Een relatieve URL</strong> wijst naar een locatie die <em>relatief</em> is ten opzichte van het bestand vanwaar u verwijst. De koppeling ziet eruit zoals de URL’s die we in de vorige sectie hebben bekeken. Als u bijvoorbeeld een koppeling van ons voorbeeld <code>http://www.example.com/projects/index.html</code> naar een PDF-bestand in dezelfde map wilt maken, zou de URL alleen uit de bestandsnaam bestaan – bv. <code>project-brief.pdf</code> – extra informatie is dan niet nodig. Als de PDF beschikbaar was in de submap binnen <code>projects</code> met de naam <code>pdfs</code>, zou de relatieve koppeling <code>pdfs/project-brief.pdf</code> zijn (de equivalente absolute URL zou er dan zo uitzien: <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>).</p> - -<p>Een relatieve URL kan naar verschillende plekken wijzen, afhankelijk van de locatie van het bestand waarin de koppeling wordt vermeld zich bevindt. Als we bijvoorbeeld ons bestand <code>index.html</code> uit de map <code>projects</code> zouden halen en dit in de hoofdmap van de website zouden plaatsen (het hoogste niveau, geen submappen), zou <code>pdfs/project-brief.pdf</code> nu naar <code>http://www.example.com/pdfs/project-brief.pdf</code> wijzen en niet naar <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p> - -<h2 id="Optimale_methoden_voor_het_werken_met_koppelingen">Optimale methoden voor het werken met koppelingen</h2> - -<p>Er bestaan een aantal ‘beste werkwijzen’ die u kunt volgen als u een hyperlink maakt. Die werkwijzen gaan we hieronder bekijken.</p> - -<ul> -</ul> - -<h3 id="Verwoord_uw_koppelingen_duidelijk">Verwoord uw koppelingen duidelijk</h3> - -<p>Het is makkelijk om een paar koppelingen op uw pagina te plaatsen, maar dat is niet genoeg. We moeten onze hyperlinks <em>toegankelijk</em> maken voor alle lezers, ongeacht hun huidige context en hulpmiddelen van hun voorkeur. Voorbeeld:</p> - -<ul> - <li>Mensen die een schermlezer gebruiken, springen graag van koppeling naar koppeling en lezen die zonder op de context in te gaan.</li> - <li>Zoekmachines gebruiken hyperlinktekst om doelbestanden te indexeren. Het is dus een goed idee om sleutelwoorden in uw koppelingstekst te gebruiken. Deze sleutelwoorden beschrijven de plek waar de koppeling u naartoe brengt.</li> - <li>Visuele lezers scannen de tekst in plaats van elk woord te lezen en hun blik zal op pagina-eigenschappen worden gericht die er echt uitspringen, zoals koppelingen. Ze zullen de beschrijvende tekst in een koppeling nuttig vinden.</li> -</ul> - -<p>We bekijken een specifiek voorbeeld:</p> - -<p><em><strong>Goede</strong> koppelingstekst:</em> <a href="https://firefox.com">Download Firefox</a></p> - -<pre class="brush: html"><p><a href="https://firefox.com/"> - Download Firefox -</a></p></pre> - -<p><em><strong>Slechte</strong> koppelingstekst:</em> <a href="https://firefox.com/">Klik hier</a> om Firefox te downloaden</p> - -<pre class="brush: html"><p><a href="https://firefox.com/"> - Klik hier -</a> -om Firefox te downloaden</p> -</pre> - -<p>Andere tips:</p> - -<ul> - <li>Herhaal de URL niet als onderdeel van de koppelingstekst – URL’s zijn lelijk en klinken nog lelijker als ze letter voor letter door een schermlezer worden voorgelezen.</li> - <li>Zeg niet ‘koppeling’ of ‘verwijst naar’ in de koppelingstekst – dit is alleen maar ruis. Schermlezers vertellen gebruikers dat er een koppeling is. Visuele gebruikers zullen weten dat er een koppeling staat, omdat een koppeling standaard wordt onderstreept en ook in een andere kleur zal staan. (Deze conventie kan dus beter niet worden doorbroken, want gebruikers zijn eraan gewend.)</li> - <li>Houd uw koppelingstekst zo kort mogelijk – lange koppelingen irriteren schermlezergebruikers nog het meest, omdat die naar het hele verhaal moeten luisteren.</li> - <li>Minimaliseer het gebruik van meerder kopieën van dezelfde tekst die naar verschillende plaatsen wordt verwezen. Dit kan problemen veroorzaken bij gebruikers van schemrlezers, want zij zullen een koppelingen vaker buiten de context ervan lezen – diverse koppelingen met het label ‘klik hier’, ‘klik hier’, ‘klik hier’ zouden verwarrend zijn.</li> -</ul> - -<h3 id="Gebruik_relatieve_koppelingen_waar_mogelijk">Gebruik relatieve koppelingen waar mogelijk</h3> - -<p>Als u de beschrijving hierboven leest, denkt u misschien dat het een goed idee is om altijd absolute koppelingen te gebruiken. Ze kunnen niet defact raken als een pagina van plaats verandert, en relatieve koppelingen zullen dat wel doen. Niettemin is het beter een relatieve koppeling te gebruiken waar dat mogelijk is als u naar locaties <em>op dezelfde website</em> verwijst (Als u naar <em>een andere website</em> verwijst, zult u een absolute koppeling nodig hebben):</p> - -<ul> - <li>Ten eerste is het veel makkelijker om uw code te scannen – relatieve URL’s zijn in het algemeen veel korter dan absolute URL’s, wat het lezen van code veel makkelijker maakt.</li> - <li>Ten tweede is het gebruik van relatieve URL’s veel efficiënter. Als u een absolute URL gebruikt, zoekt de browser eerst de echte locatie van de server op door de domeinnaam op de {{glossary("DNS")}}-server op te zoeken, vervolgens gaat de browser naar de server waar het bestand zich op bevindt, en pas daarna vindt deze het gevraagde bestand. Een relatieve URL laat de browser naar het gevraagde bestand op dezelfde server zoeken. Als u dus absolute URL’s gebruikt waar relatieve URL’s voldoende zijn, laat u uw browser constant extra werk doen, wat betekent dat deze minder efficiënt werkt.</li> -</ul> - -<h3 id="Koppelingen_naar_browservreemde_bronnen_–_gebruik_duidelijke_wegwijzers">Koppelingen naar browservreemde bronnen – gebruik duidelijke wegwijzers</h3> - -<p>Als u hyperlinks schrijft naar een bron die men downloadt (zoals een PDF- of Word-document), streamt (zoals video of audio) of die een ander potentieel onverwacht effect heeft (een pop-upvenster opent of een Flash-film laadt), voeg dan duidelijke bewoording toe om elke verwarring te vermijden. Het kan zeer bijvoorbeeld zeer vervelend worden:</p> - -<ul> - <li>Als u een lage bandbreedte hebt, op een koppeling klikt en er onverwacht een download van een meerdere megabytes begint.</li> - <li>Als u Flash Player niet hebt geïnstalleerd, op een koppeling klikt en u plotseling naar een pagina wordt gebracht die Flash vereist.</li> -</ul> - -<p>Laten we een paar voorbeelden bekijken en wat voor tekst we in dit soort gevallen kunnen gebruiken:</p> - -<pre class="brush: html"><p><a href="http://www.example.com/large-report.pdf"> - Het omzetrapport downloaden(PDF, 10MB) -</a></p> - -<p><a href="http://www.example.com/video-stream/"> - De video bekijken (stream opent in apart tabblad, HD-kwaliteit) -</a></p> - -<p><a href="http://www.example.com/car-game"> - Het autospel spelen (vereist Flash-software) -</a></p></pre> - -<h3 id="Gebruik_het_download-attribuut_als_u_naar_een_download_verwijst">Gebruik het download-attribuut als u naar een download verwijst</h3> - -<p>Als u een koppeling naar een bron schrijft die beter kan worden gedownload dan deze in de browser te openen, kunt u het <code>download</code>-attribuut gebruiken en de koppeling een standaard bestandsnaam geven om de download mee op te slaan. Hier is een voorbeeld met een downloadkoppeling naar de Windows-versie van Firefox 39:</p> - -<pre class="brush: html"><a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=nl" - download="firefox-39-installer.exe"> - Download Firefox 39 voor Windows -</a></pre> - -<h2 id="Actief_leren_een_navigatiemenu_maken">Actief leren: een navigatiemenu maken</h2> - -<p>Voor deze oefening willen we dat u een paar pagina’s naar elkaar laat verwijzen met een navigatiemenu. Zo kunt u een website maken die uit meerdere pagina’s bestaat. Dit is een gebruikelijke manier – dezelfde paginastructuur wordt op elke pagina herhaald, inclusief het navigatiemenu. Als u dus op de koppelingen klikt, hebt u de indruk dat u op dezelfde plek blijft en dat er verschillende inhoud wordt getoond.</p> - -<p>U hebt lokale kopieën van de volgende vier pagina’s nodig, alle vier in dezelfde map (zie ook de map <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> voor een volledige lijst):</p> - -<ul> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li> -</ul> - -<p>Wat u moet doen:</p> - -<ol> - <li>Voeg een ongeordende lijst toe op de aangegeven plek op één pagina, die de namen bevat van de pagina’s waarnaar wordt verwezen. Een navigatiemenu is gewoonlijk niet meer dan een lijst met koppelingen, dus semantisch gezien is dit in orde.</li> - <li>Zet alle paginanamen om naar een hyperlink naar die pagina.</li> - <li>Kopieer het navigatiemenu naar de drie andere pagina’s.</li> - <li>Op elke pagina verwijdert u de koppeling naar zichzelf – dat is alleen maar verwarrend en zinloos, en het ontbreken van een koppeling is een goede visuele herinnering aan de pagina waarop u zich nu bevindt.</li> -</ol> - -<p>Het voltooide voorbeeld zou er ongeveer zo moeten uitzien:</p> - -<p><img alt="Een voorbeeld van een eenvoudig HTML-navigatiemenu, met startmenu, afbeeldingen, projecten en sociale menu-items" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p> - -<div class="note"> -<p><strong>Noot</strong>: als u vastloopt, of er niet zeker van bent dat u het allemaal juist hebt, kunt u de map <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a> bekijken om het juiste antwoord te zien.</p> -</div> - -<h2 id="E-mailkoppelingen">E-mailkoppelingen</h2> - -<p>Het is mogelijk om koppelingen of knoppen te maken die een nieuwe e-mailbericht openen, als erop wordt geklikt. Dit is mogelijk door het gebruik van het {{HTMLElement("a")}}-element en het URL-schema <code>mailto:</code>.</p> - -<p>In de meest eenvoudige en gebruikelijke vorm duidt een ‘<code>mailto:</code>-koppeling’ gewoon het e-mailadres van de bedoelde ontvanger aan. Voorbeeld:</p> - -<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">E-mail nergens naartoe verzenden</a> -</pre> - -<p>Het resultaat is een koppeling die er zo uitziet: <a href="mailto:nowhere@mozilla.org">E-mail nergens naartoe verzenden</a>.</p> - -<p>In feite is het e-mailadres zelfs optioneel. Als u het weglaat (dat wil zeggen, uw {{htmlattrxref("href", "a")}} is gewoon "mailto:"), zal een nieuw venster voor uitgaande e-mail worden geopend door het e-mailprogramma van de gebruiker waarin nog geen bestemmingsadres is ingevuld. Dit is vaak nuttig voor het ‘Delen’ van koppelingen waarop gebruikers kunnen klikken om een e-mailbericht naar een zelfgekozen e-mailadres te sturen.</p> - -<h3 id="Details_toevoegen">Details toevoegen</h3> - -<p>Behalve het e-mailadres kunt u nog andere informatie toevoegen. In feite kunnen alle kopregels van een standaardmail worden toegevoegd aan de <code>mailto</code>-URL die u opgeeft. De meest gebruikelijke zijn ‘subject’ (onderwerp), ‘cc’, en ‘body’ (body is de inhoud, body is geen echt headerveld, maar u kunt er een korte inhoud van het nieuwe e-mailbericht mee opgeven). Elk veld en de waarde ervan wordt als zoekterm opgegeven.</p> - -<p>Hier is een voorbeeld met cc, bcc, subject en body:</p> - -<pre class="brush: html"><a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email"> - E-mail verzenden met cc, bcc, subject en body -</a></pre> - -<div class="note"> -<p><strong>Noot:</strong> de waarden van elk veld moeten URL-gecodeerd zijn, d.w.z. met niet-afdrukbare tekens (onzichtbare tekens zoals tabs, enters en pagina-einden) en spaties <a href="http://en.wikipedia.org/wiki/Percent-encoding">‘percent-escaped’</a>). Let ook op het gebruik van het vraagteken (<code>?</code>) om de hoofd-URL van de ingevoerde waarden te scheiden, en de ampersand (&) om de velden in de <code>mailto:</code>-URL van elkaar te scheiden. Dit is standaard URL-zoeknotatie. U kunt de <a href="https://developer.mozilla.org/nl/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#De_GET-methode">De GET-methode</a> lezen als u meer over URL-querynotatie wilt weten.)</p> -</div> - -<p>Dit zijn enkele voorbeelden van <code>mailto</code>-URL’s:</p> - -<ul> - <li><a href="mailto:">mailto:</a></li> - <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li> - <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li> - <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li> - <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=Dit%20is%20het%20onderwerp">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=Dit%20is%20het%20onderwerp</a></li> -</ul> - -<h2 id="Samenvatting">Samenvatting</h2> - -<p>Dat is het wat koppelingen betreft, in elk geval voorlopig! U zult er later in deze cursus naar terugkeren als u begint te leren hoe u ze kunt stijlen. We gaan verder met tekstsemantiek en bekijken een aantal geavanceerde en ongewone eigenschappen die u nuttig zult vinden – Geavanceerde tekstopmaak is uw volgende halte.</p> - -<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p> |