diff options
Diffstat (limited to 'files/nl/learn/html/introduction_to_html/getting_started/index.html')
| -rw-r--r-- | files/nl/learn/html/introduction_to_html/getting_started/index.html | 513 |
1 files changed, 0 insertions, 513 deletions
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> |