diff options
Diffstat (limited to 'files/nl/learn')
44 files changed, 0 insertions, 13713 deletions
diff --git a/files/nl/learn/accessibility/html/index.html b/files/nl/learn/accessibility/html/index.html deleted file mode 100644 index f5751efac9..0000000000 --- a/files/nl/learn/accessibility/html/index.html +++ /dev/null @@ -1,541 +0,0 @@ ---- -title: 'HTML: Een goede basis voor toegankelijkheid' -slug: Learn/Accessibility/HTML -translation_of: Learn/Accessibility/HTML ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</div> - -<p class="summary">Een bijzonder groot deel van alle webcontent kan toegankelijk gemaakt worden door correcte HTML elementen te gebruiken voor het juiste doel. Dit artikel gaat in detail over hoe HTML gebruikt kan worden om maximale toegankelijkheid te garanderen.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Vereisten:</th> - <td> - <p>basiscomputervaardigheden, basiskennis van HTML (zie <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introductie in HTML</a>) en inzicht in <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">wat toegankelijkheid is</a>.</p> - </td> - </tr> - <tr> - <th scope="row">Doel:</th> - <td> - <p>Vertrouwd raken met HTML functies die toegankelijkheidsvoordelen hebben en hoe je deze op de juiste manier kunt gebruiken in je webdocumenten.</p> - </td> - </tr> - </tbody> -</table> - -<h2 id="HTML_en_toegankelijkheid">HTML en toegankelijkheid</h2> - -<p>Naarmate je meer leert over HTML - des te meer bronnen je leest, des te meer voorbeelden je bekijkt, enz. - blijf je een terugkerend thema zien: het belang van het gebruik van semantische HTML (ook wel POSH of 'Plain Old Semantic HTML' genoemd). Dit betekent eigenlijk niets anders dan zoveel mogelijk gebruik maken van de juiste HTML-elementen voor hun juiste doel.</p> - -<p>Je vraagt je misschien af waarom dit zo belangrijk is? Je kunt immers een combinatie van CSS en JavaScript gebruiken om zo ongeveer elk HTML-element te laten werken zoals je wilt. Een control button om een video op uw site af te spelen, kan bijvoorbeeld als volgt worden gemarkeerd:</p> - -<pre class="brush: html"> <div>Speel video af</div></pre> - -<p>Maar zoals je verderop in dit artikel in meer detail zult zien, is het logisch om het juiste HTML element voor deze taak te gebruiken:</p> - -<pre class="brush: html"> <button>Speel video af</button></pre> - -<p>Niet alleen HTML <button> s hebben standaard een geschikte stijl toegepast (die je waarschijnlijk wilt overschrijven), ze hebben ook een ingebouwde toetsenbordtoegankelijkheid - ze kunnen namelijk worden weergegeven tussen tabbladen en worden geactiveerd met Return / Enter.</p> - -<p>Het schrijven van semantische HTML duurt niet langer dan niet-semantische (slechte) markup. En als je dit consequent vanaf het begin van je project doet heeft het ook andere voordelen dan alleen toegankelijkheid:<br> - </p> - -<ol> - <li><strong>Gemakkelijker te ontwikkelen</strong> — zoals hierboven vermeld, krijg je al standaard wat extra functionaliteit. En bovendien is het waarschijnlijk gemakkelijker te begrijpen.</li> - <li><strong>Beter op mobiel</strong> — semantische HTML is aantoonbaar lichter in bestandsgrootte dan niet-semantische spaghetti-code, en gemakkelijker om responsive te maken.</li> - <li><strong>Goed voor SEO</strong> — zoekmachines geven meer aandacht aan zoekwoorden binnen headings, links, enzovoort dan zoekwoorden die zijn opgenomen in niet-semantische <div> s, enz., Zo zijn je documenten en webpagina's beter vindbaar voor klanten.</li> -</ol> - -<p>Laten we meer in detail duiken, en toegankelijke HTML bekijken.</p> - -<div class="note"> -<p><strong>N.b.</strong>: het is een goed idee om een schermlezer in te stellen op uw lokale computer, zodat u de onderstaande voorbeelden kunt testen. Raadpleeg de handleiding voor schermlezers (<a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Screenreaders guide</a>) voor meer informatie.</p> -</div> - -<h2 id="Goede_semantiek">Goede semantiek</h2> - -<p>We hebben al gesproken over het belang van goede semantiek en waarom we het juiste HTML-element voor het juiste doel moeten gebruiken. Deze taak mag niet worden genegeerd. Het is een van de belangrijkste punten waarop toegankelijkheid misloopt als het niet goed wordt toegepast.</p> - -<p>De rauwe waarheid van het internet is dat mensen heel vreemde dingen doen met HTML-markup. Het misbruik van HTML is te wijten aan legacy-praktijken die niet volledig zijn vergeten, en soms is het gewoon onwetendheid. Hoe het ook zij, je dient dergelijke slechte code altijd te vervangen. Waar je deze ook ziet, wanneer je maar kunt.</p> - -<p>Soms ben je niet altijd in de positie om slechte markup te verwijderen - zo kunnen je pagina's worden gegenereerd door een soort server-side framework waar je geen volledige controle over hebt, of dat je inhoud van derden op je pagina hebt (zoals als advertentiebanners) waar je geen controle over hebt.</p> - -<p>Het doel is echter niet "alles of niets". Elke verbetering die je kunt maken, zal de gedachte achter toegankelijkheid helpen.</p> - -<h3 id="Text_content">Text content</h3> - -<p>Een van de beste toegankelijkheidshulpmiddelen die een gebruiker van een schermlezer kan hebben, is een goede inhoudsstructuur van kopjes, alinea's, lijsten, enz. Een goed semantisch voorbeeld kan er ongeveer zo uitzien:</p> - -<pre class="brush: html example-good"> <h1>Mijn heading</h1> - - <p>Dit is de eerste sectie van mijn document.</p> - - <p>En ik voeg hier nog een paragraaf toe.</p> - - <ol> - <li>Hier is</li> - <li>een lijst voor</li> - <li>jou om te lezen</li> - </ol> - - <h2>Mijn subheading</h2> - - <p>Dit is de eerste subsectie van mijn document. Ik hou van mensen die mijn content kunnen vinden!</p> - - <h2>Mijn 2e subheading</h2> - - <p>Dit is de tweede subsectie van mijn document. Ik denk dat deze nog interessanter is dan de andere.</p></pre> - -<p>We hebben een andere versie voor je voorbereid met wat langere teksten. Deze kun je uitproberen met een screenreader (zie <a href="http://mdn.github.io/learning-area/accessibility/html/good-semantics.html">good-semantics.html</a>). Als je hierdoor heen probeert te navigeren, dan zie je dat dit vrij eenvoudig is om jezelf doorheen te navigeren:</p> - -<ol> - <li>De screenreader leest elke header uit zodra je verder door de content heen gaat. Je wordt geïnformeerd over wat een heading is, wat een paragraaf is, enz.</li> - <li>Het stopt na ieder element. Het laat jou werken in een tempo wat prettig is voor jou.</li> - <li>Je kunt naar ieder andere heading springen met (volgende/vorige) in de meeste screenreaders.</li> - <li>Je kunt in vele screenreaders ook een lijst met headings naar voren brengen, en deze gebruiken als een handige 'inhoudspagina' om specifieke content te vinden.</li> -</ol> - -<p>Soms schrijven mensen headings, paragrafen, enz. alleen als presentaarbare HTML en bijv. met line-breaks (<br>). Zoiets als onderstaande:</p> - -<pre class="brush: html example-bad"> <font size="7">Mijn heading</font> - <br><br> - Dit is de eerste sectie van mijn document. - <br><br> - Ik zal hier nog een paragraaf toevoegen. - <br><br> - 1. Hier is - <br><br> - 2. een lijst voor - <br><br> - 3. jou om te lezen - <br><br> - <font size="5">Mijn subheading</font> - <br><br> - Dit is de eerste subsectie van mijn document. Ik hou van mensen die mijn content kunnen vinden! - <br><br> - <font size="5">My 2nd subheading</font> - <br><br> - Dit is de tweede subsectie van mijn document. Ik denk dat deze nog interessanter is dan de andere.</pre> - -<p>Als je onze langere versie uitprobeert met een screenreader (zie <a href="http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html">bad-semantics.html</a>), dan zul je zien dat je niet echt een goede ervaring hebt. De screenreader kan niets als wegwijzer gebruiken, dus je kunt ook geen bruikbare inhoudsopgave vinden. De hele pagina wordt zo gezien als één gigantisch blok, dus daarom het gewoon in één keer volledig uitgelezen.</p> - -<p>Er zijn nog andere zaken die nog verder gaan dan toegankelijkheid. Het is bijvoorbeeld moeilijker om de inhoud te stijlen met CSS, of het manipuleren met Javascript. Er zijn immers geen elementen die als 'selectors' kunnen worden gebruikt.</p> - -<h4 id="Gebruik_duidelijke_taal">Gebruik duidelijke taal</h4> - -<p>De taal die je gebruikt, kan ook de toegankelijkheid beìnvloeden. Over het algemeen moet je zo duidelijk mogelijke taal gebuiken die niet overdreven complex is, en geen onnodig jargon bevat. Dit komt niet alleen ten goede aan mensen met cognitieve of andere handicaps; het komt alle lezers ten goede voor wie de tekst niet in hun eerste taal is geschreven, voor oudere mensen, voor jongere mensen ... eigenlijk iedereen! Daarnaast zou je altijd moeten proberen om taal en karakters te vermijden die niet duidelijk worden voorgelezen door de schermlezer. Bijvoorbeeld:</p> - -<p> </p> - -<ul> - <li>Gebruik geen streepjes als u dit kunt voorkomen. In plaats van 5-7 te schrijven, schrijf je 5 tot 7.</li> - <li>Breid afkortingen uit - schrijf 'Januari' in plaats van 'Jan' te schrijven.</li> - <li>Schrijf afkortingen uit, minstens één of twee keer. In plaats van in eerste instantie HTML te schrijven, schrijf je Hypertext Markup Language.</li> -</ul> - -<h3 id="Pagina_layouts">Pagina layouts</h3> - -<p>Vroeger in de 'niet-zo-goede-oude-tijd' maakten mensen gebruik van HTML-tabellen om paginalay-outs te maken - ze gebruikten verschillende tabelcellen om de kop-, voettekst-, zijbalk-, hoofdinhoudskolom, enz. te gebruiken. Dit is geen goed idee, omdat een schermlezer hoogstwaarschijnlijk hele verwarrende zaken zal uitlezen, vooral als de lay-out complex is en veel geneste tabellen bevat.</p> - -<p>Probeer ons <a href="http://mdn.github.io/learning-area/accessibility/html/table-layout.html">table-layout.html</a> voorbeeld. Dit ziet er ongeveer zo uit:</p> - -<pre class="brush: html"> <table width="1200"> - <!-- main heading row --> - <tr id="heading"> - <td colspan="6"> - - <h1 align="center">Header</h1> - - </td> - </tr> - <!-- nav menu row --> - <tr id="nav" bgcolor="#ffffff"> - <td width="200"> - <a href="#" align="center">Home</a> - </td> - <td width="200"> - <a href="#" align="center">Ons team</a> - </td> - <td width="200"> - <a href="#" align="center">Projecten</a> - </td> - <td width="200"> - <a href="#" align="center">Contact</a> - </td> - <td width="300"> - <form width="300"> - <input type="search" name="q" placeholder="Zoeken" width="300"> - </form> - </td> - <td width="100"> - <button width="100">Zoek!</button> - </td> - </tr> - <!-- spacer row --> - <tr id="spacer" height="10"> - <td> - - </td> - </tr> - <!-- main content and aside row --> - <tr id="main"> - <td id="content" colspan="4" bgcolor="#ffffff"> - - <!-- main content goes here --> - </td> - <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"> - <h2>Gerelateerd</h2> - - <!-- aside content goes here --> - - </td> - </tr> - <!-- spacer row --> - <tr id="spacer" height="10"> - <td> - - </td> - </tr> - <!-- footer row --> - <tr id="footer" bgcolor="#ffffff"> - <td colspan="6"> - <p>©Copyright 2050 by nobody. All rights reversed.</p> - </td> - </tr> - </table></pre> - -<p> </p> - -<p>Als je probeert hierdoor heen te navigeren met een schermlezer, zal het waarschijnlijk zeggen dat er een tabel moet worden bekeken (hoewel sommige schermlezers het verschil tussen tabel-lay-outs en gegevenstabellen kunnen raden). Je zult dan waarschijnlijk (afhankelijk van welke schermlezer je gebruikt) als object naar de tabel moeten gaan en apart naar de functies kijken, en dan weer uit de tabel gaan om verder door de inhoud te kunnen navigeren.</p> - -<p>Tabel-lay-outs zijn een overblijfsel uit het verleden - ze waren logisch terug toen CSS-ondersteuning niet wijdverspreid was in browsers. Maar ze creëren verwarring voor schermlezers-gebruikers en zijn ook slecht voor veel andere redenen (onnodig gebruik van tabellen, betwistbaar meer markup, ontwerp maken wordt minder handig). Doe het niet!</p> - -<p>Je kunt deze opvattingen verifiëren door je eerdere ervaring te vergelijken met een moderner voorbeeld van een websitestructuur (<a href="http://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/">more modern website structure example</a>), dat zou er ongeveer zo uit kunnen zien:</p> - -<p> </p> - -<pre class="brush: html"> <header> - <h1>Header</h1> - </header> - - <nav> - <!-- main navigatie hier --> - </nav> - - <!-- Hiet is onze pagina's main content --> - <main> - - <!-- Het bevat een article --> - <article> - <h2>Article heading</h2> - - <!-- article content gaat hier --> - </article> - - <aside> - <h2>Gerelateerd</h2> - - <!-- aside content gaat hier --> - </aside> - - </main> - - <!-- En hier onze onze main footer die gebruikt worden op al onze pagina's in onze website --> - - <footer> - <!-- footer content gaat hier --> - </footer></pre> - -<p>Als je ons modernere HTML structuurvoorbeeld met een schermlezer probeert, zie je dat de opmaakmarkering niet langer in de weg zit en de inhoud keurig uitgelezen wordt. Het is ook veel schoner en kleiner qua hoeveelheid code. Dit betekent dat code eenvoudiger te onderhouden is en minder bandbreedte kost voor de gebruiker om de code te downloaden (dus vooral belangrijk voor mensen met langzame verbindingen!).</p> - -<p>Een andere overweging bij het maken van lay-outs is het gebruik van HTML5-semantische elementen zoals te zien in het bovenstaande voorbeeld (zie <a href="/en-US/docs/Web/HTML/Element#Content_sectioning">content sectioning</a>). Je kunt een lay-out maken met alleen geneste {{htmlelement ("div")}} elementen, maar het is beter om de juiste sectie te gebruiken elementen om je hoofdnavigatie in te pakken ({{htmlelement ("nav")}}), footer ({{htmlelement ("footer")}}), contenteenheden ({{htmlelement ("article")}}), enz. te herhalen Deze bieden extra semantiek voor schermlezers (en andere hulpmiddelen) om de gebruiker extra aanwijzingen te geven over de inhoud waarin ze navigeren (zie <a href="http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/">Screen Reader Support for new HTML5 Section Elements</a> voor een idee van hoe ondersteuning voor schermlezers eruit ziet).</p> - -<div class="note"> -<p><strong>N.b.</strong>: Naast je inhoud met een goede semantiek en een aantrekkelijke lay-out, moet deze logisch en zinvol zijn in de bronvolgorde - je kunt deze later altijd plaatsen waar je wilt met behulp van CSS, maar je moet eerst de bronvolgorde in orde krijgen. Dit is namelijk hetgeen wat gebruikers van schermleesprogramma's word voorgelezen.</p> -</div> - -<h3 id="UI_besturingselementen">UI besturingselementen</h3> - -<p> </p> - -<p>Met UI-besturingselementen bedoelen we de belangrijkste delen van webdocumenten waarmee gebruikers communiceren - meestal knoppen, links en formulierbesturingselementen. In deze sectie zullen we kijken naar de fundamentele toegankelijkheidsproblemen waar je rekening mee moet houden bij het maken van dergelijke besturingselementen. Andere artikelen over WAI-ARIA en multimedia zullen andere aspecten van UI-toegankelijkheid toelichten.</p> - -<p>Een belangrijk aspect van de toegankelijkheid van UI-besturingselementen is dat browsers standaard toestaan dat ze door het toetsenbord worden gemanipuleerd. Je kunt dit uitproberen met ons <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">native-keyboard-accessibility.html</a> voorbeeld (zie de <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">source code</a>) - open dit op een nieuw tabblad en probeer de tabtoets in te drukken; na een paar keer drukken, zou je moeten zien dat de tab-focus begint om door de verschillende focusseerbare elementen te bewegen; de gefocuste elementen krijgen een gemarkeerde standaardstijl in elke browser (deze verschilt enigszins tussen verschillende browsers), zodat je kunt zien welk element is gefocust.</p> - -<p> </p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14215/button-focused-unfocused.png" style="border-style: solid; border-width: 1px; display: block; height: 39px; margin: 0px auto; width: 288px;"></p> - -<p>Je kunt vervolgens op Enter / Return drukken om een gefocusde link te volgen of op een knop te drukken (we hebben wat JavaScript toegevoegd om de knoppen een bericht te laten 'alert'). Of begin met typen om een tekst in te voeren in een text input (andere formulierelementen hebben verschillende bedieningselementen, bijvoorbeeld het element {{htmlelement ("select")}} kan zijn opties laten weergeven en rouleren zodra je de pijltjestoetsen omhoog en omlaag gebruikt).</p> - -<div class="note"> -<p><strong>N.b.</strong>: Verschillende browsers hebben mogelijk verschillende toetsenbordbesturingsopties beschikbaar. Zie <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">Using native keyboard accessibility</a> voor meer informatie.</p> -</div> - -<p>Eigenlijk krijg je dit gedrag in principe gratis, gewoon door alleen maar de juiste elementen te gebruiken, bijvoorbeeld:</p> - -<pre class="brush: html example-good"> <h1>Links</h1> - - <p>Dit is een link naar <a href="https://www.mozilla.org">Mozilla</a>.</p> - - <p>Nog een link, naar <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p> - - <h2>Buttons</h2> - - <p> - <button data-message="Dit is van de eerste button">Klik mij!</button> - <button data-message="Dit is van de tweede button">Klik mij ook!</button> - <button data-message="Dit is van de derde button">En mij ook!</button> - </p> - - <h2>Formulier</h2> - - <form> - <div> - <label for="name">Vul je naam in:</label> - <input type="text" id="name" name="name"> - </div> - <div> - <label for="age">Voeg je leeftijd toe:</label> - <input type="text" id="age" name="age"> - </div> - <div> - <label for="mood">Hoe voel je je vandaag:</label> - <select id="mood" name="mood"> - <option>Blij</option> - <option>Verdrietig</option> - <option>Boos</option> - <option>Bezorgd</option> - </select> - </div> - </form></pre> - -<p> </p> - -<p>Dit betekent dat je op de juiste manier links, knoppen, formulierelementen en labels gebruikt (inclusief het element {{htmlelement ("label")}} voor formulierbesturingselementen).</p> - -<p>Het is echter altijd zo dat mensen soms rare dingen doen met HTML. Je ziet bijvoorbeeld soms knoppen gemaakt worden met behulp van {{htmlelement ("div")}} s, bijvoorbeeld:</p> - -<p> </p> - -<pre class="brush: html example-bad"> <div data-message="Dit is van de eerste button">Klik mij!</div> - <div data-message="Dit is van de tweede button">Klik mij ook!</div> - <div data-message="Dit is van de derde button">En mij ook!</div></pre> - -<p>Het gebruik van dergelijke code wordt sterk afgeraden - je verliest namelijk onmiddellijk de toegankelijkheid voor het native toetsenbord die je wel zou hebben gehad als je net {{htmlelement ("button")}} -elementen had gebruikt. Daarnaast is het zo dat je geen van de standaard CSS-styling krijgt die knoppen automatisch meekrijgen.</p> - -<h4 id="Building_keyboard_accessibility_back_in">Building keyboard accessibility back in</h4> - -<p>Adding such advantages back in takes a bit of work (you can an example code in our <a class="external external-icon" href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a> example — also see the <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">source code</a>). Here we've given our fake <code><div></code> buttons the ability to be focused (including via tab) by giving each one the attribute <code>tabindex="0"</code>:</p> - -<pre class="brush: html"> <div data-message="This is from the first button" tabindex="0">Click me!</div> - <div data-message="This is from the second button" tabindex="0">Click me too!</div> - <div data-message="This is from the third button" tabindex="0">And me!</div></pre> - -<p>Basically, the {{htmlattrxref("tabindex")}} attribute is primarily intended to allow tabbable elements to have a custom tab order (specified in positive numerical order), instead of just being tabbed through in their default source order. This is nearly always a bad idea, as it can cause major confusion. Use it only if you really need to, for example if the layout shows things in a very different visual order to the source code, and you want to make things work more logically. There are two other options for <code>tabindex</code>:</p> - -<ul> - <li><code>tabindex="0"</code> — as indicated above, this value allows elements that are not normally tabbable to become tabbable. This is the most useful value of <code>tabindex</code>.</li> - <li><code>tabindex="-1"</code> — this allows not normally tabbable elements to receive focus programmatically, e.g. via JavaScript, or as the target of links. </li> -</ul> - -<p>Whilst the above addition allows us to tab to the buttons, it does not allow us to activate them via the Enter/Return key. To do that, we had to add the following bit of JavaScript trickery:</p> - -<pre class="brush: js"> document.onkeydown = function(e) { - if(e.keyCode === 13) { // The Enter/Return key - document.activeElement.click(); - } - };</pre> - -<p>Here we add a listener to the <code>document</code> object to detect when a button has been pressed on the keyboard. We check what button was pressed via the event object's <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode">keyCode</a></code> property; if it is the keycode that matches Return/Enter, we run the function stored in the button's <code>onclick</code> handler using <code>document.activeElement.click()</code>. <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement">activeElement</a></code> gives us the element that is currently focused on the page.</p> - -<p>This is a lot of extra hassle to build the functionality back in. And there's bound to be other problems with it. <strong>Better to just use the right element for the right job in the first place.</strong></p> - -<h4 id="Meaningful_text_labels">Meaningful text labels</h4> - -<p>UI control text labels are very useful to all users, but getting them right is particularly important to users with disabilities.</p> - -<p>You should make sure that your button and link text labels are understandable and distinctive. Don't just use "Click here" for your labels, as screenreader users sometimes get up a list of buttons and form controls. The following screenshot shows our controls being listed by VoiceOver on Mac.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14335/voiceover-formcontrols.png" style="display: block; height: 604px; margin: 0px auto; width: 802px;"></p> - -<p>Make sure your labels make sense out of context, read on their own, as well as in the context of the paragraph they are in. For example, the following shows an example of good link text:</p> - -<pre class="brush: html example-good"> <p>Whales are really awesome creatures. <a href="whales.html">Find out more about whales</a>.</p></pre> - -<p>but this is bad link text:</p> - -<pre class="brush: html example-bad"> <p>Whales are really awesome creatures. To find more out about whales, <a href="whales.html">click here</a>.</p></pre> - -<div class="note"> -<p><strong>Note</strong>: You can find a lot more about link implementation and best practices in our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a> article. You can also see some good and bad examples at <a href="http://mdn.github.io/learning-area/accessibility/html/good-links.html">good-links.html</a> and <a href="http://mdn.github.io/learning-area/accessibility/html/bad-links.html">bad-links.html</a>.</p> -</div> - -<p>Form labels are also important, for giving you a clue what you need to enter into each form input. The following seems like a reasonable enough example:</p> - -<pre class="brush: html example-bad"> Fill in your name: <input type="text" id="name" name="name"></pre> - -<p>However, this is not so useful for disabled users. There is nothing in the above example to associate the label unambiguously with the form input, and make it clear how to fill it in if you cannot see it. If you access this with some screenreaders, you may only be given a description along the lines of "edit text".</p> - -<p>The following is a much better example:</p> - -<pre class="brush: html example-good"> <div> - <label for="name">Fill in your name:</label> - <input type="text" id="name" name="name"> - </div></pre> - -<p>With the code like this, the label will be clearly associated with the input; the description will be more like "Fill in your name: edit text".</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14337/voiceover-good-form-label.png" style="display: block; margin: 0 auto;"></p> - -<p>As an added bonus, in most browsers associating a label with a form input means that you can click the label to select/activate the form element. This gives the input a bigger hit area, making it easier to select.</p> - -<div class="note"> -<p><strong>Note</strong>: you can see some good and bad form examples in <a href="http://mdn.github.io/learning-area/accessibility/html/good-form.html">good-form.html</a> and <a href="http://mdn.github.io/learning-area/accessibility/html/bad-form.html">bad-form.html</a>.</p> -</div> - -<h2 id="Accessible_data_tables">Accessible data tables</h2> - -<p>A basic data table can be written with very simple markup, for example:</p> - -<pre class="brush: html"> <table> - <tr> - <td>Name</td> - <td>Age</td> - <td>Gender</td> - </tr> - <tr> - <td>Gabriel</td> - <td>13</td> - <td>Male</td> - </tr> - <tr> - <td>Elva</td> - <td>8</td> - <td>Female</td> - </tr> - <tr> - <td>Freida</td> - <td>5</td> - <td>Female</td> - </tr> - </table></pre> - -<p>But this has problems — there is no way for a screenreader user to associate rows or columns together as groupings of data. To do this you need to know what the header rows are, and if they are heading up rows, columns, etc. This can only be done visually for the above table (see <a href="http://mdn.github.io/learning-area/accessibility/html/bad-table.html">bad-table.html</a> and try the example out yourself).</p> - -<p>Now have a look at our <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-complete.html">punk bands table example</a> — you can see a few accessibility aids at work here:</p> - -<ul> - <li>Table headers are defined using {{htmlelement("th")}} elements — you can also specify if they are headers for rows or columns using the <code>scope</code> attribute. This gives you complete groups of data that can be consumed by screen readers as single units.</li> - <li>The {{htmlelement("caption")}} element and <code><table></code> <code>summary</code> attribute both do similar jobs — they act as alt text for a table, giving a screen reader user a useful quick summary of the table's contents. <code><caption></code> is generally preferred as it makes it's content accessible to sighted users too, who might also find it useful. You don't really need both.</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: See our <a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a> article for some more details around accessible data tables.</p> -</div> - -<h2 id="Text_alternatives">Text alternatives</h2> - -<p>Whereas textual content is inherently accessible, the same cannot necessarily be said for multimedia content — image/video content cannot be seen by visually-impaired people, and audio content cannot be heard by hearing-impaired people. We'll cover video and audio content in detail in the Accessible multimedia article later on, but for this article we'll look accessibility for the humble {{htmlelement("img")}} element.</p> - -<p>We have a simple example written up, <a href="http://mdn.github.io/learning-area/accessibility/html/accessible-image.html">accessible-image.html</a>, which features four copies of the same image:</p> - -<pre> <img src="dinosaur.png"> - - <img src="dinosaur.png" - alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> - - <img src="dinosaur.png" - alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." - title="The Mozilla red dinosaur"> - - - <img src="dinosaur.png" aria-labelledby="dino-label"> - - <p id="dino-label">The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</p> - </pre> - -<p>The first image, when viewed by a screen reader, doesn't really offer the user much help — VoiceOver for example reads out "/dinosaur.png, image". It reads out the filename to try to provide some help. In this example the user will at least know it is a dinosaur of some kind, but often files may be uploaded with machine generated file names (e.g. from a digital camera) and these file names would likely provide no context to the image's content.</p> - -<div class="note"> -<p><strong>Note</strong>: This is why you should never include text content inside an image — screen readers simply can't access it. There are other disadvantages too — you can't select it and copy/paste it. Just don't do it!</p> -</div> - -<p>When a screen reader encounters the second image, it reads out the full alt attribute — "A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.".</p> - -<p>This highlights the importance of not only using meaningful file names in case so-called <strong>alt text</strong> is not available, but also making sure that alt text is provided in <code>alt</code> attributes wherever possible. Note that the contents of the <code>alt</code> attribute should always provide a direct representation of the image and what it conveys visually. Any personal knowledge or extra description shouldn't be included here, as it is not useful for people who have not come across the image before.</p> - -<p>One thing to consider is whether your images have meaning inside your content, or whether they are purely for visual decoration, so have no meaning. If they are decorational, it is better to write an empty text as a value for <code>alt</code> attribute (see <a href="#Empty_alt_attributes">Empty alt attributes</a>) or to just include them in the page as CSS background images.</p> - -<div class="note"> -<p><strong>Note</strong>: Read <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a> and <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a> for a lot more information about image implementation and best practices.</p> -</div> - -<p>If you do want to provide extra contextual information, you should put it in the text surrounding the image, or inside a <code>title</code> attribute, as shown above. In this case, most screenreaders will read out the alt text, the title attribute, and the filename. In addition, browsers display title text as tooltips when moused over.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14333/title-attribute.png" style="display: block; margin: 0 auto;"></p> - -<p>Let's have another quick look at the fourth method:</p> - -<pre class="brush: html"> <img src="dinosaur.png" aria-labelledby="dino-label"> - - <p id="dino-label">The Mozilla red Tyrannosaurus ... </p></pre> - -<p>In this case, we are not using the <code>alt</code> attribute at all — instead, we have presented our description of the image as a regular text paragraph, given it an <code>id</code>, and then used the <code>aria-labelledby</code> attribute to refer to that <code>id</code>, which causes screenreaders to use that paragraph as the alt text/label for that image. This is especially useful if you want to use the same text as a label for multiple images — something that isn't possible with <code>alt</code>.</p> - -<div class="note"> -<p><strong>Note</strong>: <code>aria-labelledby</code> is part of the <a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a> spec, which allows developers to add in extra semantics to their markup to improve screenreader accessibility where needed. To find out more about how it works, read our <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA Basics</a> article.</p> -</div> - -<h3 id="Other_text_alternative_mechanisms">Other text alternative mechanisms</h3> - -<p>Images also have another mechanisms available for providing descriptive text. For example, there is a <code>longdesc</code> attribute that is meant to point to a separate web document containing an extended description of the image, for example:</p> - -<pre class="brush: html"> <img src="dinosaur.png" longdesc="dino-info.html"></pre> - -<p>This sounds like a good idea, especially for infographics like big charts with lots of information on that could perhaps be represented as an accessible data table instead (see previous section). However, <code>longdesc</code> is not supported consistently by screenreaders, and the content is completely inaccessible to non-screenreader users. It is arguably much better to include the long description on the same page as the image, or link to it with a regular link.</p> - -<p>HTML5 includes two new elements — {{htmlelement("figure")}} and {{htmlelement("figcaption")}} — which are supposed to associate a figure of some kind (it could be anything, not necessarily an image) with a figure caption:</p> - -<pre class="brush: html"> <figure> - <img src="dinosaur.png" alt="The Mozilla Tyrannosaurus"> - <figcaption>A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.</figcaption> - </figure></pre> - -<p>Unfortunately, most screenreaders don't seem to associate figure captions with their figures yet, but the element structure is useful for CSS styling, plus it provides a way to place a description of the image next to it in the source.</p> - -<h3 id="Empty_alt_attributes">Empty alt attributes</h3> - -<pre class="brush: html"> <h3> - <img src="article-icon.png" alt=""> - Tyrannosaurus Rex: the king of the dinosaurs - </h3></pre> - -<p>There may be times where an image is included in a page's design, but its primary purpose is for visual decoration. You'll notice in the code example above that the image's <code>alt</code> attribute is empty — this is to make screen readers recognize the image, but not attempt to describe the image (instead they'd just say "image", or similar).</p> - -<p>The reason to use an empty <code>alt</code> instead of not including it is because many screen readers announce the whole image URL if no <code>alt</code> is provided. In the above example, the image is acting as a visual decoration to the heading its associated with. In cases like this, and in cases where an image is only decoration and has no content value, you should put an empty <code>alt</code> on your images. Another alternative is to use the aria role attribute role="presentation" — this also stops screens readers from reading out alternative text.</p> - -<div class="note"> -<p><strong>Note</strong>: if possible you should use CSS to display images that are only decoration.</p> -</div> - -<h2 id="Summary">Summary</h2> - -<p>You should now be well-versed in writing accessible HTML for most occasions. Our WAI-ARIA basics article will also fill in some gaps in this knowledge, but this article has taken care of the basics. Next up we'll explore CSS and JavaScript, and how accessibility is affected by their good or bad use.</p> - -<p>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> - <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> -</ul> diff --git a/files/nl/learn/accessibility/index.html b/files/nl/learn/accessibility/index.html deleted file mode 100644 index 9dcfc071a1..0000000000 --- a/files/nl/learn/accessibility/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Accessibility -slug: Learn/Accessibility -tags: - - ARIA - - Accessibility - - Articles - - Beginner - - CSS - - CodingScripting - - HTML - - JavaScript - - Landing - - Learn - - Module - - NeedsTranslation - - TopicStub -translation_of: Learn/Accessibility ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Learning some HTML, CSS, and JavaScript is useful if you want to become a web developer, but your knowledge needs to go further than just using the technologies — you need to use them responsibly so that you maximize the audience for your websites and don't lock anyone out of using them. To achieve this, you need to adhere to general best practices (which are demonstrated throughout the <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> topics), do <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a>, and consider accessibility from the start. In this module, we'll cover the latter in detail.</p> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>To get the most out of this module, it would be a good idea to either work through at least the first two modules of the <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> topics, or perhaps even better, work through the relevant parts of the accessibility module as you work through the related technology topics.</p> - -<div class="note"> -<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you can try out most of the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p> -</div> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></dt> - <dd>This article starts off the module with a good look at what accessibility actually is — this includes what groups of people we need to consider and why, what tools different people use to interact with the web, and how we can make accessibility part of our web development workflow.</dd> - <dt><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></dt> - <dd>A great deal of web content can be made accessible just by making sure the correct HTML elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility.</dd> - <dt><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></dt> - <dd>CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences, but if misused they can significantly harm accessibility. This article outlines some CSS and JavaScript best practices that should be considered to ensure that even complex content is as accessible as possible.</dd> - <dt><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></dt> - <dd>Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.</dd> - <dt><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></dt> - <dd>Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives, so they can be understood by assistive technologies and their users. This article shows how.</dd> - <dt><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></dt> - <dd>With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.</dd> -</dl> - -<h2 id="Assessments">Assessments</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></dt> - <dd>In the assessment for this module, we present to you a simple site with a number of accessibility issues that you need to diagnose and fix.</dd> -</dl> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">Start Building Accessible Web Applications Today</a> — an excellent series of video tutorials by Marcy Sutton.</li> - <li><a href="https://dequeuniversity.com/resources/">Deque University resources</a> — includes code examples, screen reader references, and other useful resources.</li> - <li><a href="http://webaim.org/resources/">WebAIM resources</a> — includes guides, checklists, tools, and more.</li> -</ul> diff --git a/files/nl/learn/css/css_layout/index.html b/files/nl/learn/css/css_layout/index.html deleted file mode 100644 index 5990002230..0000000000 --- a/files/nl/learn/css/css_layout/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: CSS layout -slug: Learn/CSS/CSS_layout -tags: - - Beginner - - CSS - - Doorgeefpagina - - Floating - - Gids - - Grids - - Landing - - Leren - - Meerdere kolommen - - Module - - Overzicht - - Positionering - - Rasters - - flexbox - - float -translation_of: Learn/CSS/CSS_layout ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Op dit punt gekomen hebben we al gekeken naar de fundamenten van CSS, hoe tekst te stijlen en hoe de dozen te stijlen en de inhoud ervan te manipuleren. Nu wordt het tijd om te kijken naar hoe we de dozen in de juiste plaats zetten ten opzichte van de viewport en elkaar. We hebben de noodzakelijke vereisten al gezien, en dus kunnen we nu diep duiken in de CSS layout. We kijken naar de verschillende displayinstellingen, traditionele layout methoden (dozen laten drijven en ze positioneren), en nieuwe layout opties zoals flexibele dozen.</p> - -<h2 id="Vereisten">Vereisten</h2> - -<p>Voor je begint aan deze module zou je het volgende al moeten kennen:</p> - -<ol> - <li>De basis van hoe HTML werkt, zoals gezien in de <a href="https://developer.mozilla.org/nl/docs/Learn/HTML/Introduction_to_HTML">Inleiding tot HTML</a> module.</li> - <li>De CSS fundamenten kennen, zoals besproken in de <a href="https://developer.mozilla.org/nl/docs/Learn/CSS/Introduction_to_CSS">Inleiding tot CSS</a> module.</li> - <li>Begrijpen hoe je <a href="/en-US/docs/Learn/CSS/Styling_boxes">dozen moet stijlen.</a></li> -</ol> - -<div class="note"> -<p><strong>Opmerking</strong>: Als je werkt op een computer/tablet/ander apparaat waar je niet de mogelijkheid hebt om je files aan te maken, kan je de meeste voorbeelden uitproberen in een online code-omgeving zoals <a href="http://jsbin.com/">JSBin</a> of <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="Gidsen">Gidsen</h2> - -<p>Deze hoofdstukken zullen instructies geven over de fundamentele layouttechnieken en -hulpmiddelen die CSS rijk is.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introductie tot CSS layout</a></dt> - <dd>Dit hoofdstuk zal enkele CSS layout mogelijkheden herhalen die we al zagen in vorige modules, zoals de verschillende waarden voor {{cssxref("display")}}, en enkele van de concepten introduceren die we zullen zien doorheen deze module.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats / Drijvers</a></dt> - <dd>Oorspronkelijk bedacht voor het laten drijven van afbeeldingen in blokken tekst, is de {{cssxref("float")}} eigenschap één van de meest gebruikte hulpmiddelen geworden voor het maken van layouts met meerdere kolommen op webpagina's. Dit artikel zal alles uitleggen.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positionering</a></dt> - <dd>Positionering laat je toe om elementen uit de normale flow van de pagina te halen, zodat ze zich anders gedragen: bv. door op elkaar te zitten of altijd in dezelfde plaats te blijven "plakken" in de viewport. Dit hoofdstuk legt de verschillende mogelijke waarden voor de {{cssxref("position")}} eigenschap uit en hoe je die kan gebruiken.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Praktische positioneringsvoorbeelden</a></dt> - <dd>Verder bouwend op de basis van positionering uit het vorige hoofdstuk, gaan we nu proberen enkele voorbeelden uit het "echte leven" te bouwen, om te tonen welke zaken er mogelijk zijn met positionering.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox / flexibele dozen</a></dt> - <dd>Een nieuwe technologie, maar met sterke ondersteuning door de browsers. <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> wordt bijgevolg al veel gebruikt. Het verschaft hulpmiddelen die toestaan om zeer snel complexe, flexibele layouts te maken. Het staat toe om zaken te doen die traditioneel zeer moeilijk waren in CSS. Dit hoofdstuk legt de basis uit.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids / Rasters</a></dt> - <dd>Rastersystemen zijn nog een veel voorkomend kenmerk van CSS layouts, die dikwijls met behulp van floats of andere layoutmogelijkheden geïmplementeerd worden. Stel je voor dat layouts gebruik maken van een vast aantal kolommen (bv. 4, 6 of 12) en dat je inhoud binnen deze denkbeeldige kolommen wordt weergegeven. In dit hoofdstuk zullen we het basisidee verkennen dat leidde tot de creatie van een raster. We kijken verder naar voorgemaakt raster dat verschaft wordt door een rasterframework en eindigen door te experimenteren met CSS Rasters, een nieuwe mogelijkheid in de browser die het een pak makkelijker maakt om rasters te implementeren in CSS.</dd> -</dl> - -<h2 id="Beoordelingen">Beoordelingen</h2> - -<p>De volgende beoordelingen zullen je vaardigheid om pagina's vorm te geven met behulp van CSS testen.</p> - -<dl> - <dt>Een flexibele layout creëeren met meerdere kolommen (TBD)</dt> - <dd>Deze beoordeling test je vaardigheid in het creëeren van een standaard meerkolommige layout met enkele interessante kenmerken.</dd> - <dt>Een vastgeplakte controlewidget maken (TBD)</dt> - <dd>Deze beoordeling test je kunde in positionering doro je te vragen om een vastgeplakte controlewidget te maken die gebruikers toelaat om de instellingen van een web app te openen, ongeacht waar die gebruiker naartoe scrollt op de pagina.</dd> -</dl> diff --git a/files/nl/learn/css/css_layout/positioning/index.html b/files/nl/learn/css/css_layout/positioning/index.html deleted file mode 100644 index 647827a3b7..0000000000 --- a/files/nl/learn/css/css_layout/positioning/index.html +++ /dev/null @@ -1,468 +0,0 @@ ---- -title: Positionering -slug: Learn/CSS/CSS_layout/Positioning -tags: - - Article - - Beginner - - CSS - - CoderenScripten - - Gids - - Layout - - Positionering - - VAST - - absoluut - - relatief -translation_of: Learn/CSS/CSS_layout/Positioning -original_slug: Learn/CSS/CSS_layout/Positionering ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}</div> - -<p class="summary">Positionering laat je toe om elementen uit de normale layout flow te nemen, en ervoor te zorgen dat ze zich anders gedragen dan normaal. Bijvoorbeeld, dat ze boven op elkaar zitten, of altijd op dezelfde plaats in de viewport. Dit artikel overloopt de verschillende mogelijke waarden voor {{cssxref("position")}} en hoe die te gebruiken.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisites:</th> - <td>Basis van HTML (bestudeer <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introductie tot HTML</a>) en een idee van Hoe CSS werkt (bestudeer <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introductie tot CSS</a>.)</td> - </tr> - <tr> - <th scope="row">Objective:</th> - <td>Leren hoe CSS positionering werkt.</td> - </tr> - </tbody> -</table> - -<h2 id="Documentstroom">Documentstroom</h2> - -<p>Positionering is een behoorlijk complex onderwerkp, dus gaan we voor we in de code duiken de layout theorie herhalen en licht uitbreiden, zodat we een idee krijgen van hoe dit werkt.</p> - -<p>Ten eerste worden individuele element-dozen gelayout door de inhoud van het element te nemen, dan de vulling, rand en marge toe te voegen daar rond: kort gezegd is dat het <a href="https://developer.mozilla.org/nl/docs/Learn/CSS/Introduction_to_CSS/doosmodel">doosmodel</a>. Standaard neemt een blok-level element 100% van de beschikbare breedte in van zijn ouderelement, en is het even hoog als de eigen inhoud. Inline elementen zijn zo hoog en zo breed als hun inhoud. Je kan de breedte en hoogte niet instellen voor inline elementen, ze zitten gewoon in de inhoud van blok-level elementen. Indien je de grootte van een inline element wil instellen, moet je maken dat het zich gedraagt als een blok-level element met <code>display: block;</code>.</p> - -<p>Dit verklaart de individuele elementen, maar hoe zit het met de interactie tussen elementen? De <strong>normale layout flow</strong> (vermeld bij de inleiding van dit hoofdstuk) is het systeem volgens hetwelk de elementen binnen de viewport geplaatst worden. Standaard worden block-level elementen vertikaal uitgelegd in de viewport: elk block-level element zal op een nieuwe lijn onder het vorig element verschijnen, en ze zullen worden gescheiden door de marge die erop ingesteld wordt.</p> - -<p>Inline elementen gedragen zich anders, ze verschijnen niet op nieuwe regels. Zij worden op dezelfde regel geplaatst als andere inline elementen en tekstinhoud, op voorwaarde dat er plaats is om dat te doen binnen de breedte van het ouderelement. Indien er geen ruimte is dan zal de overvloeiende tekst of zullen de overvloeiende elementen naar een volgende regel verhuizen. </p> - -<p>Indien twee naast elkaar gelegen element allebei een marge hebben, en de twee marges raken elkaar, dan zal de kleinere marge verdwijnen. Dit noemen we <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">samenvallende marges</a>, wat we al eerder zagen.</p> - -<p>We illustreren dit alles met een eenvoudig voorbeeld:</p> - -<pre class="brush: html"><h1>Basic document flow</h1> - -<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> - -<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> - -<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> - -<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> - -<pre class="brush: css">body { - width: 500px; - margin: 0 auto; -} - -p { - background: aqua; - border: 3px solid blue; - padding: 10px; - margin: 10px; -} - -span { - background: red; - border: 1px solid black; -}</pre> - -<p>{{ EmbedLiveSample('Document_flow', '100%', 500) }}</p> - -<p>We komen nog een aantal keer terug op dit voorbeeld naarmate we door dit hoofdstuk verder gaan, om de effecten van de verschillende positioneringsmogelijkheden aan te tonen.</p> - -<p>We zouden graag hebben dat je met deze voorbeelden meevolgt op je lokale computer, indien mogelijk. Haal een kopie van <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html">0_basic-flow.html</a></code> af van onze Github repo (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html">broncode hier</a>) en gebruik dat als aanvangspunt.</p> - -<h2 id="Inleiding_tot_positionering">Inleiding tot positionering</h2> - -<p>Het idee achter positionering is dat het ons toelaat om de algemene documentstroom, die hierboven werd uiteengezet, te overschrijven. Wat indien je de positie van sommige dozen wil wijzigen om bv. een licht rare sfeer op te wekken? Positioneren is de manier waarop je dat kan. Of wat indien je een UI element wil maken dat boven de andere delen van de pagina drijft, en/of altijd in dezelfde plaats in het browservenster zweeft ook al wordt de pagina gescrolled? Positioneren maakt dit mogelijk.</p> - -<p>Er zijn een aantal verschillende soorten van positionering die je kan toepassen op HTML elementen. Om die in te stellen gebruiken we de {{cssxref("position")}} eigenschap.</p> - -<h3 id="Statische_positionering">Statische positionering</h3> - -<p>Statische positionering is de standaard voor elk element. Het betekent gewoon: "zet het element op zijn normale positie in de documentstroom, hier is niets speciaals te zien".</p> - -<p>Om dit te illustreren, en om je voorbeeld klaar te maken voor de volgende secties, voeg je de klasse <code>positioned</code> toe aan het tweede {{htmlelement("p")}} in de HTML:</p> - -<pre class="brush: html"><p class="positioned"> ... </p></pre> - -<p>Voeg nu de volgende regel toe aan de onderkant van je CSS:</p> - -<pre class="brush: css">.positioned { - position: static; - background: yellow; -}</pre> - -<p>Als je nu opslaat en herlaad, zal je maar één verschil zien: de veranderde achtergrondkleur van de tweede paragraaf. </p> - -<div class="note"> -<p><strong>Opmerking</strong>: Je kan het voorbeeld live zien op <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">zie broncode</a>).</p> -</div> - -<h3 id="Relatieve_positionering">Relatieve positionering</h3> - -<p>Relatieve positionering is de eerste soort positie die we regelmatig zullen bekijken. Deze soort is zeer gelijkaardig aan statische positionering, behalve dat eens het element zijn normale plaats in de normal layout flow heeft ingenomen, je de uiteindelijke positie nog kan wijzigen. Zo kan je het andere elementen laten overlappen op de pagina. Probeer de positiedeclaratie te updaten in je code:</p> - -<pre class="brush: css">position: relative;</pre> - -<p>Indien je nu opslaat en herlaad, zul je geen verandering zien in het resultaat. Hoe wijzig je dan de positie van het element? Je moet de {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, en {{cssxref("right")}} eigenschappen gebruiken, welke we hierna gaan bespreken.</p> - -<h3 id="Kennis_maken_met_top_bottom_left_and_right">Kennis maken met top, bottom, left, and right</h3> - -<p>{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, en {{cssxref("right")}} worden gebruikt in conjunctie met {{cssxref("position")}} om in te stellen waar het gepositioneerde element naar toe moet. Om dit uit te proberen kan je de volgende declaraties toevoegen aan de <code>.positioned</code> regel in je CSS:</p> - -<pre>top: 30px; -left: 30px;</pre> - -<div class="note"> -<p><strong>Opmerking</strong>: De waarden van deze eigenschappen kunnen alle <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">eenheden</a> aanvaarden die je logischerwijze zou verwachten: pixels, mm, rems, %, enz.</p> -</div> - -<p>IIndien je nu opslaat en herlaad zal je dit resultaat krijgen:</p> - -<div class="hidden"> -<pre class="brush: html"><h1>Relative positioning</h1> - -<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> - -<p class="positioned">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> - -<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> - -<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> - -<pre class="brush: css">body { - width: 500px; - margin: 0 auto; -} - -p { - background: aqua; - border: 3px solid blue; - padding: 10px; - margin: 10px; -} - -span { - background: red; - border: 1px solid black; -} - -.positioned { - position: relative; - background: yellow; - top: 30px; - left: 30px; -}</pre> -</div> - -<p>{{ EmbedLiveSample('Introducing_top_bottom_left_and_right', '100%', 500) }}</p> - -<p>Cool, niet? Dit was misschien niet wat je zou verwachten: waarom is het naar onder en naar rechts verschoven nadat we boven en links specifieerden? Hoe onlogisch het aanvankelijk ook mag klinken: dit is gewoon de manier waarop relatieve positionering werkt. Je moet denken aan een onzichtbare kracht die duwt tegen de zijkant van de gepositioneerde doos, waardoor die in de tegenovergestelde richting beweegt. Als je dus specifieert <code>top: 30px;</code>, dan duwt die kracht tegen de bovenkant van de doos waardoor die 30px naar beneden beweegt.</p> - -<div class="note"> -<p><strong>Opmerking</strong>: Je kan dit voorbeeld in actie zien op <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">zie broncode</a>).</p> -</div> - -<h3 id="Absolute_positionering">Absolute positionering</h3> - -<p>Absolute positionering geeft radicaal andere resultaten. Laten we proberen om de positie in onze declaratie als volgt te veranderen:</p> - -<pre>position: absolute;</pre> - -<p>Als je nu opslaat en herlaad, zou je iets moeten zien dat hier op trekt:</p> - -<div class="hidden"> -<pre class="brush: html"><h1>Absolute positioning</h1> - -<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> - -<p class="positioned">Now I'm absolutely positioned, I'm not playing by the rules any more!</p> - -<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> - -<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> - -<pre class="brush: css">body { - width: 500px; - margin: 0 auto; -} - -p { - background: aqua; - border: 3px solid blue; - padding: 10px; - margin: 10px; -} - -span { - background: red; - border: 1px solid black; -} - -.positioned { - position: absolute; - background: yellow; - top: 30px; - left: 30px; -}</pre> -</div> - -<p>{{ EmbedLiveSample('Absolute_positioning', '100%', 420) }}</p> - -<p>Merk ten eerste op dat het eerste en derde element na elkaar komen alsof het tweede element niet meer bestaat! Dit klopt ook: een absoluut gepositioneerd element bestaat niet meer in de normale document layout flow. In de plaats daarvan bestaat het in een eigen laag, die los staat van alle andere elementen. Dit is zeer bruikbaar: het betekent dat we geïsoleerde UI elementen kunnen maken die niet interageren met de positie van andere elementen op de pagina. Popups, menus, enz. zijn mogelijke voorbeelden.</p> - -<p>Merk ten tweede op dat de positie van het element veranderd is. Dit komt doordat {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, en {{cssxref("right")}} zich anders gedragen bij absolute positionering. In plaats van te specificeren in welke richting een element moet bewegen, specificeren ze de afstand die het element moet hebben van de zijde van het element waarin het vervat zit. In dit geval zeggen we dat het absoluut gepositioneerde element 30px van de bovenkant, en 30px van de linkerkant moet gepositioneerd zijn van het "vervattende" element.</p> - -<div class="note"> -<p><strong>Opmerking</strong>: Je kan {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, en {{cssxref("right")}} gebruiken om de grootte van elementen aan te passen indien nodig. Probeer volgende zaken in te stellen voor je gepositioneerde elementen en kijk wat er gebeurt: <code>top: 0; bottom: 0; left: 0; right: 0;</code> en <code>margin: 0;</code>. Zet die waarden nadien terug naar de originele waarden.</p> -</div> - -<div class="note"> -<p><strong>Opmerking</strong>: Ja, marges zijn nog steeds van toepassing op gepositioneerde elementen. Ze vallen echter niet samen.</p> -</div> - -<div class="note"> -<p><strong>Opmerking</strong>: Je kan dit voorbeeld live zien op <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">zie broncode</a>).</p> -</div> - -<h3 id="Positioneringscontexten">Positioneringscontexten</h3> - -<p>Welk element is het "vervattende element" van een absoluut gepositioneerd element? Standaard is dit het {{htmlelement("html")}} element: het gepositioneerde element is genest in de {{htmlelement("body")}} in de broncode, maar in de uiteindelijke layout is het 30px van de bovenkant en linkerkant van de rand van de pagina, en dat is het {{htmlelement("html")}} element. Dit wordt ook wel de <strong>positioneringscontext</strong> van het element genoemd.</p> - -<p>We kunnen de <strong>positioneringscontext</strong> (ten opzichte van welk element het absolute element relatief gepositioneerd wordt) veranderen. Dit wordt gedaan door één van de voorouders van het element te positioneren, maw. één van de elementen waarin het absoluut gepositioneerde element genest is (het is onmogelijk te positioneren relatief ten opzichte van een element waarin het niet genest is). Om dit te verduidelijken, voeg je de volgende declaratie toe aan de regel voor de body:</p> - -<pre>position: relative;</pre> - -<p>Dit zou het volgende resultaat moeten geven:</p> - -<div class="hidden"> -<pre class="brush: html"><h1>Positioning context</h1> - -<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> - -<p class="positioned">Now I'm absolutely positioned relative to the <code>&lt;body&gt;</code> element, not the <code>&lt;html&gt;</code> element!</p> - -<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> - -<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> - -<pre class="brush: css">body { - width: 500px; - margin: 0 auto; - position: relative; -} - -p { - background: aqua; - border: 3px solid blue; - padding: 10px; - margin: 10px; -} - -span { - background: red; - border: 1px solid black; -} - -.positioned { - position: absolute; - background: yellow; - top: 30px; - left: 30px; -}</pre> -</div> - -<p>{{ EmbedLiveSample('Positioning_contexts', '100%', 420) }}</p> - -<p>Het gepositioneerde element zit nu relatief ten opzichte van het {{htmlelement("body")}} element.</p> - -<div class="note"> -<p><strong>Opmerking</strong>: Je kan het voorbeeld live zien op <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">zie broncode</a>).</p> -</div> - -<h3 id="De_z-index">De z-index</h3> - -<p>Absolute positionering is leuk, maar er is iets anders waar we nog niet over gesproken hebben: welk element zal als bovenste worden weergegeven indien elementen overlappen? In het voorbeeld dat we tot nu toe zagen, positioneerden we slechts één element in de positioneringscontext. Dat element zal bovenaan staan, aangezien gepositioneerde elementen winnen van niet-gepositioneerde elementen. Maar wat als er meer dan één is?</p> - -<p>Probeer het volgende toe te voegen aan je CSS, waardoor de eerste paragraaf ook absoluut gepositioneerd zal worden:</p> - -<pre>p:nth-of-type(1) { - position: absolute; - background: lime; - top: 10px; - right: 30px; -}</pre> - -<p>Nu zal je de eerste, groengekleurde paragraaf uit de document flow zien bewegen, en een beetje hoger gepositioneerd worden dan waar hij normaal zou staan. Hij wordt ook weergegeven onder de andere gepositioneerde paragraaf, waar de twee overlappen. Dit is omdat de andere gepositioneerde paragraaf later komt in de broncode, en gepositioneerde elementen die later in de broncode komen zullen winnen van gepositioneerde elementen die eerder in de broncode komen.</p> - -<p>Kan je die volgorde veranderen? Jazeker, met behulp van de {{cssxref("z-index")}} eigenschap. "z-index" is een referentie naar de z-as. Je zal je misschien herinneren van eerdere punten in de uitleg waar we bespraken hoe webpagina's horizontale (x-as) en verticale (y-as) coördinaten gebruiken om de positionering te bepalen van zaken zoals achtergrondafbeeldingen en drop shadow offsets. (0,0) is linksboven aan de pagina (of aan het element), en de x- en y-assen lopen tot de rechteronderhoek van de pagina (voor talen die van links naar rechts gelezen worden).</p> - -<p>Webpaginas hebben ook een z-as: een denkbeeldige lijn die gaat van je scherm naar je gezicht (of wat het ook is dat je voor het scherm hebt). {{cssxref("z-index")}} waarden hebben bijgevolg een effect op waar de gepositioneerde elementen op de z-as staan: positieve waarden betekenen dat het element hoger zal komen, negatieve waarden betekenen dat het element lager zal komen. Standaard hebben gepositioneerde elementen een <code>z-index</code> van auto, wat praktisch gezien 0 is.</p> - -<p>Om de volgorde te veranderen, voeg je volgende declaratie toe aan de <code>p:nth-of-type(1)</code> regel:</p> - -<pre>z-index: 1;</pre> - -<p>Je zou nu het voltooide voorbeeld moeten zien:</p> - -<div class="hidden"> -<pre class="brush: html"><h1>z-index</h1> - -<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> - -<p class="positioned">Now I'm absolutely positioned relative to the <code>&lt;body&gt;</code> element, not the <code>&lt;html&gt;</code> element!</p> - -<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> - -<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> - -<pre class="brush: css">body { - width: 500px; - margin: 0 auto; - position: relative; -} - -p { - background: aqua; - border: 3px solid blue; - padding: 10px; - margin: 10px; -} - -span { - background: red; - border: 1px solid black; -} - -.positioned { - position: absolute; - background: yellow; - top: 30px; - left: 30px; -} - -p:nth-of-type(1) { - position: absolute; - background: lime; - top: 10px; - right: 30px; - z-index: 1; -} -</pre> -</div> - -<p>{{ EmbedLiveSample('Introducing_z-index', '100%', 400) }}</p> - -<p>Bemerk dat <code>z-index</code> enkel eenheidsloze waarden aanvaardt. Je kan niet specificeren dat je een element 23 pixels wil laten bewegen op de z-as, zo werkt het niet. Hogere waarden gaan boven lagere waarden, en het is aan jou om te bepalen welke waarden je gebruikt. 2 en 3 gebruiken zal het zelfde effect hebben als 300 en 40000 gebruiken.</p> - -<p>Merk ook op dat we binnen een enkele positioneringscontext bleven met ons voorbeeld. Indien je twee sets van gepositioneerde elementen zou hebben in een pagina, en je zou er voor willen zorgen dat ze overlappen en dat de volgorde volgens een bepaald patroon verloopt, dan zou het ingewikkeld worden. Gelukkig kom je zo'n complexiteit maar zelden tegen met de z-index. Als je in meer detail wil lezen hoe de z-index werkt, bekijk dan het <a href="https://www.w3.org/community/webed/wiki/CSS_absolute_and_fixed_positioning#The_third_dimension.E2.80.94z-index">Web Standards Curriculum z-index artikel.</a> In dit hoofdstuk hebben we je alle informatie gegeven die je momenteel nodig hebt.</p> - -<div class="note"> -<p><strong>Opmerking</strong>: Je kan het voorbeeld live zien op<code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">zie broncode</a>).</p> -</div> - -<h3 id="Fixed_positioning">Fixed positioning</h3> - -<p>There is one more type of positioning to cover — fixed. This works in exactly the same way as absolute positioning, with one key difference — whereas absolute positioning fixes an element in place relative to the {{htmlelement("html")}} element or its nearest positioned ancestor, fixed positioning fixes an element in place relative to the browser viewport itself. This means that you can create useful UI items that are fixed in place, like persisting navigation menus.</p> - -<p>Let's put together a simple example to show what we mean. First of all, delete the existing <code>p:nth-of-type(1)</code> and <code>.positioned</code> rules from your CSS.</p> - -<p>Now, update the <code>body</code> rule to remove the <code>position: relative;</code> declaration and add a fixed height, like so:</p> - -<pre>body { - width: 500px; - height: 1400px; - margin: 0 auto; -}</pre> - -<p>Now we're going to give the {{htmlelement("h1")}} element <code>position: fixed;</code>, and get it to sit at the top center of the viewport. Add the following rule to your CSS:</p> - -<pre>h1 { - position: fixed; - top: 0; - width: 500px; - margin: 0 auto; - background: white; - padding: 10px; -}</pre> - -<p>The <code>top: 0;</code> is required to make it stick to the top of the screen; we then give the heading the same width as the content column and use the faithful old <code>margin: 0 auto;</code> trick to center it. We then give it a white background and some padding, so the content won't be visible underneath it.</p> - -<p>If you save and refresh now, you'll see a fun little effect whereby the heading stays fixed, and the content appears to scroll up and disappear underneath it. But we could improve this more — at the moment some of the content starts off underneath the heading, because the positioned heading no longer appears in the document flow, so the rest of the content moves up to the top. We need to move it all down a bit; we can do this by setting some top margin on the first paragraph. Add this now:</p> - -<pre>p:nth-of-type(1) { - margin-top: 60px; -}</pre> - -<p>You should now see the finished example:</p> - -<div class="hidden"> -<pre class="brush: html"><h1>Fixed positioning</h1> - -<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> - -<p class="positioned">I'm not positioned any more...</p> - -<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> - -<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> - -<pre class="brush: css">body { - width: 500px; - height: 1400px; - margin: 0 auto; -} - -p { - background: aqua; - border: 3px solid blue; - padding: 10px; - margin: 10px; -} - -span { - background: red; - border: 1px solid black; -} - -h1 { - position: fixed; - top: 0px; - width: 500px; - margin: 0 auto; - background: white; - padding: 10px; -} - -p:nth-of-type(1) { - margin-top: 60px; -}</pre> - -<p> </p> -</div> - -<p>{{ EmbedLiveSample('Fixed_positioning', '100%', 400) }}</p> - -<div class="note"> -<p><strong>Opmerking</strong>: Je kan dit voorbeeld live aan het werk zien op <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">zie broncode</a>).</p> -</div> - -<h3 id="Experimental_position_sticky">Experimental: position sticky</h3> - -<p>There is a new positioning value available called <code>position: sticky</code>, support for which is not very widespread yet. This is basically a hybrid between relative and fixed position, which allows a positioned element to act like it is relatively positioned until it is scrolled to a certain threshold point (e.g. 10px from the top of the viewport), after which it becomes fixed. See our <a href="/en-US/docs/Web/CSS/position#Sticky_positioning">position: sticky reference entry</a> for more details and an example.</p> - -<h2 id="Samenvatting">Samenvatting</h2> - -<p>Ik ben er zeker van dat je plezier had om met de basis positionering te spelen. Het is één van de elementaire tools om complexe layouts te maken met CSS. Met dat in gedachten, zullen we in het volgende hoofdstuk nog meer plezier hebben met positionering: we gaan er een stap verder en bouwen enkele zaken die ook in de "echte wereld" nuttig zijn.</p> - -<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}</p> diff --git a/files/nl/learn/css/first_steps/index.html b/files/nl/learn/css/first_steps/index.html deleted file mode 100644 index 87e9ffe703..0000000000 --- a/files/nl/learn/css/first_steps/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Voor Beginners -slug: Learn/CSS/First_steps -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started -original_slug: Web/CSS/Voor_Beginners ---- -<p> -</p> -<h3 id="Introductie" name="Introductie"> Introductie </h3> -<p>Deze cursus is een introductie op <b>Cascading Style Sheets</b> (<b>CSS</b>). Het begeleid je door de basis eigenschappen van CSS met praktische voorbeelden die je zelf kan proberen op je eigen computer. Het is opgedeeld in twee delen. -</p> -<ul><li> Deel I illustreert de standaardeigenschappen van CSS, die werken in Mozilla browsers en ook in de meeste andere moderne browsers. -</li></ul> -<ul><li> Deel II bevat een aantal voorbeelden van speciale functies die werken in Mozilla, maar die niet noodzakelijk werken in andere omstandigheden. -</li></ul> -<p>Deze cursus is gebaseerd op de <a class="external" href="http://www.w3.org/TR/CSS21/">CSS 2.1 Specificatie</a>. -</p> -<h4 id="Wie_zou_deze_cursus_moeten_gebruiken.3F" name="Wie_zou_deze_cursus_moeten_gebruiken.3F"> Wie zou deze cursus moeten gebruiken? </h4> -<p>Deze cursus is grotendeels voor beginners, maar je kan het ook gebruiken als je al wat ervaring hebt met CSS. -</p><p>Als je een beginner bent met CSS, gebruik dan Deel I van deze cursus om te begrijpen wat CSS is en hoe je het moet gebruiken. Gebruik vervolgens Deel II om te leren hoe je CSS gebruikt in Mozilla. -</p><p>Als je al wat CSS kent, kan je de delen van de cursus overslaan die je al kent, en alleen de delen lezen die je interesseren. -</p><p>Als je ervaren bent met CSS maar niet in Mozilla, kun je direct naar Deel II gaan. -</p> -<h4 id="Wat_heb_je_nodig_voordat_je_begint.3F" name="Wat_heb_je_nodig_voordat_je_begint.3F"> Wat heb je nodig voordat je begint? </h4> -<p>Om het beste uit deze cursus te halen, heb je een editor nodig voor tekstbestanden en een Mozilla browser (Firefox of Mozilla Suite). Je moet ook weten hoe je deze moet gebruiken voor basishandelingen. -</p><p>Als je geen bestanden wilt veranderen, dan kun je alleen de cursus lezen en naar de plaatjes kijken, maar dat is een minder effectieve manier om te leren. -</p><p>Voor een aantal delen van deze cursus kan andere Mozilla software nodig zijn. Als je geen andere Mozilla software wil downloaden hoef je deze delen niet te volgen. -</p><p><strong>Let op:</strong> CSS zorgt voor een manier om met kleur te werken, dus delen van deze cursus hebben kleuren nodig. Je kunt deze delen van de cursus alleen makkelijk gebruiken als je een kleurenscherm en normaal kleurenzicht hebt. -</p> -<h4 id="Hoe_je_deze_cursus_moet_gebruiken" name="Hoe_je_deze_cursus_moet_gebruiken"> Hoe je deze cursus moet gebruiken </h4> -<p>Om deze cursus goed te gebruiken moet je de pagina's aandachtig en in volgorde lezen. Als je een pagina overslaat kan het moeilijk zijn latere pagina's te begrijpen. -</p><p>Gebruik de <i>Informatie</i> sectie op elke pagina om te begrijpen hoe CSS werkt. Gebruik de <i>Actie</i> sectie om CSS te proberen op je eigen computer. -</p><p>Om je begrip te testen, gebruik de uitdaging aan het einde van elke pagina. Uitkomsten voor sommige van deze uitdagingen worden op latere pagina's in de cursus bekend gemaakt. -</p><p>Om dieper in te gaan op CSS, lees de informatie die je kunt vinden in de kaders benoemd "<i>Meer details</i>". Gebruik de links daar om referentiemateriaal te vinden over CSS. -</p> -<h3 id="Cursus_Deel_I" name="Cursus_Deel_I"> Cursus Deel I </h3> -<p>Een basis stap-voor-stap gids. -</p> -<ol><li><b><a href="nl/CSS/Voor_Beginners/Wat_is_CSS">Wat is CSS?</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Waarom_CSS_Gebruiken">Waarom CSS Gebruiken?</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Hoe_CSS_Werkt">Hoe CSS Werkt</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/'Cascading'_en_nalatenschap">'Cascading' en nalatenschap</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Selectors">Selectors</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Leesbaar_CSS">Leesbaar CSS</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Text_Stijlen">Text Stijlen</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Kleur">Kleur</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Inhoud">Inhoud</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Lijsten">Lijsten</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Kaders">Kaders</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Layout">Layout</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Tabellen">Tabellen</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/Media">Media</a></b> -</li></ol> -<h3 id="Cursus_Deel_II" name="Cursus_Deel_II"> Cursus Deel II </h3> -<p>Voorbeelden die CSS in Mozilla laten zien. -</p> -<ol><li><b><a href="nl/CSS/Voor_Beginners/JavaScript">JavaScript</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/XBL_Bindingen">XBL Bindingen</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/CSS_en_XUL">CSS en XUL</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/CSS_en_SVG">CSS en SVG</a></b> -</li><li><b><a href="nl/CSS/Voor_Beginners/XML_data">XML data</a></b> -</li></ol> -{{ languages( { "en": "en/CSS/Getting_Started", "fr": "fr/CSS/Premiers_pas", "ja": "ja/CSS/Getting_Started", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar" } ) }} diff --git a/files/nl/learn/css/index.html b/files/nl/learn/css/index.html deleted file mode 100644 index aeb4f56374..0000000000 --- a/files/nl/learn/css/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: CSS -slug: Learn/CSS -tags: - - Beginner - - CSS - - CodingScripting - - Debugging - - Landing - - NeedsContent - - NeedsTranslation - - Topic - - TopicStub - - length - - specificity -translation_of: Learn/CSS ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Cascading Stylesheets — or {{glossary("CSS")}} — is the second technology you should start learning after {{glossary("HTML")}}. Whereas HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. So for example, you can use CSS to alter the font, color, size and spacing of your content, split it into multiple columns, or add animations and other decorative features.</p> - -<h2 id="Learning_pathway">Learning pathway</h2> - -<p>You should really learn the basics of HTML before attempting any CSS. We'd recommend that you work through our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module first — you can then learn about:</p> - -<ul> - <li>CSS, starting with the Introduction to CSS module</li> - <li>More advanced <a href="/en-US/Learn/HTML#Modules">HTML modules</a></li> - <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, and how to use it to add dynamic functionality to web pages</li> -</ul> - -<p>We'd recommend that you learn HTML and CSS at the same time, moving back and forth between the two topics. This is because HTML is far more interesting with CSS, and you can't really learn CSS without knowing HTML.</p> - -<p>Before starting this topic, you should also have at least basic familiarity with using computers, and using the Web passively (i.e. just looking at it, consuming the content.) You should have a basic work environment set up as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and understand how to create and manage files, as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — both are parts of our <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p> - -<p>It is recommended that you work through <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> before attempting this topic, however it isn't absolutely necessary; much of what is covered in the CSS basics article is also covered in our Introduction to CSS module, albeit in a lot more detail.</p> - -<h2 id="Modules">Modules</h2> - -<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p> - -<dl> - <dt><a href="/nl/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></dt> - <dd>This module gets you started with the basics of how CSS works, including selectors and properties, writing CSS rules, applying CSS to HTML, how to specify length, color, and other units in CSS, cascade and inheritance, box model basics, and debugging CSS.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a></dt> - <dd>Here we look at text styling fundamentals, including setting font, boldness, and italics, line and letter spacing, and drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a></dt> - <dd>Next up, we look at styling boxes, one of the fundamental steps towards laying out a web page. In this module we recap the box model then look at controlling box layouts by setting padding, borders and margins, setting custom background colors, images and other features, and fancy features such drop shadows and filters on boxes.</dd> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt> - <dd>At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so can now dive deep into CSS layout, looking at different display settings, traditional layout methods involving float and positioning, and new fangled layout tools like flexbox.</dd> - <dt>Responsive design (TBD)</dt> - <dd>With some many different types of devices able to browser the Web these days, <a href="/en-US/docs/Web/Guide/Responsive_design">responsive web design</a> (RWD) has become a core web development skill. This module will cover the basic principles and tools of RWD, explain how to apply different CSS to a document depending on device features like screen width, orientation, and resolution, and explore the technologies available for serving different video and images depending on such features.</dd> -</dl> - -<h2 id="Solving_common_CSS_problems">Solving common CSS problems</h2> - -<p><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a> provides links to sections of content explaining how to use CSS to solve very common problems when creating a webpage: Styling boxes,</p> - -<h2 id="See_also">See also</h2> - -<dl> - <dt><a href="/en-US/docs/Web/CSS">CSS on MDN</a></dt> - <dd>The main entry point for CSS documentation on MDN, where you'll find detailed reference documentation for all features of the CSS language. Want to know all the values a property can take? This is a good place to go.</dd> -</dl> diff --git a/files/nl/learn/forms/advanced_form_styling/index.html b/files/nl/learn/forms/advanced_form_styling/index.html deleted file mode 100644 index 11903ed7b2..0000000000 --- a/files/nl/learn/forms/advanced_form_styling/index.html +++ /dev/null @@ -1,437 +0,0 @@ ---- -title: Geavanceerde styling van HTML-formulieren -slug: Learn/Forms/Advanced_form_styling -tags: - - CSS - - Formulieren - - Geavanceerd - - Gids - - HTML - - Web - - voorbeeld -translation_of: Learn/Forms/Advanced_form_styling -original_slug: Learn/HTML/Forms/Geavanceerde_styling_van_HTML-formulieren ---- -<p>In dit artikel wordt ingegaan op het gebruik van <a href="/nl/docs/Web/CSS">CSS </a>in <a href="nl/docs/Learn/HTML/Forms/Styling_HTML_forms">HTML</a>-formulieren om moeilijk te stijlen widgetsaan te passen. Zoals in vorig artikel werd aangegeven vormen tekstvelden en knoppen geen enkel probleem in CSS. Hier wordt dieper ingegaan op de donkere kant van het stijlen van HTML-formulieren.</p> - -<p>Even ter herinnering:</p> - -<dl> - <dt>The bad</dt> - <dd>Elementen die moeilijk aan te passen zijn en die ingewikkelde trucs nodig hebben en soms ook geavanceerde kennis van CSS3.</dd> - <dt>The ugly</dt> - <dd>Elementen die praktisch niet kunnen aangepast worden. In het beste geval kunnen enkele zaken gedaan worden maar die werken dan weer niet in andere browsers. Volledige controle over de stijl van dergelijke elementen is onmogelijk.</dd> -</dl> - -<h2 id="CSS_uiterlijk">CSS uiterlijk</h2> - -<p>Het probleem met formulierwidgets andere dan tekstvelden en knoppen, is dat in veel gevallen CSS niet expressief genoeg is.</p> - -<p>Recent is daar wel verbetering in gekomen:</p> - -<ul> - <li><a href="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes" rel="external" title="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes">CSS 2.1</a> was zeer beperkt en omvatte slechts drie pseudoklassen: - - <ul> - <li>{{cssxref(":active")}}</li> - <li>{{cssxref(":focus")}}</li> - <li>{{cssxref(":hover")}}</li> - </ul> - </li> - <li><a href="http://www.w3.org/TR/css3-selectors/" rel="external" title="http://www.w3.org/TR/css3-selectors/">CSS Selector Level 3</a> voegt enkele nieuwe pseudoklassen toe: - <ul> - <li>{{cssxref(":enabled")}}</li> - <li>{{cssxref(":disabled")}}</li> - <li>{{cssxref(":checked")}}</li> - <li>{{cssxref(":indeterminate")}}</li> - </ul> - </li> - <li><a href="http://dev.w3.org/csswg/css3-ui/#pseudo-classes" rel="external" title="http://dev.w3.org/csswg/css3-ui/#pseudo-classes">CSS Basic UI Level 3</a> voegt ook enkele pseudoklassen toe om de toestand van het element te beschrijven: - <ul> - <li>{{cssxref(":default")}}</li> - <li>{{cssxref(":valid")}}</li> - <li>{{cssxref(":invalid")}}</li> - <li>{{cssxref(":in-range")}}</li> - <li>{{cssxref(":out-of-range")}}</li> - <li>{{cssxref(":required")}}</li> - <li>{{cssxref(":optional")}}</li> - <li>{{cssxref(":read-only")}}</li> - <li>{{cssxref(":read-write")}}</li> - </ul> - </li> - <li><a href="http://dev.w3.org/csswg/selectors4/" rel="external" title="http://dev.w3.org/csswg/selectors4/">CSS Selector Level 4</a> is op het ogenblik in de ontwikkelingsfaze en lijkt niet veel bij te dragen aan de verbetering van formulieren: - <ul> - <li>{{cssxref(":user-error")}} is slechts een verbetering van de {{cssxref(":invalid")}} pseudoklasse.</li> - </ul> - </li> -</ul> - -<p>Dit alles is een goed begin maar er zijn twee problemen: ten eerste een aantal browsers implementeert niet verder dan CSS 2.1. En ten tweede zijn deze nauwelijks voldoende om ingewikkelde formulieren te stylen. Zoals bijvoorbeeld <code>datepicker</code> dat toelaat een datum te kiezen uit een lijst van datums.</p> - -<p>Er zijn bij sommige browsers experimenten gaande betreffende de presentatie van formulieren en soms is het nuttig te weten wat er bestaat.</p> - -<div class="warning"> -<p><strong>Waarschuwing:</strong> ondanks dat die experimenten aantrekkelijk lijken, <strong>zijn zij niet standaard, hetgeen betekent dat zij niet betrouwbaar zijn</strong>. Gebruik ervan is op eigen risico en misschien is het beter van ze niet te gebruiken want <a href="http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/" title="http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/">men zou iets kunnen doen dat slecht is voor het Web</a> door niet-standaard eigenschappen te gebruiken.</p> -</div> - -<ul> - <li><a href="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions" title="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions">Mozilla CSS Uitbreidingen</a> - - <ul> - <li>{{cssxref(":-moz-placeholder")}}</li> - <li>{{cssxref(":-moz-submit-invalid")}}</li> - <li>{{cssxref(":-moz-ui-invalid")}}</li> - <li>{{cssxref(":-moz-ui-valid")}}</li> - </ul> - </li> - <li><a href="/en-US/docs/CSS/CSS_Reference/Webkit_Extensions" title="/en-US/docs/CSS/CSS_Reference/Webkit_Extensions">WebKit CSS Uitbreidingen</a> - <ul> - <li>{{cssxref("::-webkit-input-placeholder")}}</li> - <li><a href="http://trac.webkit.org/wiki/Styling%20Form%20Controls" rel="external" title="http://trac.webkit.org/wiki/Styling Form Controls">En veel meer</a></li> - </ul> - </li> - <li><a href="http://msdn.microsoft.com/en-us/library/ie/hh869403%28v=vs.85%29.aspx" rel="external" title="http://msdn.microsoft.com/en-us/library/ie/hh869403%28v=vs.85%29.aspx">Microsoft CSS Uitbreidingen</a> - <ul> - <li><a href="http://msdn.microsoft.com/en-us/library/ie/hh772745%28v=vs.85%29.aspx" rel="external" title="http://msdn.microsoft.com/en-us/library/ie/hh772745%28v=vs.85%29.aspx">:-ms-input-placeholder</a></li> - </ul> - </li> - <li><a href="http://www.opera.com/docs/specs/" rel="external" title="http://www.opera.com/docs/specs/">Opera heeft geen uitbreidingen met betrekking tot HTML-formulieren</a></li> -</ul> - -<h3 id="De_presentatie_van_formulierelementen_instellen">De presentatie van formulierelementen instellen</h3> - -<p>Browsers gebaseerd op WebKit (Chrome, Safari) en Gecko (Firefox) kunnen het best overweg met aanpassing van HTML-elementen. Zij zijn ook over platformen heen inzetbaar omdat zij een mechanisme hebben om over te schakelen tussen natuurlijk uitzicht en aanvoelen en elementen die door de gebruiker kunen aangepast worden.</p> - -<p>Hiertoe gebruiken zij de eigenschap: {{cssxref("-webkit-appearance")}} of {{cssxref("-moz-appearance")}}. <strong>Deze eigenschappen zijn niet standaard en worden best niet gebruikt</strong>. Zij gedragen zich zelfs verschillend in WebKit en in Gecko. Eén waarde is wel goed te gebruiken: <code>none</code>. Met deze waarde heeft men (praktisch volledige) controle over de stijl van bepaalde widgets.</p> - -<p>Hieronder enkele voorbeelden. Het gebruik is het best aan te tonen bij zoekvelden met WebKit browsers:</p> - -<pre class="brush: html"><form> - <input type="search"> -</form></pre> - -<pre class="brush: css"><style> -input[type=search] { - border: 1px dotted #999; - border-radius: 0; - - -webkit-appearance: none; -} -</style></pre> - -<div class="note"> -<p><strong>Nota:</strong> het is altijd moeilijk de toekomst te voorspellen betreffende web<span class="ng-binding"><span class="highlighted">technologie</span>ën</span>, maar CSS-uitbreidingen zijn niet eenvoudig en er gebeurt ook onderzoek naar andere specificaties zoals <a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html" rel="external" title="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html">Shadow DOM</a> dat enig perspectief biedt. De zoektocht naar het volledig aanpasbaar formulier is nog lang niet over.</p> -</div> - -<h2 id="Voorbeelden">Voorbeelden</h2> - -<h3 id="Keuzevakjes_en_keuzerondjes">Keuzevakjes en keuzerondjes</h3> - -<p>Het voorkomen van keuzevakjes en -rondjes is nogal rommelig. Zo is het bijvoorbeeld niet de bedoeling om de afmetingen van keuzevakjes en -rondjes te wijzigen en sommige browsers kunnen nogal verschillend reageren wanneer men dit tracht te doen.</p> - -<h4 id="Een_eenvoudige_test">Een eenvoudige test</h4> - -<pre class="brush: html"><span><input type="checkbox"></span></pre> - -<pre class="brush: css">span { - display: inline-block; - background: red; -} - -input[type=checkbox] { - width : 100px; - height: 100px; -}</pre> - -<p>Zo wordt dit in de verschillende browsers weergegeven:</p> - -<table> - <thead> - <tr> - <th scope="col">Browser</th> - <th scope="col">Rendering</th> - </tr> - </thead> - <tbody> - <tr> - <td>Firefox 16 (Mac OSX)</td> - <td><img alt="Rendering of a sized check box on Firefox" src="/files/4165/checkbox-firefox-macos.png" style="height: 106px; width: 107px;"></td> - </tr> - <tr> - <td>Chrome 22 (Mac OSX)</td> - <td><img alt="Rendering of a sized check box on Chrome" src="/files/4163/checkbox-chrome-macos.png" style="height: 106px; width: 106px;"></td> - </tr> - <tr> - <td>Opera 12.01 (Mac OSX)</td> - <td><img alt="Rendering of a sized check box on Opera" src="/files/4167/checkbox-opera-macos.png" style="height: 106px; width: 107px;"></td> - </tr> - <tr> - <td>Internet Explorer 9 (Windows 7)</td> - <td><img alt="Rendering of a sized check box on IE9" src="/files/4169/checkbox-IE9-win7.png" style="height: 107px; width: 106px;"></td> - </tr> - <tr> - <td>Internet Explorer 7 (Windows XP)</td> - <td><img alt="Rendering of a sized check box on IE7" src="/files/4171/checkbox-IE7-winxp.png" style="height: 100px; width: 100px;"></td> - </tr> - </tbody> -</table> - -<h4 id="Een_ingewikkelder_voorbeeld">Een ingewikkelder voorbeeld</h4> - -<p>Omdat Opera en Internet Explorer geen eigenschappen hebben als {{cssxref("-webkit-appearance")}} of {{cssxref("-moz-appearance")}}, is het niet mogelijk deze te gebruiken. CSS is gelukkig wel in staat om dit te omzeilen. Neem het volgend klassiek voorbeeld:</p> - -<pre class="brush: html"><form> - <fieldset> - <p> - <input type="checkbox" id="first" name="fruit-1" value="cherry"> - <label for="first">I like cherry</label> - </p> - <p> - <input type="checkbox" id="second" name="fruit-2" value="banana" disabled> - <label for="second">I can't like banana</label> - </p> - <p> - <input type="checkbox" id="third" name="fruit-3" value="strawberry"> - <label for="third">I like strawberry</label> - </p> - </fieldset> -</form></pre> - -<p>met als basisstijl:</p> - -<pre class="brush: css">body { - font: 1em sans-serif; -} - -form { - display: inline-block; - - padding: 0; - margin : 0; -} - -fieldset { - border : 1px solid #CCC; - border-radius: 5px; - margin : 0; - padding: 1em; -} - -label { - cursor : pointer; -} - -p { - margin : 0; -} - -p+p { - margin : .5em 0 0; -}</pre> - -<p>Aanpassing van het keuzevakje:</p> - -<p>De bedoeling is het basis keuzevakje te vervangen door een eigen keuze. Onze keuze moet dezelfde toestanden kennen als het originele keuzevak. Deze toestanden zijn: aangevinkt, niet-aangevinkt, niet-aktief aangevinkt en niet-actief niet-aangevinkt. Dit ziet er als volgt uit:</p> - -<p><img alt="Check box CSS Sprite" src="/files/4173/checkbox-sprite.png" style="height: 64px; width: 16px;"></p> - -<p>Vooreerst moeten de originele keuzevakjes verborgen worden. Daartoe worden ze buiten het gezichtsveld geplaatst. Hierbij moeten twee zaken in acht genomen worden:</p> - -<ul> - <li>Om de keuzevakjes te verbergen mag <code>display:none</code> niet gebruikt worden omdat de gebruiker ze nog moet kunnen bedienen. Hij moet ze immers kunnen aan- of uitvinken. Met <code>display:none</code> is het keuzevak niet meer toegankelijk voor de gebruiker.</li> - <li>De vormgeving gebeurt door CSS3. Om compatibel te blijven met oudere browsers wordt de {{cssxref(":root")}} pseudoklasse gebruikt. Oudere browsers, als Internet Explorer, tonen dan een gewoon keuzevak, terwijl de moderne browsers het aangepaste keuzevak zullen tonen.</li> -</ul> - -<pre class="brush: css">:root input[type=checkbox] { - /* original check box are push outside the viexport */ - position: absolute; - left: -1000em; -}</pre> - -<p>Dan moet het eigen keuzevak toegevoegd worden. Daarvoor wordt gebruik gemaakt van het {{cssxref(":before")}} pseudo-element dat behoort bij het {{HTMLElement("label")}} element van het oorspronkelijk keuzevak. Dan wordt het keuzevak geselecteerd en door middel van de <a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">adjacent sibling selector </a>wordt het bijbehorende label geselecteerd. Tenslotte wordt het {{cssxref(":before")}} pseudo-element ingevoegd en wordt bepaald hoe het keuzevakje er moet uitzien.</p> - -<pre class="brush: css">:root input[type=checkbox] + label:before { - content: ""; - display: inline-block; - width : 16px; - height : 16px; - margin : 0 .5em 0 0; - background: url("https://developer.mozilla.org/files/4173/checkbox-sprite.png") no-repeat 0 0; - -/* The following is used to adjust the position of - the check boxes on the text baseline */ - - vertical-align: bottom; - position: relative; - bottom: 2px; -}</pre> - -<p>De toestand van ket keuzevakje wordt vastgelegd met de {{cssxref(":checked")}} en {{cssxref(":disabled")}} pseudoklassen. Omdat er met CSS sprite wordt gewerkt moet alleen de positie van de achtergrond aangepast worden.</p> - -<pre class="brush: css">:root input[type=checkbox]:checked + label:before { - background-position: 0 -16px; -} - -:root input[type=checkbox]:disabled + label:before { - background-position: 0 -32px; -} - -:root input[type=checkbox]:checked:disabled + label:before { - background-position: 0 -48px; -}</pre> - -<p>Er moet nog een (zeer) belangrijk punt afgewerkt worden. Als de gebruiker het toetsenbord gebruikt om tussen de widgets te navigeren, moet er visueel aangegeven worden welke widget de focus heeft. Omdat de originele keuzevakjes verborgen zijn, moet dat op een of andere manier opgevangen worden. Dit wordt op de volgende manier gedaan:</p> - -<pre class="brush: css">:root input[type=checkbox]:focus + label:before { - outline: 1px dotted black; -}</pre> - -<p>Hier een voorbeeld:</p> - -<p>{{EmbedLiveSample("A_more_complex_example", 250, 130)}}</p> - -<h3 id="Het_probleem_met_select">Het probleem met select</h3> - -<p>Het {{HTMLElement("select")}} element is een 'lelijk' element omdat het onmogelijk consistent kan gestyled worden over platformen heen. Er zijn nochtans enkele mogelijkheden. Een voorbeeld:</p> - -<pre class="brush: html"><select> - <option>Cherry</option> - <option>Banana</option> - <option>Strawberry</option> -</select></pre> - -<pre class="brush: css">select { - width : 80px; - padding : 10px; -} - -option { - padding : 5px; - color : red; -}</pre> - -<p>De volgende tabel toont hoe de verschillende browsers er mee omgaan. De twee eerste kolommen zijn het gewone voorbeeld. De twee volgende kolommen geven aan wat er gebeurt met de widgets bij gebruik van aangepaste CSS:</p> - -<pre class="brush: css">select, option { - -webkit-appearance : none; /* To gain control over the appearance on WebKit */ - -moz-appearance : none; /* To gain control over the appearance on Gecko */ - - /* Om de weergave bij Presto (Opera) en Trident (IE) aan te passen. - Noteer dat dit ook werkt bij Gecko en deels bij WebKit */ - background : none; -}</pre> - -<table class="standard-table"> - <thead> - <tr> - <th colspan="1" rowspan="2" scope="col">Browser</th> - <th colspan="2" scope="col" style="text-align: center;">Normale weergave</th> - <th colspan="2" scope="col" style="text-align: center;">Aangepaste weergave</th> - </tr> - <tr> - <th scope="col" style="text-align: center;">gesloten</th> - <th scope="col" style="text-align: center;">open</th> - <th scope="col" style="text-align: center;">gesloten</th> - <th scope="col" style="text-align: center;">open</th> - </tr> - </thead> - <tbody> - <tr> - <td>Firefox 16 (Mac OSX)</td> - <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Firefox on Mac OSX (No tweak)" src="/files/4201/select-firefox-macos.png" style="height: 52px; width: 82px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="Select open on Firefox on Mac OSX (No tweak)" src="/files/4199/select-firefox-macos-open.png" style="height: 143px; width: 105px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Firefox on Mac OSX" src="/files/4197/select-firefox-macos-custom.png" style="height: 52px; width: 82px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="Select open on Firefox on Mac OSX" src="/files/4195/select-firefox-macos-custom-open.png" style="height: 141px; width: 108px;"></td> - </tr> - <tr> - <td>Firefox 16 (Windows 7)</td> - <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Firefox on Windows 7 (No tweak)" src="/files/4209/select-firefox-win7.png" style="height: 50px; width: 82px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="Select open on Firefox on Windows 7 (No tweak)" src="/files/4207/select-firefox-win7-open.png" style="height: 130px; width: 96px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Firefox on Windows 7" src="/files/4205/select-firefox-win7-custom.png" style="height: 54px; width: 82px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="Select open on Firefox on Windows 7" src="/files/4203/select-firefox-win7-custom-open.png" style="height: 134px; width: 96px;"></td> - </tr> - <tr> - <td>Chrome 22 (Mac OSX)</td> - <td style="vertical-align: top; text-align: center;"><img alt="Select closed on Chrome on Mac OSX (No tweak)" src="/files/4183/select-chrome-macos.png" style="height: 21px; vertical-align: top; width: 84px;"></td> - <td style="vertical-align: top; text-align: center;"><img alt="Select open on Chrome on Mac OSX (No tweak)" src="/files/4181/select-chrome-macos-open.png" style="height: 81px; vertical-align: top; width: 121px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Chrome on Mac OSX" src="/files/4179/select-chrome-macos-custom.png" style="height: 37px; vertical-align: top; width: 82px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="Select open on Chrome on Mac OSX" src="/files/4177/select-chrome-macos-custom-open.png" style="height: 86px; vertical-align: top; width: 125px;"></td> - </tr> - <tr> - <td>Chrome 22 (Windows 7)</td> - <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Chrome on Windows 7 (No tweak)" src="/files/4191/select-chrome-win7.png" style="height: 42px; vertical-align: top; width: 82px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="Select open on Chrome on Windows 7 (No tweak)" src="/files/4189/select-chrome-win7-open.png" style="height: 93px; width: 84px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Chrome on Windows 7" src="/files/4187/select-chrome-win7-custom.png" style="height: 42px; width: 82px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="Select open on Chrome on Windows 7" src="/files/4185/select-chrome-win7-custom-open.png" style="height: 93px; width: 95px;"></td> - </tr> - <tr> - <td>Opera 12.01 (Mac OSX)</td> - <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Opera on Mac OSX (No tweak)" src="/files/4225/select-opera-macos.png" style="height: 42px; width: 81px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="Select open on Opera on Mac OSX (No tweak)" src="/files/4223/select-opera-macos-open.png" style="height: 94px; width: 135px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Opera on Mac OSX" src="/files/4221/select-opera-macos-custom.png" style="height: 39px; width: 81px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="Select open on Opera on Mac OSX" src="/files/4219/select-opera-macos-custom-open.png" style="height: 90px; width: 130px;"></td> - </tr> - <tr> - <td>Internet Explorer 9 (Windows 7)</td> - <td style="text-align: center; vertical-align: top;"><img alt="Select closed on IE9 on Windows 7" src="/files/4217/select-IE9-win7.png" style="height: 41px; width: 82px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="Select open on IE9 on Windows 7" src="/files/4215/select-IE9-win7-open.png" style="height: 78px; width: 100px;"></td> - <td style="text-align: center; vertical-align: middle;">n.v.t.</td> - <td style="text-align: center; vertical-align: middle;">n.v.t.</td> - </tr> - <tr> - <td>Internet Explorer 7 (Windows XP)</td> - <td style="text-align: center; vertical-align: top;"><img alt="Select closed on IE7 on Windows XP" src="/files/4213/select-IE7-winxp.png" style="height: 23px; width: 81px;"></td> - <td style="text-align: center; vertical-align: top;"><img alt="Select open on IE7 on Windows XP" src="/files/4211/select-IE7-winxp-open.png" style="height: 74px; width: 82px;"></td> - <td style="text-align: center; vertical-align: middle;">n.v.t.</td> - <td style="text-align: center; vertical-align: middle;">n.v.t.</td> - </tr> - </tbody> -</table> - -<p>Ondanks het gebruik van de<code> -*-appearance</code> eigenschap zijn er nog enkele problemen:</p> - -<ul> - <li>De {{cssxref("padding")}} eigenschap wordt nog steeds niet gelijk behandeld in alle browsers.</li> - <li>De oude Internet Explorer laat geen soepele styling toe.</li> - <li>Firefox laat niet toe de pijl van het afrolmenu te stylen.</li> - <li>Bij het stylen van de {{HTMLElement("option")}} elementen binnen de afrollijst verschillen het gedrag van Chrome en Opera van systeem tot systeem.</li> -</ul> - -<p>En dit voorbeeld gaat slechts over drie CSS-eigenschappen. Wat als er nog meer eigenschappen zijn? Zoals het voorbeeld aantoont kan met CSS de voorstelling en het aanvoelen van deze widgets niet consequent toegepast worden. Maar een en ander kan wel aangepast worden als men aanvaardt dat er kleine verschillen zullen zijn tussen de ene browser en de andere en tussen het ene besturingssysteem en het andere.</p> - -<p>In het volgend artikel wordt nagegaan welke eigenschappen in aanmerking komen: <a href="/en-US/docs/">Tabel van compatibele formulierelementen</a>.</p> - -<h2 id="De_weg_naar_mooiere_formulieren_nuttige_bibliotheken_en_polyfills">De weg naar mooiere formulieren: nuttige bibliotheken en polyfills</h2> - -<p>Terwijl CSS zeer bruikbaar is voor keuzevakjes en keuzerondjes, is dat niet zo voor geavanceerde elementen. Ondanks dat enkele zaken mogelijk zijn met het {{HTMLElement("select")}} element, kan de bestandsdialoog helemaal niet aangepast worden. Hetzelfde geldt voor datumpicker, enz.</p> - -<p>Als volledige controle over formulierelementen gewenst is, zit er niets anders op dan JavaScript te gebruiken. In het artikel <a href="/en-US/docs/">Het maken van aangepaste widgets</a> wordt getoond hoe men zelf widgets kan aanpassen, maar er zijn ook enkele bibliotheken die van nut kunnen zijn:</p> - -<ul> - <li><a href="http://sprawsm.com/uni-form/" rel="external" title="http://sprawsm.com/uni-form/">Uni-form</a> is een kader dat formulieropmaak standaardiseert met CSS. Er is ook een optie voor extra mogelijkheden samen met jQuery.</li> - <li><a href="http://formalize.me/" rel="external" title="http://formalize.me/">Formalize</a> is een uitbreiding van JavaScript (zoals jQuery, Dojo, YUI, enz.) die formulieren aanpast en normaliseert.</li> - <li><a href="http://www.emblematiq.com/lab/niceforms/" rel="external" title="http://www.emblematiq.com/lab/niceforms/">Niceforms</a> is een standalone JavaScript methode die volledige websites kan aanpassen.</li> -</ul> - -<p>De volgende bibliotheken zijn niet uitsluitend voor formulieren, maar zijn zeer interessant:</p> - -<ul> - <li><a href="http://jqueryui.com/" rel="external" title="http://jqueryui.com/">jQuery UI</a> biedt zeer interessante geavanceerde en aanpasbare widgets zoals datumpickers (met speciale aandacht voor toegankelijkheid).</li> - <li><a href="http://twitter.github.com/bootstrap/base-css.html#forms" rel="external" title="http://twitter.github.com/bootstrap/base-css.html#forms">Twitter Bootstrap</a> is zeer nuttig bij het normaliseren van formulieren.</li> - <li><a href="http://afarkas.github.com/webshim/demos/demos/webforms.html" rel="external" title="http://afarkas.github.com/webshim/demos/demos/webforms.html">WebShim</a> is een uitgebreid gereedschap dat HTML5 ondersteunt. Het gedeelte over webformulieren kan zeer nuttig zijn.</li> -</ul> - -<p>Houd er echter rekening mee dat de combinatie van CSS en JavaScript ook neveneffecten kan hebben. Bij gebruik van deze bibliotheken dient men steeds te beschikken over stylesheets waarop men kan terugvallen als het script niet werkt. Er zijn vele redenen waarom een script niet werkt, vooral in de mobiele wereld. En een website of een app moet er op voorzien zijn om deze gevallen op te vangen.</p> - -<h2 id="Besluit">Besluit</h2> - -<p>Ondanks dat er hiaten zijn bij het gebruik van CSS in HTML-formulieren, is er dikwijls toch wel een manier om deze te omzeilen. Er is geen algemene oplossing, maar de moderne browsers bieden altijd nieuwe mogelijkheden. Voor 't ogenblik is de beste oplossing te leren hoe de verschillende browsers CSS ondersteunen bij het maken van HTML-formulieren.</p> - -<p>In het volgend artikel wordt ingegaan op hoe de diverse HTML-formulierelementen de meest belangrijke CSS eigenschappen ondersteunen: <a href="/en-US/docs/">Tabel van compatibele formulierelementen</a>.</p> - -<h2 id="Zie_ook">Zie ook</h2> - -<ul> - <li><a href="http://diveintohtml5.info/forms.html" rel="external" title="http://diveintohtml5.info/forms.html">HTML5: Formulieren</a></li> - <li><a href="http://www.smashingmagazine.com/2011/06/27/useful-ideas-and-guidelines-for-good-web-form-design/" rel="external" title="http://www.smashingmagazine.com/2011/06/27/useful-ideas-and-guidelines-for-good-web-form-design/">Nuttige ideeën en leidraden voor goed ontwerpen van webformulieren</a></li> -</ul> diff --git a/files/nl/learn/forms/basic_native_form_controls/index.html b/files/nl/learn/forms/basic_native_form_controls/index.html deleted file mode 100644 index 5b83a25f57..0000000000 --- a/files/nl/learn/forms/basic_native_form_controls/index.html +++ /dev/null @@ -1,1449 +0,0 @@ ---- -title: The native form widgets -slug: Learn/Forms/Basic_native_form_controls -tags: - - Formulier - - HTML - - HTML5 - - voorbeeld -translation_of: Learn/Forms/Basic_native_form_controls -original_slug: Learn/HTML/Forms/The_native_form_widgets ---- -<p><a href="/en-US/docs/HTML/Forms" title="/en-US/docs/HTML/Forms">HTML formulieren</a> bestaan uit widgets. Widgets zijn besturingselementen die door elke browser ondersteunt worden. In dit artikel wordt besproken hoe elke widget werkt en hoe goed hij ondersteund wordt door de verschillende browsers.</p> - -<p>Bijzondere aandacht gaat naar de ingebouwde widgets voor formulieren. Omdat HTML formulieren eerder beperkt zijn en de kwaliteit over de browsers heen nogal verschillend kan zijn, bouwen webontwikkelaars hun eigen widgets. Dit wordt uitgelegd in het artikel: <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">Hoe aangepaste widgets maken</a>.</p> - -<h2 id="Velden_voor_tekstinvoer">Velden voor tekstinvoer</h2> - -<p>Velden voor tekstinvoer zijn de meest basale formulierwidgets. Zij vormen een gemakkelijke manier om willekeurige gegevens in te voeren. Sommige tekstvelden echter kunnen gespecialiseerd worden om aan bepaalde behoeften te voldoen.</p> - -<p>Tekstvelden van HTML formulieren zijn eenvoudige tekstvelden die alleen platte tekst aanvaarden. Dit betekent dat <a href="/en-US/docs/Rich-Text_Editing_in_Mozilla" title="/en-US/docs/Rich-Text_Editing_in_Mozilla">rich editing</a> (vet, cursief, enz.) niet mogelijk is. Alle rich text editors hebben aangepaste widgets.</p> - -<p>Alle tekstvelden hebben enkele gemeenschappelijke eigenschappen:</p> - -<ul> - <li>Zij kunnen gemarkeerd worden als {{htmlattrxref("readonly","input")}} (de gebruiker kan de inhoud niet wijzigen) of zelfs als {{htmlattrxref("disabled","input")}} (de ingegeven waarde wordt niet mee verzonden met de rest van de formuliergegevens).</li> - <li>Zij kunnen een plaatshouder hebben: {{htmlattrxref("placeholder","input")}}. Dit is tekst die in het invoerveld staat om het doel van het veld aan te geven.</li> - <li>Hun afmetingen kunnen opgegeven worden: {{htmlattrxref("size","input")}} geeft de fysieke grootte van het veld aan en <a href="/en-US/docs/HTML/Element/input#attr-maxlength" title="/en-US/docs/HTML/Element/input#attr-maxlength">length</a> geeft het aantal karakters aan dat ingegeven kan worden in het veld.</li> - <li>Zij kunnen voorzien zijn van <a href="/en-US/docs/HTML/Element/input#attr-spellcheck" title="/en-US/docs/HTML/Element/input#attr-spellcheck">spellingscontrole</a> als de browser dit toelaat.</li> -</ul> - -<table class="standard-table"> - <caption>Compatibiliteits tabel</caption> - <tbody> - <tr> - <th>Functie op bureaublad</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>{{HTMLElement("input")}}.{{htmlattrxref("readonly","input")}}</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>6</td> - <td>1.0</td> - <td>1.0</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}.{{htmlattrxref("disabled","input")}}</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>6</td> - <td>1.0</td> - <td>1.0</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}.{{htmlattrxref("placeholder","input")}}</td> - <td>10.0</td> - <td>{{CompatGeckoDesktop("4.0")}}</td> - <td>10</td> - <td>11.10</td> - <td>4.0</td> - </tr> - <tr> - <td>{{HTMLElement("textarea")}}.{{htmlattrxref("placeholder","textarea")}}</td> - <td>10.0</td> - <td>{{CompatGeckoDesktop("4.0")}}</td> - <td>10</td> - <td>11.50</td> - <td>5.0</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}.{{htmlattrxref("size","input")}}</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>2</td> - <td>1.0</td> - <td>1.0</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}.{{htmlattrxref("maxlength","input")}}</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>2</td> - <td>1.0</td> - <td>1.0</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}.{{htmlattrxref("spellcheck","input")}}</td> - <td>10.0</td> - <td>{{CompatGeckoDesktop("3.6")}}</td> - <td>10</td> - <td>11.0</td> - <td>4.0</td> - </tr> - </tbody> - <tbody> - <tr> - <th>Functie op mobiel apparaat</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>{{HTMLElement("input")}}.{{htmlattrxref("readonly","input")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatGeckoMobile("4.0")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}.{{htmlattrxref("disabled","input")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatGeckoMobile("4.0")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}.{{htmlattrxref("placeholder","input")}}</td> - <td>2.3</td> - <td>{{CompatGeckoMobile("4.0")}}</td> - <td>{{CompatUnknown()}}</td> - <td>11.10</td> - <td>4</td> - </tr> - <tr> - <td>{{HTMLElement("textarea")}}.{{htmlattrxref("placeholder","textarea")}}</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatGeckoMobile("4.0")}}</td> - <td>{{CompatUnknown()}}</td> - <td>11.50</td> - <td>4</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}.{{htmlattrxref("size","input")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatGeckoMobile("4.0")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}.{{htmlattrxref("maxlength","input")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatGeckoMobile("4.0")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}.{{htmlattrxref("spellcheck","input")}}</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatGeckoMobile("4.0")}}</td> - <td>{{CompatUnknown()}}</td> - <td>11.0</td> - <td>{{CompatUnknown()}}</td> - </tr> - </tbody> -</table> - -<h3 id="Eenregelige_tekstvelden">Eenregelige tekstvelden</h3> - -<p>Een tekstveld van één regel wordt bekomen met het {{HTMLElement("input")}} element waarvan het {{htmlattrxref("type","input")}} attribuut <code>text</code> is. Text is de defaultwaarde. Dus ook zonder het {{htmlattrxref("type","input")}} attribuut of een voor de browser onbekend <code>type</code> attribuut is het platte tekst die aanvaardt wordt door het tekstveld.</p> - -<pre class="brush: html"><input type="text"></pre> - -<p>Eenregelige tekstvelden hebben één beperking: regelafbrekingen worden door de browser verwijderd voordat de gegevens verstuurd worden.</p> - -<p><img alt="Screenshots of single line text fields on several platforms." src="/files/4273/all-single-line-text-field.png" style="height: 235px; width: 655px;"></p> - -<p>Er kunnen nog meerdere beperkingen opgegeven worden door middel van het {{htmlattrxref("pattern","input")}} attribuut. Dit laat toe de gegevens te controleren aan de hand van een <a href="/en-US/docs/JavaScript/Guide/Regular_Expressions" title="/en-US/docs/JavaScript/Guide/Regular_Expressions">reguliere expressie</a> .</p> - -<pre class="brush: html"><input type="text" pattern="^cherry|banana$"></pre> - -<p>Maar HTML5 laat toe het enkelregelige tekstveld op te smukken met speciale waarden voor het {{htmlattrxref("type","input")}} attribuut. Deze waarden creëren nog altijd een eenregelig tekstveld maar leggen bijkomende voorwaarden op en geven het veld bepaalde eigenschappen.</p> - -<h4 id="Veld_voor_e-mail_addres">Veld voor e-mail addres</h4> - -<p>Dit veld wordt ingesteld door de waarde <code>email</code> op te geven voor het {{htmlattrxref("type","input")}} attribuut:</p> - -<pre class="brush: html"><input type="email" multiple></pre> - -<p>Dit voert een speciale beperking in voor het veld: de gebruiker moet een geldig e-mailaddres ingeven. Ieder andere inhoud veroorzaakt een fout. Het is ook mogelijk de gebruiker meerdere e-mailadressen te laten ingeven door middel van het {{htmlattrxref("multiple","input")}} attribuut.</p> - -<h4 id="Veld_voor_paswoord">Veld voor paswoord</h4> - -<p>Dit veld wordt ingesteld door de waarde <code>password</code> op te geven voor het {{htmlattrxref("type","input")}} attribuut:</p> - -<pre class="brush: html"><input type="password"></pre> - -<p>Hier kan elk teken ingegeven worden en de tekens zijn niet leesbaar.</p> - -<div class="note"><strong>Note:</strong> Let er op dat het hier louter om een gebruikersomgeving gaat. De tekst moet door JavaScript geïnterpreteerd worden anders wordt hij als platte tekst verzonden.</div> - -<h4 id="Zoekveld">Zoekveld</h4> - -<p>Dit veld wordt ingesteld door de waarde <code>search</code> voor het {{htmlattrxref("type","input")}} attribuut:</p> - -<pre class="brush: html"><input type="search"></pre> - -<p>Het verschil tussen een tekstveld en een zoekveld is het uiterlijk. In sommige browsers worden zoekvelden afgebeeld met ronde hoeken of omkadering in een andere kleur. Zoekvelden hebben nog een bijkomende eigenschap: de inhoud kan automatisch opgeslagen worden voor auto-aanvullen over verschillende pagina's van dezelfde site.</p> - -<p><img alt="Screenshots of search fields on several platforms." src="/files/4269/all-search-field.png" style="height: 235px; width: 655px;"></p> - -<h4 id="Veld_voor_telefoonnummer">Veld voor telefoonnummer</h4> - -<p>Dit veld wordt ingesteld door de waarde <code>tel</code> te gebruiken voor het {{htmlattrxref("type","input")}} attribuut:</p> - -<pre class="brush: html"><input type="tel"></pre> - -<p>Door de grote wereldwijde verscheidenheid van telefoonnummers legt dit veld geen ristrictie op aan hetgeen ingegeven wordt. Het is dus louter een semantisch verschil alhoewel sommige toestellen (vooral mobielen) een virtueel toetsenbord gebruiken.</p> - -<h4 id="URL_veld">URL veld</h4> - -<p>Dit veld wordt ingesteld door de waarde <code>url voor het</code> {{htmlattrxref("type","input")}} attribuut:</p> - -<pre class="brush: html"><input type="url"></pre> - -<p>Dit veld waakt er over dat alleen geldige URLs worden ingegeven. Er wordt een fout gegenereerd als de URL niet juist is.</p> - -<div class="note"><strong>Nota:</strong> Dat de URL de juiste vorm heeft betekent niet dat dat het adres bestaat.</div> - -<p>Indien één veld een fout vertoont wordt het formulier niet verzonden. De stijl van een formulier kan zo ingesteld worden dat aangegeven wordt welke fout er opgetreden is. Dit wordt in detail uitgelegd in : <a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Gegevensvalidatie</a>.</p> - -<table class="standard-table"> - <caption>Compatibiliteitstabel</caption> - <tbody> - <tr> - <th>Desktopfuctie</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="text"</code></td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>2</td> - <td>1.0</td> - <td>1.0</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="email"</code></td> - <td>10.0</td> - <td>{{CompatGeckoDesktop("4.0")}}</td> - <td>10</td> - <td>10.62</td> - <td>{{CompatUnknown()}}</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="password"</code></td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>2</td> - <td>1.0</td> - <td>1.0</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="search"</code></td> - <td>5.0</td> - <td>{{CompatGeckoDesktop("4.0")}}</td> - <td>10</td> - <td>11.01</td> - <td>5.0</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="tel"</code></td> - <td>5.0</td> - <td>{{CompatGeckoDesktop("4.0")}}</td> - <td>10</td> - <td>11.01</td> - <td>5.0</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="url"</code></td> - <td>10.0</td> - <td>{{CompatGeckoDesktop("4.0")}}</td> - <td>10</td> - <td>10.62</td> - <td>{{CompatUnknown()}}</td> - </tr> - </tbody> - <tbody> - <tr> - <th>Mobiele functie</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="text"</code></td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatGeckoMobile("4.0")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>1.0</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="email"</code></td> - <td>{{CompatNo()}}</td> - <td>{{CompatGeckoMobile("4.0")}}</td> - <td>{{CompatNo()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatUnknown()}}</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="password"</code></td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatGeckoMobile("4.0")}}</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatUnknown()}}</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="search"</code></td> - <td>{{CompatNo()}}</td> - <td>{{CompatGeckoMobile("4.0")}}</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>4.0</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="tel"</code></td> - <td>2.3</td> - <td>{{CompatGeckoMobile("4.0")}}</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>3.1</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="url"</code></td> - <td>{{CompatNo()}}</td> - <td>{{CompatGeckoMobile("4.0")}}</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>3.1</td> - </tr> - </tbody> -</table> - -<h3 id="Tekstvelden_met_meerdere_regels">Tekstvelden met meerdere regels</h3> - -<p>Het {{HTMLElement("textarea")}} element creëert een tekstveld dat meerdere regels bevat.</p> - -<pre class="brush: html"><textarea cols="20" rows="10"></textarea></pre> - -<p>Het grote verschil met een gewoon tekstveld met één regel ligt in het feit dat een tekstarea een harde regelafbreking ondersteunt. Met andere woorden dat de karakters "regelterugloop" [CR] en "nieuwe regel" [LF]) geacepteerd worden.</p> - -<p>Dank zij de CSS eigenschap {{cssxref("resize")}} kan de gebruiker rechtstreeks de grootte van het veld aanpassen.</p> - -<p><img alt="Screenshots of multi-lines text fields on several platforms." src="/files/4271/all-multi-lines-text-field.png" style="height: 330px; width: 745px;"></p> - -<table class="standard-table"> - <caption>Compatibiliteitstabel</caption> - <tbody> - <tr> - <th>Desktopfuctie</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>{{HTMLElement("textarea")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - </tbody> - <tbody> - <tr> - <th>Mobiele functie</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>{{HTMLElement("textarea")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatGeckoMobile("4.0")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - </tbody> -</table> - -<h2 id="Afrolmenu">Afrolmenu</h2> - -<p>Een afrolmenu laat de gebruiker toe een keuze te maken uit verschillende mogelijkheden. Er zijn twee mogelijkheden. Ofwel wordt een lijst met keuze opties getoond, ofwel wordt een veld voor autoaanvulling getoond. De lijst loopt gewoon over de tekst van het formulier. Na de selectie verdwijnt de lijst zonder de tekst te verstoren.</p> - -<h3 id="Keuzelijst">Keuzelijst</h3> - -<p>Een keuzelijst wordt gemaakt met het {{HTMLElement("select")}} element met één of meerdere {{HTMLElement("option")}} elementen die de keuzemogelijkheden aangeven.</p> - -<pre class="brush: html"><select> - <option>Banana</option> - <option>Cherry</option> - <option>Lemon</option> -</select></pre> - -<p>Eventueel kan een defaultwaarde opgegeven worden met het {{htmlattrxref("selected","option")}} attribuut bij de gewenste optie. De {HTMLElement("option")}} elementen kunnen ook genest worden in {{HTMLElement("optgroup")}} elementen om de opties in groepen in te delen:</p> - -<pre class="brush: html"><select> - <optgroup label="fruits"> - <option>Banana</option> - <option selected>Cherry</option> - <option>Lemon</option> - </optgroup> - <optgroup label="vegetables"> - <option>Carrot</option> - <option>Eggplant</option> - <option>Potatoe</option> - </optgroup> -</select></pre> - -<p><img alt="Screenshots of single line select box on several platforms." src="/files/4517/all-select.png" style="height: 636px; width: 887px;"></p> - -<table class="standard-table"> - <caption>Compatibiliteitstabel</caption> - <tbody> - <tr> - <th>Desktopfunctie</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>{{HTMLElement("select")}}</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - <tr> - <td>{{HTMLElement("option")}}</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - <tr> - <td>{{HTMLElement("optgroup")}}</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - </tbody> - <tbody> - <tr> - <th>Mobiele functie</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>{{HTMLElement("select")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatGeckoMobile("4.0")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - <tr> - <td>{{HTMLElement("option")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatGeckoMobile("4.0")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - <tr> - <td>{{HTMLElement("optgroup")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatGeckoMobile("4.0")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - </tbody> -</table> - -<h3 id="Meerkeuzelijst">Meerkeuzelijst</h3> - -<p>De eenvoudige keuzelijst laat slechts één keuze toe. Door het {{htmlattrxref("multiple","select")}} attribuut toe te voegen aan het {{HTMLElement("select")}} element wordt de volledige lijst met opties getoond en kan de gebruiker meerdere keuzes maken door de ctrl-toets in te houden tijdens het selecteren. </p> - -<pre class="brush: html"><select multiple> - <option>Banana</option> - <option>Cherry</option> - <option>Lemon</option> -</select></pre> - -<p><img alt="Screenshots of multi-lines select box on several platforms." src="/files/4559/all-multi-lines-select.png" style="height: 531px; width: 734px;"></p> - -<div class="note"><strong>Note:</strong> Niet alle browsers die het {{HTMLElement("select")}} element ondersteunen, ondersteunen het {{htmlattrxref("multiple","select")}} attribuut.</div> - -<h3 id="Autoaanvullen">Autoaanvullen</h3> - -<p>Met het {{HTMLElement("datalist")}} element samen met de {{HTMLElement("option")}} elementen wordt een veld voor autoaanvullen getoond. Dit datalist element roept het {{htmlattrxref("list","input")}} attribuut op.</p> - -<p>Zodra de gebruiker iets ingeeft wordt een keuzelijst getoond met alle overeenkomsten in het datalist object.</p> - -<pre class="brush: html"><label for="myFruit">What's your favorite fruit?</label> -<input type="text" id="myFruit" list="mySuggestion" /> -<datalist id="mySuggestion"> - <option>Apple</option> - <option>Banana</option> - <option>Blackberry</option> - <option>Blueberry</option> - <option>Lemon</option> - <option>Lychee</option> - <option>Peach</option> - <option>Pear</option> -</datalist></pre> - -<div class="note"><strong>Note:</strong> Volgens <a href="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list" rel="external" title="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list">the HTML specification</a> kunnen het {{htmlattrxref("list","input")}} attribuut en het {{HTMLElement("datalist")}} element gebruikt worden bij elke widget die ingave van de gebruiker vraagt. Het is nochthans onduidelijk hoe dat moet gebeuren met widgets die iets anders dan tekst verwachten (kleur en datums bijvoorbeeld). Verschillende browsers zullen zich anders gedragen. Voorzichtigheid is dus geboden wanneer men andere dan tekstvelden gebruikt.</div> - -<div><img alt="Screenshots of datalist on several platforms." src="/files/4593/all-datalist.png" style="height: 329px; width: 437px;"></div> - -<table class="standard-table"> - <caption>Compatibiliteits tabel</caption> - <tbody> - <tr> - <th>Desktopfuctie</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>{{HTMLElement("datalist")}}</td> - <td>20.0</td> - <td>{{CompatGeckoDesktop("4.0")}}</td> - <td>10</td> - <td>9.6</td> - <td>{{CompatNo()}}</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("list","input")}}</td> - <td>20.0</td> - <td>{{CompatGeckoDesktop("4.0")}}</td> - <td>10</td> - <td>9.6</td> - <td>{{CompatNo()}}</td> - </tr> - </tbody> - <tbody> - <tr> - <th>Mobile fuctie</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>{{HTMLElement("datalist")}}</td> - <td>{{CompatNo()}}</td> - <td>{{CompatGeckoMobile("4.0")}}</td> - <td>{{CompatNo()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatNo()}}</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("list","input")}}</td> - <td>{{CompatNo()}}</td> - <td>{{CompatGeckoMobile("4.0")}}</td> - <td>{{CompatNo()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatNo()}}</td> - </tr> - </tbody> -</table> - -<h2 id="Klikbare_items">Klikbare items</h2> - -<p>Klikbare items zijn widgets waarvan de toestand wijzigt bij het aanklikken. Er zijn twee klikbare items: het keuzevakje en het keuzerondje. Beide gebruiken ze het {{htmlattrxref("checked","input")}} attribuut om aan te geven of de widget al of niet bij default is aangeklikt.</p> - -<p>Er dient opgemerkt te worden dat deze widgets zich niet gedragen als elk ander formulier widget. Wanneer een formulier wordt verzonden, worden alle widgets die een {{htmlattrxref("name","input")}} attribuut hebben, verzonden, ook als zij geen waarde hebben. Klikbare elementen daarentegen worden slechts verzonden indien ze aangeklikt zijn. Als zij niet aangeklikt zijn worden zij niet verzonden, zelfs niet hun naam.</p> - -<h3 id="Het_keuzevakje">Het keuzevakje</h3> - -<p>Een keuzevakje wordt gemaakt met het {{HTMLElement("input")}} element waarvan het {{htmlattrxref("type","input")}} attribuut <code>checkbox</code> is.</p> - -<pre class="brush: html"><input type="checkbox" checked> -</pre> - -<p>Het keuzevakje gedefinieerd op voorgaande manier is bij default aangevinkt.</p> - -<p><img alt="Screenshots of check boxes on several platforms." src="/files/4595/all-checkbox.png" style="height: 198px; width: 352px;"></p> - -<table class="standard-table"> - <caption>Compatibiliteitstabel</caption> - <tbody> - <tr> - <th>Desktopfunctie</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="checkbox"</code></td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>2</td> - <td>1.0</td> - <td>1.0</td> - </tr> - </tbody> - <tbody> - <tr> - <th>Mobiele functie</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="</code><code>checkbox</code><code>"</code></td> - <td>1.0</td> - <td>{{CompatGeckoMobile("1.0")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - </tbody> -</table> - -<h3 id="Het_keuzerondje">Het keuzerondje</h3> - -<p>Een keuzerondje wordt gemaakt door het {{HTMLElement("input")}} element waarvan het {{htmlattrxref("type","input")}} attribuut <code>radio</code> is.</p> - -<pre class="brush: html"><input type="radio" checked></pre> - -<p>Keuzerondjes kunnen gebundeld worden. Wanneer de naam in hun {{htmlattrxref("name","input")}} attribuut dezelfde is vormen zij één groep. Slechts één keuzerondje in een groep kan geselecteerd zijn. Dit betekent dat als één keuzerondje in een groep aangevinkt is, alle andere gedeselecteerd zijn. Wanneer het formulier verzonden wordt, wordt alleen het aangevinkte keuzerondje verzonden. Wanneer geen enkel is aangevinkt wordt er ook geen enkel verzonden.</p> - -<pre class="brush: html"><fieldset> - <legend>What gender are you?</legend> - <p><label for="g1"><input type="radio" name="g" id="g1" value="M"> Male</label></p> - <p><label for="g2"><input type="radio" name="g" id="g2" value="F"> Female</label></p> - <p><label for="g3"><input type="radio" name="g" id="g3" value="B"> Both</label></p> - <p><label for="g4"><input type="radio" name="g" id="g4" value="N"> None</label></p> - <p><label for="g5"><input type="radio" name="g" id="g5" value="!"> This is not your concern!</label></p> - <p><label for="g6"><input type="radio" name="g" id="g6" value="?"> Who cares?</label></p> - <p><label for="g7"><input type="radio" name="g" id="g7" value="\o/"> Obi-Wan Kenobi</label></p> -</fieldset></pre> - -<p><img alt="Screenshots of radio buttons on several platforms." src="/files/4597/all-radio.png" style="height: 198px; width: 352px;"></p> - -<table class="standard-table"> - <caption>Compatibiliteitstabel</caption> - <tbody> - <tr> - <th>Desktopfunctie</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="radio"</code></td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>2</td> - <td>1.0</td> - <td>1.0</td> - </tr> - </tbody> - <tbody> - <tr> - <th>Mobiele functie</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="radio"</code></td> - <td>1.0</td> - <td>{{CompatGeckoMobile("1.0")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - </tbody> -</table> - -<h2 id="Knoppen">Knoppen</h2> - -<p>In HTML formulieren zijn er drie knoppen:</p> - -<dl> - <dt>Verzenden</dt> - <dd>Zendt de formuliergegevens naar de server.</dd> - <dt>Herstel</dt> - <dd>Herstelt alle widgets van het formulier naar hun defaultwaarde.</dd> - <dt>Anoniem</dt> - <dd>Knoppen waarvan de uitwerking aangepast kan worden door middel an JavaScript.</dd> -</dl> - -<p>Een knop wordt gecreëerd door het {{HTMLElement("button")}} element of een {{HTMLElement("input")}} element. Het soort knop wordt bepaald door het {{htmlattrxref("type","input")}} attribuut:</p> - -<h3 id="verzenden">verzenden</h3> - -<pre class="brush: html"><button type="submit"> - This a <br><strong>submit button</strong> -</button> - -<input type="submit" value="This is a submit button"></pre> - -<h3 id="herstel">herstel</h3> - -<pre class="brush: html"><button type="reset"> - This a <br><strong>reset button</strong> -</button> - -<input type="reset" value="This is a reset button"></pre> - -<h3 id="anoniem">anoniem</h3> - -<pre class="brush: html"><button type="button"> - This an <br><strong>anonymous button</strong> -</button> - -<input type="button" value="This is an anonymous button"></pre> - -<p>In principe gedraagt het {{HTMLElement("button")}} element en het {{HTMLElement("input")}} element zich identiek. Er zijn echter kleine verschillen:</p> - -<ul> - <li>Zoals de voorgaande voorbeelden laten zien laten de {{HTMLElement("button")}} elementen HTML inhoud toe als tekst, terwijl de {{HTMLElement("input")}} elementen alleen platte tekst toelaten.</li> - <li>De {{HTMLElement("button")}} elementen kunnen een andere waarde hebben dan hun label (dit is echter niet betrouwbaar in Internet Explorer voor IE 8).</li> -</ul> - -<p><img alt="Screenshots of buttons on several platforms." src="/files/4599/all-buttons.png" style="height: 235px; width: 464px;"></p> - -<table class="standard-table"> - <caption>Compatibiliteitstabel</caption> - <tbody> - <tr> - <th>Desktopfunctie</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="submit"</code></td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>2</td> - <td>1.0</td> - <td>1.0</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="reset"</code></td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>2</td> - <td>1.0</td> - <td>1.0</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="button"</code></td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>3</td> - <td>1.0</td> - <td>1.0</td> - </tr> - <tr> - <td>{{HTMLElement("button")}}</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>{{CompatVersionUnknown()}}<br> - (Buggy before IE8)</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - </tbody> - <tbody> - <tr> - <th>Mobiele functie</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="number"</code></td> - <td>1.0</td> - <td>{{CompatGeckoMobile("1.0")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="reset"</code></td> - <td>1.0</td> - <td>{{CompatGeckoMobile("1.0")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="button"</code></td> - <td>1.0</td> - <td>{{CompatGeckoMobile("1.0")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - <tr> - <td>{{HTMLElement("button")}}</td> - <td>1.0</td> - <td>{{CompatGeckoMobile("1.0")}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - </tbody> -</table> - -<h2 id="Speciale_formulier_widgets">Speciale formulier widgets</h2> - -<p>Deze widgets laten invoer toe van complexe of gestructeerde gegevens zoals exacte of benaderende getallen, datum en tijd en kleuren.</p> - -<h3 id="Getallen">Getallen</h3> - -<p>Widgets voor getallen worden gemaakt met het {{HTMLElement("input")}} element en <code>number</code> als {{htmlattrxref("type","input")}} attribuut. Dit element ziet er uit als een tekstveld maar accepteert slechts getallen met drijvende komma. Gewoonlijk is het voorzien van knoppen om de waarde te verhogen of verlagen.</p> - -<p>De ingegeven waarde kan ook beperkt worden met de {{htmlattrxref("min","input")}} en {{htmlattrxref("max","input")}} attributen. De waarde van het increment van de knoppen kan opgegeven worden met het {{htmlattrxref("step","input")}} attribuut.</p> - -<h4 id="Voorbeeld">Voorbeeld</h4> - -<pre class="brush: html"><input type="number" min="1" max="10" step="2"></pre> - -<p>Dit creëert een widget wiens waarde begrensd is tussen 1 en 10 en die in stappen van 2 kan verhoogd of verlaagd worden.</p> - -<table class="standard-table"> - <caption>Compatibiliteitstabel</caption> - <tbody> - <tr> - <th>Desktopfunctie</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="number"</code></td> - <td>11.0</td> - <td>{{CompatNo()}} {{bug('344616')}}</td> - <td>10<br> - (<em>herkend maar geen UI</em>)</td> - <td>{{CompatVersionUnknown()}}</td> - <td>5.2</td> - </tr> - </tbody> - <tbody> - <tr> - <th>Mobiele functie</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="number"</code></td> - <td>2.3</td> - <td>{{CompatNo()}}</td> - <td>{{CompatNo()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>4.0</td> - </tr> - </tbody> -</table> - -<h3 id="Schuifregelaar">Schuifregelaar</h3> - -<p>Een andere manier om een waarde in te geven is het gebruik van een schuifregelaar. Deze zijn minder nauwkeurig dan een tekstveld en worden dan ook gebruikt waar geen nauwkeurige waarde nodig is.</p> - -<p>Een schuifregelaar wordt gemaakt met het {{HTMLElement("input")}} element met {{htmlattrxref("type","input")}} attribuut <code>range</code>. Hij moet wel correct ingesteld zijn met zijn {{htmlattrxref("min","input")}}, {{htmlattrxref("max","input")}} en {{htmlattrxref("step","input")}} attributen.</p> - -<h4 id="Voorbeeld_2">Voorbeeld</h4> - -<pre class="brush: html"><input type="range" min="1" max="5" step="1"></pre> - -<p>Dit voorbeeld creëert een schuifregelaar waarvan waarde varieert tussen 1 en 5 in stappen van +1 en -1.</p> - -<table class="standard-table"> - <caption>Compatibiliteitstabel</caption> - <tbody> - <tr> - <th>Desktopfunctie</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="range"</code></td> - <td>5.0</td> - <td>23.0</td> - <td>10</td> - <td>10.62</td> - <td>4.0</td> - </tr> - </tbody> - <tbody> - <tr> - <th>Mobiele functie</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="range"</code></td> - <td>{{CompatNo()}}</td> - <td>23.0</td> - <td>{{CompatNo()}}</td> - <td>10.62</td> - <td>5.0</td> - </tr> - </tbody> -</table> - -<h3 id="Ingave_van_datum_en_tijd">Ingave van datum en tijd</h3> - -<p>Traditioneel is ingave van datum en tijd een probleem voor web ontwikkelaars. HTML5 brengt enige verlichting met een speciale widget om deze speciale gegevens te behandelen.</p> - -<p>Er wordt ook gebruik gemaakt van het {{HTMLElement("input")}} element met de juiste instelling van het {{htmlattrxref("type","input")}} attribuut. Datum en tijd kunen appart of samen ingegeven worden, afhankelijk van het attribuut:</p> - -<h4 id="date"><code>date</code></h4> - -<p>Dit creëert een widget die een datum toont of kan opnemen, zonder tijd.</p> - -<pre class="brush: html"><input type="date"></pre> - -<h4 id="datetime"><code>datetime</code></h4> - -<p>Dit crëeert een widget die een datum met tijd kan tonen of opnemen in de UTC tijdzone.</p> - -<pre class="brush: html"><input type="datetime"></pre> - -<h4 id="datetime-local"><code>datetime-local</code></h4> - -<p>Dit creëert een widget die een datum met tijd weergeeft of opneemt in elke tijdzone.</p> - -<pre class="brush: html"><input type="datetime-local"></pre> - -<h4 id="month"><code>month</code></h4> - -<p>Dit creëert een widget die een maand en een jaartal weergeeft of opneemt.</p> - -<pre class="brush: html"><input type="month"></pre> - -<h4 id="time"><code>time</code></h4> - -<p>Creëert een widget die een tijd weergeeft of opneemt.</p> - -<pre class="brush: html"><input type="time"></pre> - -<h4 id="week"><code>week</code></h4> - -<p>Creëert een widget die een week en een jaartal weergeeft of opneemt.</p> - -<pre class="brush: html"><input type="week"></pre> - -<p>Alle datum en tijd widgets kunnen beperkt zijn door de {{htmlattrxref("min","input")}} en {{htmlattrxref("max","input")}} attributen.</p> - -<pre class="brush: html"><label for="myDate">When are you available this summer?</label> -<input type="date" min="2013-06-01" max="2013-08-31" id="myDate"></pre> - -<table class="standard-table"> - <caption>Compatibiliteitstabel</caption> - <tbody> - <tr> - <th>Desktopfunctie</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="date"</code></td> - <td>20.0</td> - <td>{{CompatNo()}} {{bug('825294')}}</td> - <td>{{CompatNo()}}</td> - <td>10.62</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="datetime"</code></td> - <td>{{CompatNo()}}</td> - <td>{{CompatNo()}} {{bug('825294')}}</td> - <td>{{CompatNo()}}</td> - <td>10.62</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="datetime-local"</code></td> - <td>{{CompatNo()}}</td> - <td>{{CompatNo()}} {{bug('825294')}}</td> - <td>{{CompatNo()}}</td> - <td>10.62</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="month"</code></td> - <td>{{CompatNo()}}</td> - <td>{{CompatNo()}} {{bug('825294')}}</td> - <td>{{CompatNo()}}</td> - <td>10.62</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="time"</code></td> - <td>{{CompatNo()}}</td> - <td>{{CompatNo()}} {{bug('825294')}}</td> - <td>{{CompatNo()}}</td> - <td>10.62</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="week"</code></td> - <td>{{CompatNo()}}</td> - <td>{{CompatNo()}} {{bug('825294')}}</td> - <td>{{CompatNo()}}</td> - <td>10.62</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - </tbody> - <tbody> - <tr> - <th>Mobiele functie</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="date"</code></td> - <td>{{CompatNo()}}</td> - <td>{{CompatNo()}} {{bug('446510')}}</td> - <td>{{CompatNo()}}</td> - <td>10.62</td> - <td>5.0</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="datetime"</code></td> - <td>{{CompatNo()}}</td> - <td>{{CompatNo()}} {{bug('446510')}}</td> - <td>{{CompatNo()}}</td> - <td>10.62</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="datetime-local"</code></td> - <td>{{CompatNo()}}</td> - <td>{{CompatNo()}} {{bug('446510')}}</td> - <td>{{CompatNo()}}</td> - <td>10.62</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="month"</code></td> - <td>{{CompatNo()}}</td> - <td>{{CompatNo()}} {{bug('446510')}}</td> - <td>{{CompatNo()}}</td> - <td>10.62</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="time"</code></td> - <td>{{CompatNo()}}</td> - <td>{{CompatNo()}} {{bug('446510')}}</td> - <td>{{CompatNo()}}</td> - <td>10.62</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="week"</code></td> - <td>{{CompatNo()}}</td> - <td>{{CompatNo()}} {{bug('446510')}}</td> - <td>{{CompatNo()}}</td> - <td>10.62</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - </tbody> -</table> - -<div class="warning"><strong>Waarschuwing:</strong> De datum en tijd widgets zijn zeer nieuw en zelfs browsers die beweren ze te ondersteunen hebben er dikwijls problemen mee. Test uw werk met diverse browsers alvorens uit te rollen!</div> - -<h3 id="Kleuren_kiezen">Kleuren kiezen</h3> - -<p>Het kiezen van kleuren is altijd wat moeilijk geweest. Er zijn vele manieren: RGB waarden (decimaal or hexadecimaal), HSL waarden, sleutelwoorden, enz. De kleuren widget laat de gebruiker toe zowel tekstueel als visueel een kleur te kiezen.</p> - -<p>Een kleuren widget wordt gemaakt door het {{HTMLElement("input")}} element met <code>color</code> als {{htmlattrxref("type","input")}} attribuut.</p> - -<pre class="brush: html"><input type="color"></pre> - -<table class="standard-table"> - <caption>Compatibiliteitstabel</caption> - <tbody> - <tr> - <th>Desktopfunctie</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="color"</code></td> - <td>21.0</td> - <td>{{CompatNo()}} {{bug('547004')}}</td> - <td>{{CompatNo()}}</td> - <td>11.01</td> - <td>{{CompatNo()}}</td> - </tr> - </tbody> - <tbody> - <tr> - <th>Mobiele functie</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="color"</code></td> - <td>{{CompatNo()}}</td> - <td>{{CompatNo()}}</td> - <td>{{CompatNo()}}</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatNo()}}</td> - </tr> - </tbody> -</table> - -<h2 id="Andere_widgets">Andere widgets</h2> - -<p>Er zijn nog enkele andere widgets die niet dadelijk ergens bij horen maar niettemin belangrijk zijn.</p> - -<h3 id="Kiezen_van_bestanden">Kiezen van bestanden</h3> - -<p>HTML formulieren kunnen bestanden naar een server versturen. Dit wordt verduidelijkt in het artikel: <a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Verzenden en ontvangen van gegevens</a>. De widget "Bestanden kiezen" laat de gebruiker toe één of meerdere bestanden te kiezen om te verzenden.</p> - -<p>Kies het {{HTMLElement("input")}} element met <code>file</code> als {{htmlattrxref("type","input")}} attribuut. Het type bestand kan ingesteld worden met het {{htmlattrxref("accept","input")}} attribuut. Indien de gebruiker meerdere bestanden kan kiezen wordt het {{htmlattrxref("multiple","input")}} attribuut gebruikt.</p> - -<h4 id="Voorbeeld_3">Voorbeeld</h4> - -<p>In dit voorbeeld kunnen meerdere grafische bestanden gekozen worden.</p> - -<pre class="brush: html"><input type="file" accept="image/*" multiple></pre> - -<table class="standard-table"> - <caption>Compatibiliteitstabel</caption> - <tbody> - <tr> - <th>Desktopfunctie</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="file"</code></td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>3.02</td> - <td>1.0</td> - <td>1.0</td> - </tr> - </tbody> - <tbody> - <tr> - <th>Mobiele functie</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="file"</code></td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatUnknown()}}</td> - </tr> - </tbody> -</table> - -<h3 id="Verborgen_inhoud">Verborgen inhoud</h3> - -<p>Het is soms nuttig, om technische redenen, om gegevens met het formulier mee te sturen maar die niet zichtbaar zijn voor de gebruiker. Dit wordt gedaan met het {{HTMLElement("input")}} element met <code>hidden</code> als {{htmlattrxref("type","input")}} attribuut.</p> - -<p>Dit element vereist ook de <code>name</code> en <code>value</code> attributen:</p> - -<pre class="brush: html"><input type="hidden" name="timestamp" value="1286705410"></pre> - -<table class="standard-table"> - <caption>Compatibiliteitstabel</caption> - <tbody> - <tr> - <th>Feature Desktop</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="hidden"</code></td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>2</td> - <td>1.0</td> - <td>1.0</td> - </tr> - </tbody> - <tbody> - <tr> - <th>Mobiele functie</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="hidden"</code></td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - </tbody> -</table> - -<h3 id="Afbeelding">Afbeelding</h3> - -<p>De <strong>afbeeldings widget</strong> wordt op dezelfde manier getoond als het {{HTMLElement("img")}} element, met die uitzondering dat, wanneer de gebruiker er op klikt, het zich gedraagt als een verzendknop (zie hierboven).</p> - -<p>Een afbeeldings widget wordt gecrëerd met een {{HTMLElement("input")}} element en <code>image</code> als {{htmlattrxref("type","input")}} attribuut. Dit element ondersteunt dezelfde attributen als het {{HTMLElement("img")}} element plus de attributen van alle formulier knoppen.</p> - -<pre class="brush: html"><input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /></pre> - -<p>Als de knop afbeelding gebruikt wordt als verzendknop wordt niet zijn waarde verstuurd maar de X- en Y-coördinaten van de plaats waar er geklikt wordt in de afbeelding. De coördinaten zijn relatief tegenover de afbeelding (de linker bovenhoek is 0, 0). De coördinaten worden verzonden als twee sleutel/waarde paren. De sleutel van de X-waarde is het {{htmlattrxref("name","input")}} attribuut gevolgd door "<em>.x</em>" en de sleutel van de Y-waarde is het {{htmlattrxref("name","input")}} attribuut gevolgd door "<em>.y</em>".</p> - -<p>Laten we een voorbeeld bekijken:</p> - -<pre class="brush: html"><form action="http://foo.com" method="get"> - <input type="image" value="pos" alt="" src="map.png" /> -</form> -</pre> - -<p>Bij het klikken op de afbeelding in dit formulier wordt naar de volgende URL verzonden:</p> - -<pre>http://foo.com?pos.x=123&pos.y=456</pre> - -<p>De waarde van de <code>pos.x</code> en <code>pos.y</code> parameters is afhankelijk van de plaats in de afbeelding waar geklikt wordt. Hoe deze waarden verzonden en ontvangen worden wordt beschreven in <a href="https://developer.mozilla.org/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Zenden en ontvangen van gegevens</span></a>.</p> - -<table class="standard-table"> - <caption>Compatibiliteitstabel</caption> - <tbody> - <tr> - <th>Desktopfuctie</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="image"</code></td> - <td>1.0</td> - <td>1.0</td> - <td>2</td> - <td>1.0</td> - <td>1.0</td> - </tr> - </tbody> - <tbody> - <tr> - <th>Mobiele functie</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>{{HTMLElement("input")}}<code>.</code>{{htmlattrxref("type","input")}}<code>="image"</code></td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - </tbody> -</table> - -<h3 id="Meters_en_voortgangsbalken">Meters en voortgangsbalken</h3> - -<p>Meters en en voortgangsbalken zijn visuele voortellingen van numerieke waarden.</p> - -<p>Een voortgangsbalk stelt een waarde voor die verandert in de tijd tot een maximumwaarde vastgelegd door het {{htmlattrxref("max","progress")}} attribuut. De balk wordt gecreëerd door het {{ HTMLElement("progress")}} element. Niet alle browsers en ondersteunende <span class="ng-binding"><span class="highlighted">technologie</span>ën kunnen overweg met dit element.</span></p> - -<pre class="brush: html"><progress max="100" value="75">75/100</progress></pre> - -<p>Een meter stelt een vaste waarde voor in een gebied begrensd door de waarde van {{htmlattrxref("min","meter")}} en {{htmlattrxref("max","meter")}}. Deze waarde wordt visueel voorgesteld door een balk. Hoe deze balk er uit ziet wordt bepaald door bepaalde parameters:</p> - -<ul> - <li>de waarden van {{htmlattrxref("low","meter")}} en {{htmlattrxref("high","meter")}} delen het interval in drie delen: - <ul> - <li>Het onderste gedeelte van het interval ligt tussen de waarden {{htmlattrxref("min","meter")}} en {{htmlattrxref("low","meter")}} (deze waarden inbegrepen)</li> - <li>Het middenste gedeelte van het interval ligt tussen de waarden {{htmlattrxref("low","meter")}} en {{htmlattrxref("high","meter")}} (deze waarden uitgesloten)</li> - <li>Het bovenste gedeelte van het interval ligt tussen de waarden {{htmlattrxref("high","meter")}} en {{htmlattrxref("max","meter")}} (deze waarden inbegrepen)</li> - </ul> - </li> - <li>De {{htmlattrxref("optimum","meter")}} waarde bepaalt de optimale waarde voor het {{HTMLElement("meter")}} element. Samen met de waarden {{htmlattrxref("low","meter")}} en {{htmlattrxref("high","meter")}} wordt bepaald welk deel van het interval de voorkeur krijgt: - <ul> - <li>Als de waarde {{htmlattrxref("optimum","meter")}} in het onderste gedeelte van het interval ligt, is het het onderste gedeelte dat de voorkeur krijgt, het middenste gedeelte wordt als het gemiddelde beschouwd en het bovenste gedeelte wordt als het slechtste gedeelte beschouwd.</li> - <li>Als de waarde {{htmlattrxref("optimum","meter")}} in het middenste gedeelte van het interval ligt, wordt het onderste en het bovenste gedeelte als het gemiddelde beschouwd. Het middenste gedeelte krijgt de voorkeur.</li> - <li>Als de waarde {{htmlattrxref("optimum","meter")}} in het bovenste gedeelte van het interval ligt, wordt het onderste gedeelte als slecht beschouwd, het middelste gedeelte als het gemiddelde en het bovenste gedeelte als het gedeelte dat de voorkeur heeft.</li> - </ul> - </li> -</ul> - -<p>Alle browsers die het {{HTMLElement("meter")}} element ondersteunen gebruiken de deze waarden om de kleur van de balk aan te passen:</p> - -<ul> - <li>Als de huidige waarde in het voorkeurgebied valt is de balk groen.</li> - <li>Als de huidige waarde in het gemiddelde gebied ligt is de balk geel.</li> - <li>Als de huidige waarde in het slechte gedeelte ligt is de kleur van de balk rood.</li> -</ul> - -<p>Niet alle browsers en ondersteunende <span class="ng-binding"><span class="highlighted">technologie</span>ën kunnen overweg met dit element.</span></p> - -<pre class="brush: html"><meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter></pre> - -<table class="standard-table"> - <caption>Compatibility table</caption> - <tbody> - <tr> - <th>Desktopfuncties</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>{{HTMLElement("progress")}}</td> - <td>6.0</td> - <td>{{CompatGeckoDesktop("6.0")}}</td> - <td>10</td> - <td>10.6</td> - <td>5.2</td> - </tr> - <tr> - <td>{{HTMLElement("meter")}}</td> - <td>6.0</td> - <td>{{CompatGeckoDesktop("16.0")}}</td> - <td>{{CompatNo()}}</td> - <td>11.0</td> - <td>5.2</td> - </tr> - </tbody> - <tbody> - <tr> - <th>Mobiele functies</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>{{HTMLElement("progress")}}</td> - <td>{{CompatNo()}}</td> - <td>{{CompatGeckoMobile("6.0")}}</td> - <td>{{CompatNo()}}</td> - <td>11.0</td> - <td>{{CompatUnknown()}}</td> - </tr> - <tr> - <td>{{HTMLElement("meter")}}</td> - <td>{{CompatNo()}}</td> - <td>{{CompatGeckoMobile("16.0")}}</td> - <td>{{CompatNo()}}</td> - <td>11.0</td> - <td>{{CompatUnknown()}}</td> - </tr> - </tbody> -</table> - -<h2 id="Zie_ook">Zie ook</h2> - -<p>Om dieper in te gaan op de verschillende widgets voor formulieren zijn er nuttige externe bronnendie kunnen geraadpleegd worden:</p> - -<ul> - <li><a href="http://wufoo.com/html5/" rel="external" title="http://wufoo.com/html5/">The Current State of HTML5 Forms</a> door Wufoo</li> - <li><a href="http://www.quirksmode.org/html5/inputs.html" rel="external" title="http://www.quirksmode.org/html5/inputs.html">HTML5 Tests - inputs</a> over Quirksmode (ook <a href="http://www.quirksmode.org/html5/inputs_mobile.html" rel="external" title="http://www.quirksmode.org/html5/inputs_mobile.html">beschikbaar voor mobiele</a> browsers)</li> -</ul> diff --git a/files/nl/learn/forms/how_to_structure_a_web_form/index.html b/files/nl/learn/forms/how_to_structure_a_web_form/index.html deleted file mode 100644 index 9bdc0006b5..0000000000 --- a/files/nl/learn/forms/how_to_structure_a_web_form/index.html +++ /dev/null @@ -1,965 +0,0 @@ ---- -title: How to structure an HTML form -slug: Learn/Forms/How_to_structure_a_web_form -tags: - - Attribuut - - Element - - HTML - - voorbeeld -translation_of: Learn/Forms/How_to_structure_a_web_form -original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form ---- -<p>Formulieren zijn een van de meest complexe structuren in <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>. Elk basisformulier kan gemaakt worden met elementen en attributen. Door een correcte opbouw wordt een bruikbaar en <a href="/en-US/docs/Web/Accessibility">toegankelijk </a>formulier verkregen.</p> - -<p>Om functionaliteit aan HTML formulieren toe te voegen wordt voornamelijk Javascript gebruikt. Meer geavanceerde <span class="ng-binding"><span class="highlighted">technologie</span>ën zoals </span><a href="/en-US/docs/XForms" title="/en-US/docs/XForms">XForms</a>, thans voorbij gestreefd, worden helaas niet door alle browsers geïmplementeerd.</p> - -<p>In dit artikel wordt kennis gemaakt met alle HTML formulier elementen. Ook wordt de opbouw van een degelijk HTML formulier besproken om zo een vlot bruikbaar formulier te maken. In <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">Hoe eigen widgets voor formulieren te maken</a> wordt dieper ingegaan op het werken met widgets.</p> - -<h2 id="sect1"></h2> - -<h2 id="Globale_structuur">Globale structuur</h2> - -<h3 id="Het_<form>_element">Het <form> element</h3> - -<p>Het {{HTMLElement("form")}} element <span class="highlighted">definieert formeel een formulier en de attributen die het gedrag van dit formulier bepalen. Elk HTML formulier moet met deze elementen beginnen. Vele ondersteunende </span><span class="ng-binding"><span class="highlighted">technologie</span>ën</span><span class="highlighted"> of browser plug-ins herkennen </span> {{HTMLElement("form" )}} elementen en hebben speciale routines om er gebruik van te maken.</p> - -<div class="note"><strong>Nota:</strong> Het is strikt verboden om formulieren te nesten. Afhankelijk van de browser is hun gedrag dan onvoorspelbaar.</div> - -<p>Het {{HTMLElement("form")}} element ondersteunt de volgende attributen (allemaal optioneel):</p> - -<table> - <caption>Attributen van het {{HTMLElement("form")}} element</caption> - <thead> - <tr> - <th scope="col">Attribuut naam</th> - <th scope="col">Defaultwaarde</th> - <th scope="col">Beschrijving</th> - </tr> - </thead> - <tbody> - <tr> - <td style="white-space: nowrap;">{{htmlattrxref("accept-charset","form")}}</td> - <td><code>UNKNOWN</code></td> - <td>Een lijst van karaktertekens die door een server wordt aanvaard. De defaultwaarde is de speciale string <code>UNKNOWN</code>. In dit geval worden de karakters gecodeerd zoals in het document dat het form element bevat.</td> - </tr> - <tr> - <td>{{htmlattrxref("action","form")}}</td> - <td></td> - <td>De URI van een webpagina die de informatie van het formulier verwerkt.</td> - </tr> - <tr> - <td>{{htmlattrxref("autocomplete","form")}}</td> - <td><code>on</code></td> - <td>Geeft aan of de widgets in dit formulier automatisch aangevuld kunnen worden aan de defaultwaarden van de browser. Dit attribuut kan twee waarden aannemen: <code>on</code> of <code>off</code>.</td> - </tr> - <tr> - <td>{{htmlattrxref("enctype","form")}}</td> - <td><code>application/x-www-form-urlencoded</code></td> - <td>Als de waarde van het <code>method</code> attribuut <code>post</code> is, dan is dit attribuut het <a class="external" href="http://en.wikipedia.org/wiki/Mime_type" title="http://en.wikipedia.org/wiki/Mime_type">MIME type</a> van de inhoud van het formulier. Mogelijke waarden zijn: - <ul> - <li><code>application/x-www-form-</code></li> - <li><code>multipart/form-data</code>: Gebruik deze waarde bij gebruik van een {{HTMLElement("input")}} element waarvan het t<code>ype</code> attribuut <em>file</em> is.</li> - <li><code>text/plain</code></li> - </ul> - </td> - </tr> - <tr> - <td>{{htmlattrxref("method","form")}}</td> - <td><code>get</code></td> - <td> - <p>T</p> - - <p>De <a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616.html" title="http://www.w3.org/Protocols/rfc2616/rfc2616.html">HTTP</a> methode die de browser gebruikt om het formulier te versturen. Dit attribuut kan één van twee waarden aannemen: <code>get</code> or <code>post</code>.</p> - </td> - </tr> - <tr> - <td>{{htmlattrxref("name","form")}}</td> - <td></td> - <td>De naam van het formulier. Hij moet uniek zijn tussen alle formulieren van een document en mag niet de lege string zijn. In de praktijk wordt hiervoor echter het <code>id</code> attribuut gebruikt.</td> - </tr> - <tr> - <td>{{htmlattrxref("novalidate","form")}}</td> - <td>(<em>false</em>)</td> - <td>Dit attribuut geeft aan dat het formulier niet moet gevalideerd worden bij verzending.</td> - </tr> - <tr> - <td>{{htmlattrxref("target","form")}}</td> - <td><code>_self</code></td> - <td>Een naam of een sleutelwoord die aangeven waar het antwoord van de server moet getoond worden na verzending van het formulier. Dit kan bijvoorbeeld een {{HTMLElement("iframe")}}, een tab of een venster zijn. Volgende sleutelwoorden zijn mogelijke waarden voor dit attribuut: - <ul> - <li><code>_self</code>: Laad het antwoord in de huidige browser configuratie ({{HTMLElement("iframe")}}, tab, venster, enz.) .</li> - <li><code>_blank</code>: Laad het antwoord in een nieuwe browserconfiguratie.</li> - <li><code>_parent</code>: Laad het antwoord in de ouder van de huidige browser configuratie. Als er geen ouder is gedraagt deze optie zich als <code>_self</code>.</li> - <li><code>_top</code>: Laad het antwoord in de hoogste ouder van de huidig browser configuratie (dit is de browser configuratie die geen ouder heeft). Als er geen ouder is gedraagt deze optie zich als <code>_self</code>.</li> - </ul> - </td> - </tr> - </tbody> -</table> - -<p>Het is altijd mogelijk een formulier widget te gebruiken buiten een {{HTMLElement("form")}} element maar dan is deze widget aan geen enkel formulier gebonden. Het is dan de gebruker die er voor verantwoordelijk is dat deze widget de gewenste uitwerking heeft, omdat die niets uit zichzelf zal doen. De widget moet dan aangepast worden met JavaScript.</p> - -<p>Technisch gezien is het HTML5 die het <code>form</code> attribuut invoert voor HTML formulieren. Het bindt dus expliciet een element met een formulier. Helaas ondersteunen niet alle browsers dit element goed genoeg om betrouwbaar te zijn.</p> - -<h3 id="De_<fieldset>_en_<legend>_elementen">De <fieldset> en <legend> elementen</h3> - -<p>Het {{HTMLElement("fieldset")}} element dient om widgets die dezelfde functie hebben te bundelen. Een {{HTMLElement("fieldset")}} element kan een {{HTMLElement("legend")}} element hebben. Het {{HTMLElement("legend")}} element beschrijft formeel het doel van het {{HTMLElement("fieldset")}} element. Veel ondersteunende technologieën herkennen het {{HTMLElement("legend")}} element als deel van het label van elke widget binnen het {{HTMLElement("fieldset")}} element. Zo lezen sommige schermlezers, zoals <a href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp" rel="external" title="http://www.freedomscientific.com/products/fs/jaws-product-page.asp">Jaws</a> of <a href="http://www.nvda-project.org/" rel="external" title="http://www.nvda-project.org/">NVDA</a>, eerst de legend voordat ze het label van een widget lezen.</p> - -<p>Hier volgt een klein voorbeeld:</p> - -<pre class="brush:html;"><form> - <fieldset> - <legend>Fruitsap grootte</legend> - <p> - <input type="radio" name="size" id="size_1" value="small" /> - <label for="size_1">Klein</label> - </p> - <p> - <input type="radio" name="size" id="size_2" value="medium" /> - <label for="size_2">Medium</label> - </p> - <p> - <input type="radio" name="size" id="size_3" value="large" /> - <label for="size_3">Groot</label> - </p> - </fieldset> -</form></pre> - -<p>In dit voorbeeld zal een schermlezer voor de eerste widget "Fruitsap klein" lezen, voor de tweede "Fruitsap medium" en voor de derde "Fruitsap groot".</p> - -<p>Het gebruik van het {{HTMLElement("fieldset")}} element is zeer belangrijk. Keuzerondjes bijvoorbeeld moeten steeds binnen een {{HTMLElement("fieldset")}} element ondergebracht worden. In het algemeen kan het {{HTMLElement("fieldset")}} element ook een formulier in secties verdelen. Omwille van zijn invloed op ondersteunende technologieën is het {{HTMLElement("fieldset")}} element een sleutelelement om toegankelijke formulieren te maken. Het is echter aan de gebruiker om het doelmatig aan te wenden. Ga bij elk gebruik na hoe een schermlezer het element interpreteert en pas uw opzet daaraan aan.</p> - -<p>Het {{HTMLElement("fieldset")}} element ondersteunt volgende specifieke attributen:</p> - -<table> - <caption>Attributen van het {{HTMLElement("fieldset")}} element</caption> - <thead> - <tr> - <th scope="col">Attribuut naam</th> - <th scope="col">Defaultwaarde</th> - <th scope="col">Beschrijving</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{htmlattrxref("disabled","fieldset")}}</td> - <td>(<em>false</em>)</td> - <td>Als dit attribuut <code>true</code> is zijn de widgets van de formulieren die afhankelijk zijn van het huidige formulier (behalve deze van het eerste {{HTMLElement("legend") }} element) niet geactiveerd en dus niet bruikbaar. Deze zijn in de meeste browsers grijs gekleurd.</td> - </tr> - </tbody> -</table> - -<h3 id="Het_<label>_element">Het <label> element</h3> - -<p>Het {{HTMLElement("label")}} element definieert formeel het label van een HTML widget. Dit is het belangrijkste element om toegankelijke formulieren te maken.</p> - -<p>Het {{HTMLElement("label")}} element heeft de volgende attributen:</p> - -<table> - <caption>Attributen van het {{HTMLElement("label")}} element</caption> - <thead> - <tr> - <th scope="col">Attribuut naam</th> - <th scope="col">Defaultwaarde</th> - <th scope="col">Beschrijving</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{htmlattrxref("for","label")}}</td> - <td></td> - <td>De ID van een widget met een label in hetzelfde document als het {{HTMLElement("label")}} element. Het label wordt toegepast op het eerste element waarvan de ID overeenkomt met de waarde van het <code>for</code> attribuut in het document.</td> - </tr> - </tbody> -</table> - -<p>Een {{HTMLElement("label")}} element is gebonden aan zijn widget door het <code>for</code> attribuut. Het <code>for</code> attribuut refereert naar het <code>id</code> attribuut van de overeenkomstige widget. Een widget kan genest zijn in zijn {{HTMLElement("label")}} element maar zelfs in dat geval is het aangeraden om het <code>for</code> attribuut te gebruiken omdat sommige ondersteunende technologieën niet overweg kunnen met expliciete relaties tussen labels en widgets.</p> - -<p>Maar zelfs met ondersteunende technologieën ter zijde, laat een formele aanduiding van een label voor een bepaalde widget in alle browsers de gebruiker toe de widget te activeren door op het label te klikken. Dit is vooral nuttig bij keuzerondjes en selectievakjes.</p> - -<pre class="brush:html;"><form> - <p> - <input type="checkbox" id="taste_1" name="taste_cherry" value="1"> - <label for="taste_1">I like cherry</label> - </p> - <p> - <label for="taste_2"> - <input type="checkbox" id="taste_2" name="taste_banana" value="1"> - I like banana - </label> - </p> -</form></pre> - -<p>Sommige ondersteunende technologieën kunnen het moeilijk hebben met meerdere labels voor één widget. In dit geval moet de widget genest worden in zijn eigen element om een toegankelijk formulier te maken.</p> - -<p>Bekijk volgend voorbeeld:</p> - -<pre class="brush:html;"><form> - <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p> - - <!-- when the thing you are labeling is a descendant of the label, it is not necessary to use the 'for' attribute on the label. --> - <!-- So this: --> - <label> - <span>Name: </span> - <input type="text" name="username" required /> - <strong><abbr title="required">*</abbr></strong> - </label> - - <!-- is the same as this: --> - <div> - <label for="username">Name: </label> - <input id="username" type="text" name="username" required /> - <strong><abbr title="required">*</abbr></strong> - </div> - - <p> - <label for="birth"> <!-- so here, the 'for' attribute is redundant. --> - <span>Date of birth: </span> - <input type="text" id="birth" name="userbirth" maxlength="10" /> <em>formated as mm/dd/yyyy</em> - </label> - </p> -</form></pre> - -<p>In dit voorbeeld definieert de eerste paragraaf de vereiste elementen. Dit moet vooraan staan opdat de ondersteunende technologieën, zoals schermlezers, deze informatie hebben voordat ze het element zelf tegenkomen.</p> - -<p>Het eerste veld is vereist. Dus zijn label geeft zijn naam aan plus het feit dat het vereist is. Voor de tweede label is er is geen garantie dat de gebruiker te weten komt dat dit element vereist is.</p> - -<p>Het tweede form element werkt op dezelfde manier. Zo weet de gebruiker hoe hij de datum moet ingeven.</p> - -<h3 id="Het_<output>_element">Het <output> element</h3> - -<p>Dit element dient om het resultaat van een berekening in op te slaan. Het bepaalt formeel een relatie tussen de velden die informatie om te bewerken ontvangen en een element dat het resultaat zal tonen. Het wordt ook gebruikt door sommige ondersteunende technologieën om wijzigingen te detecteren en overeenkomstig te reageren.</p> - -<p>Het {{HTMLElement("output")}} element ondersteunt de volgende attributen:</p> - -<table> - <caption>Attributen van het {{HTMLElement("output")}} element</caption> - <thead> - <tr> - <th scope="col">Attribuut naam</th> - <th scope="col">Defaultwaarde</th> - <th scope="col">Beschrijving</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{htmlattrxref("for","output")}}</td> - <td></td> - <td>Een lijst van IDs, gescheiden door spaties, van andere elementen om aan te geven dat deze elementen deel uit maken van de invoerwaarden van de berekening (of die de berekening op enige andere wijze beïnvloeden.</td> - </tr> - </tbody> -</table> - -<h3 id="Gewone_HTML_structuren_gebruikt_bij_formulieren">Gewone HTML structuren gebruikt bij formulieren</h3> - -<p>Ondanks al het voorgaande blijven formulieren gewone HTML structuren. Dus alles over HTML is ook van toepassing op formulieren.</p> - -<p>Zoals in de voorbeelden te zien is worden widgets tussen {{HTMLElement("p")}} of {{HTMLElement("div")}} elementen geplaatst.</p> - -<p>Samen met het {{HTMLElement("fieldset")}} element worden ook HTML titels gebruikt en worden formulieren in secties verdeeld om ingewikkelde formulieren te maken.</p> - -<p>Ook worden vaak HTML lijsten gebruikt bij keuzevakjes en keuzerondjes.</p> - -<p>Ziehier een eenvoudig betalingsformulier:</p> - -<pre class="brush:html;"><form> - <h1>Payment form</h1> - <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p> - - <section> - <h2>Contact information</h2> - - <fieldset> - <legend>Title</legend> - <ul> - <li> - <label for="title_1"> - <input type="radio" id="title_1" name="title" value="M." /> - Mister - </label> - </li> - <li> - <label for="title_2"> - <input type="radio" id="title_2" name="title" value="Ms." /> - Miss - </label> - </li> - </ul> - </fieldset> - - <p> - <label for="name"> - <span>Name: </span> - <input type="text" id="name" name="username" required /> - <strong><abbr title="required">*</abbr></strong> - </label> - </p> - - <p> - <label for="mail"> - <span>E-mail: </span> - <input type="email" id="mail" name="usermail" required /> - <strong><abbr title="required">*</abbr></strong> - </label> - </p> - </section> - - <section> - <h2>Payment information</h2> - - <p> - <label for="card"> - <span>Card type:</span> - <select id="card" name="usercard"> - <option value="visa">Visa</option> - <option value="mc">Mastercard</option> - <option value="amex">American Express</option> - </select> - </label> - </p> - <p> - <label for="number"> - <span>Card number:</span> - <input type="text" id="number" name="cardnumber" required /> - <strong><abbr title="required">*</abbr></strong> - </label> - </p> - <p> - <label for="date"> - <span>Expiration date:</span> - <input type="text" id="date" name="expiration" required /> - <strong><abbr title="required">*</abbr></strong> - <em>formated as mm/yy</em> - </label> - </p> - </section> - - <section> - <p> - <button>Validate the payment</button> - </p> - </section> -</form></pre> - -<p>Met behulp van CSS ziet het formulier er zo uit:</p> - -<table> - <thead> - <tr> - <th scope="col" style="text-align: center;">Live voorbeeld</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{EmbedLiveSample("A_payment_form",460,600, "", "HTML/Forms/How_to_structure_an_HTML_form/Example")}}</td> - </tr> - <tr> - <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form/Example" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form/Example">Probeer de broncode</a></td> - </tr> - </tbody> -</table> - -<h2 id="HTML_widgets">HTML widgets</h2> - -<p>Bij het construeren van een formulier zijn er widgets om informatie van de gebruiker te verkrijgen. In dit artikel wordt uitgelegd hoe deze widgets getoond worden. Het artikel: <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets">Basis widgets voor formulieren </a>gaat dieper in op het werken met widgets.</p> - -<h3 id="Het_<input>_element">Het <input> element</h3> - -<p>Dit is een speciaal element omdat het eigenlijk van alles kan zijn. Door eenvoudig zijn <code>type</code> attribuut te wijzigen kan het totaal iets anders worden. Om de zaken te vereenvoudigen kan het <code>type</code> attribuut ingedeeld worden in vier categorieën: eenregelige tekstvelden, elementen zonder tekstinvoer, elementen voor invoer van datum en tijd en knoppen. Hierdoor heeft het {{HTMLElement("input")}} element veel attributen maar het is niet altijd eenvoudig uit te maken welke relevant zijn en welke vereist zijn want dit is afhankelijk van het <code>type</code> attribuut.</p> - -<p>Dit wordt overzichtelijk gemaakt in volgende tabel. (Zie voor een volledige lijst van alle attributen de pagina betreffende het {{HTMLElement("input")}} element):</p> - -<table> - <thead> - <tr> - <th scope="col">Waarde van het type attribuut</th> - <th scope="col">Beschrijving</th> - <th scope="col">Vereiste attributen</th> - <th scope="col">Relevante attributen</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" style="text-align: center;">Eenregelige tekstvelden</th> - </tr> - <tr> - <td><code>text</code></td> - <td>Dit is het meest eenvoudige tekstveld. De waarde <em>text</em> voor het <code>type</code> attribuut is de defaultwaarde van dit attribuut. De waarde wordt gelezen zoals zij wordt ingegeven.</td> - <td></td> - <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}, {{htmlattrxref("spellcheck","input")}}</td> - </tr> - <tr> - <td><code>email</code></td> - <td>Een veld dat alleen e-mailadressen toelaat.</td> - <td></td> - <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("multiple","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}</td> - </tr> - <tr> - <td><code>password</code></td> - <td>De waarde van dit tekstveld wordt verborgen.</td> - <td></td> - <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}</td> - </tr> - <tr> - <td><code>search</code></td> - <td>Een veld om zoekwoorden in te geven.</td> - <td></td> - <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("autosave","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}, {{htmlattrxref("spellcheck","input")}}</td> - </tr> - <tr> - <td><code>tel</code></td> - <td>Een veld om een telefoonnummer in te geven.</td> - <td></td> - <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}</td> - </tr> - <tr> - <td><code>url</code></td> - <td>Een veld om een absolute URL in te geven.</td> - <td></td> - <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}</td> - </tr> - <tr> - <th colspan="4" style="text-align: center;">Widgets zonder tekstingave</th> - </tr> - <tr> - <td><code>checkbox</code></td> - <td>Een keuzevakje.</td> - <td></td> - <td>{{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}</td> - </tr> - <tr> - <td><code>color</code></td> - <td>Een widget om een kleur te kiezen.</td> - <td></td> - <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("required","input")}}</td> - </tr> - <tr> - <td><code>file</code></td> - <td>Een widget om een bestand te kiezen.</td> - <td></td> - <td>{{htmlattrxref("accept","input")}}, {{htmlattrxref("multiple","input")}}, {{htmlattrxref("required","input")}}</td> - </tr> - <tr> - <td><code>hidden</code></td> - <td>Een widget die niet getoond wordt maar waarvan de waarde toch naar de server gestuurd wordt.</td> - <td></td> - <td></td> - </tr> - <tr> - <td><code>number</code></td> - <td>Een widget voor ingave van een getal met drijvende komma.</td> - <td></td> - <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}</td> - </tr> - <tr> - <td><code>radio</code></td> - <td>Een keuzerondje. Slechts één van een gegeven groep kan gekozen worden.</td> - <td></td> - <td>{{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}</td> - </tr> - <tr> - <td><code>range</code></td> - <td>Een widget om een getal in te geven waarvan de waarde niet belangrijk is.</td> - <td></td> - <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}</td> - </tr> - <tr> - <th colspan="4" style="text-align: center;">Widgetsvoor datum en tijd - <div class="note">Niet ondersteund.</div> - </th> - </tr> - <tr> - <td><code>date</code></td> - <td>Een veld om de datum in te geven (jaar, maand en dag, geen tijd). - <div class="note">Niet geïnstalleerd (zie <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825294">bug 825294</a>)</div> - </td> - <td></td> - <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td> - </tr> - <tr> - <td><code>datetime</code></td> - <td>Een veld om een datum en tijd in te geven (uur, minuut, seconde en fractie van een seconde) gebaseerd op de UTC tijdzone. - <div class="note">Niet geïnstalleerd (zie <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825294">bug 825294</a>)</div> - </td> - <td></td> - <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td> - </tr> - <tr> - <td><code>datetime-local</code></td> - <td>Een veld om een datum en tijd in te geven zonder tijdzone. - <div class="note">Niet geïnstalleerd (zie <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825294">bug 825294</a>)</div> - </td> - <td></td> - <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td> - </tr> - <tr> - <td><code>month</code></td> - <td>Een veld voor ingave van maand en jaar, zonder tijdzone. - <div class="note">Niet geïnstalleerd (zie <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=446510">bug 446510</a>)</div> - </td> - <td></td> - <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td> - </tr> - <tr> - <td><code>time</code></td> - <td>Een veld om een tijd in te geven zonder tijdzone. - <div class="note">Niet geïnstalleerd zie <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825294">bug 825294</a>)</div> - </td> - <td></td> - <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td> - </tr> - <tr> - <td><code>week</code></td> - <td>Een veld om een datum in te geven bestaande uit een week-jaarnummer en een weeknummer zonder tijdzone. - <div class="note">Niet geïnstalleerd (zie <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825294">bug 825294</a>)</div> - </td> - <td></td> - <td>{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}</td> - </tr> - <tr> - <th colspan="4" style="text-align: center;">Knoppen</th> - </tr> - <tr> - <td><code>button</code></td> - <td>Een knop zonder default gedrag.</td> - <td></td> - <td>{{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}</td> - </tr> - <tr> - <td><code>image</code></td> - <td>Knop om grafisch element te verzenden.</td> - <td>{{htmlattrxref("src","input")}}, {{htmlattrxref("alt","input")}}</td> - <td>{{htmlattrxref("width","input")}}, {{htmlattrxref("height","input")}}, {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}</td> - </tr> - <tr> - <td><code>reset</code></td> - <td>Een knop die de inhoud van het formulier terugzet naar de defaultwaarden.</td> - <td></td> - <td>{{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}</td> - </tr> - <tr> - <td><code>submit</code></td> - <td>Knop die het formulier verzendt.</td> - <td></td> - <td>{{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}</td> - </tr> - </tbody> -</table> - -<p>Als om een of andere reden de waarde van het <code>type</code> attribuut niet ondersteund wordt door de browser wordt het {{HTMLElement("input")}} element weergegeven alsof het <em>text</em> is. Dit verzekert dat het formulier blijft werken, zij het niet zo netjes.</p> - -<p>Ondanks dat het {{HTMLElement("input")}} element krachtig is, kan het niet alles doen. Daarvoor zijn er een aantal andere elementen.</p> - -<h3 id="Het_<textarea>_element">Het <textarea> element</h3> - -<p>Dit is een tekstveld met meerdere regels. Dit element werkt op dezelfde wijze als het tekstveld met één regel behalve dat het invoegen van regeleinden toelaat. Er zijn ook enkele extra attributen die toelaten tekst te verdelen over meerdere regels:</p> - -<table> - <caption>Attributen voor het {{HTMLElement("textarea")}} element</caption> - <thead> - <tr> - <th scope="col">Attribuut naam</th> - <th scope="col">Defaultwaarde</th> - <th scope="col">Beschrijving</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{htmlattrxref("cols","textarea")}}</td> - <td><code>20</code></td> - <td>De zichtbare tekstbreedte in gemiddelde karakterbreedten.</td> - </tr> - <tr> - <td>{{htmlattrxref("rows","textarea")}}</td> - <td></td> - <td>Het aantal zichtbare regels in het tekstveld.</td> - </tr> - <tr> - <td>{{htmlattrxref("wrap","textarea")}}</td> - <td><code>soft</code></td> - <td>Geeft aan hoe het veld de tekst afbreekt. Mogelijke waarden zijn: <code>hard</code> of <code>soft</code></td> - </tr> - </tbody> -</table> - -<p>Het {{HTMLElement("textarea")}} element werkt enigszins anders dan het {{HTMLElement("input")}} element. Het {{HTMLElement("input")}} element is een zelfsluitend element. Dit betekent dat het geen afstammelingen kan hebben. Het {{ HTMLElement("textarea")}} element daarentegen is een gewoon element dat afstammelingen kan hebben met tekstinhoud.</p> - -<p>Dit heeft twee consequenties:</p> - -<ul> - <li>Om een defaultwaarde voor een {{HTMLElement("input")}} element te <span class="highlighted">definiëren moet het </span><code>value</code> attribuut gebruikt worden maar bij een {{HTMLElement("textarea")}} element moet de defaulttekst tussen de begin- en eindtag van het {{HTMLElement("textarea")}} element geplaatst worden.</li> - <li>Het {{HTMLElement("textarea")}} element accepteert alleen tekst. Dit betekent dat elke HTML inhoud in een {{HTMLElement("textarea")}} element als platte tekst wordt beschouwd..</li> -</ul> - -<p>In het volgende voorbeeld worden beide {{HTMLElement("textarea")}} elementen op dezelfde manier getoond:</p> - -<pre class="brush:html;"><form> - <p> - <label for="text_1">With regular HTML</label><br> - <textarea id="text_1" name="regular"><p>I'm a paragraphe</p></textarea> - </p> - <p> - <label for="text_2">With escaped HTML</label><br> - <textarea id="text_2" name="escaped">&lt;p&gt;I'm a paragraphe&lt;/p&gt;</textarea> - </p> - <p> - <button>Send me</button> - </p> -</form></pre> - -<h3 id="De_<select>_<option>_en_<optgroup>_elementen">De <select>, <option>, en <optgroup> elementen</h3> - -<p>Het {{HTMLElement("select")}} element laat de gebruiker toe een waarde in te geven dan wel een waarde te kiezen uit een lijst (zogenaamde combo box). Een keuzevak laat toe een voorgedefinieerde waarde te kiezen. Een combo box kan lechts één keuze hebben ofwel meerdere keuzes. Dit wordt uitgelegd in het artikel: <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets">De basis widges voor formulieren</a>.</p> - -<p>Elke waarde in het keuzevak wordt gedefinieerd met een {{HTMLElement("option")}} element en deze elementen kunnen gegroepeerd worden binnen {{HTMLElement("optgroup")}} elementen.</p> - -<p>Bijvoorbeeld:</p> - -<pre class="brush:html;"><form> - <p> - <label for="myFruit">Pick a fruit</label> - <select id="myFruit" name="fruit"> - <!-- There is a trick here you think you'll pick - a banana but you'll eat an orange >:-) --> - <option value="orange">Banana</option> - <option>Cherry</option> - <optgroup label="berries"> - <option>Blueberry</option> - <option>Raspberry</option> - <option>Strawberry</option> - </optgroup> - </select> - </p> -</form></pre> - -<p>Als een {{HTMLElement("option")}} element een <code>value</code> attribuut heeft wordt de waarde van dit attribuut meegestuurd als het formulier wordt verzonden. Als er geen attribuut is opgegeven is het de inhoud van het {{HTMLElement("option")}} element die gebruikt wordt als de waarde van het keuzevak.</p> - -<p>Bij het {{HTMLElement("optgroup")}} element wordt het <code>label</code> attribuut getoond voor de waarden. Dit ziet er uit als een keuzemogelijkheid maar dit label kan niet geselecteerd worden.</p> - -<table> - <caption>Attributen van het {{HTMLElement("option")}} element</caption> - <thead> - <tr> - <th scope="col">Attribuute naam</th> - <th scope="col">Defaultwaarde</th> - <th scope="col">Beschrijving</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{htmlattrxref("label","option")}}</td> - <td></td> - <td>Dit is de tekst van de optie. Het is deze tekst die getoond wordt als het <code>label</code> attribuut niet gedefinieerd is.</td> - </tr> - <tr> - <td>{{htmlattrxref("selected","option")}}</td> - <td>(<em>false</em>)</td> - <td>Geeft aan dat de optie geselecteerd is.</td> - </tr> - </tbody> -</table> - -<table> - <caption>Attributen van het {{HTMLElement("optgroup")}} element</caption> - <thead> - <tr> - <th scope="col">Attribuut naam</th> - <th scope="col">Defaultwaarde</th> - <th scope="col">Beschrijving</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{htmlattrxref("label","optgroup")}}</td> - <td></td> - <td>De naam van de groep van opties. <strong>Dit attribuut is verplicht.</strong></td> - </tr> - </tbody> -</table> - -<h3 id="Het_<datalist>_element">Het <datalist> element</h3> - -<p>Dit is een uitbreiding van de widgets door middel van vooringestelde waarden voor bepaalde widgets. Het meest bekende voorbeeld is de auto aanvulling voor tekstvelden. De beschikbare waarden worden door {{HTMLElement("option")}} elementen binnen een {{HTMLElement("datalist")}} element geplaatst.</p> - -<p>Om een widget aan een {{HTMLElement("datalist")}} element te binden wordt het <code>list</code> attribuut van de widget gebruikt. Deze vermeldt het <code>id</code> attribuut van het {{HTMLElement("datalist")}} element dat gebruikt moet worden.</p> - -<p>Het {{HTMLElement("datalist")}} element is nog maar vrij recent aan HTML formulieren toegevoegd. Er zijn dus nog browsers die het niet ondersteunen. Om toch een werkbaar formulier te hebben op deze browsers bestaat er een kleine truk:</p> - -<pre class="brush:html;"><form> - <p> - <label for="myFruit">What is your favorite fruit?</label> - <input type="text" id="myFruit" name="fruit" list="fruitList" /> - - <datalist id="fruitList"> - <label for="suggestion">or pick a fruit</label> - <select id="suggestion" name="altFruit"> - <option value="banana">Banana</option> - <option value="cherry">Cherry</option> - <option value="strawberry">Strawberry</option> - </select> - </datalist> - </p> -</form></pre> - -<p>Enerzijds negeren de browsers die het {{HTMLElement("datalist")}} element begrijpen de elementen die geen {{HTMLElement("option")}} elementen zijn en werken zoals verwacht. Anderzijds tonen de browsers die het {{HTMLElement("datalist")}} element niet begrijpen het label en het selectievakje. Natuurlijk zijn er andere methoden om het niet begrijpen van het {{HTMLElement("datalist")}} element op te lossen maar die vereisen het gebruik van van JavaScript, wat niet altijd de juiste oplossing is.</p> - -<table> - <tbody> - <tr> - <th scope="row">Safari 6</th> - <td><img alt="Screenshot of the datalist element fallback with Safari on Mac OS" src="/files/4583/datalist-safari.png" style="height: 32px; width: 495px;"></td> - </tr> - <tr> - <th scope="row">Firefox 18</th> - <td><img alt="Screenshot of the datalist element with Firefox on Mac OS" src="/files/4581/datalist-firefox-macos.png" style="height: 102px; width: 353px;"></td> - </tr> - </tbody> -</table> - -<h3 id="De_<meter>_en_<progress>_elementen">De <meter> en <progress> elementen</h3> - -<p>Deze twee elementen geven een grafische voorstelling van een numerische waarde. Het verschil tussen beide is louter semantisch:</p> - -<ul> - <li>Het {{HTMLElement("meter")}} element geeft een statische waarde weer tussen een minimum en een maximumwaarde.</li> - <li>Het {{HTMLElement("progress")}} element geeft een waarde weer die verandert met de tijd tussen een minimum en een maximum waarde. De verandering van de waarde (en daardoor ook de wijziging van de voortuitgangsindicator) moet door middel van JavaScript gebeuren omdat het element geen enkel mechanisme heeft om dat zelf te doen.</li> -</ul> - -<p>Hierdoor hebben deze elementen een specifieke set attributen:</p> - -<table> - <caption>Attributen van het {{HTMLElement("meter")}} element</caption> - <thead> - <tr> - <th scope="col">Attribuute naam</th> - <th scope="col">Defaultwaarde</th> - <th scope="col">Beschrijving</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{htmlattrxref("min","meter")}}</td> - <td>0</td> - <td>De ondergrens van de numerieke waarde van het gemeten interval.</td> - </tr> - <tr> - <td>{{htmlattrxref("max","meter")}}</td> - <td>1</td> - <td>De bovengrens van de numerieke waarde van het gemeten interval.</td> - </tr> - <tr> - <td>{{htmlattrxref("low","meter")}}</td> - <td>the <code>min</code> value</td> - <td>De hoogste numerieke waarde van de ondergrens van het gemeten interval.</td> - </tr> - <tr> - <td>{{htmlattrxref("high","meter")}}</td> - <td>the <code>max</code> value</td> - <td>De laagste numerieke waarde van de bovengrens van het gemeten interval.</td> - </tr> - <tr> - <td>{{htmlattrxref("optimum","meter")}}</td> - <td></td> - <td>De optimale numerieke waarde.</td> - </tr> - </tbody> -</table> - -<table> - <caption>Attributen van het {{HTMLElement("progress")}} element</caption> - <thead> - <tr> - <th scope="col">Attribuute naam</th> - <th scope="col">Defaultwaarde</th> - <th scope="col">Beschrijving</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{htmlattrxref("max","progress")}}</td> - <td></td> - <td>Dit attribuut geeft aan hoeveel werk er nog moet gedaan worden door de taak aangeduid door het {{HTMLElement("progress")}} element.</td> - </tr> - </tbody> -</table> - -<h3 id="Het_<button>_element">Het <button> element</h3> - -<p>Een {{HTMLElement("button")}} element toont een knop. Een knop kan drie functies hebben afhankelijk van het <code>type</code> attribuut:</p> - -<ul> - <li>Een verzendknop stuurt de formuliergegevens naar de webpagina die gedefinieerd wordt door het <code>action</code> attribuut van het {{HTMLElement("form")}} element.</li> - <li>Een herstelknop stelt alle formulierwidgets onmiddellijk in op hun defaultwaarden. Dit wordt tegenwoordig als een minder goede werkwijze beschouwd omdat de gebruiker gemakkelijk zijn werk kan verliezen.</li> - <li>Een blanko knop doet niets uit zichzelf en de gebruiker moet door middel van JavaScript er een fuctie aan geven.</li> -</ul> - -<table> - <caption>Attributen van het {{HTMLElement("button")}} element</caption> - <thead> - <tr> - <th scope="col">Attribuute naam</th> - <th scope="col">Defaultwaarde</th> - <th scope="col">Beschrijving</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{htmlattrxref("type","button")}}</td> - <td><code>submit</code></td> - <td>Het type knop. Mogelijke waarden zijn: <code>button</code>, <code>reset</code>, or <code>submit.</code></td> - </tr> - <tr> - <td>{{htmlattrxref("formaction","button")}}</td> - <td></td> - <td>Bij de verzendknop zal dit attribuut de waarde van het <code>action</code> attribuut van het {{HTMLElement("form")}} element overschrijven.</td> - </tr> - <tr> - <td>{{htmlattrxref("formenctype","button")}}</td> - <td></td> - <td>Bij de verzendknop zal dit attribuut de waarde van het <code>enctype</code> attribuut van het {{HTMLElement("form")}} element overschrijven.</td> - </tr> - <tr> - <td>{{htmlattrxref("formmethod","button")}}</td> - <td></td> - <td>Bij de verzendknop zal dit attribuut de waarde van het <code>method</code> attribuut van het {{HTMLElement("form")}} element overschrijven.</td> - </tr> - <tr> - <td>{{htmlattrxref("formnovalidate","button")}}</td> - <td></td> - <td>Bij de verzendknop zal dit attribuut de waarde van het <code>novalidate</code> attribuut van het {{HTMLElement("form")}} element overschrijven.</td> - </tr> - <tr> - <td>{{htmlattrxref("formtarget","button")}}</td> - <td></td> - <td>Bij de verzendknop zal dit attribuut de waarde van het <code>target</code> attribuut van het {{HTMLElement("form")}} element overschrijven.</td> - </tr> - </tbody> -</table> - -<p>Op technisch vlak is er haast geen onderscheid tussen een knop gedefinieerd door het {{HTMLElement("button")}} element en het {{HTMLElement("input")}} element. Het enig merkbaar verschil is het label van de knop zelf. Bij het {{HTMLElement("input")}} element kan het label slechts uit alfanumerische tekens bestaan terwijl bij een {{HTMLElement("button")}} element het label HTML kan zijn. Zijn stijl kan dan ook overeenkomstig aangepast zijn.</p> - -<div class="note"><strong>Nota:</strong> Omwille van historische redenen werd het {{HTMLElement("button")}} element niet vaak gebruikt en ontwikkelaars gaven de voorkeur aan knoppen gemaakt met het {{HTMLElement("input")}} element. Dit kwam door een fout in oudere versies van Internet Explorer (IE). Bij gebruik van een <code>name</code> en een <code>value</code> attribuut in een {{HTMLElement("button")}} element in IE6 en IE7 werd niet de inhoud van het <code>value</code> attribuut verzonden maar wel de inhoud van de knop zelf. Dit is hersteld sinds IE8 zodat het niet langer nodig is om het {{HTMLElement("button")}} element te vermijden.</div> - -<h3 id="Basis_attributen">Basis attributen</h3> - -<p>Veel elementen om formulieren te maken hebben specifieke attributen. Maar er zijn attributen die gemeenschappelijk zijn voor alle elementen. Hier volgt een lijst van deze attributen:</p> - -<table> - <thead> - <tr> - <th scope="col">Attribuute naam</th> - <th scope="col">Defaultwaarde</th> - <th scope="col">Beschrijving</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>autofocus</code></td> - <td>(<em>false</em>)</td> - <td>Bepaalt of het element automatisch de focus krijgt waneer de pagina geladen wordt. Slechts één element in een document kan de focus krijgen. De gebruiker kan natuurlijk altijd nog werken in een ander element.</td> - </tr> - <tr> - <td><code>disabled</code></td> - <td>(<em>false</em>)</td> - <td>Dit attribuut belet de gebruiker om het element te gebruiken. Als dit attribuut niet gespecifieerd is, erft het element de instellingen van het element waarin het vervat is. Bijvoorbeeld in het {{HTMLElement("fieldset")}} element: als er geen omvattend element is met het <code>disabled</code> attribuut ingesteld dan is het element actief.</td> - </tr> - <tr> - <td><code>form</code></td> - <td></td> - <td>Het formulierelement waar de widget mee geassocieerd is. De waarde van het attribuut moet het <code>id</code> attribuut zijn van een {{HTMLElement("form")}} element in hetzelfde document. Theoretisch kan een widget buiten een formulier gebruikt worden maar er is geen enkele browser die dit ondersteunt.</td> - </tr> - <tr> - <td><code>name</code></td> - <td></td> - <td>De naam van het element. Deze wordt mee verzonden met de gegevens.</td> - </tr> - <tr> - <td><code>value</code></td> - <td></td> - <td>De <span class="ng-binding">initiële</span> waarde van het element.</td> - </tr> - </tbody> -</table> - -<h2 id="Het_gebruik_van_ARIA_om_HTML_formulieren_te_maken">Het gebruik van <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> om HTML formulieren te maken</h2> - -<p><a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> is <a href="http://www.w3.org/TR/wai-aria/" rel="external" title="http://www.w3.org/TR/wai-aria/">a W3C Candidate Recommendation</a> en voegt meer mogelijkheden toe aan HTML om betere internettoepassingen te maken, inclusief formulieren. In "<a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">Hoe aangepaste formulierwidgets maken</a>" wordt dieper in gegaan op het maken van formulieren maar hier zijn alvast enkele basisinstructies.</p> - -<p>De support van ARIA en ondersteunende technologieën door browsers is ver van perfect maar het wordt steeds beter. Als een browser een ARIA attribuut tegenkomt moet hij informatie naar de toegangslaag van het besturingssysteem sturen. Dit loopt niet altijd goed voor alle browsers over verschillende platformen. De ondersteunende technologieën van hun kant moeten verbinding maken met de toegangslaag van de besturingssysteem om de informatie van de browsers te verkrijgen. Niet alle applicaties doen dat correct. Dus het gebruik van ARIA betekent niet dat een webtoepassing correct zal werken maar men doet alleszins zijn best. Hoe dan ook, ARIA is op het ogenblik de beste technologie en iets is beter dan niets.</p> - -<p>De documentatie over ARIA is hier te vinden: <a href="/en-US/docs/Accessibility/ARIA/forms" title="/en-US/docs/Accessibility/ARIA/forms">lees hier de documentaie over ARIA</a>.</p> - -<h3 id="Het_aria-labelledby_attribuut">Het <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute"><code>aria-labelledby</code></a> attribuut</h3> - -<p>Dit attribuut laat toe een label aan te maken zonder het {{HTMLElement("label")}} element. Het <code>aria-labelledby</code> attribuut wordt geplaatst bij de widget en refereert naar het <code>id</code> attribuut van het element dat als label moet gebruikt worden.</p> - -<pre class="brush:html;"><form> - <p id="fruitLabel">What's your favorite fruit</p> - <p> - <input type="text" name="fruit" aria-labelledby="fruitLabel"> - </p> -</form></pre> - -<p>Eigenlijk is het het tegenovergetelde van het <code>for</code> attribuut van het {{HTMLElement("label")}} element. Bij het <code>for</code> attribuut wordt naar de <code>id</code> van de widget gerefereerd maar bij het <code>aria-labelledby</code> attribuut wordt gerefereerd naar de <code>id</code> van het label.</p> - -<h3 id="Het_aria-describedby_attribuut">Het <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute"><code>aria-describedby</code></a> attribuut</h3> - -<p>Is eigenlijk gelijk aan het <code>aria-labelledby</code> attribuut. Het verschil is eerder semantisch. Een label definieert de essentie van een object terwijl een beschrijving meer informatie verschaft dan de gebruiker op dat ogenblijk nodig heeft. Dus het <code>aria-describedby</code> attribuut wordt niet aangeraden voor formulieren. Hier wordt beter het <code>aria-labelledby</code> attribuut gebruikt tenzij men bredere informatie over het formulier wil geven. Echter wordt het juist aanbevolen om <code>aria-describedby</code> wel te gebruiken om invoervelden te omschrijven (naast het <code>label</code> element). Zoals hoelang een wachtwoord moet zijn (zie voorbeeld).</p> - -<pre class="brush: html"><form> - <label for="pw"> - Password - </label> - <input type="password" id="pw" aria-describedby="pw_desc"> - <p id="pw_desc"> - Please enter at least 12 characters. - </p> -</form></pre> - -<h3 id="Het_aria-label_attribuut">Het <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute"><code>aria-label</code></a> attribuut</h3> - -<p>Dit attribuut wordt gebruikt als er in de DOM geen expliciet label voor een bepaalde widget bestaat. Het attribuut wordt gebruikt door ondersteunende technologieën wanneer er in de DOM geen verwijzing is naar de widget. </p> - -<pre class="brush:html;"><form> - <p> - <input type="search" name="q" aria-label="Search" /> - <input type="submit" value="Go" /> - </p> -</form></pre> - -<h3 id="Het_role_attribuut">Het <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> attribuut</h3> - -<p>Dit is het voornaamste ARIA attribuut. Het geeft specifieke semantische informatie aan ondersteunende technologieën voor een bepaald HTML element. Er zijn veel <code>role</code> attributen beschikbaar, sommige speciaal voor formulieren.</p> - -<p>ARIA probeert niet alleen semantische informatie te geven voor widgets die niet voor handen zijn in HTML maar ook voor elementen die wel bestaan in HTML.</p> - -<p>De <code>role </code>attributen voor formulieren zijn:</p> - -<ul> - <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role">Button</a></li> - <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role">Checkbox</a></li> - <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role">Progressbar</a></li> - <li>Radio</li> - <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role">Slider</a></li> - <li>Spinbutton</li> - <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role">textbox</a></li> -</ul> - -<p>Er zijn ook samengestelde <code>role</code> attributen:</p> - -<ul> - <li><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">Listbox</a></li> - <li>Radiogroup</li> -</ul> - -<p>En <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques">er zijn er nog meer</a>. ARIA is een zeer grote verzameling. Er kennis van nemen laat toe mooie formulieren te maken, veel beter dan met HTML.</p> - -<h2 id="Conclusie">Conclusie</h2> - -<p>Met deze kennis kunnen volledige HTML formulieren gemaakt worden. Volgend artikel gaat in detail over het maken van formulieren: <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets">De basis formulier elementen</a>.</p> - -<h2 id="Zie_ook">Zie ook</h2> - -<ul> - <li><a href="http://www.alistapart.com/articles/sensibleforms/" rel="external" title="http://www.alistapart.com/articles/sensibleforms/">Ter zijde: Zinvolle formulieren: Een controlelijst voor het maken van formulieren</a></li> -</ul> diff --git a/files/nl/learn/forms/index.html b/files/nl/learn/forms/index.html deleted file mode 100644 index 886250cfb7..0000000000 --- a/files/nl/learn/forms/index.html +++ /dev/null @@ -1,359 +0,0 @@ ---- -title: HTML forms guide -slug: Learn/Forms -tags: - - Featured - - Forms - - Guide - - HTML - - NeedsTranslation - - TopicStub - - Web -translation_of: Learn/Forms -original_slug: Learn/HTML/Forms ---- -<p><span class="seoSummary">This guide is a series of articles that will help you master HTML forms.</span> HTML forms are a very powerful tool for interacting with users; however, for historical and technical reasons, it's not always obvious how to use them to their full potential. In this guide, we'll cover all aspects of HTML forms, from structure to styling, from data handling to custom widgets. You'll learn to enjoy the great power they offer!</p> - -<h2 id="Articles">Articles</h2> - -<ol> - <li><a href="/en-US/docs/HTML/Forms/My_first_HTML_form" title="/en-US/docs/HTML/Forms/My_first_HTML_form">My first HTML form</a></li> - <li><a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form"><span>How to structure an HTML form</span></a></li> - <li><a href="/en-US/docs/HTML/Forms/The_native_form_widgets" title="/en-US/docs/HTML/Forms/The_native_form_widgets"><span>The native form widgets</span></a></li> - <li>CSS with HTML forms - <ol> - <li><a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms"><span>Styling HTML forms</span></a></li> - <li><a href="/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> - <li><a href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> - </ol> - </li> - <li><a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Sending <s>and retrieving</s> form data</span></a></li> - <li><a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Data form validation</a></li> - <li><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">How to <span>build custom form widgets</span></a></li> - <li><a href="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript" title="/en-US/docs/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a> - <ol> - <li><a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects" title="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Using the FormData object</a></li> - </ol> - </li> - <li><a href="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers" title="/en-US/docs/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> -</ol> - -<h2 id="HTML_Documentation">HTML Documentation</h2> - -<h3 id="HTML_Elements">HTML Elements</h3> - -<table> - <thead> - <tr> - <th scope="col">Element</th> - <th scope="col">Related DOM interface</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td style="vertical-align: top;">{{HTMLElement("button")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLButtonElement")}}</td> - <td style="vertical-align: top;">The <code>button</code> element represents a clickable button.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("datalist")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLDataListElement")}}</td> - <td style="vertical-align: top;">The <span style="font-family: courier new;">datalist</span> element contains a set of {{ HTMLElement("option") }} elements that represent the possible options for the value of other form elements.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("fieldset")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLFieldSetElement")}}</td> - <td style="vertical-align: top;">The <span style="font-family: courier new;">fieldset</span> is used to group several form elements within a form.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("form")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLFormElement")}}</td> - <td style="vertical-align: top;">The <code>form</code> element represents a section of document that contains interactive element that enables a user to submit information to a web server.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("input")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLInputElement")}}</td> - <td style="vertical-align: top;">The <code>input</code> element is used to create interactive controls for forms.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("keygen")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLKeygenElement")}}</td> - <td style="vertical-align: top;">The <code>keygen</code> element exists to facilitate generation of key material, and submission of the public key as part of an HTML form</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("label")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLLabelElement")}}</td> - <td style="vertical-align: top;">The <code>label</code> element represents a caption for an item in a user interface</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("legend")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLLegendElement")}}</td> - <td style="vertical-align: top;">The <code>legend</code> element represents a caption for the content of its parent {{ HTMLElement("fieldset") }}.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("meter")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLMeterElement")}}</td> - <td style="vertical-align: top;">The <code>meter</code> element represents either a scalar value within a known range or a fractional value.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("optgroup")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLOptGroupElement")}}</td> - <td style="vertical-align: top;">the <code>optgroup</code> element creates a group of options within a {{ HTMLElement("select") }} element.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("option")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLOptionElement")}}</td> - <td style="vertical-align: top;">the HTML<em> </em><code>option<em> </em></code>element is used to create a control representing an item within a {{ HTMLElement("select") }}, an {{ HTMLElement("optgroup") }} or a {{ HTMLElement("datalist") }} element.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("output")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLOutputElement")}}</td> - <td style="vertical-align: top;">The <code>output</code> element represents the result of a calculation.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("progress")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLProgressElement")}}</td> - <td style="vertical-align: top;">The <code>progress</code> element is used to view the completion progress of a task.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("select")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLSelectElement")}}</td> - <td style="vertical-align: top;">The <code>select</code> element represents a control that presents a menu of options.</td> - </tr> - <tr> - <td style="vertical-align: top;">{{HTMLElement("textarea")}}</td> - <td style="vertical-align: top;">{{domxref("HTMLTextAreaElement")}}</td> - <td style="vertical-align: top;">The <code>textarea</code> element represents a multi-line plain-text editing control.</td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>Note:</strong> All form elements, as all HTML elements, support the {{domxref("HTMLElement")}} DOM interface.</p> -</div> - -<h3 id="HTML_Attributes">HTML Attributes</h3> - -<table class="standard-table"> - <thead> - <tr> - <th>Attribute Name</th> - <th>Elements</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>accept</td> - <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> - <td>List of types the server accepts, typically a file type.</td> - </tr> - <tr> - <td style="white-space: nowrap;">accept-charset</td> - <td>{{ HTMLElement("form") }}</td> - <td>List of supported charsets.</td> - </tr> - <tr> - <td>action</td> - <td>{{ HTMLElement("form") }}</td> - <td>The URI of a program that processes the information submitted via the form.</td> - </tr> - <tr> - <td>autocomplete</td> - <td>{{ HTMLElement("form") }}, {{ HTMLElement("input") }}</td> - <td>Indicates whether controls in this form can by default have their values automatically completed by the browser.</td> - </tr> - <tr> - <td>autofocus</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>The element should be automatically focused after the page loaded.</td> - </tr> - </tbody> - <tbody> - <tr> - <td>challenge</td> - <td>{{ HTMLElement("keygen") }}</td> - <td>A challenge string that is submitted along with the public key.</td> - </tr> - <tr> - <td>checked</td> - <td>{{ HTMLElement("input") }}</td> - <td>Indicates whether the element should be checked on page load.</td> - </tr> - <tr> - <td>cols</td> - <td>{{ HTMLElement("textarea") }}</td> - <td>Defines the number of columns in a textarea.</td> - </tr> - <tr> - <td>data</td> - <td>{{ HTMLElement("object") }}</td> - <td>Specifies the URL of the resource.</td> - </tr> - <tr> - <td>dirname</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td> </td> - </tr> - <tr> - <td>disabled</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>Indicates whether the user can interact with the element.</td> - </tr> - <tr> - <td>enctype</td> - <td>{{ HTMLElement("form") }}</td> - <td>Defines the content type of the form data when the <code>method</code> is POST.</td> - </tr> - <tr> - <td>for</td> - <td>{{ HTMLElement("label") }}, {{ HTMLElement("output") }}</td> - <td>Describes elements which belong to this one.</td> - </tr> - <tr> - <td>form</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>Indicates the form that is the owner of the element.</td> - </tr> - </tbody> - <tbody> - <tr> - <td>high</td> - <td>{{ HTMLElement("meter") }}</td> - <td>Indicates the lower bound of the upper range.</td> - </tr> - <tr> - <td>keytype</td> - <td>{{ HTMLElement("keygen") }}</td> - <td>Specifies the type of key generated.</td> - </tr> - <tr> - <td>list</td> - <td>{{ HTMLElement("input") }}</td> - <td>Identifies a list of pre-defined options to suggest to the user.</td> - </tr> - <tr> - <td>low</td> - <td>{{ HTMLElement("meter") }}</td> - <td>Indicates the upper bound of the lower range.</td> - </tr> - <tr> - <td>max</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> - <td>Indicates the maximum value allowed.</td> - </tr> - <tr> - <td>maxlength</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td>Defines the maximum number of characters allowed in the element.</td> - </tr> - <tr> - <td>method</td> - <td>{{ HTMLElement("form") }}</td> - <td>Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.</td> - </tr> - <tr> - <td>min</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}</td> - <td>Indicates the minimum value allowed.</td> - </tr> - <tr> - <td>multiple</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> - <td>Indicates whether multiple values can be entered in an input of the type <code>email</code> or <code>file</code>.</td> - </tr> - <tr> - <td>name</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>Name of the element. For example used by the server to identify the fields in form submits.</td> - </tr> - <tr> - <td>novalidate</td> - <td>{{ HTMLElement("form") }}</td> - <td>This attribute indicates that the form shouldn't be validated when submitted.</td> - </tr> - <tr> - <td>optimum</td> - <td>{{ HTMLElement("meter") }}</td> - <td>Indicates the optimal numeric value.</td> - </tr> - <tr> - <td>pattern</td> - <td>{{ HTMLElement("input") }}</td> - <td>Defines a regular expression which the element's value will be validated against.</td> - </tr> - <tr> - <td>placeholder</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td>Provides a hint to the user of what can be entered in the field.</td> - </tr> - <tr> - <td>readonly</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}</td> - <td>Indicates whether the element can be edited or not.</td> - </tr> - <tr> - <td>required</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}</td> - <td>Indicates whether this element is required to fill out or not.</td> - </tr> - <tr> - <td>rows</td> - <td>{{ HTMLElement("textarea") }}</td> - <td>Defines the number of rows in a textarea.</td> - </tr> - <tr> - <td>selected</td> - <td>{{ HTMLElement("option") }}</td> - <td>Defines a value which will be selected on page load.</td> - </tr> - <tr> - <td>size</td> - <td>{{ HTMLElement("input") }}, {{ HTMLElement("select") }}</td> - <td>Defines the width of the element (in pixels). If the element's <code>type</code> attribute is <code>text</code> or <code>password</code> then it's the number of characters.</td> - </tr> - <tr> - <td>src</td> - <td>{{ HTMLElement("img") }}</td> - <td>The URL of the embeddable content.</td> - </tr> - <tr> - <td>step</td> - <td>{{ HTMLElement("input") }}</td> - <td> </td> - </tr> - <tr> - <td>target</td> - <td>{{ HTMLElement("form") }}</td> - <td> </td> - </tr> - <tr> - <td>type</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("input") }}</td> - <td>Defines the type of the element.</td> - </tr> - <tr> - <td>usemap</td> - <td>{{ HTMLElement("img") }}</td> - <td> </td> - </tr> - <tr> - <td>value</td> - <td>{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}</td> - <td>Defines a default value which will be displayed in the element on page load.</td> - </tr> - <tr> - <td>wrap</td> - <td>{{ HTMLElement("textarea") }}</td> - <td>Indicates whether the text should be wrapped or not.</td> - </tr> - </tbody> -</table> - -<h3 id="Normative_reference">Normative reference</h3> - -<ul> - <li><a href="https://www.w3.org/TR/html51/sec-forms.html#sec-forms" lang="en" rel="external" title="https://www.w3.org/TR/html51/sec-forms.html#sec-forms">W3C HTML 5.1 Specification (Forms)</a></li> - <li><a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms" rel="external" title="https://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms">WHATWG HTML Living Standard (Forms)</a></li> -</ul> diff --git a/files/nl/learn/forms/property_compatibility_table_for_form_controls/index.html b/files/nl/learn/forms/property_compatibility_table_for_form_controls/index.html deleted file mode 100644 index 2b3f8d8db2..0000000000 --- a/files/nl/learn/forms/property_compatibility_table_for_form_controls/index.html +++ /dev/null @@ -1,1968 +0,0 @@ ---- -title: Compatibiliteitstabel voor formulierelementen -slug: Learn/Forms/Property_compatibility_table_for_form_controls -translation_of: Learn/Forms/Property_compatibility_table_for_form_controls -original_slug: Compatibiliteitstabel_voor_formulierelementen ---- -<p>De volgende compatibiliteitstabellen trachten een samenvatting te geven van CSS-ondersteuning voor HTML-formulieren. Door de complexiteit van CSS en HTML kunnen deze tabellen niet als volledig beschouwd worden. Zij geven echter een goed inzicht in wat wel en wat niet mogelijk is.</p> - -<h2 id="Hoe_de_tabellen_lezen">Hoe de tabellen lezen</h2> - -<h3 id="Waarden">Waarden</h3> - -<p>Voor elke eigenschap zijn er vier mogelijke waarden:</p> - -<dl> - <dt>JA</dt> - <dd>De eigenschap gedraagt zich consistent over browsers. Neveneffecten zijn in bepaalde gevallen echter niet uitgesloten.</dd> - <dt>GEDEELTELIJK</dt> - <dd>Alhoewel de eigenschap werkt, zijn er toch soms neveneffecten of inconsistenties. Men gebruikt deze eigenschappen best niet tenzij de neveneffecten op voorhand aangepakt worden.</dd> - <dt>NEEN</dt> - <dd>De eigenschap werkt niet of is zo inconsistent dat zij niet betrouwbaar werkt.</dd> - <dt>N.V.T.</dt> - <dd>De eigenschap heeft geen enkele betekenis voor dit type of element.</dd> -</dl> - -<h3 id="Weergave">Weergave</h3> - -<p>Elke eigenschap wordt op twee manieren weergegeven:</p> - -<dl> - <dt>N (Normaal)</dt> - <dd>Betekent dat de eigenschap gewoon toegepast kan worden.</dd> - <dt>A (Aangepast)</dt> - <dd>Geeft aan dat de eigenschap toegepast wordt met onderstaande regels:</dd> -</dl> - -<pre class="brush: css">* { -/* Schakelt het klassieke uiterlijk en aanvoelen uit bij WebKit gebaseerde browsers */ - -webkit-appearance: none; - -/* Schakelt het klassieke uiterlijk en aanvoelen uit bij Gecko gebaseerde browsers */ - -moz-appearance: none; - -/* Schakelt het klassieke uiterlijk en aanvoelen uit bij diverse browsers met inbegrip - van Opera, Internet Explorer en Firefox */ - background: none; -}</pre> - -<h2 id="Compatibiliteitstabellen">Compatibiliteitstabellen</h2> - -<h3 id="Globaal_gedrag">Globaal gedrag</h3> - -<p>Sommige eigenschappen gedragen zich in het algemeen hetzelfde over de diverse browsers:</p> - -<dl> - <dt>{{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}}</dt> - <dd>Deze eigenschappen kunnen bij bepaalde browsers geheel of gedeeltelijk het klassieke uiterlijk en aanvoelen uitschakelen. Deze eigenschappen moeten met voorzichtigheid gebruikt worden.</dd> - <dt>{{cssxref("line-height")}}</dt> - <dd>Deze eigenschap is inconsistent over de verschillende browsers. Zij kan beter vermeden worden.</dd> - <dt>{{cssxref("text-decoration")}}</dt> - <dd>Deze eigenschap wordt niet ondersteund door Opera voor formulierelementen.</dd> - <dt>{{cssxref("text-overflow")}}</dt> - <dd>Opera, Safari en IE9 ondersteunen deze eigenschap niet voor formulierelementen.</dd> - <dt>{{cssxref("text-shadow")}}</dt> - <dd>Opera ondersteunt {{cssxref("text-shadow")}} niet voor formulierelementen en IE9 ondersteunt het helemaal niet.</dd> -</dl> - -<h3 id="Tekstvelden">Tekstvelden</h3> - -<table> - <thead> - <tr> - <th scope="col">Eigenschap</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Nota</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>CSS box model</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> - <ol> - <li>WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Daarom is het noodzakelijk om <code>-webkit-appearance:none</code> te gebruiken om deze eigenschap te gebruiken bij zoekvelden.</li> - <li> Windows 7, Internet Explorer 9 gebruikt de rand niet tenzij <code>background:none</code> wordt gebruikt.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> - <ol> - <li>WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Daarom is het noodzakelijk om <code>-webkit-appearance:none</code> te gebruiken om deze eigenschap te gebruiken bij zoekvelden.</li> - <li>Windows 7, Internet Explorer 9 gebruikt de rand niet tenzij <code>background:none</code> wordt gebruikt.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> - <ol> - <li>WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Daarom is het noodzakelijk om <code>-webkit-appearance:none</code> te gebruiken om deze eigenschap te gebruiken bij zoekvelden.</li> - <li>Windows 7, Internet Explorer 9 gebruikt de rand niet tenzij <code>background:none</code> wordt gebruikt.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Tekst en font</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}<sup>[1]</sup></th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> - <ol> - <li>Als de {{cssxref("border-color")}} eigenschap niet ingesteld is zullen browsers die op WebKit gebaseerd zijn de {{cssxref("color")}} eigenschap toepassen op de rand en font voor {{HTMLElement("textarea")}}.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td>Zie de nota over {{cssxref("line-height")}}</td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> - <td>Zie nota betreffende Opera</td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td> - <ol> - <li>IE9 ondersteunt deze eigenschap alleen voor {{HTMLElement("textarea")}}, terwijl Opera het alleen ondersteunt in éénregelige tekstvelden.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> - <ol> - <li>WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Hiertoe moet <code>-webkit-appearance:none </code> aangewend worden. Bij Windows 7 gebruikt Internet Explorer 9 geen rand tenzij <code>background:none</code> gebruikt wordt.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> - <ol> - <li>WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Hiertoe moet <code>-webkit-appearance:none</code> aangewend worden . Bij Windows 7 gebruikt Internet Explorer 9 geen rand tenzij <code>background:none</code> gebruikt wordt.</li> - <li>Bij Opera wordt de {{cssxref("border-radius")}} eigenschap alleen gebruikt als er expliciet een rand ingesteld is.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td> - <ol> - <li>IE9 ondersteunt deze eigenschap niet.</li> - </ol> - </td> - </tr> - </tbody> -</table> - -<h3 id="Knoppen">Knoppen</h3> - -<table> - <thead> - <tr> - <th scope="col">Eigenschap</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Nota</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>CSS box model</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> - <ol> - <li>Deze eigenschap wordt niet gebruikt bij browsers op Mac OSX of iOS die gebaseerd zijn op WebKit.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> - <ol> - <li>Deze eigenschap wordt niet gebruikt bij browsers op Mac OSX of iOS die gebaseerd zijn op WebKit.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Tekst en font</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td>Zie nota over {{cssxref("line-height")}}.</td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja<sup>[1]</sup></td> - <td> - <ol> - <li>Bij Opera wordt de {{cssxref("border-radius")}} eigenschap alleen gebruikt als er expliciet een rand ingesteld is.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td> - <ol> - <li>IE9 ondersteunt deze eigenschap niet.</li> - </ol> - </td> - </tr> - </tbody> -</table> - -<h3 id="Number">Number</h3> - -<p>Bij browsers die het <code>number </code>element gebruiken is er geen standaard manier om de stijl van de spinner, die de waarde van het veld aanpast, te wijzigen. Noteer dat bij Safari de spinner buiten het veld staat.</p> - -<table> - <thead> - <tr> - <th scope="col">Eigenschap</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Nota</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>CSS box model</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td> - <ol> - <li>Bij Opera worden de spinners ingezoomd, hetgeen de inhoud van het veld kan verbergen.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td> - <ol> - <li>Bij Opera worden de spinners ingezoomd, hetgeen de inhoud van het veld kan verbergen.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Tekst en font</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td>Zie nota over {{cssxref("line-height")}}.</td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td colspan="1" rowspan="3"> - <p>Wordt ondersteund maar er is te weinig consistentie tussen browsers om betrouwbaar te zijn.</p> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - </tr> - </tbody> -</table> - -<h3 id="Keuzevakjes_en_keuzerondjes">Keuzevakjes en keuzerondjes</h3> - -<table> - <thead> - <tr> - <th scope="col">Eigenschap</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Nota</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>CSS box model</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td> - <ol> - <li>Sommige browsers voegen extra marges toe, andere vergroten het element.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td> - <ol> - <li>Sommige browsers voegen extra marges toe, andere vergroten het element.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Text and font</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Keuzevakken_(éénregelig)">Keuzevakken (éénregelig)</h3> - -<p>Firefox voorziet geen mogelijkheid om het selectiepijltje van het {{HTMLElement("select")}} element te wijzigen.</p> - -<table> - <thead> - <tr> - <th scope="col">Eigenschap</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Nota</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>CSS box model</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td> - <ol> - <li>Deze eigenschap werkt voor het {{HTMLElement("select")}} element maar niet voor de {{HTMLElement("option")}} of {{HTMLElement("optgroup")}} elementen.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[2]</sup></td> - <td> - <ol> - <li>De eigenschap werkt maar maar niet consistent over browsers op Mac OSX.</li> - <li>Deze eigenschap werkt voor het {{HTMLElement("select")}} element maar niet voor de {{HTMLElement("option")}} of {{HTMLElement("optgroup")}} elementen.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Tekst en font</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td> - <ol> - <li>Mac OSX ondersteunt niet de WebKit gebaseerde browsers. Evenmin ondersteunt MAC OSX samen met Opera het {{HTMLElement("option")}} en het {{HTMLElement("optgroup")}} element.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td> - <ol> - <li>WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor de oorspronkelijke elementen. Evenmin ondersteunt MAC OSX samen met Opera het {{HTMLElement("option")}} en het {{HTMLElement("optgroup")}} element.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td> - <ol> - <li>IE9 ondersteunt deze eiegenschap niet voor de {{HTMLElement("select")}}, {{HTMLElement("option")}} en {{HTMLElement("optgroup")}} elementen. WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor de {{HTMLElement("option")}} en {{HTMLElement("optgroup")}} elementen.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td> - <ol> - <li>IE9 op Windows 7 en WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor dit element.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td> - <ol> - <li>Alleen Firefox ondersteunt deze eigenschap volledig. Opera ondersteunt deze eigenschap helemaal niet en andere browsers ondersteunen alleen het {{HTMLElement("select")}} element.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> - <td> - <ol> - <li>De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.</li> - <li>IE9 ondersteunt deze eigenschap niet.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1][2]</sup></td> - <td> - <ol> - <li>De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.</li> - <li>IE9 ondersteunt deze eigenschap niet.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td> - <ol> - <li>De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td colspan="1" rowspan="3"> - <ol> - <li>De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - </tr> - </tbody> -</table> - -<h3 id="Keuzevakken_(meerregelig)">Keuzevakken (meerregelig)</h3> - -<table> - <thead> - <tr> - <th scope="col">Eigenschap</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Nota</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>CSS box model</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td> - <ol> - <li>Opera ondersteunt niet {{cssxref("padding-top")}} en {{cssxref("padding-bottom")}} van het {{HTMLElement("select")}} element.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Tekst en font</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td>Zie de nota betreffende {{cssxref("line-height")}}.</td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td> - <ol> - <li>IE9 ondersteunt deze eigenschap niet voor de {{HTMLElement("select")}}, {{HTMLElement("option")}} en {{HTMLElement("optgroup")}} elementen. WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor de {{HTMLElement("option")}} en {{HTMLElement("optgroup")}} elementen.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td> - <ol> - <li>IE9 op Windows 7 en WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td> - <ol> - <li>Alleen ondersteund door Firefox en IE9+.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td> - <ol> - <li>De meeste browsers ondersteunen deze eigenschap slechts voor het {{HTMLElement("select")}} element.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja<sup>[1]</sup></td> - <td> - <ol> - <li>Bij Opera wordt de {{cssxref("border-radius")}} eigenschap alleen ondersteund als expliciet een rand ingesteld is.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td> - <ol> - <li>IE9 ondersteunt deze eigenschap niet.</li> - </ol> - </td> - </tr> - </tbody> -</table> - -<h3 id="Datalist">Datalist</h3> - -<table> - <thead> - <tr> - <th scope="col">Eigenschap</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Nota</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>CSS box model</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Tekst en font</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;"> - <p>Neen</p> - </td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Bestandslijst">Bestandslijst</h3> - -<table> - <thead> - <tr> - <th scope="col">Eigenschap</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Nota</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>CSS box model</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Tekst en font</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td> - <ol> - <li>Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td> - <ol> - <li>Veel browsers passen deze eigenschap toe op de selectieknop.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td> - <ol> - <li>Reageert min of meer als een extra linker marge buiten het element.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Border and background</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td> - <ol> - <li>Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td> - <ol> - <li>IE9 ondersteunt deze eigenschap niet.</li> - </ol> - </td> - </tr> - </tbody> -</table> - -<h3 id="Datumselectie">Datumselectie</h3> - -<p>Vele eigenschappen worden ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.<br> - </p> - -<table> - <thead> - <tr> - <th scope="col">Eigenschap</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Nota</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>CSS box model</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Tekst en font</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td> </td> - </tr> - </tbody> -</table> - -<h3 id="Kleurenselectie">Kleurenselectie</h3> - -<p>Er zijn op het ogenblik te weinig toepassingen om een betrouwbaar gedrag te vast te stellen.</p> - -<table> - <thead> - <tr> - <th scope="col">Eigenschap</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Nota</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>CSS box model</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> - <ol> - <li>Opera behandelt deze eigenschap als een gewoon selectie element met dezelfde restricties.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> - <ol> - <li>Opera behandelt deze eigenschap als een gewoon selectie element met dezelfde restricties.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Tekst en font</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td colspan="1" rowspan="3"> - <ol> - <li>Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - </tr> - </tbody> -</table> - -<h3 id="Meters_en_voortgangsbalken">Meters en voortgangsbalken</h3> - -<p>Er zijn op het ogenblik te weinig toepassingen om een betrouwbaar gedrag te vast te stellen.</p> - -<table> - <thead> - <tr> - <th scope="col">Eigenschap</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Nota</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>CSS box model</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td> - <ol> - <li>Chrome verbergt de {{HTMLElement("progress")}} en {{HTMLElement("meter")}} elementen wanneer de {{cssxref("padding")}} eigenschap is toegepast op een element.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Tekst en font</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td colspan="1" rowspan="3"> - <ol> - <li>Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - </tr> - </tbody> -</table> - -<h3 id="Bereik">Bereik</h3> - -<p>Er is geen standaard manier om de stijl van het handvat van het bereik te veranderen en Opera laat helemaal geen wijziging toe van de standaard stijl.</p> - -<table> - <thead> - <tr> - <th scope="col">Eigenschap</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Nota</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>CSS box model</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td> - <ol> - <li>Chrome en Opera voegen wat extra ruimte toe rond het element terwijl Opera op Windows 7 de greep vergroot.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> - <ol> - <li>{{cssxref("padding")}} wordt gebruikt maar heeft geen visueel effect.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Tekst en font</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Border and background</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td colspan="1" rowspan="3"> - <ol> - <li>Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">Neen<sup>[1]</sup></td> - </tr> - </tbody> -</table> - -<h3 id="Afbeeldingsknoppen">Afbeeldingsknoppen</h3> - -<table> - <thead> - <tr> - <th scope="col">Eigenschap</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">A</th> - <th scope="col">Nota</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>CSS box model</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Tekst en font</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td style="text-align: center; vertical-align: top;">N.V.T.</td> - <td> </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Rand en achtergrond</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Ja</td> - <td colspan="1"> </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td colspan="1"> - <ol> - <li>IE9 ondersteunt deze eigenschap niet.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Gedeeltelijk<sup>[1]</sup></td> - <td colspan="1"> - <ol> - <li>IE9 ondersteunt deze eigenschap niet.</li> - </ol> - </td> - </tr> - </tbody> -</table> - -<p> </p> diff --git a/files/nl/learn/forms/sending_and_retrieving_form_data/index.html b/files/nl/learn/forms/sending_and_retrieving_form_data/index.html deleted file mode 100644 index 2ba87686f9..0000000000 --- a/files/nl/learn/forms/sending_and_retrieving_form_data/index.html +++ /dev/null @@ -1,340 +0,0 @@ ---- -title: Formuliergegevens verzenden -slug: Learn/Forms/Sending_and_retrieving_form_data -tags: - - Beginner - - Bestanden - - Formulieren - - HTML - - HTTP - - Headers - - Veiligheid - - Web -translation_of: Learn/Forms/Sending_and_retrieving_form_data -original_slug: Learn/HTML/Forms/Verzenden_van_formuliergegevens ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}</div> - -<p class="summary">In dit artikel wordt ingegaan op wat er gebeurt wanneer de gebruiker een formulier verstuurd - waar gaan de gegevens naar toe en wat te doen als de gegevens er aan komen? Er wordt ook ingegaan op enkele veiligheidsaspecten in verband met het verzenden van formuliergegevens.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Voorafgaande kennis:</th> - <td>Basis computergebruik, <a href="/nl/docs/Learn/HTML/Introduction_to_HTML">inleiding tot HTML</a> en basiskennis <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP">HTTP</a> en <a href="/en-US/docs/Learn/Server-side/First_steps">programmering aan de kant van de server</a>.</td> - </tr> - <tr> - <th scope="row">Doel:</th> - <td>Begrijpen wat er gebeurt wanneer formuliergegevens verzonden worden met inbegrip van hoe de gegevens verwerkt worden door de server.</td> - </tr> - </tbody> -</table> - -<h2 id="Waar_gaan_de_gegevens_naar_toe">Waar gaan de gegevens naar toe?</h2> - -<p>Hier wordt besproken wat er gebeurt met de gegevens wanneer een formulier wordt verzonden.</p> - -<h3 id="Clientserver_architectuur">Client/server architectuur</h3> - -<p>Het web is gebaseerd op een client/server architectuur die als volgt kan samengevat worden: een client (meestal een webbrowser) stuurt een verzoek naar een server (meestal een webserver zoals <a href="http://httpd.apache.org/" rel="external" title="http://www.apache.org/">Apache</a>, <a href="http://nginx.com/" rel="external" title="http://nginx.com/">Nginx</a>, <a href="http://www.iis.net/" rel="external" title="http://www.iis.net/">IIS</a>, <a href="http://tomcat.apache.org/" rel="external" title="http://tomcat.apache.org/">Tomcat</a>, enz.) gebruik makend van het <a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">HTTP protocol</a>. De server beantwoordt het verzoek met hetzelfde protocol.</p> - -<p><img alt="A basic schema of the Web client/server architecture" src="/files/4291/client-server.png" style="display: block; height: 141px; margin: 0px auto; width: 400px;"></p> - -<p>Aan de zijde van de client is een HTML formulier niet meer dan een gebruiksvriendelijke manier om een HTTP verzoek te verzenden naar een server. Dit laat de gebruiker toe gegevens in te geven in het HTTP-verzoek.</p> - -<div class="note"> -<p><strong>Nota</strong>: Zie <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">Eerste stappen in programmering van websites aan de kant van de server</a> om een beter idee te krijgen van hoe de client-server architectuur werkt.</p> -</div> - -<h3 id="Aan_de_zijde_van_de_client_bepalen_hoe_de_gegevens_te_verzenden">Aan de zijde van de client: bepalen hoe de gegevens te verzenden</h3> - -<p>Het {{HTMLElement("form")}} element bepaalt hoe de gegevens zullen verzonden worden. Alle attributen zijn aanwezig om het verzoek samen te stellen en te verzenden wanneer de gebruiker op "Verzenden" klikt. De twee belangrijkste attributen zijn {{htmlattrxref("action","form")}} en {{htmlattrxref("method","form")}}.</p> - -<h4 id="Het_htmlattrxrefactionform_attribuut">Het {{htmlattrxref("action","form")}} attribuut</h4> - -<p>Dit attribuut bepaalt waar de gegevens naar toe zullen gezonden worden. De waarde moet een geldige URL zijn. Als dit attribuut niet opgegeven wordt, worden de gegevens verzonden naar de URL van de pagina waarop het formulier staat.</p> - -<p>In volgend voorbeeld worden de gegevens verzonden naar een absolute URL — <code>http://foo.com</code>:</p> - -<pre class="brush: html"><form action="http://foo.com"></pre> - -<p class="brush: html">Hier wordt gebruik gemaakt van een relatieve URL — de gegevens worden verzonden naar een andere URL op de server:</p> - -<pre class="brush: html"><form action="/somewhere_else"></pre> - -<p class="brush: html">Als er geen attributen gespecifieerd worden, worden de {{HTMLElement("form")}}gegevens verstuurd naar de pagina waarop het formulier staat:</p> - -<pre class="brush: html"><form></pre> - -<p class="brush: html">Oudere pagina's gebruiken de volgende notatie om aan te geven dat de gegevens moeten verstuurd worden naar dezelfde pagina als waar het formulier op staat. Dit was nodig omdat tot HTML5 het {{htmlattrxref("action", "form")}} attribuut vereist was. Dit is niet langer meer nodig.</p> - -<pre class="brush: html"><form action="#"></pre> - -<div class="note"> -<p><strong>Nota:</strong> het is mogelijk om een URL te <span class="highlighted">specifiëren die gebruik maakt van het HTTPS </span> (secure HTTP) protocol. Dan worden de gegevens samen met de rest van het verzoek versleuteld zelfs wanneer het formulier op een niet versleutelde pagina staat die met HTTP benaderd werd. Als het formulier daarentegen op een versleutelde pagina staat en er wordt een onversleutelde HTTP URL gevraagd met het {{htmlattrxref("action","form")}} attributut, zullen alle browsers een veiligheidswaarschuwing tonen zodra de gebruiker gegevens tracht te verzenden omdat zij niet versleuteld zullen worden.</p> -</div> - -<h4 id="Het_htmlattrxrefmethodform_attribuut">Het {{htmlattrxref("method","form")}} attribuut</h4> - -<p>Dit attribuut bepaalt hoe de gegevens worden verzonden. Het <a href="/en-US/docs/HTTP" title="/en-US/docs/HTTP">HTTP protocol</a> voorziet diverse methoden om een verzoek op te stellen. De twee meest gebruikte methoden zijn de GET en de POST methoden.</p> - -<p>Om het verschil te kennen moet gekeken worden naar hoe HTTP werkt. Elke keer de gebruiker iets zoekt op het internet zendt de browser een verzoek naar een URL. Een HTTP verzoek bestaat uit twee delen: een header die metadata bevat over de browser en het eigenlijk bericht.</p> - -<h5 id="De_GET_methode">De GET methode</h5> - -<p>Met de GET methode vraagt de browser aan de server een bepaalde gegevensbron: "Hallo server ik wens die gegevensbron". In dit geval wordt het gevraagde gehecht aan de URL. De rest van het bericht is leeg.</p> - -<p>Bekijken we het volgende formulier::</p> - -<pre class="brush: html"><form action="http://foo.com" method="get"> - <div> - <label for="say">What greeting do you want to say?</label> - <input name="say" id="say" value="Hi"> - </div> - <div> - <label for="to">Who do you want to say it to?</label> - <input name="to" value="Mom"> - </div> - <div> - <button>Send my greetings</button> - </div> -</form></pre> - -<p>Als gevolg van de GET methode ziet men bij het verzenden de URL <code>www.foo.com/?say=Hi&to=Mom</code> verschijnen in de adresbalk.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14685/url-parameters.png" style="display: block; margin: 0 auto;">De gegevens worden aan de URL gekoppeld als een reeks naam/waarde paren. Na het URL webadres komt een vraagteken (?) gevolgd door de naam/waarde paren, elk paar gescheiden door een ampersand (&). In dit geval versturen we twee eenheden gegevens naar de server:</p> - -<ul> - <li><code>say</code>, dat de waarde <code>Hi</code> heeft</li> - <li><code>to</code>, dat de waarde <code>Mom </code>heeft</li> -</ul> - -<p>Het HTTP-verzoek ziet er zo uit:</p> - -<pre>GET /?say=Hi&to=Mom HTTP/1.1 -Host: foo.com</pre> - -<div class="note"> -<p><strong>Nota</strong>: Dit voorbeeld is ook te vinden op GitHub — zie <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/get-method.html">get-method.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html">see it live also</a>).</p> -</div> - -<h5 id="De_POST_methode">De POST methode</h5> - -<p>De <code>POST</code> methode is een beetje anders. Het is de methode die de browser gebruikt om te communiceren met de server wanneer hij een reactie vraagt op de inhoud van zijn HTTP-bericht: "Hallo server, kijk naar mijn bericht en zend mij informatie hierover". Als een formulier op deze manier wordt verzonden worden de gegevens in het bericht geplaatst en niet in de URL van het HTTP-bericht.</p> - -<p>Nemen we een voorbeeld — dit is hetzelfde formulier als in de GET sectie hierboven, maar met het {{htmlattrxref("method","form")}} attribuut ingesteld op <code>post</code>.</p> - -<pre class="brush: html"><form action="http://foo.com" method="post"> - <div> - <label for="say">What greeting do you want to say?</label> - <input name="say" id="say" value="Hi"> - </div> - <div> - <label for="to">Who do you want to say it to?</label> - <input name="to" value="Mom"> - </div> - <div> - <button>Send my greetings</button> - </div> -</form></pre> - -<p>Als het formulier wordt verzonden met de <code>POST</code> methode worden er geen gegevens gekoppeld aan de URL en het HTTP verzoek ziet er als volgt uit, met de gegevens in het bericht:</p> - -<pre>POST / HTTP/1.1 -Host: foo.com -Content-Type: application/x-www-form-urlencoded -Content-Length: 13 - -say=Hi&to=Mom</pre> - -<p><code>Content-Length</code> geeft de omvang van de inhoud aan en <code>Content-Type</code> geeft het type aan van de gegevensbron die naar de server wordt verzonden. Hier wordt later verder op ingegaan.</p> - -<div class="note"> -<p><strong>Nota</strong>: Dit voorbeeld kan ook gevonden worden op GitHub — zie <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/post-method.html">post-method.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html">see it live also</a>).</p> -</div> - -<h4 id="HTTP-verzoeken_bekijken">HTTP-verzoeken bekijken</h4> - -<p>HTTP-verzoeken worden nooit getoond aan de gebruiker (om ze te zien moeten instrumenten gebruikt worden als <a href="/en-US/docs/Tools/Network_Monitor">Firefox Network Monitor</a> of <a href="https://developers.google.com/chrome-developer-tools/" title="https://developers.google.com/chrome-developer-tools/">Chrome Developer Tools</a>). Bijvoorbeeld in de Chrome network tab:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14691/network-monitor.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> - -<p>Het enige wat getoond wordt is de aangeroepen URL. Bij een GET-verzoek staan de gegevens in de adresbalk maar bij een POST-verzoek is er niets te zien. Dit is belangrijk om twee redenen:</p> - -<ol> - <li>Gebruik nooit de GET methode als een paswoord of andere gevoelige gegevens moeten verzonden worden om te voorkomen dat ze in de URL-balk getoond worden, wat erg onveilig is.</li> - <li>Gebruik de POST methode als grote hoeveelheden gegevens moeten verzonden worden omdat sommige browsers de lengte van de URL begrenzen. Daarenboven begrenzen veel servers ook de lengte van de URL's die ze aanvaarden.</li> -</ol> - -<h3 id="Aan_de_kant_van_de_server_ontvangst_van_de_gegevens">Aan de kant van de server: ontvangst van de gegevens</h3> - -<p>Onafhankelijk van de gebruikte methode van verzenden zal de server een reeks karakters ontvangen die hij zal ontleden in sleutel/waarde paren. De verdere afwikkeling is afhankelijk van het gebruikte ontwikkelingsplatform. Bijvoorbeeld de afhandeling van dubbele sleutels: meestal wordt de laatst ontvangen sleutel gebruikt.</p> - -<h4 id="Voorbeeld_Raw_PHP">Voorbeeld: Raw PHP</h4> - -<p><a href="http://php.net/">PHP</a> biedt enkele globale objecten om de gegevens te benaderen. Het volgend voorbeeld gebruikt de POST methode en toont de inhoud gewoon aan de gebruiker. Die beslist wat er verder mee moet gebeuren: gewoon tonen, opslaan in een gegevensbank of op een andere manier verwerken.</p> - -<pre class="brush: php"><?php - // The global $_POST variable allows you to access the data sent with the POST method by name - // To access the data sent with the GET method, you can use $_GET - $say = htmlspecialchars($_POST['say']); - $to = htmlspecialchars($_POST['to']); - - echo $say, ' ', $to; -?></pre> - -<p>Dit voorbeeld toont een pagina met de gegevens die we verzonden hebben. Dit wordt getoond in ons <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.html">php-example.html</a> voorbeeldbestand. Dit bevat hetzelfde voorbeeld als hierboven met een <code>post</code> methode en als <code>action</code> : <code>php-example.php</code>. Bij verzending worden de formuliergegevens verzonden naar <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.php">php-example.php</a>, waar de PHP code staat uit bovenstaand voorbeeld. Bij uitvoering toont de browser: <code>Hi Mom</code>.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14693/php-result.png" style="display: block; margin: 0 auto;"></p> - -<div class="note"> -<p><strong>Nota</strong>: Dit voorbeeld zal niet werken wanneer het in een lokale browser geladen wordt omdat browsers geen PHP-code kunnen interpreteren. Dus bij het verzenden biedt de browser alleen aan om het PHP-bestand te downloaden. Het zal dus slechts lopen door middel van een of andere PHP-server. Goede opties voor het lokaal testen van PHP zijn <a href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac en Windows) en <a href="http://ampps.com/download">AMPPS</a> (Mac, Windows, Linux).</p> -</div> - -<h4 id="Voorbeeld_Python">Voorbeeld: Python</h4> - -<p>Volgend voorbeeld toont het gebruik van Python om hetzelfde te doen: tonen van verzonden gegevens op een webpagina. Dit maakt gebruik van het <a href="http://flask.pocoo.org/">Flask framework</a> om sjablonen te tonen, versturen van formuliergegevens, enz. (zie <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/python-example.py">python-example.py</a>).</p> - -<pre>from flask import Flask, render_template, request -app = Flask(__name__) - -@app.route('/', methods=['GET', 'POST']) -def form(): - return render_template('form.html') - -@app.route('/hello', methods=['GET', 'POST']) -def hello(): - return render_template('greeting.html', say=request.form['say'], to=request.form['to']) - -if __name__ == "__main__": - app.run()</pre> - -<p>De twee sjablonen waarnaar gerefereerd wordt in de code zijn de volgende:</p> - -<ul> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html">form.html</a>: hetzelfde formulier als hierboven in de {{anch("The POST method")}} sectie maar met als <code>action</code> : <code>\{{ url_for('hello') }}</code>. (Dit is een <a href="http://jinja.pocoo.org/docs/2.9/">Jinja2</a> sjabloon dat in HTML is maar dat de Pythoncode kan aanroepen die loopt op de webserver die aangegeven wordt in de accolades. <code>url_for('hello')</code> wil in principe zeggen "stuur door naar <code>/hello</code> wanneer het formulier verzonden wordt".)</li> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html">greeting.html</a>: deze sjabloon bevat een regel die twee datavelden weergeeft die doorgegeven werden toen het bericht binnenkwam. Dit wordt gedaan via de <code>hello()</code> functie hierboven die loopt wanneer naar de <code>/hello</code> URL genavigeerd wordt.</li> -</ul> - -<div class="note"> -<p><strong>Nota</strong>: Deze code zal ook nu weer niet lopen als die gewoon in een browser ingelezen wordt. Python werkt enigszins anders dan PHP. Om deze code lokaal te laten lopen moet <a href="/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">Python/PIP</a> <a href="/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">geïnstalleerd </a>worden, dan Flask d.m.v. <code>pip3 install flask</code>. Daarna moet het mogelijk zijn het voorbeeld te laten lopen door middel van <code>python3 python-example.py</code> en dan naar <code>localhost:5000</code> te gaan in de browser.</p> -</div> - -<h4 id="Andere_talen_en_omgevingen">Andere talen en omgevingen</h4> - -<p>Er zijn vele andere technologieën aan de serverkant voor behandeling van formulieren met inbegrip van <a href="/en-US/docs/" title="/en-US/docs/">Perl</a>, <a href="/en-US/docs/" title="/en-US/docs/">Java</a>, <a href="http://www.microsoft.com/net" title="http://www.microsoft.com/net">.Net</a>, <a href="/en-US/docs/" title="/en-US/docs/">Ruby</a>, enzovoorts. Kies wat u het beste ligt. In dit verband moet gezegd worden dat het niet de gewoonte is om rechtstreeks in deze omgevingen te werken omdat dit niet altijd eenvoudig is. Het is veel gemakkelijker te werken met een van de volgende fraaie toepassingen die werken met formulieren veel aangenamer maken, zoals:</p> - -<ul> - <li><a href="http://symfony.com/" rel="external" title="http://symfony.com/">Symfony</a> voor PHP</li> - <li><a href="/en-US/docs/Learn/Server-side/Django" rel="external" title="https://www.djangoproject.com/">Django</a> voor Python (iets zwaarder dan <a href="http://flask.pocoo.org/">Flask</a>, maar met meer gereedschap en opties)</li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express</a> voor Node.js</li> - <li><a href="http://rubyonrails.org/" rel="external" title="http://rubyonrails.org/">Ruby On Rails</a> voor Ruby</li> - <li><a href="http://grails.org/" rel="external" title="http://grails.org/">Grails</a> voor Java</li> - <li>enzoverder.</li> -</ul> - -<p>Zelfs met deze omgevingen is het niet altijd eenvoudig om met formulieren te werken. Maar het is nog altijd eenvoudiger dan alle functionaliteit zelf vanaf nul te moeten schrijven. Het zal in elk geval sneller gaan.</p> - -<div class="note"> -<p><strong>Nota</strong>: Het is buiten het bestek van dit artikel om elke taal of omgeving aan de serverkant te bespreken. Bovenstaande links zijn een leidraad en misschien is het nuttig er zelf wat dieper op in te gaan.</p> -</div> - -<h2 id="Speciaal_verzenden_van_bestanden">Speciaal: verzenden van bestanden</h2> - -<p>Verzenden van bestanden met HTML-formulieren is speciaal. Bestanden zijn binaire gegevens, terwijl andere gegevens uit gewone tekst bestaan. Omdat HTTP een tekstprotocol is, zijn er speciale vereisten om binaire gegevens te behandelen.</p> - -<h3 id="Het_htmlattrxrefenctypeform_attribuut">Het {{htmlattrxref("enctype","form")}} attribuut</h3> - -<p>Dit attribuut laat toe de waarde van <code>Content-Type</code> in te stellen van de HTTP-hoofding die meegestuurd wordt wanneer het formulier verzonden wordt. Deze hoofding is zeer belangrijk omdat die de server vertelt welke soort gegevens zullen doorgezonden worden. Standaard is de waarde <code>application/x-www-form-urlencoded</code>. In mensentaal betekent dit: "Dit zijn formuliergegevens die gecodeerd zijn in URL parameters."</p> - -<p>Om bestanden te versturen moeten er drie stappen ondernomen worden:</p> - -<ul> - <li>Zet het {{htmlattrxref("method","form")}} attribuut op <code>POST</code> omdat bestandsinhoud niet in URL parameters kan geplaatst worden</li> - <li>Zet de waarde van {{htmlattrxref("enctype","form")}} op <code>multipart/form-data</code> omdat de gegevens in meerder delen zal gesplitst worden, één voor elk bestand, plus nog een deel voor de tekstgegevens die vervat zijn in het formulier (als er tekst in het formulier aanwezig is).</li> - <li>Sluit één of meerdere bestandselecties (<a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets#File_picker">File picker</a>) in om de gebruiker toe te laten de bestanden te kiezen die hij wil uploaden.</li> -</ul> - -<p>Bijvoorbeeld:</p> - -<pre class="brush: html"><form method="post" enctype="multipart/form-data"> - <div> - <label for="file">Choose a file</label> - <input type="file" id="file" name="myFile"> - </div> - <div> - <button>Send the file</button> - </div> -</form></pre> - -<div class="note"> -<p><strong>Nota:</strong> Sommige browsers ondersteunen het {{htmlattrxref("multiple","input")}} attribuut van het {{HTMLElement("input")}} element, dat toelaat meerdere bestanden te kiezen om te uploaden in slechts één <code><input></code> element. Hoe de server deze bestanden behandelt is afhankelijk van de technologie die gebruikt wordt op de server. Zoals hiervoor vermeld zal het gebruik van een omgeving het leven aangenamer maken.</p> -</div> - -<div class="warning"> -<p><strong>Waarschuwing:</strong> Veel servers beperken de bestandsgrootte voor HTTP-verzoeken om misbruik te voorkomen. Het is belangrijk deze limiet te controleren bij de administrator van de server voordat een bestand verzonden wordt.</p> -</div> - -<h2 id="Veiligheidsoverwegingen">Veiligheidsoverwegingen</h2> - -<p>Elke keer er gegevens verstuurd worden naar een server moet aan veiligheid gedacht worden. HTML formulieren zijn de meest kwetsbare plaatsen voor aanvallen. De problemen komen nooit van de HTML formulieren zelf maar wel van de manier waarop de server met gegevens omgaat.</p> - -<p>Al naar gelang de toepassing zijn er wel bekende veiligheids problemen die men kan tegenkomen:</p> - -<h3 id="XSS_en_CSRF">XSS en CSRF</h3> - -<p>Cross-Site Scripting (XSS) en Cross-Site Request Forgery (CSRF) zijn wel bekende vormen van aanvallen wanneer gegevens getoond worden die een gebruiker terugstuurt naar een gebruiker of naar een andere gebruiker.</p> - -<p>XSS laat aanvallers toe een script toe te voegen aan de zijde van de client aan webpagina's die bekeken werden door andere gebruikers. Een kwetsbaar cross-site script kan gebruikt worden door aanvallers om toegangscontrole te omzeilen zoals de <a href="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript" title="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript">politiek van dezelfde bron</a>. Het effect van deze aanvallen kan gaan van vervelend tot een ernstig veiligheidsrisico.</p> - -<p>CSRF aanvallen zijn gelijk aan XSS aanvallen in zo verre dat zij op dezelfde manier starten, door aan de kant van de client een script te injecteren in webpagina's, maar hun doel is anders. CSRF aanvallers trachten machtigingen aan te passen naar hogere niveaus (zoals een webadministrator) om een actie te ondernemen die anders niet zou lukken (bijvoorbeeld gegevens verzenden naar een niet-vertrouwde gebruiker).</p> - -<p>XSS aanvallen profiteren van het vertrouwen dat een gebruiker heeft in een website terwijl CSRF aanvallen profiteren van het vertrouwen dat een website heeft in haar gebruikers.</p> - -<p>Om zulke aanvallen te voorkomen moet een server altijd de gegevens controleren die een gebruiker er naar toe stuurt. Indien de gegevens moeten getoond worden moet er op gelet worden dat de HTML inhoud die van de gebruiker komt niet getoond wordt Daarom moeten de gegevens van de gebruiker verwerkt worden zodat ze niet letterlijk gepresenteerd worden. Praktisch alle omgevingen die vandaag op de markt zijn hebben minimaal een filter die de HTML <span style="line-height: 1.5;">{{HTMLElement("script")}}, {{HTMLElement("iframe")}} en {{HTMLElement("object")}} elementen filtert uit de gegevens die de gebruikers versturen. Dit verkleint het risico maar schakelt het niet helemaal uit.</span></p> - -<h3 id="SQL_injectie">SQL injectie</h3> - -<p>SQL injectie is een type aanval die probeert ingrepen uit te voeren op de database van de website. Dit vereist een SQL-aanvraag in de hoop dat de server ze uitvoert (meestal doordat de server de gegevens van de gebruiker tracht op te slaan). </p> - -<p>De gevolgen kunnen zeer erg zijn, gaande van verlies van gegevens tot de controle over een hele website infrastructuur door toe-eigenen van machtigingen. Dit is een zeer ernstige bedreiging en gegevens van een gebruiker mogen nooit zo maar direct opgeslagen worden zonder validering (bijvoorbeeld door gebruik van <code><a href="http://www.php.net/manual/en/function.mysql-real-escape-string.php" rel="external" title="http://www.php.net/manual/en/function.mysql-real-escape-string.php">mysql_real_escape_string()</a></code> op een PHP/MySQL systeem).</p> - -<h3 id="HTTP_header_injectie_en_email_injectie">HTTP header injectie en email injectie</h3> - -<p>Deze aanvallen kunen gebeuren wanneer de applicatie HTTP headers of e-mails opstelt uit de gegevens van een gebruikersformulier. Deze zullen geen onmidellijke schade aanrichten of invloed hebben op de gebruikers maar zij vormen een open deur voor dieper liggende problemen zoals het kapen van sessies of phishing aanvallen.</p> - -<p>Deze aanvallen gebeuren meestal in stilte en wijzigen servers in een <a href="http://en.wikipedia.org/wiki/Zombie_(computer_science)" rel="exernal" title="http://en.wikipedia.org/wiki/Zombie_(computer_science)">zombie</a>.</p> - -<h3 id="Wees_wantrouwig_vertrouw_uw_gebruikers_nooit">Wees wantrouwig: vertrouw uw gebruikers nooit</h3> - -<p>Wat te doen tegen deze bedreigingen? Dit gaat te ver voor dit artikel maar er zijn enkele regels die men in acht moet nemen. De belangrijkste regel is: vertrouw nooit uw gebruikers, uzelf inbegrepen. Zelfs een betrouwbare gebruiker kan gehackt zijn.</p> - -<p>Alle gegevens die de server bereiken moeten gecontroleerd worden. Altijd. Geen enkele uitzondering:</p> - -<ul> - <li>Potentieel gevaarlijke karakters moeten geweerd worden. Welke karakters dat zijn is afhankelijk van de context waarin de aangewend worden en het platform dat gebruikt wordt. Alle talen gebruikt aan de serverkant hebben deze funktie in zich.</li> - <li>Begrens de hoeveelheid inkomende gegevens tot het meest noodzakelijke.</li> - <li>Sla geüploade bestanden op in de zanbak (sla ze op op een andere server en maak ze alleen toegankelijk door een ander subdomein, of beter nog, door een volledig andere domeinnaam).</li> -</ul> - -<p>Veel/de meeste problemen worden voorkomen door deze drie regels op te volgen, maar het is altijd een goed idee de veiligheid te laten onderzoeken door een competente derde. Ga er niet van uit dat je alle mogelijke problemen overzien hebt.</p> - -<div class="note"> -<p><strong>Nota</strong>: Het artikel over <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website beveiliging</a> van de <a href="/en-US/docs/Learn/Server-side">serverkant</a> gaat dieper in op bovenstaande bedreigingen en <span class="ng-binding"><span class="highlighted">potentiële</span></span> oplossingen.</p> -</div> - -<h2 id="Besluit">Besluit</h2> - -<p>Formuliergegevens verzenden is simpel maar een applicatie beveiligen is niet zo eenvoudig. Maar denk er aan dat het niet de front-end ontwikkelaar is die verantwoordelijk is voor het veiligheidsmodel. Verderop in deze cursus wordt geleerd dat <a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">validatie aan de zijde van de client</a> mogelijk is maar de server kan deze validatie niet vertrouwen omdat hij niet weet wat er zich afspeelt aan de zijde van de client.</p> - -<h2 id="Zie_ook">Zie ook</h2> - -<p>Volgende bronnen gaan dieper in op de beveiliging van websites:</p> - -<ul> - <li><a href="/en-US/docs/Learn/Server-side/First_steps">Eerste stappen in programmering van websites aan de kant van de server</a></li> - <li><a href="https://www.owasp.org/index.php/Main_Page" rel="external" title="https://www.owasp.org/index.php/Main_Page">The Open Web Application Security Project (OWASP)</a></li> - <li><a href="http://shiflett.org/" rel="external" title="http://shiflett.org/">Chris Shiflett's blog about PHP Security</a></li> -</ul> - -<p>{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}</p> diff --git a/files/nl/learn/forms/styling_web_forms/index.html b/files/nl/learn/forms/styling_web_forms/index.html deleted file mode 100644 index ec56d4ffb6..0000000000 --- a/files/nl/learn/forms/styling_web_forms/index.html +++ /dev/null @@ -1,345 +0,0 @@ ---- -title: Styling HTML forms -slug: Learn/Forms/Styling_web_forms -tags: - - CSS - - Formulieren - - HTML -translation_of: Learn/Forms/Styling_web_forms -original_slug: Learn/HTML/Forms/Styling_HTML_forms ---- -<p>In dit artikel leert de gebruiker het om <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a>-formulieren vorm te geven met gebruik van <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a>. Dit is echter niet zo eenvoudig. Om historische en technische redenen gaan formulierelementen (widgets) en CSS niet zo goed samen. Daarom maaken veel ontwikkelaars hun eigen HTML widgets om de vormgeving van formulieren in eigen hand te houden. Dankzij de moderne browsers hebben webontwikkelaars meer en meer controle over het ontwerp van formulierelementen.</p> - -<h2 id="Waarom_is_vormgeving_van_formulieren_met_CSS_zo_ingewikkeld">Waarom is vormgeving van formulieren met CSS zo ingewikkeld?</h2> - -<p>In de begindagen van het Web, rond 1995, werden widgets toegevoegd aan de HTML in <a href="http://www.ietf.org/rfc/rfc1866.txt" rel="extrenal" title="http://www.ietf.org/rfc/rfc1866.txt">de HTML 2 specificatie</a>. Door de complexheid van widgets vertrouwden de ontwikkelaars op het onderliggende besturingssysteem.</p> - -<p>Een aantal jaren later werd CSS ontwikkeld om vormgeving en inhoud van elkaar te scheiden. In de begintijd van CSS had de vormgeving van formulieren geen prioriteit. </p> - -<p>Omdat gebruikers gewend waren geraakt aan de gebruikelijke vormgeving van formulieren, zijn browser fabrikanten terughoudend in het aanpasbaar maken van formulierelementen. Tot op de dag van vandaag is het bijzonder moeilijk om een eigen vormgeving te maken voor alle widgets.</p> - -<p>Tot op heden is er nog geen enkele browser die CSS 2.1 volledig geïmplementeerd heeft. In de loop van de tijd hebben de browser fabrikanten hun ondersteuning voor CSS echter verbeterd en ondanks vele problemen kan CSS nu gebruikt worden om <a href="/en-US/docs/">HTML formulieren</a> vorm te geven.</p> - -<h3 id="Niet_alle_widgets_worden_door_CSS_gelijk_behandeld">Niet alle widgets worden door CSS gelijk behandeld</h3> - -<p>Er zijn nog steeds problemen met CSS-formulieren. Deze kunnen ingedeeld worden in drie categorieën</p> - -<h4 id="The_good">"The good"</h4> - -<p>Enkele elementen leveren geen problemen op. Het zijn de volgende structurele elementen:</p> - -<ol> - <li>{{HTMLElement("form")}}</li> - <li>{{HTMLElement("fieldset")}}</li> - <li>{{HTMLElement("label")}}</li> - <li>{{HTMLElement("output")}}</li> -</ol> - -<p>Ook de tekstvelden (zowel enkellijnige als meerlijnige) vallen hieronder en de knoppen.</p> - -<h4 id="The_bad">"The bad"</h4> - -<p>Sommige elementen vereisen ingewikkelde trucs waarbij soms gespecialiseerde kennis van CSS3 nodig is.</p> - -<p>Zoals bijvoorbeeld het {{HTMLElement("legend")}} element. Het is moeilijk dit te positioneren over verschillende platformen. Keuzerondjes en keuzevakjes kunnen ook moeilijk rechtstreeks aangepast worden. Dank zij CSS3 is daar nochtans wel een oplossing voor. Het {{htmlattrxref("placeholder", "input")}} element kan niet rechtstreeks aangepast worden maar de browsers die het ondersteunen hebben hun eigen CSS pseudo-elementen of pseudoklassen die toelaten het aan te passen. Deze worden behandeld in het artikel <a href="/en-US/docs/">Geavanceerde stijlen voor HTML-formulieren.</a></p> - -<h4 id="The_ugly">"The ugly"</h4> - -<p>Sommige elementen kunnen gewoon niet aangepast worden met CSS. Het gaat hier om geavanceerde elementen zoals bereik, kleur en datumvensters. Ook keuzelijsten met hun elementen {{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}} en {{HTMLElement("datalist")}} vallen in deze categorie.</p> - -<p>Het probleem met deze elementen is dat zij een complexe structuur hebben en CSS is niet krachtig genoeg om alle subtiele onderdelen aan te sturen. Om deze elementen aan te passen moet JavaScript gebruikt worden om een DOM op te stellen dat kan worden aangepast. Dit wordt duidelijk gemaakt in het artikel <a href="/en-US/docs/">Hoe eigen formulier-elementen aanmaken.</a></p> - -<h2 id="Basisprincipe">Basisprincipe</h2> - -<p><a href="/en-US/docs/">Elementen die gemakkelijk aan te passen zijn </a>met CSS leveren geen enkel probleem op omdat ze zich meestal gedragen als elk ander HTML-element. Sommige browsers hebben echter hun eigen stijl en kunnen een beetje afwijken zodat er enkele trucs nodig zijn.</p> - -<h3 id="Zoekvelden">Zoekvelden</h3> - -<p>Zoekvensters zijn de enige tekstvelden die soms wat moeilijker aan te sturen zijn. Bij browsers die gebaseerd zijn op Webkit (Chrome, Safari, e.d.) moeten de tekstvelden aangepast worden met de <code>-webkit-appearance</code> eigenschap. Deze eigenschap wordt besproken in het artikel: <a href="/en-US/docs/">Geavanceerde styling voor HTML-formulieren.</a></p> - -<h4 id="Voorbeeld">Voorbeeld</h4> - -<pre class="brush: html"><form> - <input type="search"> -</form> -</pre> - -<pre class="brush: css">input[type=search] { - border: 1px dotted #999; - border-radius: 0; - - -webkit-appearance: none; -}</pre> - -<p><img alt="This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance" src="/files/4153/search-chrome-macos.png" style="border-style: solid; border-width: 1px; height: 107px; width: 179px;"></p> - -<p>Zoals te zien is op de schermafdruk van Chrome hebben beide velden een rand. Maar de bovenste is gemaakt zonder de <code>-webkit-appearance</code> eigenschap en de onderste met de <code>-webkit-appearance: none</code>. Het verschil is duidelijk.</p> - -<h3 id="Lettertypen_en_tekst">Lettertypen en tekst</h3> - -<p>CSS lettertypen en teksteigenschappen kunnen gemakkelijk gebruikt worden bij alle widgets (en ja, ook {{cssxref("@font-face")}} kan gebruikt worden bij formulierelementen). Maar de browsers zijn niet altijd consequent. Sommige elementen erven niet altijd per definitie {{cssxref("font-family")}} and {{cssxref("font-size")}} van hun ouderelementen maar gebruiken de instelling van het systeem. Om de stijl van een formulier doen overeen te komen met de rest van de inhoud kunnen volgende regels worden toegevoegd aan het stijlblad:</p> - -<pre class="brush: css">button, input, select, textarea { - font-family : inherit; - font-size : 100%; -}</pre> - -<p>De schermafdruk hieronder toont het verschil. Links staat de systeemeigen weergave in Firefox en Mac OS X. Rechts de weregave met bovenstaande aanpassingen.</p> - -<p><img alt="This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization" src="/files/4157/font-firefox-macos.png" style="border-style: solid; border-width: 1px; height: 234px; width: 420px;"></p> - -<p>Er wordt veel gediscussieerd over wat het beste uitzicht is. Het is aan u als ontwerper van uw website om te kiezen.</p> - -<h3 id="Kadermodel">Kadermodel</h3> - -<p>Alle tekstvelden ondersteunen volledig elke eigenschap met betrekking tot het CSS kadermodel: {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} en {{cssxref("border")}}. Maar zoals hierboven steunen de browsers in eerste instantie op standaard instellingen van hun systeem om deze elementen te tonen. Het is weer aan de ontwikkelaar hoe ze opgenomen worden in de inhoud. Als vast gehouden wordt aan het standaard uitzicht van de widgets zijn er wel enkele ingrepen nodig om ze even groot te maken.</p> - -<p><strong>Dit komt doordat elk element zijn eigen regels heeft wat betreft rand, uitvulling en marge. </strong>Dus om elk element dezelfde grootte te geven moet de {{cssxref("box-sizing")}} eigenschap gebruikt worden:</p> - -<pre class="brush: css">input, textarea, select, button { - width : 150px; - margin: 0; - - -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */ - -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */ - box-sizing: border-box; -}</pre> - -<p><img alt="This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing." src="/files/4161/size-chrome-win7.png" style="border-style: solid; border-width: 1px; height: 213px; width: 358px;"></p> - -<p>In de schermafdruk hierboven wordt links de weergave getoond zonder {{cssxref("box-sizing")}}, terwijl rechts deze eigenschap is toegepast met de waarde <code>border-box</code>. Zie hoe ze allemaal dezelfde ruimte innemen ondanks de systeemeigen instellingen.</p> - -<h3 id="Positionering">Positionering</h3> - -<p>Positionering van HTML formulierelementen is over het algemeen geen probleem. Twee elementen echter vragen echter speciale aandacht:</p> - -<h4 id="legend">legend</h4> - -<p>Het {{HTMLElement("legend")}} element is ok wat betreft vormgeving maar niet wat betreft plaatsing. In elke browser wordt het {{HTMLElement("legend")}} element geplaatst op de bovenrand van het {{HTMLElement("fieldset")}} element. Het is onmogelijk het ergens midden in de HTML-code te plaatsen. Het kan echter absoluut of relatief geplaatst worden met de {{cssxref("position")}} eigenschap.</p> - -<p>Om reden van toegankelijkheid is het {{HTMLElement("legend")}} element zeer belangrijk. Het wordt besproken bij ondersteunende <span class="ng-binding"><span class="highlighted">technologie</span>ën als onderdeel van het label van elk formulierelement binnen de fieldset. Meestal wordt er ook een titel in verwerkt en dan verborgen op een toegankelijke manier zoals hierna:</span></p> - -<h5 id="HTML">HTML</h5> - -<pre class="brush: html"><fieldset> - <legend>Hi!</legend> - <h1>Hello</h1> -</fieldset></pre> - -<h5 id="CSS">CSS</h5> - -<pre class="brush: css">legend { - width: 1px; - height: 1px; - overflow: hidden; -}</pre> - -<h4 id="textarea">textarea</h4> - -<p>Alle browsers beschouwen standaard het {{HTMLElement("textarea")}} element als een in-lijn blok uitgelijnd op de onderkant van de tekst. Dit is slechts zelden wat gewenst is. Om over te schakelen van in-lijn blok naar blok kan de {{cssxref("display")}} eigenschap gebruikt worden en door de vertkale uitlijning aan te passen:</p> - -<pre class="brush: css">textarea { - vertical-align: top; -}</pre> - -<h2 id="Voorbeeld_2">Voorbeeld</h2> - -<p>Hier volgt een voorbeeld van hoe de stijl van een HTML-formulier wordt aangepast. Hierdoor wordt al het voorgaande duidelijker. We bouwen een "postkaart" contactformulier:</p> - -<p><img alt="This is what we want to achieve with HTML and CSS" src="/files/4149/screenshot.png" style="border-style: solid; border-width: 1px; height: 249px; width: 370px;"></p> - -<h3 id="HTML_2">HTML</h3> - -<p>De HTML-code verschilt weinig van het voorbeeld uit <a href="/en-US/docs/">het eerste artikelvan deze gids</a>. Er zijn slechts een aantal ID's en een titel toegevoegd.</p> - -<pre class="brush: html"><form> - <h1>to: Mozilla</h1> - - <div id="from"> - <label for="name">from:</label> - <input type="text" id="name" name="user_name"> - </div> - - <div id="reply"> - <label for="mail">reply:</label> - <input type="email" id="mail" name="user_email"> - </div> - - <div id="message"> - <label for="msg">Your message:</label> - <textarea id="msg" name="user_message"></textarea> - </div> - - <div class="button"> - <button type="submit">Send your message</button> - </div> -</form></pre> - -<h3 id="CSS_2">CSS</h3> - -<p>Nu begint het leuke. Voor het coderen moeten drie elementen worden toegevoegd:</p> - -<ol> - <li>De <a href="/en-US/docs/">achtergrond </a>van de postkaart</li> - <li>Een schrijfmachine lettertype: <a href="/en-US/docs/">De "Secret Typewriter" van fontsquirrel.com</a></li> - <li>Een handschrift lettertype: <a href="/en-US/docs/">Het "Jounal" van frontsquirrel.com</a></li> -</ol> - -<p>Nu de code. Eerst bereiden we een achtergrond voor met de {{cssxref("@font-face")}} regels en alle basiselementen {{HTMLElement("body")}} en {{HTMLElement("form")}}.</p> - -<pre class="brush: css">@font-face{ - font-family : "handwriting"; - - src : url('journal.eot'); - src : url('journal.eot?') format('eot'), - url('journal.woff') format('woff'), - url('journal.ttf') format('truetype'); -} - -@font-face{ - font-family : "typewriter"; - - src : url('veteran_typewriter.eot'); - src : url('veteran_typewriter.eot?') format('eot'), - url('veteran_typewriter.woff') format('woff'), - url('veteran_typewriter.ttf') format('truetype'); -} - -body { - font : 21px sans-serif; - - padding : 2em; - margin : 0; - - background : #222; -} - -form { - position: relative; - - width : 740px; - height : 498px; - margin : 0 auto; - - background: #FFF url(background.jpg); -}</pre> - -<p>Dan worden de elementen en de titel geplaatst.</p> - -<pre class="brush: css">h1 { - position : absolute; - left : 415px; - top : 185px; - - font : 1em "typewriter", sans-serif; -} - -#from { - position: absolute; - left : 398px; - top : 235px; -} - -#reply { - position: absolute; - left : 390px; - top : 285px; -} - -#message { - position: absolute; - left : 20px; - top : 70px; -}</pre> - -<p>Nu de elementen zelf. Eerst het lettertype van het {{HTMLElement("label")}} element:</p> - -<pre class="brush: css">label { - font : .8em "typewriter", sans-serif; -}</pre> - -<p>De tekstvelden moeten enkele gezamenlijke regels krijgen. Hiertoe worden de eigenschappen {{cssxref("border","borders")}} en {{cssxref("background","backgrounds")}} verwijderd en {{cssxref("padding")}} en {{cssxref("margin")}} worden aangepast:</p> - -<pre class="brush: css">input, textarea { - font : .9em/1.5em "handwriting", sans-serif; - - border : none; - padding : 0 10px; - margin : 0; - width : 240px; - - background: none; -}</pre> - -<p>Als één van de velden de focus krijgen maken we ze grijs met een doorzichtige achtergrond. Om de standaard focus van sommige browsers op te heffen wordt de {{cssxref("outline")}} eigenschap wordt gebruikt.</p> - -<pre class="brush: css">input:focus, textarea:focus { - background : rgba(0,0,0,.1); - border-radius: 5px; - outline : none; -}</pre> - -<p>De éénregelige en meerregelige tekstvelden moeten nog in overeenstemming gebracht worden, want standaard zien ze er verschillend uit.</p> - -<p>Voor Internet Explorer moet het éénregelig tekstveld worden aangepast omdat Internet Explorer de hoogte van de velden niet aanpast aan de natuurlijke hoogte van het lettertype (hetgeen de andere browsers wel doen). Daarom kennen we expliciet een hoogte toe aan het veld:</p> - -<pre class="brush: css">input { - height: 2.5em; /* for IE */ - vertical-align: middle; /* This is optional but it makes legacy IEs look better */ -}</pre> - -<p>Standaard worden {{HTMLElement("textarea")}} elementen weergegeven als blok. Twee belangrijke eigenschappen hier zijn {{cssxref("resize")}} en {{cssxref("overflow")}}. Omdat we willen dat de gebruiker de afmetingen niet kan wijzigen passen we de <code>resize</code> eigenschap toe. De {{cssxref("overflow")}} eigenschap wordt gebruikt om het veld consistent te maken over alle browsers. Sommige browsers gebruiken standaard <code>auto</code>, terwijl andere <code>scroll</code> gebruiken. In dit geval is het beter <code>auto</code> te gebruiken.</p> - -<pre class="brush: css">textarea { - display : block; - - padding : 10px; - margin : 10px 0 0 -10px; - width : 340px; - height : 360px; - - resize : none; - overflow: auto; -}</pre> - -<p>Het {{HTMLElement("button")}} element is gemakkelijk in CSS. Men kan zowat alles ermee doen, inclusief <a href="/en-US/docs/">pseudo-elementen!</a></p> - -<pre class="brush: css">button { - position : absolute; - left : 440px; - top : 360px; - - padding : 5px; - - font : bold .6em sans-serif; - border : 2px solid #333; - border-radius: 5px; - background : none; - - cursor : pointer; - --webkit-transform: rotate(-1.5deg); - -moz-transform: rotate(-1.5deg); - -ms-transform: rotate(-1.5deg); - -o-transform: rotate(-1.5deg); - transform: rotate(-1.5deg); -} - -button:after { - content: " >>>"; -} - -button:hover, -button:focus { - outline : none; - background: #000; - color : #FFF; -}</pre> - -<p>Dat is alles. Klaar om uit te proberen!</p> - -<h2 id="Besluit">Besluit</h2> - -<p>Uit bovenstaande blijkt dat bij het opstellen van formulieren met tekstvelden en knoppen, het vrij gemakkelijk is CSS te gebruiken. Zie het artikel <a href="/en-US/docs/">normalizeer.css project </a>voor meer CSS-trucs in verband met het werken met formulierwidgets.</p> - -<p><a href="/en-US/docs/">In het volgend artikel </a>wordt ingegaan op formulierelementen die vallen in de categorieën "bad" en "ugly".</p> diff --git a/files/nl/learn/forms/your_first_form/index.html b/files/nl/learn/forms/your_first_form/index.html deleted file mode 100644 index 0d9705f88e..0000000000 --- a/files/nl/learn/forms/your_first_form/index.html +++ /dev/null @@ -1,274 +0,0 @@ ---- -title: My first HTML form -slug: Learn/Forms/Your_first_form -tags: - - CSS - - Formulier - - HTML - - voorbeeld -translation_of: Learn/Forms/Your_first_form -original_slug: Learn/HTML/Forms/Your_first_HTML_form ---- -<p>Dit is een inleidend artikel tot HTML formulieren. Door middel van een eenvoudig contactformulier maken we kennis met de basiselementen van HTML formulieren. Dit artikel veronderstelt dat de lezer niets afweet van HTML formulieren, maar dat hij een basiskennis heeft van <a href="/en-US/docs/Web/Guide/HTML/Forms_in_HTML">the basics of HTML</a> en <a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS</a>.</p> - -<h2 id="Voordat_we_beginnen">Voordat we beginnen</h2> - -<h3 id="Wat_is_een_HTML_formulier">Wat is een HTML formulier?</h3> - -<p>HTML formulieren zijn de belangrijkste schakel tussen een gebruiker en een website of een applicatie. Zij laten gebruikers toe gegevens naar websites te sturen. Meestal zal dat naar de server zijn maar een webpagina kan de gegevens ook zelf interpreteren.</p> - -<p>Een HTML formulier bestaat uit een aantal elementen. Bijvoorbeeld tekstvelden (bestaande uit één of meerdere regels), keuzelijsten, knoppen of radioknoppen. Meestal zullen deze elementen voorzien zijn van een label dat de funktie van het element aangeeft.</p> - -<h3 id="Wat_is_er_nodig_om_met_formulieren_te_werken">Wat is er nodig om met formulieren te werken?</h3> - -<p>Een editor (<a href="/en-US/docs/">Sublime</a> of <a href="/en-US/docs/">Atom</a> zijn goede voorbeelden) en een webbrowser. Natuurlijk zijn er volwaardige IDE's zoals <a href="/en-US/docs/Mozilla/Tech/XUL/Using_Visual_Studio_as_your_XUL_IDE">Visual Studio</a>, <a href="/en-US/docs/Mozilla/Developer_guide/Eclipse">Eclipse</a>, <a href="http://www.aptana.com/" rel="external" title="http://www.aptana.com/">Aptana</a> en andere.</p> - -<p>Het verschil tussen een HTML formulier en een gewoon HTML document is dat de gegevens die door het formulier verzameld worden naar een webserver moeten gestuurd worden. Dus er moet een server voorzien worden om de gegevens te ontvangen en te verwerken. Hoe een server moet opgezet worden is buiten het bestek van dit artikel maar kan gevonden worden in het artike <a href="https://developer.mozilla.org/en-US/docs/HTML/Forms/Sending_and_Retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Sending and retrieving form data</a>.</p> - -<h2 id="Ontwerp_van_het_formulier">Ontwerp van het formulier</h2> - -<p>Alvorens te beginnen met schrijven moet eerst het formulier ontworpen worden. Dit laat toe vast te leggen welke gegevens er van de gebruiker gevraagd worden. Een te druk formulier kan al vlug aversie opwekken bij de gebruiker. Dus hou het simpel: vraag alleen wat absoluut nodig is. Het formulierontwerp is een zeer belangrijke stap in de opbouw van een site of een applicatie. Het is buiten het bestek van dit artikel om in te gaan op gebruiksvriendelijk formulierontwerp maar volgende publicaties kunnen daarbij nuttig zijn:</p> - -<ul> - <li>Smashing Magazine : <a href="https://www.smashingmagazine.com/2011/11/extensive-guide-web-form-usability/">an extensive guide web to form usability.</a></li> - <li>UXmatters betreffende<a href="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php" rel="external" title="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php">basic best practices</a> voor complexe formulieren, zoals <a href="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php" rel="external" title="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php"> </a> <a href="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php" title="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php">multi-page forms</a>.</li> -</ul> - -<p>In dit artikel bouwen we een eenvoudig contactformulier. We beginnen met een ruwe schets.</p> - -<p><img alt="The form to build, roughly sketch" src="/files/4579/form-sketch-low.jpg" style="border-style: solid; border-width: 1px; height: 352px; width: 400px;"></p> - -<p>Het formulier bevat drie tekstvelden en een knop. De gebruiker wordt gevraagd naar de naam, het e-mailadres en het bericht dat hij wil verzenden. Bij een druk op de knop wordt het bericht verzonden naar de server.</p> - -<h2 id="Maak_uw_handen_vuil_aan_HTML">Maak uw handen vuil aan HTML</h2> - -<p>Nu zijn we klaar om aan het formulier te beginnen. Om het contactformulier op te maken hebben we de volgende HTML elementen nodig: {{HTMLelement("form")}}, {{HTMLelement("label")}}, {{HTMLelement("input")}}, {{HTMLelement("textarea")}}, en {{HTMLelement("button")}}.</p> - -<h3 id="Het_HTMLelement(form)_element">Het {{HTMLelement("form")}} element</h3> - -<p>Alle HTML formulieren beginnen met een {{HTMLelement("form")}} element als volgt:</p> - -<pre class="brush:html;"><form action="/my-handling-form-page" method="post"> - -</form></pre> - -<p>Dit element definiëert een formulier. Het is een container element als {{HTMLelement("div")}} of {{HTMLelement("p")}} maar het bevat ook een aantal attributen die aangeven hoe het formulier zich gedraagt. Alle attributen zijn optioneel maar in de praktijk wordt het aangeraden van steeds minstens het <code>action</code> attribuut en het <code>methode</code> attribuut te gebruiken.</p> - -<ul> - <li>Het <code>action</code> attribuut bepaalt de locatie (URL) waar de gegevens van het formulier naar toe gezonden worden.</li> - <li>Het <code>methode</code> attribuut bepaalt met welke HTTP methode de gegevens worden verzonden (dit kan zijn "get" of "post").</li> -</ul> - -<p>Zie het artikel <a href="https://developer.mozilla.org/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Sending and retrieving form data</a> voor getaileerde informatie over hoe attributen werken.</p> - -<h3 id="Widgets_toevoegen_met_de_HTMLelement(label)_HTMLelement(input)_en_HTMLelement(textarea)_elementen">Widgets toevoegen met de {{HTMLelement("label")}}, {{HTMLelement("input")}} en {{HTMLelement("textarea")}} elementen</h3> - -<p>Het contactformulier is vrij eenvoudig en bevat drie tekstvelden, elk met een label. Het veld voor de naam is een eenvoudig tekstveld met één regel. Het veld voor het e-mailadres is ook een tekstveld met één regel maar dat alleen een e-mailadres aanvaardt. Het tekstveld voor het bericht is een eenvoudig tekstveld met meerdere regels.</p> - -<p>In HTML taal ziet de code er aldus uit:</p> - -<pre class="brush:html;"><form action="/my-handling-form-page" method="post"> - <div> - <label for="name">Name:</label> - <input type="text" id="name" name="user_name" /> - </div> - <div> - <label for="mail">E-mail:</label> - <input type="email" id="mail" name="user_mail" /> - </div> - <div> - <label for="msg">Message:</label> - <textarea id="msg" name="user_message"></textarea> - </div> -</form></pre> - -<p>De {{HTMLelement("div")}} elementen dienen om de code eenvoudig te structureren en om de stijl gemakkelijk aan te passen (zie verder). Let op het gebruik van het <em>for </em>attribuut<em> </em>in alle {{HTMLelement("label")}} elementen. Dit is een formele manier om een label aan een formulier te linken. Dit attribuut verwijst naar de<em> id </em>van de overeenkomstige widget. Dit wordt onder andere gedaan opdat de gebruiker op het label kan klikken om de widget te activeren. Andere redenen zijn beschreven in het artikel: <a href="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form" title="/en-US/docs/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a>.</p> - -<p>Voor het {{HTMLelement("input")}} element is het belangrijkste attribuut het <code>type</code> attribuut. Dit attribuut bepaalt hoe het {{HTMLelement("input")}} element zich gedraagt. Dit verdient de nodig aandacht omdat de gevolgen ingrijpend kunnen zijn. Het artikel <a href="/en-US/docs/HTML/Forms/The_native_form_widgets" rel="external" title="/en-US/docs/HTML/Forms/The_native_forms_widgets">native form widgets</a> geeft meer details hierover. In het voorbeeld wordt de waarde <code>text </code>gebruikt omdat dit de defaultwaarde is voor dit attribuut. Zo accepteert het tekstveld elke tekst zonder verdere controle of validatie. Met de waarde <code>email</code> wordt een tekstveld gedefiniëerd dat alleen een juist gevormd e-mailadres aanvaardt. Dus met dit laatste wordt het tekstveld omgevormd tot een soort intelligent veld dat enkele controles uitvoert op de gegevens die de gebruiker ingeeft. Meer details over validatie van formulieren is te vinden in het artikel <a href="/en-US/docs/HTML/Forms/Data_form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Form data validation</a>.</p> - -<p>Tenslotte iets over de syntax <code><input /></code> vs. <code><textarea></textarea></code>. Dit is een van de eigenaardigheden van HTML. Het element <code><input></code> is een element dat zichzelf afsluit. Dit wil zeggen dat, indien de gebruiker het element formeel wil sluiten, hijzelf "<em>/</em>" moet toevoegen op het einde van het element. {{HTMLElement("textarea")}} daarentegen is geen element dat zichzelf afsluit zodat de gebruiker zelf moet zorgen voor de juiste afsluiting. Dit heeft invloed op een specifieke eigenschap van HTML formulieren: de manier waarop de defaultwaarde wordt bepaald. Om de defaultwaarde van een {{HTMLElement("input")}} element te bepalen moet het <code>value</code> attribuut als volgt gebruikt worden:</p> - -<pre class="brush:html;"><input type="text" value="by default this element is filled with this text" /></pre> - -<p>Om daarentegen de defaultwaarde van een {{HTMLElement("textarea")}} element op te geven moet deze waarde tussen begin- en eindtag van het {{HTMLElement("textarea")}} element opgegeven worden:</p> - -<pre class="brush:html;"><textarea>by default this element is filled with this text</textarea></pre> - -<h3 id="En_tenslotte_om_te_eindigen_een_HTMLelement(button)">En tenslotte om te eindigen een {{HTMLelement("button")}}</h3> - -<p>Er moet alleen nog een knop toevoegd worden om de gebruiker toe te laten zijn bericht te verzenden zodra het formulier ingevuld is. Dit gebeurt met het {{HTMLelement("button")}} element:</p> - -<pre class="brush:html;"><form action="/my-handling-form-page" method="post"> - <div> - <label for="name">Name:</label> - <input type="text" id="name" name="user_name" /> - </div> - <div> - <label for="mail">E-mail:</label> - <input type="email" id="mail" name="user_mail" /> - </div> - <div> - <label for="msg">Message:</label> - <textarea id="msg" name="user_message"></textarea> - </div> - - <div class="button"> - <button type="submit">Send your message</button> - </div> -</form></pre> - -<p>Er zijn drie types van knoppen: <code>submit</code>, <code>reset</code>, en <code>button</code>.</p> - -<ul> - <li><code>submit</code> zendt de gegevens naar de webpagina die bepaalt wordt door het <code>action</code> attribuut van het {{HTMLelement("form")}} element.</li> - <li>De <code>reset</code> knop resets alle widges naar hun defaultwaarden. Vanuit het het UX standpuntwordt dit niet aangeraden.</li> - <li>Klikken op een <code>button</code> knop doet in eerste instantie niets maar dat is verbazend nuttig omdat met JavaScript de gebruiker deze toets elke funktie kan geven.</li> -</ul> - -<p>Met het {{HTMLElement("input")}} element en met het corresponderende type kan ook een knop gegenereerd worden. Het grote verschil met het {{HTMLelement("button")}} element is dat het {{HTMLelement("input")}} element slechts gewone tekst als label toestaat terwijl het {{HTMLelement("button")}} element volledige HTML inhoud accepteert als label.</p> - -<h2 id="De_zaken_mooier_maken_met_CSS">De zaken mooier maken met CSS</h2> - -<p>Nu het HTML formuler klaar is kan het bekeken worden in een browser. Maar het ziet er niet erg netjes uit.</p> - -<p><img alt="" src="/files/4049/form-no-style.png" style="height: 170px; width: 534px;"></p> - -<p>Met een CSS stylesheet kan het wat netter gemaakt worden.</p> - -<p>Om te beginnen het formulier zelf. Het kan gecentreerd worden en er kan een boord rond getrokken worden:</p> - -<pre class="brush:css;">form { - /* Just to center the form on the page */ - margin: 0 auto; - width: 400px; - /* To see the outline of the form */ - padding: 1em; - border: 1px solid #CCC; - border-radius: 1em; -}</pre> - -<p>Dan kan er wat ruimte ingevoegd worden tussen de widgets:</p> - -<pre class="brush:css;">form div + div { - margin-top: 1em; -}</pre> - -<p>Om een formulier leesbaar te maken is het aangeraden om alle labels dezelfde grootte te geven en ze uit te lijnen aan dezelfde zijde. Hier zullen we ze rechts uitlijnen. Maar soms is links uitlijnen ook goed.</p> - -<pre class="brush:css;">label { - /* To make sure that all labels have the same size and are properly aligned */ - display: inline-block; - width: 90px; - text-align: right; -}</pre> - -<p>Het moeilijkste met HTML formulieren is de styling van de HTML widgets zelf. Tekstvelden zijn nog gemakkelijk te stylen maar bij andere widgets is dat niet zo. Meer over stylen van HTML widgets is te vinden in <a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a>.</p> - -<p>Hier worden enkele klassieke zaken gestyled: fonts, grootte en randen:</p> - -<pre class="brush:css;">input, textarea { - /* To make sure that all text fields have the same font settings - By default, textareas have a monospace font */ - font: 1em sans-serif; - - /* To give the same size to all text field */ - width: 300px; - -moz-box-sizing: border-box; - box-sizing: border-box; - - /* To harmonize the look & feel of text field border */ - border: 1px solid #999; -}</pre> - -<p>HTML formulieren ondersteunen een aantal pseudoklassen om de toestand van elk element te beschrijven. Bijvoorbeeld het <span class="ng-binding text">highlighten van een aktieve widget geeft aan waar de gebruiker zich bevindt in het formulier.</span></p> - -<pre class="brush:css;">input:focus, textarea:focus { - /* To give a little highlight on active elements */ - border-color: #000; -}</pre> - -<p>Tekstvelden met meerdere regels hebben hun eigen stijlen. Het {{HTMLElement("textarea")}} element is standaard een inline blok waarvan de onderkant uitgelijnd is met basislijn van de tekst. Dit is meestal niet wat men wil. Om het label en het veld uit te lijnen moet de <code>vertical-align</code> eigenschap van het {{HTMLElement("textarea")}} gewijzigd worden naar <code>top</code>.</p> - -<p>Let ook op de <code>resize</code> eigenschap die toelaat de grootte van het {{HTMLelement("textarea")}} element aan te passen.</p> - -<pre class="brush:css;">textarea { - /* To properly align multiline text fields with their labels */ - vertical-align: top; - - /* To give enough room to type some text */ - height: 5em; - - /* To allow users to resize any textarea vertically - It does not work on all browsers */ - resize: vertical; -}</pre> - -<p>In vele gevallen vereisen de knoppen ook een of andere stijl. Daarvoor worden zij in een {{HTMLelement("div")}} geplaatst met een buttonklasse. Hier wordt de knop uitgelijnd met de andere widgets. Om dat te doen wordt een vitueel {{HTMLelement("label")}} geplaatst. Dit wordt gedaan door marges en uitvulling te gebruiken.</p> - -<pre class="brush:css;">.button { - /* To position the buttons to the same position of the text fields */ - padding-left: 90px; /* same size as the label elements */ -} -button { - /* This extra margin represent roughly the same space as the space - between the labels and their text fields */ - margin-left: .5em; -}</pre> - -<p>Nu ziet hetformulier er veel mooier uit.</p> - -<p><img alt="" src="/files/4051/form-style.png" style="height: 260px; width: 900px;"></p> - -<h2 id="Verzenden_van_de_gegevens_naar_de_server">Verzenden van de gegevens naar de server</h2> - -<p>De laatste stap is misschien de moeilijkste. Dit is de verwerking van de formuliergegevens aan de kant van de server. Zoals gezegd is een HTML formulier meestal een eenvoudige manier om de gebruiker te vragen naar gegevens en deze naar de webserver te sturen.</p> - -<p>Het {{HTMLelement("form")}} element bepaalt waar en hoe de gegevens moeten verstuurd worden door de <code>action</code> en de <code>method</code> attributen.</p> - -<p>Maar dat is niet voldoende. De gegevens moeten ook een naam krijgen. Deze naam is belangrijk aan beide zijden. Aan de kant van de browser wordt aan ieder stukje data een naam gegeven en aan de kant van de server wordt ieder stukje aan de hand van zijn naam behandeld.</p> - -<p>Dus om de gegevens een naam te geven wordt een <code>name</code> attribuut gebruikt bij elke widget die een specifiek stuk data produceert:</p> - -<pre class="brush:html;"><form action="/my-handling-form-page" method="post"> - <div> - <label for="name">Name:</label> - <input type="text" id="name" name="user_name" /> - </div> - <div> - <label for="mail">E-mail:</label> - <input type="email" id="mail" name="user_email" /> - </div> - <div> - <label for="msg">Message:</label> - <textarea id="msg" name="user_message"></textarea> - </div> - - <div class="button"> - <button type="submit">Send your message</button> - </div> -</form></pre> - -<p>In ons formulier worden 3 stuks data verzonden genaamd "<code>user_name</code>", "<code>user_email</code>" en "<code>user_message</code>". Deze gegevens worden verstuurd naar de URL "<code>/my-handling-form-page</code>" met de HTTP POST methode.</p> - -<p>Op de server zal de script op de URL "<code>/my-handling-form-page</code>" de gegevens ontvangen als 3 waarden die ingesloten zijn in het HTTP verzoek. De gebruiker is verantwoordelijk hoe het script de gegevens behandelt. Elke scripttaal aan de kant van de server (PHP, Python, Ruby, Java, C#, enz.) heeft haar eigen mechanisme. Het is buiten het bestek van deze gids om dieper op dit onderwerp in te gaan maar er zijn enkele voorbeelden te vinden in het artikel <a href="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"><span>Sending and retrieving form data</span></a>.</p> - -<h2 id="Tenslotte">Tenslotte</h2> - -<p>Proficiat. Ons eerste HTML formulier is klaar. Hier is een live voorbeeld.</p> - -<table style="height: 267px; width: 772px;"> - <thead> - <tr> - <th scope="col" style="text-align: center;">Live voorbeeld</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ EmbedLiveSample('A_simple_form', '460', '240', '', 'Web/Guide/HTML/Forms/My_first_HTML_form/Example') }}</td> - </tr> - <tr> - </tr> - </tbody> -</table> - -<p>Het is nu tijd om dieper op deze materie in te gaan. HTML formulieren kunnen veel meer dan wat we hier beschreven hebben. Dit wordt beschreven in <a href="/en-US/docs/HTML/Forms" title="/en-US/docs/HTML/Forms">the other articles of this guide.</a></p> diff --git a/files/nl/learn/getting_started_with_the_web/css_basics/index.html b/files/nl/learn/getting_started_with_the_web/css_basics/index.html deleted file mode 100644 index 6ac3c8a401..0000000000 --- a/files/nl/learn/getting_started_with_the_web/css_basics/index.html +++ /dev/null @@ -1,279 +0,0 @@ ---- -title: De basisbegrippen van CSS -slug: Learn/Getting_started_with_the_web/CSS_basics -tags: - - Beginner - - CSS - - CodingScripting - - Leren - - Stijlen - - Web -translation_of: Learn/Getting_started_with_the_web/CSS_basics -original_slug: Learn/Getting_started_with_the_web/CSS_basisbegrippen ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p>CSS (Cascading Style Sheets of Waterval Stijlbestanden) is de code die u gebruikt om uw webpagina van stijlen te voorzien. In <em>De Basisbegrippen van CSS</em> nemen we alles door wat u nodig hebt om te beginnen. We beantwoorden vragen zoals : Hoe maak ik mijn tekst zwart of rood? Hoe laat ik mijn inhoud op die en die plaats in het scherm verschijnen? Hoe versier ik mijn webpagina met afbeeldingen en kleuren?</p> -</div> - -<h2 id="Dus_wat_is_CSS_eigenlijk">Dus wat is CSS eigenlijk?</h2> - -<p>Zoals HTML is CSS niet echt een programmeertaal. Het is ook geen <em>opmaaktaal.</em> Het is een <em>stijlbladtaal, </em>dat wil zeggen, dat het u toestaat om stijlen op geselecteerde elementen in uw HTML-documenten toe te passen. Om bijvoorbeeld, <strong>alle</strong> paragraaf-elementen in uw HTML-pagina te selecteren en de tekst erin rood te maken, zou u deze CSS schrijven:</p> - -<pre class="brush: css">p { - color: red; -}</pre> - -<p>Probeer het eens: kopieer deze drie CSS-regels in een nieuw bestand in uw broncode-editor. Dan noemt u het bestand <code>stijl.css</code> en slaat u het op in uw <font face="consolas, Liberation Mono, courier, monospace">stijlbladenmap.</font></p> - -<p>Maar we moeten de CSS nog op uw HTML-document toepassen, anders zal de CSS-stijl geen effect hebben op de manier waarop uw browser het HTML-document weergeeft. (Als u niet aan ons project hebt meegedaan, lees dan eerst <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Omgaan met Bestanden</a> en <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">Basisbegrippen HTML</a> zodat u weet wat u eerst moet doen.)</p> - -<ol> - <li>Open uw <code>index.html</code> bestand en plak de volgende lijnen ergens in het hoofd, dat wil zeggen tussen de <code><head></code> en <code></head>-labels</code>: - - <pre class="brush: html"><link href="stijlen/stijl.css" rel="stylesheet" type="text/css"></pre> - </li> - <li>Sla <code>index.html</code> op en laadt het in uw browser. U zou iets moeten zien dat er ongeveer zo uitziet:</li> -</ol> - -<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="https://mdn.mozillademos.org/files/9435/website-screenshot-styled.png"></p> - -<p>Als de tekst van uw paragraaf nu rood is, kan ik u feliciteren; u hebt nu uw eerste succesvolle CSS geschreven! </p> - -<h3 id="Anatomie_van_een_set_CSS-regels">Anatomie van een set CSS-regels</h3> - -<p>We gaan de CSS hierboven wat grondiger bekijken:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9461/css-declaration-small.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p> - -<p>De hele structuur wordt een regel-set (een rule set in het Engels) genoemd (maar vaak afgekort tot "stijlregel", i.e. "rule"). Elk onderdeel heeft ook zijn eigen naam:</p> - -<dl> - <dt>Selector</dt> - <dd>Dit is de HTML-elementnaam aan het begin van de regelset. Het selecteert de elementen waarop een stijl zal worden toegepast (in dit geval p-elementen). Om een ander element een stijl te geven, verandert u gewoon de selector.</dd> - <dt>Stijldeclaratie (declaration)</dt> - <dd>Een stijldeclaratie is enkele stijlregel, zoals <code>color: red;</code>. De declaratie bepaalt welke <strong>eigenschappen </strong>(properties in het Engels) van het element een stijl zullen krijgen.</dd> - <dt>Eigenschappen (properties)</dt> - <dd>Met eigenschappen kunt u een HTML-elementstijlen (In dit geval is <code>color</code> een eigenschap van de p-elementen). Met CSS kunt u de eigenschappen kiezen die u met uw regel wilt beïnvloeden. </dd> - <dt>Stijlwaarden (property values)</dt> - <dd>Aan de rechterkant van de eigenschap, na de dubbele punt (:), vinden we de stijlwaarde die per eigenschap vele verschillende gedaantes kan aannemen (behalve rood, zijn er nog vele andere kleuren).</dd> -</dl> - -<p>Dit zijn de andere belangrijke delen van de syntax:</p> - -<ul> - <li>Elke regelset (behalve de selector) moeten worden ingesloten tussen accolades (<code>{}</code>).</li> - <li>Binnen elke stijldeclaratie , moet u een dubbele punt (<code>:</code>) gebruiken om de eigenschap van zijn stijlwaarden te scheiden.</li> - <li>Binnen elke regelset, moet u een puntkomma (<code>;</code>) gebruiken om elke stijldeclaratie van de volgende te scheiden.</li> -</ul> - -<p>Dus om meerdere stijlwaarden tegelijk te gebruiken, moet u ze apart en gescheiden door puntkomma's schrijven zoals hieronder:</p> - -<pre class="brush: css">p { - color: red; - width: 500px; - border: 1px solid black; -}</pre> - -<h3 id="Meerdere_elementen_selecteren">Meerdere elementen selecteren</h3> - -<p>U kunt meerdere elementtypes selecteren en één enkele regel op hen allemaal toepassen. Ze worden met komma's van elkaar gescheiden. Bijvoorbeeld:</p> - -<pre class="brush: css">p,li,h1 { - color: red; -}</pre> - -<h3 id="Verschillende_selectortypes">Verschillende selectortypes</h3> - -<p>Er zijn vele verschillende selectortypes. Hierboven hebben we enkel <strong>elementselectoren</strong> bekeken. Dit zijn selectoren die alle elementen van een bepaald type in een HTML-document selecteren. Maar we kunnen veel preciezer dan dat selecteren. Hieronder volgende de gebruikelijkste selectortypes:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Selectornaam</th> - <th scope="col">Wat het selecteert</th> - <th scope="col">Voorbeeld</th> - </tr> - </thead> - <tbody> - <tr> - <td>Elementselector (soms een label of typeselector genoemd)</td> - <td>Alle HTML-elementen van het gekozen type.</td> - <td><code>p</code><br> - selecteert <code><p></code></td> - </tr> - <tr> - <td>ID-selector</td> - <td>Het element op de pagina die het ID als attribuut heeft gekregen (in een HTML-pagina is slechts 'één element per ID toegestaan).</td> - <td><code>#my-id</code><br> - selecteert <code><p id="my-id"></code> of <code><a id="my-id"></code></td> - </tr> - <tr> - <td>Class-selector</td> - <td>Een of meerdere elementen op de pagina die een specifieke class als attribuut hebben gekregen. (In het Nederlands is dit een klasse, maar u moet het Engelse 'class' als selector gebruiken.) (verschillende elementen kunnen dezelfde klasse krijgen ).</td> - <td><code>.my-class</code><br> - selecteert <code><p class="my-class"></code> en <code><a class="my-class"></code></td> - </tr> - <tr> - <td>Attribuut- selector</td> - <td>Een of meerdere elementen op de pagina met het specifieke attribuut. </td> - <td><code>img[src]</code><br> - selecteert <code><img src="myimage.png"></code> maar niet <code><img></code></td> - </tr> - <tr> - <td>Pseudo-class selector</td> - <td>Een of meerdere gekozen elementen maar enkel als ze zich in een specifieke staat bevinden, bijvoorbeeld als u er met uw muis overheen beweegt (dat is "hover" in het Engels). </td> - <td><code>a:hover</code><br> - selecteert <code><a></code>, maar enkel als de muis over de hyperlink heen beweegt.</td> - </tr> - </tbody> -</table> - -<p>Er zijn nog veel meer selectoren om te onderzoeken en u kunt er een gedetailleerde lijst van vinden in onze <a href="/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">Selectorengids</a>.</p> - -<h2 id="Lettertypes_en_tekst">Lettertypes en tekst</h2> - -<p>Nu we een inleiding op CSS hebben verwerkt, kunnen we meer stijlregels en informatie aan ons <code>stijl.css</code> bestand toevoegen om ons voorbeeld er mooi uit te laten zien. Eerst gaan we aan onze lettertypes en tekst werken.</p> - -<ol> - <li>Om te beginnen, gaat u terug en vindt u de <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Font">code van Google Fonts</a> die u ergens veilig hebt opgeslagen. Voeg het <code><link ... >-</code>element in het hoofd van <code>index.html</code> toe (opnieuw, ergens tussen de <code><head></code> en <code></head>-label</code>s). Het zal er ongeveer zo uitzien: - - <pre class="brush: html"><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'></pre> - </li> - <li>Dan verwijdert u de regel die in uw stijl.css bestand staat. Die regel was een goede test, maar rode tekst ziet er eigenlijk echt niet goed uit. </li> - <li>Vervang de verwijderde regel door de regels die u hieronder in het voorbeeld ziet, terwijl u de tijdelijke aanduiding door het lettertype (i.e. de '<code>font-family'-</code>regel) vervangt die u uit Google Fonts hebt gehaald. ('<code>font-family'</code> betekent gewoon een of meerdere lettertypes die u voor uw tekst wilt gebruiken). Deze regel stelt een globaal basislettertype in en de lettergrootte voor de volledige pagina. ( <code><html></code> is het ouderelement van de volledige pagina en alle elementen die erin zitten erven hetzelfde lettertype en dezelfde lettergrootte): - <pre class="brush: css">html { - font-size: 10px; /* px betekent 'pixels': de basislettergrootte is nu 10 pixels hoog */ - font-family: tijdelijke aanduiding: dit zou de rest van de stijlregel moeten zijn die u uit Google fonts hebt gehaald -}</pre> - - <div class="note"> - <p><strong>Opmerking</strong>: In het voorbeeld hierboven is er een commentaar toegevoegd dat uitlegt wat "px" betekent. Alles dat in een CSS-document tussen <code>/*</code> en <code>*/</code> staat is een <strong>CSS-commentaar</strong>, dat de browser zal negeren wanneer het de code genereert. Dit is een plek voor u waar u nuttige opmerkingen kunt schrijven over de code waar u mee bezig bent.</p> - </div> - </li> - <li>Nu gaan we de lettergroottes instellen voor elementen binnen het HTML body ({{htmlelement("h1")}}, {{htmlelement("li")}}, and {{htmlelement("p")}}) die tekst bevatten. We gaan ook de tekst van onze hoofding centreren en de lijnhoogte en letterafstand op de inhoud van het body instellen om die wat leesbaarder te maken: </li> - <li> - <pre class="brush: css">h1 { - font-size: 60px; - text-align: center; -} - -p, li { - font-size: 16px; - line-height: 2; - letter-spacing: 1px; -}</pre> - </li> -</ol> - -<p>U kunt deze px-waarden afstemmen tot u het ontwerp hebt dat u wilt, maar in grote lijnen moet het er ongeveer zo uitzien:</p> - -<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="https://mdn.mozillademos.org/files/9447/website-screenshot-font-small.png" style="display: block; height: 1020px; margin: 0px auto; width: 921px;"></p> - -<h2 id="Dozen_dozen_het_gaat_allemaal_over_dozen">Dozen, dozen, het gaat allemaal over dozen</h2> - -<p>Er is een ding dat u zult merken als u CSS-code schrijft. Heel vaak gaat die over dozen — hoe u hun grootte, kleur, positie, enz. instelt. De meeste van de HTML-elementen op uw pagina kunnen als dozen worden gezien die op elkaar zijn gestapeld.</p> - -<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p> - -<p>Het is dan ook geen verrassing dat CSS-opmaak hoofdzakelijk op het <em>doos-model </em>is gebaseerd.<em> </em>Elk van de blokken, die plaats innemen op uw pagina, heeft eigenschappen zoals die hieronder:</p> - -<ul> - <li><code>padding</code>, (vulling, wattering) de ruimte die juist rond de inhoud zit (bijvoorbeeld rond de tekst van een paragraaf)</li> - <li><code>border</code>, (boord) de volle lijn die zich rond de padding bevindt </li> - <li><code>margin</code>, (marge) de ruimte die rond de buitenkant van het element zit (dus ook rond de border)</li> -</ul> - -<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p> - -<p>In dit gedeelte gebruiken we ook:</p> - -<ul> - <li><code>width</code> (breedte) van een element</li> - <li><code>background-color</code>, (achtergrondkleur) de kleur die achter de inhoud en padding van een element zit</li> - <li><code>color</code>, (kleur) de kleur van de inhoud van een element (meestal de tekst) </li> - <li><code>text-shadow</code>: (tekstschaduw) stelt een slagschaduw in op de tekst in een element</li> - <li><code>display</code>: (weergave) stelt de weergavemodus van een element in (maakt u zich hier nog geen zorgen over) </li> -</ul> - -<p>We gaan beginnen met nog meer CSS-toevoegingen aan onze pagina! Voeg al deze nieuwe regels toe onderaan uw pagina en wees niet bang om met de waarden van de eigenschappen te experimenteren. </p> - -<h3 id="De_kleur_van_de_pagina_veranderen">De kleur van de pagina veranderen</h3> - -<pre class="brush: css">html { - background-color: #00539F; -}</pre> - -<p>Deze regel stelt de achtergrondkleur van de hele pagina in. Verander de kleurcode hierboven in eender welke kleur <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Theme_color">die u kiest als u het ontwerp van uw site plant</a>.</p> - -<h3 id="Uitzoeken_hoe_de_body_in_elkaar_steekt">Uitzoeken hoe de body in elkaar steekt</h3> - -<pre class="brush: css">body { - width: 600px; - margin: 0 auto; - background-color: #FF9500; - padding: 0 20px 20px 20px; - border: 5px solid black; -}</pre> - -<p>En dan nu het <code>body-</code>element. Er zijn nogal wat stijldeclaraties hier en we gaan er een per een doorheen:</p> - -<ul> - <li><code>width: (breedte) 600px;</code> — Dit dwingt de body om altijd 600 pixels breed te zijn.</li> - <li><code>margin: (marge) 0 auto;</code> — Als u deze twee waarden op een eigenschap zoals <code>margin</code> of <code>padding</code>, instelt, zal de eerste waarde (in dit geval <code>0</code>) de bovenkant en onderkant van het element bepalen en de tweede waarde (auto) de linker- en rechterkant van het element. (Hier is auto een speciale waarde die de beschikbare horizontale ruimte gelijk in een linkse en rechtse helft verdeelt). U kunt ook één, drie of vier waarden invullen, zoals <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Values">hier</a> verder wordt uitgelegd. </li> - <li><code>background-color: #FF9500;</code> — Zoals reeds vermeld, stelt dit de achtergrondkleur van het element in. Er is een soort van roodachtig oranje voor de body gebruikt in tegenstelling tot donkerblauw voor het <code>html-</code>element. Gaat uw gang en experimenteer. Gebruik wit of eender welke kleur die u bevalt. </li> - <li><code>padding: (vulling) 0 20px 20px 20px;</code> — We hebben deze vier waarden op de padding ingesteld om een beetje ruimte rond onze inhoud te maken. Deze keer stellen we geen padding in op de bovenkant van de body en 20 pixels op de linker-, onder- en rechterkant. De waarden stellen boven-., rechter-, onder-, en linkerkant in, in die volgorde.</li> - <li><code>border: (boord) 5px solid black;</code> — dit stelt een volle zwarte boord in die 5px breed is rond alle zijden van de body .</li> -</ul> - -<h3 id="Onze_hoofdtitel_positioneren_en_stijlen">Onze hoofdtitel positioneren en stijlen</h3> - -<pre class="brush: css">h1 { - margin: 0; - padding: 20px 0; - color: #00539F; - text-shadow: 3px 3px 1px black; -}</pre> - -<p>Het is u misschien al opgevallen dat er een afschuwelijk gat aan de bovenkant van de body zit. Dat gebeurt, omdat browsers een <strong>default styling</strong> (een standaardstijl) op het {{htmlelement("h1")}}- element toepassen (en ook op andere), zelfs als u geen enkele CSS hebt ingesteld! Dat klinkt misschien als een slecht idee, maar we willen dat een onopgemaakte pagina toch leesbaar is. Om van dat gat af te raken hebben we de default styling opgeheven door de marge op <code>0</code> te zetten: <code>margin: 0;</code>.</p> - -<p>We gaan verder met de padding van de onder- en bovenkant van de grootste heading (dat is dus de hoofdtitel). Die hebben we 20 pixels gegeven en we hebben de tekst van de heading dezelfde kleur gegeven als de achtergrondkleur van de html.</p> - -<p>We hebben hier een interessante eigenschap gebruikt: <code>text-shadow</code>, die past een slagschaduw toe op de tekstinhoud van het element. Het krijgt de volgende vier waarden:</p> - -<ul> - <li>De eerste pixelwaarde stelt de <strong>horizontale offset</strong> van de tekstschaduw in — hoe ver die van de letter weg beweegt: een negatieve waarde zou hem naar links moeten schuiven.</li> - <li>De tweede pixelwaarde stelt de <strong>verticale offset</strong> van de slagschaduw van de tekst in — hoe ver hij naar beneden beweegt, in dit voorbeeld zou een negatieve waarde de tekstschaduw naar boven moeten duwen.</li> - <li>De derde pixelwaarde stelt de <strong>troebelewaarde voor de omtrek </strong>(in het Engels blur radius) van de tekstschaduw in — een grotere waarde creëert een vagere schaduw.</li> - <li>De vierde waarden bepalen de basiskleur van de schaduw.</li> -</ul> - -<p>Probeer opnieuw met verschillende waarden te experimenteren en kijk eens wat u zoal kunt bedenken.</p> - -<h3 id="Het_beeld_centreren">Het beeld centreren</h3> - -<pre class="brush: css">img { - display: block; - margin: 0 auto; -}</pre> - -<p>Tot slot zullen we de afbeelding centreren zodat die er beter uitziet. We zouden opnieuw de <code>margin: 0 auto</code> truck kunnen we gebruiken zoals we dat voor de body hebben gedaan, maar we moeten ook iets anders doen. Het body-element zit namelijk op <strong>block niveau</strong>, wat wil zeggen dat het ruimte inneemt op de pagina en margin-waarden kan krijgen (het kan ook andere waarden krijgen die de afstand tussen elementen bepalen). Afbeeldingen, daarentegen, zijn <strong>inline</strong> elementen, wat wil zeggen dat zij dat niet kunnen. Dus, om de afbeelding marges te kunnen geven, moet het beeld zich gedragen als een element op block niveau. We doen dat met <code>display: block;</code>.(display is weergave in het Nederlands)</p> - -<div class="note"> -<p><span style="font-size: 14px;"><strong>Opmerking</strong></span>: Maakt u zich geen zorgen als u <code>display: block;</code> en het block/inline verschil nog niet begrijpt. Dat komt als u CSS grondiger bestudeert. U kunt meer over de verschillende display-waarden ontdekken op onze <a href="/en-US/docs/Web/CSS/display">display referentiepagina</a>.</p> -</div> - -<h2 id="Conclusie">Conclusie</h2> - -<p>Als u alle instructies in dit artikel hebt gevolgd, zou u een pagina moeten hebben gemaakt die er ongeveer zo uitziet (U kan ook <a href="http://mdn.github.io/beginner-html-site-styled/">onze versie hier bekijken</a>):</p> - -<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/9455/website-screenshot-final.png" style="display: block; height: 1084px; margin: 0px auto; width: 940px;"></p> - -<p>Als u vast komt te zitten, kunt u uw werk altijd vergelijken met onze <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">voltooide voorbeeldcode op Github</a>.</p> - -<p>Hier hebben we u niet meer dan de eerste stappen op het CSS-pad laten zetten. Ga naar onze <a href="https://developer.mozilla.org/en-US/Learn/CSS">CSS Learning topic</a> om meer te ontdekken.</p> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/nl/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/nl/learn/getting_started_with_the_web/dealing_with_files/index.html deleted file mode 100644 index 8adbe4dc85..0000000000 --- a/files/nl/learn/getting_started_with_the_web/dealing_with_files/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Omgaan met bestanden -slug: Learn/Getting_started_with_the_web/Dealing_with_files -tags: - - Beginner - - Bestanden - - CodingScripting - - Gids - - HTML - - Theorie - - website -translation_of: Learn/Getting_started_with_the_web/Dealing_with_files -original_slug: Learn/Getting_started_with_the_web/Bestanden_beheren ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p>Een website bestaat uit vele bestanden: tekstinhoud, code, stijlbladen, media- inhoud enzovoort. Als u een website bouwt, is het nodig deze bestanden in een verstandige structuur onder te brengen op uw lokale computer. U moet ervoor zorgen dat ze met elkaar kunnen praten en uw volledige inhoud moet er goed uitzien, vooraleer u uw bestanden <a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">naar een server uploadt</a>. Omgaan met bestanden bespreekt een aantal problemen waar u zich bewust van zou moeten zijn, zodat u een verstandige mappenstructuur voor uw website kunt opzetten.</p> -</div> - -<h2 id="Waar_moet_uw_website_op_uw_computer_leven">Waar moet uw website op uw computer leven?</h2> - -<p>Als u op uw lokale computer aan uw website werkt, moet u alle gerelateerde bestanden in een enkele map bewaren die de mappenstructuur van de gepuliceerde website op de server spiegelt. Deze map kan eender waar leven, maar u kunt hem het beste ergens plaatsen waar u hem gemakkelijk terugvindt; misschien op uw Bureaublad, in uw Home-map of in het hoofdpad (i.e. the root) van uw harde schijf. </p> - -<ol> - <li>Kies een plaats om uw website-projecten op te slaan. Crëeer hier een nieuwe map die u webprojecten (of iets gelijkaardigs) noemt. Hier zullen al uw webprojecten leven. </li> - <li>In deze eerste map, maakt u een nog een map waarin u uw eerste website opslaat. Noem hem testsite (of kies een naam die meer tot uw verbeelding spreekt).</li> -</ol> - -<h2 id="Over_hoofdletters_en_spaties">Over hoofdletters en spaties </h2> - -<p>U zult merken dat we u in dit artikel zullen vragen om de namen van u bestanden en mappen volledig in kleine letters en zonder spaties te schrijven. Er zijn twee redenen voor: </p> - -<ol> - <li>Vele computers, vooral webservers, zijn hoofdlettergevoelig. Stel dat u een afbeelding op uw website zet met dit pad: <code>testsite/MijnAfbeelding.jpg.</code> In een ander bestand probeert u het beeld op te roepen met<code> testsite/mijnafbeelding.jpg</code>. Tja, dat zal misschien niet werken. </li> - <li>Browsers, webservers en andere programmeertalen gaan niet consistent om met spaties. Als u bijvoorbeeld spaties in uw bestandsnaam gebruikt, is het mogelijk dat sommige systemen deze bestandsnaam als twee bestandsnamen zullen behandelen. Sommige servers zullen de spaties in uw bestandsnamen door "%20" (de tekens die spaties in URIs voorstellen) vervangen en ze zullen al uw hyperlinks breken. Het is beter om woorden van elkaar te scheiden met underscores (i.e. zo'n streepje dat op de regel zelf ligt) of door koppeltekens: <code>my-file.html</code> of <code>my_file.html</code>.</li> -</ol> - -<p>Daarom is het beter om er een gewoonte van te maken uw bestands- en mappennamen altijd met kleine letters en zonder spaties te schrijven, tenminste tot u weet wat u doet. Op die manier zult u minder problemen tegenkomen. </p> - -<h2 id="Wat_voor_een_structuur_moet_uw_website_hebben">Wat voor een structuur moet uw website hebben?</h2> - -<p>Nu gaan we de structuur van onze website bekijken. De meest voorkomende zaken die we op een website tegenkomen, zijn een <code>index.html</code>-bestand en mappen met afbeeldingen, stijlbladen en scriptbestanden erin. Die gaan we nu maken:</p> - -<ol> - <li><code><strong>index.html</strong></code>: Dit betand zal standaard uw startpagina (homepage in het Engels) bevatten, d.w.z de tekst en de afbeeldingen die mensen zien als ze naar uw site surfen. Maak een nieuw bestand met uw broncodeverwerker en noem het <code>index.html</code> . Sla het op in uw <code>test-site</code>-map.</li> - <li><strong><code>Afbeeldingenmap</code></strong>: In deze map zullen alle afbeeldingen zitten die u op uw website gebruikt. Creëer in uw testsite-map een map die afbeeldingen heet. </li> - <li><font face="consolas, Liberation Mono, courier, monospace"><strong>Stijlbladenmap</strong></font>: Deze map zal de CSS-code bevatten die u gebruikt om een stijl aan uw inhoud te geven. (door bijvoorbeeld de kleur van uw tekst en die van de achtergrond te bepalen). In uw testsite-map maakt u een map die stijlen heet.</li> - <li><strong><code>Scriptsmap</code></strong>: Deze map zal alle JavaScriptcode bevatten die wordt gebruikt om interactieve functionaliteit aan uw site toe te voegen (bijvoorbeeld knoppen die data inladen als erop wordt geklikt). Creëer in uw testsite-map een map die scripts heet.</li> -</ol> - -<div class="note"> -<p><strong>Opmerking</strong>: Op Windows computers kunt u wat problemen tegenkomen als u de betandsnamen wilt zien, omdat Windows over een hinderlijke optie beschikt die <strong>Verberg Bestandsnaamextensies</strong> heet en die standaard wordt aangezet. Meestal kunt u die uitzetten door naar Windows Verkenner te gaan, het vinkje uit het keuzevak te verwijderen en dan op <strong>OK </strong>klikken. Specifieke informatie die de correcte procedure voor uw Windowsversie behandelt, kunt u met Yahoo! opzoeken. </p> -</div> - -<h2 id="Bestandspaden">Bestandspaden</h2> - -<p>Om bestanden met elkaar te laten praten, moet u paden tussen hen maken — een route zodat elk bestand weet waar de anderen zijn. Om dit te demonstreren, zullen we een beetje HTML in ons <code>index.html</code> bestand plaatsen, zodat het de afbeeldingen toont die u in het vorige artikel (<a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">"Hoe gaat uw website eruitzien?"</a>) hebt gekozen.</p> - -<ol> - <li>Kopiëer de afbeelding die u reeds hebt gekozen in uw afbeeldingenmap. </li> - <li>Open uw <code>index.html</code>-bestand en plaats de volgende code exact zoals die wordt getoond in het bestand. Maakt u zich nu nog geen zorgen over wat het allemaal betekent — we zullen deze structuren later in deze reeks in detail bekijken. - <pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Mijn testpagina</title> - </head> - <body> - <img src="" alt="Mijn testafbeelding"> - </body> -</html> </pre> - </li> - <li>The regel <code><img src="" alt="Mijn testafbeelding"></code> is de HTML-code waarmee een afbeelding in de webpagina wordt ingevoegd. We moeten de HTML vertellen waar de afbeelding is. Het beeld zit in de afbeeldingenmap en die zit in dezelfde map als <code>index.html</code>. Om in de bestandsstructuur van <code>index.html</code> tot aan onze afbeelding af te dalen, hebben we het volgende bestandspad nodig: <code>afbeeldingen/jouw-beeld-bestandsnaam</code>. Onze afbeelding heet bijvoorbeeld <code>firefox-icon.png</code>, dus het bestandspad is <code>afbeeldingen/firefox-icon.png</code>.</li> - <li>Schrijf het bestandspad in uw HTML-code tussen de dubbele aanhalingstekens van de <code>src=""</code> code.</li> - <li>Sla uw HTML-bestand op en laadt het dan in in uw webbrowser (dubbelklik op het bestand). U zou nu uw niewe webpagina moeten zien met uw afbeelding erin!</li> -</ol> - -<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p> - -<p>Enkele algemene regels voor bestandspaden:</p> - -<ul> - <li>Om een doelbestand te verbinden met het HTML-bestand dat alles activeert en in in dezelfde map zit, gebruikt u gewoon de bestandsnaam, bijvoorbeeld <code>mijn-afbeelding.jpg</code>.</li> - <li>Om een verwijzing te maken naar een bestaand bestand dat in een lagere map steekt, schrijft u de naam van de lagere map voor het pad met een schuine streep die naar voor leunt, bijvoorbeeld submap<code>/mijn-afbeelding.jpg</code>.</li> - <li>Om een verbinding te maken met een doelbestand dat in een map <strong>boven</strong> het activerende HTML-bestand zit, schrijft u twee punten. Dus als index.html bijvooorbeeld in de lagere subfolder van testsite zit en mijn-afbeelding.png zit in testsite, zou u een verwijzing naar mijn-afbeelding.png kunnen maken door <code>../mijn-afbeelding.png te schrijven</code>.</li> - <li>U mag zo veel combinaties maken als u wilt, bijvoorbeeld <code>../subfolder/nog-een-subfolder/mijn-afbeelding.png</code>.</li> -</ul> - -<p>Voorlopig is dat alles wat u moet weten.</p> - -<div class="note"> -<p><strong>Opmerking</strong>: Het Windows bestandensysteem gebruikt vaak schuine streepjes die naar achter leunen in plaats van naar voor. Bijvoorbeeld <code>C:\windows</code>. Op zich is dat niet zo erg. Zelfs als u uw website ontwikkelt met Windows, moet u in uw code nog steeds schuine streepjes gebruiken die naar voor leunen.</p> -</div> - -<h2 id="Wat_moet_er_nog_worden_gedaan">Wat moet er nog worden gedaan? </h2> - -<p>Voorlopig is dit ongeveer alles. Uw bestandenstructuur moet er ongeveer zo uitzien:</p> - -<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/nl/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/nl/learn/getting_started_with_the_web/how_the_web_works/index.html deleted file mode 100644 index ac927f09ec..0000000000 --- a/files/nl/learn/getting_started_with_the_web/how_the_web_works/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Hoe werkt het web? -slug: Learn/Getting_started_with_the_web/How_the_Web_works -tags: - - Beginner - - Client - - DNS - - HTTP - - IP - - Leren - - Server - - TCP - - infrastructuur -translation_of: Learn/Getting_started_with_the_web/How_the_Web_works -original_slug: Learn/Getting_started_with_the_web/Hoe_werkt_het_web ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p><em>Hoe werkt het web</em> biedt een vereenvoudigde kijk op wat er gebeurt als u een webpagina in uw browser op uw computer of telefoon bekijkt.</p> -</div> - -<p>Op korte termijn is deze theorie niet van essentieel belang, maar als u webcode wilt schrijven, is het echt beter om te begrijpen wat er in de achtergrond gebeurt. Het zal niet lang duren voor u echt van die kennis begint te profiteren.</p> - -<h2 id="Clienten_en_servers">Clienten en servers</h2> - -<p>Computers die met het web verbonden zijn, noemen we <strong>clienten e</strong>n <strong>servers</strong>. Zo ziet een eenvoudig diagram van de interactie tussen hen beide er uit:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8973/Client-server.jpg" style="height: 123px; width: 336px;"></p> - -<ul> - <li>Clienten zijn de typische toestellen van een webgebruiker die met het internet verbonden zijn (uw computer is bijvoorbeeld verbonden met uw Wi-Fi, of uw telefoon met uw mobiele netwerk). De term slaat ook op de software die deze apparaten gebruiken om zich met het web te verbinden (meestal een webbrowser zoals Firefox of Chrome).</li> - <li>Servers zijn computers waarop zich webpaginas, sites of apps bevinden. Als een client een webpagina wil openen (dat is het verzoek of <em>request </em>in het Engels), wordt een kopie van de webpagina van de webserver naar de client gedownload en vervolgens weergegeven in de browser van de gebruiker (dat is het antwoord of de <em>response</em>). </li> -</ul> - -<h2 id="De_andere_instrumenten_in_de_gereedschapskist">De andere instrumenten in de gereedschapskist</h2> - -<p>De client en de server die we hierboven hebben beschreven, vertellen niet het volledige verhaal. Er zijn nog vele andere gereedschappen bij betrokken en die beschrijven we hieronder.</p> - -<p>Voorlopig kunnen we het web voorstellen als een weg. Aan het einde van de weg is de client en die ziet eruit als uw huis. Aan de andere kant is de server en die is een winkel waar u iets wilt kopen.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p> - -<p> Behalve de client en de server moeten we ook hallo zeggen tegen: </p> - -<ul> - <li><strong>Uw internetverbinding</strong>: Die laat u data versturen en ontvangen op het web. U kunt zich die voorstellen als de straat tussen uw huis en de winkel. </li> - <li><strong>TCP/IP</strong>: Transmission Control Protocol and Internet Protocol zijn communicatieprotocollen die bepalen hoe data door het web moet reizen. Ze zijn als de transportmechanismen die u een bestelling laten plaatsen, u naar de winkel laten gaan en inkopen doen. In ons voorbeeld zijn ze als een auto of een fiets of elk ander vervoermiddel dat u van A naar B helpt.</li> - <li><strong>DNS</strong>: Domain Name Servers zijn de adresboeken van websites. Als u een webadres in uw browser typt, kijkt de browser eerst in de DNS voor hij de website kan ophalen. De browser moet er eerst achterkomen op welke server de website bestaat, zodat hij HTTP-berichten naar de juiste plaats kan versturen (zie hieronder). Het is alsof hij het adres van de winkel opzoekt, zodat u ernaar toe kunt gaan. </li> - <li><strong>HTTP</strong>: Hypertext Transfer Protocol is een applicatie{{Glossary("Protocol" , "protocol")}} dat een taal voor clienten en servers definiëert, zodat ze met elkaar kunnen praten. U kunt dit vergelijken met de taal die u gebruikt om uw artikelen te bestellen.</li> - <li><strong>Component files</strong>: (componentbestanden) Een website bestaat uit veel verschillende bestanden, die lijken op de artikelen die u in de winkel koopt. Deze bestanden bestaan voornamelijk uit deze twee types: - <ul> - <li><strong>Codebestanden</strong>: Websites worden voornamelijk met HTML, CSS en JavaScript gebouwd, hoewel u later nog andere technologieën zult tegenkomen.</li> - <li><strong>Assets</strong>: (middelen) Dit is een verzamelnaam voor alle andere onderdelen die samen een website maken. Het zijn afbeeldingen, muziek, video, Worddocumenten en PDF's.</li> - </ul> - </li> -</ul> - -<h2 id="Wat_er_gebeurt_er_nu_precies">Wat er gebeurt er nu precies?</h2> - -<p>Stel dat u een webadres in uw browser typt (analoog met: stel dat u naar de winkel gaat), wat gebeurt er dan?</p> - -<ol> - <li>De browser gaat naar de DNS-server en vindt het echte adres van de server waarop de website staat (u vindt het adres van de winkel).</li> - <li>De browser verzendt een bericht met HTTP-verzoek erin naar de server en vraagt die een kopie van de website naar de client te sturen (u gaat naar de winkel en u bestelt uw artikelen). Dit bericht en alle andere data die is verstuurd tussen de client en de server, wordt langs uw internetverbinding met TCP/IP verstuurd.</li> - <li>Als de server het verzoek van de client goedkeurt, stuurt de server een boodschap met daarin "200 OK". Dit betekent zoiets als: "maar natuurlijk kunt u die website bekijken! Hier is hij.". Dan begint de website bestanden te versturen die in een serie kleine brokken (<em>chunks </em>in het Engels) worden verdeeld (de winkel geeft u uw artikelen en u neemt ze mee naar huis). Die brokken noemen we <em>data packets</em> (datapakketjes).</li> - <li>De browser stelt de kleine brokken samen tot een volledige website en toont die aan u (de goederen arriveren aan uw deur — nieuw blinkend materiaal, geweldig!).</li> -</ol> - -<h2 id="DNS_uitgelegd">DNS uitgelegd</h2> - -<p>Echte webaddressen zijn niet de leuke makkelijk te onhouden strings die u in uw adresbalk typt om uw favoriete websites te vinden. Een webadres is een serie getallen zoals deze: <code>63.245.215.20</code>.</p> - -<p>Zo'n getallenreeks noemen we een {{Glossary("IP Address", "IP-adres")}} en het staat voor een unieke locatie op het web. Het is echter niet echt gemakkelijk om te onthouden en daarom zijn Domain Name Servers uitgevonden. Dat zijn speciale servers die het webadres dat u in de adresbalk van uw browser typt (zoals "mozilla.org") aan het echte (IP-)adres van de website vastkoppelen.</p> - -<p>Websites kunnen via hun echte IP-adres worden bereikt. Probeer de website van Mozilla te openen door <code>63.245.215.20</code> in de adresbalk van een nieuwe tabpagina in uw browser te typen.</p> - -<p><img alt="A domain name is just another form of an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p> - -<h2 id="Paketten_uitgelegd">Paketten uitgelegd</h2> - -<p>Eerder hebben we de term "pakketten" gebruikt om het formaat te beschrijven waarin de data van de server naar de client wordt verstuurd. Wat bedoelen we hier? Het komt erop neer dat data die doorheen het web wordt verstuurd, als duizenden kleine brokken worden verzonden, zodat vele verschillende webgebruikers tegelijkertijd dezelfde website kunnen downloaden. Als een website als een enkele brok zou worden verstuurd, zou slechts één gebruiker de website kunnen downloaden en zou de rest zijn beurt moeten afwachten. Dat zou het web heel inefficiënt maken en niet erg aangenaam in het gebruik.</p> - -<h2 id="Zie_ook">Zie ook</h2> - -<ul> - <li><a href="/en-US/Learn/How_the_Internet_works">Hoe werkt het internet?</a></li> - <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — an Application-Level Protocol</a></li> - <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Let’s GET It On!</a></li> - <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Response Codes</a></li> -</ul> - -<h2 id="Illustratie">Illustratie</h2> - -<p>Straatfoto: <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, door <a href="https://www.flickr.com/photos/kdigga/">Kevin D</a>.</p> - -<p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/nl/learn/getting_started_with_the_web/html_basics/index.html b/files/nl/learn/getting_started_with_the_web/html_basics/index.html deleted file mode 100644 index 1426509266..0000000000 --- a/files/nl/learn/getting_started_with_the_web/html_basics/index.html +++ /dev/null @@ -1,219 +0,0 @@ ---- -title: De basisbegrippen van HTML -slug: Learn/Getting_started_with_the_web/HTML_basics -tags: - - Beginner - - CodingScripting - - HTML - - Leren - - Web -translation_of: Learn/Getting_started_with_the_web/HTML_basics -original_slug: Learn/Getting_started_with_the_web/HTML_basisbegrippen ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Bestanden_beheren", "Learn/Getting_started_with_the_web/CSS_basisbegrippen", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p>HTML (<strong>H</strong>ypertext Markup Language of opmaaktaal voor gelinkte tekst) is de code die wordt gebruikt om een webpagina en zijn inhoud te structureren en weer te geven. De inhoud moet bijvoorbeeld worden gestructureerd in een reeks paragrafen, in een lijst met opsommingstekens of voorzien van illustraties en tabellen. Zoals de titel suggereert zal dit artikel u de basisbegrippen van HTML uitleggen en wat zijn functie is.</p> -</div> - -<h2 id="Dus_wat_is_HTML_nu_eigenlijk">Dus wat is HTML nu eigenlijk?</h2> - -<p>HTML is geen programmeertaal; het is <em>een opmaaktaal </em>en hij wordt gebruikt om uw browser te vertellen hoe de webpagina's die u bezoekt, moeten worden weergegeven. Het kan even simpel of ingewikkeld zijn als de webontwerper dat wenst. HTML bestaat uit een serie <strong>{{Glossary("element", "elementen")}} </strong>die u kunt gebruiken om verschillende onderdelen van uw inhoud te verpakken of te omhullen zodat die er op een bepaalde manier gaat uitzien of zich gedragen. De 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>Mijn kat is heel chagrijnig</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>Mijn kat is heel chagrijnig</p></pre> - -<h3 id="Anatomie_van_een_HTML-element">Anatomie van een HTML-element</h3> - -<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 begint. Hier begint ook de invloed die het op de regel uitoefent en 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 inhoud:</strong> 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> - -<p>Elementen kunnen ook attributen krijgen die er zo uitzien:</p> - -<p><img alt="" 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 u niet in de inhoud wilt zien zitten. Hier is <code>class</code> the <em>naam</em> van het attribuut en <code>editor-note</code> is de <em>waarde </em>van het attribuut. Met het <code>class</code>-attribuut kan een identificeerder aan het element worden toegevoegd die later gebruikt kan worden om van het element een doelwit voor stijlinformatie en andere zaken te maken.</p> - -<p>Een attribuut krijgt altijd de volgende kenmerken:</p> - -<ol> - <li>Een spatie tussen het attribuut en de naam van het element (of het vorige attribuut als het element er meer dan een heeft).</li> - <li>De naam van het attribuut wordt gevolgd door een is-gelijk-aan teken (=).</li> - <li>De waarde van het attribuut staat tussen aanhalingstekens. </li> -</ol> - -<h3 id="Geneste_Elementen">Geneste Elementen</h3> - -<p>U kunt elementen in andere elementen steken - we noemen dit <strong>nesten</strong>. Als we willen zeggen dat onze kat HEEL chagrijnig is, kunnen we het woord "heel" in een {{htmlelement("strong")}}-element insluiten. Dat zorgt ervoor dat het woord wordt beklemtoond:</p> - -<pre class="brush: html"><p>Mijn kat is <strong>heel</strong> chagrijnig.</p></pre> - -<p>U moet er echter wel voor zorgen dat uw elementen correct worden genest: in het voorbeeld hierboven openden we het <p> element eerst en dan het <strong> element. Dus moeten we eerst het <strong> sluiten en dan <p>. Het volgende is fout:</p> - -<pre class="example-bad brush: html"><p>Mijn kat is <strong>heel chagrijnig.</p></strong></pre> - -<p>De elementen moeten op de juiste manier worden geopend en gesloten zodat ze duidelijk in of buiten elkaar bestaan. Als ze overlappen zoals hierboven, zal de webbrowser proberen te raden wat u wilt zeggen en dat kan heel onverwachte resultaten opleveren. Doe dat dus niet!</p> - -<h3 id="Lege_elementen">Lege elementen</h3> - -<p>Sommige elementen hebben geen inhoud en worden <strong>lege elementen</strong> genoemd. Het {{htmlelement("img")}}-element bijvoorbeeld, die al in onze HTML zit, is zo'n leeg element:</p> - -<pre class="brush: html"><img src="images/firefox-icon.png" alt="My test image"></pre> - -<p>Dit element bevat twee attributen, maar er is geen <code></img></code> die het element afsluit en ook geen inhoud in het element. Het img-element sluit namelijk geen inhoud in om er vervolgens effect op te hebben. Het doel van dit element is om een afbeelding in de HTML-pagina in te bedden op de plaats van het < /img>-element. </p> - -<h3 id="Anatomie_van_een_HTML-document">Anatomie van een HTML-document</h3> - -<p>Daarmee kunnen we onze inleiding op individuele HTML-elementen afsluiten, maar ze zijn op zichzelf niet erg nuttig. Nu gaan we bekijken hoe individuele elementen gecombineerd worden om een volledige HTML-pagina te vormen. We gaan de code bekijken die we in ons <code>index.html-</code>voorbeeld hebben gestoken (we hebben die voor het eerst gebruikt in <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Omgaan met Bestanden</a>):</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Mijn testpagina</title> - </head> - <body> - <img src="images/firefox-icon.png" alt="Mijn testafbeelding"> - </body> -</html></pre> - -<p>Wat zit er in die pagina ?</p> - -<ul> - <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. 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. Voorlopig is dat alles dat u moet weten.</li> - <li><code><html></html></code> — Het <code><html></code>-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 u in uw HTML-pagina wilt steken, maar die niet tot de inhoud behoren die u aan de gebruikers wilt tonen als die uw pagina lezen. Dit houdt zaken in zoals {{Glossary("sleutelwoord", "sleutelwoorden")}}, een beschrijving van uw pagina zoals u die in zoekresultaten wilt zien verschijnen, CSS om uw inhoud van stijlen te voorzien, tekensetverklaringen en meer.</li> - <li><code><body></body></code> — Het<code><body></code>-element bevat de volledige inhoud die u aan webgebruikers wilt tonen als die uw pagina bezoeken, of het nu tekst is, afbeeldingen, videos, spelletjes, afspeelbare audiosporen (i.e. audio tracks) of wat dan ook.</li> - <li><code><meta charset="utf-8"></code> — Met dit element bepaalt u dat de tekenset voor uw 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 het nu elke tekstinhoud aankan, die u erin zou willen steken. Er is geen reden om utf-8 niet aan charset toe te wijzen en het kan u helpen om later problemen te vermijden. </li> - <li><code><title></title></code> — Dit element stelt de titel van uw pagina in. Dat is de titel die in het browsertabblad verschijnt waarin uw pagina wordt geladen en die wordt gebruikt om de pagina te beschrijven als u hem als bladwijzer/favoriet instelt.</li> -</ul> - -<h2 id="Afbeeldingen">Afbeeldingen</h2> - -<p>Nu willen we onze aandacht op het afbeeldingselement vestigen:</p> - -<pre class="brush: html"><img src="images/firefox-icon.png" alt="My test image"></pre> - -<p>Zoals we al hebben gezegd, kunnen we met dit element een afbeelding in onze pagina inbedden. We doen dat met het <code>src-attribuut</code> (src = source en source betekent bron). Dit attribuut bevat het pad naar ons afbeeldingsbestand.</p> - -<p>We hebben ook een alt-attribuut toegevoegd. (alt = alternative, alternatief in het Nederlands). Met dit attribuut kunt u een beschrijving aan uw afbeelding geven voor tekstgebruikers die de afbeelding niet kunnen zien. Dat kan zijn omdat :</p> - -<ol> - <li>Ze visueel beperkt zijn. Gebruikers met ernstig visuele beperkingen gebruiken vaak Screen Reader software die de alt-tekst aan hen voorleest. </li> - <li>Er is iets misgegaan en het beeld kan niet worden weergegeven. Probeer bijvoorbeeld eens opzettelijk het pad in uw src-attribuut te veranderen zodat het niet langer correct is. Als u uw HTML-bestand opslaat en uw pagina herlaadt, zult u in plaats van de afbeelding een of andere tekst zoals hieronder zien:</li> -</ol> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p> - -<p>De sleutelwoorden met betrekking tot alt-tekst zijn "beschrijvende tekst". Met de alt-tekst die u schrijft, zou de lezer zich een goed beeld moeten kunnen vormen van wat de afbeelding nu eigenlijk afbeeldt. De tekst van ons voorbeeld hierboven "Mijn testafbeelding" is echt niet goed genoeg. Een veel beter alternatief voor ons Firefox logo zou zijn: "Het Firefox logo: een brandende vos die de aarde omringt."</p> - -<p><strong>Probeer nu een betere alt-tekst te bedenken voor uw afbeelding.</strong></p> - -<div class="note"> -<p><span style="font-size: 14px;"><strong>Opmerking</strong></span>: Ontdek meer over toegankelijkheid op <a href="/en-US/docs/Web/Accessibility">MDN's Accessibility landing page</a>.</p> -</div> - -<h2 id="Tekst_Opmaken">Tekst Opmaken</h2> - -<p>In dit deel bespreken we een aantal standaard HTML-elementen, die we gebruiken om tekst op te maken.</p> - -<h3 id="Hoofdingen">Hoofdingen</h3> - -<p>Met hoofdingen of kopelementen kunt u bepaalde delen van uw inhoud als kop of hoofding opmaken. Net zoals een boek een titel heeft en zijn hoofdstukken titels en ondertitels, heeft een HTML-pagina die ook. HTML bevat zes niveaus voor koppen {{htmlelement("h1")}}–{{htmlelement("h6")}} hoewel u er meestal slechts drie of vier zult gebruiken.</p> - -<pre class="brush: html"><h1>De titel van mijn artikel</h1> -<h2>De titel van een hoofdstuk in mijn artikel</h2> -<h3>Mijn ondertitel</h3> -<h4>De ondertitel die onder mijn ondertitel staat</h4></pre> - -<p>Probeer nu een geschikte titel aan uw HTML-pagina toe te voegen en plaats hem net boven uw {{htmlelement("img")}}-element.</p> - -<h3 id="Paragrafen">Paragrafen</h3> - -<p>Zoals hierboven is uitgelegd dienen {{htmlelement("p")}}-elementen als containers voor paragrafen. U zult ze regelmatig gebruiken als u gewone tekstinhoud opmaakt:</p> - -<pre class="brush: html"><p>Dit is een enkele paragraaf.</p></pre> - -<p><strong>Voeg uw voorbeeldtekst toe (die zou u al moeten opgesteld hebben in <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like"><em>Hoe gaat uw website eruitzien?</em></a>) in een paar paragrafen die u direct onder uw <img>-element plaatst.</strong></p> - -<h3 id="Lijsten">Lijsten</h3> - -<p>Veel webinhoud bestaat uit lijsten en HTML heeft er speciale elementen voor. De opmaak van een lijst bestaat altijd uit twee elementen. De gebruikelijkste lijsttypes zijn geordende en ongeordende lijsten:</p> - -<ol> - <li><strong>Ongeordende lijsten</strong> zijn lijsten waarbij de volgorde van de artikelen in de lijst er niet toe doet, zoals een boodschappenlijst. Deze worden ingesloten in een {{htmlelement("ul")}}-element.</li> - <li><strong>Geordende lijsten</strong> zijn lijsten waarbij de volgorde van de artikelen of onderwerpen in de lijst er wel degelijk toe doet, zoals een recept. Deze worden ingesloten door een {{htmlelement("ol")}}-element.</li> -</ol> - -<p>Elk artikel of onderwerp in de lijsten wordt ingebed in een {{htmlelement("li")}}-element.</p> - -<p>Als we bijvoorbeeld een deel van de volgende paragraaf in een lijst zouden willen veranderen,</p> - -<pre class="brush: html"><p>Bij Mozilla, zijn we een globale gemeentschap van technici, denkers en bouwers die met elkaar samenwerken... </p></pre> - -<p>zouden we de opmaak op deze manier kunnen veranderen:</p> - -<pre class="brush: html"><p>Bij Mozilla, zijn we een globale gemeenschap van</p> - -<ul> - <li>technici</li> - <li>denkers</li> - <li>bouwers</li> -</ul> - -<p>die met elkaar samenwerken ... </p></pre> - -<p><strong>Voeg een ongeordende en een geordende lijst toe aan uw voorbeeldpagina.</strong></p> - -<h2 id="Hyperlinks">Hyperlinks</h2> - -<p>Hyperlinks zijn zeer belangrijk — zij zijn wat het web EEN WEB maakt. Om een hyperlink toe te voegen, moeten we een eenvoudig element gebruiken — {{htmlelement("a")}} — de <em>a</em> staat voor "anker". Om een stuk tekst van uw paragraaf in een link te veranderen, volgt u deze stappen :</p> - -<ol> - <li>Kies een stuk tekst. Wij kozen de tekst "Mozilla Manifesto".</li> - <li>Sluit de tekst in een <a>-element in, zoals dit: - <pre class="brush: html"><a>Mozilla Manifesto</a></pre> - </li> - <li>Geef het <a>-element een attribuut en doe dat op deze manier: - <pre class="brush: html"><a href="">Mozilla Manifesto</a></pre> - </li> - <li>De waarde van het attribuut wordt het webadres waarmee u de hyperlink wilt verbinden.:</li> - <li> - <pre class="brush: html"><a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a></pre> - </li> -</ol> - -<p>U zou onverwachte resultaten kunnen krijgen als u <code>https://</code> of <code>http://</code> zou weglaten. Dit deel noemen we het <em>protocol </em>en het staat aan het begin van het webadres. Nadat u de hyperlink hebt gemaakt, klikt u erop zodat u er zeker van bent dat hij u brengt naar waar u heen wilt.</p> - -<div class="note"> -<p>Op het eerste zicht ziet <code>href</code> er misschien als een nogal obscure naam voor een attribuut uit. Als u moeite hebt om u zich de naam te herinneren, denk er dan aan dat href een afkorting is voor <em><strong>h</strong>ypertext <strong>ref</strong>erence </em>(hypertekst verwijzing in het Nederlands).</p> -</div> - -<p><strong>Voeg een link aan uw pagina toe, als u dat nog niet hebt gedaan.</strong></p> - -<h2 id="Conclusie">Conclusie</h2> - -<p>Als u alle instructies in dit artikel hebt opgevolgd, zou u nu een pagina moeten hebben die er ongeveer uitziet zoals de pagina hieronder. (<a href="http://mdn.github.io/beginner-html-site/">u kunt die ook hier zien</a>):<br> - <br> - <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p> - -<p>Als u vast komt te zitten, kunt u uw werk nog altijd met ons <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">voltooide voorbeeld</a> vergelijken op Github.</p> - -<p>Eigenlijk hebben we hier enkel een fractie van de mogelijkheden gezien die HTML biedt. Om meer te ontdekken, gaat u naar <a href="/en-US/Learn/HTML">HTML-Structuring the Web</a>.</p> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/nl/learn/getting_started_with_the_web/index.html b/files/nl/learn/getting_started_with_the_web/index.html deleted file mode 100644 index 16a3d8e05a..0000000000 --- a/files/nl/learn/getting_started_with_the_web/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Van start met het web -slug: Learn/Getting_started_with_the_web -tags: - - Beginner - - CSS - - Design - - Guide - - HTML - - Index - - publishing - - theory -translation_of: Learn/Getting_started_with_the_web ---- -<p>{{LearnSidebar}}</p> - -<p>{{NextMenu("Learn/Getting_started_with_the_web/Installing_basic_software")}}</p> - -<div class="summary"> -<p><em>Van start met het Web</em> is een beknopte reeks die u laat kennismaken met de praktische aspecten van webontwikkeling. U zult de hulpmiddelen opzetten die u nodig hebt om een eenvoudige webpagina te maken en uw eigen eenvoudige code te publiceren.</p> -</div> - -<h2 id="Het_verhaal_van_uw_eerste_website">Het verhaal van uw eerste website</h2> - -<p>Er steekt veel werk in een professionele website, dus als u nog niet veel over webontwikkeling weet, adviseren we u om klein te beginnen. U zult niet onmiddellijk een nieuwe Facebook maken, maar het is niet moeilijk om uw eigen eenvoudige website online te krijgen, dus zullen we daarmee beginnen.</p> - -<p>Als u de artikelen hieronder volledig doorwerkt, zult u van nul kennis kunnen doorgroeien tot u uw eerste webpagina online hebt gezet. Laten we beginnen!</p> - -<h3 id="Basissoftware_installeren"><a href="https://developer.mozilla.org/nl/docs/Learn/Getting_started_with_the_web/Basis_software_installeren">Basissoftware installeren</a></h3> - -<p>Op het vlak van hulpmiddelen is er voor de bouw van een website veel keuze. Als u net start, zou u in de war kunnen raken door de vele code-editors, frameworks en testsoftware die er bestaan. In <a href="https://developer.mozilla.org/nl/docs/Learn/Getting_started_with_the_web/Basis_software_installeren">Basissoftware installeren</a> tonen we u stap voor stap hoe u enkel die software installeert die u nodig hebt om te starten met webontwikkeling.</p> - -<h3 id="Hoe_gaat_uw_website_eruitzien"><a href="/en-US/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Hoe gaat uw website eruitzien?</a></h3> - -<p>Voor u de code voor uw website begint te schrijven, moet u eerst plannen. Welke informatie gaat u tonen? Welke lettertypes en kleuren gaat u gebruiken? In <a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">Hoe gaat uw website eruitzien?</a> geven we u een eenvoudige methode die u kunt volgen om de inhoud en het design van uw website te plannen.</p> - -<h3 id="Omgaan_met_bestanden"><a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Omgaan met bestanden</a></h3> - -<p>Een website bestaat uit veel bestanden: tekstinhoud, code, stijlbestanden, media-inhoud enzovoort. Wanneer u een website bouwt, moet u deze bestanden samenvoegen in een doordachte structuur en ervoor zorgen dat ze met elkaar kunnen communiceren. <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Omgaan met bestanden</a> legt uit hoe u een doordachte bestandsstructuur maakt voor uw website en van welke problemen u zich bewust moet zijn.</p> - -<h3 id="De_basisbegrippen_van_HTML"><a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">De basisbegrippen van HTML</a></h3> - -<p>Hypertext Markup Language (HTML) (Nederlands: <em>opmaaktaal voor </em><em>gelinkte tekst</em>) is de code die u gebruikt om uw webinhoud te structureren en er een betekenis en doel aan te geven. Bijvoorbeeld: bestaat de inhoud uit een aantal paragrafen of een lijst met een aantal punten? Staan er afbeeldingen op mijn pagina? Heb ik een datatabel? Zonder u te overdonderen geeft <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">De basisbegrippen van HTML</a> u genoeg informatie om u vertrouwd te maken met HTML.</p> - -<h3 id="De_basisbegrippen_van_CSS"><a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">De basisbegrippen van CSS</a></h3> - -<p>Cascading Stylesheets (CSS) (Nederlands: <em>waterval-stijlbestanden</em>) is de code waarmee u beslist hoe uw website eruit zal zien. Wil u bijvoorbeeld rode of zwarte tekst? Waar op het scherm moet de inhoud staan? Welke achtergrondafbeeldingen en kleuren moeten worden gebruikt om uw website te verfraaien? <a href="/en-US/Learn/Getting_started_with_the_web/CSS_basics">De basisbegrippen van CSS</a> geeft u de informatie om van start te gaan.</p> - -<h3 id="De_basisbegrippen_van_JavaScript"><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">De basisbegrippen van JavaScript</a></h3> - -<p>JavaScript is de programmeertaal die u gebruikt om interactieve functionaliteit aan uw website toe te voegen zoals games, dingen die gebeuren wanneer knoppen worden ingedrukt, data die wordt ingevuld in formulieren, dynamische stijleffecten, animaties en nog veel meer. <a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">De basisbegrippen van JavaScript</a> geeft u een idee van wat mogelijk is met deze interessante taal en hoe u ermee start.</p> - -<h3 id="Uw_website_publiceren"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Uw website publiceren</a></h3> - -<p>Eens u klaar bent met uw code en de organisatie van de bestanden waaruit uw website bestaat, moet u alles online zetten zodat mensen de website kunnen vinden. <a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Uw website publiceren</a> beschrijft hoe u uw voorbeeldcode online krijgt met een minimale inspanning.</p> - -<h3 id="Hoe_werkt_het_web"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Hoe werkt het web?</a></h3> - -<p>Wanneer u uw favoriete website bezoekt, gebeuren er heel wat ingewikkelde dingen in de achtergrond waar u misschien nog niets over weet. <a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Hoe werkt het web? </a> behandelt in grote lijnen wat er gebeurt als u een webpagina bekijkt op uw computer.</p> - -<p>{{NextMenu("Learn/Getting_started_with_the_web/Installing_basic_software")}}</p> diff --git a/files/nl/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/nl/learn/getting_started_with_the_web/installing_basic_software/index.html deleted file mode 100644 index d88e72cdd4..0000000000 --- a/files/nl/learn/getting_started_with_the_web/installing_basic_software/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Basissoftware installeren -slug: Learn/Getting_started_with_the_web/Installing_basic_software -tags: - - Beginner - - Browser - - Gereedschap - - Leren - - Setup - - WebMechanics - - tekstverwerker -translation_of: Learn/Getting_started_with_the_web/Installing_basic_software -original_slug: Learn/Getting_started_with_the_web/Basis_software_installeren ---- -<div>{{LearnSidebar}}</div> - -<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p>In <em>Basissoftware installeren</em> gaan we u laten zien welke gereedschappen u nodig hebt om eenvoudige websites te maken en hoe u deze gereedschappen correct kunt installeren.</p> -</div> - -<h2 id="Welke_gereedschappen_gebruiken_de_professionals">Welke gereedschappen gebruiken de professionals?</h2> - -<ul> - <li><strong>Een computer -</strong> Dit klinkt logisch voor de meeste mensen, maar sommige mensen lezen dit artikel op een smartphone of een computer in de bibliotheek. Voor serieuze webontwikkeling is het beter om te investeren in een desktop-computer (Windows, Mac of Linux).</li> - <li><strong>Een broncodeverwerker </strong>(noemen we ook een tekstverwerker)<strong> - </strong>Dit kan een gratis broncodeverwerker zijn (bijvoorbeeld: <a href="http://notepad-plus-plus.org/">Notepad++</a>, <a href="https://wiki.gnome.org/Apps/Gedit">gedit</a>, <a href="http://brackets.io/">Brackets</a>, <a href="https://atom.io/">Atom</a> of <a href="http://www.barebones.com/products/textwrangler/">Text Wrangler</a>), een commerciële tekstverwerker (<a href="http://www.sublimetext.com/">Sublime Text</a> of <a href="https://panic.com/coda/">Coda</a>) of een hybride tekstverwerker (<a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a>).</li> - <li><strong>Webbrowsers</strong> voor het testen van uw code. De meest gebruikte browsers van dit moment zijn <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, en <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a>. U moet hierbij ook rekening houden met de prestaties van uw site op mobiele toestellen en oudere browsers waar uw doelpubliek misschien nog gebruik van maakt (zoals IE 6-8.)</li> - <li><strong>Een grafische editor</strong>, zoals <a href="http://www.gimp.org/">GIMP</a>, <a href="http://www.getpaint.net/">Paint.NET</a> of <a href="https://www.adobe.com/products/photoshop.html">Photoshop</a> om afbeeldingen te maken voor uw webpagina's.</li> - <li><strong>Een versiebeheersysteem </strong>- Hiermee kunt u uw bestanden beheren, samenwerken met een team, uw code en hulpprogramma's delen en bewerkingsconflicten voorkomen. Momenteel is <a href="http://git-scm.com/">Git</a> het populairste versiebeheersysteem. <a href="https://github.com/">GitHub, </a>de hostingdienst voor code en die is gebaseerd op Git, is ook heel populair.</li> - <li><strong>Een FTP-programma</strong> - Op oudere webhosting accounts wordt het gebruikt om de bestanden op servers te beheren (Hiervoor is <a href="http://git-scm.com/">Git</a> FTP meer en meer aan het vervangen). Het wordt gebruikt om webpagina's te uploaden naar een server. Er zijn veel programma's beschikbaar zoals onder andere <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a>, en <a href="https://filezilla-project.org/">FileZilla</a>.</li> - <li><strong>Een automatiseringssysteem</strong>, zoals <a href="http://gruntjs.com/">Grunt</a> of <a href="http://gulpjs.com/">Gulp</a>, dat repititieve opdrachten automatisch uitvoert, voor bijvoorbeeld het minimaliseren van code en om code te testen.</li> - <li>Sjablonen, bibliotheken, frameworks, etc., waarmee u allerlei functionaliteit die u vaak gebruikt, veel sneller kunt schrijven.</li> - <li>En nog zoveel meer!</li> -</ul> - -<h2 id="Welke_gereedschappen_heb_ik_nu_nodig">Welke gereedschappen heb ik nu nodig?</h2> - -<p>Het is een akelige lijst, maar gelukkig kunt u al met webontwikkeling beginnen zonder al te veel kennis over dit gereedschap. In dit artikel gaan we de minimale benodigdheden installeren: een tekstverwerker en een paar moderne webbrowsers.</p> - -<h3 id="Een_tekstverwerker_installeren">Een tekstverwerker installeren</h3> - -<p>Waarschijnlijk hebt u al een eenvoudige tekstverwerker op uw computer. Windows bevat standaard <a href="https://en.wikipedia.org/wiki/Microsoft_Notepad">Notepad</a> en OS X heeft <a href="https://en.wikipedia.org/wiki/TextEdit">TextEdit</a>. Linux verschilt per distro; <a href="https://en.wikipedia.org/wiki/Gedit">gedit</a> wordt standaard met Ubuntu geïnstalleerd.</p> - -<p>Voor webontwikkeling, kunt u wel een beter programma gebruiken dan Notepad of TextEdit. Wij raden beginners <a href="http://brackets.io">Brackets</a> aan, een gratis editor met een live voorbeeldmodus en hints voor de code.</p> - -<h3 id="Moderne_webbrowsers_installeren">Moderne webbrowsers installeren</h3> - -<p>We beginnen met de installatie van een paar webbrowsers op uw desktop waarmee we onze code kunnen uittesten. Kies uw besturingssysteem hieronder en klik op de relevante links om de installatieprogramma's van uw favoriete browsers te downloaden :</p> - -<ul> - <li>Linux: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>.</li> - <li>Windows: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> (Als u Windows 8 of hoger gebruikt, kunt u IE 10 of hoger installeren; anders, kunt u het beste een alternatieve browser installeren)</li> - <li>Mac: <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a> (Safari komt standaard met iOS en OS X)</li> -</ul> - -<p>Voor u verder gaat, zou u op zijn minst twee van deze browsers geïnstalleerd moeten hebben om de code mee te testen.</p> - -<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/nl/learn/getting_started_with_the_web/javascript_basics/index.html b/files/nl/learn/getting_started_with_the_web/javascript_basics/index.html deleted file mode 100644 index 8c3217c0fb..0000000000 --- a/files/nl/learn/getting_started_with_the_web/javascript_basics/index.html +++ /dev/null @@ -1,398 +0,0 @@ ---- -title: De basisbegrippen van Javascript -slug: Learn/Getting_started_with_the_web/JavaScript_basics -tags: - - Beginner - - CodingScripting - - JavaScript - - Leren - - Web -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics ---- -<div>{{LearnSidebar}}</div> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website")}}</p> - -<div class="summary"> -<p>Javascript is een programmeertaal die interactiviteit aan uw website toevoegt (bijvoorbeeld: spelletjes, een actie die in gang wordt gezet als u op een knop drukt, data die via formulieren wordt verwerkt, dynamisch toegepaste stijlen, animaties). Dit artikel helpt u om met deze taal te beginnen en geeft u een idee van wat de mogelijkheden zijn.</p> -</div> - -<h2 id="Wat_is_JavaScript_eigenlijk_echt">Wat is JavaScript eigenlijk echt?</h2> - -<p>{{Glossary("JavaScript")}} ("JS" afgekort) is een volwaardige dynamische programmeertaal die u kunt toepassen op een {{Glossary("HTML")}} document om interactie mogelijk te maken. Het is bedacht door Brendan Eich, mede-oprichter van het Mozilla project, de Mozilla foundation, en de Mozilla corporation.</p> - -<p>U kunt zo'n beetje alles met JavaScript. U zult beginnen met simpele toevoegingen zoals carrousels, plaatjescollecties, veranderende layouts, en reacties als er op een knop wordt gedrukt. Als u wat meer ervaring met de taal hebt opgedaan, zult u in staat zijn spelletjes te maken, geanimeerde 2d- en 3d-afbeeldingen, volledige database gestuurde apps en nog veel meer!</p> - -<p>JavaScript zelf is vrij compact, maar erg flexibel. Ontwikkelaars hebben veel hulpmiddelen geschreven bovenop de bestaande kern, waardoor een enorme hoeveelheid extra functionaliteit mogelijk is met relatief weinig moeite. Om er een paar te noemen:</p> - -<ul> - <li>Application Programming Interfaces ({{Glossary("API","APIs")}}) die in webbrowsers ingebouwd zijn. Ze kunnen webpagina's maken, CSS-stijlen genereren, een videostream van de gebruikers' webcam onderscheppen en manipuleren of audio samples en 3d-afbeeldingen creëren.</li> - <li> APIs van derden die het ontwikkelaars mogelijk maken om de functionaliteit van bijv. Facebook of Twitter toe te voegen.</li> - <li> Frameworks (kader of structuur in het Nederlands) en bibliotheken die u op uw HTML kunt toepassen om snel sites en applicaties op te zetten.</li> -</ul> - -<h2 id="Een_hallo_wereld-voorbeeld">Een "hallo wereld"-voorbeeld</h2> - -<p>De mogelijkheden hierboven klinken echt opwindend en dat is het ook - JavaScript is een van de meest levendige webtechnologieën van het moment. Zodra u er wat beter in wordt, zullen uw sites een nieuwe dimensie van kracht en creativiteit betreden.</p> - -<p>Niettemin is JS wat lastiger onder de knie te krijgen dan HTML en CSS. U moet klein beginnen en er met kleine stapjes aan blijven werken. Om te beginnen laten we zien hoe u wat standaard JS aan uw pagina kunt toevoegen om een "<em>hallo wereld!</em>"-voorbeeld te maken.(<a href="https://nl.wikipedia.org/wiki/Hello_world_(programma)">het standaardvoorbeeld in programmeertalen</a>).</p> - -<div class="warning"> -<p><strong>Belangrijk</strong>: Wanneer u de rest van deze cursus nog niet gevolgd hebt, <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">download dan deze voorbeeldcode </a>en gebruik het als uitgangspunt. Bekijk de pagina in uw browser voordat u verder gaat.</p> -</div> - -<ol> - <li>Ga naar de scriptsmap van uw testsite en maak een nieuw bestand dat uw <code>main.js</code>. noemt. Sla het op in uw scriptsmap. </li> - <li>Open nu <code>index.html</code> met een broncode-editor en voeg het volgende element toe op een nieuwe regel net voor het sluitende <code></body></code>-label: - <pre class="brush: html"><script src="scripts/main.js"></script></pre> - </li> - <li>Dit scriptelement doet feitelijk hetzelfde als het {{htmlelement("link")}}-element voor CSS — het past het JS toe op de pagina zodat het een effect kan hebben op de HTML (en CSS, en al het andere op de pagina)</li> - <li>Voeg nu de volgende code toe aan uw <code>main.js</code>-bestand: - <pre class="brush: js">var mijnHoofding = document.querySelector('h1'); -mijnHoofding.textContent = 'Hallo wereld!';</pre> - </li> - <li>Tot slot zorgt u ervoor dat uw HTML- en JavaScriptbestanden opgeslagen zijn en laadt u <code>index.html</code> in de browser. U zou iets dergelijks moeten zien:<img alt="" src="https://mdn.mozillademos.org/files/9543/hello-world.png" style="display: block; height: 236px; margin: 0px auto; width: 806px;"></li> -</ol> - -<div class="note"> -<p><strong>Opmerking</strong>: We hebben het {{htmlelement("script")}}-element onderaan het HTML-bestand gezet en daar is een goede reden voor. De HTML wordt namelijk in de browser geladen in de volgorde waarin die is geschreven. Als het script eerst wordt geladen en de HTML eronder moet beïnvloeden, zou dat niet kunnen werken, omdat er nog geen HTML is geladen waarop het script zijn invloed kan uitoefenen. Daarom is het vaak de beste strategie om uw script onder de HTML te plaatsen.</p> -</div> - -<h3 id="Wat_is_er_gebeurd">Wat is er gebeurd?</h3> - -<p>Uw koptekst is nu veranderd in "Hallo wereld!" met behulp van JavaScript. Dit deed u door een functie te gebruikten die {{domxref("Document.querySelector", "querySelector()")}} heet. Met deze functie kunt u de verwijzing naar de koptekst (h1) grijpen en opslaan in een variabele (<code>mijnHoofding)</code>. Dit lijkt sterk op wat CSS doet met selectoren. Als u iets met een element op uw pagina wilt doen, zult u het eerst moeten selecteren en opslaan in een variabele.</p> - -<p>Vervolgens verandert u de waarde van de {{domxref("Node.textContent", "textContent")}}-eigenschap van <code>mijnHoofding</code> in "Hallo wereld!" (met textContent kunt u de tekstinhoud van de hoofding (h1) veranderen).</p> - -<div class="note"> -<p><strong>Opmerking</strong>: De twee functies die u hierboven hebt gebruikt vormen beide een onderdeel van het <a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM) API</a>, dat het mogelijk maakt om documenten te manipuleren.</p> -</div> - -<h2 id="Stoomcursus_basisbegrippen_JS">Stoomcursus basisbegrippen JS</h2> - -<p>We gaan u een paar basiseigenschappen van de Javascript-taal uitleggen zodat u beter begrijpt hoe alles werkt. Sterker nog, deze begrippen worden standaard in alle programmeertalen gebruikt. Als u deze basis begrijpt, zou u in staat moeten zijn om ongeveer alles te programmeren! </p> - -<div class="warning"> -<p><span style="font-size: 14px;"><strong>Belangrijk</strong></span>: Probeer de voorbeeldcodes in dit artikel uit in uw Javascript-console om te zien wat er gebeurt. Meer details over JavaScript-consoles vindt u in <a href="/en-US/Learn/Discover_browser_developer_tools">Discover browser developer tools</a>.</p> -</div> - -<h3 id="Variabelen">Variabelen</h3> - -<p>{{Glossary("Variable", "Variabelen")}} zijn containers waarin u waarden kunt bewaren. U begint door uw variabele te declareren met het <code>var</code>-sleutelwoord. Dat wordt dan gevolgd door de naam die u aan uw variabele geeft. U kunt zelf kiezen welke:</p> - -<pre class="brush: js">var mijnVariabele;</pre> - -<div class="note"> -<p><strong>Opmerking</strong>: Alle verklaringen in JavaScript moeten op een puntkomma eindigen, om aan te duiden waar de verklaring eindigt. Als u er geen puntkomma's in plaatst, kunt u onverwachte resultaten krijgen.</p> -</div> - -<div class="note"> -<p><strong>Opmerking</strong>: U kunt een variabele bijna elke naam geven die u kunt bedenken, maar er zijn toch een paar beperkingen (meer daarover in <a href="http://javascript.divendo-webs.com/hoofdstuk_4.php">dit artikel over naamgevingsregels voor variabelen</a>). Als u er niet zeker van bent, kan u <a href="https://mothereff.in/js-variables">de naam van uw variabele hier controleren</a> om te zien of hij geldig is.</p> -</div> - -<div class="note"> -<p><strong>Opmerking</strong>: JavaScript is hoofdlettergevoelig — <code>mijnVariabele</code> is niet dezelfde variabele als <code>mijnvariable</code>. Als u problemen krijgt in uw code, controleer dan uw hoofdletters! </p> -</div> - -<p>Nadat u een variabele hebt gedeclareerd, kunt u hem een waarde geven:</p> - -<pre class="brush: js">mijnVariabele = 'Bob';</pre> - -<p>Als u dat wenst, kunt u deze twee operaties op dezelfde lijn uitvoeren:</p> - -<pre class="brush: js">var mijnVariabele = 'Bob';</pre> - -<p>U kunt de waarde van de variabele ophalen door de naam van de variabele te noteren en op 'Enter' te drukken:</p> - -<pre class="brush: js">mijnVariabele;</pre> - -<p>Nadat u de variabele een waarde hebt gegeven, kunt u er later voor kiezen die te veranderen:</p> - -<pre>var mijnVariabele = 'Bob'; -mijnVariabele = 'Steven';</pre> - -<p>Let op het feit dat variabelen verschillende <a href="/en-US/docs/Web/JavaScript/Data_structures">datatypes</a> hebben:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="row">Variabele</th> - <th scope="col">Verklaring</th> - <th scope="col">Voorbeeld</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">{{Glossary("String")}}</th> - <td>Een string is wat als tekst geldt. Om aan te duiden dat de variabele een string is, moet u die tussen aanhalingstekens zetten.</td> - <td><code>var mijnVariabele = 'Bob';</code></td> - </tr> - <tr> - <th scope="row">{{Glossary("Nummer")}}</th> - <td>Een nummer. Nummers worden niet omringd door aanhalingstekens .</td> - <td><code>var mijnVariable = 10;</code></td> - </tr> - <tr> - <th scope="row">{{Glossary("Boolean")}}</th> - <td>Een waarde die waar (true) of niet waar(false) is. De woorden <code>true</code> en <code>false</code> zijn speciale sleutelwoorden in JS en hebben geen aanhalingstekens nodig.</td> - <td><code>var mijnVariable = true;</code></td> - </tr> - <tr> - <th scope="row">{{Glossary("Array")}}</th> - <td>Een structuur die u toestaat om meerdere waarden in in één enkele referentie op te slaan (een lijst).</td> - <td><code>var mijnVariabele = [1,'Bob','Steven',10];</code><br> - Verwijs naar elk lid van de array op deze manier:<br> - <code>mijnVariabele[0]</code>, <code>mijnVariabele[1]</code>, etc.</td> - </tr> - <tr> - <th scope="row">{{Glossary("Object")}}</th> - <td>In feite, eender wat. Alles in JavaScript is een object en kan worden opgeslagen in een variabele. Houd er rekening mee terwijl u leert. </td> - <td><code>var mijnVariable = document.querySelector('h1');</code><br> - Alle voorbeelden hierboven ook.</td> - </tr> - </tbody> -</table> - -<p>Dus waarom hebt u variabelen nodig? Variabelen zijn nodig om alles wat interessant is mogelijk te maken in het programmeren. Als waarden niet zouden kunnen veranderen, dan zou u er niets dynamisch mee kunnen doen, zoals een welkomstboodschap personaliseren of een afbeelding in een beeldgallerij veranderen. </p> - -<h3 id="Commentaren">Commentaren</h3> - -<p>U kunt commentaren in uw JavaScript-code plaatsen, net zoals u dat in CSS kunt:</p> - -<pre class="brush: js">/* -Alles ertussen is een commentaar. -*/</pre> - -<p>Als uw commentaar geen regeleindes bevat, is het vaak makkelijker om die achter twee schuine streepjes te zetten:</p> - -<pre class="brush: js" style="font-size: 14px;">// Dit is een commentaar -</pre> - -<h3 id="Operatoren">Operatoren</h3> - -<p>Een {{Glossary("operator")}} is een mathematisch symbool dat een resultaat produceert. Dit resultaat is gebaseerd op twee waarden (of variabelen). In de volgende tabel kunt u een paar van de eenvoudigste operatoren zien, met een paar voorbeelden ernaast die u in uw Javascript-console kunt uitproberen.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="row">Operator</th> - <th scope="col">Verklaring</th> - <th scope="col">Symbo(o)l(en)</th> - <th scope="col">Voorbeeld</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">optellen/aaneenschakeling</th> - <td>Gebruiken we om twee nummers op te tellen of om twee strings (tekst dus) aan elkaar te plakken.</td> - <td><code>+</code></td> - <td><code>6 + 9;<br> - "Hallo " + "wereld!";</code></td> - </tr> - <tr> - <th scope="row">aftrekken, vermenigvuldigen, delen</th> - <td>Met deze variabelen kunt u rekenen.</td> - <td><code>-</code>, <code>*</code>, <code>/</code></td> - <td><code>9 - 3;<br> - 8 * 2; // vermenigvuldigen is een asterisk in JS<br> - 9 / 3;</code></td> - </tr> - <tr> - <th scope="row">toewijzingsoperator</th> - <td>Dit hebt u al gezien: het wijst een waarde toe aan een variabele.</td> - <td><code>=</code></td> - <td><code>var mijnVariabele = 'Bob';</code></td> - </tr> - <tr> - <th scope="row">vergelijkingsoperator </th> - <td>Doet een test om te zien of twee waarden gelijk zijn aan elkaar. Levert een <code>true</code>/<code>false</code> (Boolean) resultaat op. (<code>true </code>betekent waar en <code>false </code>niet waar. <code>True </code>en <code>false </code>zijn sleutelwoorden en worden dus in het Engels gebruikt.)</td> - <td><code>===</code></td> - <td><code>var mijnVariable = 3;<br> - myVariable === 4;</code></td> - </tr> - <tr> - <th scope="row">Negatie, niet gelijk aan</th> - <td>Levert de logisch tegenovergestelde waarde op van wat erop volgt. Het verandert een <code>true</code> in een <code>false</code> enz. Als het samen met de vergelijkingsoperator wordt gebruikt, test de negatieoperator of twee waarden <em>niet </em>gelijk zijn aan elkaar.</td> - <td><code>!</code>, <code>!==</code></td> - <td> - <p>De uitdrukking is waar, maar de vergelijking levert false op omdat we hem negatief hebben gemaakt. </p> - - <p><code>var mijnVariabele = 3;<br> - !(mijnVariabele === 3);</code></p> - - <p>Hier testen we of "<code>mijnVariable</code> NIET gelijk is aan 3". Dit levert <code>false</code> op omdat <code>mijnVariabele</code> wel degelijk gelijk is aan 3.</p> - - <p><code><code>var mijnVariable = 3;</code><br> - mijnVariable !== 3;</code></p> - </td> - </tr> - </tbody> -</table> - -<p>Er zijn nog veel meer operatoren te ondekken maar voorlopig is dit genoeg. U vindt een complete lijst in <a href="/en-US/docs/Web/JavaScript/Reference/Operators">Expressies en operators</a>.</p> - -<div class="note"> -<p><strong>Opmerking</strong>: Als u datatypes met elkaar vermengt, kunt u vreemde resultaten krijgen als u berekeningen doet. Wees dus voorzichtig en verwijs correct naar uw variabelen zodat u de resultaten krijgt die u verwacht. Voer bijvoorbeeld <code>"35" + "25"</code> in uw console in. Waarom ziet u niet het resultaat dat u verwacht? De aanhalingstekens veranderen de nummers in strings. U eindigt dus met aaneengeplakte strings in plaats van opgetelde nummers. Als u <code>35 + 25</code> invoert, zult u wel het correcte resultaat krijgen.</p> -</div> - -<h3 id="Voorwaarden">Voorwaarden</h3> - -<p>Voorwaarden (conditionals in het Engels) zijn codestructuren die ons toestaan te testen of een uitdrukking een true of false resultaat oplevert. We kunnen dan een andere code uitvoeren, afhankelijk van het resultaat. De vaakst voorkomende vorm die een voorwaarde aanneemt noemen we <code style="font-style: normal; font-weight: normal;">if ... else</code>. Dus bijvoorbeeld:</p> - -<pre class="brush: js">var roomIJs = 'chocolade'; -if (roomIJs === 'chocolade') { - alert('Oh, ik houd van chocolade roomijs!'); -} else { - alert('Awwww, maar chocolade is mijn favoriet...'); -}</pre> - -<p>De uitdrukking in de <code>if ( ... )</code> is de test — deze gebruikt de vergelijkingsoperator (zoals hierboven beschreven) om de variabele roomIJs met de string chocolade te vergelijken en vast te stellen of de twee gelijk zijn aan elkaar. Als deze vergelijking <code>true </code>oplevert, voert u het eerste codeblok uit. Zo niet, dan slaat u die code over en voert u het tweede codeblok uit dat na de <code>else</code>-verklaring staat.</p> - -<h3 id="Functies">Functies</h3> - -<p>{{Glossary("Function", "Functies")}} zijn een manier om functionaliteit te verpakken, die u opnieuw wilt gebruiken. Wanneer u de functie wilt gebruiken, kunt u die aanroepen met zijn naam en hoeft u niet constant de hele code te herschrijven. U hebt hierboven al een paar keer zo'n functie gebruikt. Bijvoorbeeld: </p> - -<ol> - <li> - <pre class="brush: js">var mijnVariable = document.querySelector('h1');</pre> - </li> - <li> - <pre class="brush: js">alert('hallo!');</pre> - </li> -</ol> - -<p>Deze functies, <code>document.querySelector</code> en <code>alert</code>, zijn in de browser ingebouwd. Ze zijn er voor u om te gebruiken wanneer u wilt. </p> - -<p>Als u iets ziet dat eruitziet als de naam van een variabele, maar met haakjes — <code>()</code> — erachter, dan is het waarschijnlijk een functie. Functies krijgen vaak {{Glossary("Argument", "argumenten")}} — stukjes data die ze nodig hebben om hun werk te doen. Deze staan tussen de haakjes. Als er meerdere zijn, worden ze met komma's van elkaar gescheiden.</p> - -<p>De <code>alert()</code>-functie bijvoorbeeld laat een pop-up-invoerveld in de browser verschijnen, maar we moeten de functie een string als argument geven om <code>alert()</code> te vertellen wat hij in het pop-up-invoerveld moet schrijven.</p> - -<p>Het goede nieuws is dat u uw eigen functies kan definiëren — in het volgende voorbeeld schrijven we een eenvoudige functie die twee nummers als argumenten krijgt en die de twee nummers vermenigvuldigt. Let er wel op dat we het Engelse <em>function </em>moeten schrijven, Javascript kent geen Nederlandse woorden, al kunt u ze wel Nederlandse namen geven.</p> - -<pre class="brush: js">function vermenigvuldigen(num1,num2) { - var resultaat = num1 * num2; - return resultaat; -}</pre> - -<p>Kopiëer de volgende functie in uw console en probeer dan de nieuwe functie een paar keer uit te voeren, bijvoorbeeld:</p> - -<pre class="brush: js">vermenigvuldigen(4,7); -vermenigvuldigen(20,20); -vermenigvuldigen(0.5,3);</pre> - -<div class="note"> -<p><strong>Opmerking</strong>: De <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code>-verklaring vertelt de browser dat hij de resultaatvariabele als opbrengst van de functie terug moet geven, zodat we die waarde ergens anders kunnen gebruiken.</p> - -<p>In het Nederlands betekent 'to return' terugkeren . In zekere zin doet de functie dat ook, want met 'return' verlaat u de functie. Het werkwoord heeft echter nog een tweede betekenis en die is 'opbrengen', 'opleveren' of 'teruggeven'.</p> - -<p>De resultaatwaarde is als het ware de winst van de functie. Dit is noodzakelijk, omdat variabelen die in functies worden gedefiniëerd enkel beschikbaar zijn binnen die functies. Dat noemen we het toepassingsgebied van de variable of 'variable {{Glossary("Scope", "scoping")}}' in het Engels. (Lees <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">meer over variable scoping</a>.)</p> -</div> - -<h3 id="Events">Events</h3> - -<p>Om echte interactiviteit op uw website te creëren hebt u gebeurtenissen nodig ('Events' in het Engels). Events zijn codestructuren die naar dingen luisteren die in de browser gebeuren en u dan toestaan om code uit te voeren als reactie op die dingen. Het meest voor de hand liggende voorbeeld is het <a href="/en-US/docs/Web/Events/click">klik-event</a>, dat wordt afgevuurd door de browser als uw muis ergens op klikt. Om dit te demonstreren kunt u het volgende in uw console invoeren en vervolgens op de webpagina in uw browser klikken:</p> - -<pre class="brush: js">document.querySelector('html').onclick = function() { - alert('Au! Houd op met me te porren!'); -}</pre> - -<p>Er zijn vele manieren om een event aan een element vast te maken. Hier selecteren we het HTML-element en dan zetten we zijn eigenschap '<code><a href="/en-US/docs/Web/API/GlobalEventHandlers.onclick">onclick</a></code> handler' (i.e. afhandelaar of manager) gelijk aan een anonieme (i.e. naamloze) functie die de code bevat die we willen uitvoeren als het klik-event gebeurt. </p> - -<p>Let wel op dat het volgende:</p> - -<pre class="brush: js">document.querySelector('html').onclick = function() {};</pre> - -<p>het equivalent is van:</p> - -<pre class="brush: js">var myHTML = document.querySelector('html'); -myHTML.onclick = function() {};</pre> - -<p>Het is gewoon wat korter.</p> - -<h2 id="We_gaan_onze_voorbeeldwebsite_wat_extra_vuurkracht_geven">We gaan onze voorbeeldwebsite wat extra vuurkracht geven</h2> - -<p>Nu we een paar basisbegrippen van Javascript hebben behandeld, kunnen we een paar coole basiseigenschappen aan onze voorbeeldsite toevoegen zodat u een idee krijgt van wat er zoal mogelijk is.</p> - -<h3 id="Een_afbeeldingswisselaar_toevoegen">Een afbeeldingswisselaar toevoegen </h3> - -<p>In dit gedeelte gaan we nog een afbeelding en wat eenvoudige Javascript aan onze website toevoegen. Met JS gaan we ervoor zorgen dat de twee afbeeldingen elkaar afwisselen als er op de afbeelding wordt geklikt. </p> - -<ol> - <li>Zoek eerst nog een afbeelding die u graag op uw website zou willen zien. Zorg ervoor dat de afbeelding ongeveer dezelfde grootte heeft als uw eerste afbeelding.</li> - <li>Sla de afbeelding op in uw afbeeldingenmap.</li> - <li>Ga naar uw <code>main.js</code>-bestand en voer de volgende Javascriptcode in (Als uw "hallo wereld!"-code er nog steeds in zit, verwijder die dan). - <pre class="brush: js">var mijnAfbeelding = document.querySelector('img'); - -mijnAfbeelding.onclick = function() { - var mijnSrc = mijnAfbeelding.getAttribute('src'); - if(mijnSrc === 'afbeeldingen/firefox-icon.png') { - mijnAfbeelding.setAttribute ('src','afbeeldingen/firefox2.png'); - } else { - mijnAfbeelding.setAttribute ('src','afbeeldingen/firefox-icon.png'); - } -}</pre> - </li> - <li>Sla al uw bestanden op en laad <code>index.html</code> in de browser. Als u nu op de afbeelding klikt, zou die in de andere moeten veranderen!</li> -</ol> - -<p>Wat doen we in deze code? We slaan een verwijzing naar ons afbeeldingselement in de mijnAfbeelding-variabele op. Daarna, zetten we de onclick-event-handler van de variabele gelijk aan een anonieme functie (eentje zonder naam dus). Telkens als er nu op de afbeelding wordt geklikt, worden de volgende taken uitgevoerd:</p> - -<ol> - <li>We halen de waarde van het src-attribuut van de afbeelding op.</li> - <li>We gebruiken een voorwaarde om te controleren of de <code>src</code>-waarde gelijk is aan het pad naar de originele afbeelding: - <ol> - <li>Als dat zo is, veranderen we de <code>src</code>-waarde in het pad naar de tweede afbeelding en zo wordt de tweede afbeelding in het {{htmlelement("image")}}-element geladen.</li> - <li>Als dat niet zo is, wat wil zeggen dat de afbeelding al is veranderd, veranderen we de <code>src-</code>waarde terug in het originele pad van de eerste afbeelding, zodat de eerste afbeelding opnieuw te zien is. </li> - </ol> - </li> -</ol> - -<h3 id="Een_gepersonaliseerde_welkomstboodschap_toevoegen">Een gepersonaliseerde welkomstboodschap toevoegen</h3> - -<p>Nu gaan we nog een stuk code toevoegen. De code zal de titel van de pagina wijzigen zodat er ook een gepersonaliseerde welkomstboodschap in staat als de gebruiker de site voor de eerste keer opent. Deze welkomstboodschap zal bewaard blijven als de bezoeker de site verlaat om later terug te komen. We zullen er ook een optie in plaatsen die ervoor zorgt dat de bezoeker zijn gebruikersnaam kan veranderen en dus ook de welkomstboodschap als dat nodig is.</p> - -<ol> - <li>In <code>index.html</code> voegt u net voor het {{htmlelement("script")}}-element de volgende regel toe: - - <pre class="brush: html"><button>Verander gebruiker</button></pre> - </li> - <li>In <code>main.js</code> voegt u onderaan het bestand de volgende code toe, exact zoals die is geschreven. De code grijpt een referentie naar de nieuwe knop (de button) die we hebben toegevoegd en nog een referentie naar de hoofding. Deze referenties worden beide opgeslagen in variabelen : - <pre class="brush: js">var mijnKnop = document.querySelector('button'); -var mijnHoofding= document.querySelector('h1');</pre> - </li> - <li>Voeg nu de volgende functie toe om de gepersonaliseerde groet in te stellen — dit zal nog niet echt iets doen, maar we zullen hem later gebruiken: - <pre class="brush: js">function stelNaamIn() { - var mijnNaam = prompt('Voer uw naam in'); - localStorage.setItem('naam', mijnNaam); - mijnHoofding.textContent = 'Mozilla is cool, ' + mijnNaam; -}</pre> - Deze functie bevat een <a href="/en-US/docs/Web/API/Window.prompt"><code>prompt()</code></a> functie, die een dialoogvenster laat verschijnen. Het lijkt op <code>alert()</code> behalve dat <code>prompt()</code> de gebruiker vraagt om data in te voeren en die data in een variabele opslaat nadat de gebruiker op <strong>OK </strong>heeft gedrukt. In dit geval vragen we de bezoeker om zijn naam in te voeren. Daarna maken we gebruik van een API die <code>localStorage</code> (lokale opslag) heet en die ons toestaat data in de browser op de slaan, klaar voor later gebruik. We gebruiken de localStorage's <code>setItem()-</code>functie om een gegevenselement dat 'naam' heet te creëren en op te slaan. Het zal de waarde die de functie teruggeeft, gelijkstellen aan de mijnNaam-variabele die de naam bevat die de bezoeker heeft ingevoerd. Tenslotten stellen we de <code>textContent</code> van de heading gelijk aan een string ('Mozilla is cool, ') plus de naam van de gebruiker. </li> - <li>Vervolgens voegt u dit <code>if ... else</code> blok toe — we zouden dit de initialisatiecode kunnen noemen, want het zet de app op terwijl de website voor de eerste keer wordt geladen : - <pre class="brush: js">if(!localStorage.getItem('naam')) { - stelNaamIn(); -} else { - var opgeslagenNaam = localStorage.getItem('naam'); - mijnHoofding.textContent = 'Mozilla is cool, ' + opgeslagenNaam; -}</pre> - Dit blok gebruikt eerst een negatieoperator die de voorwaarde ontkent (logisch NIET) om te controleren of het een gegevenselement <code>naam</code> bestaat. Als dat niet zo is, wordt de <code>setUserName()</code> functie uitgevoerd om <code>naam</code> te creëren. Als <code>naam</code> wel bestaat, d.w.z. de gebruiker heeft <code>naam</code> tijdens een vorig bezoek ingesteld, halen we de opgeslagen naam op met <code>getItem()</code> en stellen we de <code>textContent</code> van de hoofding gelijk aan een string plus de naam van de gebruiker, net zoals we in <code>stelNaamIn()</code> deden.</li> - <li>Tenslotte stelt u de <code>onclick</code>-event-handler in op de knop, zodat de <code>stelNaamIn()</code>-functie wordt uitgevoerd als er op de knop wordt geklikt. Dit staat de gebruiker toe een nieuwe naam in te voeren door op de knop te klikken : - <pre class="brush: js">mijnKnop.onclick = function() { - stelNaamIn(); -} -</pre> - </li> -</ol> - -<p>Als u nu de site voor de eerste keer bezoekt, zal die u om uw gebruikersnaam vragen en u dan een gepersonaliseerde boodschap geven. U kunt de naam veranderen wanneer u wilt, door op de knop te drukken. Als bonus, omdat de naam in localStorage is opgeslagen, blijft de naam bewaard nadat de site is gesloten, zodat de gepersonaliseerde boodschap er nog altijd zal zijn als u de site opnieuw opent! </p> - -<h2 id="Conclusie">Conclusie</h2> - -<p>Als u alle instructies in dit artikel hebt opgevolgd, zou u nu een pagina moeten hebben die er ongeveer zo uit ziet (u kunt ook <a href="https://mdn.github.io/beginner-html-site-scripted/">onze versie hier zien</a>):</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9539/website-screen-scripted.png" style="display: block; height: 995px; margin: 0px auto; width: 800px;"></p> - -<p>Als u vast komt te zitten, kunt u altijd uw werk met ons <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">voltooide voorbeeld op Github</a> vergelijken.</p> - -<p>We hebben nu slechts de eerste stappen op een lang Javascriptpad gezet. Als u van dit artikel hebt genoten en u uw studie graag zou verdiepen, ga dan naar onze <a href="/en-US/docs/Web/JavaScript/Guide">gids over JavaScript</a>.</p> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website")}}</p> diff --git a/files/nl/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/nl/learn/getting_started_with_the_web/publishing_your_website/index.html deleted file mode 100644 index 791315c9ef..0000000000 --- a/files/nl/learn/getting_started_with_the_web/publishing_your_website/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: De publicatie van je website -slug: Learn/Getting_started_with_the_web/Publishing_your_website -translation_of: Learn/Getting_started_with_the_web/Publishing_your_website -original_slug: Learn/Getting_started_with_the_web/Publicatie_website ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p>Als je code eenmaal af is en je hebt de bestanden die je website opmaken, georganiseerd, moet je de site online zetten zodat mensen hem kunnen vinden. Dit artikel legt uit hoe je jouw eenvoudige voorbeeldcode met weinig moeite online kan zetten. </p> -</div> - -<h2 id="Welke_opties_zijn_er">Welke opties zijn er?</h2> - -<p>De publicatie van een website is geen eenvoudig onderwerp. Er zijn zoveel manieren om een website online te zetten. In dit artikel gaan we niet proberen om alle methodes uit te doeken te doen. We gaan ons beperken tot de pro's en contra's van drie algemene stragegieën vanuit het standpunt van een beginner en dan bespreken we met jou stap voor stap één methode die geschikt is voor onze code.</p> - -<h3 id="Hosting_met_een_domeinnaam">Hosting met een domeinnaam</h3> - -<p>Als je totale controle over je gepucliceerde website wil hebben, dan zal je waarschijnlijk geld aan hosting en een domeinnaam moeten uitgeven :</p> - -<ul> - <li>Hosting — je huurt ruimte op de <a href="/en-US/Learn/What_is_a_web_server">webserver</a> van een firma die deze hostingdienst aanbiedt. Je slaat al je bestanden op in deze ruimte en de webserver toont de inhoud aan de webgebruikers die je website willen bekijken.</li> - <li>Een <a href="/en-US/Learn/Understanding_domain_names">domeinnaam</a> — het unieke adres waarop mensen je website kunnen vinden zoals bijvoorbeeld <code>/www.mozilla.org</code>, of <code>http://www.bbc.co.uk</code>. Je huurt je domeinnaam voor een vastgelegd aantal jaren van een <strong>domeinregistratiebedrijf</strong>.</li> -</ul> - -<p>Vele professionele websites gaan op die manier online.</p> - -<p>Je zal bovendien ook een {{Glossary("FTP", "File Transfer Protocol (FTP)")}}-programma (zie <a href="/en-US/Learn/How_much_does_it_cost#Software">How much does it cost: software</a> voor meer details) nodig hebben om de bestanden van je website naar de server over te hevelen. FTP-programma's verschillen onderling zeer veel van elkaar, maar meestal moet je op de webserver inloggen met details die jou worden aangeboden door je hostingbedrijf (bijvoorbeeld gebruikersnaam, paswoord, hostnaam). Dan toont het programma jouw lokale bestanden en die van de webserver in twee vensters, zodat je ze heen en weer kan slepen en in het juiste venster loslaten:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p> - -<h4 id="Tips_voor_het_vinden_van_hostingruimte_en_domeinen">Tips voor het vinden van hostingruimte en domeinen</h4> - -<ul> - <li>We promoten hier geen specifieke commerciële hostingbedrijven. Om hostingbedrijven en domeinnaamregistratiehouders te vinden, zoek je gewoon op "web hosting" en "domeinnamen" naar een bedrijf dat domeinnaamregistraties verkoopt. Dit soort bedrijven zullen één of andere functionaliteit aanbieden waarmee je een domeinnaam naar keuze kunt opzoeken.</li> - <li>Het is mogelijk dat je {{Glossary("ISP", "Internetprovider")}} (bij je thuis of die van je bedrijf) hosting voor een kleine website aanbiedt. De beschikbare set van hulpmiddelen zal beperkt zijn maar het is misschien perfect voor je eerste experimenten — neem contact met hen op en vraag ernaar!</li> - <li>Er zijn bedrijven die gratis diensten aanbieden. Dat zijn bedrijven zoals <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogger</a>, en <a href="https://wordpress.com/">WordPress</a>. Opnieuw, het zal vrij beperkt zijn, maar ze zijn ideaal voor je eerste experimenten. Gratis diensten vereisen meestal geen FTP-software voor uploads — je kan gewoon alles naar het webinterface slepen om je bestanden te uploaden.</li> - <li>Sommige bedrijven bieden zowel hosting als domeinen in één paket aan.</li> -</ul> - -<h3 id="Gebruik_een_online_dienst_zoals_GitHub_of_Google_App_Engine">Gebruik een online dienst zoals GitHub of Google App Engine</h3> - -<p>Met sommige webinstrumenten kan je je website online publiceren:</p> - -<ul> - <li><a href="https://github.com/">GitHub</a> is een "sociale coderingssite". Je kan er je bestanden naar uploaden en ze er opslaan. Github werkt als een opslagplaats voor je code in het <a href="http://git-scm.com/">Git</a> <strong>versie-beheersysteem. </strong>Je kan dan met anderen samenwerken en code voor je project schrijven. Het systeem is standaard open-source ('open bron' in het Nederlands). Dat wil zeggen dat men overal ter wereld je code op Github kan vinden, gebruiken, ervan leren en die verbeteren. Github biedt een zeer nuttige dienst aan die <a href="https://pages.github.com/">GitHub Pages</a> heet. Daarmee kan je je website live op het web tonen.</li> - <li><a href="https://cloud.google.com/appengine/" title="App Engine - Build Scalable Web & Mobile Backends in Any Language | Google Cloud Platform">Google App Engine</a> is een krachtig platform waarmee je applicaties op Google’s infrastructuur kan bouwen en uitvoeren. Je kan van nul een webapplicatie opbouwen die uit meerdere niveaus zal bestaan maar je kan ook gewoon een statische website maken. Zie <a href="/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a> voor meer informatie.</li> -</ul> - -<p>In tegenstelling tot hosting, kan je zulke webinstrumenten meestal gratis gebruiken maar hun functionaliteit zal beperkt zijn. </p> - -<h3 id="Gebruik_een_IDE_op_het_internet_zoals_Thimble">Gebruik een IDE op het internet zoals Thimble</h3> - -<p>Er zijn een aantal webapps die een omgeving nabootsen waarin je je website kan ontwikkelen. (IDE staat voor Integrated Development Environment. In het Nederlands is dat Geïntegreerde Ontwikkelingsomgeving). Je kan er je HTML, CSS and JavaScript in schrijven en je kan het resultaat van al die code weergeven als een website — en dat allemaal in één tabblad van je browser. Meestal zijn deze instrumenten vrij gemakkelijk in het gebruik, geweldig om mee te leren, gratis (toch de basisdiensten) en ze tonen je weergegeven pagina op een uniek webadres. De hulpmiddelen die je kan gebruiken, zijn echter nogal beperkt en de apps bieden meestal enkel hostingruimte aan voor tekst (afbeeldingen kan je er bijvoorbeeld niet in steken.</p> - -<p>Speel een beetje met een paar van deze voorbeelden en kijk eens welke jou het meeste aanspreekt:</p> - -<ul> - <li><a href="https://jsfiddle.net/">JSFiddle</a></li> - <li><a href="https://thimble.mozilla.org">Thimble</a></li> - <li><a href="http://jsbin.com/">JS Bin</a></li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p> - -<h2 id="Publiceren_via_GitHub">Publiceren via GitHub</h2> - -<p>Nu gaan we stap voor stap je site op een gemakkelijke manier publiceren met GitHub Pages.</p> - -<ol> - <li>Eerst, <a href="https://github.com/">schrijf je je in bij GitHub</a> en verifiëer je je emailadres. </li> - <li>Daarna moet je een <a href="https://github.com/new">een opslagplaats of repository creëren</a> waarin je je bestanden zult steken. (Het woord repository wordt zeer vaak gebruikt. Het doet het dan ook veel beter dan opslagplaats in een zoekmachine.)</li> - <li>Op deze pagina, in het invoerveld dat <em>Repository name</em> heet, voer je <em>username</em>.github.io in, waar <em>username</em> jouw gebruikersnaam is. Dus bijvoorbeeld, onze vriend bobsmith zou je dan invoeren als <em>bobsmith.github.io</em>.<br> - Vink ook <em>Initialize this repository with a README</em> aan en click dan op <em>Create repository</em>.<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li> - <li>Daarna sleep je de inhoud van je websitemap naar je repository en laat je die erin vallen. Dan klik je op <em>Commit changes</em> (dit betekent ongeveer 'sla de veranderingen op'.)<br> - - <div class="note"> - <p><span style="font-size: 14px;"><strong>Opmerking</strong></span>: Zorg ervoor dat je map een <em>index.html</em> bestand heeft.</p> - </div> - </li> - <li> - <p>Nu navigeer je je browser naar <em>username</em>.github.io om je website online te zien. Bijvoorbeeld, voor de gebruikersnaam <em>chrisdavidmills</em>, ga je naar <a href="http://chrisdavidmills.github.io/">chrisdavidmills.github.io</a>.</p> - - <div class="note"> - <p><strong>Opmerking</strong>: Het kan een paar minuten duren vooraleer je website live is. Als het niet onmiddellijk werkt, zal je paar minuten moeten wachten en dan opnieuw proberen.</p> - </div> - </li> -</ol> - -<p>Om meer te leren ga je naar <a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Help</a>.</p> - -<h2 id="Meer_lezen_over">Meer lezen over</h2> - -<ul> - <li><a href="/en-US/Learn/What_is_a_web_server">What is a web server</a></li> - <li><a href="/en-US/Learn/Understanding_domain_names">Understanding domain names</a></li> - <li><a href="/en-US/Learn/How_much_does_it_cost">How much does it cost to do something on the web?</a></li> - <li><a href="https://www.codecademy.com/learn/deploy-a-website">Deploy a Website</a>: Een leuke cursus van Codecademy die een beetje verder gaat en je een paar extra technieken toont.</li> - <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or Free Static Website Hosting</a> door Scott Murray, heeft een paar nuttige ideeën over beschikbare diensten.</li> -</ul> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/nl/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/nl/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html deleted file mode 100644 index 49029503c8..0000000000 --- a/files/nl/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Hoe gaat uw website eruitzien? -slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like -tags: - - Beginner - - Benodigdheden - - Design - - Inhoud - - Leren - - Lettertypes - - Ontwerpen - - Plannen -translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like -original_slug: Learn/Getting_started_with_the_web/Hoe_gaat_jouw_website_er_uit_zien ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div> - -<div class="summary"> -<p><em>Hoe gaat uw website eruitzien?</em> beschrijft een eenvoudige methode die u kunt volgen om de inhoud en het ontwerp van uw website te plannen voordat u code begint te schrijven, en geeft antwoorden op vragen als ‘Welke informatie ga ik aanbieden?’, ‘Welke lettertypen en kleuren wil ik gebruiken?’ en ‘Wat is het doel van mijn website?’</p> -</div> - -<h2 id="Beginnen_bij_het_begin_planning">Beginnen bij het begin: planning</h2> - -<p>Voordat u begint, hebt u een paar ideeën nodig. Wat gaat uw website bieden? Een website kan zo goed als alles doen, maar met uw eerste probeersel kunt u het beter simpel houden. We beginnen met een eenvoudige webpagina die een hoofdkop, een afbeelding en een paar alinea’s bevat.</p> - -<p>Om te beginnen, hebt u een antwoord op deze vragen nodig:</p> - -<ol> - <li><strong>Waar gaat uw website over? </strong>Houdt u van honden, New York of Pacman?</li> - <li><strong>Welke informatie wilt u over het onderwerp aanbieden? </strong>Schrijf een titel, een paar alinea’s en denk na over een afbeelding die u op uw pagina wilt tonen.</li> - <li><strong>Hoe gaat uw website eruitzien? </strong>Gebruik eenvoudige termen. Welke achtergrondkleur kiest u? Welk lettertype is het meest geschikt: formeel, cartoony, vetgedrukt, subtiel?</li> -</ol> - -<div class="note"> -<p><strong>Noot</strong>: complexe projecten hebben gedetailleerde richtlijnen nodig die alle details bevatten over kleuren, lettertypen, spaties tussen items op de pagina, aangewezen schrijfstijl, enzovoort. Dit wordt ook wel een ontwerpgids of merkboek genoemd. U kunt een voorbeeld bekijken op <a href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/">Firefox OS Guidelines</a>.</p> -</div> - -<h2 id="Uw_ontwerp_schetsen">Uw ontwerp schetsen</h2> - -<p>Vervolgens neemt u pen en papier en maakt u een ruwe schets van uw webpagina. Voor uw eerste pagina is er nog niet veel dat u op papier kunt zetten, maar u zou er nu al een gewoonte van moeten maken. Het helpt echt en u hoeft geen Van Gogh te zijn!</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p> - -<div class="note"> -<p><strong>Noot</strong>: zelfs op echte, complexe websites begint het ontwerpteam meestal met ruwe schetsen op papier. Later bouwen ze digitale mockups (modellen) met een grafische editor of een andere webtechnologie.</p> - -<p>Een grafisch ontwerper en een {{Glossary("UX", "user-experience")}} (UX)-designer zijn vaak leden van een webteam. Grafische ontwerpers ontwikkelen de visuele aspecten van een website. UX-ontwerpers spelen een eerder abstracte rol. Zij zijn verantwoordelijk voor de gebruikerservaring en -interactie met de website.</p> -</div> - -<h2 id="Uw_hulpprogramma’s_kiezen">Uw hulpprogramma’s kiezen</h2> - -<p>Nu bent u zo ver om de inhoud samen te stellen die uiteindelijk op uw webpagina terecht zal komen.</p> - -<h3 id="Tekst">Tekst</h3> - -<p>U zou nog steeds de alinea’s en de titel van uw ontwerp van eerder moeten hebben. Houd die paraat.</p> - -<h3 id="Themakleur">Themakleur</h3> - -<p>Ga naar de <a href="https://developer.mozilla.org/docs/Web/CSS/CSS_Colors/Color_picker_tool">Kleurenkiezer</a> om een kleur te kiezen. Zoek er een uit die u bevalt. Als u op een kleur klikt, zult u een vreemde code zien die uit zes tekens bestaat, zoals bijvoorbeeld <code>#660066</code>. Die tekens vormen een <em>hex(adecimale)-code</em>, en vertegenwoordigen uw kleur. Kopieer de code in een document dat u ergens veilig bijhoudt.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p> - -<h3 id="Afbeeldingen">Afbeeldingen</h3> - -<p>Om een afbeelding te kiezen, gaat u naar <a href="https://www.google.com/imghp?hl=nl&gws_rd=ssl">Google Afbeeldingen</a> en zoekt u naar iets geschikts.</p> - -<ol> - <li>Als u een afbeelding hebt gevonden die u bevalt, klikt u op de afbeelding.</li> - <li>Druk op de knop <em>Afbeeldingen bekijken</em>.</li> - <li>Op de volgende pagina klikt u met de rechtermuisknop op de afbeelding (Ctrl + klik op een Mac), kies daarna <em>Afbeelding opslaan als…</em> en kies een veilige plek om de afbeelding op te slaan. Als alternatief voor deze methode kunt u ook het webadres van uw afbeelding opslaan voor later gebruik (het webadres vindt u in de adresbalk van uw browser).</li> -</ol> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png" style="height: 293px; width: 420px;"></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png" style="height: 292px; width: 340px;"></p> - -<div class="note"> -<p><strong>Noot</strong>: de meeste afbeeldingen op het web, dus ook die van Google Afbeeldingen, zijn auteursrechtelijk beschermd. Om de kans op het schenden van dat auteursrecht te verkleinen, kunt u Google’s licentiefilter gebruiken. Klik hiervoor op 1) <strong>Tools </strong> en dan op 2) <strong>Gebruiksrechten</strong>:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8981/Screenshot%20from%202014-11-04%2014:27:45.png" style="height: 195px; width: 587px;"></p> -</div> - -<h3 id="Lettertypen">Lettertypen</h3> - -<p>Om een lettertype te kiezen:</p> - -<ol> - <li>Ga naar <a href="http://www.google.com/fonts">Google Fonts</a> en scroll omlaag totdat u een lettertype in de lijst vindt dat u wilt gebruiken. U kunt ook het bedieningspaneel aan de rechterkant gebruiken om uw resultaten verder te filteren.</li> - <li>Klik op het ‘plus’-pictogram (Toevoegen aan) naast het lettertype van uw keuze.</li> - <li>Klik op de knop ‘* Family Selected’<em> </em> in het paneel aan de onderkant van de pagina (‘*’ is afhankelijk van het aantal lettertypen dat u hebt geselecteerd).</li> - <li>In het pop-upscherm kunt u de regels met code zien die Google aan u doorgeeft. Die regels kopieert u in een teksteditor en slaat u op voor later gebruik.</li> -</ol> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png" style="height: 359px; width: 600px;"></p> - -<p> </p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png" style="height: 608px; width: 600px;"></p> - -<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</p> diff --git a/files/nl/learn/html/index.html b/files/nl/learn/html/index.html deleted file mode 100644 index 773c3732ba..0000000000 --- a/files/nl/learn/html/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: HTML -slug: Learn/HTML -tags: - - Beginner - - Coderen - - Gids - - HTML - - Introductie - - Leren -translation_of: Learn/HTML ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Om websites te bouwen moet u kennis hebben van {{Glossary('HTML')}} — de fundamentele technologie die wordt gebruikt om de structuur van een webpagina te definiëren. HTML wordt gebruikt om te specificeren of de inhoud van uw webpagina moet worden herkend als een paragraaf, titel, hoofding, link, afbeelding, multimediaspeler, formulier, of één van de vele andere beschikbare elementen, of zelfs een nieuw element dat u zelf definieert.</p> - -<h2 id="Leertraject">Leertraject</h2> - -<p>Idealiter begint u met uw leertraject door HTML te leren. U kunt beginnen door <a href="/nl/docs/Learn/HTML/Introduction_to_HTML">Een inleiding op HTML</a> te lezen. Daarna kunt u verder leren over ingewikkeldere onderwerpen zoals:</p> - -<ul> - <li><a href="/nl/docs/Learn/CSS">CSS</a>, en hoe u het kunt gebruiken om vorm te geven aan HTML-elementen. Voorbeelden hiervan zijn het wijzigen van de lettergrootte en het lettertype van een tekst, het toevoegen van randen en slagschaduwen, het maken van een layout met meerdere kolommen, en het toevoegen van animaties en andere visuele effecten.</li> - <li><a href="/nl/docs/Learn/JavaScript">JavaScript</a>, en hoe u het kunt gebruiken om dynamische functionaliteit toe te voegen aan webpagina's. Voorbeelden hiervan zijn het vinden van uw locatie en het weergeven van deze locatie op een kaart, het laten verschijnen en verdwijnen van UI-elementen wanneer u gebruik maakt van een wisselknop, het lokaal opslaan van informatie van gebruikers op hun computer, en heel veel meer.</li> -</ul> - -<p>Voordat u begint met dit onderwerp, zult u op zijn minst bekend moeten zijn met het gebruik van computers en het passief gebruiken van het web (oftewel het gewoon bekijken, de inhoud consumeren). U hebt een basisopstelling nodig waarmee u kunt werken, zoals gespecificeerd in <a href="/nl/docs/Learn/Getting_started_with_the_web/Basis_software_installeren">Basissoftware installeren</a>, en u zult moeten begrijpen hoe u bestanden kunt aanmaken en beheren, zoals gespecificeerd in <a href="/nl/docs/Learn/Getting_started_with_the_web/Bestanden_beheren">Omgaan met bestanden</a> — beide zijn onderdeel van onze volledige beginnersmodule genaamd <a href="/nl/docs/Learn/Getting_started_with_the_web">Van start met het web</a>.</p> - -<p>Het wordt aangeraden dat u begint met <a href="/nl/docs/Learn/Getting_started_with_the_web">Van start met het web</a> voordat u verder gaat met dit onderwerp, hoewel het niet noodzakelijk is. Veel van wat wordt besproken in <a href="/nl/docs/Learn/Getting_started_with_the_web/HTML_basisbegrippen">De basisbegrippen van HTML</a> wordt ook besproken in de module <a href="/nl/docs/Learn/HTML/Introduction_to_HTML">Een inleiding op HTML</a>, hoewel de laatstgenoemde module veel gedetailleerder is.</p> - -<h2 id="Modules">Modules</h2> - -<p>Dit onderwerp bevat de volgende modules, die in een voorgestelde volgorde staan om er doorheen te werken. U kunt het beste beginnen met de eerste module.</p> - -<dl> - <dt><a href="/en-US/docs/Web/Guide/HTML/Introduction">Introductie tot HTML</a></dt> - <dd>Deze module is het startpunt, waarbij u bekend wordt met belangrijke concepten en syntax, bekijkt hoe u HTML op tekst kunt toepassen, leert hoe u hyperlinks kunt maken en leert hoe u HTML kunt gebruiken om een webpagina te structureren.</dd> - <dt><a href="/nl/docs/Learn/HTML/Multimedia_inbedden">Multimedia inbedden</a></dt> - <dd>Deze module geeft inzicht over hoe HTML kan worden gebruikt om multimedia in te voegen in uw webpagina's, de verschillende manieren waarop afbeeldingen kunnen worden ingevoegd en hoe video, audio en zelfs andere webpagina's kunnen worden ingebed.</dd> - <dt><a href="/nl/Learn/HTML/Tables">Tabellen in HTML</a></dt> - <dd>Het weergeven van informatie in tabelweergave op een {{glossary("Toegankelijkheid", "toegankelijke")}} manier kan een uitdaging zijn. Deze module legt de basis van de opmaak van tabellen uit, samen met ingewikkeldere functies zoals het implementeren van onderschriften en samenvattingen.</dd> - <dt><a href="/nl/Learn/HTML/Formulieren">Formulieren in HTML</a></dt> - <dd>Formulieren zijn een heel belangrijk gedeelte van het web — ze zijn onderdeel van de functionaliteit die u nodig hebt voor de interactie met websites, zoals registreren en inloggen, feedback verzenden, producten kopen, en meer. Met behulp van deze module kunt u beginnen met het maken van gedeeltes van formulieren, die nodig zijn aan de clientkant.</dd> -</dl> - -<h2 id="Veelvoorkomende_problemen_met_HTML_oplossen">Veelvoorkomende problemen met HTML oplossen</h2> - -<p><a href="/en-US/docs/Learn/HTML/Howto">HTML gebruiken voor het oplossen van veelvoorkomende problemen</a> bevat links naar secties met inhoud die uitleggen hoe HTML kan worden gebruikt om veelvoorkomende problemen op te lossen wanneer u een webpagina maakt: Hoe gaat u met titels om, hoe voegt u afbeeldingen of video's toe, hoe benadrukt u inhoud, hoe maakt u een eenvoudig formulier, enzovoort.</p> - -<h2 id="Zie_ook">Zie ook</h2> - -<div class="document-head" id="wiki-document-head"> -<dl> - <dt><a href="/nl/docs/Web/HTML">HTML (HyperText Markup Language)</a> op MDN</dt> - <dd>Het vertrekpunt voor documentatie over HTML op MDN, met daarin gedetailleerde referenties naar elementen en attributen. Als u bijvoorbeeld wilt weten welke attributen een element heeft of welke waarden een attribuut heeft, is dit een goede plek om te beginnen.</dd> -</dl> -</div> 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> diff --git a/files/nl/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/nl/learn/html/multimedia_and_embedding/images_in_html/index.html deleted file mode 100644 index 1dfbb92bd4..0000000000 --- a/files/nl/learn/html/multimedia_and_embedding/images_in_html/index.html +++ /dev/null @@ -1,369 +0,0 @@ ---- -title: Afbeeldingen in HTML -slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML -tags: - - Article - - Beginner - - Guide - - HTML - - Image - - alt text - - captions - - figcaption - - figure -translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML -original_slug: Learn/HTML/Multimedia_inbedden/Afbeeldingen_in_HTML ---- -<div>{LearnSidebar}}</div> - -<div>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</div> - -<p class="summary">In den beginne was het web alleen tekst en was het echt heel saai. Gelukkig duurde het niet lang totdat de mogelijkheid voor het inbedden van afbeeldingen (en andere soorten inhoud) in webpagina’s werd toegevoegd. Er bestaan ook nog andere soorten multimedia, maar het is logisch om te beginnen met het nederige {{htmlelement("img")}}-element, dat wordt gebruikt om eenvoudige afbeeldingen in een webpagina te plaatsen. In dit artikel bekijken we in detail hoe we dit element gebruiken. We bespreken de basisprincipes, de toevoeging van bijschriften met het {{htmlelement("figure")}}-element, en hoe het zich verhoudt tot CSS-achtergrondafbeeldingen.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Vereisten:</th> - <td>Basiscomputervaardigheden, <a href="https://developer.mozilla.org/nl/docs/Learn/Getting_started_with_the_web/Installing_basic_software">de installatie van basissoftware</a>, basiskennis van het <a href="https://developer.mozilla.org/nl/docs/Learn/Getting_started_with_the_web/Dealing_with_files">werken met bestanden</a>, vertrouwdheid met HTML-basisprincipes (zoals die worden besproken in <a href="/nl/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Beginnen met HTML</a>).</td> - </tr> - <tr> - <th scope="row">Doel:</th> - <td>U leert hoe u eenvoudige afbeeldingen in HTML kunt inbedden, hoe u hieraan bijschriften kunt toevoegen, en hoe HTML-afbeeldingen zich verhouden tot CSS-achtergrondafbeeldingen.</td> - </tr> - </tbody> -</table> - -<h2 id="Hoe_plaatsen_we_een_afbeelding_op_een_webpagina">Hoe plaatsen we een afbeelding op een webpagina?</h2> - -<p>Om eenvoudige afbeelding op een webpagina te plaatsen, gebruiken we het {{htmlelement("img")}}-element. Dit is een leeg element (wat inhoudt dat het geen tekst of sluittag bevat) en slechts één attribuut nodig heeft om nuttig te zijn: het <code>src</code>-attribuut (soms uitgesproken als het volledige woord, <em>source</em>, ofwel bron in het Nederlands). Het <code>src</code>-attribuut bevat een pad dat naar de afbeelding wijst die u in de pagina wilt inbedden. Dit pad kan een relatieve of een absolute URL zijn, net zoals de waarden van het href-attribuut dat tot het {{htmlelement("a")}}-element behoort.</p> - -<div class="note"> -<p><strong>Noot</strong>: voordat u verdergaat, zou u <a href="https://developer.mozilla.org/nl/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Een_snelle_uitleg_over_URL%E2%80%99s_en_paden">Een snelle uitleg over URL’s en paden</a> moeten lezen om uw geheugen wat betreft relatieve en absolute URL’s op te frissen.</p> -</div> - -<p>Als uw afbeelding bijvoorbeeld <code>dinosaur.jpg</code> heet en zich in dezelfde map bevindt als uw HTML-pagina, zou u de afbeelding als volgt kunnen inbedden:</p> - -<pre class="brush: html"><img src="dinosaurus.jpg"></pre> - -<p>Als de afbeelding zich in een submap <code>afbeeldingen</code> zou bevinden die zich in dezelfde map als de HTML-pagina zou bevinden (een aanbeveling van Google voor {{glossary("SEO")}}/indexeringsdoeleinden), zou u deze op de volgende manier inbedden:</p> - -<pre class="brush: html"><img src="afbeeldingen/dinosaurus.jpg"></pre> - -<p>Enzovoort.</p> - -<div class="note"> -<p><strong>Noot</strong>: zoekmachines lezen ook bestandsnamen en gebruiken die om hun zoekresultaten te optimaliseren (SEO of Search Engine Optimalisation in het Engels). Geef uw afbeelding daarom een beschrijvende naam. <code>dinosaurus.jpg</code> is beter dan <code>img835.png</code>.</p> -</div> - -<p>U zou de afbeelding met een absolute URL kunnen inbedden, zoals in dit voorbeeld:</p> - -<pre class="brush: html"><img src="https://www.example.com/afbeeldingen/dinosaurus.jpg"></pre> - -<p>Dat is echter zinloos, want de browser moet dan veel meer werk verrichten. Hij moet het IP-adres van de DNS-server helemaal opnieuw opvragen, etc. Vrijwel altijd bewaart u de afbeeldingen voor uw website toch op dezelfde server als uw HTML.</p> - -<div class="warning"> -<p><strong>Waarschuwing:</strong> de meeste afbeeldingen zijn auteursrechtelijk beschermd. Plaats <strong>geen</strong> afbeelding op uw webpagina, tenzij:<br> - <br> - 1) u de eigenaar van de afbeelding bent<br> - 2) u expliciete, geschreven toestemming van de eigenaar van de afbeelding hebt, of<br> - 3) u voldoende bewijs hebt dat de afbeelding tot het publieke domein behoort.<br> - <br> - Schendingen van het auteursrecht zijn illegaal en onethisch. Bovendien mag u uw <code>src</code>-attribuut <strong>nooit </strong>gebruiken om een koppeling naar een afbeelding te maken die zich op de website van iemand anders bevindt en waarvoor u geen toestemming hebt gekregen om hiernaar te verwijzen. Dit noemen we ‘hotlinking’ (hete verbindingen maken in het Nederlands). Nogmaals, het is illegaal om iemands bandbreedte te stelen. Ook vertraagt het uw pagina en hebt u geen controle over wat de eigenaar ermee doet; deze kan de afbeelding verwijderen of vervangen door iets gênants.</p> -</div> - -<p>De code hierboven zou het volgende resultaat opleveren:</p> - -<p><img alt="A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it" src="https://mdn.mozillademos.org/files/12700/basic-image.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> - -<div class="note"> -<p><strong>Noot</strong>: elementen zoals {{htmlelement("img")}} en {{htmlelement("video")}} worden soms <strong>vervangen elementen</strong> genoemd (‘replaced elements’ in het Engels), omdat de inhoud en grootte van het element worden gedefinieerd door een externe bron (zoals een afbeelding of een videobestand), niet door de inhoud van het element zelf. </p> -</div> - -<div class="note"> -<p><strong>Noot</strong>: u kunt het voltooide voorbeeld van deze sectie op <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">Github</a> vinden (en bekijk ook de <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">broncode</a>.)</p> -</div> - -<h3 id="Alternatieve_tekst">Alternatieve tekst</h3> - -<p>Het volgende attribuut dat we gaan bekijken heet <code>alt</code>. De waarde ervan moet uit een beschrijving van de afbeelding bestaan die we kunnen gebruiken in situaties waarin de afbeelding niet kan worden gezien of weergegeven. De code hierboven bijvoorbeeld kan op de volgende manier worden gewijzigd:</p> - -<pre class="brush: html"><img src="afbeeldingen/dinosaurus.jpg" - alt="Het hoofd en de romp van het skelet van een dinosaurus; - het heeft een groot hoofd en lange scherpe tanden"></pre> - -<p>De makkelijkste manier om uw <code>alt</code>-tekst te testen is opzettelijk de bestandsnaam verkeerd spellen. Als bijvoorbeeld voor ons voorbeeld de naam <code>dinosooooorus.jpg</code> werd gebruikt, zou de browser in plaats van de afbeelding de alt-tekst weergeven:</p> - -<p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> - -<p>Waarom zou u de alt-tekst ooit zien of nodig hebben? Wel, het kan om een aantal goede redenen handig zijn:</p> - -<ul> - <li>De gebruiker is visueel beperkt en gebruikt een <a href="https://en.wikipedia.org/wiki/Screen_reader">schermlezer</a> om het web aan hem of haar te laten voorlezen. In feite is de alt-tekst die afbeeldingen kan beschrijven voor de meeste gebruikers nuttig.</li> - <li>Zoals hierboven beschreven, hebt u misschien het pad of de bestandsnaam onjuist gespeld.</li> - <li>De browser ondersteunt het afbeeldingselement niet. Sommige mensen gebruiken nog steeds browsers die alleen tekst ondersteunen, zoals <a href="https://en.wikipedia.org/wiki/Lynx_%28web_browser%29">Lynx</a>, dat als alternatief de alt-tekst van afbeeldingen weergeeft.</li> - <li>U kunt tekst opgeven die zoekmachines kunnen gebruiken. Zoekmachines kunnen bijvoorbeeld alt-tekst gebruiken om aan hun zoekopdrachten te koppelen.</li> - <li>Er zijn gebruikers die hun afbeeldingen hebben uitgeschakeld om zowel het volume van gegevensoverdracht als afleiding te verminderen. Dat is vooral de gewoonte op mobiele telefoons en in landen waar de bandbreedte beperkt en duur is.</li> -</ul> - -<p>Wat moet er binnen dat<code>alt</code>-attribuut worden beschreven? In de eerste plaats hangt het af van de <em>reden</em> waarom de afbeelding er is. Met andere woorden, wat u verliest als de afbeelding niet verschijnt:</p> - -<ul> - <li><strong>Decoratie. </strong>Als de afbeelding alleen decoratie is en geen deel uitmaakt van de inhoud, voeg dan een lege <code>alt=""</code> toe. Een schermlezer verspilt bijvoorbeeld geen tijd aan het voorlezen van inhoud die de lezer niet echt nodig heeft. Decoratieve afbeeldingen horen niet echt in uw HTML thuis. {{anch("CSS background images")}} zouden voor het invoegen van decoratie moeten worden gebruikt, maar als het onvermijdelijk is, gebruik dan <code>alt=""</code> .</li> - <li><strong>Inhoud. </strong>Als uw afbeelding belangrijke informatie bevat, verschaf dan dezelfde informatie in een <em>korte </em><code>alt</code>-tekst. Of nog beter, in de gewone tekst op uw webpagina die iedereen kan zien. Schrijf geen overbodige <code>alt</code>-tekst. Hoe vervelend is het niet als u goed kunt zien en alle alinea’s zijn twee keer geschreven? Als de afbeelding voldoende in de tekst van uw webpagina wordt beschreven, kunt u gewoon <code>alt=""</code>gebruiken.</li> - <li><strong>Koppeling.</strong> Als u een afbeelding tussen {{htmlelement("a")}}-labels zet om er een koppeling van te maken, moet u toch nog <a href="/nl/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Use_clear_link_wording">toegankelijke koppelingstekst</a> toevoegen. In zo'n geval kunt u die of in hetzelfde <code><a></code>-element schrijven, of in het <code>alt</code>-attribuut van de afbeelding. Kies wat voor u het beste werkt.</li> - <li><strong>Tekst.</strong> Plaats liever geen tekst in afbeeldingen. Als u bijvoorbeeld uw belangrijkste titel van een slagschaduw wilt voorzien, gebruik er dan <a href="/nl/docs/Web/CSS/text-shadow">CSS</a> voor in plaats van de tekst in een afbeelding te plaatsen. <em>Als u dit echt niet kunt vermijden</em>, zorg dan voor een tekst in het <code>alt</code>-attribuut.</li> -</ul> - -<p>In essentie gaat het erom een gebruiksvriendelijke ervaring te bieden, zelfs als de gebruiker de afbeeldingen niet kan zien. Dit zorgt ervoor dat de volledige inhoud voor alle gebruikers toegankelijk is. Probeer een keer alle afbeeldingen in uw browser te blokkeren en kijk dan hoe de webpagina eruitziet. U zult snel beseffen hoe nutteloos een alt-tekst zoals ‘logo’ of ‘mijn favoriete plek’ is als u de afbeeldingen niet kunt zien.</p> - -<div class="note"> -<p><strong>Noot</strong>: meer informatie vindt u in onze gids voor <a href="/nl/docs/Learn/Accessibility/HTML#Tekstalternatieven">Tekstalternatieven</a>.</p> -</div> - -<h3 id="Breedte_en_hoogte">Breedte en hoogte</h3> - -<p>U kunt de attributen <code>width</code> (breedte) en <code>height</code> (hoogte) gebruiken om de breedte en de hoogte van uw afbeelding te bepalen. Er zijn meerdere manieren om erachter te komen wat de breedte en de hoogte van uw afbeelding zijn. Op een Mac bijvoorbeeld kunt u <kbd>Cmd</kbd> + <kbd>I</kbd> gebruiken om de informatie over het afbeeldingsbestand weer te geven. Met ons voorbeeld kunnen we dit doen:</p> - -<pre class="brush: html"><img src="afbeeldingen/dinosaurus.jpg" - alt="Het hoofd en de romp van een dinosaursskelet; - het heeft een groot hoofd met lange scherpe tanden" - width="400" - height="341"></pre> - -<p>Onder normale omstandigheden zal dit de weergave van de afbeelding niet veel beïnvloeden, maar als de afbeelding niet wordt weergegeven, verandert dat. Als de gebruiker bijvoorbeeld net naar de pagina is gegaan en de afbeelding nog niet is geladen, zult u merken dat de browser ruimte vrijlaat waarin de afbeelding kan verschijnen:</p> - -<p><img alt="The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings" src="https://mdn.mozillademos.org/files/12706/alt-text-with-width-height.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> - -<p>Dit is een goede praktijk; de pagina laadt sneller en soepeler.</p> - -<p>U kunt de grootte van uw afbeeldingen echter beter niet met HTML-attributen aanpassen. Als u de afbeeldingsgrootte te groot instelt, leidt dit tot afbeeldingen die er korrelig, wazig of te klein uitzien, en verspilt u bandbreedte aan het laden van een afbeelding die niet aan de behoeften van de gebruiker voldoet. De afbeelding kan er ook vervormd uitzien als u de juiste <a href="https://en.wikipedia.org/wiki/Aspect_ratio_%28image%29">hoogte-breedteverhouding</a> niet respecteert. Het beste kunt u een afbeeldingseditor gebruiken om uw afbeelding de juiste grootte te geven voordat u deze op een webpagina plaatst.</p> - -<div class="note"> -<p><strong>Noot</strong>: als het niet nodig is om de grootte van een afbeelding aan te passen, kunt u beter <a href="/nl/docs/Learn/CSS">CSS</a> gebruiken.</p> -</div> - -<h3 id="Afbeeldingstitels">Afbeeldingstitels</h3> - -<p>Net zoals <a href="https://developer.mozilla.org/nl/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Adding_supporting_information_with_%3Ctitle%3E">bij koppelingen</a> kunt u <code>title</code>-attributen aan uw afbeeldingen toevoegen om wanneer nodig extra informatie te verschaffen. In ons voorbeeld zouden we dit kunnen doen:</p> - -<pre class="brush: html"><img src="afbeeldingen/dinosaur.jpg" - alt="Het hoofd en de romp van een dinosaurusskelet; - het heeft een groot hoofd met lange scherpe tanden" - width="400" - height="341" - title="Een T-Rex die is tentoongesteld in het Manchester University Museum"></pre> - -<p>Dit geeft ons een tooltip, net zoals bij koppelingstitels:</p> - -<p><img alt="The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum " src="https://mdn.mozillademos.org/files/12708/image-with-title.png" style="display: block; height: 341px; margin: 0px auto; width: 400px;"></p> - -<p>Afbeeldingstitels zijn niet onontbeerlijk. Het is vaak beter om dit soort informatie aan de hoofdtekst van het artikel toe te voegen dan deze vast te maken aan de afbeelding. Er zijn echter omstandigheden waarin ze toch nuttig zijn; in een afbeeldingengalerij bijvoorbeeld hebt u geen plaats voor bijschrijften.</p> - -<h3 id="Actief_leren_een_afbeelding_inbedden">Actief leren: een afbeelding inbedden</h3> - -<p>Nu is het aan u! In deze sectie voor actief leren gaat u aan de slag met een eenvoudige oefening. U begint met een eenvoudig {{htmlelement("img")}}-label. We willen dat u de afbeelding inbedt die zich op de volgende URL bevindt:</p> - -<p>https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg</p> - -<p>Eerder in de tekst werd gezegd dat u nooit naar afbeeldingen op andere servers mag hotlinken, maar dit is gewoon voor leerdoeleinden, dus voor deze ene keer is het oké.</p> - -<p>We willen ook dat u:</p> - -<ul> - <li>Een alt-tekst toevoegt. Controleer ook dat hij werkt door de URL van de afbeelding onjuist te spellen.</li> - <li>Stel de juiste <code>width</code> en <code>height</code> van de afbeelding in (hint, deze is 200px breed en 171px hoog) en experimenteer met andere waarden om te zien wat het effect is.</li> - <li>Geef de afbeelding ook een <code>title</code>.</li> -</ul> - -<p>Als u een fout maakt, kunt u die altijd ongedaan maken via de knop <em>Terugzetten</em>. Als u echt vastloopt, klik dan op <em>Oplossing tonen</em> om een 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"> -<img></textarea> -<h2>Uitvoer</h2> -<div class="output"></div> -<div class="controls"> - <input id="reset" type="button" value="Terugzetten" /> - <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: 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 = '<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum">'; - drawOutput(); -}); - -textarea.addEventListener("input", drawOutput); -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p> - -<h2 id="Bijschriften_aan_afbeeldingen_toevoegen_met_figures_en_figure_captions">Bijschriften aan afbeeldingen toevoegen met figures en figure captions</h2> - -<p>Er bestaat een aantal manieren om een bijschrift aan uw afbeelding toe te voegen. Er is bijvoorbeeld niets dat u tegenhoudt om het volgende te doen:</p> - -<pre class="brush: html"><div class="figure">: - <img src="afbeeldingen/dinosaurus.jpg" - alt="Het hoofd en de romp van een dinosaurusskelet; - het heeft een groot hoofd met lange scherpe tanden" - width="400" - height="341"> - - <p>Een T-Rex die wordt tentoongesteld in het Manchester University Museum.</p> -</div></pre> - -<p>Dit is in orde. Het bevat de inhoud die u nodig hebt en u kunt het mooi stijlen met CSS. Maar er een probleem: er is niets dat de afbeelding semantisch met het bijschrift verbindt, wat problemen voor schermlezers kan veroorzaken. Als u bijvoorbeeld 50 afbeeldingen en bijschriften hebt, welk bijschrift hoort dan bij welke afbeelding?</p> - -<p>Er is een betere oplossing: u kunt de HTML5-elementen {{htmlelement("figure")}} en {{htmlelement("figcaption")}} gebruiken. Deze zijn voor dit specifieke doel gemaakt: om een semantische container voor figuren te verschaffen en de figuur duidelijk met het bijschrift te verbinden. Ons voorbeeld hierboven kan op de volgende wijze worden herschreven:</p> - -<pre><figure> - <img src="afbeeldingen/dinosaurus.jpg" - alt="Het hoofd en de romp van een dinosaurusskelet; - het heeft een groot hoofd met lange scherpe tanden" - width="400" - height="341"> - - <figcaption>Een T-Rex die wordt tentoongesteld in het Manchester University Museum.</figcaption> -</figure></pre> - -<p>Het {{htmlelement("figcaption")}}-element vertelt browsers en ondersteunende technologie dat het bijschrift de andere inhoud van het {{htmlelement("figure")}}-element beschrijft.</p> - -<div class="note"> -<p><strong>Noot</strong>: vanuit het oogpunt van toegankelijkheid hebben bijschriften en {{htmlattrxref('alt','img')}}-tekst verschillende rollen. Bijschriften zijn ook nuttig voor mensen die de afbeelding kunnen zien, terwijl {{htmlattrxref('alt','img')}}-tekst dezelfde functionaliteit biedt als een ontbrekende afbeelding. Daarom zouden bijschriften en <code>alt</code> tekst niet hetzelfde moeten zeggen, omdat ze allebei verschijnen als de afbeelding afwezig is. Probeer de afbeeldingen in uw browser uit te schakelen en kijk hoe alles eruitziet.</p> -</div> - -<p>Een figuur hoeft geen afbeelding te zijn. Het kan een onafhankelijke inhoud zijn die:</p> - -<ul> - <li>Uw betekenis op een compacte makkelijk te begrijpen manier uitdrukt</li> - <li>Op verschillende plaatsen in de lineaire stroming van de pagina kan worden geplaatst</li> - <li>Essentiële informatie verschaft die de hoofdinhoud ondersteunt</li> -</ul> - -<p>Een figuur kan uit verschillende afbeeldingen bestaan, een codfragment, audio, video, vergelijkingen, een tabel, of iets anders.</p> - -<h3 id="Actief_leren_een_figuur_maken">Actief leren: een figuur maken</h3> - -<p>In deze sectie voor actief leren willen we dat u de voltooide code van de vorige oefening neemt en die in een figuur verandert:</p> - -<ul> - <li>Neem het op in een {{htmlelement("figure")}}-element.</li> - <li>Kopieer de tekst uit het <code>title</code>-attribuut, verwijder het <code>title</code>-attribuut en plaats de tekst in een {{htmlelement("figcaption")}}-element onder de afbeelding.</li> -</ul> - -<p>Als u een fout maakt, kunt u die altijd ongedaan maken via de knop <em>Terugzetten</em>. Als u echt vastloopt, klik dan op <em>Oplossing tonen</em> om een antwoord te zien:</p> - -<div class="hidden"> -<h6 id="Playable_code_2">Playable code 2</h6> - -<pre class="brush: html"><h2>Invoer</h2> -<textarea id="code" class="input"> -</textarea> -<h2>Uitvoer</h2> -<div class="output"></div> -<div class="controls"> - <input id="reset" type="button" value="Terugzetten" /> - <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: 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 = '<figure>\n <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171">\n <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>\n</figure>'; - drawOutput(); -}); - -textarea.addEventListener("input", drawOutput); -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code_2', 700, 500) }}</p> - -<h2 id="CSS-achtergrondafbeeldingen">CSS-achtergrondafbeeldingen</h2> - -<p>U kunt ook CSS gebruiken om afeeldingen in webpagina’s in te bedden (en JavaScript, maar dat is een heel ander verhaal). De CSS-eigenschap {{cssxref("background-image")}} en de andere <code>background-*</code>-eigenschappen worden gebruikt om het plaatsen van achtergrondafbeeldingen te beheren. Om bijvoorbeeld een achtergrondafbeelding in alle alinea’s in een pagina te plaatsen, zou u dit kunnen doen:</p> - -<pre class="brush: css">p { - background-image: url("afbeeldingen/dinosaurus.jpg"); -},</pre> - -<p>Het resultaat is een ingebedde afbeelding die makkelijker kan worden gepositioneerd en beheerd dan HTML-afbeeldingen. Dus waarom HTML-afbeeldingen gebruiken? Zoals hierboven al aangegeven, zijn CSS-achtergrondafbeeldingen er alleen voor decoratie. Als u gewoon iets wilt toevoegen dat mooi is om het visuele aspect van uw pagina te versterken, is dat prima. Bedenk wel dat zulke afbeeldingen geen enkele semantische betekenis hebben. Ze kunnen geen tekstequivalent bevatten, zijn onzichtbaar voor schermlezers, etc. Daarin blinken HTML-afbeeldingen dan weer uit!</p> - -<p>Samengevat: als een afbeelding betekenisvol is voor de inhoud van uw pagina, moet u een HTML-pagina gebruiken. Als een afbeelding niet meer dan decoratie is, gebruik dan CSS-achtergrondafbeeldingen.</p> - -<div class="note"> -<p><strong>Noot</strong>: u leert nog veel meer over <a href="/nl/docs/Learn/CSS/Styling_boxes/Backgrounds">CSS-achtergrondafbeeldingen</a> in onze sectie <a href="/nl/docs/Learn/CSS">CSS</a>.</p> -</div> - -<p>Voorlopig is dit alles. We hebben afbeeldingen en bijschriften in detail besproken. In het volgende artikel gaan we een tandje bijsteken en bespreken we hoe we HTML kunnen gebruiken om video en audio in pagina’s in te bedden.</p> - -<p>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</p> diff --git a/files/nl/learn/html/multimedia_and_embedding/index.html b/files/nl/learn/html/multimedia_and_embedding/index.html deleted file mode 100644 index feb8058212..0000000000 --- a/files/nl/learn/html/multimedia_and_embedding/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Multimedia en inbedden -slug: Learn/HTML/Multimedia_and_embedding -translation_of: Learn/HTML/Multimedia_and_embedding -original_slug: Learn/HTML/Multimedia_inbedden ---- -<p>{{LearnSidebar}}</p> - -<p class="summary">We hebben in deze cursus al heel wat tekst bekeken maar het web zou wel heel vervelend zijn als we enkel tekst zouden gebruiken. We gaan nu bekijken hoe we het web tot leven kunnen brengen met veel interessantere inhoud! In deze module onderzoeken we hoe je HTML kan gebruiken om multimedia in je wepagina's in te bedden. Dit houdt het gebruik van afbeeldingen in en hoe we video, audio en zelfs volledige webpagina's kunnen inbedden.</p> - -<h2 id="Vereisten">Vereisten</h2> - -<p>Voor je met deze module begint, zou je een redelijke basiskennis van HTML moeten hebben, zoals die in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introductie op HTML</a> is behandeld. Als je deze module niet eerst hebt gelezen en verwerkt (of iets gelijkaardigs) doe dat dan eerst en kom dan terug!</p> - -<div class="note"> -<p><strong>Opmerking</strong>: Als je op een computer/tablet/ander apparaat werkt en je bent niet in staat om je eigen bestanden te creëren, kan je de (meeste) codevoorbeelden uitproberen in een online codeerprogramma zoals <a href="https://jsbin.com/">JSBin</a> of <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="Gidsen">Gidsen</h2> - -<p>Deze module bevat een aantal artikelen waarin alle basisprincipes over het inbedden van multimedia worden doorgenomen.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Afbeeldingen in HTML</a></dt> - <dd>Er bestaan ook nog andere soorten multimedia, maar het is logisch om met het nederige {{htmlelement("img")}}-element te beginnen, dat we gebruiken om een eenvoudige afbeelding in een webpagina te plaatsen. In dit artikel gaan we dieper in op het gebruik van dit element. We bespreken de basis, hoe we er verklarende bijschriften (captions in het Engels) aan kunnen toevoegen met het {{htmlelement("figure")}}-element, en hoe het zich verhoudt tot CSS-afbeeldingen voor de achtergrond.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video en audio</a></dt> - <dd>In dit artikel bekijken we hoe de HTML5 {{htmlelement("video")}}- en {{htmlelement("audio")}}-elementen gebruiken om video en audio in onze pagina's in te bedden. We bespreken de basis, hoe we de toegang tot verschillende bestandsformaten op verschillende browsers mogelijk maken, hoe we bijschriften en ondertitels toevoegen en hoe we noodoplossingen voor oudere browsers creëren.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Van <object> tot <iframe> — andere technologiën waarmee we inhoud kunnen inbedden</a></dt> - <dd>Nu gaan we een zijpad inslaan en een aantal elementen bekijken waarmee je een breed gamma van inhouden en bestandstypes in je webpagina's kan inbedden: de {{htmlelement("iframe")}}-, {{htmlelement("embed")}}- en {{htmlelement("object")}}-elementen. <code><iframe></code>s zijn er om andere webpagina's in je pagina in te bedden en met de andere twee kan je PDFs, SVG, en zelfs Flash — een technologie die op zijn retour is, maar die je toch op nog wel eens zal tegenkomen.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Vectorafbeeldingen aan het web toevoegen</a></dt> - <dd>Vectorafbeeldingen kunnen in een aantal situaties zeer nuttig zijn. In tegenstelling tot gewone formaten zoals PNG/JPG, zullen ze niet vervormd worden of verpixelen (de afbeelding verandert in een hoop blokjes) als je erop inzoomt. Ze kunnen glad en mooi blijven als ze worden vergroot of verkleind. Dit artikel is een inleiding op wat vectorafbeeldingen zijn en hoe je dit populaire {{glossary("SVG")}}-formaat in je webpagina's kan opnemen.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsieve afbeeldingen</a></dt> - <dd>Met zo veel verschillende soorten apparaten waarmee je vandaaag op het web kan surfen, van mobiele telefoons tot vaste computers — is responsief ontwerp een essentieel concept dat je goed moet begrijpen in de moderne webwereld. Responsief ontwerp verwijst naar de creatie van webpagina's die hun eigenschappen automatisch aanpassen aan de verschillende schermgroottes, resoluties enz. Later gaan we dit in onze CSS-module in veel groter detail bekijken. Nu beperken we ons tot de instrumenten waarover HTML beschikt, waaronder het {{htmlelement("picture")}} element, die we kunnen gebruiken om responsieve afbeeldingen te maken.</dd> -</dl> - -<h2 id="Evaluatie">Evaluatie</h2> - -<p>De volgende evaluaties dienen om je kennis te testen van de HTML-basisprincipes die hierboven werden besproken :</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash pagina</a></dt> - <dd>In deze evaluatie testen we je kennis van een aantal technieken die in de artikelen van deze module werden doorgenomen. Je zal een aantal afbeeldingen en video aan een funky splash page over Mozilla toevoegen!</dd> -</dl> - -<h2 id="Zie_ook">Zie ook</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Een afbeeldingsmap bovenop een afbeelding toevoegen</a></dt> - <dd>Afbeeldingsmappen beschikken over een mechanisme waarmee je verschillende delen van een afbeelding kan verbinden met verschillende plaatsen (zie het als een map die je met extra informatie verbindt over elk land waarop je klikt.) Deze techniek is soms nuttig.</dd> - <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Basis Webvaardigheden 2</a></dt> - <dd> - <p>Dit is een uitstekende cursus van de Mozilla stichting die een aantal van de vaardigheden test en onderzoekt waar we in <em>Multimedia inbedden </em>hebben besproken. Hier kan je dieper ingaan op de basisprincipes waarmee we webpagina's samenstellen, hoe we ze toegankelijk maken voor iedereen, hoe we hulpmiddelen delen, online media gebruiken en en open source projecten werken.</p> - </dd> -</dl> diff --git a/files/nl/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/nl/learn/html/multimedia_and_embedding/video_and_audio_content/index.html deleted file mode 100644 index 7293a38b51..0000000000 --- a/files/nl/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ /dev/null @@ -1,270 +0,0 @@ ---- -title: HTML5 audio en video gebruiken -slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -tags: - - Audio - - HTML5 - - Instructie - - Media - - Ogg - - Video - - mp3 - - voorbeeld -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video -original_slug: Web/Guide/HTML/HTML5_audio_en_video_gebruiken ---- -<p>HTML5 introduceert ingebouwde media ondersteuning via de {{ HTMLElement("audio") }} en {{ HTMLElement("video") }} elementen, waarmee het mogelijk wordt om op een eenvoudige manier media in te sluiten in HTML documenten.</p> - -<h2 id="Media_insluiten">Media insluiten</h2> - -<p>Het insluiten van media in uw HTML document stelt niet zoveel voor:</p> - -<div style="overflow: hidden;"> -<pre class="brush: html"><video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls> - Uw browser ondersteunt het element <code>video</code> niet. -</video></pre> - -<p>Dit voorbeeld speelt een sample video van de Theora website inclusief controls voor het afspelen.</p> - -<p>En hier is een voorbeeld van het inbedden van een <em>audio</em> element in uw HTML document.</p> - -<pre class="brush: html"><audio src="/test/audio.ogg"> -<p>Het audio element wordt niet door uw browser ondersteund.</p> -</audio></pre> -</div> - -<p>The src attribuut bevat een URL van een geluidsbestand of een pad naar een lokaal geluidsbestand.</p> - -<div style="overflow: hidden;"> -<pre class="brush: html"><audio src="audio.ogg" controls autoplay loop> -<p>Het audio element wordt niet door uw browser ondersteund.</p> -</audio></pre> -</div> - -<p>Dit voorbeeld van de code gebruikt attributen van het {{ HTMLElement("audio") }} element:</p> - -<ul> - <li><code>controls</code> : Toont de standaard HTML5 controls ten behoeve van audio op de webpagina.</li> - <li><code>autoplay</code> : Zorgt ervoor dat het bestand automatisch afspeelt.</li> - <li><code>loop</code> : Zorgt ervoor dat het bestand herhaalt wordt.</li> -</ul> - -<div style="overflow: hidden;"> -<pre class="brush: html"><audio src="audio.mp3" preload="auto" controls></audio></pre> -</div> - -<p>Het <em>preload</em> attribuut wordt gebruikt in een audio element om grote bestanden te bufferen. U kunt hierbij 3 waarden gebruiken:</p> - -<ul> - <li><code>"none"</code> maakt dat er geen buffering wordt gebruikt</li> - <li><code>"auto"</code> buffers het mediabestand</li> - <li><code>"metadata"</code> buffers alleen de metagegevens van het bestand</li> -</ul> - -<p>Meerdere bronbestanden kunnen vastgelegd worden met behulp van het {{ HTMLElement("source") }} element om verschillende formaten in verschillende browsers te ondersteunen voor geluid of beeld. Bijvoorbeeld:</p> - -<pre class="brush: html"><video controls> - <source src="foo.ogg" type="video/ogg"> - <source src="foo.mp4" type="video/mp4"> - Het <code>video</code> element wordt niet ondersteund door uw browser. -</video> -</pre> - -<p>In dit voorbeeld wordt het Ogg-bestand afgespeeld in browsers die Ogg ondersteunen. Als de browser dat niet doet, wordt automatisch het MPEG-4-bestand gebruikt. Kijk ook naar de lijst met <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">media formaten die ondersteund worden door de audio en video elementen</a> in de diverse browsers.</p> - -<p><span id="result_box" lang="nl"><span class="hps">U kunt</span> <span class="hps">ook opgeven welke codes</span> <span class="hps">het mediabestand</span> <span class="hps">vereist</span><span>;</span> d<span class="hps">it</span> <span class="hps">maakt het mogelijk</span> voor <span class="hps">de</span> <span class="hps">browser</span> <span class="hps">om nog </span><span class="hps">intelligente</span>re <span class="hps">beslissingen te nemen</span></span>s:</p> - -<pre class="brush: html"><video controls> - <source src="foo.ogg" type="video/ogg; codecs=dirac, speex"> - Het <code>video</code> element wordt niet ondersteund door uw browser. -</video></pre> - -<p>We hebben hier vastgelegd dat deze via de Dirac en Speex codes gebruikt. Als de browser wel Ogg ondersteund, maar niet deze codes dan zal de video niet laden.</p> - -<p>Wanneer het <code>type</code> attribuut niet gespecificeerd is dan wordt het mediatype van de server gehaald en er wordt gecontroleerd of de browser er mee om kan gaan; als het niet weergegeven kan worden, zal de volgende <code>source</code> gecontroleerd worden. Wanneer niet een van de <code>source</code> elementen gebruik kan worden, wordt een <code>error</code> gebeurtenis naar het <code>video</code> element verzonden. Wanneer het <code>type</code> attribuut vastgelegd is, wordt deze vergeleken met de types die de browser kan afspelen en wanneer het niet herkend wordt, zal direct volgende <code>source</code> gecontroleerd worden. Er wordt dan dus niets via de server opgehaald of gecontroleerd.</p> - -<p>Bekijk ook <a href="/en-US/docs/DOM/Media_events" title="https://developer.mozilla.org/en/DOM/Media_events">Media gebeurtenissen</a> voor een complete lijst van gebeurtenissen die die aan het afspelen van media gekoppeld kunnen worden. Voor details van media formaten die ondersteund worden door de diverse browsers bekijk <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Media formaten die ondersteund worden door de audio en video elementen</a>.</p> - -<h2 id="Het_afspelen_van_media">Het afspelen van media</h2> - -<p>Als je eenmaal de media hebt ingebed in het HTML document met de nieuwe elementen kun je ze programma-technisch gaan besturen met JavaScript code. Een voorbeeld: om het afspelen te starten of the herstarten, kun je het volgende doen:</p> - -<pre class="brush: js">var v = document.getElementsByTagName("video")[0]; -v.play(); -</pre> - -<p>De eerste regel haalt het eerste video-element van het document op en de tweede regel roept de <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement#play()" title="nsIDOMHTMLMediaElement#play()"><code>play()</code></a> methode, zoals deze gedefinieerd is in de {{ interface("nsIDOMHTMLMediaElement") }} interface die gebruikt wordt om media-element te implementeren.</p> - -<p>Het besturen van een HTML5 audio element om af te spelen, te pauzeren, het volume te verhogen of te verlagen met gebruik van Javascript is eenvoudig.</p> - -<pre class="brush: html"><audio id="demo" src="audio.mp3"></audio> -<div> - <button onclick="document.getElementById('demo').play()">Audio afspelen</button> - <button onclick="document.getElementById('demo').pause()">Audio pauzeren</button> - <button onclick="document.getElementById('demo').volume+=0.1">Volume verhogen</button> - <button onclick="document.getElementById('demo').volume-=0.1">Volume verlagen</button> -</div> -</pre> - -<h2 id="Het_downloaden_van_media_stoppen">Het downloaden van media stoppen</h2> - -<p>Het afspelen stoppen van media is zo eenvoudig als het aanroepen van de de pause() methode, maar de browser zal blijven downloaden totdat het media-element wordt afgevoerd door de garbage collector.</p> - -<p>Bij deze de truck om het downloaden direct te stoppen:</p> - -<pre class="brush: js">var mediaElement = document.getElementById("myMediaElementID"); -mediaElement.pause(); -mediaElement.src=''; -//or -mediaElement.<code>removeAttribute("src");</code> -</pre> - -<p>Door het <code>src</code> attribuut van het media-element te verwijderen (of deze met een lege string te vullen, dat kan van de browser afhangen) wordt de interne decoder van het element gesloopt en dat zal het downloaden doen stoppen. The specificaties zijn echter nog tamelijk onduidelijk wat betreft het removeAttribute() scenario en het leegmaken (lege string) van het <video> 'src' attribuut kan een ongewenst verzoek veroorzaken (Mozilla Firefox 22).</p> - -<h2 id="Het_doorzoeken_van_media">Het doorzoeken van media</h2> - -<p>Media elementen voorzien in ondersteuning van het wijzigen van de afspeelpositie naar specifieke punten in de inhoud van de media. Dit wordt gedaan via het invullen van de eigenschap <code>currentTime</code> op het element; zie hiervoor {{ domxref("HTMLMediaElement") }} voor meer details over de eigenschappen van een media-element. Zet eenvoudig de waarde op de tijd, in seconden, van de positie waarop het afspelen moet doorgaan.</p> - -<p>U gebruikt de eigenschap <code>seekable</code> om het gebied dat beschikbaar is te doorzoeken. De eigenschap retourneert een {{ domxref("TimeRanges") }} object waarbinnen een lijst bestaat met de tijden waarop gezocht kan worden.</p> - -<pre class="brush: js">var mediaElement = document.getElementById('mediaElementID'); -mediaElement.seekable.start(); // Retourneert de starttijd (in seconden) -mediaElement.seekable.end(); // Retourneert de einddtijd (in seconden) -mediaElement.currentTime = 122; // Ga naar 122 seconden -mediaElement.played.end(); // Retourneert het aantal seconden dat de browser heeft afgespeeld -</pre> - -<h2 id="Leg_het_afspeelgebied_vast">Leg het afspeelgebied vast</h2> - -<p><span id="result_box" lang="nl"><span class="hps">Bij het opgeven van</span> <span class="hps">de URI</span> <span class="hps">van de</span> <span class="hps">media voor</span> <span class="hps">een</span> <span class="hps atn">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>audio"</span><span>)}</span><span>} of</span> <span class="hps atn">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>video"</span><span>)</span><span>}</span><span>}</span> <span class="hps">element</span> <span class="hps">kunt</span> <span class="hps">u</span> <span class="hps">desgewenst</span> <span class="hps">aanvullende informatie</span> <span class="hps">geven</span> voor <span class="hps">het deel van de</span> <span class="hps">media</span> <span class="hps">dat afgespeeld moet worden</span><span>.</span> <span class="hps">Om dit te doen</span><span>, voeg</span> <span class="hps">een</span> <span class="hps">hekje</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>#</span><span>"</span><span>), gevolgd</span> <span class="hps">door de media</span> <span class="hps">fragment</span> <span class="hps">beschrijving</span><span>.</span><br> - <br> - <span class="hps">Een tijd</span>sgebied wordt <span class="hps">opgegeven</span> <span class="hps">met de syntaxis</span></span>:</p> - -<pre>#t=[starttime][,endtime]</pre> - -<p><span id="result_box" lang="nl"><span class="hps">De</span> <span class="hps">tijd kan worden</span> <span class="hps">opgegeven als een</span> <span class="hps">aantal seconden</span> <span class="hps atn">(</span><span>als een</span> <span class="hps">floating-point</span> <span class="hps">waarde) of</span> <span class="hps">als een</span> <span class="hps">uren</span> <span class="hps">/</span> <span class="hps">minuten</span> <span class="hps">/</span> <span class="hps">seconden</span> <span class="hps">tijd</span> <span class="hps">gescheiden</span> <span class="hps">met</span> <span class="hps">dubbele punten</span> <span class="hps atn">(</span><span>zoals</span> <span class="hps">02:05:01</span> <span class="hps">2 uur</span><span>,</span> <span class="hps">5</span> <span class="hps">minuten en</span> <span class="hps">1</span> <span class="hps">seconde)</span><span>.</span></span></p> - -<p>Een paar voorbeelden:</p> - -<dl> - <dt><span class="nowiki">http://foo.com/video.ogg#t=10,20</span></dt> - <dd>Laat de video afspelen te beginnen bij 10 seconden en ga door tot en met de 20 seconden.</dd> - <dt><span class="nowiki">http://foo.com/video.ogg#t=,10.5</span></dt> - <dd>Speel de video af vanaf het begin tot en met 10,5 seconden.</dd> - <dt><span class="nowiki">http://foo.com/video.ogg#t=,02:00:00</span></dt> - <dd>Speel de video af vanaf het begin en voor de duur van 2 uur.</dd> - <dt><span class="nowiki">http://foo.com/video.ogg#t=60</span></dt> - <dd>Speel de video af vanaf de 60ste seconden en speel tot het einde.</dd> -</dl> - -<div class="note"> -<p>The playback range portion of the media element URI specification was added to Gecko 9.0 {{ geckoRelease("9.0") }}. At this time, this is the only part of the <a class="external" href="http://www.w3.org/TR/media-frags/" title="http://www.w3.org/TR/media-frags/">Media Fragments URI specification</a> implemented by Gecko, and it can only be used when specifying the source for media elements, and not in the address bar.</p> -</div> - -<h2 id="Uitwijkmogelijkheden">Uitwijkmogelijkheden</h2> - -<p><span id="result_box" lang="nl"><span class="hps">HTML</span> <span class="hps">opgenomen</span> <span class="hps">tussen</span> <span class="hps">bijvoorbeeld</span> <span class="hps">de openings- en de sluit</span><span class="hps">tags van</span> <span class="hps">media-elementen</span> <span class="hps">wordt verwerkt</span> <span class="hps">door browsers</span> <span class="hps">die geen ondersteuning hebben voor</span> <span class="hps">HTML5</span> <span class="hps">media</span><span>.</span> <span class="hps">U kunt profiteren</span> <span class="hps">van dit feit</span> <span class="hps">om alternatieve</span> <span class="hps">fallback</span> <span class="hps">media</span> <span class="hps">te bieden</span> <span class="hps">voor die</span> <span class="hps">browsers</span><span>.</span><br> - <br> - <span class="hps">Dit gedeelte bevat</span> <span class="hps">twee mogelijke</span> <span class="hps">fallback</span> <span class="hps">opties</span> <span class="hps">voor video</span>. Voor<span class="hps"> elk</span> <span class="hps">geval</span><span>,</span> als <span class="hps">de</span> <span class="hps">browser HTML5</span> <span class="hps">video</span></span><span lang="nl"> <span class="hps">ondersteunt</span><span>,</span> dan wordt die <span class="hps">gebruikt</span><span>;</span> <span class="hps">in alle andere gevallen wordt </span><span class="hps">de optie</span> <span class="hps">fallback</span> <span class="hps">gebruikt</span><span>.</span></span></p> - -<h3 id="Het_gebruik_van_Flash">Het gebruik van Flash</h3> - -<p><span id="result_box" lang="nl"><span class="hps">U kunt</span> <span class="hps">Flash</span> <span class="hps">gebruiken om een</span> <span class="hps">Flash-formaat</span> <span class="hps">film af te spelen</span> <span class="hps">als de</span> <span class="hps atn">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>video"</span><span>)</span><span>}</span><span>}</span> <span class="hps">element</span> <span class="hps">niet wordt ondersteund</span><span>:</span></span></p> - -<pre class="brush: html"><video src="video.ogv" controls> - <object data="flvplayer.swf" type="application/x-shockwave-flash"> - <param value="flvplayer.swf" name="movie"/> - </object> -</video></pre> - -<p><span id="result_box" lang="nl"><span class="hps">NB: gebruik geen</span> </span><code>classid</code><span lang="nl"> <span class="hps">in het object</span><span>-tag</span> <span class="hps">om</span> <span class="hps">compatibel te zijn/blijven met andere</span> <span class="hps">browsers dan Internet Explorer</span></span>.</p> - -<h3 id="Ogg_videos_afspelen_met_gebruik_van_een_Java_applet">Ogg videos afspelen met gebruik van een Java applet</h3> - -<p>Er is een Java applet<a class="external" href="http://maikmerten.livejournal.com/2256.html" title="http://maikmerten.livejournal.com/2256.html">Cortado</a> die je kunt gebruiken las uitwijkmogelijkheid voor het afspelen van Ogg videos in browsers die Java ondersteunen, maar dat niet doen voor HTML5 video:</p> - -<pre class="brush: html"><video src="my_ogg_video.ogg" controls width="320" height="240"> - <object type="application/x-java-applet" width="320" height="240"> - <param name="archive" value="cortado.jar"> - <param name="code" value="com.fluendo.player.Cortado.class"> - <param name="url" value="my_ogg_video.ogg"> - <p>You need to install Java to play this file.</p> - </object> -</video></pre> - -<p><span id="result_box" lang="nl"><span class="hps">Als u geen</span><span class="hps"> alternatief</span> <span class="hps">kind</span>-<span class="hps">element</span> creëert <span class="hps">van</span> het <span class="hps">cortado</span> <span class="hps">object</span> <span class="hps">element, zoals</span> het <span class="hps atn">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="hps atn">(</span><span class="hps">"p"</span><span>)</span><span>}</span><span>}</span> <span class="hps">element</span> <span class="hps">hierboven</span><span>, dan zullen</span> <span class="hps">FireFox</span> <span class="hps">3.5</span> <span class="hps">installaties die</span> <span class="hps">de video</span> <span class="hps">native</span> <span class="hps">behandelen, maar</span> <span class="hps">geen</span> <span class="hps">Java</span> <span class="hps">geïnstalleerd</span> hebben ten <span class="hps">onrechte</span> <span class="hps">de</span> <span class="hps">gebruiker informeren</span> <span class="hps">dat ze een </span><span class="hps">plugin</span> <span class="hps">moeten installeren om</span> <span class="hps">de inhoud</span> <span class="hps">op</span> <span class="hps">de</span> <span class="hps">pagina te bekijken</span><span>.</span></span></p> - -<p>{{ h1_gecko_minversion("Foutafhandeling", "2.0") }}</p> - -<p>Met ingang van Gecko 2.0 is de foutafhandeling is herzien om te voldoen aan de meest recente versie van de HTML5 specificaties. De <code>error</code> gebeurtenis wordt nu naar afgeleverd bij het kind-element dat behoort bij de bron die de fout laat ontstaan in plaats van bij het media-element zelf.</p> - -<p>Dit zorgt er voor dat u kunt bepalen welke bron niet geladen werd, dit kan nuttig zijn. Bekijk deze HTML maar eens:</p> - -<pre class="brush: html"><video> -<source id="mp4_src" - src="video.mp4" - type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> -</source> -<source id="3gp_src" - src="video.3gp" - type='video/3gpp; codecs="mp4v.20.8, samr"'> -</source> -<source id="ogg_src" - src="video.ogv" - type='video/ogg; codecs="theora, vorbis"'> -</source> -</video></pre> - -<p>Omdat Firefox MP4 en 3GP niet ondersteunt vanwege principe van patentbezwaren zullen {{ HTMLElement("source") }} elementen met de ID's "mp4_src" en "3gp_src" in een <code>error</code> gebeurtenis lopen voordat de Ogg bron geladen wordt. De bronnen worden uitgevoerd in de volgorde waarin ze staan en wanneer er eenmaal een succesvol geladen is dan worden de overige bronnen helemaal niet meer geraadpleegd.</p> - -<h3 id="Detecteren_of_er_geen_bronnen_zijn_geladen">Detecteren of er geen bronnen zijn geladen</h3> - -<p>Om vast te stellen dat niet een {{ HTMLElement("source") }} kindelement is geladen kunt u de waarde van het attribuut <code>networkState</code> van het media-element controleren, Wanneer de waarde <code>HTMLMediaElement.NETWORK_NO_SOURCE</code> is dan weet u dat geen van de bronnen geladen is.</p> - -<p>Op dat punt gekomen kunt u een andere bron invoegen met behulp van een nieuw {{ HTMLElement("source") }} element als child van het media element en Gecko zal een poging doen om die bron te laden.</p> - -<h3 id="Inhoud_tonen_wanneer_geen_bron_gedecodeerd_kon_worden">Inhoud tonen wanneer geen bron gedecodeerd kon worden</h3> - -<p><span id="result_box" lang="nl"><span class="hps">Een andere manier om</span> <span class="hps">de</span> <span class="hps">fallback</span> <span class="hps">inhoud</span> van <span class="hps">een video te tonen</span> <span class="hps">als geen van</span> <span class="hps">de</span> <span class="hps">bronnen</span> <span class="hps">kan</span> <span class="hps">worden</span> <span class="hps">gedecodeerd</span> <span class="hps">in</span> <span class="hps">de</span> <span class="hps">huidige</span> <span class="hps">browser</span><span>'s is het</span> <span class="hps">toevoegen</span>van foutafhandeling in <span class="hps">het</span> <span class="hps">laatste</span> <span class="hps">bronelement</span><span>.</span> <span class="hps">Dan kunt u de</span> <span class="hps">video</span> <span class="hps">vervangen</span> <span class="hps">met zijn</span> <span class="hps">fallback</span> <span class="hps">inhoud</span></span>:</p> - -<pre class="brush: html"><video controls> - <source src="dynamicsearch.mp4" type="video/mp4"></source> - <a href="dynamicsearch.mp4"> - <img src="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS"> - </a> - <p><span id="result_box" lang="nl"><span class="hps">Klik op de afbeelding</span> <span class="hps">om een video</span> <span class="hps">demo van</span> een <span class="hps">dynamische</span> <span class="hps">app</span> <span class="hps">zoekopdracht</span> af te <span class="hps">spelen</span></span></p> -</video> - -</pre> - -<pre class="brush: js">var v = document.querySelector('video'), - sources = v.querySelectorAll('source'), - lastsource = sources[sources.length-1]; -lastsource.addEventListener('error', function(ev) { - var d = document.createElement('div'); - d.innerHTML = v.innerHTML; - v.parentNode.replaceChild(d, v); -}, false); -</pre> - -<h2 id="Bekijk_ook">Bekijk ook</h2> - -<ul> - <li>De HTML elementen voor media: {{ HTMLElement("audio") }}, {{ HTMLElement("video") }}, {{ HTMLElement("source") }};</li> - <li><a href="/en-US/docs/Manipulating_video_using_canvas" title="Manipulating video using canvas">Het manipuleren van video met beulp van canvas</a></li> - <li><a href="/en-US/docs/Introducing_the_Audio_API_Extension" title="Introducing the Audio API Extension">Introductie van de Audio API Extension</a></li> - <li>{{ interface("nsIDOMHTMLMediaElement") }}</li> - <li><a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">Media formats die ondersteuend worden door de audio en video elementen</a></li> - <li><a class="external" href="http://en.flossmanuals.net/ogg-theora/" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a></li> - <li><a class="external" href="http://popcornjs.org/" title="http://popcornjs.org/">Popcorn.js - The HTML5 Media Framework</a></li> - <li><a class="external" href="http://www.html5video.org/kaltura-html5/" title="http://www.html5video.org/kaltura-html5/">Kaltura Video Library Solution</a>, een JavaScript bibliotheek (mwEmbed) die een naadloze uitwijkmogelijkheid ondersteund voor HTML5, VLC Player, Java Cortado en OMTK Flash Vorbis player (wordt gebruikt door Wikimedia).</li> - <li><a class="external" href="http://omtk.org/flash/index.html" title="http://omtk.org/flash/index.html">OMTK - Flash</a>, een Flash bibliotheek die een Vorbis decoder implementeert</li> - <li><a class="external" href="http://www.projekktor.com" title="http://www.projekktor.com">Projekktor Player</a>, een JavaScript wrapper voor audio- and video-tags met flash fallback, open source, GPL</li> - <li><a class="external" href="http://www.theora.org/cortado/" title="http://www.theora.org/cortado/">Applet Cortado</a>, een audio/video playback oplossing in Java die wordt onderhouden door Xiph.org</li> - <li><a class="external" href="http://videojs.com" title="Video.js HTML5 Video Player">Video.JS</a>, een open source HTML5 video player en framework.</li> - <li><a class="external" href="http://mediaelementjs.com/" title="http://mediaelementjs.com/">MediaElement.js</a> - open source HTML5 audio/video framework met een aangepaste Flash shim API die HTML5 media nabootst tbv oudere browsers.</li> - <li><a class="external" href="http://www.hdwebplayer.com" title="http://www.hdwebplayer.com">Flv Player</a> - HTML5 fallback support video player</li> - <li><a href="/en-US/docs/DASH_Adaptive_Streaming" title="/en-US/docs/DASH_Adaptive_Streaming">DASH - Dynamic Adaptive Streaming over HTTP</a> - tbv HTML5 video</li> - <li><a href="http://jPlayer.org">jPlayer</a> een open source audio en video libray voor jQuery enZepto</li> -</ul> diff --git a/files/nl/learn/html/tables/index.html b/files/nl/learn/html/tables/index.html deleted file mode 100644 index e508a954b0..0000000000 --- a/files/nl/learn/html/tables/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Tabellen in HTML -slug: Learn/HTML/Tables -tags: - - Artikel - - Beginner - - Gids - - HTML - - Landing - - Module - - Tabellen -translation_of: Learn/HTML/Tables ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Een standaardtaak in HTML is het structeren data in tabelvorm. HTML heeft een aantal elementen en attributen speciaal voor deze bedoeling. Gecombineerd met een beetje <a href="/nl/docs/Learn/CSS">CSS</a> voor de opmaak, maakt HTML het gemakkelijk om tabellen met informatie weer te geven op het web, zoals een lesplan voor onderwijs, het rooster van het plaatselijke zwembad, of statistieken over uw favoriete dinosauriërs of voetbalteam. Deze module vertelt u alles wat u nodig hebt over het strcuteren van data in tabelvorm door middel van HTML.</p> - -<h2 id="Randvoorwaarden">Randvoorwaarden</h2> - -<p>Voordat u begint met deze module hebt u basiskennis nodig van HTML — zie <a href="/nl/docs/Learn/HTML/Introduction_to_HTML">Een inleiding op HTML</a>.</p> - -<div class="note"> -<p><strong>Opmerking</strong>: Als u werkt op een computer/tablet/ander apparaat waar u niet uw eigen bestanden kunt aanmaken, kunt u de (meeste) codevoorbeelden uitproberen in een online codeerprogramma zoals <a href="http://jsbin.com/">JSBin</a> of <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="Gidsen">Gidsen</h2> - -<p>Deze module bevat de volgende artikelen:</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Tables/Basics">De basis van tabellen in HTML</a></dt> - <dd>Dit artikel helpt u te beginnen met HTML-tabellen. Het dekt de basisbeginselen zoals rijen en cellen, headings, hoe u kunt zorgen dat cellen zich verspreiden over meerdere kolommen en rijen, en hoe u alle cellen kunt groeperen in een kolom voor de opmaak.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Tables/Advanced">Geavanceerde functies en toegankelijkheid in HTML-tabellen</a></dt> - <dd>In het tweede artikel van deze module kijken we samen naar de meer geavanceerde functies van HTML-tabellen, zoals onderschriften/samenvattingen, het groeperen van rijen in head-, body- en footersecties, en we kijken naar de toegankelijkheid van tabellen voor slechtziende gebruikers.</dd> -</dl> - -<h2 id="Assessments">Assessments</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Data van planeten structureren</a></dt> - <dd>In ons assessment over tabellen geven we u wat data over de planeten in ons zonnestelsel, die u kunt structureren in een HTML-tabel.</dd> -</dl> diff --git a/files/nl/learn/index.html b/files/nl/learn/index.html deleted file mode 100644 index b64f56b730..0000000000 --- a/files/nl/learn/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Webontwikkeling leren -slug: Learn -tags: - - Beginner - - Index - - Landing - - Learn - - Web -translation_of: Learn ---- -<div class="summary"> -<p>Wil je jouw eigen websites en webtoepassingen maken? Dan ben je op de juiste plaats!</p> -</div> - -<p>Er is veel te leren over webdesign en -ontwikkeling, maar geen zorgen. We zijn er om je te helpen, of je nu maar pas code leert kennen of een volleerde professionele ontwikkelaar aan het worden bent.</p> - -<p>{{LearnBox({"title":"Snel leren: Woordenschat"})}}</p> - -<h2 id="Waar_starten">Waar starten</h2> - -<p>We willen je tegemoetkomen waar je staat. Welke beschrijving past best bij jou?</p> - -<ul class="card-grid"> - <li><span>Ik ben een beginner</span> - - <p>Welkom! De beste plaats om te starten is onze reeks <a href="/en-US/Learn/Getting_started_with_the_web">"Van start met het Web"</a>. Het leert je alle basiskennis om je op weg te zetten voor webontwikkeling.</p> - </li> - <li><span>Ik ken webtechnologie</span> - <p>Heel goed! In dat geval stellen we voor dat je wat dieper graaft in de technologie die aan de basis ligt van het Web: <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, en <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</p> - </li> - <li><span>Ik beheers webtechnologie</span> - <p>Fantastisch! In dat geval ben je misschien geïnteresseerd in het ontdekken van onze geavanceerde <a href="/en-US/docs/Web/Guide">Gidsen</a> en <a href="/en-US/docs/Web/Tutorials">Handleidingen</a>. Je zou ook kunnen <a href="/en-US/Learn/How_to_contribute"> bijdragen aan de Leerzone</a>. ;)</p> - </li> -</ul> - -<div class="note"> -<p><strong>Noot</strong>: In de toekomst plannen we om meer leerpaden te publiceren, bijvoorbeeld voor ervaren programmeurs die specifieke geavanceerde technieken leren, specifieke platformontwikkelaars die niet bekend zijn met het Web, of mensen die designtechnieken willen leren.</p> -</div> - -<h2 id="Leren_met_andere_mensen">Leren met andere mensen</h2> - -<p>Als je een vraag hebt, of je nog niet goed weet waar naartoe, Mozilla is een wereldwijde gemeenschap van webenthousiastelingen, met mentors en leraars die blij zijn je te kunnen helpen. Maak contact via WebMaker:</p> - -<ul> - <li>Ontmoet en spreek met mentors en leraars op het <a href="http://discourse.webmaker.org/" rel="external">discourse forum</a>.</li> - <li><a href="https://events.webmaker.org/">Vind evenementen</a> en leer het web met geweldige mensen.</li> -</ul> - -<h2 id="Kennis_delen">Kennis delen</h2> - -<p>Deze hele Leerzone is gebouwd door onze bijdragers. We hebben je nodig in ons team, of je nu een beginner, een leerkracht of een ervaren webontwikkelaar bent. Als je geïnteresseerd bent, kijk dan eens <a href="/en-US/Learn/How_to_contribute">hoe je kan helpen</a>, en we moedigen je aan om met ons te praten in onze <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">mailinglijsten</a> of <a href="/en-US/docs/MDN/Community#Get_into_IRC">het IRC kanaal</a>. :)</p> - -<h2 id="Subnavigatie">Subnavigatie</h2> - -<ol> - <li><a href="/en-US/Learn/Getting_started_with_the_web">Van start met het web</a></li> - <li><a href="/en-US/Learn/Skills">Leren over het web</a> - <ol> - <li><a href="https://webmaker.org/en-US/literacy" rel="external">Webgeletterdheidskaart</a></li> - <li><a href="/en-US/Learn/Web_Mechanics">Webmechanismes</a></li> - <li><a href="/en-US/Learn/Infrastructure">Infrastructuur</a></li> - <li><a href="/en-US/Learn/Coding-Scripting">Programmeren & Scripts</a></li> - <li><a href="/en-US/Learn/Design_and_Accessibility">Design & Toegankelijkheid</a></li> - <li><a href="/en-US/Learn/Composing_for_the_web">Schrijven & plannen</a></li> - </ol> - </li> - <li><a href="#">Leer technologieën</a> - <ol> - <li><a href="/en-US/Learn/HTML">HTML</a></li> - <li><a href="/en-US/Learn/CSS">CSS</a></li> - <li><a href="/en-US/Learn/JavaScript">JavaScript</a></li> - <li><a href="/en-US/Learn/Python">Python</a></li> - </ol> - </li> - <li><a href="/en-US/Learn/tutorial">Leerhandleidingen</a> - <ol> - <li><a href="/en-US/Learn/tutorial/How_to_build_a_web_site">Hoe maak je een website?</a></li> - </ol> - </li> - <li><a href="http://weblitmapper.webmakerprototypes.org/">Leerhulpmiddelen</a></li> - <li><a href="/en-US/Learn/help">Hulp krijgen</a> - <ol> - <li><a href="/en-US/Learn/FAQ">Veelgestelde vragen</a></li> - <li><a href="/en-US/docs/Glossary">Woordenlijst</a></li> - <li><a href="http://discourse.webmakerprototypes.org/" rel="external">Stel jouw vragen</a></li> - <li><a href="https://events.webmaker.org/" rel="external">Ontmoet leraars en mentors</a></li> - </ol> - </li> - <li><a href="/en-US/Learn/How_to_contribute">Hoe bijdragen</a></li> -</ol> diff --git a/files/nl/learn/javascript/client-side_web_apis/index.html b/files/nl/learn/javascript/client-side_web_apis/index.html deleted file mode 100644 index 1dcb05cc57..0000000000 --- a/files/nl/learn/javascript/client-side_web_apis/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Client-side web APIs -slug: Learn/JavaScript/Client-side_web_APIs -tags: - - API - - Articles - - Beginner - - CodingScripting - - DOM - - Graphics - - JavaScript - - Landing - - Learn - - Media - - Module - - NeedsTranslation - - TopicStub - - WebAPI - - data -translation_of: Learn/JavaScript/Client-side_web_APIs ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">When writing client-side JavaScript for web sites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other web sites or services. In this module we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work. </p> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>To get the most out of this module, you should have worked your way through the previous JavaScript modules in the series (<a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>, and <a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript objects</a>). Those modules involve quite a lot of simple API usage anyway, as it is difficult to write client-side JavaScript examples that do anything useful without them! Here we go up a level, assuming knowledge of the core JavaScript language and exploring common Web APIs in a bit more detail.</p> - -<p>Basic knowledge of <a href="/en-US/docs/Learn/HTML">HTML</a> and <a href="/en-US/docs/Learn/CSS">CSS</a> would also be useful.</p> - -<div class="note"> -<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introduction to web APIs</a></dt> - <dd>First up, we'll start by looking at APIs from a high level — what are they, how do they work, how do you use them in your code, and how are they structured? We'll also take a look at what the different main classes of APIs are, and what kind of uses they have.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating documents</a></dt> - <dd>When writing web pages and apps, one of the most common things you'll want to do is manipulate web documents in some way. This is usually done by using the Document Object Model (DOM), a set of APIs for controlling HTML and styling information that makes heavy use of the {{domxref("Document")}} object. In this article we'll look at how to use the DOM in detail, along with some other interesting APIs that can alter your environment in interesting ways.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a></dt> - <dd>Another very common task in modern websites and applications is retrieving individual data items from the server to update sections of a webpage without having to load an entire new page. This seemingly small detail has had a huge impact on the performance and behaviour of sites, so in this article we''ll explain the concept, and look at technologies that make it possible, such as {{domxref("XMLHttpRequest")}} and the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third party APIs</a></dt> - <dd>The APIs we've covered so far are built into the browser, but not all APIs are. Many large websites and services such as Google Maps, Twitter, Facebook, PayPal, etc. provide APIs allowing developers to make use of their data (e.g. displaying your twitter stream on your blog) or services (e.g. displaying custom Google Maps on your site, or using Facebook login to log in your users). This article looks at the difference between browser APIs and 3rd party APIs, and shows some typical uses of the latter.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></dt> - <dd>The browser contains some very powerful graphics programming tools, from the Scalable Vector Graphics (<a href="/en-US/docs/Web/SVG">SVG</a>) language, to APIs for drawing on HTML {{htmlelement("canvas")}} elements, (see <a href="/en-US/docs/Web/API/Canvas_API">The Canvas API</a> and <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>). Ths article provides an introduction to canvas, and further resources to allow you to learn more.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video and audio APIs</a></dt> - <dd>HTML5 comes with elements for embedding rich media in documents — {{htmlelement("video")}} and {{htmlelement("audio")}} — which in turn come with their own APIs for controlling playback, seeking, etc. This article shows you how to do common tasks such as creating custom playback controls.</dd> - <dt>Device APIs</dt> - <dd>Modern web-browsing devices have many features that are useful for web apps to take advantage of, for example accessing the device's location data so you plot your position on a map, or telling the user that a useful update is available via system notifications or vibration hardware. This article looks at what is available, and goes through a few common use cases.</dd> - <dt>Client-side storage APIs</dt> - <dd>Most modern web browsers come with the ability to store structured data on the client-side, which is very useful if you want to create an app that will save its state between page loads, and perhaps even work when the device is offline. This article looks at the available options.</dd> -</dl> diff --git a/files/nl/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/nl/learn/javascript/client-side_web_apis/manipulating_documents/index.html deleted file mode 100644 index db710ceb48..0000000000 --- a/files/nl/learn/javascript/client-side_web_apis/manipulating_documents/index.html +++ /dev/null @@ -1,306 +0,0 @@ ---- -title: Documenten manipuleren -slug: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -original_slug: Learn/JavaScript/Client-side_web_APIs/Manipuleren_documenten ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}</div> - -<p class="summary">Als je een webpagina of app ontwerpt, zal je regelmatig de documentstructuur van je site willen manipuleren. Het zal een van je meest voorkomende taken zijn. Meestal doen we dit met het Document Object Model (DOM). Het DOM is een reeks APIs waarmee we de HTML van onze pagina kunnen controleren en de informatie erin opmaken met allerlei stijlelementen. Het DOM maakt vooral gebruik van het {{domxref("Document")}} object. In dit artikel leren we hoe we hoe we het DOM kunnen gebruiken en we bekijken een aantal interessante APIs waarmee we onze webomgeving op een interessante manier kunnen veranderen.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Vereiste kennis:</th> - <td>Basiskennis van een computer, basisbegrippen van HTML, CSS en Javascript, inclusief Javascript objecten.</td> - </tr> - <tr> - <th scope="row">Doelstelling:</th> - <td> - <p>Vertrouwd worden met de kern APIs van het DOM en met de andere APIs die meestal met het DOM en documentmanipulatie worden geassociëerd.</p> - </td> - </tr> - </tbody> -</table> - -<h2 id="De_belangrijke_onderdelen_van_een_webbrowser">De belangrijke onderdelen van een webbrowser </h2> - -<p>Web browsers bestaan uit zeer complexe software met vele bewegende onderdelen erin. Veel van die delen kunnen niet worden gecontrolleerd of gemanipuleerd door een webontwikkelaar die Javascript gebruikt. Je zou kunnen veronderstellen dat dat slecht is, maar er zijn goede redenen voor het vergrendelen van browsers. De meeste ervan draaien rond veiligheid. Beeld je je een website in die zomaar toegang zou kunnen hebben tot je opgeslagen paswoorden of andere gevoelige informatie en zou kunnen inloggen op websites alsof hij jou was? </p> - -<p>Ondanks de beperkingen geven Web APIs ons toegang tot heel wat functionaliteit die ons in staat stelt vele dingen te doen met webpagina's. Er zijn een aantal evidente onderdelen waar je regelmatig naar zult verwijzen in je code. In het volgende diagram vind je de belangrijkste onderdelen van een webbrowser die betrokken zijn bij de weergave van een webpagina :</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14557/document-window-navigator.png" style="display: block; margin: 0 auto;"></p> - -<ul> - <li>Het venster (of window) is de tabpagina van je webbrowser waarin je webpagina is geladen; deze wordt in Javascript voorgesteld door het {{domxref("Window")}} object. Dit object geeft je toegang tot allerlei methodes die bijvoorbeeld de afmetingen van het venster kunnen weergeven (zie {{domxref("Window.innerWidth")}} en {{domxref("Window.innerHeight")}}). Je kan het document dat in het venster is geladen, manipuleren. Je kan ook data opslaan die de ingeladen website genereert. Daarvoor kan je een lokale database aan de cliënt-zijde gebruiken maar er bestaan ook andere bergingsmechanismen. Je kan een <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#A_series_of_fortunate_events">event handler</a> aan het venster vastmaken en nog veel meer.</li> - <li>De navigator vertegenwoordigt de staat en de identiteit van de browser (i.e. de user-agent) zoals die in het web bestaat. In Javascript wordt de navigator voorgesteld door het {{domxref("Navigator")}} object. Je kan dit object gebruiken om allerlei informatie op te halen. Dit kunnen geolocatiegegevens zijn, de voorkeurstaal van de gebruiker, een media stream vanuit de webcam van de gebruiker enz.</li> - <li>Het document (in browsers weergegeven door het DOM) is de eigenlijke pagina die in het venster wordt geladen. We kennen het in Javascript als het {{domxref("Document")}} object. Je kan dit object gebruiken om informatie te verkrijgen over de HTML en CSS waaruit de pagina is opgebouwd en om die informatie te manipuleren. Het beschikt over methodes waarmee je naar een element in het DOM kan verwijzen en de inhoud van dat element veranderen. Je kan er ook een nieuwe stijl op toepassen, nieuwe elementen creëren en die aan het element toevoegen als zijn kinderen. Je kan het element zelfs helemaal verwijderen.</li> -</ul> - -<p>In dit artikel zullen we vooral aandacht besteden aan de manipulatie van het document, maar we zullen ook nog een paar andere nuttige zaken tonen.</p> - -<h2 id="Het_document_object_model">Het document object model</h2> - -<p>Het document dat in een van de browsertabs van je webbrowser is geladen, wordt weergegeven door het document object model. Dit model heeft een boomstructuur en wordt door de browser zelf gecrëerd. Deze voorstellingswijze maakt de HTML zeer toegankelijk voor programmeertalen. De browser zelf gebruikt het DOM om allerlei regels rond vormgeving en andere informatie op de HTML toe te passen terwijl het de pagina weergeeft. Ontwikkelaars zoals jij kunnen Javascriptcode schrijven die het DOM manipuleert nadat de pagina al is opgeladen in de browser.</p> - -<p>We hebben een eenvoudig voorbeeld gemaakt op <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example.html">bekijk het ook live</a>). Probeer dit voorbeeld in je browser te openen. Het is een zeer simpele pagina die een{{htmlelement("section")}} element bevat waarin je een afbeelding en paragraaf kan vinden. In de paragraaf zit ook nog een link. De html-broncode ziet er zo uit :</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Simple DOM example</title> - </head> - <body> - <section> - <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> - <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p> - </section> - </body> -</html></pre> - -<p>Het DOM daarentegen ziet er zo uit:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14559/dom-screenshot.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> - -<div class="note"> -<p><strong>Opmerking</strong>: Dit DOM boomdiagram werd gegenereerd met Ian Hickson's <a href="https://software.hixie.ch/utilities/js/live-dom-viewer/">Live DOM viewer</a>.</p> -</div> - -<p>Zoals je kan zien krijgen elk element en elk stukje tekst in het document een plek in de boomstructuur. Zo’n plek noemen we een knooppunt (in het Engels een node). Je zal ook verschillende termen tegenkomen die worden gebruikt om te beschrijven met welk type knooppunt we te maken hebben en termen die hun posititie in de boom en hun relatie met elkaar beschrijven.</p> - -<p>Je zal merken dat ik zowel Engelse als Nederlandse termen gebruik. Een vertaling kan zeer verhelderend zijn maar een woord als "afstammelingsknooppunt" vind ik veel te lang om nog werkbaar te zijn en als je het googelt, heb je nul resulaten. Ik eet dus een beetje van twee walletjes.</p> - -<ul> - <li><strong>Element node</strong> (elementknooppunt): Een element zoals het in het DOM bestaat.</li> - <li><strong>Root node</strong> (bronknooppunt): Het knooppunt dat bovenaan in de boom zit. Als het over HTML gaat, is dit altijd het <code>HTML</code>-knooppunt. (Andere opmaaktalen zoals SVG en custom XML zullen andere root nodes hebben.)</li> - <li><strong>Child node</strong> (kindknooppunt): Een knooppunt dat in een andere knooppunt is genest en er <em>direct</em> onder zit. <code>IMG</code> is bijvoorbeeld een kind van <code>SECTION</code> in het voorbeeld hierboven.</li> - <li><strong>Descendant node</strong> (afstammelingsknooppunt): Een knooppunt dat <em>ergens</em> in een andere node zit. <code>IMG</code> is bijvoorbeeld geen kind van <code>BODY</code> omdat het twee niveaus lager in de boom zit, maar het is wel een nakomeling van <code>BODY</code>.</li> - <li><strong>Parent node</strong> (ouderknooppunt): een knooppunt dat een ander knooppunt bevat. <code>BODY</code> is bijvoorbeeld het ouderknoopunt van <code>SECTION</code> in het voorbeeld hierboven.</li> - <li><strong>Sibling nodes</strong> (broerknooppunten): Knooppunten die zich op hetzelfde niveau in de DOM-boom bevinden. <code>IMG</code> en <code>P</code> zijn bijvoorbeeld elkaars broers in het voorbeeld hierboven.</li> - <li><strong>Text node</strong> (tekstknooppunt): Een knooppunt dat een tekst bevat (i.e. een string).</li> -</ul> - -<p>Het is nuttig om je deze terminologie eigen te maken vooraleer je met het DOM begint te werken omdat een aantal andere termen die je zult tegenkomen op vergelijkbare wijze zijn opgebouwd. Je bent ze misschien zelf al tegengekomen als je CSS hebt geleerd (bijv. descendant selector, child selector).</p> - -<h2 id="Actief_Leren_Eenvoudige_DOM-Manipulatie">Actief Leren: Eenvoudige DOM-Manipulatie</h2> - -<p>Onze eerste les over DOM-manipulatie beginnen we met een praktisch voorbeeld.</p> - -<ol> - <li>Maak een lokale kopie van de <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html pagina</a> en het <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dinosaur.png">beeld</a> dat erbij hoort.</li> - <li>Voeg net onder <code></body></code> een <code><script></script></code> element toe. (Let op, dus onder de tweede tag die het body-element afsluit!).</li> - <li>Om een element in het DOM te manipuleren, moet je het eerst selecteren en een verwijzing ernaar opslaan in een variabele. Om dat te doen, voeg je de volgende regel aan je script toe: - <pre class="brush: js">var link = document.querySelector('a');</pre> - </li> - <li>Nu we een verwijzing naar het element hebben opgeslagen in een variabele, kunnen we beginnen met een aantal eigenschappen en methodes die beschikbaar zijn gemaakt voor de manipulatie van het DOM. (Deze worden gedefiniëerd in interfaces zoals het {{domxref("HTMLAnchorElement")}} voor een {{htmlelement("a")}} element, zijn algemenere ouder-interface, het {{domxref("HTMLElement")}}, en {{domxref("Node")}} die alle knooppunten in het DOM vertegenwoordigt. Laat ons eerst en vooral de tekst in de hyperlink veranderen door de waarde van de {{domxref("Node.textContent")}}aan te passen. Voeg de volgende regel toe aan de vorige: - <pre class="brush: js">link.textContent = 'Mozilla Developer Network';</pre> - </li> - <li>We moeten ook de URL veranderen waar de hyperlink naar verwijst zodat die ons niet naar de verkeerde pagina brengt als we erop klikken. Voeg daarvoor de volgende regel toe: : - <pre class="brush: js">link.href = 'https://developer.mozilla.org';</pre> - </li> -</ol> - -<div> -<p>Opmerking : Zoals met zoveel in Javascript, zijn er vele manieren om een element te selecteren en om een verwijzing ernaar op te slaan in een variable. {{domxref("Document.querySelector()")}} is de aanbevolen moderne manier. Dat komt goed uit want deze methode laat je elementen selecteren met CSS-selectoren. De regel hierboven komt overeen met het eerste {{htmlelement("a")}} element dat in het document opduikt. Als je meer dan één element wil manipuleren, kan je {{domxref("Document.querySelectorAll()")}} gebruiken. Deze methode selecteert elk element in het document dat overeenkomt met de selector en slaat die op in een array.</p> - -<p>Er zijn ook oudere methodes beschikbaar om verwijzingen naar een element te grijpen, zoals:</p> - -<ul> - <li>{{domxref("Document.getElementById()")}}: selecteert een element via de waarde van het id-attribuut, bijvoorbeeld : <code><p id="myId">My paragraph</p></code>. Het ID wordt als parameter aan de functie doorgeven, <code>i.e.var elementRef = document.getElementById('myId')</code>.</li> - <li>{{domxref("Document.getElementsByTagName()")}}: brengt een array op die alle elementen van het gevraagde type bevat die zich in de pagina bevinden, bijvoorbeeld <code><p></code>s, <code><a></code>s, enz. Het type wordt ook als een parameter aan de functie doorgegeven, i.e. <code>var elementRefArray = document.getElementsByTagName('p')</code>.</li> -</ul> - -<p>Deze twee methoden werken in oudere browsers die moderne methoden zoals <code>querySelector()</code> niet zullen begrijpen maar ze zijn niet zo praktisch. Kijk maar eens rond en zie welke anderen je nog kan vinden.</p> -</div> - -<h3 id="Nieuwe_Knooppunten_(Nodes)_Creëren_en_Plaatsen">Nieuwe Knooppunten (Nodes) Creëren en Plaatsen</h3> - -<p>Hierboven heb je eens kunnen proeven van wat je kan doen, maar laat ons nu verder gaan en kijken hoe we nieuwe elementen kunnen creëren.</p> - -<ol> - <li>We gebruiken opnieuw ons laatste voorbeeld en maken een referentie naar ons {{htmlelement("section")}} element. Daarvoor voegen we de volgende code toe onderaan het script waar we mee bezig waren (doe ook hetzelfde met de volgende regels): - <pre class="brush: js">var sect = document.querySelector('section');</pre> - </li> - <li>Nu gaan we een nieuwe paragraaf creëren met {{domxref("Document.createElement()")}} en we gaan er wat tekst in steken op dezelfde manier die we ervoor hebben gebruikt: - <pre class="brush: js">var para = document.createElement('p'); -para.textContent = 'We hope you enjoyed the ride.';</pre> - </li> - <li>Nu kan je de nieuwe paragraaf aan het einde van de sectie vastmaken met {{domxref("Node.appendChild()")}}: - <pre class="brush: js">sect.appendChild(para);</pre> - </li> - <li>Als laatste stap van dit gedeelte, voegen we een tekstknooppunt aan de paragraaf toe waar de hyperlink in zit. Daarvoor creëren we eerst de textnode met {{domxref("Document.createTextNode()")}}: - <pre class="brush: js">var text = document.createTextNode(' — the premier source for web development knowledge.');</pre> - </li> - <li>Nu grijpen we een referentie naar de paragraaf waar de hyperlink in zit en maken het tekstknooppunt eraan vast : - <pre class="brush: js">var linkPara = document.querySelector('p'); -linkPara.appendChild(text);</pre> - </li> -</ol> - -<p>Dat is het meeste van wat je nodig hebt om knooppunten aan het DOM toe te voegen. Je zal deze methoden vaak gebruiken als je dynamische interfaces maakt (we zullen later een paar voorbeelden bekijken.</p> - -<h3 id="Elementen_Verplaatsen_en_Verwijderen">Elementen Verplaatsen en Verwijderen</h3> - -<p>Het zal regelmatig nodig zijn om knooppunten te verplaatsen of zelfs helemaal uit het DOM te verwijderen. En dat is natuurlijk mogelijk.</p> - -<p>Stel dat we de paragraaf met de hyperlink naar het einde van de sectie willen verplaatsen, dan doen we gewoon dit:</p> - -<pre class="brush: js">sect.appendChild(linkPara);</pre> - -<p>Dit verplaatst de paragraaf naar het einde van het <section> element. Je zou denken dat het een tweede kopie van de paragraaf zou maken, maar dat is niet het geval. linkPara is een referentie naar de enige kopie van die paragraaf. Als je een kopie zou willen maken en die ook nog toevoegen, zou je in de plaats daarvan {{domxref("Node.cloneNode()")}} moeten gebruiken.</p> - -<p>Een knooppunt is ook heel makkelijk te verwijderen, ten minste als je een verwijzing naar het knooppunt en zijn ouder hebt. In ons voorbeeld kunnen we gewoon {{domxref("Node.removeChild()")}} gebruiken:</p> - -<pre>sect.removeChild(linkPara);</pre> - -<p>Het wordt iets complexer als je een knooppunt wil verwijderen dat is gebaseerd op een verwijzing naar zichzelf, wat vrij vaak voorkomt. Er bestaat geen methode die een knooppunt vertelt zichzelf te verwijderen en dus moet je het volgende doen:</p> - -<pre class="brush: js">linkPara.parentNode.removeChild(linkPara);</pre> - -<p>Probeer nu deze regels uit in je de code van het voorbeeld en bekijk het resultaat.</p> - -<h3 id="Stijl_Manipuleren">Stijl Manipuleren</h3> - -<p>Het is mogelijk om de CSS van je webpagina op verschillende manieren te manipuleren met Javascript.</p> - -<p>Om te beginnen kan je met {{domxref("Document.stylesheets")}} een lijst opvragen van alle stijlbladen die aan je document vasthangen. Deze methode brengt ons een array van {{domxref("CSSStyleSheet")}} objecten op. Je kan dan naar wens stijlelementen toevoegen en verwijderen. We gaan echter niet dieper in op deze methodes omdat ze een beetje archaïsch zijn en nogal lastig in het gebruik. Er bestaan veel gemakkelijker methoden.</p> - -<p>De eerste manier is om inline-stijlen onmiddellijk aan de elementen toe te voegen die je dynamisch wil vormgeven. Dit wordt met {{domxref("HTMLElement.style")}} gedaan, die inline stijlinformatie over elk element in het document bevat. Je kan de eigenschappen van dit object bepalen en zo direct de stijl van je elementen bijwerken.</p> - -<ol> - <li>Voeg de volgende regels toe aan het voorbeeld waar we mee bezig zijn: - <pre class="brush: js">para.style.color = 'white'; -para.style.backgroundColor = 'black'; -para.style.padding = '10px'; -para.style.width = '250px'; -para.style.textAlign = 'center';</pre> - </li> - <li>Vernieuw de pagina en je zal zien dat de verschillende stijlen zijn toegepast op de paragraaf. Als je de paragraaf in je browser's <a href="/en-US/docs/Tools/Page_Inspector">Page Inspector/DOM inspector</a> bekijkt, zal je zien dat deze stijlregels inderdaad inline in je document worden toegevoegd: - <pre class="brush: html"><p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;">We hope you enjoyed the ride.</p></pre> - </li> -</ol> - -<div class="note"> -<p><strong>Opmerking</strong>: Let op hoe de Javascript versie van CSS-eigenschapen in lower camel case (*) wordt geschreven terwijl de CSS-versies een koppelteken krijgen (bijv. <code>backgroundColor</code> versus <code>background-color</code>). Let erop deze niet met elkaar te verwarren, anders zullen ze niet werken.<br> - (*) De woorden worden aan elkaar geschreven en vanaf het tweede woord begint elk woord met een hoofdletter.</p> -</div> - -<p>Er is nog een algemeen aanvaarde manier om je stijlen dynamisch in je document te manipuleren en die gaan we nu bekijken:</p> - -<ol> - <li>Verwijder de vorige vijf regels die je aan je JavaScript hebt toegevoegd.</li> - <li>Voeg de volgende regels toe aan je HTML {{htmlelement("head")}}: - <pre><style> -.highlight { - color: white; - background-color: black; - padding: 10px; - width: 250px; - text-align: center; -} -</style></pre> - </li> - <li>Nu gaan we een zeer nuttig methode gebruiken voor algemene HTML-manipulatie : {{domxref("Element.setAttribute()")}}. Deze methode krijgt twee argumenten: het attribuut dat je aan het element wil vasthangen en de waarde die je het attribuut wenst te geven. In dit geval geven we onze paragraaf een klasse die de waarde ‘highlight’ krijgt. - <pre class="brush: js">para.setAttribute('class', 'highlight');</pre> - </li> - <li>Vernieuw je pagina en je zult geen verandering zien; de CSS wordt nog steeds op de paragraaf toegepast. Deze keer gebeurt dat echter omdat we de paragraaf een klasse geven die wordt geselecteerd door onze CSS-regel, niet door het gebruik van een inline CSS-stijl.</li> -</ol> - -<p>Welke methode je kiest hangt van jou af; beide hebben hun voordelen en nadelen. De eerste methode vereist minder gedoe en is goed voor eenvoudig gebruik. De tweede is meer voor de puristen onder ons. (CSS en Javascript worden niet met elkaar vermengd want er zijn geen inline-regels. Inline-stijl wordt als een slechte gewoonte beschouwd). Als je grotere en complexere apps begint te bouwen, zal je waarschijnlijk de tweede methode gaan gebruiken, maar het is echt helemaal jouw beslissing.</p> - -<p>Tot nu toe hebben we nog niet echt iets nuttigs gedaan! Het is zinloos om Javascript te gebruiken voor de creatie van statische inhoud – je kan die toch net zo goed in je HTML schrijven zonder Javascript te gebruiken. Het is ingewikkelder dan HTML en als je de inhoud met Javascript maakt, zijn er ook nog andere problemen mee verbonden (de Javascript-code is bijvoorbeeld onleesbaar voor zoekmachines).</p> - -<p>In de volgende secties zullen we paar praktische manieren zien waarop we DOM APIs kunnen gebruiken.</p> - -<div class="note"> -<p><strong>Opmerking</strong>: Je kan onze <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example-manipulated.html">afgewerkte versie van het dom-example.html</a> op GitHub vinden. (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html">bekijk het ook live</a>).</p> -</div> - -<h2 id="Actief_Leren_Nuttige_informatie_uit_het_window_object_halen.">Actief Leren: Nuttige informatie uit het window object halen.</h2> - -<p>Tot nu toe hebben enkel de kenmerken van {{domxref("Node")}} en {{domxref("Document")}} bekeken om documenten te manipuleren, maar er is geen reden waarom je geen data uit andere bronnen zou kunnen halen en die in je UI gebruiken. Denk eens even terug aan onze eenvoudige <a href="http://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html">maps-example.html</a> demo uit het vorige artikel. We hadden locatiedata gevonden en die gebruikt om een map van jouw streek te maken. Je moet er gewoon voor zorgen dat je data het juiste formaat heeft. Javascript maakt het gemakkelijker dan vele andere talen om dat te doen want het gebruikt zwakke types; nummers zullen bijvoorbeeld gemakkelijk in strings kunnen worden omgezet als je ze in je scherm wil afdrukken.</p> - -<p>In dit voorbeeld zullen we een probleem oplossen dat vaak voorkomt : ervoor zorgen dat je applicatie even groot is als het window waarin het wordt bekeken, wat dan ook de grootte van dat venster mag zijn. Dit is vaak nuttig in situaties zoals spelletjes, waarin je zoveel mogelijk gebruik van de schermgrootte wil kunnen maken om het spel erin te spelen.</p> - -<p>Om te beginnen maken we een lokale kopie van twee demo-bestanden: <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example.html">window-resize-example.html</a> en <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/bgtile.png">bgtile.png</a>. Open ze en bekijk ze eens. Je zal zien een {{htmlelement("div")}} element zien dat een klein deel van het scherm beslaat. Op de achtergrond van het scherm wordt een tegel toegepast. Dit gaan we gebruiken om het UI-gebied van onze app weer te geven.</p> - -<ol> - <li>Grijp eerst en vooral een referentie naar de div en dan naar de breedte en hoogte van het viewport (het venster waar we je document in zien zitten). Die sla je op in variabelen. Deze twee waarden worden handig opgeslagen in twee eigenschappen: {{domxref("Window.innerWidth")}} en {{domxref("Window.innerHeight")}}. Voeg de volgende regels toe aan je {{htmlelement("script")}}: - <pre class="brush: js">var div = document.querySelector('div'); -var WIDTH = window.innerWidth; -var HEIGHT = window.innerHeight;</pre> - </li> - <li>Daarna gaan we de breedte en de hoogte van de div dynamisch aanpassen zodat ze gelijk worden aan die van de viewport. Voeg de volgende lijnen toe aan de vorige: : - <pre class="brush: js">div.style.width = WIDTH + 'px'; -div.style.height = HEIGHT + 'px';</pre> - </li> - <li>Sla alles op en vernieuw je browser. Nu zou de div even groot als je viewport moeten zijn wat ook de afmetingen van je scherm zijn. Als je nu de afmetingen opnieuw probeert te veranderen om je venster groter te maken, zal je zien dat de div dezelfde grootte behoudt. We bepalen de afmetingen slechts eenmaal.</li> - <li>We kunnen ook een gebeurtenis of event gebruiken zodat de afmetingen van de div samen met die van het venster veranderen. Het {{domxref("Window")}} object beschikt over een event dat ‘resize’ heet en dat telkens wordt getriggered als de grootte van het venster wordt gewijzigd. De {{domxref("Window.onresize")}} event handler staat ons toe dit event aan onze code vast te koppelen. Zo wordt die uitgevoerd telkens als de afmetingen van het window veranderen. Voeg de volgende lijnen toe onderaan je code: - <pre class="brush: js">window.onresize = function() { - WIDTH = window.innerWidth; - HEIGHT = window.innerHeight; - div.style.width = WIDTH + 'px'; - div.style.height = HEIGHT + 'px'; -}</pre> - </li> -</ol> - -<div class="note"> -<p><strong>Opmerking</strong>: Als je vastraakt, kan je altijd nog ons <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example-finished.html">voltooide window resize voorbeeld</a> bekijken. (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/window-resize-example-finished.html">bekijk het ook live</a>).</p> -</div> - -<h2 id="Actief_Leren_een_dynamische_boodschappenlijst">Actief Leren : een dynamische boodschappenlijst</h2> - -<p>Om het artikel af te ronden, willen we je een kleine uitdaging aanbieden: we willen een eenvoudige boodschappenlijst maken waar je dynamisch artikelen aan kan toevoegen door een invoerveld en een knop te gebruiken. Als je een artikel in het veld invult en op de knop drukt:</p> - -<ul> - <li>Moet het artikel in de lijst verschijnen.</li> - <li>Moet elk artikel een knop krijgen waarop je kan drukken om het artikel van de lijst te verwijderen.</li> - <li>Moet het invoerveld leeg zijn en de focus moet erop liggen, klaar om er een ander artikel in in te vullen.</li> -</ul> - -<p>De voltooide demo zal er ongeveer zo uitzien:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14563/shopping-list.png" style="border-style: solid; border-width: 1px; display: block; height: 225px; margin: 0px auto; width: 369px;"></p> - -<p>Om de oefening te maken, volg je de stappen hieronder en zorg je ervoor dat de lijst zich gedraagt zoals hierboven is beschreven.</p> - -<ol> - <li>Om te beginen download je dit bestand: <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list.html">shopping-list.html</a>. Je zal zien dat er minimum aan CSS in zit, een lijst met een label, een invoerveld, een knop, een lege lijst en een {{htmlelement("script")}}-element. Je zal al je code aan het script toevoegen.</li> - <li>Creëer drie variabelen die een referentie naar de {{htmlelement("ul")}}, {{htmlelement("input")}}, en {{htmlelement("button")}} elementen bevatten.</li> - <li>Creëer een <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">functie</a> die zal worden uitgevoerd als er op de knop wordt geklikt.</li> - <li>In de functie sla je eerst de <a href="/en-US/docs/Web/API/HTMLInputElement#Properties">waarde</a> die het invoerveld nu heeft, op in een variabele.</li> - <li>Daarna maak je het invoerveld leeg door zijn waarde gelijk te maken aan een lege string: <code>''</code>.</li> - <li>Creëer drie nieuwe elementen {{htmlelement('li')}}, {{htmlelement('span')}}, en {{htmlelement('button')}}. Sla ze op in variabelen.</li> - <li>Bevestig het span-element en de knop aan het lijstonderdeel (li dus) en maak ze de kinderen van li.</li> - <li>Zet de tekstinhoud van het span-element gelijk aan de waarde van het invoerveld dat je eerder al hebt opgeslagen en de tekst van de knop gelijk aan 'Verwijderen'.</li> - <li>Bevestig het lijstonderdeel aan de lijst en maak het een kind van de lijst.</li> - <li>Bevestig een event handler aan de verwijderknop, die het volledige lijstonderdeel zal verwijderen als erop wordt geklikt. (Herinner je je nog hoe we al een node/knooppunt hebben verwijderd? Deze keer wil je echter niet het kind van zijn ouder verwijderen, je wil het kind van de grootouder verwijderen!)</li> - <li>Ten slotte gebruik je de <code><a href="/en-US/docs/Web/API/HTMLElement/focus">focus()</a></code>-methode om de focus op het invoerveld te leggen zodat je het volgende artikel kan invullen.</li> -</ol> - -<div class="note"> -<p><strong>Opmerking</strong>: Als je echt vast raakt, kijk dan eens naar onze <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list-finished.html">voltooide boodschappenlijst</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html">bekijk hem ook live</a>.)</p> -</div> - -<h2 id="Samenvating">Samenvating</h2> - -<p>We hebben het einde van ons artikel over DOM-manipulatie bereikt. Je kent nu de belangrijke onderdelen van een webbrowser waarmee documenten worden gecontrolleerd en andere aspecten die relevant zijn voor onze beleving van een webpagina. Maar vooral begrijp je nu wat het Document Object Model is en hoe je het kan manipuleren om nuttige functionaliteit te creëren</p> - -<h2 id="Zie_ook">Zie ook</h2> - -<p>Er zijn nog veel meer eigenschappen die je kan gebruiken om je documenten te manipuleren. Bekijk de volgende onderwerpen en zie wat je nog kan ontdekken.</p> - -<ul> - <li>{{domxref("Document")}}</li> - <li>{{domxref("Window")}}</li> - <li>{{domxref("Node")}}</li> - <li>{{domxref("HTMLElement")}}, {{domxref("HTMLInputElement")}}, {{domxref("HTMLImageElement")}}, etc.</li> -</ul> - -<p>(Werp ook eens een blik op onze <a href="https://developer.mozilla.org/en-US/docs/Web/API">Web API index</a> voor de volledige lijst van Web APIs die worden gedocumenteerd op MDN!)</p> - -<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}</div> diff --git a/files/nl/learn/javascript/first_steps/a_first_splash/index.html b/files/nl/learn/javascript/first_steps/a_first_splash/index.html deleted file mode 100644 index 7151f9785b..0000000000 --- a/files/nl/learn/javascript/first_steps/a_first_splash/index.html +++ /dev/null @@ -1,700 +0,0 @@ ---- -title: Een eerste duik in JavaScript -slug: Learn/JavaScript/First_steps/A_first_splash -translation_of: Learn/JavaScript/First_steps/A_first_splash ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</div> - -<p class="summary">Nu heb je iets geleerd over de theorie van JavaScript en wat je ermee kunt doen, we geven je nu een spoedcursus in de basisfuncties van JavaScript via een volledig praktische zelfstudie. Hier bouw je stap voor stap een eenvoudig spel "Raad het nummer".</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Voorwaarden:</th> - <td>Elementaire computerkennis, een basiskennis van HTML en CSS, een goed begrip van wat JavaScript is.</td> - </tr> - <tr> - <th scope="row">Doelstelling:</th> - <td>Om het eerste beetje ervaring te krijgen met het schrijven van JavaScript, en op zijn minst een basiskennis te verwerven van wat het schrijven van een JavaScript-programma inhoudt.</td> - </tr> - </tbody> -</table> - -<p>Er wordt van je niet verwacht dat je de code meteen volledig begrijpt. We willen je eerst kennis laten maken met de concepten op hoog niveau en je een idee geven van hoe JavaScript (en andere programmeertalen) werken. In volgende artikelen zal je al deze functies nog veel gedetailleerder gaan bekijken!</p> - -<div class="note"> -<p>Opmerking: Veel van de codefuncties die je in JavaScript ziet, zijn hetzelfde als in andere programmeertaal - functies, loops, enz. De codesyntax ziet er anders uit, maar de concepten zijn nog steeds grotendeels hetzelfde.</p> -</div> - -<h2 id="Denken_als_een_programmeur">Denken als een programmeur</h2> - -<p>Een van de moeilijkste dingen om te leren tijdens het programmeren, is niet de manier van opschrijven (syntax) die je moet leren, die je moet leren, maar hoe je deze kunt toepassen om problemen in de echte wereld op te lossen. Je moet gaan denken als een programmeur - meestal gaat het om beschrijvingen van wat je programma moet doen en uitzoeken welke codefuncties nodig zijn om die dingen te bereiken en hoe ze samen kunnen werken.</p> - -<p>Dit vereist een combinatie van hard werken, ervaring met de syntax van de programmeertaal, oefenen - en een beetje creativiteit. Hoe meer je codeert, hoe beter je erin zult worden. We kunnen niet beloven dat je "programmeurshersenen" in 5 minuten zult ontwikkelen, maar we zullen je voldoende gelegenheid geven om tijdens de cursus te denken als een programmeur.</p> - -<p>Laten we met dat in gedachten eens kijken naar het voorbeeld dat we in dit artikel gaan opbouwen, en het algemene proces bekijken om het te ontleden in tastbare taken.</p> - -<h2 id="Voorbeeld_-_Raad_het_nummerspel">Voorbeeld - Raad het nummerspel</h2> - -<p>In dit artikel laten we je zien hoe je het eenvoudige spel opbouwt dat je hieronder kunt zien:</p> - -<div class="hidden"> -<h6 id="Top_hidden_code">Top hidden code</h6> - -<p> </p> - -<pre class="brush: html"><!DOCTYPE html> -<html> - -<head> - <meta charset="utf-8"> - <title>Raad het nummerspel</title> - <style> - html { - font-family: sans-serif; - } - - body { - width: 50%; - max-width: 800px; - min-width: 480px; - margin: 0 auto; - } - - .lastResult { - color: white; - padding: 3px; - } - </style> -</head> - -<body> - <h1>Raad het nummerspel</h1> - <p>We hebben een willekeurig getal tussen 1 en 100 gekozen. Kijk of je het in 10 beurten of minder kunt raden. We zullen je vertellen of je gok te hoog of te laag was.</p> - <div class="form"> <label for="guessField">Voer je gok in: </label><input type="text" id="guessField" class="guessField"> <input type="submit" value="Doe een gok" class="guessSubmit"> </div> - <div class="resultParas"> - <p class="guesses"></p> - <p class="lastResult"></p> - <p class="lowOrHi"></p> - </div> -</body> -<script> - // Je JavaScript start hier - var randomNumber = Math.floor(Math.random() * 100) + 1; - var guesses = document.querySelector('.guesses'); - var lastResult = document.querySelector('.lastResult'); - var lowOrHi = document.querySelector('.lowOrHi'); - var guessSubmit = document.querySelector('.guessSubmit'); - var guessField = document.querySelector('.guessField'); - var guessCount = 1; - var resetButton; - - function checkGuess() { - var userGuess = Number(guessField.value); - if (guessCount === 1) { - guesses.textContent = 'Vorige gok: '; - } - - guesses.textContent += userGuess + ' '; - - if (userGuess === randomNumber) { - lastResult.textContent = 'Hartelijk gefeliciteerd! Je hebt het goed!'; - lastResult.style.backgroundColor = 'green'; - lowOrHi.textContent = ''; - setGameOver(); - } else if (guessCount === 10) { - lastResult.textContent = '!!!GAME OVER!!!'; - lowOrHi.textContent = ''; - setGameOver(); - } else { - lastResult.textContent = 'Fout!'; - lastResult.style.backgroundColor = 'red'; - if(userGuess < randomNumber) { - lowOrHi.textContent='Laatste gok was te laag!' ; - } else if(userGuess > randomNumber) { - lowOrHi.textContent = 'Laatste gok was te hoog!'; - } - } - - guessCount++; - guessField.value = ''; - } - - guessSubmit.addEventListener('click', checkGuess); - - function setGameOver() { - guessField.disabled = true; - guessSubmit.disabled = true; - resetButton = document.createElement('button'); - resetButton.textContent = 'Start nieuw spel'; - document.body.appendChild(resetButton); - resetButton.addEventListener('click', resetGame); - } - - function resetGame() { - guessCount = 1; - var resetParas = document.querySelectorAll('.resultParas p'); - for(var i = 0 ; i < resetParas.length ; i++) { - resetParas[i].textContent=''; - } - - resetButton.parentNode.removeChild(resetButton); - guessField.disabled = false; - guessSubmit.disabled = false; - guessField.value=''; - guessField.focus(); - lastResult.style.backgroundColor='white'; - randomNumber=Math.floor(Math.random() * 100) + 1; - } -</script> - -</html></pre> - -<p> </p> -</div> - -<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320) }}</p> - -<p>Probeer het te spelen - maak jezelf vertrouwd met het spel voordat je verder gaat.</p> - -<p>Stel je voor dat iemand je de volgende opdracht heeft gegeven voor het maken van dit spel:</p> - -<blockquote> -<p>Ik wil dat je een eenvoudig raad het nummer type spel maakt. Het moet een willekeurig getal tussen 1 en 100 kiezen en vervolgens de speler uitdagen om het getal in 10 beurten te raden. Na elke beurt moet aan de speler worden verteld of deze gelijk of ongelijk heeft, of de gok te laag of te hoog was. Het moet de speler ook vertellen welke nummers hij eerder geraden had. Het spel wordt beëindigd als de speler het cijfer correct raadt of als het aantal beurten op is. Wanneer het spel is afgelopen, moet de speler een optie krijgen om opnieuw te spelen.</p> -</blockquote> - -<p>Bij het bekijken van deze beschrijving is het eerste dat we kunnen doen is het beginnen met het opsplitsen in eenvoudige, bruikbare taken, in zo veel mogelijk programmeur-denkwijze als mogelijk:</p> - -<ol> - <li>Genereer een willekeurig getal tussen 1 en 100.</li> - <li>Noteer het gekozen waar de speler mee speelt. Start op 1.</li> - <li>Geef de speler een manier om te raden wat het nummer is.</li> - <li>Nadat een gok is ingediend, noteer je deze eerst ergens zodat de gebruiker zijn eerdere gerade gokbeurten kan zien.</li> - <li>Controleer vervolgens of dit het juiste nummer is.</li> - <li>Als het antwoord goed is: - <ol> - <li>Toon gefeliciteerd bericht.</li> - <li>Stop de mogelijkheid speler om meer getallen in te kunnen voeren (dit zou het spel in de war kunnen maken).</li> - <li>Schermbediening waarmee de speler het spel opnieuw kan starten.</li> - </ol> - </li> - <li>Als het antwoord verkeerd is en de speler heeft nog beurten over: - <ol> - <li>Vertel de speler dat deze ongelijk heeft.</li> - <li>Laat ze een nieuwe gok in te voeren.</li> - <li>Hoog het aantal gedane beurten op met 1.</li> - </ol> - </li> - <li>Als het antwoord verkeerd is en de speler geen beurten meer heeft: - <ol> - <li>Vertel de speler dat het spel klaar is.</li> - <li>Stop de speler om meer getallen in te kunnen voeren (dit zou het spel in de war maken).</li> - <li>Schermbediening waarmee de speler het spel opnieuw kan starten.</li> - </ol> - </li> - <li>Nadat het spel opnieuw is gestart, controleer je of de spellogica en UI volledig opnieuw zijn gestart en gaat het aantal beurten terug naar 1.</li> -</ol> - -<p>Laten we nu verder gaan en bekijken hoe we deze stappen kunnen omzetten in code, het spel opbouwen en de JavaScript-functies gaandeweg verkennen.</p> - -<h3 id="Eerste_opzet">Eerste opzet</h3> - -<p>Om deze beschrijving te beginnen, willen we graag dat je een lokale kopie maakt van het <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">nummer-guessing-game-start.html</a> bestand (zie het hier <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">live</a>). Open het in zowel je teksteditor als in je webbrowser. Op dit moment zie je een eenvoudige kop, alinea met instructies en een formulier voor het invoeren van een gok, maar het formulier zal op dit moment niets doen.</p> - -<p>De plaats waar we al onze code zullen toevoegen, bevindt zich in het element {{htmlelement ("script")}} onder aan de HTML:</p> - -<pre class="brush: html"><script> - - // Your JavaScript goes here - -</script> -</pre> - -<h3 id="Variabelen_toevoegen_om_onze_gegevens_op_te_slaan">Variabelen toevoegen om onze gegevens op te slaan</h3> - -<p>Laten we beginnen. Voeg eerst de volgende regels toe in het {{htmlelement("script")}} element:</p> - -<pre class="brush: js">var randomNumber = Math.floor(Math.random() * 100) + 1; - -var guesses = document.querySelector('.guesses'); -var lastResult = document.querySelector('.lastResult'); -var lowOrHi = document.querySelector('.lowOrHi'); - -var guessSubmit = document.querySelector('.guessSubmit'); -var guessField = document.querySelector('.guessField'); - -var guessCount = 1; -var resetButton;</pre> - -<p>Dit gedeelte van de code stelt de variabelen in die we nodig hebben om de gegevens op te slaan die ons programma zal gebruiken. Variabelen zijn in feite bakjes voor waarden (zoals getallen of tekenreeksen). Je maakt een variabele met het sleutelwoord var gevolgd door de naam van je variabele. Je kunt een waarde toewijzen aan je variabele met een gelijkteken (=) gevolgd door de waarde die je eraan wilt geven.</p> - -<p>In ons voorbeeld:</p> - -<ul> - <li>De eerste variable — <code>randomNumber</code> — krijgt een willekeurig getal tussen 1 en 100 toegewezen, berekend met een wiskundig algoritme.</li> - <li>De volgende drie variabelen worden elk gemaakt om een verwijzing naar de resultatenparagrafen (resultaatonderdelen) in onze HTML op te slaan en worden gebruikt om waarden in de alinea's later in de code in te voegen: - <pre class="brush: html"><p class="guesses"></p> -<p class="lastResult"></p> -<p class="lowOrHi"></p></pre> - </li> - <li>De volgende twee variabelen slaan verwijzingen op naar de formuliertekstinvoer en verzendknop en worden gebruikt om het invoeren van de gok later in te stellen. - <pre class="brush: html"><label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField"> -<input type="submit" value="Submit guess" class="guessSubmit"></pre> - </li> - <li>Onze laatste twee variabelen bevatten het aantal gokbeurten van 1 (gebruikt om bij te houden hoeveel gokbeurten de speler heeft gehad) en een verwijzing naar een resetknop (begin op nieuw knop) die nog niet bestaat (maar later zal verschijnen).</li> -</ul> - -<div class="note"> -<p><strong>Opmerking</strong>: Je leert later veel meer over variabelen in de cursus, te beginnen met het <a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/variables">volgende artikel</a>.</p> -</div> - -<h3 id="Functies">Functies</h3> - -<p>Voeg vervolgens het onderstaande toe onder je vorige JavaScript:</p> - -<pre class="brush: js">function checkGuess() { - alert('Ik ben een tijdelijke aanduiding'); -}</pre> - -<p>Functies zijn herbruikbare blokken met code die je één keer kunt schrijven en die keer op keer kunt hergebruiken, zodat je de code niet steeds opnieuw hoeft te schrijven. Dit is echt handig. Er zijn een aantal manieren om functies te definiëren, maar voor nu concentreren we ons op één eenvoudig type. Hier hebben we een functie gedefinieerd door het trefwoord <code> function</code> te gebruiken, gevolgd door een naam, met haakjes erachter geplaatst. Daarna plaatsen we twee accolades (<code> {} </code>). En binnen de accolades wordt alle code weergegeven die we willen uitvoeren wanneer we de functie aanroepen. </p> - -<p>De code wordt uitgevoerd door de naam van de functie in te typen gevolgd door de haakjes.</p> - -<p>Probeer je code op te slaan en vernieuw je browservenster</p> - -<p>Ga naar de <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">"developer tools JavaScript console"</a>, en voer de volgende regel in:</p> - -<pre class="brush: js"><code> -checkGuess();</code></pre> - -<p>Je zou een waarschuwing moeten zien verschijnen die zegt: "Ik ben een tijdelijke aanduiding"; we hebben een functie in onze code aangemaakt die een waarschuwing creëert wanneer we deze noemen.</p> - -<div class="note"> -<p><strong>Opmerking</strong>: Je zult later in de cursus veel meer leren over functies.</p> -</div> - -<h3 id="Operators_(bewerkers)">Operators (bewerkers)</h3> - -<p>Met JavaScript-operators kunnen we testen uitvoeren, wiskunde doen, samen met andere strings en dergelijke dingen doen.</p> - -<p>Laten we onze code opslaan en de pagina vernieuwen die wordt weergegeven in onze browser. Open de <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools"> JavaScript-console voor ontwikkelaarstools </a> als je deze nog niet hebt geopend, zodat je de onderstaande voorbeelden kunt typen - typ in elk van de "Voorbeeld" kolommen precies zoals getoond, druk op Return / Enter na elk, en zie welke resultaten ze teruggeven. Als je geen eenvoudige toegang hebt tot de browserontwikkelaarstools, dan kan je altijd onderstaande eenvoudig ingebouwde console gebruiken:</p> - -<div class="hidden"> -<h6 id="Hidden_code">Hidden code</h6> - -<pre class="brush: html"><code> -<!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>JavaScript console</title> - <style> - * { - box-sizing: border-box; - } - - html { - background-color: #0C323D; - color: #809089; - font-family: monospace; - } - - body { - max-width: 700px; - } - - p { - margin: 0; - width: 1%; - padding: 0 1%; - font-size: 16px; - line-height: 1.5; - float: left; - } - - .input p { - margin-right: 1%; - } - - .output p { - width: 100%; - } - - .input input { - width: 96%; - float: left; - border: none; - font-size: 16px; - line-height: 1.5; - font-family: monospace; - padding: 0; - background: #0C323D; - color: #809089; - } - - div { - clear: both; - } - - </style> - </head> - <body> - - - </body> - - <script> - var geval = eval; - - function createInput() { - var inputDiv = document.createElement('div'); - var inputPara = document.createElement('p'); - var inputForm = document.createElement('input'); - - inputDiv.setAttribute('class','input'); - inputPara.textContent = '>'; - inputDiv.appendChild(inputPara); - inputDiv.appendChild(inputForm); - document.body.appendChild(inputDiv); - inputDiv.focus(); - - if(document.querySelectorAll('div').length > 1) { - inputForm.focus(); - } - - inputForm.addEventListener('change', executeCode); - } - - function executeCode(e) { - try { - var result = geval(e.target.value); - } catch(e) { - var result = 'error — ' + e.message; - } - - var outputDiv = document.createElement('div'); - var outputPara = document.createElement('p'); - - outputDiv.setAttribute('class','output'); - outputPara.textContent = 'Resultaat: ' + result; - outputDiv.appendChild(outputPara); - document.body.appendChild(outputDiv); - - e.target.disabled = true; - e.target.parentNode.style.opacity = '0.5'; - - createInput() - } - - createInput(); - - </script> -</html></code></pre> -</div> - -<p><code>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</code></p> - -<p>Laten we eerst kijken naar rekenkundige operatoren, bijvoorbeeld:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Operator (bewerker)</th> - <th scope="col">Naam</th> - <th scope="col">Voorbeeld</th> - </tr> - </thead> - <tbody> - <tr> - <td>+</td> - <td>Optelling</td> - <td>6 + 9</td> - </tr> - <tr> - <td>-</td> - <td>Aftrekken</td> - <td>20 - 15</td> - </tr> - <tr> - <td>*</td> - <td>Vermenigvuldigen</td> - <td>3 * 7</td> - </tr> - <tr> - <td>/</td> - <td>Delen</td> - <td>10 / 5</td> - </tr> - </tbody> -</table> - -<p>Je kunt ook de operator + gebruiken om tekstreeksen samen te voegen (concatenation in het programmeren). Probeer de volgende regels uit te voeren:</p> - -<pre class="brush: js"><code> -var naam = 'Bingo'; -naam; -var hallo = ' zegt hallo!'; -hallo; -var begroeting = naam + hallo; -begroeting;</code></pre> - -<p>Er zijn ook enkele shortcut-operators (kortere notatie) beschikbaar, augmented assignment-operatoren genaamd. Als je bijvoorbeeld eenvoudig een nieuwe tekstreeks aan een bestaande wilt toevoegen en het resultaat terug geeft, kan je dit doen:</p> - -<pre class="brush: js"><code> -naam += ' zegt hallo!';</code></pre> - -<p>This is equivalent to</p> - -<pre class="brush: js"><code> -naam = naam + ' zegt hallo!';</code></pre> - -<p>Wanneer we waar / niet waar testen uitvoeren (bijvoorbeeld binnen conditionals - zie {{anch ("Conditionals", "below")}}, gebruiken we vergelijkingsoperatoren, bijvoorbeeld:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Operator</th> - <th scope="col">Naam</th> - <th scope="col">Voorbeeld</th> - </tr> - <tr> - <td>===</td> - <td>Strikte gelijkheid (is het precies hetzelfde?)</td> - <td>5 === 2 + 4</td> - </tr> - <tr> - <td>!==</td> - <td>Niet-gelijkheid (is het niet hetzelfde?)</td> - <td>'Chris' !== 'Ch' + 'ris'</td> - </tr> - <tr> - <td><</td> - <td>Minder dan</td> - <td>10 < 6</td> - </tr> - <tr> - <td>></td> - <td>Groter dan</td> - <td>10 > 20</td> - </tr> - </thead> -</table> - -<h3 id="Conditionals_(condities)">Conditionals (condities)</h3> - -<p>Terug naar onze <code>checkGuess()</code> -functie, ik denk dat het veilig is om te zeggen dat we niet willen dat het alleen maar een plaatshouderbericht uitspuugt. We willen dat het controleert of de gok van een speler correct is of niet, en dat het op de juiste manier reageert.</p> - -<p>Vervang nu de huidige functie <code>checkGuess()</code> door deze versie:</p> - -<pre class="brush: js"><code> -function checkGuess() { - var userGuess = Number(guessField.value); - if (guessCount === 1) { - guesses.textContent = 'Vorige gok: '; - } - guesses.textContent += userGuess + ' '; - - if (userGuess === randomNumber) { - lastResult.textContent = 'Hartelijk gefeliciteerd! Je hebt het goed!'; - lastResult.style.backgroundColor = 'green'; - lowOrHi.textContent = ''; - setGameOver(); - } else if (guessCount === 10) { - lastResult.textContent = '!!!GAME OVER!!!'; - setGameOver(); - } else { - lastResult.textContent = 'Fout!'; - lastResult.style.backgroundColor = 'red'; - if(userGuess < randomNumber) { - lowOrHi.textContent = 'Laatste gok was te laag!'; - } else if(userGuess > randomNumber) { - lowOrHi.textContent = 'Laatste gok was te hoog!'; - } - } - - guessCount++; - guessField.value = ''; - guessField.focus(); -}</code></pre> - -<p>Dit is veel code - pfff! Laten we door elke sectie gaan en uitleggen wat het doet.</p> - -<ul> - <li>De eerste regel (regel 2 hierboven) declareert een variabele met de naam <code>userGuess</code> en stelt de waarde in als huidige waarde die is ingevoerd in het tekstveld. We voeren deze waarde ook uit via de ingebouwde JavaScript methode <code>Number()</code>, om er zeker van te zijn dat de waarde absoluut een getal is.</li> - <li>Vervolgens komen we ons eerste voorwaardelijke codeblok tegen (regels 3-5 hierboven). Met een voorwaardelijk codeblok kan je code selectief uitvoeren, afhankelijk van of een bepaalde voorwaarde waar is of niet. Het lijkt een beetje op een functie, maar dat is het niet. De eenvoudigste vorm van voorwaardelijk blok begint met het sleutelwoord <code>if</code> (als), dan wat haakjes <code>()</code>, dan wat accolades <code>{}</code>. Binnen de haakjes nemen we een test op. Als de test <code>true</code> (waar) retourneert, voeren we de code binnen de accolades uit. Zo niet, dan doen we dat niet en gaan we verder met het volgende stukje code. In dit geval test de test of de variabele <code>guessCount</code> gelijk is aan <code>1</code> (dus of dit de eerste beurt van de speler is of niet): - <pre class="brush: js"><code> -guessCount === 1</code></pre> - Als dat zo is, maken we de tekstinhoud van de paragraaf gelijk aan "<code>Vorige gok</code>:". Zo niet, dan doen we dat niet.</li> - <li>Regel 6 voegt de huidige waarde van <code>UserGuess</code> aan het einde van de guesses-paragraaf toe plus een lege ruimte, zodat er elke keer een spatie tussen elke weergegeven gok verschijnt.</li> - <li>Het volgende blok (regels 8-24 hierboven) voeren een paar controles uit: - <ul> - <li>De eerste <code>if(){}</code> controleert of de gok van de gebruiker gelijk is aan het <code>randomNumber</code> zie is gezet bovenaan onze JavaScript-code. Als dat zo is, heeft de speler correct geraden en is het spel gewonnen, dus laten we de speler een gefeliciteerd bericht zien met een mooie groene kleur, daarna wissen we de inhoud van het Lage /Hoge gok vakje en voeren een functie uit met de naam <code>setGameOver()</code>, die we later zullen bespreken.</li> - <li>Nu hebben we een nieuwe test aan aan het einde van de laatste conditie vast gemaakt met behulp van een <code>else if(){}</code>-structuur. Dit stukje code controleerd of de gok van de laatste beurt ook van de gebruiker is. Als dat zo is, doet het programma hetzelfde als in het vorige blok, maar in plaats van het gefeliciteerd bericht, wordt er een game-over-bericht geplaatst.</li> - <li>Het laatste blok dat aan het einde van deze code is gekoppeld (het <code>else {}</code>) bevat code die alleen wordt uitgevoerd als geen van de twee andere tests <code>true</code> terug geven (dat wil zeggen dat de speler het niet goed heeft geraden, maar er zijn nog meer gokbeurten over). In dit geval vertellen we de speler dat deze ongelijk heeft. Vervolgens voeren we een andere voorwaardelijke test uit om te controleren of de gok hoger of lager was dan het antwoord. Afhankelijk van dit resultaat vertellen we in een bericht of de gok hoger of lager was.</li> - </ul> - </li> - <li>De laatste drie regels in de functie (regel 26-28 hierboven) zorgen ervoor dat we klaar zijn voor de volgende gok. We voegen 1 toe aan de <code>guessCount</code>-variabele, zodat de speler zijn beurt opgebruikt (<code>++</code> is een incrementatiebewerking - dus een toename met 1) en de waarde wordt leeggemaakt in het formuliertekstveld en opnieuw gefocusseerd (de cursor wordt er opnieuw ingezet), zodat de volgende gok kan worden ingevoerd .</li> -</ul> - -<h3 id="Events">Events</h3> - -<p>Op dit moment hebben we een goed geïmplementeerde <code>checkGuess()</code>-functie, maar die doet niets omdat we hem nog niet hebben aangeroepen. In het ideale geval willen we het aanroepen als de knop "Doe een gok" wordt ingedrukt, en om dit te doen, moeten we een event (gebeurtenis) gebruiken. Events zijn acties die plaatsvinden in de browser, zoals een knop waarop geklikt wordt, of een pagina die wordt geladen, of een video die wordt afgespeeld, in reactie daarop kunnen we blokken met code uitvoeren. De constructies die luisteren naar de gebeurtenis die plaatsvindt, worden <strong>event listeners</strong> genoemd en de blokken code die worden uitgevoerd als reactie op het vuren van een event worden <strong>event handlers</strong> genoemd</p> - -<p>Voeg de volgende regel toe aan je <code>checkGuess()</code> functie:</p> - -<pre class="brush: js"><code> -guessSubmit.addEventListener('click', checkGuess);</code></pre> - -<p>Hier voegen we een event listener toe aan de <code>guessSubmit</code>-knop. Dit is een methode die twee invoerwaarden (argumenten genaamd) nodig heeft - het type event waarnaar we luisteren (in dit geval click (klik)) als een tekenreeks en de code die we willen uitvoeren wanneer de gebeurtenis plaatsvindt (in dit geval de checkGuess() functie - merk op dat we de haakjes niet hoeven te gebruiken bij het schrijven binnen {{domxref ("EventTarget.addEventListener", "addEventListener ()")}}).</p> - -<p>Probeer je code nu uit door op te slaan en te de browser te vernieuwen, je uitwerking zou nu moeten werken, tot op zekere hoogte. Het enige probleem is nu, als je het juiste antwoord raadt of gokken mist, het spel stuk zal gaan, omdat we nog niet de functie <code>setGameOver()</code> hebben aangemaakt en die zou moeten draaien zodra het spel voorbij is. Laten we nu onze ontbrekende code toevoegen en de voorbeeldfunctionaliteit voltooien.</p> - -<h3 id="De_spelfunctionaliteit_afmaken">De spelfunctionaliteit afmaken</h3> - -<p>Laten we de functie <code>setGameOver()</code> aan de onderkant van onze code toevoegen en er vervolgens doorheen lopen. Voeg dit nu toe, onder de rest van je JavaScript:</p> - -<pre class="brush: js"><code> -function setGameOver() { - guessField.disabled = true; - guessSubmit.disabled = true; - resetButton = document.createElement('button'); - resetButton.textContent = 'Start nieuw spel'; - document.body.appendChild(resetButton); - resetButton.addEventListener('click', resetGame); -}</code></pre> - -<ul> - <li>De eerste twee regels schakelen de formuliertekstinvoer en -knop uit door hun uitgeschakeleigenschap in te stellen op <code>true</code>. Dit is nodig, want als we dat niet deden, zou de gebruiker meer gokken kunnen doen nadat het spel voorbij is, wat de boel zou verpesten.</li> - <li>De volgende drie regels maken een nieuw {{htmlelement("button")}} element, en zet de tekst op "Start nieuw spel", en zet de knop onderaan ons al bestaande HTML.</li> - <li>De laatste regel zet een event listener op onze nieuwe knop zodat, als erop de geklikt wordt, de functie genaamt <code>resetGame()</code> wordt uitgevoerd.</li> -</ul> - -<p>Nu moeten we de functie nog maken! Voeg de volgende code toe, nogmaals aan de onderkant van je JavaScript:</p> - -<pre class="brush: js"><code> -function resetGame() { - guessCount = 1; - - var resetParas = document.querySelectorAll('.resultParas p'); - for (var i = 0 ; i < resetParas.length ; i++) { - resetParas[i].textContent = ''; - } - - resetButton.parentNode.removeChild(resetButton); - - guessField.disabled = false; - guessSubmit.disabled = false; - guessField.value = ''; - guessField.focus(); - - lastResult.style.backgroundColor = 'white'; - - randomNumber = Math.floor(Math.random() * 100) + 1; -}</code></pre> - -<p>Dit opnieuw een vrij lang blok code en stelt alles volledig opnieuw in zoals het was aan het begin van het spel, dus de speler kan nog een keer proberen.</p> - -<p>Het:</p> - -<ul> - <li>Zet <code>guessCount</code> terug naar 1.</li> - <li>Leegt alle informatie paragraven.</li> - <li>Verwijderd de reset knop van de code.</li> - <li>Zet de formulier elementen aan, en leegt het tekstveld en zet de cursor erin, klaar zodat een nieuwe gok ingevoerd kan worden.</li> - <li>Verwijderd de achtergrondkleur van de <code>lastResult</code> paragraaf.</li> - <li>Maakt een nieuw willekeurig nummer, zodat je niet direct het nieuwe nummer kan raden!</li> -</ul> - -<p><strong>Op dit punt zou je een volledig werkend (eenvoudig) spelletje moeten hebben - gefeliciteerd!</strong></p> - -<p>Het enige dat we nog moeten doen in dit artikel is praten over een paar andere belangrijke codefuncties die je al hebt gezien, hoewel je je dit misschien niet hebt gerealiseerd.</p> - -<h3 id="Loops">Loops</h3> - -<p>Een deel van de bovenstaande code die we beter moeten bekijken, is de <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a>-lus. Loops zijn een heel belangrijk concept bij het programmeren, waardoor je steeds een stuk code kunt blijven herhalen totdat aan een bepaalde voorwaarde is voldaan.</p> - -<p>Om te beginnen, ga opnieuw terug naar je <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">JavaScript-console voor ontwikkelaarstools</a>, en voer het volgende in:</p> - -<pre class="brush: js"><code> -for (var i = 1 ; i < 21 ; i++) { console.log(i) }</code></pre> - -<p>Wat gebeurt er? De nummers 1 tot 20 zijn afgedrukt in je console. Dit komt door de loop. Een for loop heeft drie invoer waarden (argumenten):</p> - -<ol> - <li><strong>Een startwaarde:</strong> in dit geval beginnen we een telling op 1, maar dit kan elk nummer zijn dat je leuk vindt. Je kunt <code>i</code> vervangen door elke naam die je ook leuk vindt, maar <code>i</code> wordt gebruikt als een variabele, omdat deze kort en gemakkelijk te onthouden is.</li> - <li><strong>Een eindwaarde</strong>: Hier hebben we <code>i <21</code> gespecificeerd - de lus zal doorgaan totdat <code>i</code> niet langer minder dan 21 is. Wanneer <code>i</code> 21 bereik, zal de lus niet langer lopen.</li> - <li><strong>Een incrementor (vermeerderaar): </strong>We hebben <code>i++</code> opgegeven, wat "tel 1 op bij i" betekent. De lus wordt één keer uitgevoerd voor elke waarde van <code>i</code>, totdat <code>i</code> een waarde van 21 bereik (zoals hierboven besproken). In dit geval printen we eenvoudig de waarde van <code>i</code> naar de console op elke iteratie met behulp van {{domxref ("Console.log", "console.log ()")}}.</li> -</ol> - -<p>Laten we nu kijken naar de lus in ons nummer gokspel - het volgende kan gevonden worden in de functie <code>resetGame()</code>:</p> - -<pre class="brush: js"><code> -var resetParas = document.querySelectorAll('.resultParas p'); -for (var i = 0 ; i < resetParas.length ; i++) { - resetParas[i].textContent = ''; -}</code></pre> - -<p>Deze code maakt een variabele die een lijst bevat van alle paragraven in <code><div class="resultParas"></code> door gebruik te maken van de {{domxref("Document.querySelectorAll", "querySelectorAll()")}} methode, dan wordt het door elke keer herhaald, waarbij elke keer de tekstinhoud wordt verwijderd.</p> - -<h3 id="Een_kleine_discussie_over_objecten">Een kleine discussie over objecten</h3> - -<p>Laten we nog een laatste verbetering toevoegen voordat we aan deze discussie beginnen. Voeg de volgende regel toe net onder de <code>var resetButton;</code> regel in de buurt van de bovenkant van je JavaScript en sla je bestand weer op:</p> - -<pre class="brush: js"><code> -guessField.focus();</code></pre> - -<p>Deze regel gebruikt de {{domxref("HTMLElement.focus", "focus()")}} methode om automatisch de text cursur (het knipperende streepje) in het {{htmlelement("input")}} tekst veld te zetten zodra de pagina laad, met de bedoeling dat de gebruiker direct kan beginnen met het typen van de eerste gok, en niet eerst in het formulier veld hoeft te klikken. Het is een kleine toevoeging, maar het vergroot het gebruiksgemak — de gebruiker een goede visuele idee geven van wat ze moeten doen om het spel te spelen.</p> - -<p>Laten we wat hier gebeurt iets meer op detail analyseren. In JavaScript is alles een object. Een object is een verzameling van functionaliteit die bij elkaar hoort in een groep. Je kunt je eigen objecten maken, maar dat is iets te geavanceerd voor dit moment, maar zullen er later in de cursus op terug komen.Voor nu zullen we alleen in gaan op de standaard ingebouwde objecten van je browser, die ervoor zorgen dat je een heel aantal nuttige dingen kunt doen.</p> - -<p>In dit geval, maken we eerst een <code>guessField</code> variabele die een verwijzing bevat naar het tekstformulierveld in onze HTML — de volgende regel vindt je bij onze variabelen aan de bovenkant van onze code: </p> - -<pre class="brush: js"><code> -var guessField = document.querySelector('.guessField');</code></pre> - -<p>Om deze verwijzing te krijgen, maken we gebruik van het {{domxref("document.querySelector", "querySelector()")}} object. <code>querySelector()</code> neemt een stukje informatie — een <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS selector</a> die selecteerd het element waarnaar je wilt verwijzen.</p> - -<p>Omdat <code>guessField</code> nu een verwijzing bevat naar een {{htmlelement("input")}} element op de pagina, heeft het toegang tot een heel aantal eigenschappen (in het programmeren noemen we dit properties en het zijn eigenlijk variabelen opgeslagen in de objecten, waarbij sommige de waarden niet aangepast kunnen worden, maar een statische inhoud bevatten) en methodes (eigenlijk functies opgeslagen in de objecten). Een van de beschikbare methoden bij input elementen is <code>focus()</code>, dus we kunnen nu deze gebruiken om de cursor te zetten in het tekst invoerveld:</p> - -<pre class="brush: js"><code> -guessField.focus();</code></pre> - -<p>Variabelen die geen verwijzing bevatten naar formulier elementen, die hebben geen <code>focus()</code> methode beschikbaar. Bijvoorbeeld de <code>guesses</code> variabele bevat een verwijzing naar een {{htmlelement("p")}} element, en <code>guessCount</code> bevat een nummer.</p> - -<h3 id="Spelen_met_browser_objecten">Spelen met browser objecten</h3> - -<p>Laten we een beetje gaan spelen met enkele browser objecten.</p> - -<ol> - <li>Open eerst je JavaScript programma in een browser.</li> - <li>Open vervolgens je <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browserontwikkelaarstools</a> en zorg ervoor dat het JavaScript-console-tabblad geopend is. </li> - <li>Typ <code>guessfield</code> in en het console zal je laten zien dat de variabele een element {{htmlelement ("input")}} bevat. Je zult ook opmerken dat de console objectnamen die zich in de uitvoeringsomgeving bevinden automatisch toevoegt, inclusief je variabelen!</li> - <li>Typ nu het volgende: - <pre class="brush: js"><code> -guessField.value = 'Hallo';</code></pre> - De eigenschap <code>value</code> vertegenwoordigt de huidige waarde die is ingevoerd in het tekstveld. Je zult zien dat er iets door het invoeren van deze opdracht is veranderd, weet je wat dat is?</li> - <li>Probeer nu <code>guesses</code> in te typen en op Enter te drukken. De console zal je laten zien dat de variabele een element {{htmlelement ("p")}} bevat.</li> - <li>Probeer nu de volgende regel in te voeren: - <pre class="brush: js"><code> -guesses.value</code></pre> - De browser geeft <strong>undefined</strong> terug, omdat deze waarde niet bestaat in paragrafen.</li> - <li>Als je de tekst in een paragraaf (alinea) wilt wijzigen, heb je in de eigenschap {{domxref ("Node.textContent", "textContent")}} nodig. Probeer dit: - <pre class="brush: js"><code> -guesses.textContent = 'Waar is mijn alinea?';</code></pre> - <code> </code></li> - <li>Nu voor wat leuke dingen. Probeer de onderstaande regels één voor één in te voeren: - <pre class="brush: js"><code> -guesses.style.backgroundColor = 'yellow'; -guesses.style.fontSize = '200%'; -guesses.style.padding = '10px'; -guesses.style.boxShadow = '3px 3px 6px black';</code></pre> - Elk element op een pagina heeft een stijleigenschap, die zelf een object bevat waarvan de eigenschappen alle inline CSS-stijlen bevatten die op dat element zijn toegepast. Dit stelt ons in staat om dynamisch nieuwe CSS-stijlen in te stellen op elementen met behulp van JavaScript.</li> -</ol> - -<h2 id="Klaar_voor_nu_...">Klaar voor nu ...</h2> - -<p>Zo dus dit was het voor wat betreft het opbouwen van het voorbeeld - je hebt het einde bereikt, goed gedaan! Probeer je definitieve code uit, of <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">speel met onze voltooide versie hier</a>. Als je het voorbeeld niet werkend krijgt, vergelijk dan jouw code met die van onze <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">broncode</a>.</p> - -<p><code>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</code></p> diff --git a/files/nl/learn/javascript/first_steps/index.html b/files/nl/learn/javascript/first_steps/index.html deleted file mode 100644 index fa76ddf15c..0000000000 --- a/files/nl/learn/javascript/first_steps/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: JavaScript First Steps -slug: Learn/JavaScript/First_steps -translation_of: Learn/JavaScript/First_steps ---- -<div>{{LearnSidebar}}</div> - -<p class="summary"><br> -In onze eerste JavaScript module beantwoorden we eerst we aantal fundamentele vragen zoals "wat is JavaScript?", "Hoe ziet het er uit?", en "Wat kan het doen?", voordat er verder wordt gegaan met de eerste praktijkervaring met het schrijven van JavaScript. Daarna bespreken we een paar belangrijke JavaScript kenmerken zoals variabelen, strings, nummers en arrays.</p> - -<h2 id="Voorwaarden">Voorwaarden</h2> - -<p>Voordat u deze module start, hebt u geen voorafgaande JavaScript-kennis nodig, maar moet u enige bekendheid met HTML en CSS hebben. U wordt geadviseerd om de volgende modules door te nemen voordat u met JavaScript begint:</p> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Aan de slag met het web</a> (which includes a really <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">basis JavaScript introductie</a>).</li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introductie in HTML</a>.</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introductie in CSS</a>.</li> -</ul> - -<div class="note"> -<p><strong>Opmerking</strong>: Als u op een computer / tablet / ander apparaat werkt waar u niet de mogelijkheid hebt om uw eigen bestanden te maken, kunt u (de meeste van) de codevoorbeelden uitproberen in een online codeerprogramma zoals <a href="http://jsbin.com/">JSBin</a> of <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="Gidsen">Gidsen</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></dt> - <dd>Welcome to the MDN beginner's JavaScript course! In this first article we will look at JavaScript from a high level, answering questions such as "what is it?", and "what is it doing?", and making sure you are comfortable with JavaScript's purpose.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></dt> - <dd>Now you've learned something about the theory of JavaScript, and what you can do with it, we are going to give you a crash course in the basic features of JavaScript via a completely practical tutorial. Here you'll build up a simple "Guess the number" game, step by step.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></dt> - <dd>When you built up the "Guess the number" game in the previous article, you may have found that it didn't work. Never fear — this article aims to save you from tearing your hair out over such problems by providing you with some simple tips on how to find and fix errors in JavaScript programs.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></dt> - <dd>After reading the last couple of articles you should now know what JavaScript is, what it can do for you, how you use it alongside other web technologies, and what its main features look like from a high level. In this article we will get down to the real basics, looking at how to work with most basic building blocks of JavaScript — Variables.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></dt> - <dd>At this point in the course we discuss maths in JavaScript — how we can combine operators and other features to successfully manipulate numbers to do our bidding.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></dt> - <dd>Next we'll turn our attention to strings — this is what pieces of text are called in programming. In this article we'll look at all the common things that you really ought to know about strings when learning JavaScript, such as creating strings, escaping quotes in string, and joining them together.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></dt> - <dd>Now we've looked at the very basics of strings, let's move up a gear and start thinking about what useful operations we can do on strings with built-in methods, such as finding the length of a text string, joining and splitting strings, substituting one character in a string for another, and more.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></dt> - <dd>In the final article of this module, we'll look at arrays — a neat way of storing a list of data items under a single variable name. Here we look at why this is useful, then explore how to create an array, retrieve, add, and remove items stored in an array, and more besides.</dd> -</dl> - -<h2 id="Assessments">Assessments</h2> - -<p>The following assessment will test your understanding of the JavaScript basics covered in the guides above.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Silly story generator</a></dt> - <dd>In this assessment you'll be tasked with taking some of the knowledge you've picked up in this module's articles and applying it to creating a fun app that generates random silly stories. Have fun!</dd> -</dl> diff --git a/files/nl/learn/javascript/index.html b/files/nl/learn/javascript/index.html deleted file mode 100644 index 7e0f1c0d64..0000000000 --- a/files/nl/learn/javascript/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: JavaScript -slug: Learn/JavaScript -tags: - - Beginner - - CodingScripting - - JavaScript - - JavaScripting beginner - - Landing - - Module - - NeedsTranslation - - Topic - - TopicStub - - 'l10n:priority' -translation_of: Learn/JavaScript ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">{{Glossary("JavaScript")}} is een programmeertaal waarmee je complexe zaken kunt implementeren in websites. Telkens wanneer een webpagina meer doet dan statische informatie weergeven — meldingen op een bepaald tijdstip weergeven, inhoud vernieuwen op regelmatige basis, interactieve kaarten, geanimeerde 2D/3D prenten, video jukeboxes, etc. — kan je zo goed als zeker zijn dat er JavaScript mee gemoeid is.</p> - -<h2 id="Leerproces">Leerproces</h2> - -<p>Javascript is moeilijker om te leren dan gerelateerde technologieën zoals <a href="/en-US/docs/Learn/HTML">HTML</a> en <a href="/en-US/docs/Learn/CSS">CSS</a>. Voordat je begint met het leren van Javascript, is het aan te raden om als eerste vertrouwd te raken met eerder genoemde technologieën. Start met de volgende modules:</p> - -<ul> - <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a></li> - <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a></li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></li> -</ul> - -<p>Het hebben van ervaring met andere programmeertalen kan ook helpen.</p> - -<p>Nadat je vertrouwd bent met de basis van JavaScript, ben je er klaar voor om meer te leren over geavanceerde onderwerpen, zoals:</p> - -<ul> - <li>JavaScript diepgaand, zoals onze <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript guide</a></li> - <li><a href="/en-US/docs/Web/API">Web APIs</a></li> -</ul> - -<h2 id="Modules">Modules</h2> - -<p>Hieronder volgen een aantal modules om door te werken, in aangeraaden volgorde.</p> - -<dl> - <dt><a href="/nl/docs/Learn/JavaScript/First_steps">JavaScript first steps</a></dt> - <dd>In onze eerste JavaScript module beantwoorden we een aantal fundamentele vragen zoals "wat is JavaScript?", "Hoe ziet het er uit?", en "Wat kan het doen?", voordat je verder gaat met het schrijven van JavaScript. Daarna bespreken we een paar belangrijke JavaScript kenmerken zoals variabelen, strings, getallen en <em>arrays</em>(reeksen).</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript bouwstenen</a></dt> - <dd>In deze module gaan we verder met het behandelen van de fundamentele kenmerken van JavaScript. Daarbij kijken we naar veel voorkomende blokken code zoals <em>conditional statements</em>( als dit, dan doe dat), <em>loops</em>, functies en <em>events</em>(gebeurtenissen). Je hebt dit al eerder in de reeks voorbij zien komen, maar hier wordt het uitgebreid besproken.<em> </em></dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Introductie van JavaScript objecten</a></dt> - <dd>In JavaScript bestaan de meeste dingen uit objecten. Van kerneigenschappen als strings en arrays tot de browser API's die op JavaScript gebouwd zijn. Je kunt zelfs je eigen objecten creëren om functies en variabelen die bij elkaar horen in pakketjes te voegen. JavaScript is van nature objectgeoriënteerd en dit is belangrijk om te begrijpen als je verder wilt met het schrijven van efficiënte code. Deze module is gemaakt om je daarin verder te helpen. We leren hier object theorie en syntax in detail, creëren zelf objecten en er wordt uitleg gegeven wat JSON data is en hoe je er mee kunt werken.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a></dt> - <dd>Als je client-side JavaScript voor websites of applicaties schrijft, duurt het niet lang voordat je API's gaat gebruiken. API's zijn interfaces die gebruikt worden om verschillende aspecten van de browser en het besturingssysteem van de site te manipuleren. Soms worden ze zelfs gebruikt om data van andere websites of services te manipuleren. In deze module onderzoeken we wat API's zijn en hoe je de meest voorkomende API's kunt gebruiken die je vaak tegenkomt in je ontwikkelwerk.</dd> -</dl> - -<h2 id="Veelvoorkomende_JavaScript_problemen_oplossen">Veelvoorkomende JavaScript problemen oplossen</h2> - -<p><a href="/en-US/docs/Learn/JavaScript/Howto">Gebruik JavaScript om veelvoorkomende problemen op te lossen.</a> Hier zijn links te vinden naar verschillende onderwerpen waarin uitgelegd wordt hoe je JavaScript kunt gebruiken om veelvoorkomende problemen bij het maken van een webpagina op te lossen.</p> - -<h2 id="Zie_ook">Zie ook</h2> - -<dl> - <dt><a href="/en-US/docs/Web/JavaScript">JavaScript op MDN</a></dt> - <dd>Het algemene toegangspunt van de kerndocumentatie over JavaScript op MDN — Hier vind je uitgebreide referentie documenten over alle aspecten van de JavaScript taal en een aantal geavanceerde tutorials voor JavaScripters met ervaring.</dd> - <dt><a href="https://www.youtube.com/user/codingmath">Coding wiskunde</a></dt> - <dd>Een excellente serie van video tutorials om de wiskunde te leren die je nodig hebt om een effectieve programmeur te worden, door <a href="https://twitter.com/bit101">Keith Peters.</a></dd> -</dl> |