diff options
| author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
| commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
| tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/nl/learn/html/introduction_to_html | |
| parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
| download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip | |
remove retired locales (#699)
Diffstat (limited to 'files/nl/learn/html/introduction_to_html')
10 files changed, 0 insertions, 2821 deletions
diff --git a/files/nl/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/nl/learn/html/introduction_to_html/advanced_text_formatting/index.html deleted file mode 100644 index 71c43b4571..0000000000 --- a/files/nl/learn/html/introduction_to_html/advanced_text_formatting/index.html +++ /dev/null @@ -1,453 +0,0 @@ ---- -title: Geavanceerde tekstopmaak -slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting -translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting -original_slug: Learn/HTML/Introduction_to_HTML/Gevorderde_tekstopmaak ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</div> - -<p class="summary">Er zijn nog vele andere elementen in HTML om je tekst mee op te maken waar we in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML tekst : basisprincipes</a> niet aan toe zijn gekomen. De elementen die in dit artikel worden besproken zijn minder bekend maar niettemin nuttig om meer over te weten (en dan heb je de hele lijst nog lang niet gezien). In dit artikel leer je citaten op te maken, beschrijvende lijsten, computercode en andere verwante tekst, subscript en superscript, contactinformatie en nog veel meer.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Vereisten:</th> - <td>Basiskennis HTML zoals aangeboden in <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Beginnen met HTML</a>. Kennis over HTML tekstopmaak zoals aangeboden in <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML Tekst: basisprincipes. </a></td> - </tr> - <tr> - <th scope="row">Doel:</th> - <td>Je leert hoe je minder bekende HTML-elementen kan gebruiken om gevorderde semantische functionaliteit mogelijk te maken.</td> - </tr> - </tbody> -</table> - -<h2 id="Beschrijvende_lijsten">Beschrijvende lijsten</h2> - -<p>In HTML Basisprincipes heb je geleerd hoe je <a href="/nl/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lijsten">eenvoudige lijsten</a> in HTML op kan maken. We hebben het toen niet over een derde lijsttype gehad, eentje dat je nu en dan zal tegenkomen: <strong>beschrijvende lijsten</strong>. Het doel van deze lijsten is om een aantal lijstonderdelen op te maken samen met de beschrijvingen die ermee worden geassociëerd. Ze kunnen termen en hun definities zijn of vragen en antwoorden. Als voorbeeld gaan we nu een stel termen en hun definities bekijken:</p> - -<pre>Alleenspraak -Vind je in een drama. Een karakter spreekt met zichzelf. Zo verwoordt hij zijn innerlijke gedachten of gevoelens en deelt deze met het publiek (maar niet met andere karakters in het stuk). -Monoloog -Vind je in een drama. Een karakter spreekt zijn eigen gedachten luidop uit en deelt ze met het publiek en met andere aanwezige karakters. -Terzijde -Vind je in een drama. Een karakter deelt een commentaar met het publiek en bereikt zo een humoristisch of dramatisch effect. Dit is meestal een gevoel, gedachte of extra achtergrondinformatie.</pre> - -<p>Beschrijvende lijsten gebruiken een andere verpakking als de andere lijsttypes— {{htmlelement("dl")}}. Elk lijstonderdeel wordt door een {{htmlelement("dt")}}-element omhuld ({{htmlelement("dt")}} is ee beschrijvende term of <strong>d</strong>escription <strong>t</strong>erm in het Engels) en elke beschrijving bevindt zich in een {{htmlelement("dd")}} (description description) element. We gaan nu de opmaak van ons voorbeeld voltooien:</p> - -<pre class="brush: html"><dl> - <dt>Alleenspraak</dt> - <dd>Vind je in een drama. Een karakter spreekt met zichzelf. Zo verwoordt hij zijn innerlijke gedachten of gevoelens en deelt deze met het publiek (maar niet met andere karakters in het stuk).</dd> - <dt>Monoloog</dt> - <dd>Vind je in een drama. Een karakter spreekt zijn eigen gedachten luidop uit en deelt ze met het publiek en met andere aanwezige karakters.</dd> - <dt>Terzijde</dt> - <dd>Vind je in een drama. Een karakter deelt een commentaar met het publiek en bereikt zo een humoristisch of dramatisch effect. Dit is meestal een gevoel, gedachte of extra achtergrondinformatie.</dd> -</dl></pre> - -<p>De standaardstijlen van de browser zullen de beschrijvingen van de beschrijvende lijst ietwat laten inspringen. MDN's standaardstijl volgt deze conventie vrij nauw op maar MDN maakt de termen ook vet om ze extra te benadrukken.</p> - -<dl> - <dt>alleenspraak</dt> - <dd>Vind je in een drama. Een karakter spreekt met zichzelf. Zo verwoordt hij zijn innerlijke gedachten of gevoelens en deelt deze met het publiek (maar niet met andere karakters in het stuk).</dd> - <dt>monoloog</dt> - <dd>Vind je in een drama. Een karakter spreekt zijn eigen gedachten luidop uit en deelt ze met het publiek en met andere aanwezige karakters.</dd> - <dt>terzijde</dt> - <dd>Vind je in een drama. Een karakter deelt een commentaar met het publiek en bereikt zo een humoristisch of dramatisch effect. Dit is meestal een gevoel, gedachte of extra achtergrondinformatie.</dd> -</dl> - -<p>Merk ook op dat het is toegelaten om verscheidene beschrijvingen aan één enkele term te koppelen. Bijvoorbeeld:</p> - -<dl> - <dt>terzijde</dt> - <dd>Vind je in een drama. Een karakter deelt een commentaar met het publiek en bereikt zo een humoristisch of dramatisch effect. Dit is meestal een gevoel, gedachte of extra achtergrondinformatie.</dd> - <dd>Vind je ook in een geschreven tekst of als onderdeel van een inhoud die verwant is met het onderwerp maar dat niet echt in de algemene inhoud past zodat die apart wordt gepresenteerd (vaak in een kader aan de zijkant).</dd> -</dl> - -<h3 id="Actief_leren_Maak_een_reeks_definities_op">Actief leren: Maak een reeks definities op</h3> - -<p>Het is tijd om zelf een beschrijvende lijst te maken. In het <em>invoerveld </em>voeg je elementen aan de ruwe tekst toe zodat die in het <em>uitvoerveld </em>als een beschrijvende lijst verschijnt. Als je wil, kan je ook je eigen termen en beschrijvingen gebruiken. </p> - -<p>Als je een fout maakt, kan je die altijd ongedaan maken door op de <em>Maak Ongedaan</em>-knop drukken. Als je echt vast raakt, druk dan op <em>Toon Oplossing</em> om het antwoord te zien.</p> - -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><h2>Invoer</h2> -<textarea id="code" class="input">Bacon -De lijm die de wereld aan elkaar plakt. -Eieren -De lijm die de cake bindt. -Koffie -De drank die de wereld 's morgens in gang krijgt. -Een lichtbruine kleur.</textarea> -<h2>Uitvoer</h2> -<div class="output"></div> -<div class="controls"> - <input id="reset" type="button" value="Ongedaan Maken" /> - <input id="solution" type="button" value="Toon Oplossing" /> -</div> -</pre> - -<pre class="brush: css">body { - font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; -} - -.input, .output { - width: 90%; - height: 10em; - padding: 10px; - border: 1px solid #0095dd; - overflow: auto; -} - -button { - padding: 10px 10px 10px 0; -} -</pre> - -<pre class="brush: js">var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var code = textarea.value; -var output = document.querySelector(".output"); -var solution = document.getElementById("solution"); - -function drawOutput() { - output.innerHTML = textarea.value; -} - -reset.addEventListener("click", function() { - textarea.value = code; - drawOutput(); -}); - -solution.addEventListener("click", function() { -textarea.value = '<dl>\n <dt>Bacon</dt>\n <dd>De lijmt die de wereld aan elkaar plakt.</dd>\n <dt>Eieren</dt>\n <dd>De lijm die de cake bindt.</dd>\n <dt>Koffie</dt>\n <dd>De drank die de wereld \'s morgens in gang krijgt.</dd>\n <dd>Een lichtbruine kleur.</dd>\n</dl>'; - drawOutput(); -}); - -textarea.addEventListener("input", drawOutput); -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p> - -<h2 id="Citaten">Citaten</h2> - -<p>HTML beschikt ook over eigenschappen waameer je citaten kan opmaken. Je kan kiezen tussen elementen waarmee je de inhoud als een blokcitaat of als een inline citaat kan opmaken.</p> - -<h3 id="Blokcitaten">Blokcitaten</h3> - -<p>Als de inhoud op blokniveau wordt geciteerd, moet je dat aanduiden door die in een {{htmlelement("blockquote")}}-element in te bedden. (Dit kan een paragraaf zijn, meerdere paragrafen, een lijst enz.). Verder moet je er in een {{htmlattrxref("cite","blockquote")}}-attribuut een URL aan toevoegen die naar de bron van het citaat verwijst. De volgende opmaak bijvoorbeeld is uit de MDN <code>pagina over het <blockquote></code>-element gehaald.</p> - -<pre class="brush: html"><p>Het <strong>HTML <code>&lt;blockquote&gt;</code> element</strong> (of <em>HTML Blok -Citaat Element</em>) maakt duidelijk dat het ingesloten element een langer citaat is.</p></pre> - -<p>Om dit in een blokcitaat te veranderen, doen we dit :</p> - -<pre class="brush: html"><blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> - <p>Het <strong>HTML <code>&lt;blokquote&gt;</code> element</strong> (of <em>HTML Blok - Citaat Element</em>) duidt aan dat het ingesloten element een langer citaat is.</p> -</blockquote></pre> - -<p>De standaardstijl van een browser zal dit als een ingesprongen paragraaf weergeven die aanduidt dat dit een citaat is. MDN doet dit ook en voegt er nog wat extra stijl aan toe:</p> - -<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> -<p><strong>Het HTML <code><blockquote></code> element</strong> (of <em>HTML Blokcitaat element</em>) duidt aan dat de ingesloten tekst een langer citaat is.</p> -</blockquote> - -<h3 id="Inline_citaten">Inline citaten</h3> - -<p>Inline citaten werken op exact dezelfde manier met één uitzondering: ze gebruiken het {{htmlelement("q")}}-element. Als voorbeeld zie je de opgemaakte tekst hieronder: hij bevat een citaat uit de MDN <code><q></code> pagina:</p> - -<pre class="brush: html"><p>Het citaat element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">bedoeld voor korte citaten die geen volledige paragraaf beslaan. </q></p></pre> - -<p>De standaardstijl van een browser zal dit als normale tekst weergeven die tussen aanhalingstekens staat en zo aanduidt dat het hier om een citaat gaat. Zoals dit:</p> - -<p>Het citaat element — <code><q></code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">bedoeld voor korte citaten die geen volledige paragraaf beslaan.</q></p> - -<h3 id="Het_cite-attribuut_en_het_cite-element">Het cite-attribuut en het cite-element</h3> - -<p>De inhoud van het {{htmlattrxref("cite","blockquote")}}-attribuut klinkt nuttig, maar spijtig genoeg doen browsers, schermlezers enz. er niet echt veel mee. Je kan de inhoud van <code>cite</code>, niet zichtbaar maken in de browser zonder dat je daarvoor je eigen oplossing in JavaScript of CSS moet schrijven. Als je de bron van je citaat beschikbaar wil maken op de pagina, kan je het {{htmlelement("cite")}}-element beter naast het citaat-element plaatsen. Dit element moet eigenlijk de bron van het citaat bevatten, i.e. de naam van het boek of van de persoon die het citaat heeft gezegd, maar er is geen reden waarom je de tekst in het <code><cite>-</code>element niet op de één of andere manier aan de bron van het citaat zou kunnen linken:</p> - -<pre class="brush: html"><p>Volgens de <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> -<cite>MDN-pagina over het blokcitaat</cite></a>: -</p> - -<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> - <p>Het <strong>HTML <code>&lt;blockquote&gt;</code>-element</strong> (of <em>HTML Blokcitaat-element</em>) - duidt aan dat de ingesloten tekst een langer citaat is.</p> -</blockquote> - -<p>Het citaatelement — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">bedoeld -voor korte citaten die niet uit meerdere paragrafen bestaan.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"> -<cite>MDN-pagina over het q-elementa</cite></a>.</p></pre> - -<p>De bron van een citaat wordt standaar cursief gedrukt. Je kan deze code aan het werk zien in ons <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html">quotations.html</a> voorbeeld.</p> - -<h3 id="Actief_leren_Wie_zei_dat">Actief leren: Wie zei dat?</h3> - -<p>Tijd voor nog een voorbeeld met actief leren! In dit voorbeeld willen we het volgende:</p> - -<ol> - <li>Verander de middelste paragraaf in een blokcitaat en voeg een <code>cite</code>-attribuut toe.</li> - <li>Verander een deel van de derde paragraaf in een inline citaat en zorg ervoor dat het element ook een <code>cite</code>-attribuut bevat.</li> - <li>Voeg een <code><cite></code>-element toe aan elk citaat.</li> -</ol> - -<p>Zoek online naar geschikte bronnen.</p> - -<p>Als je een fout maakt, kan je altijd op <em>Maak Ongedaan</em> drukken. Als je echt vast raakt, kan je op de <em>Toon Oplossing</em>-knop drukken om het antwoord te zien.</p> - -<div class="hidden"> -<h6 id="Playable_code_2">Playable code</h6> - -<pre class="brush: html"><h2>Invoer</h2> -<textarea id="code" class="input"><p>Hallo en welkom op mijn motivatiepagina. Zoals Confucius ooit zei:</p> - -<p>Het doet er niet toe hoe langzaam je gaat zolang je maar niet stopt.</p> - -<p>Ik houd ook van het concept van positief denken en de nood om negatieve gesprekken met jezelf te elimineren. -(zoals vermeld in Affirmations for Positive Thinking.)</p></textarea> -<h2>Uitvoer</h2> -<div class="output"></div> -<div class="controls"> - <input id="reset" type="button" value="Maak Ongedaan" /> - <input id="solution" type="button" value="Toon Oplossing" /> -</div> -</pre> - -<pre class="brush: css">body { - font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; -} - -.input, .output { - width: 90%; - height: 10em; - padding: 10px; - border: 1px solid #0095dd; - overflow: auto; -} - -button { - padding: 10px 10px 10px 0; -} -</pre> - -<pre class="brush: js">var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var code = textarea.value; -var output = document.querySelector(".output"); -var solution = document.getElementById("solution"); - -function drawOutput() { - output.innerHTML = textarea.value; -} - -reset.addEventListener("click", function() { - textarea.value = code; - drawOutput(); -}); - -solution.addEventListener("click", function() { -textarea.value = '<p>Hallo en welkom op mijn motivatiepagina. Zoals <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius</cite></a> ooit zei:</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n <p>Het doet er niet toe hoe langzaam je gaat zolang je maar niet stopt.</p>\n</blockquote>\n\n<p>Ik houd ook van het concept van positief denken en <q cite="http://www.affirmationsforpositivethinking.com/index.htm">de nood om negatieve gesprekken met jezelf te elimineren</q> (zoals vermeld in <a href="http://www.affirmationsforpositivethinking.com/index.htm"><cite>Affirmations for Positive Thinking.</cite></a>.)</p>'; - drawOutput(); -}); - -textarea.addEventListener("input", drawOutput); -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code_2', 700, 500) }}</p> - -<h2 id="Afkortingen">Afkortingen</h2> - -<p>Het {{htmlelement("abbr")}}-element is een ander vrij courant element dat je zal tegenkomen als je op het web surft. Het omhult een afkorting of acroniem en verschaft ook de volledige term (die in het {{htmlattrxref("title")}}-attribuut steekt.) We gaan eerst een paar voorbeelden bekijken:</p> - -<pre><p>We gebruiken <abbr title="Hypertext Markup Language">HTML</abbr> om onze webdocumenten te structureren.</p> - -<p>Ik denk dat <abbr title="Monseigneur">Mgr.</abbr> Green het in de keuken deed met de kettingzaag.</p></pre> - -<p>Deze zullen er ongeveer zo uitzien (de volledige tekst zal als een tooltip verschijnen als je er met je muis overeen glijdt):</p> - -<p>We gebruiken <abbr title="Hypertext Markup Language">HTML</abbr> om onze webdocumenten te structureren.</p> - -<p>Ik denk dat <abbr title="Reverend">Mgr.</abbr> Green het in de keuken deed met de kettingzaag.</p> - -<div class="note"> -<p><strong>Opmerking</strong>: Er is nog een ander element, {{htmlelement("acronym")}}, dat in feite hetzelfde doet als <code><abbr>. Dit element was</code> specifiek voor acroniemen bedoeld en niet zozeer voor afkortingen. Het wordt echter niet meer gebruikt — browsers ondersteunden het niet zo goed als <code><abbr></code> en de functies zijn zo gelijkaardig dat men het gevoel had dat het zinloos was om beide elementen te hebben. Gebruik dus gewoon altijd <code><abbr></code>.</p> -</div> - -<h3 id="Actief_leren_maak_een_afkorting_op">Actief leren: maak een afkorting op</h3> - -<p>Voor deze eenvoudige opdracht, willen we dat je gewoon een afkorting opmaakt. Je kan het voorbeeld hier beneden gebruiken of het vervangen door eentje dat je zelf kiest.</p> - -<div class="hidden"> -<h6 id="Playable_code_3">Playable code</h6> - -<pre class="brush: html"><h2>Invoer</h2> -<textarea id="code" class="input"><p>NASA doet echt wel opwinded werk.</p></textarea> -<h2>Uitvoer</h2> -<div class="output"></div> -<div class="controls"> - <input id="reset" type="button" value="Ongedaan Maken" /> - <input id="solution" type="button" value="Toon Oplossing" /> -</div> -</pre> - -<pre class="brush: css">body { - font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; -} - -.input, .output { - width: 90%; - height: 5em; - padding: 10px; - border: 1px solid #0095dd; - overflow: auto; -} - -button { - padding: 10px 10px 10px 0; -} -</pre> - -<pre class="brush: js">var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var code = textarea.value; -var output = document.querySelector(".output"); -var solution = document.getElementById("solution"); - -function drawOutput() { - output.innerHTML = textarea.value; -} - -reset.addEventListener("click", function() { - textarea.value = code; - drawOutput(); -}); - -solution.addEventListener("click", function() { -textarea.value = '<p><abbr title="National Aeronautics and Space Administration">NASA</abbr> doet echt wel opwinded werk</p>'; - drawOutput(); -}); - -textarea.addEventListener("input", drawOutput); -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code_3', 700, 350) }}</p> - -<h2 id="Contactinformatie_opmaken">Contactinformatie opmaken</h2> - -<p>HTML heeft een element om contactinformatie mee op te maken — {{htmlelement("address")}}. Het element omhult gewoon je contactinformatie, bijvoorbeeld:</p> - -<pre class="brush: html"><address> - <p>Chris Mills, Manchester, Het Grimmige Noorden, UK</p> -</address></pre> - -<p>Er is wel een ding dat je moet onthouden: het <address>-element is bedoeld om de contactinformatie op te maken van de persoon die het HTML-document heeft geschreven en niet van <em>eender welk</em> adres. Het voorbeeld hierboven is dus enkel oké als Chris het document heeft geschreven waarin de opmaak verschijnt. Iets zoals het volgende is ook oké:</p> - -<pre class="brush: html"><address> - <p>Deze pagina is geschreven door <a href="../authors/chris-mills/">Chris Mills</a>.</p> -</address></pre> - -<h2 id="Superscript_en_subscript">Superscript en subscript</h2> - -<p>Nu en dan zal je superscript en subscript nodig hebben bij de opmaak van inhoud zoals een datum, een chemische formule en wiskundige vergelijkingen. Het {{htmlelement("sup")}} en het {{htmlelement("sub")}}-element zorgen ervoor dat die inhoud de juiste betekenis krijgt. Zoals in dit voorbeeld:</p> - -<pre class="brush: html"><p>Mijn verjaardag valt op de 25<sup>ste</sup> mei 2001.</p> -<p>De chemische formule van caffeïne is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p> -<p>Als x<sup>2</sup> gelijk is aan 9, dan is x gelijk 3 aan of -3.</p></pre> - -<p>De output van deze code ziet er zo uit:</p> - -<p>Mijn verjaardag valt op de 25<sup>ste</sup> mei 2001.</p> - -<p>De chemische formule van caffeïne is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p> - -<p>Als x<sup>2</sup> gelijk is aan 9, dan is x gelijk aan 3 of -3.</p> - -<h2 id="De_weergave_van_computercode">De weergave van computercode</h2> - -<p>Er bestaan een aantal elementen waarmee je computercode kan opmaken in HTML:</p> - -<ul> - <li>{{htmlelement("code")}}: Voor de opmaak van algemene computercode.</li> - <li>{{htmlelement("pre")}}: Voor de opmaak van tekstblokken met een vaste breedte waarin de witte ruimte bewaard blijft (in het algemeen zijn dat blokken met code. Je hoeft geen speciale karakters te gebruiken voor regeleindes of witte ruimte. Alles binnen de pre-tags wordt weergegeven zoals jij het hebt getypt.)</li> - <li>{{htmlelement("var")}}: Voor de opmaak van de namen van variabelen.</li> - <li>{{htmlelement("kbd")}}: Voor de opmaak van allerlei vormen van invoer die (onder andere via een toetsenbord) is ingegeven in de computer.</li> - <li>{{htmlelement("samp")}}: Voor de opmaak van de uitvoer van een computerprogramma.</li> -</ul> - -<p>We gaan een paar voorbeelden bekijken. Probeer er wat mee te spelen (je kan een kopie van ons <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a> voorbeeldbestand nemen):</p> - -<pre class="brush: html"><pre><code>var para = document.querySelector('p'); - -para.onclick = function() { - alert('Owww, stop met in mijn ribben te porren!'); -}</code></pre> - -<p>Je zou geen weergave-elementen mogen gebruiken zoals <code>&lt;font&gt;</code> en <code>&lt;center&gt;</code>.</p> - -<p>In het JavaScript voorbeeld hierboven vertegenwoordigt <var>para</var> een paragraaf-element.</p> - -<p>Selecteer alle tekst met <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p> - -<pre>$ <kbd>ping mozilla.org</kbd> -<samp>PING mozilla.org (63.245.215.20): 56 data bytes -64 bytes van 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre></pre> - -<p>De code hierboven zal er zo uitzien:</p> - -<p>{{ EmbedLiveSample('Representing_computer_code','100%',300) }}</p> - -<h2 id="De_opmaak_van_uren_en_data">De opmaak van uren en data</h2> - -<p>HTML heeft ook het {{htmlelement("time")}}-element om uren en data in een formaat om te zetten dat door een machine kan gelezen worden. Bijvoorbeeld:</p> - -<pre class="brush: html"><<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>>20 januari 2016</<span class="pl-ent">time</span>></pre> - -<p>Waarom is dit nuttig? Wel, er zijn vele manieren waarop mensen data noteren. De datum hierboven zou kunnen worden geschreven als:</p> - -<ul> - <li>20 januari 2016</li> - <li>20th January 2016</li> - <li>jan 20 2016</li> - <li>20/06/16</li> - <li>06/20/16</li> - <li>De 20ste van de volgende maand</li> - <li><span lang="fr">20e Janvier 2016</span></li> - <li><span lang="ja">2016年1月20日</span></li> - <li>Enzovoort</li> -</ul> - -<p>Maar deze verschillende vormen kunnen niet gemakkelijk worden herkend door de computers. Wat als je automatisch de data van alle gebeurtenissen in een pagina zou willen grijpen en die in een kalender steken ? Met het {{htmlelement("time")}}-element kan je een ondubbelzinnige tijd en uur vastmaken aan je datum zodat die door een machine kan gelezen worden .</p> - -<p>Het basisvoorbeeld hierboven toont ons een simpele datum, maar er zijn nog vele andere opties mogelijk. Bijvoorbeeld:</p> - -<pre class="brush: html"><!-- Eenvoudige standaarddatum --> -<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>>20 January 2016</<span class="pl-ent">time</span>> -<!-- Enkel jaar en maand --> -<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01<span class="pl-pds">"</span></span>>January 2016</<span class="pl-ent">time</span>> -<!-- Enkel maand en dag --> -<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>01-20<span class="pl-pds">"</span></span>>20 January</<span class="pl-ent">time</span>> -<!-- Enkel tijd, uren en minuten --> -<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>19:30<span class="pl-pds">"</span></span>>19:30</<span class="pl-ent">time</span>> -<!-- Je kan ook seconden en milliseconden weergeven! --> -<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span></span>19:30:01.856<span class="pl-s"><span class="pl-pds">"</span></span>>19:30:01.856</<span class="pl-ent">time</span>> -<!-- Datum en tijd --> -<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">"</span></span>>7.30pm, 20 January 2016</<span class="pl-ent">time</span>> -<!-- Datum en tijd met tijdzone --> -<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">+01:00"</span></span>>7.30pm, 20 January 2016 is 8.30pm in France</<span class="pl-ent">time</span>> -<!-- Vermelding van een specifiek weeknummer--> -<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-W04<span class="pl-pds">"</span></span>>The fourth week of 2016</<span class="pl-ent">time</span>></pre> - -<h2 id="Samenvatting">Samenvatting</h2> - -<p>En zo komen we aan het einde van onze studie over HTML tekst en semantiek. Wees je er wel van bewust dat wat je in deze cursus hebt gezien lang niet alles is. Er zijn nog veel meer HTML tekstelementen. We hebben geprobeerd om de belangrijkste elementen te bespreken en een aantal van de courante element die je in het wild zal tegenkomen of ten minste interessant zal vinden. Om meer HTML-elementen te vinden, kan je een kijkje nemen op onze <a href="/en-US/docs/Web/HTML/Element">HTML element reference</a> pagina. (de <a href="/en-US/docs/Web/HTML/Element#Inline_text_semantics">Inline text semantics</a> sectie zou een zeer goede plaats kunnen zijn om te beginnen.) In het volgende artikel zullen we de HTML-elementen bekijken die je gebruikt om de verschillende onderdelen van een HTML-document te structureren.</p> - -<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</p> 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> diff --git a/files/nl/learn/html/introduction_to_html/debugging_html/index.html b/files/nl/learn/html/introduction_to_html/debugging_html/index.html deleted file mode 100644 index 3e961f9e5d..0000000000 --- a/files/nl/learn/html/introduction_to_html/debugging_html/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: HTML debuggen -slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML -translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML -original_slug: Learn/HTML/Introduction_to_HTML/HTML_Debuggen ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> - -<p class="summary">HTML schrijven is oké maar wat als er iets fout gaat en je kan er maar niet achter komen waar de fout in je code zit? In dit artikel zullen we je kennis laten maken met een aantal instrumenten die je kunnen helpen om de fouten in je HTML op te sporen en te herstellen.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Vereisten:</th> - <td>Basiskennis HTML zoals die is aangeboden in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Beginnen met HTML, HTML tekst: basisprincipes</a> en <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Hyperlinks maken</a>.</td> - </tr> - <tr> - <th scope="row">Objective:</th> - <td>Je verwerft basiskennis over het gebruik van debugging-instrumenten waarmee je de bron van problemen in HTML kan vinden.</td> - </tr> - </tbody> -</table> - -<h2 id="Van_debuggen_hoef_je_niet_bang_te_zijn">Van debuggen hoef je niet bang te zijn</h2> - -<p>Als je de één of andere code zit te schrijven, is alles meestal dik in orde, tot het gevreesde moment waarop een fout zich voordoet. Je hebt dus iets verkeerd gedaan zodat je code niet werkt — of hij doet het helemaal niet of toch niet helemaal zoals jij dat wil. Hieronder vind je bijvoorbeeld een foutmelding die verschijnt wanneer men een simpel programma probeert te {{glossary("compileren")}} in de <a href="https://www.rust-lang.org/">Rust</a>-taal.</p> - -<p><img alt="A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string." src="https://mdn.mozillademos.org/files/12435/error-message.png" style="display: block; height: 520px; margin: 0px auto; width: 711px;">Hier is de foutmelding vrij gemakkelijk te begrijpen — "unterminated double quote string" (niet afgesloten dubbele aanhalingstekens string). Als je de lijst bekijkt, zie je waarschijnlijk hoe <code>println!(Hello, world!")</code> een dubbel aanhalingsteken mist. Foutmeldingen kunnen echter snel een stuk ingewikkelder worden en minder gemakkelijk om te interpreteren omdat programma's groter worden en zelfs simpele gevallen kunnen nogal intimiderend overkomen bij iemand die niets over Rust weet. </p> - -<p>Toch hoeft debuggen niet angstaanjagend te zijn. De sleutel tot een comfortabel gevoel bij het schrijven van code, is je vertrouwdheid met de taal en de instrumenten die hij aanbiedt.</p> - -<h2 id="HTML_en_debuggen">HTML en debuggen</h2> - -<p>HTML is niet zo complex en makkelijker te begrijpen als Rust. HTML wordt niet eerst in een andere vorm gecompileerd voor de browser die ontleedt en het result toont. HTML wordt <em>geïnterpreteerd</em>, niet <em>gecompileerd</em> en HTML's {{glossary("element")}} syntaxis is een stuk makkelijker te begrijpen dan een "echte programmeertaal" zoals Rust, {{glossary("JavaScript")}} of {{glossary("Python")}}. De manier waarop browsers HTML ontleden (i.e. parsen in het Engels) is veel <strong>toleranter </strong>dan de wijze waarop programmeertalen worden uitgevoerd, wat zowel goed als slecht is.</p> - -<h3 id="Tolerante_code">Tolerante code</h3> - -<p>Dus wat bedoelen we met tolerant? Wel, als je iets fout doet in je code, zal je een aantal fouten tegenkomen. De twee voornaamste zijn :</p> - -<ul> - <li><strong>Syntactische fouten</strong>: Deze zijn spelfouten in je code die ervoor zorgen dat je programma niet wordt uitgevoerd, zoals de Rust fout die we hierboven hebben getoond. Deze kan je meestal makkelijk herstellen als je vertrouwd bent met de syntaxis van de taal en als je weet wat de foutmeldingen betekenen.</li> - <li><strong>Logische fouten</strong>: Dit zijn fouten waarbij de syntaxis correct is maar de code is niet wat je eigenlijk wil, wat inhoudt dat het programma niet correct wordt uitgevoerd. Deze zijn vaak veel moeilijker te repareren dan syntactische fouten omdat er geen foutmelding is die je naar de bron van de fout leidt.</li> -</ul> - -<p>HTML zelf lijdt niet onder syntactische fouten omdat browsers HTML op een tolerante manier ontleden (d.w.z. parsen). Dit houdt in dat de pagina zal worden weergegeven zelfs als er syntactische fouten in zitten. Browsers hebben ingebouwde regels die zeggen hoe ze incorrect geschreven opmaak moeten interpreteren zodat je pagina toch wordt uitgevoerd al ziet die er misschien niet uit zoals je verwacht. Dit kan naturlijk nog altijd een groot probleem zijn!</p> - -<div class="note"> -<p><strong>Opmerking</strong>: HTML wordt tolerant geparst. Toen het web namelijk werd gecreëerd, werd er beslist dat het belangrijker was dat mensen hun inhoud konden publiceren dan er zeker van te zijn dat de syntaxis volledig correct was. Het web zou waarschijnlijk niet zo populair zijn, als het vanaf het begin stricter was geweest.</p> -</div> - -<h3 id="Actief_leren_De_studie_van_tolerante_code">Actief leren: De studie van tolerante code</h3> - -<p>Het is tijd om de tolerante aard van HTML-code te bestuderen</p> - -<ol> - <li>Eerst download je ons <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">debug-example demo</a> en sla je die locaal op. Deze demo is opzettelijk met fouten erin geschreven die we kunnen onderzoeken (we zeggen dat de HTML-opmaak <strong>slecht is gevormd</strong> in tegenstelling tot <strong>goed gevormd</strong>).</li> - <li>Vervolgens open je de demo in een browser. Die zal er ongeveer zo uitzien:<img alt="A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes. " src="https://mdn.mozillademos.org/files/12437/badly-formed-html.png" style="display: block; margin: 0 auto;"></li> - <li>Dat ziet er niet echt geweldig uit. We gaan daarom de broncode bekijken en zien of we erachter kunnen komen waarom dat zo is (enkel de inhoud van de body wordt getoond): - <pre class="brush: html"><h1>HTML debugging voorbeelden</h1> - -<p>Wat veroorzaakt er fouten in HTML? - -<ul> - <li>Elementen die niet zijn afgesloten : als een element <strong>niet correct word afgesloten, - dan kan zijn effect zich uitbreiden naar gebieden die daarvoor niet zijn bedoeld - - <li>Slecht geneste elementen: Het is ook belangrijk om je elementen correct te nesten - zodat je code zich correct gedraagt. <strong>strong <em>sterk benadrukt?</strong> - wat is dat?</em> - - <li>Attributen die niet zijn gesloten : Nog een vaak voorkomende bron van problemen met HTML. Laat ons - daarvoor een voorbeeld bekijken: <a href="https://www.mozilla.org/>link naar de homepage van - Mozilla</a> -</ul></pre> - </li> - <li>We gaan deze problemen nu één voor één bekijken: - <ul> - <li>De {{htmlelement("p","paragraaf")}} en {{htmlelement("li","lijstonderdeel")}}-elementen hebben geen eindtags. Als je naar de afbeelding hierboven kijken, zie je dat dit de weergegeven opmaak niet zo erg beïnvloedt want het is makkelijk om te zien waar een element zou moeten stoppen en een ander beginnen.</li> - <li>Het eerste {{htmlelement("strong")}} element heeft geen eindtag. Dit is iets problematischer want het is niet zo gemakkelijk om te weten waar het element zou moeten eindigen. In feite is de rest van de tekst sterk benadrukt. </li> - <li>Een van de secties is slecht genest: <code><strong>strong <em>sterk benadrukt emphasised?</strong> wat is dat?</em></code>. Het is niet gemakkelijk om te zeggen hoe dit is geïnterpreteerd door het vorige probleem.</li> - <li>De {{htmlattrxref("href","a")}}-attribuutwaarde mist een dubbel aanhalingsteken. Dat heeft blijkbaar het grootste probleem veroorzaakt — de link is gewoon niet weergegeven.</li> - </ul> - </li> - <li>We kunnen nu ook de opmaak bekijken die de browser heeft gegenereerd in plaats van de opmaak in de broncode. Om dat te doen, kunnen we de hulpprogramma's voor ontwikkelaars bekijken (de browser developer tools in het Engels). Als je niet vertrouwd bent met het gebruik van deze programma's kan je er meer over leren. Neem een paar minuten de tijd en bekijk <a href="/en-US/docs/Learn/Discover_browser_developer_tools">Discover browser developer tools</a>.</li> - <li>Met de DOM Inspecteur kan je zien hoe de weergegeven opmaak eruit ziet: <img alt="The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser." src="https://mdn.mozillademos.org/files/12439/html-inspector.png" style="display: block; margin: 0 auto;"></li> - <li>Met de DOM inspecteur kunnen we onze code in detail onderzoeken en zien hoe de browser heeft geprobeerd om onze HTML-fouten te herstellen. We hebben dat in Firefox gedaan; andere moderne browsers <em>zouden</em> hetzelfde resultaat moeten produceren: - <ul> - <li>De paragrafen en de lijstonderdelen hebben eindtags gekregen.</li> - <li>Het is niet duidelijk waar het eerste <code><strong></code>-element zou moeten worden gesloten, dus heeft de browser elke apart tekstblok in zijn eigen strong-tag ingesloten, helemaal tot aan de onderkant van het document!</li> - <li>De incorrect geneste element zijn door de browser op deze manier hersteld: - <pre class="brush: html"><strong>sterk - <em>sterk benadrukt</em> -</strong> -<em> wat is dat?</em></pre> - </li> - <li>De link met het ontbrekende dubbele aanhalingsteken is helemaal verwijderd. Het laatste lijstonderdeel ziet er zo uit: - <pre class="brush: html"><li> - <strong>Attributen die niet zijn afgesloten: Een andere vaak voorkomende bron van HTML-problemen. - Laat ons daarvoor een voorbeeld bekijken: </strong> -</li></pre> - </li> - </ul> - </li> -</ol> - -<h3 id="HTML_validatie">HTML validatie</h3> - -<p>Door het voorbeeld hierboven begrijp je dat je er echt zeker van wil zijn dat je HTML goed gevormd is. Maar hoe doe je dat? In een klein voorbeeld zoals dat hierboven, is het gemakkelijk om de fouten te vinden, maar wat moet met je een enorm en complex HTML document? </p> - -<p>De beste strategie is om je HTML-pagina eerst door de <a href="https://validator.w3.org/">Markup Validation Service</a> (Opmaak Validatie Dienst) te laten beoordelen. Deze dienst is gecreëerd door de W3C en word er ook door onderhouden. De organisatie zorgt voor de specificaties die HTML, CSS en andere webtechnologieën definiëren. De webpagina aanvaardt je HTML als invoer, verwerkt die en geeft je dan een verslag waarin staat wat er mis is met je HTML.</p> - -<p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p> - -<p>Om de HTML in te voeren de je wil laten valideren, kan je een webadres opgeven, een HTML-bestand uploaden of de HTML-code direct invoeren.</p> - -<h3 id="Actief_leren_Een_HTML-document_valideren">Actief leren: Een HTML-document valideren</h3> - -<p>We gaan dit met ons <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">sample document</a> uitproberen.</p> - -<ol> - <li>Eerst laad je de <a href="https://validator.w3.org/">Markup Validation Service</a> in een tabblad van een browser, als je dat nog niet hebt gedaan.</li> - <li>Klik op <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a>.</li> - <li>Kopiëer de volledige code van het sample document (dus niet enkel de body) en plak die in het tekstinvoerveld.</li> - <li>Klik op de <em>Check</em> knop.</li> -</ol> - -<p>Nu zou je een lijst met fouten en andere informatie moeten zien.</p> - -<p><img alt="A list of of HTML validation results from the W3C markup validation service" src="https://mdn.mozillademos.org/files/12443/validation-results.png" style="display: block; margin: 0 auto;"></p> - -<h4 id="De_interpretatie_van_de_foutmelding">De interpretatie van de foutmelding</h4> - -<p>Al zijn de foutmeldingen meestal een hulp, soms zijn ze dat toch niet helemaal maar met een beetje oefening kan je erachter komen hoe je ze moet interpreteren om je code te repareren. We gaan ze nu één voor één bekijken en hun betekenis ontcijferen. Je zal merken dat elke boodschap een regel en kolomnummer krijgt zodat je kan zien waar de fout zich bevindt.</p> - -<ul> - <li>"End tag <code>li</code> implied, but there were open elements" (2 instances): (eindtag li geïmpliceerd maar er waren open elementen (twee gevallen)). Deze boodschappen duiden aan dat een element nog open is en gesloten moet worden. De eintag is geïmpliceerd maar staat er niet echt. De regel/kolom informatie wijst naar de eerste regel na de regel waar de eindtag eigenlijk zou moeten zijn, maar deze aanwijzing is goed genoeg om te zien wat er fout is.</li> - <li>"Unclosed element <code>strong</code>" (niet gesloten element strong) : Dit is echt makkelijk te begrijpen — een {{htmlelement("strong")}}-element is niet afgesloten en de lijn/kolom informatie wijst recht naar de plaats van het element.</li> - <li>"End tag <code>strong</code> violates nesting rules" (eind tag strong schendt regels voor geneste elementen): Dit verwijst naar de incorrect geneste elementen en de regel/kolom informatie wijst naar waar die zitten.</li> - <li>"End of file reached when inside an attribute value. Ignoring tag" (einde van het bestand is bereikt binnen een attribuutwaarde): Deze is vrij cryptisch; hij verwijst naar het feit dat er ergens een attribuutwaarde zit die niet correct werd gevormd, misschien dicht bij het einde van het bestand want het einde van het bestand verschijnt binnen de attribuutwaarde. Het feit dat de browser de link niet weergeeft, is een goede aanwijzing die ons vertelt welk element de fout bevat.</li> - <li>"End of file seen and there were open elements" (einde van het bestand gezien en er waren open elementen) : Dit is een beetje dubbelzinnig, maar in feite verwijst de foutmelding naar het feit dat er open elementen zijn die moeten worden gesloten. De regelnummers wijzen naar de laaste regels van het bestand en deze foutmelding verschijnt samen met een regel code die een voorbeeld van een open element aanduidt: - <pre>example: <a href="https://www.mozilla.org/>link naar de startpagina van Mozilla homepage</a> ↩ </ul>↩ </body>↩</html></pre> - - <div class="note"> - <p><strong>Opmerking</strong>: Een attribuut dat het aanhalingsteken mist dat de attribuutwaarde afsluit, kan resulteren in een open element omdat de rest van het document wordt geïnterpreteerd als de inhoud van het attribuut.</p> - </div> - </li> - <li>"Unclosed element <code>ul</code>" (niet afgesloten element ul): Dit is niet erg behulpzaam omdat het {{htmlelement("ul")}}-element wel degelijk correct is afgesloten. Dese fout verschijnt omdat het {{htmlelement("a")}}-element niet is afgesloten en dat komt door het ontbrekende aanhalingsteken op het einde van de attribuutwaarde.</li> -</ul> - -<p><span>Als je niet de betekenis van elke foutmelding kan uitdokteren, hoef je je daarover niet te veel zorgen te maken — het is een goed idee om niet alle fouten tegelijk te herstellen. Bewerk er een paar en probeer dan opnieuw je HTML te valideren en kijk welke fouten er nog over schieten. Soms is het genoeg om één fout weg te werken. De rest van de fouten verdwijnt dan vanzelf omdat meerdere fouten door één enkel probleem veroorzaakt kunnen worden. Het probleem creëert dan een domino-effect.</span></p> - -<p><span>Als alle fouten hersteld zijn, zal je de volgende tekst met groene achtergrond in je uitvoer zien. Dit is de vertaling: het document is gevalideerd volgens de gespecifiëerde schema's en volgens bijkomende beperkingen die door de validator zijn gecontroleerd. </span></p> - -<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></p> - -<h2 id="Samenvating">Samenvating</h2> - -<p>En dat is het dus, een inleiding op het debuggen van HTML. Je zou nu een paar nuttige vaardigheden onder de knie moeten hebben. Je zal er later in je carrière op kunnen rekenen wanneer je CSS, Javascript en andere soorten code gaat debuggen. Dit betekent ook het einde van onze introductie op HTML — Je kan nu verder gaan door jezelf te testen met onze evaluaties: de link naar de eerste vind je hieronder.</p> - -<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/nl/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/nl/learn/html/introduction_to_html/document_and_website_structure/index.html deleted file mode 100644 index b4c704e92c..0000000000 --- a/files/nl/learn/html/introduction_to_html/document_and_website_structure/index.html +++ /dev/null @@ -1,266 +0,0 @@ ---- -title: De structuur van je document en je website -slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure -translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> - -<p class="summary">Behalve de definitie van individuele delen van je pagina (zoals "een paragraaf" of "een afbeelding"), biedt {{glossary("HTML")}} ook een aantal elementen op blokniveau aan waarmee je gebieden van je website kan definiëren (zoals "de hoofding", "het navigatiemenu" en "de kolom met de belangrijkste inhoud"). Met dit artikel kan je leren hoe je de structuur van een eenvoudige website kunt plannen en hoe je de HTML kan schrijven om deze structuur op te zetten.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Vereisten:</th> - <td>Basiskennis HTML, aangeboden in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Beginnen met HTML</a>. Kennis over HTML tekstopmaak aangeboden in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML tekst : basispricipes</a>. Hoe hyperlinks werken zoals besproken in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Hyperlinks maken</a>.</td> - </tr> - <tr> - <th scope="row">Doel:</th> - <td>Je leert hoe je je document met semantische tags kan structureren en hoe je de structuur van een eenvoudige website kan maken.</td> - </tr> - </tbody> -</table> - -<h2 id="Standaardsecties_van_een_document">Standaardsecties van een document</h2> - -<p>Webpagina's kunnen en zullen heel wat van elkaar verschillen, maar de meeste zullen een aantal gelijkaardige standaardcomponenten weergeven, behalve als de pagina een video of spel weergeeft die het volledige scherm beslaat, als de pagina onderdeel is van één of ander artistiek project of als die gewoon slecht is gestructureerd.</p> - -<dl> - <dt>hoofding (header)</dt> - <dd>Meestal is dit een grote brede band aan de bovenkant van de pagina met een grote koptekst en/of een logo. Dit is waar je de belangrijkste en bekendste informatie vindt, en meestal wordt die constant over alle webpagina's van je website weergegeven.</dd> - <dt>navigatiebalk (navigation bar)</dt> - <dd>De navigatiebalk bevat links naar de belangrijkste secties van de site. Meestal worden die weergegeven door menuknoppen, links of tabpagina's. Zoals de hoofding blijft de inhoud meestal constant op alle webpagina's. Als de navigatie op je website niet consistent is, zal dit enkel tot verwarde en gefrustreerde gebruikers leiden. Vele webontwikkelaars beschouwen de navigatiebalk als onderdeel van de hoofding in plaats van als een individueel onderdeel, maar dat is geen vereiste. In feite zijn er ook die vinden dat het beter is om de twee gescheiden te houden omdat ze zo veel <a href="/en-US/docs/Learn/Accessibility">toegankelijker</a> zijn voor schermlezers, die de twee onderdelen beter kunnen lezen als ze apart in de website bestaan.</dd> - <dt>belangrijkste inhoud (main content)</dt> - <dd>Dit is een groot gebied in het midden van de pagina die de meeste unieke inhoud van de webpagina bevat. Dit kan bijvoorbeeld een video zijn die je wil bekijken of het belangrijkste verhaal dat je wil lezen, de kaart die je wil bekijken, de nieuwskoppen enz. Dit deel van de website zal zeker variëren van pagina tot pagina!</dd> - <dt>zijbalk (sidebar)</dt> - <dd>In de zijbalk staan links, perifere info, citaten, advertenties enz. Meestal bevinden de belangrijkste en de perifere inhoud zich binnen dezelfde context (Op de pagina van een nieuwsartikel bijvoorbeeld kan de zijbalk een biografie van de auteur bevatten of links naar gerelateerde artikelen). Er zijn ook pagina's waarin de zijbalk wordt gebruikt voor terugkerende elementen zoals een secundair navigatiesysteem.</dd> - <dt>voettekst (footer)</dt> - <dd>Een band die langs de onderkant van de pagina loopt en die in het algemeen de kleine lettertjes bevat, auteursrechtvermeldingen of contactinformatie. Het is een plek waar je algemene informatie kan plaatsen (zoals in de hoofding) maar die dan meestal niet van al te groot belang is of gewoon ondergeschikt aan de info die je in de belangrijkste inhoud terugvindt. De voettekst wordt soms ook voor {{Glossary("SEO")}}-doeleinden gebruikt door links te verschaffen die zorgen voor een snelle toegang tot populaire inhoud.</dd> - <dd>Een "typische website" zou ongeveer zo kunnen worden opgezet:</dd> -</dl> - -<p><img alt="a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer." src="https://mdn.mozillademos.org/files/12417/sample-website.png" style="display: block; margin: 0 auto;"></p> - -<h2 id="HTML_voor_het_structureren_van_de_inhoud">HTML voor het structureren van de inhoud</h2> - -<p>Het eenvoudige voorbeeld dat we hierboven tonen is niet mooi, maar als de illustratie van de lay-out van een typische website is het echt wel oké. Sommige websites hebben meer kolommen, sommige zijn veel complexer maar je begrijpt wat ik bedoel. Met de juiste CSS, kan je ongeveer elk element rond de verschillende secties plaatsen en je webpagina er toch laten uitzien zoals je zelf wil. Maar, zoals we al eerder hebben gezegd, het is belangrijk dat je de semantiek respecteert en dat je<strong> het juiste element voor de juiste job gebruikt.</strong></p> - -<p>Visuele elementen vertellen namelijk niet het volledig verhaal. We gebruiken kleuren en tekstgrootte om de aandacht van de gebruikers op de nuttigste onderdelen van de inhoud te vestigen, zoals het navigatiemenu en gerelateerde links, maar wat bijvoorbeeld met mensen die een visuele beperking hebben en die concepten zoals "roze" en een "groot letterype" niet erg nuttig vinden?</p> - -<div class="note"> -<p><strong>Opmerking</strong>: Kleurenblinde mensen vertegenwoordigen ongeveer <a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">8% van de wereldbevolking</a>. Blinde en visueel beperkte mensen maken ruwweg 4-5% van de wereldbevolking uit. (In 2012 waren er <a href="https://en.wikipedia.org/wiki/Visual_impairment">285 millioen zulke mensen in de wereld</a>, terwijl de volledige bevolking toen <a href="https://en.wikipedia.org/wiki/World_human_population#/media/File:World_population_history.svg">rond 7 miljard</a> besloeg.)</p> -</div> - -<p>In je HTML-code kan je de opmaak van secties baseren op hun <em>functionaliteit.</em> Je kan ondubbelzinnige elementen gebruiken die deze secties vertegenwoordigen. Ondersteunende technologieën zoals schermlezers kunnen die elementen herkennen en de gebruiker helpen met allerlei taken. Dat zou "vind de belangrijkste navigatiebalk" kunnen zijn of "vind de belangrijkste inoud". Zoals we al eerder in de cursus hebben vermeld hangen er een aantal <a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Why_do_we_need_structure">gevolgen aan vast als je niet de juiste elementstructuur en semantiek voor de juise job</a> gebruikt.</p> - -<p>Om zulk een semantische opmaak toe te passen, verschaft HTML ons een aantal tags die speciaal voor dat doel zijn ontworpen en die je kan gebruiken. Bijvoorbeeld:</p> - -<ul> - <li><strong>hoofding: </strong>{{htmlelement("header")}}.</li> - <li><strong>navigatiebalk: </strong>{{htmlelement("nav")}}.</li> - <li><strong>belangrijkste inhoud: </strong>{{htmlelement("main")}}, met verschillende subsecties die worden vertegenwoordigd door {{HTMLElement("article")}}, {{htmlelement("section")}}, en {{htmlelement("div")}} elementen.</li> - <li><strong>zijbalk: </strong>{{htmlelement("aside")}}; wordt vaak binnen het {{htmlelement("main")}}-element geplaatst.</li> - <li><strong>voettekst: </strong>{{htmlelement("footer")}}.</li> -</ul> - -<h3 id="Actief_leren_we_onderzoeken_de_code_voor_ons_voorbeeld">Actief leren: we onderzoeken de code voor ons voorbeeld</h3> - -<p>Het voorbeeld dat je hierboven hebt gezien wordt gegenereerd door de code hieronder. (Je kan <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">het voorbeeld ook in onze Github repo vinden</a>). Bekijk het voorbeeld hierboven en dan de code hieronder en ontdek welke code-onderdelen overeenstemmen met welke secties in het visuele voorbeeld.</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - - <title>Mijn paginatitel</title> - <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css"> - <link rel="stylesheet" href="style.css"> - - <!-- De drie regels hieronder zijn een noodoplossing om ervoor te zorgen dat semantische elementen van HTML5 ook werken in de oude versies van Internet Explorer--> - <!--[if lt IE 9]> - <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> - <![endif]--> - </head> - - <body> - <!-- Hier is onze belangrijkste hoofding die op alle pagina's van onze website wordt gebruikt. --> - - <header> - <h1>Hoofding</h1> - </header> - - <nav> - <ul> - <li><a href="#">Startpagina</a></li> - <li><a href="#">Ons team</a></li> - <li><a href="#">Projecten</a></li> - <li><a href="#">Contact</a></li> - </ul> - - <!-- Een zoekformulier is een andere niet-lineaire manier om in een website te navigeren. --> - - <form> - <input type="search" name="q" placeholder="Zoekopdracht"> - <input type="submit" value="Start!"> - </form> - </nav> - - <!-- Hier vindt je de belangrijkste inhoud van onze pagina. --> - <main> - - <!-- Het bevat een artikel --> - <article> - <h2>Hoofding van het artikel</h2> - - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p> - - <h3>Subsectie</h3> - - <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p> - - <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p> - - <h3>Nog een subsectie</h3> - - <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p> - - <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p> - </article> - - <!-- De inhoud van de zijbalk kan ook in de belangrijkste inhoud worden genest. --> - <aside> - <h2>Gerelateerd</h2> - - <ul> - <li><a href="#">Oh wat ben ik toch graag aan de kust.</a></li> - <li><a href="#">Oh wat ben ik toch graag dicht bij de zee.</a></li> - <li><a href="#">Maar in het Noorden van Engeland</a></li> - <li><a href="#">Houdt het nooit op met regenen</a></li> - <li><a href="#">Ach ja...</a></li> - </ul> - </aside> - - </main> - - <!-- En hier is onze belangrijkste voettekst die op alle pagina's van onze website wordt gebruikt. --> - - <footer> - <p>©Copyright 2050 door helemaal niemand. Alle rechten omgedraaid.</p> - </footer> - - </body> -</html></pre> - -<p>Neem je tijd om de code te bekijken en te begrijpen — de commentaren in de code zouden je moeten helpen. We vragen je niet om iets anders te doen in dit artikel. Als je de lay-out van een document goed wil begrijpen, moet je een gezonde HTML-structuur schrijven en die dan weergeven met CSS. We wachten ermee tot je CSS-layout gaat studeren (dat vind je in het hoofdstuk over CSS).</p> - -<h2 id="HTML_layout-elementen_in_groter_detail">HTML layout-elementen in groter detail</h2> - -<p>Het is goed om de algemene betekenis van alle HTML-sectie-elementen in detail te begrijpen. — Dit zal beetje bij beetje komen terwijl je ervaring opdoet met webontwikkeling. Je kan veel details vinden in onze <a href="/en-US/docs/Web/HTML/Element">HTML element reference</a>. Nu is het belangrijk dat je probeert deze belangrijkste definities te begrijpen:</p> - -<ul> - <li>{{HTMLElement('main')}} is voor inhoud die <em>uniek is op deze pagina.</em> Gebruik <code><main></code> slechts <em>een keer </em>per pagina en plaats die onmiddellijk in {{HTMLElement('body')}}. Je kan dit element best niet nesten in andere elementen.</li> - <li>{{HTMLElement('article')}} omhult een blok van gerelateerde inhoud die op zichzelf zinvol blijft zonder de aanwezigheid van de rest van de pagina.</li> - <li>{{HTMLElement('section')}} lijkt op <code><article></code> maar het wordt gebruikt om één deel van de pagina te groeperen. Dit deel heeft één enkel functioneel doel (bijvoorbeeld een mini-map of een reeks nieuwskoppen en hun samenvatting) Het wordt als een aanbevolen praktijk beschouwd om elke secie met een <a href="/en-US/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy">koptekst</a> (of heading) te beginnen. Merk ook op dat je <code><article></code>-elementen kan opdelen in andere <code><section></code>-elementen, of <code><section></code>-elementen in andere <code><article></code>-elementen, het hangt wat af van de context.</li> - <li>{{HTMLElement('aside')}} bevat inhoud die geen onmiddellijk verband houdt met de belangrijkste inhoud maar wel extra informatie kan verschaffen die er op een indirecte manier mee is verbonden (lemma's in een woordenlijst, biografie van de auteur, gerelateerde links enz.)</li> - <li>{{HTMLElement('header')}} vertegenwoordigt een groep inleidende inhoud. Als het een kind is van {{HTMLElement('body')}} definiëert het de globale hoofding van een webpagina, maar als het een kind is van een {{HTMLElement('article')}} of {{HTMLElement('section')}} definiëert het een specifieke hoofding voor die sectie (probeer dit niet te verwarring met <a href="/en-US/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_a_title">titles and headings</a> (i.e. titels en kopteksten))</li> - <li>{{HTMLElement('nav')}} bevat de belangrijkste navigerende functionaliteit voor die pagina. Secundaire links enz zouden niet in de navigatie mogen worden gestopt.</li> - <li>{{HTMLElement('footer')}} vertegenwoordig een groep met inhoud die op het einde van de webpagina past.</li> -</ul> - -<h3 id="Elementen_zonder_semantische_betekenis">Elementen zonder semantische betekenis</h3> - -<p>Soms zal je in een situatie terechtkomen waarin je geen ideaal semantisch element kan vinden om een aantal onderdelen te groeperen of om één of andere inhoud te mee te omhullen. Soms zal je misschien een reeks elementen willen groeperen zodat ze er met wat {{glossary("CSS")}} of {{glossary("JavaScript")}} als één enkele entiteit gaan uitzien. Voor dat soort gevallen beschikt HTML over het {{HTMLElement("div")}}- en het {{HTMLElement("span")}}-element. Deze kan je best met een geschikt {{htmlattrxref('class')}}-attribuut gebruiken. Je kan ook één of ander label voor hen bedenken zodat ze gemakkelijk als doel van een selectie kunnen worden gebruikt.</p> - -<p>{{HTMLElement("span")}} is een inline niet-semantisch element dat je enkel zou mogen gebruiken als je echt geen beter semantisch tekstelement kunt bedenken om je inhoud mee in te pakken of als je geen extra betekenis wil toevoegen. Bijvoorbeeld:</p> - -<pre class="brush: html"><p>Om 01:00 stapte de dronken koning terug naar zijn kamer, het bier deed niets om hem te helpen -terwijl hij door de deur waggelde<span class="editor-note">[Opmerking van de redacteur: Op dit moment in het -stuk, moeten de lichten worden gedimd]</span>.</p></pre> - -<p>In dit geval moet de opmerking van de redacteur gewoon extra regie aan de regisseur van het stuk bieden. Het hoeft geen extra semantische betekenis te krijgen. Voor goedziende gebruikers, kan je CSS gebruiken om de opmerking een beetje te onderscheiden van de rest van de tekst.</p> - -<p>{{HTMLElement("div")}} is een niet-semantisch element op blokniveau, dat je enkel zou moeten gebruiken als je geen beter semantisch blokelement kan bedenken of geen specifieke betekenis wil toevoegen. Beeld je bijvoorbeeld een widget in de vorm van een winkelkarretje in, dat je op elk moment kan openen terwijl je je op een koopsite bevindt:</p> - -<pre class="brush: html"><div class="winkelkarretje"> - <h2>Winkelkarretje</h2> - <ul> - <li> - <p><a href=""><strong>Zilveren oorbellen</strong></a>: $99.95.</p> - <img src="../products/3333-0985/thumb.png" alt="zilveren oorbellen"> - </li> - <li> - ... - </li> - </ul> - <p>Totaal: $237.89</p> -</div></pre> - -<p>Dit is niet echt een <code><aside></code> want er is niet noodzakelijk een verband met de belangrijkste inhoud van de pagina (je wil de inhoud van dat karretje op elke pagina zichtbaar kunnen maken). Het rechtvaardigt ook niet echt het gebruik van een <code><section></code> want het vormt geen onderdeel van de belangrijkste inhoud van de pagina. In dit geval is een <code><div></code> dus prima. We hebben een koptekst toegevoegd die als een wegwijzer kan dienen zodat mensen met schermlezer de widget kunnen vinden.</p> - -<div class="warning"> -<p><strong>Waarschuwing</strong>: Divs zijn zo handig dat je ze nogal gemakkelijk te veel gaat gebruiken. Omdat ze geen semantische betekenis dragen, zullen ze je HTML-code snel rommelig maken. Wees voorzichtig en gebruik ze enkel als er geen betere semantische oplossing is en probeer het gebruik ervan tot een minimum te beperken; anders zal je veel werk moeten steken in het updaten en het onderhoud van je documenten.</p> -</div> - -<h3 id="Regeleindes_en_horizontale_lijnen">Regeleindes en horizontale lijnen</h3> - -<p>{{htmlelement("br")}} en {{htmlelement("hr")}} zijn twee elementen die je nu en dan zal gebruiken en die je dus beter wil leren kennen :</p> - -<p><code><br></code> creërt een regeleinde in een paragraaf; het is de enige manier om een rigide structuur in een serie kort lijnen te dwingen, zoals in een postadres of een gedicht. Bijvoorbeeld:</p> - -<pre class="brush: html"><p>Er was eens een meisje en ze heette Nell<br> -Die hield erg veel van HTML<br> -Maar haar structuur was slecht, haar semantiek was droef<br> -en haar opmaak was zo heel veel en erg stroef.</p></pre> - -<p>Zonder de <code><br></code>-elementen zou de paragraaf als een lange regel worden weergegeven (zoals we al eerder in de cursus hebben gezegd, <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Whitespace_in_HTML">HTML negeert de meeste witte ruimte</a>). Als je ze in de code stopt, geeft de opmaak dit weer:</p> - -<p>Er was eens een meisje en ze heette Nell<br> - Die hield erg veel van HTML<br> - Maar haar strutuur was slecht, haar semantiek was droef<br> - en haar opmaak was zo heel veel en erg stroef.</p> - -<p><code><hr></code>-elementen creëren een horizontale lijn in het document die een thematische verandering in de tekst aangeeft (zoals een ander onderwerp of een scène. Visueel ziet die er gewoon uit als een horizontale lijn. Dit is een voorbeeld:</p> - -<pre><p>Ron werd in een hoek gedwongen door de plunderde onderbeesten. Bang, maar vastbesloten om zijn vrienden te beschermen, hief hij zijn toverstok en bereid om tot de aanval over te gaan, hoopte hij dat zijn noodoproep was aangekomen.</p> -<hr> -<p>Intussen was Harry, die thuis was, naar zijn royalty verklaring aan het staren terwijl hij zich afvroeg wanneer de volgende spin off serie uit zou komen, toen een betoverde noodoproep door zijn venster vloog en in zijn schoot belandde. Hij las het snel door, sprong recht en zuchtte. "Ik kan maar beter terug aan het werk gaan", mijmerde hij.</p></pre> - -<p>Dit zou zo worden weergegeven:</p> - -<p>Ron werd in een hoek gedwongen door de plunderde onderbeesten. Bang, maar vastbesloten om zijn vrienden te beschermen, hief hij zijn toverstok en bereid om tot de aanval over te gaan, hoopte hij dat zijn noodoproep was aangekomen.</p> - -<hr> -<p>Intussen was Harry, die thuis was, naar zijn royalty verklaring aan het staren terwijl hij zich afvroeg wanneer de volgende spin off serie uit zou komen, toen een betoverde noodoproep door zijn venster vloog en in zijn schoot belandde. Hij las het snel door, sprong recht en zuchtte. "Ik kan maar beter terug aan het werk gaan", mijmerde hij.</p> - -<h2 id="De_planning_van_een_eenvoudige_website">De planning van een eenvoudige website</h2> - -<p>Jbt gepland hoe de inhoud van je eenvoudige website eruit zal zien. De volgende logische stap is uit te werken welke inhoud je in de hele website zal steken, wat voor pagina's je nodig hebt en hoe ze moeten worden geordend en aan elkaar gelinkt om de beste gebruikerservaring mogelijk te maken. Dit noemen we {{glossary("Information architecture")}}. In een grote complexe website, kan er heel wat planning in dit proces worden gestoken maar voor een eenvoudige website van slechts een paar pagina's kan dit vrij simpel zijn en plezierig!</p> - -<ol> - <li>Denk eraan dat je een paar elementen hebt die vaak voorkomen in de meeste (misschien zelfs in alle) pagina's, zoals het navigatiemenu en de inhoud van de voettekst. Als je site bijvoorbeeld voor een zaak dient, is het een goed idee om je contactinformatie in de voettekst van elke pagina te steken. Noteer wat je op elke pagina terug wil zien komen <img alt="the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy" src="https://mdn.mozillademos.org/files/12423/common-features.png" style="border-style: solid; border-width: 1px; display: block; height: 375px; margin: 0px auto; width: 600px;"></li> - <li>Vervolgens teken je een ruwe schets die toont hoe jij wil dat de structuur er op elke pagina zal uitzien (het zou er kunnen uitzien als onze simpele website hierboven). Noteer wat de functie van elk blok zal zijn. <img alt="A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer" src="https://mdn.mozillademos.org/files/12429/site-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></li> - <li>Nu brainstorm je welke andere inhoud je op je website wil zien (inhoud die niet op elke pagina zal voorkomen). Maak er een grote lijst van en schrijf die op. <img alt="A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info" src="https://mdn.mozillademos.org/files/12425/feature-list.png" style="border-style: solid; border-width: 1px; display: block; height: 1066px; margin: 0px auto; width: 600px;"></li> - <li>De volgende stap is om all deze inhoudelijke componenten in groepen te sorteren. Op die manier krijg je een idee van welke onderdelen samen kunnen leven op de verscillende pagina's. Dit lijkt erg op een techniek die we {{glossary("Card sorting")}} noemen. <img alt="The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things" src="https://mdn.mozillademos.org/files/12421/card-sorting.png" style="border-style: solid; border-width: 1px; display: block; height: 579px; margin: 0px auto; width: 600px;"></li> - <li>Probeer nu een ruwe sitemap te schetsen - maak een bubbel voor elke pagina van je site en trek lijnen die de typische workflow tussen de verschillende pagina's toont. De startpagina zal waarschijnlijk in het midden liggen. Link de meeste of zelfs alle anderen. De meeste pagina's in een kleine site zouden bereikbaar moeten zijn vanuit de belangrijkste navigatie, hoewel er uitzonderingen zijn. Je wil misschien ook opmerkingen toevoegen over hoe alles zal worden weergegeven .<img alt="A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page" src="https://mdn.mozillademos.org/files/12427/site-map.png" style="border-style: solid; border-width: 1px; display: block; height: 872px; margin: 0px auto; width: 600px;"></li> -</ol> - -<h3 id="Actief_leren_creëer_je_eigen_sitemap">Actief leren: creëer je eigen sitemap</h3> - -<p>Volg nu dezelfde stappen en probeer zelf een eigen website te creëren. Waarover wil je een site bouwen? </p> - -<div class="note"> -<p><strong>Opmerking</strong>: Sla je werk ergens op; je hebt het misschien later nog nodig.</p> -</div> - -<h2 id="Samenvatting">Samenvatting</h2> - -<p>Op dit moment zou je een beter idee moeten hebben van hoe je een webpagina of website kan structureren. In het laatste artikel van deze module zullen we het debuggen van HTML bestuderen.</p> - -<h2 id="Zie_ook">Zie ook</h2> - -<ul> - <li><a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Using HTML sections and outlines</a>: Gevorderde gids voor HTML5 semantische elementen en het HTML5 overzichtsalgoritme.</li> -</ul> - -<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/nl/learn/html/introduction_to_html/getting_started/index.html b/files/nl/learn/html/introduction_to_html/getting_started/index.html deleted file mode 100644 index 740b87094d..0000000000 --- a/files/nl/learn/html/introduction_to_html/getting_started/index.html +++ /dev/null @@ -1,513 +0,0 @@ ---- -title: Beginnen met HTML -slug: Learn/HTML/Introduction_to_HTML/Getting_started -translation_of: Learn/HTML/Introduction_to_HTML/Getting_started ---- -<div>{{LearnSidebar}}</div> - -<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> - -<p class="summary">In dit artikel nemen we de basisprincipes van HTML door — we definiëren elementen, attributen en alle andere belangrijke begrippen waarover je misschien al hebt gelezen en hoe ze in de taal passen. We tonen je ook hoe een HTML-element is gestructureerd en verklaren een aantal belangrijke basiseigenschappen van de taal. Terwijl we je daarmee op weg helpen, spelen we met HTML om je interesse op te wekken! </p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Vereisten:</th> - <td>Basiskennis computers, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basiskennis software installatie</a> en basiskennis over <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">werken met bestanden</a>.</td> - </tr> - <tr> - <th scope="row">Doel:</th> - <td>Vertrouwd raken met de HTML-taal. Vaardigheden in de praktijk brengen door enkele HTML-elementen te schrijven.</td> - </tr> - </tbody> -</table> - -<h2 id="Wat_is_HTML">Wat is HTML?</h2> - -<p>{{glossary("HTML")}} (HyperText Markup Language) is geen programmeertaal; het is <em>een opmaaktaal </em>en hij wordt gebruikt om je browser te vertellen hoe de webpagina's die je bezoekt, moeten worden weergegeven. Het kan even simpel of ingewikkeld zijn als de webontwerper dat wenst. HTML bestaat uit een serie {{glossary("Element", "elementen")}}, die je kan gebruiken om verschillende onderdelen van je inhoud te verpakken zodat die er op een bepaalde manier gaat uitzien of zich gedragen. De {{glossary("Tag", "tags")}} (een ander woord voor labels of markeerders) die de tekst insluiten kunnen van een woord of een afbeelding een hyperlink naar ergens anders maken, ze kunnen woorden cursiveren, lettertypes vergroten of verkleinen enzovoort. Neem bijvoorbeeld de volgende regel tekst:</p> - -<pre>My cat is very grumpy</pre> - -<p>Stel dat we van deze regel een paragraaf wilden maken, dan zouden we dat doen door deze regel met ({{htmlelement("p")}}) paragraaflabels te omhullen:</p> - -<pre class="brush: html"><p>My cat is very grumpy</p></pre> - -<h2 id="Anatomie_van_een_HTML-element">Anatomie van een HTML-element</h2> - -<p>We gaan dit paragraafelement wat verder onderzoeken:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> - -<p>De belangrijkste onderdelen van ons element zijn:</p> - -<ol> - <li><strong>De opening tag:</strong> (het openingslabel) Deze bestaat uit de naam van het element (in dit geval p), ingesloten door kleiner- en groter-dan-tekens. <elementnaam> toont ons waar het element en zijn invloed op de inhoud begint. In dit geval duidt het het begin van de paragraaf aan.</li> - <li><strong>De closing tag: </strong> (het eindlabel) Die is identiek aan de opening tag, behalve dat er ook nog een schuine streep voor de naam van het element staat. De schuine streep leunt naar voor en staat net achter <. Het eindlabel duidt het einde van het element aan, in dit geval dus het einde van de paragraaf. Beginners vergeten de eindmarkeerder nogal eens en dat kan tot vreemde resultaten leiden.</li> - <li><strong>De content:</strong> (de inhoud) Dit is de inhoud van het element, in dit geval gewoon een regel tekst. </li> - <li><strong>Het element:</strong> De openingsmarkeerder plus de eindmarkeerder plus de inhoud zijn gelijk aan het element.</li> -</ol> - -<h3 id="Actief_leren_creër_je_eerste_HTML-element">Actief leren: creër je eerste HTML-element</h3> - -<p>Bewerk de regel in het <em>Invoer-</em>gebied hieronder. Sluit het in tussen de <code><em>-</code> en <code></em>-</code>labels. (Plaats <code><em></code> voor de regel om <em>het element te openen</em> en <code></em></code> erachter om <em>het element te sluiten</em>) — dit zou de regel cursief moeten benadrukken! Je zal je veranderingen live kunnen zien in het <em>Uitvoer-</em>gebied.</p> - -<p>Als je een fout maakt, kan je die altijd ongedaan maken door op de <em>Ongedaan maken-</em>knop te drukken. Als je echt vast raakt, druk dan op <em>Toon oplossing</em> om het antwoord te zien.</p> - -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><h2>Invoer</h2> -<textarea id="code" class="input">Dit is mijn tekst.</textarea> -<h2>Uitvoer</h2> -<div class="output"></div> -<div class="controls"> - <input id="reset" type="button" value="Ongedaan maken" /> - <input id="solution" type="button" value="Toon oplossing" /> -</div> -</pre> - -<pre class="brush: css">body { - font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; -} - -.input, .output { - width: 90%; - height: 2em; - padding: 10px; - border: 1px solid #0095dd; -} - -button { - padding: 10px 10px 10px 0; -} -</pre> - -<pre class="brush: js">var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var code = textarea.value; -var output = document.querySelector(".output"); -var solution = document.getElementById("solution"); - -function drawOutput() { - output.innerHTML = textarea.value; -} - -reset.addEventListener("click", function() { - textarea.value = code; - drawOutput(); -}); - -solution.addEventListener("click", function() { - textarea.value = '<em>Dit is mijn tekst.</em>'; - drawOutput(); -}); - -textarea.addEventListener("input", drawOutput); -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 300) }}</p> - -<h3 id="Geneste_Elementen">Geneste Elementen</h3> - -<p>Je kan elementen in andere elementen steken - we noemen dit <strong>nesten</strong>. Als we willen zeggen dat our cat VERY grumpy is, kunnen we het woord "very" in een {{htmlelement("strong")}}-element insluiten. Dat zorgt ervoor dat het woord wordt beklemtoond:</p> - -<pre class="brush: html"><p>My cat is <strong>very</strong> grumpy.</p></pre> - -<p>Je moet er echter wel voor zorgen dat je elementen correct worden genest: in het voorbeeld hierboven openden we het <p>-element eerst en dan het <strong>-element. Dus moeten we <strong> eerst sluiten en dan <p>. Het volgende is fout:</p> - -<pre class="example-bad brush: html"><p>My cat is <strong>very grumpy.</p></strong></pre> - -<p>De elementen moeten correct worden geopend en gesloten zodat ze duidelijk in of buiten elkaar bestaan. Als ze overlappen zoals hierboven, zal de webbrowser proberen te raden wat je wil zeggen en dat kan heel onverwachte resultaten opleveren. Doe dat dus niet!</p> - -<h3 id="Blok-_versus_inline-elementen">Blok- versus inline-elementen</h3> - -<p>Elementen in HTML kunnen in twee belangrijke categorieën worden ingedeeld: elementen die als een blok functioneren en inline-elementen.</p> - -<ul> - <li>Elementen op blokniveau vormen een zichtbaar blok op de pagina — wat er ook aan vooraf ging, ze volgen op een nieuwe lijn en elke inhoud die erna komt zal ook op een nieuwe lijn staan. Zulke elementen zijn meestal structurele elementen in de pagina. Ze zijn bijv. paragrafen, lijsten, menu's, voetteksten enz. Een blokelement zal niet in een inline-element worden genest maar het kan wel in een ander blokelement worden genest. </li> - <li>Inline-elementen bestaan binnen elementen op blokniveau. Ze worden rond kleine delen van de inhoud geplaatst en dus niet rond volledige paragrafen en andere vormen van gegroepeerde inhoud. Ze zullen eerder in een paragraaf of tekst terechtkomen, bijvoorbeeld {{htmlelement("em")}} of {{htmlelement("strong")}} kan je in een {{htmlelement("a")}}-element (hyperlink) zetten om het element te benadrukken.</li> -</ul> - -<p>Bekijk het volgende voorbeeld eens:</p> - -<pre class="brush: html"><em>eerste</em><em>tweede</em><em>derde</em> - -<p>vierde</p><p>vijfde</p><p>zesde</p> -</pre> - -<p>{{htmlelement("em")}} is een inline-element zoals je hieronder kan zien. De eerste drie elementen bevinden zich op dezelfde lijn zonder ruimte tussen hen in. {{htmlelement("p")}} daarentegen is een element op blokniveau. Elk element verschijnt dus op een nieuwe lijn met ruimte boven en onder elk element. (De ruimte wordt gecreëerd door de standaard <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS stijl</a> die de browser op paragrafen toepast).</p> - -<p>{{ EmbedLiveSample('Blok-_versus_inline-elementen', 700, 200) }}</p> - -<div class="note"> -<p><strong>Opmerking</strong>: HTML5 heeft de elementcategorieën in HTML5 geherdefiniëerd : zie <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Element content categories</a>. Hoewel deze definities accurater en niet zo ambigu zijn als hun voorgangers, zijn ze wel een stuk moeilijker te begrijpen dan 'blok' en 'inline'. Daarom gaan we bij die twee blijven in dit artikel.</p> -</div> - -<div class="note"> -<p><span style="font-size: 14px;"><strong>Opmerking</strong></span>: Je kan nuttige referentiepagina's vinden die lijsten van blok- en inline-elementen bevatten — zie <a href="/en-US/docs/Web/HTML/Block-level_elements">Block-level elements</a> en <a href="/en-US/docs/Web/HTML/Inline_elements">Inline elements</a>.</p> -</div> - -<h3 id="Lege_elementen">Lege elementen</h3> - -<p>Niet alle elementen volgen hetzelfde patroon met een openingslabel, inhoud en eindlabel. Sommige elementen bestaan uit één enkel label, dat meestal wordt gebruikt om iets in de inhoud in te voegen/in te bedden. Het {{htmlelement("img")}}-element bijvoorbeeld voegt een afbeelding aan de pagina toe op de plaats waar het het element in de code is geplaatst:</p> - -<pre class="brush: html"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> - -<p>Dit zou het volgende op je pagina moeten uitvoeren:</p> - -<p>{{ EmbedLiveSample('Lege_elementen', 700, 300) }}</p> - -<div class="note"> -<p><strong>Opmerking</strong>: Lege elementen worden soms <em>void elementen</em> genoemd (<em>void </em>is natuurlijk Engels en betekent ook leeg).</p> -</div> - -<h2 id="Attributen">Attributen</h2> - -<p>Elementen kunnen ook attributen krijgen die er zo uitzien:</p> - -<p><img alt='&lt;p class="editor-note">My cat is very grumpy&lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> - -<p>Attributen bevatten extra informatie over het element die je niet in de inhoud van dat element wil zien. In dit voorbeeld zie het class (klasse dus) attribuut dat je kan gebruiken om het element een naam te geven. Daarmee kan je het identificeren en er onder andere stijlinformatie op richten.</p> - -<p>Een attribuut bestaat uit:</p> - -<ol> - <li>Een spatie tussen het attribuut en de elementnaam (of het vorige attribuut als het element al een of meer attributen heeft).</li> - <li>De attribuutnaam, gevolgd door een is-gelijk-aan-teken (=).</li> - <li>Een attribuutwaarde tussen aanhalingstekens.</li> -</ol> - -<h3 id="Actief_leren_Attributen_aan_een_element_toevoegen">Actief leren: Attributen aan een element toevoegen</h3> - -<p>{{htmlelement("a")}} is ook een element — het vertegenwoordigt een anker en verandert de tekst die het insluit in een hyperlink. Dit element kan een aantal attributen krijgen, twee ervan zijn de volgende:</p> - -<ul> - <li><code>href</code>: De waarde van dit attribuut is het webadres waar je de link naar wil doen wijzen en waar de browser naartoe navigeert als er op de link wordt geklikt. Bijvoorbeeld: <code>href="https://www.mozilla.org/"</code>.</li> - <li><code>title</code>: Dit attribuut verschaft exta informatie over de link, zoals de aard van de pagina waarmee het anker ons verbindt. Bijvoorbeeld: <code>title="The Mozilla homepage"</code>. Dit attribuut zal als een tooltip verschijnen als de muis erover heen beweegt.</li> -</ul> - -<p>Bewerk de regel in het <em>invoer-gebied</em> hieronder en verander hem in een hyperlink naar je favoriete website. Eerst voeg je het <code><a>-</code>element toe, dan het <code>href-</code>attribuut en dan het <code>title-</code>attribuut. Je zal de verandering live kunnen updaten in het <em>uitvoer-gebied</em>. Je zou een link moeten zien die de inhoud van het <code>title</code>-attribuut toont als je met je muis over de link heen glijdt. Als je erop klikt zou je naar het webadres moeten worden gebracht dat in het href-element staat. Vergeet niet dat je een spatie tussen de elementnaam en elk attribuut moet plaatsen.</p> - -<p>Als je een fout maakt, kan je die altijd ongedaan maken met de <em>Ongedaan Maken </em>knop. Als je echt vastraakt, druk dan op <em>Toon Oplossing</em> om het antwoord te zien.</p> - -<div class="hidden"> -<h6 id="Playable_code2">Playable code2</h6> - -<pre class="brush: html"><h2>Invoer</h2> -<textarea id="code" class="input">&lt;p&gt;Een link naar mijn favoriete website.&lt;/p&gt;</textarea> -<h2>Uitvoer</h2> -<div class="output"></div> -<div class="controls"> - <input id="reset" type="button" value="Ongedaan Maken" /> - <input id="solution" type="button" value="Toon Oplossing" /> -</div> -</pre> - -<pre class="brush: css">body { - font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; -} - -.input, .output { - width: 90%; - height: 2em; - padding: 10px; - border: 1px solid #0095dd; -} - -button { - padding: 10px 10px 10px 0; -} -</pre> - -<pre class="brush: js">var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var code = textarea.value; -var output = document.querySelector(".output"); -var solution = document.getElementById("solution"); - -function drawOutput() { - output.innerHTML = textarea.value; -} - -reset.addEventListener("click", function() { - textarea.value = code; - drawOutput(); -}); - -solution.addEventListener("click", function() { - textarea.value = '<p>Een link naar mijn<a href="<code>https://www.mozilla.org/</code>" title="De Mozilla homepage">favoriete website</a>.</p>'; - drawOutput(); -}); - -textarea.addEventListener("input", drawOutput); -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code2', 700, 300) }}</p> - -<h3 id="Boolean_attributen">Boolean attributen</h3> - -<p>Soms zal je attributen zonder waarden zien — dit is helemaal toegestaan. We noemen hen boolean attributen, en ze kunnen slechts één waarde hebben. Die is meestal dezelfde als de attribuutnaam. Neem het {{htmlattrxref("disabled", "input")}}-attribuut als voorbeeld. Je kan het toewijzen aan het invoerveld van een formulier dat je wil uitschakelen.(Het veld wordt dan grijs weergegeven en de gebruiker kan niets invullen.)</p> - -<pre><input type="text" disabled="disabled"></pre> - -<p>Zoals je hieronder kan zien, is een verkorte vorm ook toegestaan . Ter informatie hebben we ook een ingeschakeld invoerveld toegevoegd zoadat je beter begrijpt wat er gebeurt: </p> - -<pre class="brush: html"><input type="text" disabled> - -<input type="text"> -</pre> - -<p>Beiden zullen het volgende produceren:</p> - -<p>{{ EmbedLiveSample('Boolean_attributen', 700, 100) }}</p> - -<h3 id="Aanhalingstekens_rond_attribuutwaarden_weglaten">Aanhalingstekens rond attribuutwaarden weglaten</h3> - -<p>Als je wat rondkijkt op het World Wide Web, zal je allerlei rare opmaakstijlen tegenkomen, waaronder waarden zonder aanhalingstekens. Dit is toegestaan in een aantal omstandigheden maar het zal je code in andere breken. Als we bijvoorbeeld ons linkvoorbeeld opnieuw bekijken, zouden we het kunnen herschrijven met enkel het <code>href-</code>attribuut en zonder aanhalinstekens zoals hieronder:</p> - -<pre><a href=<code>https://www.mozilla.org/</code>>favoriete website</a></pre> - -<p>Maar als we het <code>title-</code>attribuut toevoegen, loopt het mis:</p> - -<pre class="brush: html"><a href=<code>https://www.mozilla.org/</code> title=De Mozilla homepage>favoriete website</a></pre> - -<p>In deze situatie zal de browser je opmaak verkeerd interpreteren en denken dat het <code>title-</code>attribuut in feite uit drie attributen bestaat — een title-attribuut met "De" als waarde, en twee boolean attributen, <code>Mozilla</code> en <code>homepage</code>. Dit is natuurlijk niet de bedoeling en het zal fouten en onverwacht gedrag in de code veroorzaken, zoals je in het live voorbeeld hier beneden kunt zien. Probeer met je muis over de link heen te glijden om te zien wat de tekst van de titel is!</p> - -<p>{{ EmbedLiveSample('Aanhalingstekens_rond_attribuutwaarden_weglaten', 700, 100) }}</p> - -<p>We adviseren om de waarden van je attributen altijd tussen aanhalingstekens te zetten — je vermijdt er dit soort problemen mee en je code wordt ook leesbaarder. </p> - -<h3 id="Enkele_of_dubble_aanhalingstekens">Enkele of dubble aanhalingstekens?</h3> - -<p>In dit artikel zal je merken dat de attributen allemaal tussen dubbele aanhalingstekens staan. Het is echter mogelijk dat je in de HTML van sommige mensen enkele aanhalingstekens ziet staan. Dit is uitsluitend een kwestie van stijl en je bent vrij om je eigen voorkeur te volgen. De volgende twee lijnen gelijkwaardig:</p> - -<pre class="brush: html"><a href="http://www.example.com">Een link naar mijn voorbeeld.</a> - -<a href='http://www.example.com'>Een link naar mijn voorbeeld.</a></pre> - -<p>Je moet er echter wel voor zorgen dat je de twee niet met elkaar vermengt. Het volgende zal mis gaan!</p> - -<pre class="brush: html"><a href="http://www.example.com'>Een link naar mijn voorbeeld.</a></pre> - -<p>Als je één type aanhalingstekens in je HTML hebt gebruikt, kan je het andere type nesten:</p> - -<pre class="brush: html"><a href="http://www.example.com" title="Plezant, niet?">Een link naar mijn voorbeeld.</a></pre> - -<p>Als je hetzelfde type aanhalingstekens wil nesten, zal je <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Entity_references_including_special_characters_in_HTML">HTML-entititeiten</a> voor de aanhalingstekens moeten gebruiken.</p> - -<h2 id="Anatomie_van_een_HTML-document">Anatomie van een HTML-document</h2> - -<p>Daarmee kunnen we onze inleiding op individuele HTML-elementen afsluiten. Op hun eentje zijn ze echter niet erg nuttig. Nu gaan we zien hoe individuele elementen gecombineerd worden om een volledige HTML-pagina te vormen:</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Mijn testpagina</title> - </head> - <body> - <p>Dit is mijn pagina</p> - </body> -</html></pre> - -<p>Wat steekt er in die pagina?</p> - -<ol> - <li><code><!DOCTYPE html></code>: het doctype. Lang geleden was HTML jong (rond 1991/2). Doctypes moesten toen als links naar een serie regels dienen. De HTML-pagina moest die regels volgen om als goede HTML te kunnen worden beschouwd. Dat kon automatische foutcontrole zijn en andere nuttige zaken. Ze zagen er toen ongeveer zo uit:</li> - <li> - <pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" -"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre> - Maar tegenwoordig trekt niemand zich nog iets van die regels aan. Ze zijn enkel nog een historisch artefact dat erin moet staan opdat alles correct zou werken. <code><!DOCTYPE html></code> is de kortste tekenserie die als een geldig doctype kan dienen; voorlopig is dat al dat je moet weten.</li> - <li><code><html></html></code>: Het <code><html>-</code>element. element sluit alle inhoud op de volledige pagina in en wordt ook het root-element genoemd. (root is het Engelse woord voor wortel).</li> - <li><code><head></head></code>: Het <code><head>-</code>element gedraagt zich als een container voor alle zaken die je in je HTML-pagina wil steken maar die niet tot de inhoud behoren die je aan de gebruikers wil tonen. Dit houdt zaken in zoals sleutelwoorden, een beschrijving van je pagina zoals je die in zoekresultaten wil zien verschijnen, CSS om je inhoud van stijlen te voorzien, tekensetverklaringen en meer. Je zal er meer over leren in het volgende artikel van deze serie.</li> - <li><code><meta charset="utf-8"></code>: Met dit element bepaal je dat de tekenset voor je document utf-8 zal zijn. In utf-8 steken bijna alle tekens die voor alle gekende menselijke talen worden gebruikt. In wezen houdt dit in dat je nu elke tekstinhoud aankan, die je erin zou willen steken. Er is geen reden om utf-8 niet aan charset toe te wijzen en het kan je helpen om later problemen te vermijden.</li> - <li><code><title></title></code>: Dit element stelt de titel van je pagina in. Dat is de titel die in de browsertab verschijnt waarin je pagina wordt geladen. Hij wordt ook gebruikt om de pagina te beschrijven als je hem als bladwijzer/favoriet instelt.</li> - <li><code><body></body></code>: Het <code><body>-</code>element bevat de volledige inhoud die je aan webgebruikers wil tonen als die je pagina bezoeken, of het nu tekst is, afbeeldingen, videos, spelletjes, afspeelbare audiosporen (audio tracks in het Engels) of wat dan ook.</li> -</ol> - -<h3 id="Actief_leren_Extra_functionaliteit_aan_een_HTML-document_toevoegen">Actief leren: Extra functionaliteit aan een HTML-document toevoegen</h3> - -<p>Als je met HTML op je lokale computer wil experimenteren, kan je het volgende doen:</p> - -<ol> - <li>Kopieer de HTML-pagina die je hierboven in 'Anatomie van een HTML-document' vindt.</li> - <li>Creër een nieuw bestand in je broncode-editor.</li> - <li>Plak the code in het nieuwe bestand.</li> - <li>Sla het bestand op als <code>index.html</code>.</li> -</ol> - -<div class="note"> -<p><span style="font-size: 14px;"><strong>Opmerking</strong></span>: Je kan dit simpele HTML-jsabloon ook op de <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a> vinden.</p> -</div> - -<p>Je kan het bestand nu in een webbrowser openen om te zien hoe de gegenereerde code eruitziet. Dan kan je de code bewerken en de browser vernieuwen om te zien wat het resultaat is. Eerst zal het er zo uitzien:</p> - -<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">In deze oefening kan je de code lokaal op je computer bewerken, zoals we hierboven hebben uitgelegd, of je kan die in het bewerkbare voorbeeldvenster hieronder bewerken. (In deze oefening vertegenwoordigt het bewerkbare voorbeeldvenster gewoon de inhoud van het <code><body>-</code>element.) Probeer nu de volgende stappen uit te voeren:</p> - -<ul> - <li>Net onder het <code><body>-</code>openingslabel, voeg je een titel voor het document toe. Die zou tussen een <code><h1>-</code>openingslabel en een <code></h1>-</code>eindlabel moeten staan.</li> - <li>Bewerk de inhoud van de paragraaf en zorg dat er wat tekst in staat over iets dat je interesseert.</li> - <li>Zorg dat de belangrijke woorden goed opvallen door ze vet te maken. Dat doe je door ze tussen een <code><strong>-</code>openingslabel en een <code></strong>-</code>eindlabel te zetten.</li> - <li>Voeg een hyperlink aan je paragraaf toe, zoals <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">we eerder in dit artikel hebben uitgelegd</a>.</li> - <li>Voeg onder de paragraaf een afbeelding aan je document toe. Doe dit ook <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">zoals we eerder in dit artikel hebben uitgelegd</a>. Je krijgt bonuspunten als je erin slaagt de hyperlink naar een andere afbeelding te laten wijzen. (Dat kan een beeld zijn dat zich op je lokale computer bevindt of eentje dat je ergens in het internet hebt gevonden.)</li> -</ul> - -<p>Als je een fout maakt, kan je altijd op <em>Ongedaan Maken </em>klikken Als je echt vast raakt, druk dan op <em>Toon Oplossing</em> om het antwoord te zien.</p> - -<div class="hidden"> -<h6 id="Playable_code3">Playable code3</h6> - -<pre class="brush: html"><h2>Invoer</h2> -<textarea id="code" class="input"> -&lt;p&gt;Dit is mijn pagina.&lt;/p&gt;</textarea> -<h2>Uitvoer</h2> -<div class="output"></div> -<div class="controls"> - <input id="reset" type="button" value="Ongedaan Maken" /> - <input id="solution" type="button" value="Toon Oplossing" /> -</div> -</pre> - -<pre class="brush: css">body { - font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; -} - -.input, .output { - width: 90%; - height: 10em; - padding: 10px; - border: 1px solid #0095dd; -} - -img { - max-width: 100%; -} - -.output { - overflow: auto; -} - -button { - padding: 10px 10px 10px 0; -} -</pre> - -<pre class="brush: js">var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var code = textarea.value; -var output = document.querySelector(".output"); -var solution = document.getElementById("solution"); - -function drawOutput() { - output.innerHTML = textarea.value; -} - -reset.addEventListener("click", function() { - textarea.value = code; - drawOutput(); -}); - -solution.addEventListener("click", function() { - textarea.value = '<p>Ik geniet ervan om <strong>te drummen</strong>. Een van mijn favoriete drummers is Neal Peart, die\ - in de groep <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a> speelt.\ - Mijn favoriete Rush album is op dit moment <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ -<img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; - drawOutput(); -}); - -textarea.addEventListener("input", drawOutput); -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code3', 700, 600) }}</p> - -<h3 id="Witruimte_in_HTML">Witruimte in HTML</h3> - -<p>In de voorbeelden hierboven heb je misschien gemerkt dat er veel witruimte in de code staat. Dit is helemaal niet nodig; de twee volgende stukjes code zijn beiden correct:</p> - -<pre class="brush: html"><p>Dogs are silly.</p> - -<p>Dogs are - silly.</p></pre> - -<p>Witruimte kan uit spaties bestaan maar ook uit regeleindes. Het doet er niet toe hoeveel je ervan gebruikt; het HTML-ontledingsprogramma herleidt elke spatie tot een enkele wanneer het de code genereert. Dus waarom zou een mens zoveel witruimte gebruiken? Het antwoord is leesbaarheid — het maakt het zoveel gemakkelijker om te begrijpen wat er in je code gebeurt als je die aangenaam en netjes hebt opgesteld in plaats van opeengestapeld als een hoop troep. In onze HTML hebben we elk genest element twee spaties verder laten inspringen dan het element waar het in zit. Het is jouw zaak welke opmaakstijl je gebruikt (hoeveel spaties je gebruikt voor elk niveau van inspringing bijvoorbeeld) maar je zou moeten nadenken over een of andere vorm van opmaak.</p> - -<h2 id="Entiteitsverwijzingen_inclusief_speciale_tekens_in_HTML">Entiteitsverwijzingen: inclusief speciale tekens in HTML</h2> - -<p>De tekens <code><</code>, <code>></code>,<code>"</code>,<code>'</code> en <code>&</code> zijn speciale tekens in HTML. Ze vormen onderdelen van de HTML-syntaxis zelf dus hoe gebruik je een van die tekens in je tekst? Als je bijvoorbeeld echt een ampersand (& dus) wil gebruiken of een kleiner-dan-teken, hoe zorg je er dan voor dat het niet als code wordt geïnterpreteerd zoals in sommige browsers gebeurt?</p> - -<p>We moeten entiteitsverwijzingen gebruiken — speciale codes die tekens vertegenwoordigen en die in deze omstandigheden kunnen worden gebruikt. Elke entiteitsverwijzing begint met een ampersand (&) en eindigt op een puntkomma (;).</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Letterlijk teken</th> - <th scope="col">Entiteitsverwijzing als equivalent</th> - </tr> - </thead> - <tbody> - <tr> - <td><</td> - <td>&lt;</td> - </tr> - <tr> - <td>></td> - <td>&gt;</td> - </tr> - <tr> - <td>"</td> - <td>&quot;</td> - </tr> - <tr> - <td>'</td> - <td>&apos;</td> - </tr> - <tr> - <td>&</td> - <td>&amp;</td> - </tr> - </tbody> -</table> - -<p>In het voorbeeld hieronder kan je twee paragrafen zien waarin over webtechnologieën wordt gepraat:</p> - -<pre class="brush: html"><p>In HTML definiëer je een paragraaf met een <p>-element</p>. - -<p>In HTML definiëer je een paragraaf met een &lt;p&gt;-element.</p></pre> - -<p>In de live uitvoer hier beneden, kan je zien dat er met de eerste paragraaf iets is misgelopen. De browser denkt namelijk dat de <code><p></code> code is waarmee je een nieuwe paragraaf wil beginnen. De tweede paragraaf ziet er prima uit omdat we de kleiner- en groter-dan-tekens hebben vervangen door entiteitsverwijzingen.</p> - -<p>{{ EmbedLiveSample('Entiteitsverwijzingen_inclusief_speciale_tekens_in_HTML', 700, 200) }}</p> - -<div class="note"> -<p><strong>Opmerking</strong>: Op Wikipedia kan je een kaart van alle beschikbare entiteitsverwijzingen voor HTML-tekens vinden: <a class="external text" href="https://nl.wikipedia.org/wiki/Karakter-entiteitreferentie" rel="nofollow">Lijst van entiteitsverwijzingen voor XML- en HTML-tekens</a>.</p> -</div> - -<h2 id="HTML_commentaren">HTML commentaren</h2> - -<p>In HTML, zoals in de meeste programmeertalen, bestaat er een mechanisme om commentaren in je code te schrijven. Commentaren worden genegeerd door de browser en zijn onzichtbaar voor de gebruiker. Het doel van dit mechanisme is commentaren in je code te schrijven die verduidelijken hoe je code werkt, wat de verschillende delen van je code precies doen enz. Dit kan zeer nuttig zijn als je terugkeert naar code waar je al zes maanden niet meer aan hebt gewerkt en je je niet meer kan herinneren wat je hebt gedaan of als je je code doorgeeeft aan iemand anders die er verder mee zal werken.</p> - -<p>Om een deel van de inhoud in je HTML-bestand in een commentaar te veranderen, moet je die door de speciale markeerders <code><!--</code> en <code>--></code> omhullen. Bijvoorbeeld:</p> - -<pre class="brush: html"><p>Ik sta niet in een commentaar.</p> - -<!-- <p>Ik wel!</p> --></pre> - -<p>Zoals je hieronder kan zien, verschijnt de eerste paragraaf in de live uitvoer maar de tweede niet.</p> - -<p>{{ EmbedLiveSample('HTML_commentaren', 700, 100) }}</p> - -<h2 id="Samenvatting">Samenvatting</h2> - -<p>Je hebt het einde van het artikel bereikt — ik hoop dat je van onze reis doorheen de fundamenten van HTML hebt genoten. Op dit punt zou je moeten begrijpen hoe de taal eruitziet, hoe hij werkt op een basisniveau en je zou nu een paar elementen en attributen moeten kunnen schrijven. Deze kennis is meer dan genoeg om de volgende artikelen te lezen. Daarin gaan we sommige behandelde onderwerpen in groter detail bespreken en we zullen een paar nieuwe eigenschappen van de taal introduceren. Stay tuned!</p> - -<div class="note"> -<p><strong>Opmerking</strong>: Nu je meer over HTML gaat leren, zal je misschien ook de fundamenten van <a href="/en-US/docs/Learn/CSS">CSS</a> (Cascading Style Sheets of Waterval Stijlbestanden) willen onderzoeken. CSS is de taal die je gebruikt om je webpagina's te stijlen (om bijvoorbeeld je lettertype of kleuren te veranderen of de indeling van de pagina te wijzingen). HTML en CSS passen heel goed bij elkaar zoals je snel zal ontdekken.</p> -</div> - -<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> diff --git a/files/nl/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/nl/learn/html/introduction_to_html/html_text_fundamentals/index.html deleted file mode 100644 index 4da6104778..0000000000 --- a/files/nl/learn/html/introduction_to_html/html_text_fundamentals/index.html +++ /dev/null @@ -1,632 +0,0 @@ ---- -title: Grondbeginselen van HTML-tekst -slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals -translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div> - -<p class="summary">Een van de kerntaken van HTML is structuur en betekenis aan een tekst geven (ook gekend onder de term {{glossary("semantiek")}}), zodat een browser de tekst correct kan weergeven. Dit artikel legt uit hoe {{glossary("HTML")}} gebruikt kan worden om een pagina te structureren door er koppen en paragrafen aan toe te voegen, woorden te benadrukken, lijsten te creëren en meer.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Vereisten:</th> - <td>Basiskennis HTML die je kunt terugvinden in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Beginnen met HTML</a>.</td> - </tr> - <tr> - <th scope="row">Doel:</th> - <td>Je leert hoe je een tekst kunt opmaken en hoe je er structuur en betekenis aan kunt geven – inclusief paragrafen, koppen, lijsten, tekst benadrukken en citaten.</td> - </tr> - </tbody> -</table> - -<h2 id="De_basis_Koppen_en_Paragrafen">De basis: Koppen en Paragrafen</h2> - -<p>Een gestructureerde tekst bestaat meestal uit koppen of hoofdingen en paragrafen, ongeacht of je nu een verhaal leest, een krant, een leerboek, een magazine enz.</p> - -<p><img alt="Een voorbeeld van een voorpagina van een krant, dat het gebruik van koppen, subkoppen en paragrafen laat zien." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0px auto;" title="Een voorbeeld van een voorpagina van een krant, dat het gebruik van koppen, subkoppen en paragrafen laat zien."></p> - -<p>Een gestructureerde inhoud maakt de leeservaring gemakkelijker en aangenamer.</p> - -<p>In HTML moet elke paragraaf ingesloten worden door een {{htmlelement("p")}}-element zoals hieronder:</p> - -<pre class="brush: html"><p>Ik ben een paragraaf, laat me je dat vertellen.</p></pre> - -<p>Elke hoofding moet worden ingesloten door een kop-element:</p> - -<pre class="brush: html"><h1>Ik ben de titel van het verhaal.</h1></pre> - -<p>Er bestaan zes kop-elementen – {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}} en {{htmlelement("h6")}}. Elk element staat voor een verschillend inhoudelijk niveau in het document; <code><h1></code> vertegenwoordigt de belangrijkste kop, <code><h2></code> vertegenwoordigt een ondertitel, <code><h3></code> vertegenwoordigt een ondertitel die zich nog een niveau lager bevindt, enzovoort.</p> - -<h3 id="De_implementatie_van_structurele_hiërarchie">De implementatie van structurele hiërarchie</h3> - -<p>We beginnen met een voorbeeld: in een verhaal zou <code><h1></code> voor de titel van het verhaal worden gebruikt, <code><h2></code>'s zouden de titel van elk hoofdstuk vertegenwoordigen, <code><h3></code>'s zouden de ondertitels van elk hoofdstuk vertegenwoordigen, enzovoort.</p> - -<pre class="brush: html"><h1>De Verpletterende Verveling</h1> - -<p>door Chris Mills</p> - -<h2>Hoofdstuk 1: De donkere nacht</h2> - -<p>Het was een donkere nacht. Ergens riep een uil 'oehoe'. Het regende pijpenstelen op de ...</p> - -<h2>Hoofdstuk 2: De eeuwige stilte</h2> - -<p>Onze protagonist kon uit de schaduwachtige figuur zelfs geen gefluisterd woord krijgen ...</p> - -<h3>Het fantoom spreekt</h3> - -<p>Meerdere uren waren voorbijgegaan, toen het fantoom plots rechtop ging zitten en schreeuwde: "Heb alsjeblieft erbarmen met mijn ziel!"</p></pre> - -<p>Jij bent degene die beslist wat je gebruikte elementen uitdrukken, zolang de hiërarchie logisch is. Je hoeft enkel met een paar goede gewoontes rekening te houden als je zulke structuren creëert:</p> - -<ul> - <li>Bij voorkeur gebruik je slechts één <code><h1></code> per pagina – dit is de hoogste kop en alle andere zitten eronder in de hiërarchie.</li> - <li>Zorg ervoor dat je de koppen in de hiërarchie in de juiste volgorde gebruikt. Gebruik geen <code><h3></code>'s voor ondertitels die dan gevolgd worden door <code><h2></code>'s om titels onder die ondertitels te vertegenwoordigen. Dat houdt geen steek en zal eigenaardige resultaten veroorzaken.</li> - <li>Van de zes beschikbare niveaus zou je moeten proberen er niet meer dan drie per pagina te gebruiken, behalve als je vindt dat het nodig is. Documenten met vele niveaus (d.w.z. een diepe koppenhiërarchie) worden onhandelbaar en moeilijk om in te navigeren. In zo'n geval is het aan te raden om de inhoud over meerdere pagina's te spreiden.</li> -</ul> - -<h3 id="Waarom_hebben_we_structuur_nodig">Waarom hebben we structuur nodig?</h3> - -<p>Om deze vraag te beantwoorden, gaan we eerst <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> bekijken – het startpunt van ons voorbeeld waarmee we in dit artikel gaan werken (een lekker hummusrecept). Je kunt het beste een kopie van dit bestand op je lokale machine opslaan, want je zult het later voor de oefeningen nodig hebben. De body van dit document bevat in dit stadium verschillende delen – de inhoud is op geen enkele manier opgemaakt, maar de onderdelen zijn met regeleindes van elkaar gescheiden (op Enter/Return gedrukt om naar de volgende regel te gaan).</p> - -<p>Als je het document echter in je browser opent, zul je zien dat de tekst er als één grote brok in zit!</p> - -<p><img alt="Een webpagina die een muur van onopgemaakte tekst laat zien, omdat er geen elementen op de pagina zijn om deze te structureren." src="https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png" style="display: block; height: 377px; margin: 0px auto; width: 600px;" title="Een webpagina die een muur van onopgemaakte tekst laat zien, omdat er geen elementen op de pagina zijn om deze te structureren."></p> - -<p>De reden hiervoor is simpel: er staan geen elementen in om de inhoud te structureren, dus weet de browser niet wat een kop is en wat een paragraaf. En bovendien is er dit:</p> - -<ul> - <li>Gebruikers die een webpagina bekijken, hebben de neiging die snel te scannen op zoek naar relevante inhoud, vaak door eerst slechts de koppen te lezen. (Gewoonlijk <a class="external external-icon" href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">brengen we slechts een zeer korte tijd door op een webpagina</a>.) Als ze in een paar seconden niets nuttigs kunnen vinden, zullen ze waarschijnlijk gefrustreerd raken en ergens anders naartoe gaan.</li> - <li>Zoekmachines die je pagina indexeren beschouwen de inhoud van de koppen als belangrijke sleutelwoorden die de positie van de pagina in de ranglijsten van de zoekresultaten beïnvloeden. Zonder koppen zal je pagina zwak presteren wat de {{glossary("SEO")}} (<em>Search Engine Optimization</em>, "zoekmachine-optimalisatie") betreft.</li> - <li>Mensen met een ernstige visuele beperking lezen vaak geen webpagina's; in plaats daarvan luisteren ze ernaar. Dit wordt mogelijk gemaakt door een <a class="external external-icon" href="https://nl.wikipedia.org/wiki/Schermlezer">schermlezer</a>. Deze software verschaft snelle toegang tot een tekstinhoud. Een van de gebruikte technieken houdt in dat een overzicht van het document gegeven wordt door de koppen voor te lezen, zodat de gebruikers de informatie die ze nodig hebben snel kunnen vinden. Als er geen koppen zijn, worden ze gedwongen om het volledige document hardop te laten voorlezen.</li> - <li>Om inhoud op te maken met {{glossary("CSS")}}, of om interessante dingen met {{glossary("JavaScript")}} te doen, is het nodig om de relevante inhoud in elementen in te bedden zodat CSS/JavaScript de inhoud doelgericht kan benaderen.</li> -</ul> - -<p>Het is dus nodig om onze inhoud structureel op te maken.</p> - -<h3 id="Actief_leren_Onze_inhoud_structuur_geven">Actief leren: Onze inhoud structuur geven</h3> - -<p>We vallen direct met de deur in huis met een live voorbeeld. Voeg in het voorbeeld hieronder elementen aan de ruwe tekst in het <em>Invoer</em>-veld toe, zodat die als een kop en twee paragrafen in het <em>Uitvoer</em>-veld verschijnt.</p> - -<p>Als je een fout maakt, kun je altijd op <em>Maak ongedaan</em> drukken. Als je vastraakt, gebruik dan de <em>Toon oplossing</em>-knop om het antwoord te zien.</p> - -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><h2>Invoer</h2> -<textarea id="code" class="input">Mijn korte verhaal - -Ik ben een politievrouw en mijn naam is Chris. - -Mijn benen zijn van karton en ik ben getrouwd met een vis.</textarea> -<h2>Uitvoer</h2> -<div class="output"></div> -<div class="controls"> - <input id="reset" type="button" value="Maak ongedaan" /> - <input id="solution" type="button" value="Toon oplossing" /> -</div> -</pre> - -<pre class="brush: css">body { - font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; -} - -.input, .output { - width: 90%; - height: 8em; - padding: 10px; - border: 1px solid #0095dd; - overflow: auto; -} - -button { - padding: 10px 10px 10px 0; -} -</pre> - -<pre class="brush: js">var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var code = textarea.value; -var output = document.querySelector(".output"); -var solution = document.getElementById("solution"); - -function drawOutput() { - output.innerHTML = textarea.value; -} - -reset.addEventListener("click", function() { - textarea.value = code; - drawOutput(); -}); - -solution.addEventListener("click", function() { -textarea.value = '<h1>Mijn korte verhaal</h1>\n<p>Ik ben een politievrouw en mijn naam is Chris.</p>\n<p>Mijn benen zijn van karton en ik ben getrouwd met een vis.</p>'; - drawOutput(); -}); - -textarea.addEventListener("input", drawOutput); -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p> - -<h3 id="Waarom_hebben_we_semantiek_nodig">Waarom hebben we semantiek nodig?</h3> - -<p>Overal om ons heen vertrouwen we op semantiek – we rekenen op eerdere ervaringen die ons vertellen wat de functie van een alledaags object is; als we iets zien, weten we wat zijn functie zal zijn. Dus we verwachten bijvoorbeeld dat een rood verkeerslicht "stop" betekent en een groen verkeerslicht "vertrek". De dingen kunnen zeer snel ingewikkeld worden als de foute semantiek wordt toegepast. (Zijn er landen die rood gebruiken om "vertrek" uit te drukken? Ik hoop van niet.)</p> - -<p>In dezelfde geest moeten we er zeker van zijn dat we de juiste elementen gebruiken om betekenis aan onze tekst, een functie of weergave te geven. In deze context is het {{htmlelement("h1")}}-element dus ook een semantisch element, het geeft aan de betreffende tekst de rol (of betekenis) van "een hoofdtitel van je pagina".</p> - -<pre class="brush: html"><h1>Dit is een belangrijke hoofdtitel</h1></pre> - -<p>Standaard zal de browser dit element een groter lettertype geven om het er als een kop te laten uitzien (alhoewel je het met CSS kunt stylen om het elke look te geven die je wil). Nog belangrijker is dat zijn semantische waarde op meer dan één manier zal worden gebruikt, door bijvoorbeeld zoekmachines en schermlezers (zoals hierboven vermeld).</p> - -<p>Aan de andere kant kun je elk element er als een hoofdtitel laten <em>uitzien</em>. Bekijk het volgende eens:</p> - -<pre class="brush: html"><span style="font-size: 32px; margin: 21px 0;">Is dit een hoofdtitel?</span></pre> - -<p>Dit is een {{htmlelement("span")}}-element. Er steekt geen semantiek in. Je gebruikt het element om inhoud te omhullen als je er CSS op wil toepassen (of om er iets mee te doen met JavaScript) zonder er extra betekenis aan te geven. (Je zult er later in de cursus meer over leren.) We hebben wat CSS op het element toegepast om het er als een hoofdtitel te laten uitzien, maar aangezien het geen semantische waarde heeft, zal het geen van de hierboven beschreven extra voordelen krijgen. Het is een goed idee om het relevante HTML-element voor die taak te gebruiken.</p> - -<h2 id="Lijsten">Lijsten</h2> - -<p>Nu gaan we onze aandacht op lijsten richten. Lijsten zijn overal in ons leven – van je boodschappenlijst tot de lijst met aanwijzingen die je onbewust elke dag gebruikt om naar huis te geraken, tot de lijsten met instructies die je in deze handleidingen volgt! Lijsten zijn ook overal op het Web, en er bestaan drie verschillende types.</p> - -<h3 id="Ongeordend">Ongeordend</h3> - -<p>Ongeordende lijsten worden gebruikt om lijsten op te maken waarbij de volgorde van de onderdelen niet belangrijk is – als voorbeeld nemen we een boodschappenlijst.</p> - -<pre>melk -eieren -brood -hummus</pre> - -<p>Elke ongeordende lijst begint met een {{htmlelement("ul")}}-element – je plaatst het rond alle lijstonderdelen:</p> - -<pre class="brush: html"><ul> -melk -eieren -brood -hummus -</ul></pre> - -<p>De laatste stap is om elk lijstonderdeel in een {{htmlelement("li")}}-element in te pakken:</p> - -<pre class="brush: html"><ul> - <li>melk</li> - <li>eieren</li> - <li>brood</li> - <li>hummus</li> -</ul></pre> - -<h4 id="Actief_leren_Een_ongeordende_lijst_opmaken">Actief leren: Een ongeordende lijst opmaken</h4> - -<p>Probeer het live voorbeeld hieronder te bewerken om zo je eigen ongeordende lijst te maken.</p> - -<div class="hidden"> -<h6 id="Playable_code_2">Playable code</h6> - -<pre class="brush: html"><h2>Invoer</h2> -<textarea id="code" class="input">melk -eieren -brood -hummus</textarea> -<h2>Uitvoer</h2> -<div class="output"></div> -<div class="controls"> - <input id="reset" type="button" value="Ongedaan maken" /> - <input id="solution" type="button" value="Toon oplossing" /> -</div> -</pre> - -<pre class="brush: css">body { - font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; -} - -.input, .output { - width: 90%; - height: 6em; - padding: 10px; - border: 1px solid #0095dd; - overflow: auto; -} - -button { - padding: 10px 10px 10px 0; -} -</pre> - -<pre class="brush: js">var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var code = textarea.value; -var output = document.querySelector(".output"); -var solution = document.getElementById("solution"); - -function drawOutput() { - output.innerHTML = textarea.value; -} - -reset.addEventListener("click", function() { - textarea.value = code; - drawOutput(); -}); - -solution.addEventListener("click", function() { -textarea.value = '<ul>\n<li>melk</li>\n<li>eieren</li>\n<li>brood</li>\n<li>hummus</li>\n</ul>'; - drawOutput(); -}); - -textarea.addEventListener("input", drawOutput); -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code_2', 700, 400) }}</p> - -<h3 id="Geordend">Geordend</h3> - -<p>Geordende lijsten zijn lijsten waarvan de volgorde van de onderdelen <em>wel</em> belangrijk is – als voorbeeld nemen we een reeks instructies om de weg mee uit te leggen:</p> - -<pre>Rijd naar het einde van de weg -Sla rechtsaf -Rijd rechtdoor bij de eerste twee rotondes -Sla linksaf bij de derde rotonde -De school staat 300 meter verder aan je rechterkant</pre> - -<p>De opmaakstructuur is gelijk aan die voor ongeordende lijsten, behalve dat je de lijstonderdelen in een {{htmlelement("ol")}}-element (i.p.v. een <code><ul></code>) moet inpakken:</p> - -<pre class="brush: html"><ol> - <li>Rijd naar het einde van de weg</li> - <li>Sla rechtsaf</li> - <li>Rijd rechtdoor bij de eerste twee rotondes</li> - <li>Sla linksaf bij de derde rotonde</li> - <li>De school staat 300 meter verder aan je rechterkant</li> -</ol></pre> - -<h4 id="Actief_leren_Een_geordende_lijst_opmaken">Actief leren: Een geordende lijst opmaken</h4> - -<p>Bewerk het live voorbeeld hieronder om je eigen geordende lijst te maken.</p> - -<div class="hidden"> -<h6 id="Playable_code_3">Playable code</h6> - -<pre class="brush: html"><h2>Invoer</h2> -<textarea id="code" class="input">Rijd naar het einde van de weg -Sla rechtsaf -Rijd rechtdoor bij de eerste twee rotondes -Sla linksaf bij de derde rotonde -De school staat 300 meter verder aan je rechterkant</textarea> -<h2>Output</h2> -<div class="output"></div> -<div class="controls"> - <input id="reset" type="button" value="Ongedaan maken" /> - <input id="solution" type="button" value="Oplossing tonen" /> -</div> -</pre> - -<pre class="brush: css">body { - font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; -} - -.input, .output { - width: 90%; - height: 8em; - padding: 10px; - border: 1px solid #0095dd; - overflow: auto; -} - -button { - padding: 10px 10px 10px 0; -} -</pre> - -<pre class="brush: js">var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var code = textarea.value; -var output = document.querySelector(".output"); -var solution = document.getElementById("solution"); - -function drawOutput() { - output.innerHTML = textarea.value; -} - -reset.addEventListener("click", function() { - textarea.value = code; - drawOutput(); -}); - -solution.addEventListener("click", function() { -textarea.value = '<ol>\n<li>Rijd naar het einde van de weg</li>\n<li>Sla rechtsaf</li>\n<li>Rijd rechtdoor bij de eerste twee rotondes</li>\n<li>Sla linksaf bij de derde rotonde</li>\n<li>De school staat 300 meter verder aan je rechterkant</li>\n</ol>'; - drawOutput(); -}); - -textarea.addEventListener("input", drawOutput); -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code_3', 700, 500) }}</p> - -<h3 id="Actief_leren_Maak_onze_receptpagina_op">Actief leren: Maak onze receptpagina op</h3> - -<p>Oké, op dit punt beschik je over alle informatie die je nodig hebt om onze voorbeeldpagina op te maken. Je kunt ervoor kiezen om een locale kopie van ons <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> startbestand op te slaan en het werk daar te doen, of je kunt het in het bewerkbare voorbeeld hieronder doen. Het is waarschijnlijk beter om het locaal te doen, want dan kun je je werk opslaan. Als je het in het bewerkbare voorbeeld doet, zal het verloren gaan als je de pagina later heropent. Beide hebben voor- en nadelen.</p> - -<div class="hidden"> -<h6 id="Playable_code_4">Playable code</h6> - -<pre class="brush: html"><h2>Input</h2> -<textarea id="code" class="input">Snel recept om hummus te maken - - Met dit recept maak je snel lekkere hummus, zonder gedoe. Het is een aangepaste versie van een aantal recepten die ik door de jaren heen heb gelezen. - - Hummus is een verrukkelijk dik smeersel, dat vaak in Griekse en Midden-Oosterse gerechten wordt gebruikt. Het is zeer lekker met sla, gegrild vlees en pitabroodjes. - - Ingrediënten - - 1 blik (400 g) kikkererwten (garbanzobonen) - 175 g tahin - 6 zongedroogde tomaten - een halve rode peper - een snufje cayennepeper - 1 teentje knoflook - een scheutje olijfolie - - Bereiding - - Pel de knoflook en hak in grove stukken. - Verwijder alle zaden en de steel van de peper en hak in grove stukken. - Doe alle ingrediënten in een keukenmachine. - Pureer alles tot een pasta. - Als je grove hummus met stukjes wil, pureer dan heel even. - Als je gladde hummus wil, pureer dan wat langer. - - Voor een andere smaak kun je de volgende ingrediënten toevoegen: een beetje citroen en koriander, chilipeper, limoen en jalapenopeper, harissa en munt, of spinazie en fetakaas. Experimenteer en ontdek wat jij lekker vindt. - - Bewaring - - Koel de bereide hummus in een luchtdichte bak. De hummus blijft tot ongeveer een week na de bereidingsdatum eetbaar. Als hij begint te 'bruisen', moet je hem echt weggooien. - - Hummus is ook geschikt om in te vriezen; je zou hem binnen een paar maanden moeten ontdooien en gebruiken.</textarea> -<h2>Output</h2> -<div class="output"></div> -<div class="controls"> - <input id="reset" type="button" value="Maak ongedaan" /> - <input id="solution" type="button" value="Toon oplossing" /> -</div> -</pre> - -<pre class="brush: css">body { - font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; -} - -.input, .output { - width: 90%; - height: 8em; - padding: 10px; - border: 1px solid #0095dd; - overflow: auto; -} - -button { - padding: 10px 10px 10px 0; -} -</pre> - -<pre class="brush: js">var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var code = textarea.value; -var output = document.querySelector(".output"); -var solution = document.getElementById("solution"); - -function drawOutput() { - output.innerHTML = textarea.value; -} - -reset.addEventListener("click", function() { - textarea.value = code; - drawOutput(); -}); - -solution.addEventListener("click", function() { -textarea.value = '<h1>Snel hummusrecept</h1>\n\n<p>Met dit recept maak je snel lekkere hummus, zonder gedoe. Het is een aangepaste versie van een aantal recepten die ik door de jaren heen heb gelezen.</p>\n\n<p>Hummus is een verrukkelijk dik smeersel, dat vaak in Griekse en Midden-Oosterse gerechten wordt gebruikt. Het is zeer lekker met sla, gegrild vlees en pitabroodjes.</p>\n\n<h2>Ingrediënten</h2>\n\n<ul>\n<li>1 blik (400 g) kikkererwten (garbanzobonen)</li>\n<li>175 g tahin</li>\n<li>6 zongedroogde tomaten</li>\n<li>een halve rode peper</li>\n<li>een snufje cayennepeper</li>\n<li>1 teentje knoflook</li>\n<li>een scheutje olijfolie</li>\n</ul>\n\n<h2>Bereiding</h2>\n\n<ol>\n<li>Pel de knoflook en hak in grove stukken.</li>\n<li>Verwijder alle zaden en de steel van de peper en hak in grove stukken.</li>\n<li>Doe alle ingrediënten in een keukenmachine.</li>\n<li>Pureer alles tot een pasta.</li>\n<li>Als je grove hummus met stukjes wil, pureer dan heel even.</li>\n<li>Als je gladde hummus wil, pureer dan wat langer.</li>\n</ol>\n<p>Voor een andere smaak kun je de volgende ingrediënten toevoegen: een beetje citroen en koriander, chilipeper, limoen en jalapenopeper, harissa en munt, of spinazie en fetakaas. Experimenteer en ontdek wat jij lekker vindt.</p>\n\n<h2>Bewaring</h2>\n\n<p>Koel de bereide hummus in een luchtdichte bak. De hummus blijft tot ongeveer een week na de bereidingsdatum eetbaar. Als hij begint te \'bruisen\', moet je hem echt weggooien.</p>\n\n<p>Hummus is ook geschikt om in te vriezen; je zou hem binnen een paar maanden moeten ontdooien en gebruiken.</p>'; - drawOutput(); -}); - -textarea.addEventListener("input", drawOutput); - -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code_4', 700, 500) }}</p> - -<p>Als je vastraakt, kun je altijd op <em>Toon oplossing</em> drukken of ons <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> voorbeeld bekijken dat je op onze github-repo vindt.</p> - -<h3 id="Lijsten_nesten">Lijsten nesten</h3> - -<p>Het is helemaal prima om de ene lijst in een andere te nesten. Je wil wellicht wat subonderdelen onder een hoogste-niveau-lijstonderdeel hebben. Laten we de tweede lijst van ons receptvoorbeeld bekijken:</p> - -<pre class="brush: html"><ol> - <li>Pel de knoflook en hak in grove stukken.</li> - <li>Verwijder alle zaden en de steel van de peper en hak in grove stukken.</li> - <li>Doe alle ingrediënten in een keukenmachine.</li> - <li>Pureer alles tot een pasta.</li> - <li>Als je grove hummus met stukjes wil, pureer dan heel even.</li> - <li>Als je gladde hummus wil, pureer dan wat langer.</li> -</ol></pre> - -<p>Aangezien er een nauw verband is tussen de laatste twee onderdelen en hetgene dat eraan voorafgaat (ze lezen als sub-instructies of keuzes bij de voorafgaande instructie), kan het logisch zijn om ze in hun eigen ongeordende lijst te nesten, en die lijst in het huidige vierde lijstelement te plaatsen. Dat ziet er dan zo uit:</p> - -<pre class="brush: html"><ol> - <li>Pel de knoflook en hak in grove stukken.</li> - <li>Verwijder alle zaden en de steel van de peper en hak in grove stukken.</li> - <li>Doe alle ingrediënten in een keukenmachine.</li> - <li>Pureer alles tot een pasta. - <ul> - <li>Als je grove hummus met stukjes wil, pureer dan heel even.</li> - <li>Als je gladde hummus wil, pureer dan wat langer.</li> - </ul> - </li> -</ol></pre> - -<p>Ga naar het vorige "Actief leren"-voorbeeld en werk de tweede lijst op deze manier bij.</p> - -<h2 id="Nadruk_en_belangrijkheid">Nadruk en belangrijkheid</h2> - -<p>In menselijke taal benadrukken we vaak bepaalde woorden om de betekenis van een zin te veranderen, en willen we vaak bepaalde woorden als belangrijk of op een bepaalde manier anders markeren. HTML bevat diverse semantische elementen die ons in staat stellen om tekstuele inhoud met zulke effecten op te maken. In deze sectie gaan we een paar van de meest gebruikelijke bekijken.</p> - -<h3 id="Nadruk">Nadruk</h3> - -<p>Als we in gesproken taal ergens de nadruk op willen leggen, <em>beklemtonen</em> we bepaalde woorden, waarmee we op subtiele wijze de betekenis van wat we zeggen veranderen. In geschreven taal kunnen we op vergelijkbare wijze woorden benadrukken door ze cursief te maken. De twee volgende zinnen hebben bijvoorbeeld verschillende betekenissen.</p> - -<p>Ik ben blij dat je niet te laat was.</p> - -<p>Ik ben <em>blij</em> dat je niet <em>te laat</em> was.</p> - -<p>De eerste zin klinkt oprecht opgelucht omdat de persoon niet te laat was. De tweede zin klinkt daarentegen sarcastisch of passief-aggressief; hij drukt irritatie uit omdat de persoon een beetje te laat aankwam.</p> - -<p>In HTML gebruiken we het {{htmlelement("em")}}-element (<em>emphasis</em>, nadruk) om zulke gevallen te markeren. Behalve dat het het document interessanter om te lezen maakt, wordt dit element ook herkend door schermlezers en met een andere intonatie uitgesproken. Browsers stylen het element standaard als cursief, maar je kunt het beter niet gebruiken puur voor cursivering. Gebruik daarvoor een {{htmlelement("span")}}-element en wat CSS, of wellicht een {{htmlelement("i")}}-element (zie hieronder).</p> - -<pre class="brush: html"><p>Ik ben <em>blij</em> dat je niet <em>te laat</em> was.</p></pre> - -<h3 id="Zeer_belangrijke_woorden">Zeer belangrijke woorden</h3> - -<p>Om belangrijke woorden te benadrukken, hebben we de neiging om ze in gesproken taal te beklemtonen en om ze in geschreven taal <strong>vet</strong> te maken. Bijvoorbeeld:</p> - -<p>Deze vloeistof is <strong>uiterst toxisch</strong>.</p> - -<p>Ik reken op je. <strong>Wees niet</strong> te laat!</p> - -<p>In HTML gebruiken we het {{htmlelement("strong")}}-element (<em>strong importance</em>, sterke belangrijkheid) om zulke gevallen op te maken. Behalve dat het het document nuttiger, wordt ook dit element herkend door schermlezers en met een andere intonatie uitgesproken. Browsers stylen het element standaard als vette tekst, maar je kunt het beter niet gebruiken puur om vette styling te verkrijgen. Daarvoor kun je beter een {{htmlelement("span")}}-element en wat CSS gebruiken, of wellicht een {{htmlelement("b")}}-element (zie hieronder).</p> - -<pre class="brush: html"><p>Deze vloeistof is <strong>uiterst toxisch</strong>.</p> - -<p>Ik reken op je. <strong>Wees niet</strong> te laat!</p></pre> - -<p>Indien gewenst kun je belangrijkheid en nadruk ook in elkaar nesten:</p> - -<pre class="brush: html"><p>Deze vloeistof is <strong>uiterst toxisch</strong> – -als je hem drinkt, <strong>kun je <em>sterven</em></strong>.</p></pre> - -<h3 id="Actief_leren_Laten_we_belangrijk_zijn!">Actief leren: Laten we belangrijk zijn!</h3> - -<p>In deze sectie geven we een bewerkbaar voorbeeld. Probeer nadruk en grote belangrijkheid toe te voegen aan de woorden waarvan je denkt dat die ze nodig hebben, gewoon om wat te oefenen.</p> - -<div class="hidden"> -<h6 id="Playable_code_5">Playable code</h6> - -<pre class="brush: html"><h2>Input</h2> -<textarea id="code" class="input"><h1>Belangrijk bericht</h1> - -<p>Op zondag 9 januari 2010 werd een bende goths gezien die -meerdere tuinkabouters stalen uit een winkelcentrum in de -binnenstad van Milwaukee. Ze droegen allemaal groene jumpsuits -en onnozele hoedjes, en leken zich uitstekend te amuseren. -Als iemand enige informatie heeft over dit incident, gelieve -nu de politie te contacteren.</p></textarea> -<h2>Output</h2> -<div class="output"></div> -<div class="controls"> - <input id="reset" type="button" value="Maak ongedaan" /> - <input id="solution" type="button" value="Toon oplossing" /> -</div> -</pre> - -<pre class="brush: css">body { - font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; -} - -.input, .output { - width: 90%; - height: 8em; - padding: 10px; - border: 1px solid #0095dd; - overflow: auto; -} - -button { - padding: 10px 10px 10px 0; -} -</pre> - -<pre class="brush: js">var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var code = textarea.value; -var output = document.querySelector(".output"); -var solution = document.getElementById("solution"); - -function drawOutput() { - output.innerHTML = textarea.value; -} - -reset.addEventListener("click", function() { - textarea.value = code; - drawOutput(); -}); - -solution.addEventListener("click", function() { - textarea.value = '<h1>Belangrijk bericht</h1>\n<p>Op <strong>zondag 9 januari 2010</strong> werd een bende <em>goths</em> gezien die <strong><em>meerdere</em> outers</strong> stalen uit een winkelcentrum in de binnenstad van <strong>Milwaukee</strong>. Ze droegen allemaal <em>groene jumpsuits</em> en <em>onnozele hoedjes</em>, en leken zich uitstekend te amuseren. Als iemand <strong>enige</strong> informatie heeft over dit incident, gelieve <strong>nu</strong> de politie te contacteren.</p>'; - drawOutput(); -}); - -textarea.addEventListener("input", drawOutput); -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code_5', 700, 500) }}</p> - -<h3 id="Cursief_vet_onderstrepen...">Cursief, vet, onderstrepen...</h3> - -<p>De elementen die we tot nu toe hebben besproken, hebben duidelijk omschreven semantische waarden. De situatie rond {{htmlelement("b")}}, {{htmlelement("i")}} en {{htmlelement("u")}} is iets ingewikkelder. Ze onstonden zodat mensen tekst vet, cursief of onderstreept konden maken, in een tijdperk dat CSS nog nauwelijks of helemaal niet ondersteund werd. Dit soort elementen, die enkel de presentatie en niet de semantiek beïnvloeden, staan bekend als <strong>formele elementen</strong> (<em>presentational elements</em> in het Engels) en kunnen beter niet meer gebruikt worden, omdat, zoals we reeds hebben gezien, semantiek belangrijk is voor de toegankelijkheid, SEO, enz.</p> - -<p>HTML5 verschafte nieuwe definities voor <code><b></code>, <code><i></code> en <code><u></code> met nieuwe nogal verwarrende semantische rollen.</p> - -<p>Dit is de beste vuistregel: het is waarschijnlijk geschikt om <code><b></code>, <code><i></code> of <code><u></code> te gebruiken als je een betekenis wil overbrengen die traditioneel wordt toegekend aan vette, cursieve of onderstreepte tekst, op voorwaarde dat er geen geschikter element is. Het is echter van cruciaal belang dat de toegankelijkheid nooit uit het oog verloren wordt. Het concept cursivering is niet erg nuttig voor mensen die een schermlezer gebruiken, of voor mensen die een ander schrijfsysteem dan het Latijnse alfabet gebruiken.</p> - -<ul> - <li>{{HTMLElement('i')}} wordt gebruikt om een betekenis over te brengen die traditioneel met cursieve tekst wordt weergegeven: woorden uit een andere taal, taxonomische aanduidingen, technische termen, een gedachte...</li> - <li>{{HTMLElement('b')}} wordt gebruikt om een betekenis over te brengen die traditioneel met vette tekst wordt weergegeven: sleutelwoorden, productnamen, de eerste zin van een hoofdstuk...</li> - <li>{{HTMLElement('u')}} wordt gebruikt om een betekenis over te brengen die traditioneel met onderstreepte tekst wordt weergegeven: eigennamen, fout gespelde woorden...</li> -</ul> - -<div class="note"> -<p>Een vriendelijke waarschuwing over onderstreping: <strong>Mensen associëren onderstreping sterk met hyperlinks.</strong> Daarom kun je op het Web het beste slechts hyperlinks onderstrepen. Gebruik het <code><u></code>-element als het semantisch geschikt is, maar overweeg CSS te gebruiken om de standaard onderstreping te veranderen in iets dat geschikter is voor het Web. Het voorbeeld hieronder illustreert hoe je dat kunt doen.</p> -</div> - -<pre class="brush: html"><!-- wetenschappelijke benamingen --> -<p> - De robijnkeelkolibrie (<i>Archilochus colubris</i>) - is de meest voorkomende kolibrie in het Oosten van Noord-Amerika. -</p> - -<!-- vreemde woorden --> -<p> - Het menu was een zee van exotische woorden zoals <i lang="uk-latn">vatrushka</i>, - <i lang="id">nasi goreng</i> en <i lang="fr">soupe à l'oignon</i>. -</p> - -<!-- een bekende spelfout --> -<p> - Op een dag zal ik beter leren <u>spelen</u>. -</p> - -<!-- Sleutelwoorden in een reeks instructies markeren --> -<ol> - <li> - <b>Snijd</b> twee sneden van het brood. - </li> - <li> - <b>Leg</b> een schijfje tomaat en een blaadje - sla tussen de sneetjes brood. - </li> -</ol></pre> - -<h2 id="Samenvatting">Samenvatting</h2> - -<p>Voorlopig is dit het! Met dit artikel zou je nu een goed idee moeten hebben van de methodes waarmee je een tekst in HTML kunt opmaken, en heeft je laten kennismaken met enkele van de belangrijkste elementen op dit gebied. Er bestaan veel meer semantische elementen die we in dit artikel zouden kunnen bespreken, en we zullen er veel meer zien in 'Meer Semantische Elementen' later in deze cursus. In het volgende artikel zullen we in detail bekijken hoe we <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">hyperlinks creëren</a>, misschien wel het belangrijkste element op het Web.</p> - -<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/nl/learn/html/introduction_to_html/index.html b/files/nl/learn/html/introduction_to_html/index.html deleted file mode 100644 index 2d3a59d5d5..0000000000 --- a/files/nl/learn/html/introduction_to_html/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Een Inleiding op HTML -slug: Learn/HTML/Introduction_to_HTML -tags: - - Inleiding op HTML - - Structuur - - semantisch -translation_of: Learn/HTML/Introduction_to_HTML ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">{{glossary("HTML")}} is, in zijn kern, een vrij eenvoudige taal. Hij bestaat uit <a href="/nl/docs/Glossary/Element">elementen</a> die kunnen worden toegepast op stukken tekst om hen een nieuwe betekenis in een document te geven (is de tekst een paragraaf? een ongeordende lijst? een onderdeel van een tabel?). Met HTML kan je een document ook in logische secties structureren (heeft het een koptekst? drie kolommen met inhoud? een navigatiemenu?) en je kan inhoud zoals afbeeldingen en video's in een pagina integreren. Deze module is een inleiding op de eerste twee aspecten van HTML en introduceert fundamentele begrippen en syntaxis, die je nodig hebt om HTML te begrijpen.</p> - -<h2 id="Minimum_vereisten">Minimum vereisten</h2> - -<p>Om met deze module te beginnen, hoef je geen HTML te kennen maar je zou toch wel een beetje vertrouwd moeten zijn met een computer en je zou het web passief moeten kunnen gebruiken (i.e. je kan websites bekijken en hun inhoud consumeren.) Je zou een miminimale werkomgeving moeten hebben opgezet zoals is aangegeven in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Basissoftware installeren</a>. Het is ook nodig dat je begrijpt hoe je bestanden kan maken en beheren, zoals is uitgelegd in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Omgaan met bestanden</a>. Beide artikelen zijn hoofdstukken in onze module voor complete beginners, <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Van start met het web</a>. </p> - -<div class="note"> -<p><strong>Opmerking</strong>: Als je met een computer, tablet of een ander toestel werkt en je kan er geen bestanden mee creëren, kan je de (meeste) codevoorbeelden in een online programma zoals <a href="http://jsbin.com/">JSBin</a> of <a href="https://thimble.mozilla.org/">Thimble</a> schrijven.</p> -</div> - -<h2 id="Gidsen">Gidsen</h2> - -<p>Deze module bevat een aantal artikelen die de basistheorie van HTML bespreken en heel wat gelegenheden biedt om je vaardigheden uit te testen.</p> - -<dl> - <dt><a href="/nl/docs/Learn/HTML/Introduction_to_HTML/Getting_started" style="font-weight: 700;">Met HTML beginnen</a></dt> - <dd> - <p>Dit artikel helpt je op weg met de basisprincipes van HTML — we definiëren elementen, attributen en alle andere belangrijke begrippen waarover je misschien al hebt gelezen en hoe ze in de taal passen. We tonen je ook hoe een HTML-element is gestructureerd en verklaren een aantal belangrijke basiseigenschappen van de taal. Terwijl we dat allemaal doen, spelen we met HTML om je interesse op te wekken! </p> - </dd> -</dl> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Wat zit er in het hoofd? Metadata in HTML</a></dt> - <dd>Het hoofd van een HTML-document is het deel dat niet in een webbrowser wordt getoond als de pagina wordt geladen. Het bevat informatie zoals bijvoorbeeld de pagina {{htmlelement("title")}}, links naar {{glossary("CSS")}} (als je je HTML-inhoud met CSS wil stijlen, links naar je eigen favicons en metadata (dit is data over de HTML, bijv. wie de HTML geschreven heeft en belangrijke sleutelwoorden die het document beschrijven).</dd> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML tekst : basisprincipes</a> </dt> - <dd>HTML vervult een aantal taken. Hij geeft onder andere betekenis aan een tekst (ook gekend als <strong>semantiek</strong>) zodat de browser weet hoe de tekst correct moet worden weergegeven. In dit artikel leren we hoe we HTML kunnen gebruiken om een blok tekst op te delen in een structuur van hoofdingen en paragrafen, hoe we woorden moeten benadrukken, hoe we lijsten moeten maken en nog veel meer.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Hyperlinks creëren</a></dt> - <dd>Hyperlinks zijn echt belangrijk — zij zijn wat van het Web een web maakt. Dit artikel toont welke syntaxis je nodig hebt om een hyperlink te maken en bespreekt de beste manier om de theorie over hyperlinks toe te passen.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Gevorderde tekstopmaak</a></dt> - <dd>Er zijn vele andere elementen in HTML om tekst mee te formatteren waar we in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML tekst: de basisprincipes</a> niet aan toe zijn gekomen. De elementen in dit artikel zijn niet zo goed gekend maar toch wel nuttig om te leren. Je zal leren hoe je citaten kunt opmaken, beschrijvende lijsten, computer code en andere gerelateerde tekst, subscript en superscript, contactinformatie enz.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document- en websitestructuur</a></dt> - <dd>Met HTML kan je individuele delen van je pagina definiëren (zoals een "paragraaf" of een "afbeelding") maar behalve dat wordt HTML ook gebruikt om gebieden van je website te definiëren (zoals "de koptekst", "het navigatiemenu", "de kolom met de hoofdinhoud"). Dit artikel bekijkt hoe we de basisstructuur van je website kunnen plannen en de HTML schrijven om die structuur weer te geven.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">HTML debuggen</a></dt> - <dd>HTML schrijven is prima, maar wat als er iets fout gaat en je komt er maar niet achter waar de fout in je code zit? Dit artikel is een inleiding op een aantal instrumenten die je kunnen helpen.</dd> -</dl> - -<h2 id="Evalutie">Evalutie</h2> - -<p>De volgende oefeningen dienen als test van de HTML-basisbegrippen die in de gidsen hierboven zijn doorgenomen.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">De opmaak van een brief</a></dt> - <dd>Vroeg of laat leren we allemaal hoe we een brief moeten schrijven. Het is ook een nuttig voorbeeld waarmee we je tekstopmaak-vaardigheden kunnen testen! In deze test zal je dus een brief krijgen om op te maken.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">De inhoud van een pagina structureren</a></dt> - <dd>Deze oefening evalueert je capaciteit om een eenvoudige inhoud op een pagina te structureren met HTML. De pagina bevat een koptekst, een voettekst, een navigatiemenu, de hoofdinhoud en een zijbalk.</dd> -</dl> - -<h2 id="Zie_ook">Zie ook</h2> - -<dl> - <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Web literacy basics 1</a></dt> - <dd>Dit is een uitstekende Mozilla foundation cursus. Vele vaardigheden die in de <em>Met HTML beginnen</em> module werden besproken worden hierin onderzocht en getest. Studenten raken vertrouwd met het lezen, schrijven en participeren op het web in deze zesdelige module. Ontdek de fundamenten van het web door productie en samenwerking.</dd> -</dl> diff --git a/files/nl/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/nl/learn/html/introduction_to_html/marking_up_a_letter/index.html deleted file mode 100644 index aaa98f0092..0000000000 --- a/files/nl/learn/html/introduction_to_html/marking_up_a_letter/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: De opmaak van een brief -slug: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter -translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter -original_slug: Learn/HTML/Introduction_to_HTML/Opmaak_van_een_brief ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</div> - -<p class="summary">Vroeg of laat leren we allemaal hoe we een brief moeten schrijven. Deze vaardigheid is ook een nuttig voorbeeld waarmee we onze nieuwe vaardigheden kunnen uittesten. In deze evaluatie zal je een brief krijgen die je moet opmaken. Je zal je kennis over tekstopmaak kunnen gebruiken (zowel op basis- als op gevorderd niveau). Je kennis over hyperlinks zal ook van pas komen en we zullen ook je vertrouwdheid met een aantal HTML <code><head></code> inhouden testen.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Vereisten:</th> - <td>Vooraleer je deze evaluatie uitprobeert zou je de volgende hoofdstukken moeten hebben doorgewerkt: <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Beginnen met HTML</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Wat steek er in het hoofd? Metadata in HTML</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML tekst: basisprincipes</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Hyperlinks maken</a> en <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Gevorderde tekstopmaak</a>.</td> - </tr> - <tr> - <th scope="row">Doel:</th> - <td>Je vaardigheden op het gebied van HTML tekstopmaak en hyperlinks uittesten (op basis- en gevorderd niveau) en de evaluatie van je kennis over het HTML <head>.</td> - </tr> - </tbody> -</table> - -<h2 id="Startpunt">Startpunt</h2> - -<p>Om met deze evaluatie van start te kunnen gaan, heb je de <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt">ruwe tekst die je gaat opmaken</a> nodig en de <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt">CSS die je HTML zal bevatten</a>. Creëer een nieuw <code>.html</code> bestand in je broncodebewerker. Daarin ga je je werk doen (een alternatief voor de broncodeverwerker is een site zoals <a class="external external-icon" href="http://jsbin.com/">JSBin</a> of <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a>)</p> - -<h2 id="Instructies">Instructies</h2> - -<p>Je taak voor dit project is de opmaak van een brief die op het intranet van een universiteit zal worden geplaatst. De brief is een antwoord van een onderzoeker aan een student die zijn doctoraat wil doen. Het gaat over de aanvraag van de doctoraatsstudent om aan de universiteit te kunnen werken. </p> - -<p>Semantiek op blokniveau:</p> - -<ul> - <li>Je moet het hele document een geschikte structuur geven, inclusief het doctype en de {{htmlelement("html")}}, {{htmlelement("head")}} and {{htmlelement("body")}} elementen.</li> - <li>De brief moeten worden opgemaakt met een structuur die paragrafen en kopteksten bevat, met uitzondering van de secties die je hieronder vindt. Er is één koptekst op het hoogste niveau (de "Re:" regel) en er zijn drie kopteksten op een tweede niveau.</li> - <li>De start data van de semesters, studie-onderwerpen en de exotische dansen zouden moeten worden opgemaakt met een passende structuur om een lijst weer te geven.</li> - <li>De twee adressen kan je gewoon in paragrafen steken. Het {{htmlelement("address")}}-element is er niet voor geschikt — denk eens na over het waarom. Elke regel van de adressen moet ook op een nieuwe lijn worden geplaatst maar niet in een nieuwe paragraaf.</li> -</ul> - -<p>Inline semantiek:</p> - -<ul> - <li>De namen van de zender en de ontvanger (en "Tel" en "Email") moeten als zeer belangrijk worden opgemaakt.</li> - <li>De vier data in het document zouden door passende elementen omhuld moeten worden. Deze elementen moeten data bevatten die machine-leesbaar zijn.</li> - <li>Het eerste adres en de eerste datum in de letter krijgen een class attribuut met de waarde "ontvanger-kolom"; de CSS die je later zal toevoegen zal ervoor zorgen dat ze rechts zullen worden uitgelijnd zoals je dat ziet in de lay-out van een typische brief.</li> - <li>De vijf acroniemen/afkortingen in de brieftekst zouden zo moeten worden opgemaakt dat je kan zien waar de afkortingen/acroniemen voor staan als je er met je muis overheen glijdt.</li> - <li>De zes sub/superscripten moeten op passende wijze worden opgemaakt.</li> - <li>De symbolen die graden voorstellen, het groter-dan symbool en de symbolen die een vermenigvuldiging weergeven moeten met passende entiteitsverwijzingen.</li> - <li>Probeer ten minste twee geschikte woorden in de brieftekst met grote belangrijkheid/nadruk op te maken.</li> - <li>Je moet op twee plekken een hyperlink toevoegen. Voeg passende links met titels toe. Voor de locatie waar de link naar verwijst, gebruik je gwoon http://example.com.</li> - <li>Het motto van de universitveit moet met geschikte elementen worden opgemaakt.</li> -</ul> - -<p>Het hoofd van het document:</p> - -<ul> - <li>Als tekencodering van het document kies je utf-8 en je plaatst het in een passende meta-tag.</li> - <li>De auteur van de brief moet worden vermeldi in een geschikte meta-tag.</li> - <li>De CSS die het document zal stijlen, moet worden ingebed in een geschikte tag.</li> -</ul> - -<h2 id="Hints_en_tips">Hints en tips</h2> - -<ul> - <li>Gebruik de <a href="https://validator.w3.org/">W3C HTML validator</a> om je HTML te evalueren; je krijgt bonuspunten als hij wordt gevalideerd.</li> - <li>Je hoeft nog niets over CSS te weten om deze evaluatie te doen; al wat je moet doen is de CSS die we aanbieden in een HTML-element plaatsen.</li> -</ul> - -<h2 id="Voorbeeld">Voorbeeld</h2> - -<p>De volgende schermafbeelding toont een voorbeeld van hoe de brief er uit zou kunnen zien nadat die is opgemaakt.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/12291/letter-screengrab.png" style="border: 1px solid black; display: block; margin: 0px auto;"></p> - -<h2 id="Evaluatie">Evaluatie</h2> - -<p>Als je deze evaluatie als onderdeel van een georganiseerde cursus volgt, zou je in staat moeten zijn om je werk aan je leraar of mentor te geven zodat die er punten aan kan geven. Als je op je eentje werkt, dan kan je de puntengids vrij gemakkelijk krijgen door die op te vragen op de <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a>, of op het <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC kanaal op <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Probeer de oefening eerst uit — met valsspelen ga je niks kunnen winnen!</p> - -<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/nl/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/nl/learn/html/introduction_to_html/structuring_a_page_of_content/index.html deleted file mode 100644 index d698fa5479..0000000000 --- a/files/nl/learn/html/introduction_to_html/structuring_a_page_of_content/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: De inhoud van een webpagina structureren -slug: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content -translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content -original_slug: Learn/HTML/Introduction_to_HTML/Structureren_inhoud_van_webpagina ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> - -<p class="summary">Als je de inhoud van een pagina structureert, doe je dat met de CSS in je achterhoofd. Het is een belangrijk vaardigheid want met de CSS die je op die structuur zal toepassen, kan je een mooie lay-out kan creëren. In deze evaluatie testen we je capaciteit om te bedenken hoe een pagina er zou kunnen uit gaan zien en om geschikte semantische elementen te gebruiken zodat je bovenop die structuur een lay-out kan bouwen.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Vereisten:</th> - <td>Vooraleer je aan deze evaluatie begint zou je al de vorige hoofdstukken al moeten hebben verwerkt, vooral <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">De structuur van je document en je website</a>.</td> - </tr> - <tr> - <th scope="row">Doel:</th> - <td>We testen je kennis van webpagina-structuren en hoe je een toekomstig lay-out ontwerp in html-opmaak kan weergeven.</td> - </tr> - </tbody> -</table> - -<h2 id="Startpunt">Startpunt</h2> - -<p>Je start deze evaluatie met het <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true">zip bestand met al de hulpmiddelen om te starten</a>. Het zip-bestand bevat:</p> - -<ul> - <li>De HTML waar je structurele opmaak aan toe moeten voegen.</li> - <li>CSS om je opmaak te stijlen.</li> - <li>Afbeeldingen die op de pagina worden gebruikt.</li> -</ul> - -<p>Maak het voorbeeld op je lokale computer of gebruik een site als <a class="external external-icon" href="http://jsbin.com/">JSBin</a> of <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> om je evaluatie op uit te voeren.</p> - -<h2 id="Instructies_voor_die_project">Instructies voor die project</h2> - -<p>Voor dit project krijg je de volgende taak: je voegt structurele elementen toe aan de inhoud van de startpagina voor vogelaars. Je zorgt ervoor dat er later een lay-out op kan worden toegepast. Het krijgt de volgende elementen:</p> - -<ul> - <li>Een hoofding die de volledige breedte van de site bestrijkt. Het bevat de belangrijkste titel voor de pagina, het logo van de site en het navigatie menu. De titel en het logo zullen naast elkaar en verschijnen als de CSS erop wordt toegepast. Het navigatiemenu zal eronder worden weergegeven.</li> - <li>Een gebied voor de belangrijkste inhoud die twee kolommen bevat - één blok voor de de welkomsttekst en een zijbalk voor de thumbnails van de afbeeldingen.</li> - <li>Een voettekst die de informatie over de auteursrech en naamsvermeldingen.</li> -</ul> - -<p>Je hebt ook een elementen nodig voor:</p> - -<ul> - <li>De hoofding</li> - <li>Het navigatiemenu</li> - <li>De belangrijkste inhoud</li> - <li>De welkomsttekst</li> - <li>De zijbalk voor de afbeeldingen</li> - <li>De voettekst</li> -</ul> - -<p>Dit moet je ook nog doen:</p> - -<ul> - <li>Pas de CSS die je hebt gekregen op de webpagina toe door nog een {{htmlelement("link")}}-element toe te voegen. Dat doe je net onder degene die er al staat.</li> -</ul> - -<h2 id="Hints_en_tips">Hints en tips</h2> - -<ul> - <li>Gebruik de <a href="https://validator.w3.org/">W3C HTML validator</a> om je HTML te valideren; je krijgt bonuspunten als je HTML zo veel mogelijk wordt gevalideerd (de "googleapis" regel is een regel die wordt gebruikt om aangepaste lettertypes van Google's Font Service te importeren en die wordt niet gevalideerd. Maak je er maar geen zorgen over.)</li> - <li>Je hebt geen CSS-kennis nodig om deze evaluatie uit te voeren; je hoeft enkel de CSS die wij verschaffen in een HTML-element te plaasten.</li> - <li>De CSS die je van ons krijgt is zo ontworpen dat als de correcte structurele elementen aan de opmaak worden toegevoegd, ze met een groene kleur in de gegenereerde pagina zullen verschijnen.</li> - <li>Als je vastraakt en je hebt geen idee waar je welke elementen moet plaatsen, helpt het vaak om een eenvoudig diagram of de lay-out te tekenen en de elementen die je denkt nodig te hebben op de schets te schrijven.</li> -</ul> - -<h2 id="Voorbeeld">Voorbeeld</h2> - -<p>Devolgende schermafbeelding toont een voorbeeld van hoe de startpagina er zou kunnen uitzien nadat die werd opgemaakt.</p> - -<p><img alt='The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message' src="https://mdn.mozillademos.org/files/12449/example-page.png" style="display: block; margin: 0 auto;"></p> - -<h2 id="Evaluatie">Evaluatie</h2> - -<p>Als je deze evaluatie als onderdeel van een georganiseerde cursus volgt, zou je in staat moeten zijn om je werk aan je leraar of mentor te geven zodat die er punten aan kan geven. Als je op je eentje werkt, dan kan je de puntengids vrij gemakkelijk krijgen door die op te vragen op de <a class="external external-icon" href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a>, of op het <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC kanaal op <a class="external external-icon" href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Probeer de oefening eerst uit — met valsspelen ga je niks kunnen winnen! </p> - -<p>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/nl/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/nl/learn/html/introduction_to_html/the_head_metadata_in_html/index.html deleted file mode 100644 index 1ef57a416a..0000000000 --- a/files/nl/learn/html/introduction_to_html/the_head_metadata_in_html/index.html +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: Wat steekt er in het hoofd? Metadata in HTML -slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML -translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML -original_slug: Learn/HTML/Introduction_to_HTML/Het_hoofd_metadata_in_HTML ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</div> - -<p class="summary">Het {{glossary("Head", "hoofd")}} van een HTML-document is het deel dat niet wordt getoond in de webbrowser wanneer de pagina is geladen. Het bevat informatie zoals de {{htmlelement("title")}} van de pagina, links naar {{glossary("CSS")}} (als je je HTML-inhoud met CSS wil stijlen), koppelingen naar aangepaste favicons en andere metadata (data over de HTML, zoals wie die geschreven heeft en belangrijke sleutelwoorden die het document beschrijven.) In dit artikel behandelen we alle zaken die we hierboven hebben vermeld en we geven je een goede basis om met de opmaak en andere code om te gaan die in het hoofd zou moeten leven. </p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Vereisten:</th> - <td>Basiskennis HTML vergelijkbaar met de informatie die is aangeboden in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Beginnen met HTML</a>.</td> - </tr> - <tr> - <th scope="row">Doel:</th> - <td>Over het HTML-hoofd leren: wat is zijn doel, wat zijn de belangrijkste onderdelen die het kan bevatten en welk effect kan het hebben op het HTML-document.</td> - </tr> - </tbody> -</table> - -<h2 id="Wat_is_het_HTML-hoofd">Wat is het HTML-hoofd?</h2> - -<p>We bekijken opnieuw het eenvoudige <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">HTML-document dat we in het vorige artikel hebben besproken</a>:</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Mijn testpagina</title> - </head> - <body> - <p>Dit is mijn pagina</p> - </body> -</html></pre> - -<p>Het HTML-hoofd is de inhoud van het {{htmlelement("head")}}-element. In tegenstelling tot de inhoud van het {{htmlelement("body")}}-element die wordt weergegeven als de pagina in een browser wordt geladen, is de inhoud van het hoofd niet niet zichtbaar op de pagina. De taak van het hoofd is om {{glossary("Metadata", "metadata")}} over het document te bevatten. In het voorbeeld hierboven is het hoofd vrij klein:</p> - -<pre class="brush: html"><head> - <meta charset="utf-8"> - <title>Mijn testpagina</title> -</head></pre> - -<p>In grotere pagina's echter, kan het hoofd echt wel vol allerlei zaken staan — ga maar eens naar een paar van je favoriete websites en gebruik de <a href="/en-US/docs/Learn/Discover_browser_developer_tools">hulpprogramma's voor ontwikkelaars</a> om de inhoud van hun hoofden te onderzoeken. Ons doel is hier niet om je alles te tonen dat je in het hoofd kan zetten en gebruiken. We willen je wel uitleggen wat de meest voor de hand liggende zaken zijn die je in je hoofd kan plaatsen, hoe je ze moet gebruiken en je er een beetje bekend mee maken. Laat ons beginnen.</p> - -<h2 id="Een_titel_toevoegen">Een titel toevoegen</h2> - -<p>We hebben het {{htmlelement("title")}}-element al in actie gezien — het kan namelijk gebruikt worden om een titel aan het document toe te voegen. Dit kan echter verward worden met het {{htmlelement("h1")}}-element dat gebruikt kan worden om de belangrijkste kop aan de inhoud van je body toe te voegen — die kop wordt soms de paginatitel genoemd maar het zijn twee verschillende zaken!</p> - -<ul> - <li>Het {{htmlelement("h1")}}-element verschijnt op de pagina wanneer die in de browser wordt geladen — over het algemeen zou die maar één keer per pagina gebruikt mogen worden. Namelijk om de titel van je pagina-inhoud op te maken (de titel van een verhaal, of de kop van een nieuwsbericht of wat er dan ook geschikt is voor jou).</li> - <li>Het {{htmlelement("title")}}-element behoort tot de metadata en bevat de titel van het volledige HTML-document (niet die van de inhoud van het document)</li> -</ul> - -<h3 id="Actief_leren_We_onderzoeken_een_eenvoudig_voorbeeld">Actief leren: We onderzoeken een eenvoudig voorbeeld</h3> - -<ol> - <li>Om met dit hoofdstuk te beginnen, willen we dat je naar onze Github repo gaat en een kopie van onze <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html pagina</a> downloadt. Er zijn twee manieren om dit te doen: - - <ol> - <li>Je kan met behulp van je broncodeverwerkerde de code in de pagina in een nieuw tekstbestand kopiëren en die ergens op een goede plek opslaan.</li> - <li>Druk op de "Raw"-knop van de pagina. De code zal in een nieuwe tabpagina verschijnen. Vervolgens selecteer je de tekst selecteren, je kopiëert hem en je kiest een plek uit waar je het bestand kan opslaan.</li> - </ol> - </li> - <li>Open nu het bestand in je browser. Je zou een pagina moeten zien die er zo uitziet: - <p><img alt="A simple web page with the title set to <title> element, and the <h1> set to <h1> element." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;">Het zou nu volledig duidelijk moeten zijn waar de <code><h1></code>-inhoud verschijnt en waar die van de <code><title></code>!</p> - </li> - <li> Je kan nu de code in je broncodeverwerker openen, de inhoud van deze elementen bewerken, de code opslaan en dan de pagina in je browser vernieuwen. Veel plezier!</li> -</ol> - -<p>De inhoud van het <code><title>-</code>element wordt ook op andere manieren gebruikt. Als je bijvoorbeeld een bladwijzer van de pagina wil maken, zal je de inhoud van het <code><title>-</code>element als een suggestie voor de naam van de bladwijzer ingevuld zien staan (Om een bladwijzer te maken klik je met de <em>rechtermuisknop bovenaan in de bladwijzerbalk. </em>Dan kies je<em> Nieuwe bladwijzer</em> of klik je op<em> het sterretje bovenaan in het menu </em>in Firefox).</p> - -<p><img alt="A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element " src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p> - -<p>De <code><title>-</code>inhoud wordt ook in zoekresultaten gebruikt zoals je hieronder zult zien.</p> - -<h2 id="Metadata_het_<meta>-element">Metadata: het <meta>-element</h2> - -<p>Metadata zijn data die data beschrijven en HTML heeft een "officiële" manier om metadata aan een document toe te voegen — het {{htmlelement("meta")}}-element. Natuurlijk kan al het andere waarover we in dit artikel al hebben gesproken ook als metadata worden beschouwd. Er zijn vele verschillende soorten <code><meta>-</code>element die kunnen worden opgenomen in het <head> van je pagina, maar die gaan we nog niet proberen uit te leggen omdat dat gewoon te verwarrend zou worden. In de plaats daarvan gaan we nu een paar zaken uitleggen die je vaak zal zien, gewoon om je een idee te geven van wat metadata zijn.</p> - -<h3 id="De_tekencodering_van_je_document_bepalen">De tekencodering van je document bepalen</h3> - -<p>In het voorbeeld dat we hierboven hebben gezien, staat deze regel:</p> - -<pre class="brush: html"><meta charset="utf-8"></pre> - -<p>Dit element bepaalt de tekencodering van het document . Dit is de tekenset (i.e. de karakters, zoals onze letters, Japanse tekens, wiskundige symbolen...) die je document mag gebruiken. <code>utf-8</code> is een universele tekenset waarin zowat elk karakter in elke menselijke taal is opgenomen. Dit betekent dat je webpagina in staat zal zijn om elke taal weer te geven. Het is dan ook een goed idee om deze tekenset toe te voegen aan elke webpagina die je creëert! Je pagina zal bijvoorbeeld Engelse en Japanse karakters prima aankunnen:</p> - -<p><img alt="a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine," src="https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;">Als je je karakterencodering volgens <code>ISO-8859-1</code> instelt (de tekenset voor het Latijnse alfabet), zal de weergave van je pagina volledig in de knoei raken:</p> - -<p><img alt="a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly" src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p> - -<h3 id="Actief_leren_Een_experiment_met_tekenencodering">Actief leren: Een experiment met tekenencodering</h3> - -<p>Om dit uit te proberen, neem je het eenvoudige HTML-sjabloon dat je in de vorige sectie over het <code><title>-</code>element hebt gevonden (de <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html pagina</a>). Probeer de meta tekenset-waarde in <code>ISO-8859-1 </code>te veranderen en voeg dan wat Japanse tekens aan je pagina toe. Dit is de code die we hebben gebruikt:</p> - -<pre class="brush: html"><p>Japanese example: ご飯が熱い。</p></pre> - -<h3 id="Een_auteur_en_een_beschrijving_toevoegen">Een auteur en een beschrijving toevoegen</h3> - -<p>Vele <code><meta>-</code>elementen kunnen ook attributen voor naam en inhoud krijgen:</p> - -<ul> - <li><code>name</code> bepaalt met welke type meta-element je werkt en welke type informatie het bevat.</li> - <li><code>content</code> (inhoud in het Nederlands) bepaalt welke meta-inhoud wordt gebruikt.</li> -</ul> - -<p>Er bestaan twee nuttige meta-elementen: eentje waarmee je de auteur van de pagina kan vermelden en nog één dat de gebruiker een een beknopte beschrijving van de pagina verschaft. Laat ons een voorbeeld bekijken:</p> - -<pre class="brush: html"><meta name="author" content="Chris Mills"> -<meta name="description" content="Het MDN Leerplatform heeft als doel -totale beginners alle informatie te verschaffen om te kunnen beginnen -met het ontwerpen van websites en applicaties."></pre> - -<p>Er zijn een paar redenen waarom het nuttig is de auteur te vermelden: het is handig omdat je erachter kan komen wie de pagina heeft geschreven en je kan hem/haar/hen vragen over de inhoud stellen. Sommige inhoudsbeheersystemen selecteren automatisch de auteursinformatie en maken die beschikbaar voor zulke doeleinden.</p> - -<p>Vergeet niet dat je de Engelse termen <em>name, description </em>(beschrijving) en <em>content </em>(inhoud) in je HTML-pagina moet gebruiken.</p> - -<p>Het is nuttig als een <em>description </em>sleutelwoorden bevat die relevant zijn voor de inhoud op je pagina omdat die je pagina hoger in relevante resultaten van zoekmachines doet verschijnen (zulke activiteiten noemen we <a href="/en-US/docs/Glossary/SEO">Search Engine Optimization</a> (optimalisatie van zoekmachines) or {{glossary("SEO")}}.)</p> - -<h3 id="Actief_leren_Het_gebruik_van_de_beschrijving_in_zoekmachines">Actief leren: Het gebruik van de beschrijving in zoekmachines</h3> - -<p>De <em>description </em>(beschrijving) wordt ook gebruikt in de pagina's met resultaten van zoekmachines. We gaan dit nu verder onderzoeken met een oefening.</p> - -<ol> - <li>Ga naar het <a href="https://developer.mozilla.org/en-US/">voorblad van het Mozilla Developer Network</a>.</li> - <li>Bekijk de bron van de pagina (Klik met de rechtermuisknop + <kbd>Ctrl</kbd> op de pagina, kies <em>Paginabron bekijken</em>.)</li> - <li>Zoek het metalabel met de description. Die zal er zo uitzien: - <pre class="brush: html"><meta name="description" content="Het Mozilla Developer Network (MDN) biedt informatie over Open-Web-technologieën waaronder HTML, CSS, en API's voor zowel websites als HTML5-apps. Ook documenteert het Mozilla producten, zoals Firefox OS."></pre> - </li> - <li>Zoek nu "Mozilla Developer Network" in je favoriete zoekmachine (wij gebruikten Yahoo). In de zoekresultaten zal je de inhoud zien van de description <code><meta>-</code> en de content (inhoud) van het <code><title>-</code>element — zeker de moeite waard om te hebben! - <p><img alt='A Yahoo search result for "Mozilla Developer Network"' src="https://mdn.mozillademos.org/files/12347/search-result.png" style="display: block; margin: 0 auto;"></p> - </li> -</ol> - -<div class="note"> -<p><strong>Opmerking</strong>: In Google zal je onder de hoofdlink van de MDN-startpagina een paar relevante MDN-pagina's zien — deze worden site koppelingen genoemd en je kan die configureren met <a href="http://www.google.com/webmasters/tools/">Google's webmaster tools</a> — een manier om de zoekresultaten van je site te verbeteren in de Google zoekmachine.</p> -</div> - -<div class="note"> -<p><strong>Opmerking</strong>: Vele <code><meta></code> eigenschappen worden eigenlijk niet meer gebruikt. Het sleutelwoord <code><meta>-</code>element bijvoorbeeld, zou sleutelwoorden voor zoekmachines moeten verschaffen om zo de relevantie van de pagina voor verschillende zoektermen te bepalen. Het wordt nu door zoekmachines genegeerd omdat spammers deze lijst van sleutelwoorden met honderden sleutelwoorden opvulden en zo de resultaten verdraaiden. </p> -</div> - -<h3 id="Andere_metadata-types">Andere metadata-types</h3> - -<p>Terwijl je in het web zit rond te scharrelen, zal je ook andere types van metadata tegenkomen. Vele eigenschappen die je op websites zult zien zijn hun eigen creaties en ontworpen om bepaalde sites (zoals socialenetwerksites) specifieke informatie te verschaffen die ze kunnen gebruiken.</p> - -<p><a href="http://ogp.me/">Open Graph Data</a> bijvoorbeeld is een metadata-protocol dat Facebook heeft uitgevonden om websites van verrijkte metadata te voorzien. In de MDN-broncode, zal je dit vinden:</p> - -<pre class="brush: html"><meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png"> -<meta property="og:description" content="The Mozilla Developer Network (MDN) provides -information about Open Web technologies including HTML, CSS, and APIs for both Web sites -and HTML5 Apps. It also documents Mozilla products, like Firefox OS."> -<meta property="og:title" content="Mozilla Developer Network"></pre> - -<p>Dat heeft ondere andere het volgende effect: als je een hyperlink maakt naar MDN op facebook, zal de hyperlink samen met een afbeelding en een beschrijving verschijnen: een verrijkte ervaring voor gebruikers.</p> - -<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;">Twitter heef ook gelijkaardige eigen metadata, die een vergelijkbaar effect hebben als de URL van de site op twitter.com wordt getoond. Bijvoorbeeld:</p> - -<pre class="brush: html"><meta name="twitter:title" content="Mozilla Developer Network"></pre> - -<h2 id="Eigen_op_maat_gemaakte_iconen_toevoegen_aan_je_site">Eigen op maat gemaakte iconen toevoegen aan je site</h2> - -<p>Om het design van je site verder te verrijken, kan je referenties naar op maat gemaakte iconen in je metadata steken. Die zullen in een aantal contexten worden weergegeven.</p> - -<p>De nederige favicon hoort er al vele, vele jaren bij. Je vindt het bovenaan in het tab-gedeelte naast de <title>-inhoud van je pagina staat en naast je bladwijzers in je bladwijzerbalk. Het was het eerste icoon van dit type, een 16 x 16 pixel icoon dat op meerdere plaatsen wordt gebruikt. De favicon kan op twee manieren aan je pagina worden toegevoegd:</p> - -<ol> - <li>Je slaat hem op in dezelfde folder als die waarin de index-pagina van je site is opgeslagen en je doet dat met de <code>.ico-</code>extensie. (De meeste browsers zullen favicons in gewonere formaten ondersteunen zoals<code>.gif</code> of <code>.png</code>, maar als je het ICO-formaat gebruikt zal dat ervoor zorgen dat het werkt, zelfs in Internet Explorer 6.)</li> - <li>Creëer er een koppeling naar door de volgende lijn in je HTML-<code><head></code> toe te voegen: - <pre class="brush: html"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> - </li> -</ol> - -<p>Moderne browsers gebruiken favicons op verschillende plaatsen, zoals in de tab waarin de pagina is geopend, en in het bladwijzermenu als je een bladwijzer maakt van je pagina :</p> - -<p><img alt="The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p> - -<p>Er spelen tegenwoordig ook nog vele andere icoon-types mee. Je zal dit bijvoorbeeld in de broncode van de MDN-startpagina vinden:</p> - -<pre class="brush: html"><!-- third-generation iPad with high-resolution Retina display: --> -<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png"> -<!-- iPhone with high-resolution Retina display: --> -<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png"> -<!-- first- and second-generation iPad: --> -<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png"> -<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> -<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png"> -<!-- basic favicon --> -<link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png"></pre> - -<p>De commentaren verklaren waarvoor elk icoon wordt gebruikt — deze elementen zorgen er bijvoorbeeld voor dat een icoon met een mooie hoge resolutie wordt gebruikt als de site wordt opgeslagen in het startscherm van een iPad.</p> - -<p>Maak je nu nog niet te veel zorgen over de implementatie van al deze verschillende soorten iconen — dit is een vrij gevorderde eigenschap and we zullen er geen kennis verwachten in deze cursus. Het belangrijkste doel is om je te laten weten dat dit soort zaken bestaat. Moest je er eentje tegenkomen terwijl zit rond te snuffelen in de broncode van één of andere website, dan weet je waar je mee bezig bent.</p> - -<h2 id="CSS_en_JavaScript_toepassen_op_HTML">CSS en JavaScript toepassen op HTML</h2> - -<p>Zowat alle websites gebruiken tegenwoordig {{glossary("CSS")}} om ze een coole look te geven en {{glossary("JavaScript")}} om interactieve functionaliteit mogelijk te maken. Voorbeelden daarvan zijn videospelers, plattegronden, spelletjes en nog veel meer. CSS en Javascript worden meestal via respectievelijk het {{htmlelement("link")}}-element en het {{htmlelement("script")}}-element op een webpagina toegepast.</p> - -<ul> - <li> - <p>Het {{htmlelement("link")}}-element staat altijd in het hoofd van je document. Het krijgt twee attributen, rel="stylesheet", dat aanduidt dat het het stijlblad is van het document en href, dat het pad naar het stijlblad-bestand bevat:</p> - - <pre class="brush: html"><link rel="stylesheet" href="my-css-file.css"></pre> - </li> - <li> - <p>Het {{htmlelement("script")}}-element hoeft niet in het hoofd te worden gezet; in feite is het vaak beter om het aan de onderkant van het body van het document te plaatsen (net voor het <code></body>-eindlabel</code>) om er zeker van te zijn dat alle HTML-inhoud eerst door de browser is ingelezen vooraleer de browser er Javascript op probeert toe te passen. (Als JavaScript een element probeert te gebruiken dat nog niet bestaat, zal de browser een foutmelding genereren.)</p> - - <pre class="brush: html"><script src="my-js-file.js"></script></pre> - - <p><strong>Opmerking</strong>: Het <code><script>-</code>element mag er dan als een leeg element uitzien, dat is het echt niet en het heeft dus een eindlabel nodig. In plaats van naar een extern scriptbestand te wijzen, kan je er ook voor kiezen om je volledige scriptcode tussen de twee labels van het <code><script>-</code>element te plaatsen.</p> - </li> -</ul> - -<h3 id="Actief_leren_CSS_en_JavaScript_op_een_pagina_toepassen">Actief leren: CSS en JavaScript op een pagina toepassen</h3> - -<ol> - <li>Om met deze oefening te beginnen, grijp je een kopie van onze <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> en <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a> bestanden en sla je ze op je lokale computer in dezelfde map op. Zorg ervoor dat ze worden opgeslagen met de juiste namen en bestandsextensies.</li> - <li>Open het HTML-bestand in je browser en in je broncodebewerker.</li> - <li>Voeg nu de {{htmlelement("link")}}- en {{htmlelement("script")}}-elementen toe aan je HTML zoals hierboven is uitgelegd. Op die manier worden je CSS en JavaScript toegepast op je HTML.</li> -</ol> - -<p>Als je dit correct doet en je HTML opslaat, zal je zien dat er vanalles is veranderd wanneer je de browser vernieuwt:</p> - -<p><img alt="Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page." src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p> - -<ul> - <li>Het JavaScript heeft een lege lijst aan de pagina toegevoegd. Als je nu ergens op de pagina klikt, zal een dialoogvenster omhoog komen. Het zal je vragen wat tekst in te voeren om een nieuw lijstonderdeel toe te voegen. Als je op de OK-knop drukt, zal de tekst als een nieuw lijstonderdeel aan de lijst worden toegevoegd. Als je op op een bestaand lijstonderdeel klikt, zal een dialoogvenster verschijnen waarin je de tekst ervan kunt veranderen. </li> - <li> De CSS heeft ervoor gezorgd dat de achtergrond nu een groene kleur heeft. De tekst is ook groter geworden. Het heeft ook de inhoud gestijld die door het Javascript aan de pagina wordt toegevoegd (de rode balk met de zwarte boord is door CSS aan de door JS gegenereerde lijst toegevoegd.) </li> -</ul> - -<div class="note"> -<p><span style="font-size: 14px;"><strong>Opmerking</strong></span>: Als je in deze oefening vastraakt en er niet in slaagt om de CSS/JS op de pagina toe te passen, ga dan naar onze <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a> voobeeldpagina.</p> -</div> - -<h2 id="De_belangrijkste_taal_van_het_document_instellen">De belangrijkste taal van het document instellen</h2> - -<p>Als afsluiter vinden we het de moeite waard om te vermelden dat je de taal van je pagina kan (en echt wel zou moeten) instellen. Dit kan je doen door het <a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang attribuut</a> aan het openingslabel van het HTML-element toe te voegen (zoals je hieronder en in het <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a> kan zien.)</p> - -<pre class="brush: html"><html lang="en-US"></pre> - -<p>Dit is op vele manieren nuttig. Als de taal van je HTML-document is ingesteld, zal die beter worden geïndexeerd door zoekmachines (het zal bijvoorbeeld correct verschijnen in taal-specifieke resultaten) en het is ook nuttig voor mensen met een visuele beperking die een schermlezer gebruiken. (het woord "six" bijvoorbeeld bestaat zowel in het Frans als in het Engels maar wordt op een verschillende manier uitgesproken.)</p> - -<p>Je kan ook subsecties van je document als verschillende talen laten herkennen. We zouden onze Japanse sectie als Japans kunnen laten herkennen, zoals hieronder :</p> - -<pre class="brush: html"><p>Japans voorbeeld: <span lang="jp">ご飯が熱い。</span>.</p></pre> - -<p>Deze codes worden gedefiniëerd door de <a href="https://en.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a> standaard. Je kan er meer over ontdekken in <a href="https://www.w3.org/International/articles/language-tags/">Language tags in HTML and XML</a>.</p> - -<h2 id="Samenvatting">Samenvatting</h2> - -<p>We zijn aan het einde van onze sneltreintour over het HTML-hoofd gekomen. Er is nog veel meer dat je ermee kan doen, maar een rondleiding die alles uitlegt, zou in dit stadium snel saai en verwarrend worden. We willen je gewoon een idee geven van wat de gebruikelijkste zaken zijn die je erin kan vinden! in het volgende artikel bekijken we HTML-basisstructuren die ons helpen met tekst om te gaan.</p> - -<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p> |