From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../index.html | 436 ++++++ .../forms/how_to_structure_an_html_form/index.html | 964 +++++++++++++ files/nl/learn/html/forms/index.html | 358 +++++ .../learn/html/forms/styling_html_forms/index.html | 344 +++++ .../html/forms/the_native_form_widgets/index.html | 1448 ++++++++++++++++++++ .../verzenden_van_formuliergegevens/index.html | 339 +++++ .../html/forms/your_first_html_form/index.html | 273 ++++ files/nl/learn/html/index.html | 56 + .../document_and_website_structure/index.html | 266 ++++ .../getting_started/index.html | 513 +++++++ .../gevorderde_tekstopmaak/index.html | 452 ++++++ .../het_hoofd_metadata_in_html/index.html | 257 ++++ .../introduction_to_html/html_debuggen/index.html | 161 +++ .../html_text_fundamentals/index.html | 632 +++++++++ .../hyperlinks_maken/index.html | 306 +++++ .../nl/learn/html/introduction_to_html/index.html | 64 + .../opmaak_van_een_brief/index.html | 81 ++ .../structureren_inhoud_van_webpagina/index.html | 83 ++ .../afbeeldingen_in_html/index.html | 368 +++++ files/nl/learn/html/multimedia_inbedden/index.html | 53 + files/nl/learn/html/tables/index.html | 42 + 21 files changed, 7496 insertions(+) create mode 100644 files/nl/learn/html/forms/geavanceerde_styling_van_html-formulieren/index.html create mode 100644 files/nl/learn/html/forms/how_to_structure_an_html_form/index.html create mode 100644 files/nl/learn/html/forms/index.html create mode 100644 files/nl/learn/html/forms/styling_html_forms/index.html create mode 100644 files/nl/learn/html/forms/the_native_form_widgets/index.html create mode 100644 files/nl/learn/html/forms/verzenden_van_formuliergegevens/index.html create mode 100644 files/nl/learn/html/forms/your_first_html_form/index.html create mode 100644 files/nl/learn/html/index.html create mode 100644 files/nl/learn/html/introduction_to_html/document_and_website_structure/index.html create mode 100644 files/nl/learn/html/introduction_to_html/getting_started/index.html create mode 100644 files/nl/learn/html/introduction_to_html/gevorderde_tekstopmaak/index.html create mode 100644 files/nl/learn/html/introduction_to_html/het_hoofd_metadata_in_html/index.html create mode 100644 files/nl/learn/html/introduction_to_html/html_debuggen/index.html create mode 100644 files/nl/learn/html/introduction_to_html/html_text_fundamentals/index.html create mode 100644 files/nl/learn/html/introduction_to_html/hyperlinks_maken/index.html create mode 100644 files/nl/learn/html/introduction_to_html/index.html create mode 100644 files/nl/learn/html/introduction_to_html/opmaak_van_een_brief/index.html create mode 100644 files/nl/learn/html/introduction_to_html/structureren_inhoud_van_webpagina/index.html create mode 100644 files/nl/learn/html/multimedia_inbedden/afbeeldingen_in_html/index.html create mode 100644 files/nl/learn/html/multimedia_inbedden/index.html create mode 100644 files/nl/learn/html/tables/index.html (limited to 'files/nl/learn/html') diff --git a/files/nl/learn/html/forms/geavanceerde_styling_van_html-formulieren/index.html b/files/nl/learn/html/forms/geavanceerde_styling_van_html-formulieren/index.html new file mode 100644 index 0000000000..1025b94397 --- /dev/null +++ b/files/nl/learn/html/forms/geavanceerde_styling_van_html-formulieren/index.html @@ -0,0 +1,436 @@ +--- +title: Geavanceerde styling van HTML-formulieren +slug: Learn/HTML/Forms/Geavanceerde_styling_van_HTML-formulieren +tags: + - CSS + - Formulieren + - Geavanceerd + - Gids + - HTML + - Web + - voorbeeld +translation_of: Learn/Forms/Advanced_form_styling +--- +

In dit artikel wordt ingegaan op het gebruik van CSS in HTML-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.

+ +

Even ter herinnering:

+ +
+
The bad
+
Elementen die moeilijk aan te passen zijn en die ingewikkelde trucs nodig hebben en soms ook geavanceerde kennis van CSS3.
+
The ugly
+
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.
+
+ +

CSS uiterlijk

+ +

Het probleem met formulierwidgets andere dan tekstvelden en knoppen, is dat in veel gevallen CSS niet expressief genoeg is.

+ +

Recent is daar wel verbetering in gekomen:

+ + + +

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 datepicker dat toelaat een  datum te kiezen uit een lijst van datums.

+ +

Er zijn bij sommige browsers experimenten gaande betreffende de presentatie van formulieren en soms is het nuttig te weten wat er bestaat.

+ +
+

Waarschuwing: ondanks dat die experimenten aantrekkelijk lijken,  zijn zij niet standaard, hetgeen betekent dat zij niet betrouwbaar zijn. Gebruik ervan is op eigen risico en misschien is het beter van ze niet te gebruiken want men zou iets kunnen doen dat slecht is voor het Web door niet-standaard eigenschappen te gebruiken.

+
+ + + +

De presentatie van formulierelementen instellen

+ +

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.

+ +

Hiertoe gebruiken zij de eigenschap: {{cssxref("-webkit-appearance")}} of {{cssxref("-moz-appearance")}}. Deze eigenschappen zijn niet standaard en worden best niet gebruikt. Zij gedragen zich zelfs verschillend in WebKit en in Gecko. Eén waarde is wel goed te gebruiken: none. Met deze waarde heeft men (praktisch volledige) controle over de stijl van bepaalde widgets.

+ +

Hieronder enkele voorbeelden. Het gebruik is het best aan te tonen bij zoekvelden met WebKit browsers:

+ +
<form>
+    <input type="search">
+</form>
+ +
<style>
+input[type=search] {
+    border: 1px dotted #999;
+    border-radius: 0;
+
+    -webkit-appearance: none;
+}
+</style>
+ +
+

Nota: het is altijd moeilijk de toekomst te voorspellen betreffende webtechnologieën, maar CSS-uitbreidingen zijn niet eenvoudig en er gebeurt ook onderzoek naar andere specificaties zoals Shadow DOM  dat enig perspectief biedt. De zoektocht naar het volledig aanpasbaar formulier is nog lang niet over.

+
+ +

Voorbeelden

+ +

Keuzevakjes en keuzerondjes

+ +

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.

+ +

Een eenvoudige test

+ +
<span><input type="checkbox"></span>
+ +
span {
+    display: inline-block;
+    background: red;
+}
+
+input[type=checkbox] {
+    width : 100px;
+    height: 100px;
+}
+ +

Zo wordt dit in de verschillende browsers weergegeven:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BrowserRendering
Firefox 16 (Mac OSX)Rendering of a sized check box on Firefox
Chrome 22 (Mac OSX)Rendering of a sized check box on Chrome
Opera 12.01 (Mac OSX)Rendering of a sized check box on Opera
Internet Explorer 9 (Windows 7)Rendering of a sized check box on IE9
Internet Explorer 7 (Windows XP)Rendering of a sized check box on IE7
+ +

Een ingewikkelder voorbeeld

+ +

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:

+ +
<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>
+ +

met als basisstijl:

+ +
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;
+}
+ +

Aanpassing van het keuzevakje:

+ +

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:

+ +

Check box CSS Sprite

+ +

Vooreerst moeten de originele keuzevakjes verborgen worden. Daartoe worden ze buiten het gezichtsveld geplaatst. Hierbij moeten twee zaken in acht genomen worden:

+ + + +
:root input[type=checkbox] {
+  /* original check box are push outside the viexport */
+  position: absolute;
+  left: -1000em;
+}
+ +

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 adjacent sibling selector wordt het bijbehorende label geselecteerd. Tenslotte wordt het {{cssxref(":before")}} pseudo-element ingevoegd en wordt bepaald hoe het keuzevakje er moet uitzien.

+ +
: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;
+}
+ +

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.

+ +
: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;
+}
+ +

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:

+ +
:root input[type=checkbox]:focus + label:before {
+  outline: 1px dotted black;
+}
+ +

Hier een voorbeeld:

+ +

{{EmbedLiveSample("A_more_complex_example", 250, 130)}}

+ +

Het probleem met select

+ +

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:

+ +
<select>
+  <option>Cherry</option>
+  <option>Banana</option>
+  <option>Strawberry</option>
+</select>
+ +
select {
+  width   : 80px;
+  padding : 10px;
+}
+
+option {
+  padding : 5px;
+  color   : red;
+}
+ +

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:

+ +
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;
+}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BrowserNormale weergaveAangepaste weergave
geslotenopengeslotenopen
Firefox 16 (Mac OSX)Select closed on Firefox on Mac OSX (No tweak)Select open on Firefox on Mac OSX (No tweak)Select closed on Firefox on Mac OSXSelect open on Firefox on Mac OSX
Firefox 16 (Windows 7)Select closed on Firefox on Windows 7 (No tweak)Select open on Firefox on Windows 7 (No tweak)Select closed on Firefox on Windows 7Select open on Firefox on Windows 7
Chrome 22 (Mac OSX)Select closed on Chrome on Mac OSX (No tweak)Select open on Chrome on Mac OSX (No tweak)Select closed on Chrome on Mac OSXSelect open on Chrome on Mac OSX
Chrome 22 (Windows 7)Select closed on Chrome on Windows 7 (No tweak)Select open on Chrome on Windows 7 (No tweak)Select closed on Chrome on Windows 7Select open on Chrome on Windows 7
Opera 12.01 (Mac OSX)Select closed on Opera on Mac OSX (No tweak)Select open on Opera on Mac OSX (No tweak)Select closed on Opera on Mac OSXSelect open on Opera on Mac OSX
Internet Explorer 9 (Windows 7)Select closed on IE9 on Windows 7Select open on IE9 on Windows 7n.v.t.n.v.t.
Internet Explorer 7 (Windows XP)Select closed on IE7 on Windows XPSelect open on IE7 on Windows XPn.v.t.n.v.t.
+ +

Ondanks het gebruik van de -*-appearance eigenschap zijn er nog enkele problemen:

+ + + +

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.

+ +

In het volgend artikel wordt nagegaan welke eigenschappen in aanmerking komen: Tabel van compatibele formulierelementen.

+ +

De weg naar mooiere formulieren: nuttige bibliotheken en polyfills

+ +

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.

+ +

Als volledige controle over formulierelementen gewenst is, zit er niets anders op dan JavaScript te gebruiken. In het artikel Het maken van aangepaste widgets wordt getoond hoe men zelf widgets kan aanpassen, maar er zijn ook enkele bibliotheken die van nut kunnen zijn:

+ + + +

De volgende bibliotheken zijn niet uitsluitend voor formulieren, maar zijn zeer interessant:

+ + + +

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.

+ +

Besluit

+ +

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.

+ +

In het volgend artikel wordt ingegaan op hoe de diverse HTML-formulierelementen de meest belangrijke CSS eigenschappen ondersteunen: Tabel van compatibele formulierelementen.

+ +

Zie ook

+ + diff --git a/files/nl/learn/html/forms/how_to_structure_an_html_form/index.html b/files/nl/learn/html/forms/how_to_structure_an_html_form/index.html new file mode 100644 index 0000000000..ae4ec439c2 --- /dev/null +++ b/files/nl/learn/html/forms/how_to_structure_an_html_form/index.html @@ -0,0 +1,964 @@ +--- +title: How to structure an HTML form +slug: Learn/HTML/Forms/How_to_structure_an_HTML_form +tags: + - Attribuut + - Element + - HTML + - voorbeeld +translation_of: Learn/Forms/How_to_structure_a_web_form +--- +

Formulieren zijn een van de meest complexe structuren in HTML. Elk basisformulier kan gemaakt worden met elementen en attributen. Door een correcte opbouw wordt een bruikbaar en toegankelijk formulier verkregen.

+ +

Om functionaliteit aan HTML formulieren toe te voegen wordt voornamelijk Javascript  gebruikt. Meer geavanceerde technologieën zoals XForms, thans voorbij gestreefd, worden helaas niet door alle browsers geïmplementeerd.

+ +

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 Hoe eigen widgets voor formulieren te maken wordt dieper ingegaan op het werken met widgets.

+ +

+ +

Globale structuur

+ +

Het <form> element

+ +

Het {{HTMLElement("form")}} element definieert formeel een formulier en de attributen die het gedrag van dit formulier bepalen. Elk HTML formulier moet met deze elementen beginnen. Vele ondersteunende technologieën of browser plug-ins herkennen  {{HTMLElement("form" )}} elementen en hebben speciale routines om er gebruik van te maken.

+ +
Nota: Het is strikt verboden om formulieren te nesten. Afhankelijk van de browser is hun gedrag dan onvoorspelbaar.
+ +

Het {{HTMLElement("form")}} element ondersteunt de volgende attributen (allemaal optioneel):

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attributen van het {{HTMLElement("form")}} element
Attribuut naamDefaultwaardeBeschrijving
{{htmlattrxref("accept-charset","form")}}UNKNOWNEen lijst van karaktertekens die door een server wordt aanvaard. De defaultwaarde is de speciale string UNKNOWN. In dit geval worden de karakters gecodeerd zoals in het document dat het form element bevat.
{{htmlattrxref("action","form")}}De URI van een webpagina die de informatie van het formulier verwerkt.
{{htmlattrxref("autocomplete","form")}}onGeeft aan of de widgets in dit formulier automatisch aangevuld kunnen worden aan de defaultwaarden van de browser. Dit attribuut kan twee waarden aannemen: on of off.
{{htmlattrxref("enctype","form")}}application/x-www-form-urlencodedAls de waarde van het method attribuut post is, dan is dit attribuut het  MIME type van de inhoud van het formulier. Mogelijke waarden zijn: +
    +
  • application/x-www-form-
    • +
  • multipart/form-data: Gebruik deze waarde bij gebruik van een  {{HTMLElement("input")}} element waarvan het type attribuut  file is.
    • +
  • text/plain
    • +
+
{{htmlattrxref("method","form")}}get +

T

+ +

De HTTP methode die de browser gebruikt om het formulier te versturen. Dit attribuut kan één van twee waarden aannemen: get or post.

+
{{htmlattrxref("name","form")}}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 id attribuut gebruikt.
{{htmlattrxref("novalidate","form")}}(false)Dit attribuut geeft aan dat het formulier niet moet gevalideerd worden bij verzending.
{{htmlattrxref("target","form")}}_selfEen 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: +
    +
  • _self: Laad het antwoord in de huidige browser configuratie ({{HTMLElement("iframe")}}, tab, venster, enz.) .
    • +
  • _blank: Laad het antwoord in een nieuwe browserconfiguratie.
    • +
  • _parent: Laad het antwoord in de ouder van de huidige browser configuratie. Als er geen ouder is gedraagt deze optie zich als  _self.
    • +
  • _top: 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  _self.
    • +
+
+ +

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.

+ +

Technisch gezien is het HTML5 die het form 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.

+ +

De <fieldset> en <legend> elementen

+ +

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  Jaws of NVDA, eerst de legend voordat ze het label van een widget lezen.

+ +

Hier volgt een klein voorbeeld:

+ +
<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>
+ +

In dit voorbeeld zal een schermlezer voor de eerste widget "Fruitsap klein" lezen, voor de tweede "Fruitsap medium" en voor de derde "Fruitsap groot".

+ +

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.

+ +

Het {{HTMLElement("fieldset")}} element ondersteunt volgende specifieke attributen:

+ + + + + + + + + + + + + + + + + +
Attributen van het {{HTMLElement("fieldset")}} element
Attribuut naamDefaultwaardeBeschrijving
{{htmlattrxref("disabled","fieldset")}}(false)Als dit attribuut true 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.
+ +

Het <label> element

+ +

Het {{HTMLElement("label")}} element definieert formeel het label van een HTML widget. Dit is het belangrijkste element om toegankelijke formulieren te maken.

+ +

Het {{HTMLElement("label")}} element heeft de volgende attributen:

+ + + + + + + + + + + + + + + + + +
Attributen van het {{HTMLElement("label")}} element
Attribuut naamDefaultwaardeBeschrijving
{{htmlattrxref("for","label")}}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 for attribuut in het document.
+ +

Een {{HTMLElement("label")}} element is gebonden aan zijn widget door het for attribuut. Het for attribuut refereert naar het id 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 for attribuut te gebruiken omdat sommige ondersteunende technologieën niet overweg kunnen met expliciete relaties tussen labels en widgets.

+ +

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.

+ +
<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>
+ +

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.

+ +

Bekijk volgend voorbeeld:

+ +
<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>
+ +

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.

+ +

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.

+ +

Het tweede form element werkt op dezelfde manier. Zo weet de gebruiker hoe hij de datum moet ingeven.

+ +

Het <output> element

+ +

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.

+ +

Het {{HTMLElement("output")}} element ondersteunt de volgende attributen:

+ + + + + + + + + + + + + + + + + +
Attributen van het {{HTMLElement("output")}} element
Attribuut naamDefaultwaardeBeschrijving
{{htmlattrxref("for","output")}}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.
+ +

Gewone HTML structuren gebruikt bij formulieren

+ +

Ondanks al het voorgaande blijven formulieren gewone HTML structuren. Dus alles over HTML is ook van toepassing op formulieren.

+ +

Zoals in de voorbeelden te zien is worden widgets tussen {{HTMLElement("p")}} of {{HTMLElement("div")}} elementen geplaatst.

+ +

Samen met het {{HTMLElement("fieldset")}} element worden ook HTML titels gebruikt en worden formulieren in secties verdeeld om ingewikkelde formulieren te maken.

+ +

Ook worden vaak HTML lijsten gebruikt bij keuzevakjes en keuzerondjes.

+ +

Ziehier een eenvoudig betalingsformulier:

+ +
<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>
+ +

Met behulp van CSS ziet het formulier er zo uit:

+ + + + + + + + + + + + + + + +
Live voorbeeld
{{EmbedLiveSample("A_payment_form",460,600, "", "HTML/Forms/How_to_structure_an_HTML_form/Example")}}
Probeer de broncode
+ +

HTML widgets

+ +

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: Basis widgets voor formulieren gaat dieper in op het werken met widgets.

+ +

Het <input> element

+ +

Dit is een speciaal element omdat het eigenlijk van alles kan zijn. Door eenvoudig zijn type attribuut te wijzigen kan het totaal iets anders worden. Om de zaken te vereenvoudigen kan het type 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 type attribuut.

+ +

Dit wordt overzichtelijk gemaakt in volgende tabel. (Zie voor een volledige lijst van alle attributen de pagina betreffende het {{HTMLElement("input")}} element):

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Waarde van het type attribuutBeschrijvingVereiste attributenRelevante attributen
Eenregelige tekstvelden
textDit is het meest eenvoudige tekstveld. De waarde text voor het type attribuut is de defaultwaarde van dit attribuut.  De waarde wordt gelezen zoals zij wordt ingegeven.{{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")}}
emailEen veld dat alleen e-mailadressen toelaat.{{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")}}
passwordDe waarde van dit tekstveld wordt verborgen.{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
searchEen veld om zoekwoorden in te geven.{{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")}}
telEen veld om een telefoonnummer in te geven.{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
urlEen veld om een absolute URL in te geven.{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
Widgets zonder tekstingave
checkboxEen keuzevakje.{{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}
colorEen widget om een kleur te kiezen.{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("required","input")}}
fileEen widget om een bestand te kiezen.{{htmlattrxref("accept","input")}}, {{htmlattrxref("multiple","input")}}, {{htmlattrxref("required","input")}}
hiddenEen widget die niet getoond wordt maar waarvan de waarde toch naar de server gestuurd wordt.
numberEen widget voor ingave van een getal met drijvende komma.{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}
radioEen keuzerondje. Slechts één van een gegeven groep kan gekozen worden.{{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}
rangeEen widget om een getal in te geven waarvan de waarde niet belangrijk is.{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}
Widgetsvoor datum en tijd +
Niet ondersteund.
+
dateEen veld om de datum in te geven (jaar, maand en dag, geen tijd). +
Niet geïnstalleerd (zie bug 825294)
+ 		{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
datetimeEen veld om een datum en tijd in te geven (uur, minuut, seconde en fractie van een seconde) gebaseerd op de UTC tijdzone. +
Niet geïnstalleerd (zie bug 825294)
+ 		{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
datetime-localEen veld om een datum en tijd in te geven zonder tijdzone. +
Niet geïnstalleerd (zie bug 825294)
+ 		{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
monthEen veld voor ingave van maand en jaar, zonder tijdzone. +
Niet geïnstalleerd (zie bug 446510)
+ 		{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
timeEen veld om een tijd in te geven zonder tijdzone. +
Niet geïnstalleerd zie bug 825294)
+ 		{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
weekEen veld om een datum in te geven bestaande uit een week-jaarnummer en een weeknummer zonder tijdzone. +
Niet geïnstalleerd (zie bug 825294)
+ 		{{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
Knoppen
buttonEen knop zonder default gedrag.{{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
imageKnop om grafisch element te verzenden.{{htmlattrxref("src","input")}}, {{htmlattrxref("alt","input")}}{{htmlattrxref("width","input")}}, {{htmlattrxref("height","input")}}, {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
resetEen knop die de inhoud van het formulier terugzet naar de defaultwaarden.{{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
submitKnop die het formulier verzendt.{{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
+ +

Als om een of andere reden de waarde van het type attribuut niet ondersteund wordt door de browser wordt het {{HTMLElement("input")}} element weergegeven alsof het text is. Dit verzekert dat het formulier blijft werken, zij het niet zo netjes.

+ +

Ondanks dat het {{HTMLElement("input")}} element krachtig is, kan het niet alles doen. Daarvoor zijn er een aantal andere elementen.

+ +

Het <textarea> element

+ +

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:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attributen voor het {{HTMLElement("textarea")}} element
Attribuut naamDefaultwaardeBeschrijving
{{htmlattrxref("cols","textarea")}}20De zichtbare tekstbreedte in gemiddelde karakterbreedten.
{{htmlattrxref("rows","textarea")}}Het aantal zichtbare regels in het tekstveld.
{{htmlattrxref("wrap","textarea")}}softGeeft aan hoe het veld de tekst afbreekt. Mogelijke waarden zijn: hard of soft
+ +

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.

+ +

Dit heeft twee consequenties:

+ + + +

In het volgende voorbeeld worden beide {{HTMLElement("textarea")}} elementen  op dezelfde manier getoond:

+ +
<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>
+ +

De <select>, <option>, en <optgroup> elementen

+ +

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: De basis widges voor formulieren.

+ +

Elke waarde in het keuzevak wordt gedefinieerd met een {{HTMLElement("option")}} element en deze elementen kunnen gegroepeerd worden binnen {{HTMLElement("optgroup")}} elementen.

+ +

Bijvoorbeeld:

+ +
<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>
+ +

Als een {{HTMLElement("option")}} element een value 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.

+ +

Bij het {{HTMLElement("optgroup")}} element wordt het label attribuut getoond voor de waarden. Dit ziet er uit als een keuzemogelijkheid maar dit label kan niet geselecteerd worden.

+ + + + + + + + + + + + + + + + + + + + + + +
Attributen van het {{HTMLElement("option")}} element
Attribuute naamDefaultwaardeBeschrijving
{{htmlattrxref("label","option")}}Dit is de tekst van de optie. Het is deze tekst die getoond wordt als het label attribuut niet gedefinieerd is.
{{htmlattrxref("selected","option")}}(false)Geeft aan dat de optie geselecteerd is.
+ + + + + + + + + + + + + + + + + +
Attributen van het {{HTMLElement("optgroup")}} element
Attribuut naamDefaultwaardeBeschrijving
{{htmlattrxref("label","optgroup")}}De naam van de groep van opties. Dit attribuut is verplicht.
+ +

Het <datalist> element

+ +

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.

+ +

Om een widget aan een {{HTMLElement("datalist")}} element te binden wordt het list attribuut van de widget gebruikt. Deze vermeldt het id attribuut van het {{HTMLElement("datalist")}} element dat gebruikt moet worden.

+ +

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:

+ +
<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>
+ +

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.

+ + + + + + + + + + + + +
Safari 6Screenshot of the datalist element fallback with Safari on Mac OS
Firefox 18Screenshot of the datalist element with Firefox on Mac OS
+ +

De <meter> en <progress> elementen

+ +

Deze twee elementen geven een grafische voorstelling van een numerische waarde. Het verschil tussen beide is louter semantisch:

+ + + +

Hierdoor hebben deze elementen een specifieke set attributen:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attributen van het {{HTMLElement("meter")}} element
Attribuute naamDefaultwaardeBeschrijving
{{htmlattrxref("min","meter")}}0De ondergrens van de numerieke waarde van het gemeten interval.
{{htmlattrxref("max","meter")}}1De bovengrens van de  numerieke waarde van het gemeten interval.
{{htmlattrxref("low","meter")}}the min valueDe hoogste numerieke waarde van de ondergrens van het gemeten interval.
{{htmlattrxref("high","meter")}}the max valueDe laagste numerieke waarde van de bovengrens van het gemeten interval.
{{htmlattrxref("optimum","meter")}}De optimale numerieke waarde.
+ + + + + + + + + + + + + + + + + +
Attributen van het {{HTMLElement("progress")}} element
Attribuute naamDefaultwaardeBeschrijving
{{htmlattrxref("max","progress")}}Dit attribuut geeft aan hoeveel werk er nog moet gedaan worden door de taak aangeduid door het {{HTMLElement("progress")}} element.
+ +

Het <button> element

+ +

Een {{HTMLElement("button")}} element toont een knop. Een knop kan drie functies hebben afhankelijk van het type attribuut:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attributen van het {{HTMLElement("button")}} element
Attribuute naamDefaultwaardeBeschrijving
{{htmlattrxref("type","button")}}submitHet type knop. Mogelijke waarden zijn: button, reset, or submit.
{{htmlattrxref("formaction","button")}}Bij de verzendknop zal dit attribuut de waarde van het action attribuut van het {{HTMLElement("form")}} element overschrijven.
{{htmlattrxref("formenctype","button")}}Bij de verzendknop zal dit attribuut de waarde van het enctype attribuut van het {{HTMLElement("form")}} element overschrijven.
{{htmlattrxref("formmethod","button")}}Bij de verzendknop zal dit attribuut de waarde van het method attribuut van het {{HTMLElement("form")}} element overschrijven.
{{htmlattrxref("formnovalidate","button")}}Bij de verzendknop zal dit attribuut de waarde van het novalidate attribuut van het {{HTMLElement("form")}} element overschrijven.
{{htmlattrxref("formtarget","button")}}Bij de verzendknop zal dit attribuut de waarde van het target attribuut van het {{HTMLElement("form")}} element overschrijven.
+ +

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.

+ +
Nota: 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 name en een value attribuut in een {{HTMLElement("button")}} element in IE6 en IE7 werd niet de inhoud van het value 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.
+ +

Basis attributen

+ +

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:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attribuute naamDefaultwaardeBeschrijving
autofocus(false)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.
disabled(false)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 disabled attribuut ingesteld dan is het element actief.
formHet formulierelement waar de widget mee geassocieerd is. De waarde van het attribuut moet het id 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.
nameDe naam van het element. Deze wordt  mee verzonden met de gegevens.
valueDe initiële waarde van het element.
+ +

Het gebruik van ARIA om HTML formulieren te maken

+ +

ARIA is a W3C Candidate Recommendation en voegt meer mogelijkheden toe aan HTML om betere internettoepassingen te maken, inclusief formulieren. In "Hoe aangepaste formulierwidgets maken" wordt dieper in gegaan op het maken van formulieren maar hier zijn alvast enkele basisinstructies.

+ +

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.

+ +

De documentatie over ARIA is hier te vinden: lees hier de documentaie over ARIA.

+ +

Het aria-labelledby attribuut

+ +

Dit attribuut laat toe een label aan te maken zonder het {{HTMLElement("label")}} element. Het aria-labelledby attribuut wordt geplaatst bij de widget en refereert naar het id attribuut van het element dat als label moet gebruikt worden.

+ +
<form>
+  <p id="fruitLabel">What's your favorite fruit</p>
+  <p>
+    <input type="text" name="fruit" aria-labelledby="fruitLabel">
+  </p>
+</form>
+ +

Eigenlijk is het het tegenovergetelde van het for attribuut van het {{HTMLElement("label")}} element. Bij het for attribuut wordt naar de id van de widget gerefereerd maar bij het aria-labelledby attribuut wordt gerefereerd naar de id van het label.

+ +

Het aria-describedby attribuut

+ +

Is eigenlijk gelijk aan het aria-labelledby 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 aria-describedby attribuut wordt niet aangeraden voor formulieren. Hier wordt beter het aria-labelledby attribuut gebruikt tenzij men bredere informatie over het formulier wil geven. Echter wordt het juist aanbevolen om aria-describedby wel te gebruiken om invoervelden te omschrijven (naast het label element). Zoals hoelang een wachtwoord moet zijn (zie voorbeeld).

+ +
<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>
+ +

Het aria-label attribuut

+ +

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. 

+ +
<form>
+  <p>
+    <input type="search" name="q" aria-label="Search" />
+    <input type="submit" value="Go" />
+  </p>
+</form>
+ +

Het role attribuut

+ +

Dit is het voornaamste ARIA attribuut. Het geeft specifieke semantische informatie aan ondersteunende technologieën voor een bepaald HTML element. Er zijn veel role attributen beschikbaar, sommige speciaal voor formulieren.

+ +

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.

+ +

De role attributen voor formulieren zijn:

+ + + +

Er zijn ook samengestelde role attributen:

+ + + +

En er zijn er nog meer.  ARIA is een zeer grote verzameling. Er kennis van nemen laat toe mooie formulieren te maken, veel beter dan met HTML.

+ +

Conclusie

+ +

Met deze kennis kunnen volledige HTML formulieren gemaakt worden. Volgend artikel gaat in detail over het maken van formulieren: De basis formulier elementen.

+ +

Zie ook

+ + diff --git a/files/nl/learn/html/forms/index.html b/files/nl/learn/html/forms/index.html new file mode 100644 index 0000000000..13853c2ccf --- /dev/null +++ b/files/nl/learn/html/forms/index.html @@ -0,0 +1,358 @@ +--- +title: HTML forms guide +slug: Learn/HTML/Forms +tags: + - Featured + - Forms + - Guide + - HTML + - NeedsTranslation + - TopicStub + - Web +translation_of: Learn/Forms +--- +

This guide is a series of articles that will help you master HTML forms. 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!

+ +

Articles

+ +
    +
  1. My first HTML form
    2. +
  2. How to structure an HTML form
    3. +
  3. The native form widgets
    4. +
  4. CSS with HTML forms +
      +
    1. Styling HTML forms
      2. +
    2. Advanced styling for HTML forms
      3. +
    3. Property compatibility table for form widgets
      4. +
    +
    5. +
  5. Sending and retrieving form data
    6. +
  6. Data form validation
    7. +
  7. How to build custom form widgets
    8. +
  8. Sending forms through JavaScript +
      +
    1. Using the FormData object
      2. +
    +
    9. +
  9. HTML forms in legacy browsers
    10. +
+ +

HTML Documentation

+ +

HTML Elements

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementRelated DOM interfaceDescription
{{HTMLElement("button")}}{{domxref("HTMLButtonElement")}}The button element represents a clickable button.
{{HTMLElement("datalist")}}{{domxref("HTMLDataListElement")}}The datalist element contains a set of {{ HTMLElement("option") }} elements that represent the possible options for the value of other form elements.
{{HTMLElement("fieldset")}}{{domxref("HTMLFieldSetElement")}}The fieldset is used to group several form elements within a form.
{{HTMLElement("form")}}{{domxref("HTMLFormElement")}}The form element represents a section of document that contains interactive element that enables a user to submit information to a web server.
{{HTMLElement("input")}}{{domxref("HTMLInputElement")}}The  input element is used to create interactive controls for forms.
{{HTMLElement("keygen")}}{{domxref("HTMLKeygenElement")}}The keygen element exists to facilitate generation of key material, and submission of the public key as part of an HTML form
{{HTMLElement("label")}}{{domxref("HTMLLabelElement")}}The label element represents a caption for an item in a user interface
{{HTMLElement("legend")}}{{domxref("HTMLLegendElement")}}The legend element represents a caption for the content of its parent {{ HTMLElement("fieldset") }}.
{{HTMLElement("meter")}}{{domxref("HTMLMeterElement")}}The meter element  represents either a scalar value within a known range or a fractional value.
{{HTMLElement("optgroup")}}{{domxref("HTMLOptGroupElement")}}the optgroup element creates a group of options within a {{ HTMLElement("select") }} element.
{{HTMLElement("option")}}{{domxref("HTMLOptionElement")}}the HTML option element is used to create a control representing an item within a {{ HTMLElement("select") }}, an {{ HTMLElement("optgroup") }} or a {{ HTMLElement("datalist") }} element.
{{HTMLElement("output")}}{{domxref("HTMLOutputElement")}}The output element represents the result of a calculation.
{{HTMLElement("progress")}}{{domxref("HTMLProgressElement")}}The progress element is used to view the completion progress of a task.
{{HTMLElement("select")}}{{domxref("HTMLSelectElement")}}The select element represents a control that presents a menu of options.
{{HTMLElement("textarea")}}{{domxref("HTMLTextAreaElement")}}The textarea element represents a multi-line plain-text editing control.
+ +
+

Note: All form elements, as all HTML elements, support the {{domxref("HTMLElement")}} DOM interface.

+
+ +

HTML Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attribute NameElementsDescription
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}List of types the server accepts, typically a file type.
accept-charset{{ HTMLElement("form") }}List of supported charsets.
action{{ HTMLElement("form") }}The URI of a program that processes the information submitted via the form.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indicates whether controls in this form can by default have their values automatically completed by the browser.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}The element should be automatically focused after the page loaded.
challenge{{ HTMLElement("keygen") }}A challenge string that is submitted along with the public key.
checked{{ HTMLElement("input") }}Indicates whether the element should be checked on page load.
cols{{ HTMLElement("textarea") }}Defines the number of columns in a textarea.
data{{ HTMLElement("object") }}Specifies the URL of the resource.
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 
disabled{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates whether the user can interact with the element.
enctype{{ HTMLElement("form") }}Defines the content type of the form data when the method is POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Describes elements which belong to this one.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates the form that is the owner of the element.
high{{ HTMLElement("meter") }}Indicates the lower bound of the upper range.
keytype{{ HTMLElement("keygen") }}Specifies the type of key generated.
list{{ HTMLElement("input") }}Identifies a list of pre-defined options to suggest to the user.
low{{ HTMLElement("meter") }}Indicates the upper bound of the lower range.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indicates the maximum value allowed.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Defines the maximum number of characters allowed in the element.
method{{ HTMLElement("form") }}Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indicates the minimum value allowed.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indicates whether multiple values can be entered in an input of the type email or file.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Name of the element. For example used by the server to identify the fields in form submits.
novalidate{{ HTMLElement("form") }}This attribute indicates that the form shouldn't be validated when submitted.
optimum{{ HTMLElement("meter") }}Indicates the optimal numeric value.
pattern{{ HTMLElement("input") }}Defines a regular expression which the element's value will be validated against.
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Provides a hint to the user of what can be entered in the field.
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indicates whether the element can be edited or not.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates whether this element is required to fill out or not.
rows{{ HTMLElement("textarea") }}Defines the number of rows in a textarea.
selected{{ HTMLElement("option") }}Defines a value which will be selected on page load.
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Defines the width of the element (in pixels). If the element's type attribute is text or password then it's the number of characters.
src{{ HTMLElement("img") }}The URL of the embeddable content.
step{{ HTMLElement("input") }} 
target{{ HTMLElement("form") }} 
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}Defines the type of the element.
usemap{{ HTMLElement("img") }} 
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Defines a default value which will be displayed in the element on page load.
wrap{{ HTMLElement("textarea") }}Indicates whether the text should be wrapped or not.
+ +

Normative reference

+ + diff --git a/files/nl/learn/html/forms/styling_html_forms/index.html b/files/nl/learn/html/forms/styling_html_forms/index.html new file mode 100644 index 0000000000..f6c3cda07c --- /dev/null +++ b/files/nl/learn/html/forms/styling_html_forms/index.html @@ -0,0 +1,344 @@ +--- +title: Styling HTML forms +slug: Learn/HTML/Forms/Styling_HTML_forms +tags: + - CSS + - Formulieren + - HTML +translation_of: Learn/Forms/Styling_web_forms +--- +

In dit artikel leert de gebruiker het om HTML-formulieren vorm te geven met gebruik van CSS. 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.

+ +

Waarom is vormgeving van formulieren met CSS zo ingewikkeld?

+ +

In de begindagen van het Web, rond 1995, werden widgets toegevoegd aan de HTML in   de HTML 2 specificatie. Door de complexheid van widgets vertrouwden de ontwikkelaars op het onderliggende besturingssysteem.

+ +

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. 

+ +

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.

+ +

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 HTML formulieren vorm te geven.

+ +

Niet alle widgets worden door CSS gelijk behandeld

+ +

Er zijn nog steeds problemen met CSS-formulieren. Deze kunnen ingedeeld worden in drie categorieën

+ +

"The good"

+ +

Enkele elementen leveren geen problemen op. Het zijn de volgende structurele elementen:

+ +
    +
  1. {{HTMLElement("form")}}
    2. +
  2. {{HTMLElement("fieldset")}}
    3. +
  3. {{HTMLElement("label")}}
    4. +
  4. {{HTMLElement("output")}}
    5. +
+ +

Ook de tekstvelden (zowel enkellijnige als meerlijnige) vallen hieronder en de knoppen.

+ +

"The bad"

+ +

Sommige elementen vereisen ingewikkelde trucs waarbij soms gespecialiseerde kennis  van CSS3 nodig is.

+ +

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 Geavanceerde stijlen voor HTML-formulieren.

+ +

"The ugly"

+ +

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.

+ +

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 Hoe eigen formulier-elementen aanmaken.

+ +

Basisprincipe

+ +

Elementen die gemakkelijk aan te passen zijn 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.

+ +

Zoekvelden

+ +

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 -webkit-appearance eigenschap. Deze eigenschap wordt besproken in het artikel: Geavanceerde styling voor HTML-formulieren.

+ +

Voorbeeld

+ +
<form>
+  <input type="search">
+</form>
+
+ +
input[type=search] {
+  border: 1px dotted #999;
+  border-radius: 0;
+
+  -webkit-appearance: none;
+}
+ +

This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance

+ +

Zoals te zien is op de schermafdruk van Chrome hebben beide velden een rand. Maar de bovenste is gemaakt zonder  de -webkit-appearance eigenschap en de onderste met de -webkit-appearance: none. Het verschil is duidelijk.

+ +

Lettertypen en tekst

+ +

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:

+ +
button, input, select, textarea {
+  font-family : inherit;
+  font-size   : 100%;
+}
+ +

De schermafdruk hieronder toont het verschil. Links staat de systeemeigen weergave in Firefox en Mac OS X. Rechts de weregave met bovenstaande aanpassingen.

+ +

This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization

+ +

Er wordt veel gediscussieerd over wat het beste uitzicht is. Het is aan u als ontwerper van uw website om te kiezen.

+ +

Kadermodel

+ +

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.

+ +

Dit komt doordat elk element zijn eigen regels heeft wat betreft rand, uitvulling en marge. Dus om elk element dezelfde grootte te geven moet de {{cssxref("box-sizing")}} eigenschap gebruikt worden:

+ +
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;
+}
+ +

This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing.

+ +

In de schermafdruk hierboven wordt links de weergave getoond zonder {{cssxref("box-sizing")}}, terwijl rechts deze eigenschap is toegepast met de waarde border-box. Zie hoe ze allemaal dezelfde ruimte innemen ondanks de systeemeigen instellingen.

+ +

Positionering

+ +

Positionering van HTML formulierelementen is over het algemeen geen probleem. Twee elementen echter vragen echter speciale aandacht:

+ +

legend

+ +

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.

+ +

Om reden van toegankelijkheid is het {{HTMLElement("legend")}} element zeer belangrijk. Het wordt besproken bij ondersteunende technologieë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:

+ +
HTML
+ +
<fieldset>
+  <legend>Hi!</legend>
+  <h1>Hello</h1>
+</fieldset>
+ +
CSS
+ +
legend {
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+ +

textarea

+ +

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:

+ +
textarea {
+  vertical-align: top;
+}
+ +

Voorbeeld

+ +

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:

+ +

This is what we want to achieve with HTML and CSS

+ +

HTML

+ +

De HTML-code verschilt weinig van het voorbeeld uit het eerste artikelvan deze gids. Er zijn slechts een aantal ID's  en een titel toegevoegd.

+ +
<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>
+ +

CSS

+ +

Nu begint het leuke. Voor het coderen moeten drie elementen worden toegevoegd:

+ +
    +
  1. De achtergrond van de postkaart
    2. +
  2. Een schrijfmachine lettertype: De "Secret Typewriter" van fontsquirrel.com
    3. +
  3. Een handschrift lettertype: Het "Jounal" van frontsquirrel.com
    4. +
+ +

Nu de code. Eerst bereiden we een achtergrond voor met de  {{cssxref("@font-face")}} regels en alle basiselementen  {{HTMLElement("body")}} en {{HTMLElement("form")}}.

+ +
@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);
+}
+ +

Dan worden de elementen en de titel geplaatst.

+ +
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;
+}
+ +

Nu de elementen zelf. Eerst het lettertype van het {{HTMLElement("label")}} element:

+ +
label {
+  font : .8em "typewriter", sans-serif;
+}
+ +

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:

+ +
input, textarea {
+  font    : .9em/1.5em "handwriting", sans-serif;
+
+  border  : none;
+  padding : 0 10px;
+  margin  : 0;
+  width   : 240px;
+
+  background: none;
+}
+ +

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.

+ +
input:focus, textarea:focus {
+  background   : rgba(0,0,0,.1);
+  border-radius: 5px;
+  outline      : none;
+}
+ +

De éénregelige en meerregelige tekstvelden moeten nog in overeenstemming gebracht worden, want standaard zien ze er verschillend uit.

+ +

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:

+ +
input {
+    height: 2.5em; /* for IE */
+    vertical-align: middle; /* This is optional but it makes legacy IEs look better */
+}
+ +

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  resize eigenschap toe. De {{cssxref("overflow")}} eigenschap wordt gebruikt om het veld consistent te maken over alle browsers. Sommige browsers gebruiken standaard auto, terwijl andere scroll gebruiken. In dit geval is het beter auto te gebruiken.

+ +
textarea {
+  display : block;
+
+  padding : 10px;
+  margin  : 10px 0 0 -10px;
+  width   : 340px;
+  height  : 360px;
+
+  resize  : none;
+  overflow: auto;
+}
+ +

Het {{HTMLElement("button")}} element is gemakkelijk in CSS. Men kan zowat alles ermee doen, inclusief pseudo-elementen!

+ +
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;
+}
+ +

Dat is alles. Klaar om uit te proberen!

+ +

Besluit

+ +

Uit bovenstaande blijkt dat bij het opstellen van formulieren met tekstvelden en knoppen, het vrij gemakkelijk is CSS te gebruiken. Zie het artikel normalizeer.css project voor meer CSS-trucs in verband met het werken met formulierwidgets.

+ +

In het volgend artikel wordt ingegaan op formulierelementen die vallen in de categorieën "bad" en "ugly".

diff --git a/files/nl/learn/html/forms/the_native_form_widgets/index.html b/files/nl/learn/html/forms/the_native_form_widgets/index.html new file mode 100644 index 0000000000..844466956e --- /dev/null +++ b/files/nl/learn/html/forms/the_native_form_widgets/index.html @@ -0,0 +1,1448 @@ +--- +title: The native form widgets +slug: Learn/HTML/Forms/The_native_form_widgets +tags: + - Formulier + - HTML + - HTML5 + - voorbeeld +translation_of: Learn/Forms/Basic_native_form_controls +--- +

HTML formulieren 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.

+ +

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: Hoe aangepaste widgets maken.

+ +

Velden voor tekstinvoer

+ +

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.

+ +

Tekstvelden van HTML formulieren zijn eenvoudige tekstvelden die alleen platte tekst aanvaarden. Dit betekent dat rich editing (vet, cursief, enz.) niet mogelijk is. Alle rich text editors hebben aangepaste widgets.

+ +

Alle tekstvelden hebben enkele gemeenschappelijke eigenschappen:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Compatibiliteits tabel
Functie op bureaubladChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("input")}}.{{htmlattrxref("readonly","input")}}1.0{{CompatGeckoDesktop("1.0")}}61.01.0
{{HTMLElement("input")}}.{{htmlattrxref("disabled","input")}}1.0{{CompatGeckoDesktop("1.0")}}61.01.0
{{HTMLElement("input")}}.{{htmlattrxref("placeholder","input")}}10.0{{CompatGeckoDesktop("4.0")}}1011.104.0
{{HTMLElement("textarea")}}.{{htmlattrxref("placeholder","textarea")}}10.0{{CompatGeckoDesktop("4.0")}}1011.505.0
{{HTMLElement("input")}}.{{htmlattrxref("size","input")}}1.0{{CompatGeckoDesktop("1.0")}}21.01.0
{{HTMLElement("input")}}.{{htmlattrxref("maxlength","input")}}1.0{{CompatGeckoDesktop("1.0")}}21.01.0
{{HTMLElement("input")}}.{{htmlattrxref("spellcheck","input")}}10.0{{CompatGeckoDesktop("3.6")}}1011.04.0
Functie op mobiel apparaatAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("readonly","input")}}{{CompatVersionUnknown()}}{{CompatGeckoMobile("4.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("disabled","input")}}{{CompatVersionUnknown()}}{{CompatGeckoMobile("4.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("placeholder","input")}}2.3{{CompatGeckoMobile("4.0")}}{{CompatUnknown()}}11.104
{{HTMLElement("textarea")}}.{{htmlattrxref("placeholder","textarea")}}{{CompatUnknown()}}{{CompatGeckoMobile("4.0")}}{{CompatUnknown()}}11.504
{{HTMLElement("input")}}.{{htmlattrxref("size","input")}}{{CompatVersionUnknown()}}{{CompatGeckoMobile("4.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("maxlength","input")}}{{CompatVersionUnknown()}}{{CompatGeckoMobile("4.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("spellcheck","input")}}{{CompatUnknown()}}{{CompatGeckoMobile("4.0")}}{{CompatUnknown()}}11.0{{CompatUnknown()}}
+ +

Eenregelige tekstvelden

+ +

Een tekstveld van één regel wordt bekomen met het {{HTMLElement("input")}} element waarvan het {{htmlattrxref("type","input")}} attribuut text is. Text is de defaultwaarde. Dus ook zonder het {{htmlattrxref("type","input")}} attribuut of een voor de browser onbekend type attribuut is het platte tekst die aanvaardt wordt door het tekstveld.

+ +
<input type="text">
+ +

Eenregelige tekstvelden hebben één beperking: regelafbrekingen worden door de browser verwijderd voordat de gegevens verstuurd worden.

+ +

Screenshots of single line text fields on several platforms.

+ +

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 reguliere expressie .

+ +
<input type="text" pattern="^cherry|banana$">
+ +

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.

+ +

Veld voor e-mail addres

+ +

Dit veld wordt ingesteld door de waarde email op te geven voor het {{htmlattrxref("type","input")}} attribuut:

+ +
<input type="email" multiple>
+ +

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.

+ +

Veld voor paswoord

+ +

Dit veld wordt ingesteld door de waarde password op te geven voor het {{htmlattrxref("type","input")}} attribuut:

+ +
<input type="password">
+ +

Hier kan elk teken ingegeven worden en de tekens zijn niet leesbaar.

+ +
Note: 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.
+ +

Zoekveld

+ +

Dit veld wordt ingesteld door de waarde search voor het {{htmlattrxref("type","input")}} attribuut:

+ +
<input type="search">
+ +

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.

+ +

Screenshots of search fields on several platforms.

+ +

Veld voor telefoonnummer

+ +

Dit veld wordt ingesteld door de waarde tel te gebruiken voor het  {{htmlattrxref("type","input")}} attribuut:

+ +
<input type="tel">
+ +

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.

+ +

URL veld

+ +

Dit veld wordt ingesteld door de waarde url voor het {{htmlattrxref("type","input")}} attribuut:

+ +
<input type="url">
+ +

Dit veld waakt er over dat alleen geldige URLs worden ingegeven. Er wordt een fout gegenereerd als de URL niet juist is.

+ +
Nota: Dat de URL de juiste vorm heeft betekent niet dat dat het adres bestaat.
+ +

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 : Gegevensvalidatie.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Compatibiliteitstabel
DesktopfuctieChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="text"1.0{{CompatGeckoDesktop("1.0")}}21.01.0
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="email"10.0{{CompatGeckoDesktop("4.0")}}1010.62{{CompatUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="password"1.0{{CompatGeckoDesktop("1.0")}}21.01.0
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="search"5.0{{CompatGeckoDesktop("4.0")}}1011.015.0
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="tel"5.0{{CompatGeckoDesktop("4.0")}}1011.015.0
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="url"10.0{{CompatGeckoDesktop("4.0")}}1010.62{{CompatUnknown()}}
Mobiele functieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="text"{{CompatVersionUnknown()}}{{CompatGeckoMobile("4.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}1.0
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="email"{{CompatNo()}}{{CompatGeckoMobile("4.0")}}{{CompatNo()}}{{CompatVersionUnknown()}}{{CompatUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="password"{{CompatUnknown()}}{{CompatGeckoMobile("4.0")}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="search"{{CompatNo()}}{{CompatGeckoMobile("4.0")}}{{CompatUnknown()}}{{CompatVersionUnknown()}}4.0
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="tel"2.3{{CompatGeckoMobile("4.0")}}{{CompatUnknown()}}{{CompatVersionUnknown()}}3.1
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="url"{{CompatNo()}}{{CompatGeckoMobile("4.0")}}{{CompatUnknown()}}{{CompatVersionUnknown()}}3.1
+ +

Tekstvelden met meerdere regels

+ +

Het {{HTMLElement("textarea")}} element creëert een tekstveld dat meerdere regels bevat.

+ +
<textarea cols="20" rows="10"></textarea>
+ +

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.

+ +

Dank zij de CSS eigenschap {{cssxref("resize")}} kan de gebruiker rechtstreeks de grootte van het veld aanpassen.

+ +

Screenshots of multi-lines text fields on several platforms.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Compatibiliteitstabel
DesktopfuctieChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("textarea")}}{{CompatVersionUnknown()}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
Mobiele functieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("textarea")}}{{CompatVersionUnknown()}}{{CompatGeckoMobile("4.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+ +

Afrolmenu

+ +

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.

+ +

Keuzelijst

+ +

Een keuzelijst wordt gemaakt met het {{HTMLElement("select")}} element met één of meerdere {{HTMLElement("option")}} elementen die de keuzemogelijkheden aangeven.

+ +
<select>
+  <option>Banana</option>
+  <option>Cherry</option>
+  <option>Lemon</option>
+</select>
+ +

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:

+ +
<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>
+ +

Screenshots of single line select box on several platforms.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Compatibiliteitstabel
DesktopfunctieChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("select")}}1.0{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{HTMLElement("option")}}1.0{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{HTMLElement("optgroup")}}1.0{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
Mobiele functieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("select")}}{{CompatVersionUnknown()}}{{CompatGeckoMobile("4.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{HTMLElement("option")}}{{CompatVersionUnknown()}}{{CompatGeckoMobile("4.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{HTMLElement("optgroup")}}{{CompatVersionUnknown()}}{{CompatGeckoMobile("4.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+ +

Meerkeuzelijst

+ +

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. 

+ +
<select multiple>
+  <option>Banana</option>
+  <option>Cherry</option>
+  <option>Lemon</option>
+</select>
+ +

Screenshots of multi-lines select box on several platforms.

+ +
Note: Niet alle browsers die het {{HTMLElement("select")}} element ondersteunen, ondersteunen het {{htmlattrxref("multiple","select")}} attribuut.
+ +

Autoaanvullen

+ +

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.

+ +

Zodra de gebruiker iets ingeeft wordt een keuzelijst getoond met alle overeenkomsten in het datalist object.

+ +
<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>
+ +
Note: Volgens the HTML specification 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.
+ +
Screenshots of datalist on several platforms.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Compatibiliteits tabel
DesktopfuctieChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("datalist")}}20.0{{CompatGeckoDesktop("4.0")}}109.6{{CompatNo()}}
{{HTMLElement("input")}}.{{htmlattrxref("list","input")}}20.0{{CompatGeckoDesktop("4.0")}}109.6{{CompatNo()}}
Mobile fuctieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("datalist")}}{{CompatNo()}}{{CompatGeckoMobile("4.0")}}{{CompatNo()}}{{CompatVersionUnknown()}}{{CompatNo()}}
{{HTMLElement("input")}}.{{htmlattrxref("list","input")}}{{CompatNo()}}{{CompatGeckoMobile("4.0")}}{{CompatNo()}}{{CompatVersionUnknown()}}{{CompatNo()}}
+ +

Klikbare items

+ +

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.

+ +

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.

+ +

Het keuzevakje

+ +

Een keuzevakje wordt gemaakt met het {{HTMLElement("input")}} element waarvan het {{htmlattrxref("type","input")}} attribuut checkbox is.

+ +
<input type="checkbox" checked>
+
+ +

Het keuzevakje gedefinieerd op voorgaande manier is bij default aangevinkt.

+ +

Screenshots of check boxes on several platforms.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Compatibiliteitstabel
DesktopfunctieChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="checkbox"1.0{{CompatGeckoDesktop("1.0")}}21.01.0
Mobiele functieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="checkbox"1.0{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+ +

Het keuzerondje

+ +

Een keuzerondje wordt gemaakt door het {{HTMLElement("input")}} element waarvan het {{htmlattrxref("type","input")}} attribuut  radio is.

+ +
<input type="radio" checked>
+ +

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.

+ +
<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>
+ +

Screenshots of radio buttons on several platforms.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Compatibiliteitstabel
DesktopfunctieChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="radio"1.0{{CompatGeckoDesktop("1.0")}}21.01.0
Mobiele functieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="radio"1.0{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+ +

Knoppen

+ +

In HTML formulieren zijn er drie knoppen:

+ +
+
Verzenden
+
Zendt de formuliergegevens naar de server.
+
Herstel
+
Herstelt alle widgets van het formulier naar hun defaultwaarde.
+
Anoniem
+
Knoppen waarvan de uitwerking aangepast kan worden door middel an JavaScript.
+
+ +

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:

+ +

verzenden

+ +
<button type="submit">
+    This a <br><strong>submit button</strong>
+</button>
+
+<input type="submit" value="This is a submit button">
+ +

herstel

+ +
<button type="reset">
+    This a <br><strong>reset button</strong>
+</button>
+
+<input type="reset" value="This is a reset button">
+ +

anoniem

+ +
<button type="button">
+    This an <br><strong>anonymous button</strong>
+</button>
+
+<input type="button" value="This is an anonymous button">
+ +

In principe gedraagt het {{HTMLElement("button")}} element en het {{HTMLElement("input")}} element zich identiek. Er zijn echter kleine verschillen:

+ + + +

Screenshots of buttons on several platforms.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Compatibiliteitstabel
DesktopfunctieChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="submit"1.0{{CompatGeckoDesktop("1.0")}}21.01.0
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="reset"1.0{{CompatGeckoDesktop("1.0")}}21.01.0
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="button"1.0{{CompatGeckoDesktop("1.0")}}31.01.0
{{HTMLElement("button")}}1.0{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown()}}
+ (Buggy before IE8)		{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
Mobiele functieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="number"1.0{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="reset"1.0{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="button"1.0{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{HTMLElement("button")}}1.0{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+ +

Speciale formulier widgets

+ +

Deze widgets laten invoer toe van complexe of gestructeerde gegevens zoals exacte of benaderende getallen, datum en tijd en kleuren.

+ +

Getallen

+ +

Widgets voor getallen worden gemaakt met het {{HTMLElement("input")}} element en number 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.

+ +

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.

+ +

Voorbeeld

+ +
<input type="number" min="1" max="10" step="2">
+ +

Dit creëert een widget wiens waarde begrensd is tussen 1 en 10 en die in stappen van 2 kan verhoogd of verlaagd worden.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Compatibiliteitstabel
DesktopfunctieChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="number"11.0{{CompatNo()}} {{bug('344616')}}10
+ (herkend maar geen UI)		{{CompatVersionUnknown()}}5.2
Mobiele functieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="number"2.3{{CompatNo()}}{{CompatNo()}}{{CompatVersionUnknown()}}4.0
+ +

Schuifregelaar

+ +

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.

+ +

Een schuifregelaar wordt gemaakt met het {{HTMLElement("input")}} element met {{htmlattrxref("type","input")}} attribuut range. Hij moet wel correct ingesteld zijn met zijn {{htmlattrxref("min","input")}}, {{htmlattrxref("max","input")}} en {{htmlattrxref("step","input")}} attributen.

+ +

Voorbeeld

+ +
<input type="range" min="1" max="5" step="1">
+ +

Dit voorbeeld creëert een schuifregelaar waarvan waarde varieert tussen 1 en 5 in stappen van +1 en -1.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Compatibiliteitstabel
DesktopfunctieChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="range"5.023.01010.624.0
Mobiele functieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="range"{{CompatNo()}}23.0{{CompatNo()}}10.625.0
+ +

Ingave van datum en tijd

+ +

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.

+ +

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:

+ +

date

+ +

Dit creëert een widget die een datum toont of kan opnemen, zonder tijd.

+ +
<input type="date">
+ +

datetime

+ +

Dit crëeert een widget die een datum met tijd kan tonen of opnemen in de UTC tijdzone.

+ +
<input type="datetime">
+ +

datetime-local

+ +

Dit creëert een widget die een datum met tijd weergeeft of opneemt in elke tijdzone.

+ +
<input type="datetime-local">
+ +

month

+ +

Dit creëert een widget die een maand en een jaartal weergeeft of opneemt.

+ +
<input type="month">
+ +

time

+ +

Creëert een widget die een tijd weergeeft of opneemt.

+ +
<input type="time">
+ +

week

+ +

Creëert een widget die een week en een jaartal weergeeft of opneemt.

+ +
<input type="week">
+ +

Alle datum en tijd widgets kunnen beperkt zijn door de {{htmlattrxref("min","input")}} en {{htmlattrxref("max","input")}} attributen.

+ +
<label for="myDate">When are you available this summer?</label>
+<input type="date" min="2013-06-01" max="2013-08-31" id="myDate">
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Compatibiliteitstabel
DesktopfunctieChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="date"20.0{{CompatNo()}} {{bug('825294')}}{{CompatNo()}}10.62{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="datetime"{{CompatNo()}}{{CompatNo()}} {{bug('825294')}}{{CompatNo()}}10.62{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="datetime-local"{{CompatNo()}}{{CompatNo()}} {{bug('825294')}}{{CompatNo()}}10.62{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="month"{{CompatNo()}}{{CompatNo()}} {{bug('825294')}}{{CompatNo()}}10.62{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="time"{{CompatNo()}}{{CompatNo()}} {{bug('825294')}}{{CompatNo()}}10.62{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="week"{{CompatNo()}}{{CompatNo()}} {{bug('825294')}}{{CompatNo()}}10.62{{CompatVersionUnknown()}}
Mobiele functieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="date"{{CompatNo()}}{{CompatNo()}} {{bug('446510')}}{{CompatNo()}}10.625.0
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="datetime"{{CompatNo()}}{{CompatNo()}} {{bug('446510')}}{{CompatNo()}}10.62{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="datetime-local"{{CompatNo()}}{{CompatNo()}} {{bug('446510')}}{{CompatNo()}}10.62{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="month"{{CompatNo()}}{{CompatNo()}} {{bug('446510')}}{{CompatNo()}}10.62{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="time"{{CompatNo()}}{{CompatNo()}} {{bug('446510')}}{{CompatNo()}}10.62{{CompatVersionUnknown()}}
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="week"{{CompatNo()}}{{CompatNo()}} {{bug('446510')}}{{CompatNo()}}10.62{{CompatVersionUnknown()}}
+ +
Waarschuwing: 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!
+ +

Kleuren kiezen

+ +

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.

+ +

Een kleuren widget wordt gemaakt door het {{HTMLElement("input")}} element met color als {{htmlattrxref("type","input")}} attribuut.

+ +
<input type="color">
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Compatibiliteitstabel
DesktopfunctieChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="color"21.0{{CompatNo()}} {{bug('547004')}}{{CompatNo()}}11.01{{CompatNo()}}
Mobiele functieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="color"{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}{{CompatUnknown()}}{{CompatNo()}}
+ +

Andere widgets

+ +

Er zijn nog enkele andere widgets die niet dadelijk ergens bij horen maar niettemin belangrijk zijn.

+ +

Kiezen van bestanden

+ +

HTML formulieren kunnen bestanden naar een server versturen. Dit wordt verduidelijkt in het artikel: Verzenden en ontvangen van gegevens. De widget "Bestanden kiezen" laat de gebruiker toe één of meerdere bestanden te kiezen om te verzenden.

+ +

Kies het {{HTMLElement("input")}} element met file 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.

+ +

Voorbeeld

+ +

In dit voorbeeld kunnen meerdere grafische bestanden gekozen worden.

+ +
<input type="file" accept="image/*" multiple>
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Compatibiliteitstabel
DesktopfunctieChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="file"1.0{{CompatGeckoDesktop("1.0")}}3.021.01.0
Mobiele functieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="file"{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}
+ +

Verborgen inhoud

+ +

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 hidden als {{htmlattrxref("type","input")}} attribuut.

+ +

Dit element vereist ook de name en value attributen:

+ +
<input type="hidden" name="timestamp" value="1286705410">
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Compatibiliteitstabel
Feature DesktopChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="hidden"1.0{{CompatGeckoDesktop("1.0")}}21.01.0
Mobiele functieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="hidden"{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+ +

Afbeelding

+ +

De afbeeldings widget 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).

+ +

Een afbeeldings widget wordt gecrëerd met een {{HTMLElement("input")}} element en image als {{htmlattrxref("type","input")}} attribuut. Dit element ondersteunt dezelfde attributen als het  {{HTMLElement("img")}} element plus de attributen van alle formulier knoppen.

+ +
<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />
+ +

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 ".x" en de sleutel van de Y-waarde is het {{htmlattrxref("name","input")}} attribuut gevolgd door ".y".

+ +

Laten we een voorbeeld bekijken:

+ +
<form action="http://foo.com" method="get">
+  <input type="image" value="pos" alt="" src="map.png" />
+</form>
+
+ +

Bij het klikken op de afbeelding  in dit formulier wordt naar de volgende URL verzonden:

+ +
http://foo.com?pos.x=123&pos.y=456
+ +

De waarde van de pos.x en pos.y parameters is afhankelijk van de plaats in de afbeelding waar geklikt wordt. Hoe deze waarden verzonden en ontvangen worden wordt beschreven in Zenden en ontvangen van gegevens.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Compatibiliteitstabel
DesktopfuctieChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="image"1.01.021.01.0
Mobiele functieAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("input")}}.{{htmlattrxref("type","input")}}="image"{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+ +

Meters en voortgangsbalken

+ +

Meters en en voortgangsbalken zijn visuele voortellingen  van numerieke waarden.

+ +

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 technologieën kunnen overweg met dit element.

+ +
<progress max="100" value="75">75/100</progress>
+ +

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:

+ + + +

Alle browsers die het {{HTMLElement("meter")}} element ondersteunen gebruiken de deze waarden om de kleur van de balk aan te passen:

+ + + +

Niet alle browsers en ondersteunende technologieën kunnen overweg met dit element.

+ +
<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Compatibility table
DesktopfunctiesChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{HTMLElement("progress")}}6.0{{CompatGeckoDesktop("6.0")}}1010.65.2
{{HTMLElement("meter")}}6.0{{CompatGeckoDesktop("16.0")}}{{CompatNo()}}11.05.2
Mobiele functiesAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{HTMLElement("progress")}}{{CompatNo()}}{{CompatGeckoMobile("6.0")}}{{CompatNo()}}11.0{{CompatUnknown()}}
{{HTMLElement("meter")}}{{CompatNo()}}{{CompatGeckoMobile("16.0")}}{{CompatNo()}}11.0{{CompatUnknown()}}
+ +

Zie ook

+ +

Om dieper in te gaan op de verschillende widgets voor formulieren zijn er nuttige externe bronnendie kunnen geraadpleegd worden:

+ + diff --git a/files/nl/learn/html/forms/verzenden_van_formuliergegevens/index.html b/files/nl/learn/html/forms/verzenden_van_formuliergegevens/index.html new file mode 100644 index 0000000000..feea7f5f78 --- /dev/null +++ b/files/nl/learn/html/forms/verzenden_van_formuliergegevens/index.html @@ -0,0 +1,339 @@ +--- +title: Formuliergegevens verzenden +slug: Learn/HTML/Forms/Verzenden_van_formuliergegevens +tags: + - Beginner + - Bestanden + - Formulieren + - HTML + - HTTP + - Headers + - Veiligheid + - Web +translation_of: Learn/Forms/Sending_and_retrieving_form_data +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}
+ +

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.

+ + + + + + + + + + + + +
Voorafgaande kennis:Basis computergebruik,  inleiding tot HTML en basiskennis HTTP en programmering aan de kant van de server.
Doel:Begrijpen wat er gebeurt wanneer formuliergegevens verzonden worden met inbegrip van hoe de gegevens verwerkt worden door de server.
+ +

Waar gaan de gegevens naar toe?

+ +

Hier wordt besproken wat er gebeurt met de gegevens wanneer een formulier wordt verzonden.

+ +

Client/server architectuur

+ +

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  Apache, Nginx, IIS, Tomcat, enz.) gebruik makend van het  HTTP protocol. De server beantwoordt het verzoek met hetzelfde protocol.

+ +

A basic schema of the Web client/server architecture

+ +

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.

+ +
+

Nota: Zie Eerste stappen in programmering van websites aan de kant van de server om een beter idee te krijgen van hoe de client-server architectuur werkt.

+
+ +

Aan de zijde van de client: bepalen hoe de gegevens te verzenden

+ +

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")}}.

+ +

Het {{htmlattrxref("action","form")}} attribuut

+ +

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.

+ +

In volgend voorbeeld worden de gegevens verzonden naar een absolute URL — http://foo.com:

+ +
<form action="http://foo.com">
+ +

Hier wordt gebruik gemaakt van een relatieve URL  — de gegevens worden verzonden naar een andere URL op de server:

+ +
<form action="/somewhere_else">
+ +

Als er geen attributen gespecifieerd worden, worden de {{HTMLElement("form")}}gegevens verstuurd naar de pagina waarop het formulier staat:

+ +
<form>
+ +

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.

+ +
<form action="#">
+ +
+

Nota: het is mogelijk om een URL te specifiëren die gebruik maakt van het HTTPS  (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.

+
+ +

Het {{htmlattrxref("method","form")}} attribuut

+ +

Dit attribuut bepaalt hoe de gegevens worden verzonden. Het HTTP protocol voorziet diverse methoden om een verzoek op te stellen. De twee meest gebruikte methoden zijn de GET en de POST methoden.

+ +

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.

+ +
De GET methode
+ +

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.

+ +

Bekijken we het volgende formulier::

+ +
<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>
+ +

Als gevolg van de GET methode ziet men bij het verzenden de URL www.foo.com/?say=Hi&to=Mom verschijnen in de adresbalk.

+ +

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:

+ + + +

Het HTTP-verzoek ziet er zo uit:

+ +
GET /?say=Hi&to=Mom HTTP/1.1
+Host: foo.com
+ +
+

Nota: Dit voorbeeld is ook te vinden op GitHub — zie get-method.html (see it live also).

+
+ +
De POST methode
+ +

De POST 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.

+ +

Nemen we een voorbeeld — dit is hetzelfde formulier als in de GET sectie hierboven, maar met het {{htmlattrxref("method","form")}} attribuut ingesteld op post.

+ +
<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>
+ +

Als het formulier wordt verzonden met de POST methode worden er geen gegevens gekoppeld aan de URL en het HTTP verzoek ziet er als volgt uit, met de gegevens in het bericht:

+ +
POST / HTTP/1.1
+Host: foo.com
+Content-Type: application/x-www-form-urlencoded
+Content-Length: 13
+
+say=Hi&to=Mom
+ +

Content-Length geeft de omvang van de inhoud aan en Content-Type geeft het type aan van de gegevensbron die naar de server wordt verzonden. Hier wordt later verder op ingegaan.

+ +
+

Nota: Dit voorbeeld kan ook gevonden worden op GitHub — zie post-method.html (see it live also).

+
+ +

HTTP-verzoeken bekijken

+ +

HTTP-verzoeken worden nooit getoond aan de gebruiker (om ze te zien moeten instrumenten gebruikt worden als Firefox Network Monitor of  Chrome Developer Tools). Bijvoorbeeld in de Chrome network tab:

+ +

+ +

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:

+ +
    +
  1. 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.
    2. +
  2. 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.
    3. +
+ +

Aan de kant van de server: ontvangst van de gegevens

+ +

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.

+ +

Voorbeeld: Raw PHP

+ +

PHP 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.

+ +
<?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;
+?>
+ +

Dit voorbeeld toont een pagina met de gegevens die we verzonden hebben. Dit wordt getoond in ons php-example.html voorbeeldbestand. Dit bevat hetzelfde voorbeeld als hierboven met een  post methode en als  action : php-example.php. Bij verzending worden de formuliergegevens verzonden naar  php-example.php, waar de PHP code staat uit bovenstaand voorbeeld. Bij uitvoering toont de browser: Hi Mom.

+ +

+ +
+

Nota: 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 MAMP (Mac en Windows) en AMPPS (Mac, Windows, Linux).

+
+ +

Voorbeeld: Python

+ +

Volgend voorbeeld toont het gebruik van Python om hetzelfde te doen: tonen van verzonden gegevens op een webpagina. Dit maakt gebruik van het  Flask framework om sjablonen te tonen, versturen van formuliergegevens, enz. (zie python-example.py).

+ +
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()
+ +

De twee sjablonen waarnaar gerefereerd wordt in de code zijn de volgende:

+ + + +
+

Nota: 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  Python/PIP geïnstalleerd worden, dan Flask d.m.v. pip3 install flask. Daarna moet het mogelijk zijn het voorbeeld te laten lopen door middel van  python3 python-example.py en dan naar localhost:5000 te gaan in de browser.

+
+ +

Andere talen en omgevingen

+ +

Er zijn vele andere technologieën aan de serverkant voor behandeling van formulieren met inbegrip van Perl, Java, .Net, Ruby, 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:

+ + + +

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.

+ +
+

Nota: 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.

+
+ +

Speciaal: verzenden van bestanden

+ +

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.

+ +

Het {{htmlattrxref("enctype","form")}} attribuut

+ +

Dit attribuut laat toe de waarde van Content-Type 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 application/x-www-form-urlencoded. In mensentaal betekent dit: "Dit zijn formuliergegevens die gecodeerd zijn in URL parameters."

+ +

Om bestanden te versturen moeten er drie stappen ondernomen worden:

+ + + +

Bijvoorbeeld:

+ +
<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>
+ +
+

Nota: 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 <input> 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.

+
+ +
+

Waarschuwing: 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.

+
+ +

Veiligheidsoverwegingen

+ +

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.

+ +

Al naar gelang de toepassing zijn er wel bekende veiligheids problemen die men kan tegenkomen:

+ +

XSS en CSRF

+ +

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.

+ +

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  politiek van dezelfde bron. Het effect van deze aanvallen kan gaan van vervelend tot een ernstig veiligheidsrisico.

+ +

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).

+ +

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.

+ +

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 {{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.

+ +

SQL injectie

+ +

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). 

+ +

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  mysql_real_escape_string() op een PHP/MySQL systeem).

+ +

HTTP header injectie en email injectie

+ +

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.

+ +

Deze aanvallen gebeuren meestal in stilte en wijzigen servers in een zombie.

+ +

Wees wantrouwig: vertrouw uw gebruikers nooit

+ +

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.

+ +

Alle gegevens die de server bereiken moeten gecontroleerd worden. Altijd. Geen enkele uitzondering:

+ + + +

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.

+ +
+

Nota: Het artikel over Website beveiliging van de serverkant gaat dieper in op bovenstaande bedreigingen en potentiële oplossingen.

+
+ +

Besluit

+ +

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 validatie aan de zijde van de client mogelijk is maar de server kan deze validatie niet vertrouwen omdat hij niet weet wat er zich afspeelt aan de zijde van de client.

+ +

Zie ook

+ +

Volgende bronnen gaan dieper in op de beveiliging van websites:

+ + + +

{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}

diff --git a/files/nl/learn/html/forms/your_first_html_form/index.html b/files/nl/learn/html/forms/your_first_html_form/index.html new file mode 100644 index 0000000000..43c489e5a9 --- /dev/null +++ b/files/nl/learn/html/forms/your_first_html_form/index.html @@ -0,0 +1,273 @@ +--- +title: My first HTML form +slug: Learn/HTML/Forms/Your_first_HTML_form +tags: + - CSS + - Formulier + - HTML + - voorbeeld +translation_of: Learn/Forms/Your_first_form +--- +

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 the basics of HTML en CSS.

+ +

Voordat we beginnen

+ +

Wat is een HTML formulier?

+ +

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.

+ +

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.

+ +

Wat is er nodig om met formulieren te werken?

+ +

Een  editor (Sublime of Atom zijn goede voorbeelden) en een webbrowser. Natuurlijk zijn er volwaardige IDE's zoals Visual Studio, Eclipse, Aptana en andere.

+ +

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 Sending and retrieving form data.

+ +

Ontwerp van het formulier

+ +

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:

+ + + +

In dit artikel bouwen we een eenvoudig contactformulier. We beginnen met een ruwe schets.

+ +

The form to build, roughly sketch

+ +

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.

+ +

Maak uw handen vuil aan HTML

+ +

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")}}.

+ +

Het {{HTMLelement("form")}} element

+ +

Alle HTML formulieren beginnen met een {{HTMLelement("form")}} element als volgt:

+ +
<form action="/my-handling-form-page" method="post">
+
+</form>
+ +

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 action attribuut en het methode attribuut te gebruiken.

+ + + +

Zie het artikel Sending and retrieving form data voor getaileerde informatie over hoe attributen werken.

+ +

Widgets toevoegen met de {{HTMLelement("label")}}, {{HTMLelement("input")}} en {{HTMLelement("textarea")}} elementen

+ +

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.

+ +

In HTML taal ziet de code er aldus uit:

+ +
<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>
+ +

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 for attribuut in alle {{HTMLelement("label")}} elementen. Dit is een formele manier om een label aan een formulier te linken. Dit attribuut verwijst naar de id 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: How to structure an HTML form.

+ +

Voor het {{HTMLelement("input")}} element is het belangrijkste attribuut het type attribuut. Dit attribuut bepaalt hoe het {{HTMLelement("input")}} element zich gedraagt. Dit verdient de nodig aandacht omdat de gevolgen ingrijpend kunnen zijn. Het artikel native form widgets geeft meer details hierover. In het voorbeeld wordt de waarde text gebruikt omdat dit de defaultwaarde is voor dit attribuut. Zo accepteert het tekstveld elke tekst zonder verdere controle of validatie. Met de waarde email 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 Form data validation.

+ +

Tenslotte iets over de syntax  <input /> vs. <textarea></textarea>. Dit is een van de eigenaardigheden van HTML. Het element <input> is een element dat zichzelf afsluit. Dit wil zeggen dat, indien de gebruiker het element formeel wil sluiten, hijzelf "/"  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  value attribuut als volgt gebruikt worden:

+ +
<input type="text" value="by default this element is filled with this text" />
+ +

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:

+ +
<textarea>by default this element is filled with this text</textarea>
+ +

En tenslotte om te eindigen een {{HTMLelement("button")}}

+ +

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:

+ +
<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>
+ +

Er zijn drie types van knoppen: submit, reset, en button.

+ + + +

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.

+ +

De zaken mooier maken met CSS

+ +

Nu het HTML formuler klaar is kan het bekeken worden in een browser. Maar het ziet er niet erg netjes uit.

+ +

+ +

Met een CSS stylesheet kan het wat netter gemaakt worden.

+ +

Om te beginnen het formulier zelf. Het kan gecentreerd worden en er kan een boord rond getrokken worden:

+ +
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;
+}
+ +

Dan kan er wat ruimte ingevoegd worden tussen de widgets:

+ +
form div + div {
+    margin-top: 1em;
+}
+ +

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.

+ +
label {
+    /* To make sure that all labels have the same size and are properly aligned */
+    display: inline-block;
+    width: 90px;
+    text-align: right;
+}
+ +

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 Styling HTML forms.

+ +

Hier worden enkele klassieke zaken gestyled: fonts, grootte en randen:

+ +
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;
+}
+ +

HTML formulieren ondersteunen een aantal pseudoklassen om de toestand van elk element te beschrijven. Bijvoorbeeld het highlighten van een aktieve widget geeft aan waar de gebruiker zich bevindt in het formulier.

+ +
input:focus, textarea:focus {
+    /* To give a little highlight on active elements */
+    border-color: #000;
+}
+ +

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 vertical-align eigenschap van het {{HTMLElement("textarea")}} gewijzigd worden naar top.

+ +

Let ook op de resize eigenschap die toelaat de grootte van het  {{HTMLelement("textarea")}} element aan te passen.

+ +
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;
+}
+ +

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.

+ +
.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;
+}
+ +

Nu ziet hetformulier er veel mooier uit.

+ +

+ +

Verzenden van de gegevens naar de server

+ +

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.

+ +

Het {{HTMLelement("form")}} element bepaalt waar en hoe de gegevens moeten verstuurd worden door de action en de method attributen.

+ +

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.

+ +

Dus om de gegevens een naam te geven wordt een name attribuut gebruikt bij elke widget die een specifiek stuk data produceert:

+ +
<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>
+ +

In ons formulier worden 3 stuks data verzonden genaamd "user_name", "user_email" en "user_message". Deze gegevens worden verstuurd naar de URL "/my-handling-form-page"  met de HTTP POST methode.

+ +

Op de server zal de script op de URL "/my-handling-form-page" 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 Sending and retrieving form data.

+ +

Tenslotte

+ +

Proficiat. Ons eerste HTML formulier is klaar. Hier is een live voorbeeld.

+ + + + + + + + + + + + + + +
Live voorbeeld
{{ EmbedLiveSample('A_simple_form', '460', '240', '', 'Web/Guide/HTML/Forms/My_first_HTML_form/Example') }}
+ +

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 the other articles of this guide.

diff --git a/files/nl/learn/html/index.html b/files/nl/learn/html/index.html new file mode 100644 index 0000000000..773c3732ba --- /dev/null +++ b/files/nl/learn/html/index.html @@ -0,0 +1,56 @@ +--- +title: HTML +slug: Learn/HTML +tags: + - Beginner + - Coderen + - Gids + - HTML + - Introductie + - Leren +translation_of: Learn/HTML +--- +
{{LearnSidebar}}
+ +

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.

+ +

Leertraject

+ +

Idealiter begint u met uw leertraject door HTML te leren. U kunt beginnen door Een inleiding op HTML te lezen. Daarna kunt u verder leren over ingewikkeldere onderwerpen zoals:

+ + + +

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 Basissoftware installeren, en u zult moeten begrijpen hoe u bestanden kunt aanmaken en beheren, zoals gespecificeerd in Omgaan met bestanden — beide zijn onderdeel van onze volledige beginnersmodule genaamd Van start met het web.

+ +

Het wordt aangeraden dat u begint met Van start met het web voordat u verder gaat met dit onderwerp, hoewel het niet noodzakelijk is. Veel van wat wordt besproken in De basisbegrippen van HTML wordt ook besproken in de module Een inleiding op HTML, hoewel de laatstgenoemde module veel gedetailleerder is.

+ +

Modules

+ +

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.

+ +
+
Introductie tot HTML
+
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.
+
Multimedia inbedden
+
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.
+
Tabellen in HTML
+
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.
+
Formulieren in HTML
+
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.
+
+ +

Veelvoorkomende problemen met HTML oplossen

+ +

HTML gebruiken voor het oplossen van veelvoorkomende problemen 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.

+ +

Zie ook

+ +
+
+
HTML (HyperText Markup Language) op MDN
+
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.
+
+
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 new file mode 100644 index 0000000000..b4c704e92c --- /dev/null +++ b/files/nl/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -0,0 +1,266 @@ +--- +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 +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

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.

+ + + + + + + + + + + + +
Vereisten:Basiskennis HTML, aangeboden in Beginnen met HTML. Kennis over HTML tekstopmaak aangeboden in HTML tekst : basispricipes. Hoe hyperlinks werken zoals besproken in Hyperlinks maken.
Doel:Je leert hoe je je document met semantische tags kan structureren en hoe je de structuur van een eenvoudige website kan maken.
+ +

Standaardsecties van een document

+ +

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.

+ +
+
hoofding (header)
+
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.
+
navigatiebalk (navigation bar)
+
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  toegankelijker zijn voor schermlezers, die de twee onderdelen beter kunnen lezen als ze apart in de website bestaan.
+
belangrijkste inhoud (main content)
+
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!
+
zijbalk (sidebar)
+
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.
+
voettekst (footer)
+
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.
+
Een "typische website" zou ongeveer zo kunnen worden opgezet:
+
+ +

a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer.

+ +

HTML voor het structureren van de inhoud

+ +

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 het juiste element voor de juiste job gebruikt.

+ +

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?

+ +
+

Opmerking: Kleurenblinde mensen vertegenwoordigen ongeveer 8% van de wereldbevolking. Blinde en visueel beperkte mensen maken ruwweg 4-5% van de wereldbevolking uit. (In 2012 waren er 285 millioen zulke mensen in de wereld, terwijl de volledige bevolking toen rond 7 miljard besloeg.)

+
+ +

In je HTML-code kan je de opmaak van secties baseren op hun functionaliteit. 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 gevolgen aan vast als je niet de juiste elementstructuur en semantiek voor de juise job gebruikt.

+ +

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:

+ + + +

Actief leren: we onderzoeken de code voor ons voorbeeld

+ +

Het voorbeeld dat je hierboven hebt gezien wordt gegenereerd door de code hieronder. (Je kan het voorbeeld ook in onze Github repo vinden). Bekijk het voorbeeld hierboven en dan de code hieronder en ontdek welke code-onderdelen overeenstemmen met welke secties in het visuele voorbeeld.

+ +
<!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>
+ +

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).

+ +

HTML layout-elementen in groter detail

+ +

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 HTML element reference. Nu is het belangrijk dat je probeert deze belangrijkste definities te begrijpen:

+ + + +

Elementen zonder semantische betekenis

+ +

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.

+ +

{{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>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>
+ +

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.

+ +

{{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:

+ +
<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>
+ +

Dit is niet echt een <aside> 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 <section> want het vormt geen onderdeel van de belangrijkste inhoud van de pagina. In dit geval is een <div> dus prima. We hebben een koptekst toegevoegd die als een wegwijzer kan dienen zodat mensen met schermlezer de widget kunnen vinden.

+ +
+

Waarschuwing: 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.

+
+ +

Regeleindes en horizontale lijnen

+ +

{{htmlelement("br")}} en {{htmlelement("hr")}} zijn twee elementen die je nu en dan zal gebruiken en die je dus beter wil leren kennen :

+ +

<br> 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>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>
+ +

Zonder de <br>-elementen zou de paragraaf als een lange regel worden weergegeven (zoals we al eerder in de cursus hebben gezegd, HTML negeert de meeste witte ruimte). Als je ze in de code stopt, geeft de opmaak dit weer:

+ +

Er was eens een meisje en ze heette Nell
+ Die hield erg veel van HTML
+ Maar haar strutuur was slecht, haar semantiek was droef
+ en haar opmaak was zo heel veel en erg stroef.

+ +

<hr>-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>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>
+ +

Dit zou zo worden weergegeven:

+ +

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.

+ +
+

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.

+ +

De planning van een eenvoudige website

+ +

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!

+ +
    +
  1. 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 the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy
    2. +
  2. 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. A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer
    3. +
  3. 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. A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info
    4. +
  4. 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. The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things
    5. +
  5. 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 .A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page
    6. +
+ +

Actief leren: creëer je eigen sitemap

+ +

Volg nu dezelfde stappen en probeer zelf een eigen website te creëren. Waarover wil je een site bouwen? 

+ +
+

Opmerking: Sla je werk ergens op; je hebt het misschien later nog nodig.

+
+ +

Samenvatting

+ +

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.

+ +

Zie ook

+ + + +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}

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 new file mode 100644 index 0000000000..740b87094d --- /dev/null +++ b/files/nl/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,513 @@ +--- +title: Beginnen met HTML +slug: Learn/HTML/Introduction_to_HTML/Getting_started +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

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! 

+ + + + + + + + + + + + +
Vereisten:Basiskennis computers, basiskennis software installatie en basiskennis over werken met bestanden.
Doel:Vertrouwd raken met de HTML-taal. Vaardigheden in de praktijk brengen door enkele  HTML-elementen te schrijven.
+ +

Wat is HTML?

+ +

{{glossary("HTML")}} (HyperText Markup Language) is geen programmeertaal; het is een opmaaktaal 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:

+ +
My cat is very grumpy
+ +

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>My cat is very grumpy</p>
+ +

Anatomie van een HTML-element

+ +

We gaan dit paragraafelement wat verder onderzoeken:

+ +

+ +

De belangrijkste onderdelen van ons element zijn:

+ +
    +
  1. De opening tag: (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.
    2. +
  2. De closing tag:  (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.
    3. +
  3. De content: (de inhoud) Dit is de inhoud van het element, in dit geval gewoon een regel tekst. 
    4. +
  4. Het element: De openingsmarkeerder plus de eindmarkeerder plus de inhoud zijn gelijk aan het element.
    5. +
+ +

Actief leren: creër je eerste HTML-element

+ +

Bewerk de regel in het Invoer-gebied hieronder. Sluit het in tussen de <em>- en </em>-labels. (Plaats <em> voor de regel om het element te openen en </em> erachter om het element te sluiten) — dit zou de regel cursief moeten benadrukken! Je zal je veranderingen live kunnen zien in het Uitvoer-gebied.

+ +

Als je een fout maakt, kan je die altijd ongedaan maken door op de Ongedaan maken-knop te drukken. Als je echt vast raakt, druk dan op Toon oplossing om het antwoord te zien.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 300) }}

+ +

Geneste Elementen

+ +

Je kan elementen in andere elementen steken - we noemen dit nesten. 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>My cat is <strong>very</strong> grumpy.</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>My cat is <strong>very grumpy.</p></strong>
+ +

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!

+ +

Blok- versus inline-elementen

+ +

Elementen in HTML kunnen in twee belangrijke categorieën worden ingedeeld: elementen die als een blok functioneren en inline-elementen.

+ + + +

Bekijk het volgende voorbeeld eens:

+ +
<em>eerste</em><em>tweede</em><em>derde</em>
+
+<p>vierde</p><p>vijfde</p><p>zesde</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 CSS stijl die de browser op paragrafen toepast).

+ +

{{ EmbedLiveSample('Blok-_versus_inline-elementen', 700, 200) }}

+ +
+

Opmerking: HTML5 heeft de elementcategorieën in HTML5 geherdefiniëerd : zie Element content categories. 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.

+
+ +
+

Opmerking: Je kan nuttige referentiepagina's vinden die lijsten van blok- en inline-elementen bevatten — zie Block-level elements en Inline elements.

+
+ +

Lege elementen

+ +

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:

+ +
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
+ +

Dit zou het volgende op je pagina moeten uitvoeren:

+ +

{{ EmbedLiveSample('Lege_elementen', 700, 300) }}

+ +
+

Opmerking: Lege elementen worden soms void elementen genoemd (void is natuurlijk Engels en betekent ook leeg).

+
+ +

Attributen

+ +

Elementen kunnen ook attributen krijgen die er zo uitzien:

+ +

&lt;p class="editor-note">My cat is very grumpy&lt;/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.

+ +

Een attribuut bestaat uit:

+ +
    +
  1. Een spatie tussen het attribuut en de elementnaam (of het vorige attribuut als het element al een of meer attributen heeft).
    2. +
  2. De attribuutnaam, gevolgd door een is-gelijk-aan-teken (=).
    3. +
  3. Een attribuutwaarde tussen aanhalingstekens.
    4. +
+ +

Actief leren: Attributen aan een element toevoegen

+ +

{{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:

+ + + +

Bewerk de regel in het invoer-gebied hieronder en verander hem in een hyperlink naar je favoriete website. Eerst voeg je het <a>-element toe, dan het href-attribuut en dan het title-attribuut. Je zal de verandering live kunnen updaten in het uitvoer-gebied. Je zou een link moeten zien die de inhoud van het title-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.

+ +

Als je een fout maakt, kan je die altijd ongedaan maken met de Ongedaan Maken knop. Als je echt vastraakt, druk dan op Toon Oplossing om het antwoord te zien.

+ + + +

{{ EmbedLiveSample('Playable_code2', 700, 300) }}

+ +

Boolean attributen

+ +

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.)

+ +
<input type="text" disabled="disabled">
+ +

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: 

+ +
<input type="text" disabled>
+
+<input type="text">
+
+ +

Beiden zullen het volgende produceren:

+ +

{{ EmbedLiveSample('Boolean_attributen', 700, 100) }}

+ +

Aanhalingstekens rond attribuutwaarden weglaten

+ +

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 href-attribuut en zonder aanhalinstekens zoals hieronder:

+ +
<a href=https://www.mozilla.org/>favoriete website</a>
+ +

Maar als we het title-attribuut toevoegen, loopt het mis:

+ +
<a href=https://www.mozilla.org/ title=De Mozilla homepage>favoriete website</a>
+ +

In deze situatie zal de browser je opmaak verkeerd interpreteren en denken dat het  title-attribuut in feite uit drie attributen bestaat — een title-attribuut met "De" als waarde, en twee boolean attributen, Mozilla en homepage. 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!

+ +

{{ EmbedLiveSample('Aanhalingstekens_rond_attribuutwaarden_weglaten', 700, 100) }}

+ +

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. 

+ +

Enkele of dubble aanhalingstekens?

+ +

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:

+ +
<a href="http://www.example.com">Een link naar mijn voorbeeld.</a>
+
+<a href='http://www.example.com'>Een link naar mijn voorbeeld.</a>
+ +

Je moet er echter wel voor zorgen dat je de twee niet met elkaar vermengt. Het volgende zal mis gaan!

+ +
<a href="http://www.example.com'>Een link naar mijn voorbeeld.</a>
+ +

Als je één type aanhalingstekens in je HTML hebt gebruikt, kan je het andere type nesten:

+ +
<a href="http://www.example.com" title="Plezant, niet?">Een link naar mijn voorbeeld.</a>
+ +

Als je hetzelfde type aanhalingstekens wil nesten, zal je HTML-entititeiten voor de aanhalingstekens moeten gebruiken.

+ +

Anatomie van een HTML-document

+ +

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:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Mijn testpagina</title>
+  </head>
+  <body>
+    <p>Dit is mijn pagina</p>
+  </body>
+</html>
+ +

Wat steekt er in die pagina?

+ +
    +
  1. <!DOCTYPE html>: 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:
    2. +
  2. + 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    + 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. <!DOCTYPE html> is de kortste tekenserie die als een geldig doctype kan dienen; voorlopig is dat al dat je moet weten.
    3. +
  3. <html></html>: Het <html>-element. element sluit alle inhoud op de volledige pagina in en wordt ook het root-element genoemd. (root is het Engelse woord voor wortel).
    4. +
  4. <head></head>: Het <head>-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.
    5. +
  5. <meta charset="utf-8">: 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.
    6. +
  6. <title></title>: 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.
    7. +
  7. <body></body>: Het <body>-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.
    8. +
+ +

Actief leren: Extra functionaliteit aan een HTML-document toevoegen

+ +

Als je met HTML op je lokale computer wil experimenteren, kan je het volgende doen:

+ +
    +
  1. Kopieer de HTML-pagina die je hierboven in 'Anatomie van een HTML-document' vindt.
    2. +
  2. Creër een nieuw bestand in je broncode-editor.
    3. +
  3. Plak the code in het nieuwe bestand.
    4. +
  4. Sla het bestand op als index.html.
    5. +
+ +
+

Opmerking: Je kan dit simpele HTML-jsabloon ook op de MDN Learning Area Github repo vinden.

+
+ +

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:

+ +

A simple HTML page that says This is my pageIn 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 <body>-element.) Probeer nu de volgende stappen uit te voeren:

+ + + +

Als je een fout maakt, kan je altijd op Ongedaan Maken klikken Als je echt vast raakt, druk dan op Toon Oplossing om het antwoord te zien.

+ + + +

{{ EmbedLiveSample('Playable_code3', 700, 600) }}

+ +

Witruimte in HTML

+ +

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>Dogs are silly.</p>
+
+<p>Dogs        are
+         silly.</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.

+ +

Entiteitsverwijzingen: inclusief speciale tekens in HTML

+ +

De tekens <, >,",' en & 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?

+ +

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 (;).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Letterlijk tekenEntiteitsverwijzing als equivalent
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
+ +

In het voorbeeld hieronder kan je twee paragrafen zien waarin over webtechnologieën wordt gepraat:

+ +
<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>
+ +

In de live uitvoer hier beneden, kan je zien dat er met de eerste paragraaf iets is misgelopen. De browser denkt namelijk dat de <p> 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.

+ +

{{ EmbedLiveSample('Entiteitsverwijzingen_inclusief_speciale_tekens_in_HTML', 700, 200) }}

+ +
+

Opmerking: Op Wikipedia kan je een kaart van alle beschikbare entiteitsverwijzingen voor HTML-tekens vinden: Lijst van entiteitsverwijzingen voor XML- en HTML-tekens.

+
+ +

HTML commentaren

+ +

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.

+ +

Om een deel van de inhoud in je HTML-bestand in een commentaar te veranderen, moet je die door de speciale markeerders  <!-- en --> omhullen. Bijvoorbeeld:

+ +
<p>Ik sta niet in een commentaar.</p>
+
+<!-- <p>Ik wel!</p> -->
+ +

Zoals je hieronder kan zien, verschijnt de eerste paragraaf in de live uitvoer maar de tweede niet.

+ +

{{ EmbedLiveSample('HTML_commentaren', 700, 100) }}

+ +

Samenvatting

+ +

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!

+ +
+

Opmerking: Nu je meer over HTML gaat leren, zal je misschien ook de fundamenten van CSS (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.

+
+ +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
diff --git a/files/nl/learn/html/introduction_to_html/gevorderde_tekstopmaak/index.html b/files/nl/learn/html/introduction_to_html/gevorderde_tekstopmaak/index.html new file mode 100644 index 0000000000..1413987a12 --- /dev/null +++ b/files/nl/learn/html/introduction_to_html/gevorderde_tekstopmaak/index.html @@ -0,0 +1,452 @@ +--- +title: Geavanceerde tekstopmaak +slug: Learn/HTML/Introduction_to_HTML/Gevorderde_tekstopmaak +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}
+ +

Er zijn nog vele andere elementen in HTML om je tekst mee op te maken waar we in HTML tekst : basisprincipes 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.

+ + + + + + + + + + + + +
Vereisten:Basiskennis HTML zoals aangeboden in Beginnen met HTML. Kennis over HTML tekstopmaak zoals aangeboden in HTML Tekst: basisprincipes.
Doel:Je leert hoe je minder bekende HTML-elementen kan gebruiken om gevorderde semantische functionaliteit mogelijk te maken.
+ +

Beschrijvende lijsten

+ +

In HTML Basisprincipes heb je geleerd hoe je eenvoudige lijsten in HTML op kan maken. We hebben het toen niet over een derde lijsttype gehad, eentje dat je nu en dan zal tegenkomen:  beschrijvende lijsten. 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:

+ +
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.
+ +

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 description term in het Engels) en elke beschrijving bevindt zich in een {{htmlelement("dd")}} (description description) element. We gaan nu de opmaak van ons voorbeeld voltooien:

+ +
<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>
+ +

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.

+ +
+
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.
+
+ +

Merk ook op dat het is toegelaten om verscheidene beschrijvingen aan één enkele term te koppelen. Bijvoorbeeld:

+ +
+
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.
+
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).
+
+ +

Actief leren: Maak een reeks definities op

+ +

Het is tijd om zelf een beschrijvende lijst te maken. In het invoerveld voeg je elementen aan de ruwe tekst toe zodat die in het uitvoerveld als een beschrijvende lijst verschijnt. Als je wil, kan je ook je eigen termen en beschrijvingen gebruiken. 

+ +

Als je een fout maakt, kan je die altijd ongedaan maken door op de Maak Ongedaan-knop drukken. Als je echt vast raakt, druk dan op Toon Oplossing om het antwoord te zien.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 500) }}

+ +

Citaten

+ +

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.

+ +

Blokcitaten

+ +

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 pagina over het <blockquote>-element gehaald.

+ +
<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>
+ +

Om dit in een blokcitaat te veranderen, doen we dit :

+ +
<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>
+ +

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:

+ +
+

Het HTML <blockquote> element (of HTML Blokcitaat element) duidt aan dat de ingesloten tekst een langer citaat is.

+
+ +

Inline citaten

+ +

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 <q> pagina:

+ +
<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>
+ +

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:

+ +

Het citaat element — <q> — is bedoeld voor korte citaten die geen volledige paragraaf beslaan.

+ +

Het cite-attribuut en het cite-element

+ +

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 cite, 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 <cite>-element niet op de één of andere manier aan de bron van het citaat zou kunnen linken:

+ +
<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>
+ +

De bron van een citaat wordt standaar cursief gedrukt. Je kan deze code aan het werk zien in ons quotations.html voorbeeld.

+ +

Actief leren: Wie zei dat?

+ +

Tijd voor nog een voorbeeld met actief leren! In dit voorbeeld willen we het volgende:

+ +
    +
  1. Verander de middelste paragraaf in een blokcitaat en voeg een cite-attribuut toe.
    2. +
  2. Verander een deel van de derde paragraaf in een inline citaat en zorg ervoor dat het element ook een cite-attribuut bevat.
    3. +
  3. Voeg een <cite>-element toe aan elk citaat.
    4. +
+ +

Zoek online naar geschikte bronnen.

+ +

Als je een fout maakt, kan je altijd op Maak Ongedaan drukken. Als je echt vast raakt, kan je op de Toon Oplossing-knop drukken om het antwoord te zien.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 500) }}

+ +

Afkortingen

+ +

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>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>
+ +

Deze zullen er ongeveer zo uitzien (de volledige tekst zal als een tooltip verschijnen als je er met je muis overeen glijdt):

+ +

We gebruiken HTML om onze webdocumenten te structureren.

+ +

Ik denk dat Mgr. Green het in de keuken deed met de kettingzaag.

+ +
+

Opmerking: Er is nog een ander element, {{htmlelement("acronym")}}, dat in feite hetzelfde doet als <abbr>. Dit element was specifiek voor acroniemen bedoeld en niet zozeer voor afkortingen. Het wordt echter niet meer gebruikt — browsers ondersteunden het niet zo goed als <abbr> en de functies zijn zo gelijkaardig dat men het gevoel had dat het zinloos was om beide elementen te hebben. Gebruik dus gewoon altijd <abbr>.

+
+ +

Actief leren: maak een afkorting op

+ +

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.

+ + + +

{{ EmbedLiveSample('Playable_code_3', 700, 350) }}

+ +

Contactinformatie opmaken

+ +

HTML heeft een element om contactinformatie mee op te maken — {{htmlelement("address")}}. Het element omhult gewoon je contactinformatie, bijvoorbeeld:

+ +
<address>
+  <p>Chris Mills, Manchester, Het Grimmige Noorden, UK</p>
+</address>
+ +

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 eender welk 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é:

+ +
<address>
+  <p>Deze pagina is geschreven door <a href="../authors/chris-mills/">Chris Mills</a>.</p>
+</address>
+ +

Superscript en subscript

+ +

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>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>
+ +

De output van deze code ziet er zo uit:

+ +

Mijn verjaardag valt op de 25ste mei 2001.

+ +

De chemische formule van caffeïne is C8H10N4O2.

+ +

Als x2 gelijk is aan 9, dan is x gelijk aan 3 of -3.

+ +

De weergave van computercode

+ +

Er bestaan een aantal elementen waarmee je computercode kan opmaken in HTML:

+ + + +

We gaan een paar voorbeelden bekijken. Probeer er wat mee te spelen (je kan een kopie van ons other-semantics.html voorbeeldbestand nemen):

+ +
<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>
+ +

De code hierboven zal er zo uitzien:

+ +

{{ EmbedLiveSample('Representing_computer_code','100%',300) }}

+ +

De opmaak van uren en data

+ +

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:

+ +
<time datetime="2016-01-20">20 januari 2016</time>
+ +

Waarom is dit nuttig? Wel, er zijn vele manieren waarop mensen data noteren. De datum hierboven zou kunnen worden geschreven als:

+ + + +

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 .

+ +

Het basisvoorbeeld hierboven toont ons een simpele datum, maar er zijn nog vele andere opties mogelijk. Bijvoorbeeld:

+ +
<!-- Eenvoudige standaarddatum -->
+<time datetime="2016-01-20">20 January 2016</time>
+<!-- Enkel jaar en maand -->
+<time datetime="2016-01">January 2016</time>
+<!-- Enkel maand en dag -->
+<time datetime="01-20">20 January</time>
+<!-- Enkel tijd, uren en minuten -->
+<time datetime="19:30">19:30</time>
+<!-- Je kan ook seconden en milliseconden weergeven! -->
+<time datetime="19:30:01.856">19:30:01.856</time>
+<!-- Datum en tijd -->
+<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
+<!-- Datum en tijd met tijdzone -->
+<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
+<!-- Vermelding van een specifiek weeknummer-->
+<time datetime="2016-W04">The fourth week of 2016</time>
+ +

Samenvatting

+ +

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 HTML element reference pagina. (de Inline text semantics 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.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/nl/learn/html/introduction_to_html/het_hoofd_metadata_in_html/index.html b/files/nl/learn/html/introduction_to_html/het_hoofd_metadata_in_html/index.html new file mode 100644 index 0000000000..b6e0307328 --- /dev/null +++ b/files/nl/learn/html/introduction_to_html/het_hoofd_metadata_in_html/index.html @@ -0,0 +1,257 @@ +--- +title: Wat steekt er in het hoofd? Metadata in HTML +slug: Learn/HTML/Introduction_to_HTML/Het_hoofd_metadata_in_HTML +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
+ +

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. 

+ + + + + + + + + + + + +
Vereisten:Basiskennis HTML vergelijkbaar met de informatie die is aangeboden in Beginnen met HTML.
Doel: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.
+ +

Wat is het HTML-hoofd?

+ +

We bekijken opnieuw het eenvoudige HTML-document dat we in het vorige artikel hebben besproken:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Mijn testpagina</title>
+  </head>
+  <body>
+    <p>Dit is mijn pagina</p>
+  </body>
+</html>
+ +

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:

+ +
<head>
+  <meta charset="utf-8">
+  <title>Mijn testpagina</title>
+</head>
+ +

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 hulpprogramma's voor ontwikkelaars 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.

+ +

Een titel toevoegen

+ +

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!

+ + + +

Actief leren: We onderzoeken een eenvoudig voorbeeld

+ +
    +
  1. Om met dit hoofdstuk te beginnen, willen we dat je naar onze Github repo gaat en een kopie van onze title-example.html pagina downloadt. Er zijn twee manieren om dit te doen: + +
      +
    1. 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.
      2. +
    2. 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.
      3. +
    +
    2. +
  2. Open nu het bestand in je browser. Je zou een pagina moeten zien die er zo uitziet: +

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element.Het zou nu volledig duidelijk moeten zijn waar de <h1>-inhoud verschijnt en waar die van de <title>!

    +
    3. +
  3.  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!
    4. +
+ +

De inhoud van het <title>-element wordt ook op andere manieren gebruikt. Als je bijvoorbeeld een bladwijzer van de pagina wil maken, zal je de inhoud van het <title>-element als een suggestie voor de naam van de bladwijzer ingevuld zien staan (Om een bladwijzer te maken klik je met de rechtermuisknop bovenaan in de bladwijzerbalk. Dan kies je Nieuwe bladwijzer of klik je op het sterretje bovenaan in het menu in Firefox).

+ +

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

+ +

De <title>-inhoud wordt ook in zoekresultaten gebruikt zoals je hieronder zult zien.

+ +

Metadata: het <meta>-element

+ +

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 <meta>-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.

+ +

De tekencodering van je document bepalen

+ +

In het voorbeeld dat we hierboven hebben gezien, staat deze regel:

+ +
<meta charset="utf-8">
+ +

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. utf-8 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:

+ +

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,Als je je karakterencodering volgens ISO-8859-1 instelt (de tekenset voor het Latijnse alfabet), zal de weergave van je pagina volledig in de knoei raken:

+ +

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

+ +

Actief leren: Een experiment met tekenencodering

+ +

Om dit uit te proberen, neem je het eenvoudige HTML-sjabloon dat je in de vorige sectie over het <title>-element hebt gevonden (de title-example.html pagina). Probeer de meta tekenset-waarde in ISO-8859-1 te veranderen en voeg dan wat Japanse tekens aan je pagina toe. Dit is de code die we hebben gebruikt:

+ +
<p>Japanese example: ご飯が熱い。</p>
+ +

Een auteur en een beschrijving toevoegen

+ +

Vele <meta>-elementen kunnen ook attributen voor naam en inhoud krijgen:

+ + + +

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:

+ +
<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.">
+ +

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.

+ +

Vergeet niet dat je de Engelse termen name, description (beschrijving) en content (inhoud) in je HTML-pagina moet gebruiken.

+ +

Het is nuttig als een description 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 Search Engine Optimization (optimalisatie van zoekmachines) or {{glossary("SEO")}}.)

+ +

Actief leren: Het gebruik van de beschrijving in zoekmachines

+ +

De description (beschrijving) wordt ook gebruikt in de pagina's met resultaten van zoekmachines. We gaan dit nu verder onderzoeken met een oefening.

+ +
    +
  1. Ga naar het voorblad van het Mozilla Developer Network.
    2. +
  2. Bekijk de bron van de pagina (Klik met de rechtermuisknop + Ctrl  op de pagina, kies Paginabron bekijken.)
    3. +
  3. Zoek het metalabel met de description. Die zal er zo uitzien: + 
    <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.">
    +
    4. +
  4. Zoek nu "Mozilla Developer Network" in je favoriete zoekmachine (wij gebruikten Yahoo). In de zoekresultaten zal je de inhoud zien van de description <meta>- en de content (inhoud) van het <title>-element — zeker de moeite waard om te hebben! +

    A Yahoo search result for "Mozilla Developer Network"

    +
    5. +
+ +
+

Opmerking: 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 Google's webmaster tools — een manier om de zoekresultaten van je site te verbeteren in de Google zoekmachine.

+
+ +
+

Opmerking: Vele <meta> eigenschappen worden eigenlijk niet meer gebruikt. Het sleutelwoord <meta>-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. 

+
+ +

Andere metadata-types

+ +

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.

+ +

Open Graph Data bijvoorbeeld is een metadata-protocol dat Facebook heeft uitgevonden om websites van verrijkte metadata te voorzien. In de MDN-broncode, zal je dit vinden:

+ +
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.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">
+ +

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.

+ +

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Twitter heef ook gelijkaardige eigen metadata, die een vergelijkbaar effect hebben als de URL van de site op twitter.com wordt getoond. Bijvoorbeeld:

+ +
<meta name="twitter:title" content="Mozilla Developer Network">
+ +

Eigen op maat gemaakte iconen toevoegen aan je site

+ +

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.

+ +

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:

+ +
    +
  1. Je slaat hem op in dezelfde folder als die waarin de index-pagina van je site is opgeslagen en je doet dat met de .ico-extensie. (De meeste browsers zullen favicons in gewonere formaten ondersteunen zoals.gif of .png, maar als je het ICO-formaat gebruikt zal dat ervoor zorgen dat het werkt, zelfs in Internet Explorer 6.)
    2. +
  2. Creëer er een koppeling naar door de volgende lijn in je HTML-<head> toe te voegen: + 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    +
    3. +
+ +

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 :

+ +

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

+ +

Er spelen tegenwoordig ook nog vele andere icoon-types mee. Je zal dit bijvoorbeeld in de broncode van de MDN-startpagina vinden:

+ +
<!-- third-generation iPad with high-resolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
+<!-- iPhone with high-resolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
+<!-- first- and second-generation iPad: -->
+<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
+<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
+<!-- basic favicon -->
+<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
+ +

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.

+ +

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.

+ +

CSS en JavaScript toepassen op HTML

+ +

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.

+ + + +

Actief leren: CSS en JavaScript op een pagina toepassen

+ +
    +
  1. Om met deze oefening te beginnen, grijp je een kopie van onze meta-example.html, script.js en style.css 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.
    2. +
  2. Open het HTML-bestand in je browser en in je broncodebewerker.
    3. +
  3. 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.
    4. +
+ +

Als je dit correct doet en je HTML opslaat, zal je zien dat er vanalles is veranderd wanneer je de browser vernieuwt:

+ +

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.

+ + + +
+

Opmerking: 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 css-and-js.html voobeeldpagina.

+
+ +

De belangrijkste taal van het document instellen

+ +

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 lang attribuut aan het openingslabel van het HTML-element toe te voegen (zoals je hieronder en in het meta-example.html kan zien.)

+ +
<html lang="en-US">
+ +

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.)

+ +

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>Japans voorbeeld: <span lang="jp">ご飯が熱い。</span>.</p>
+ +

Deze codes worden gedefiniëerd door de ISO 639-1 standaard. Je kan er meer over ontdekken in Language tags in HTML and XML.

+ +

Samenvatting

+ +

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.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/nl/learn/html/introduction_to_html/html_debuggen/index.html b/files/nl/learn/html/introduction_to_html/html_debuggen/index.html new file mode 100644 index 0000000000..e0b791bd12 --- /dev/null +++ b/files/nl/learn/html/introduction_to_html/html_debuggen/index.html @@ -0,0 +1,161 @@ +--- +title: HTML debuggen +slug: Learn/HTML/Introduction_to_HTML/HTML_Debuggen +translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
+ +

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.

+ + + + + + + + + + + + +
Vereisten:Basiskennis HTML zoals die is aangeboden in Beginnen met HTML, HTML tekst: basisprincipes en Hyperlinks maken.
Objective:Je verwerft basiskennis over het gebruik van debugging-instrumenten waarmee je de bron van problemen in HTML kan vinden.
+ +

Van debuggen hoef je niet bang te zijn

+ +

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 Rust-taal.

+ +

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.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 println!(Hello, world!") 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. 

+ +

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.

+ +

HTML en debuggen

+ +

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 geïnterpreteerd, niet  gecompileerd 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 toleranter dan de wijze waarop programmeertalen worden uitgevoerd, wat zowel goed als slecht is.

+ +

Tolerante code

+ +

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 :

+ + + +

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!

+ +
+

Opmerking: 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.

+
+ +

Actief leren: De studie van tolerante code

+ +

Het is tijd om de tolerante aard van HTML-code te bestuderen

+ +
    +
  1. Eerst download je ons debug-example demo en sla je die locaal op. Deze demo is opzettelijk met fouten erin geschreven die we kunnen onderzoeken (we zeggen dat de HTML-opmaak slecht is gevormd in tegenstelling tot  goed gevormd).
    2. +
  2. Vervolgens open je de demo in een browser. Die zal er ongeveer zo uitzien: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.
    3. +
  3. 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): + 
    <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>
    +
    4. +
  4. We gaan deze problemen nu één voor één bekijken: +
      +
    • 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.
      • +
    • 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. 
      • +
    • Een van de secties is slecht genest: <strong>strong <em>sterk benadrukt emphasised?</strong> wat is dat?</em>. Het is niet gemakkelijk om te zeggen hoe dit is geïnterpreteerd door het vorige probleem.
      • +
    • De {{htmlattrxref("href","a")}}-attribuutwaarde mist een dubbel aanhalingsteken. Dat heeft blijkbaar het grootste probleem veroorzaakt  — de link is gewoon niet weergegeven.
      • +
    +
    5. +
  5. 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 Discover browser developer tools.
    6. +
  6. Met de DOM Inspecteur kan je zien hoe de weergegeven opmaak eruit ziet: 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.
    7. +
  7. 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 zouden hetzelfde resultaat moeten produceren: +
      +
    • De paragrafen en de lijstonderdelen hebben eindtags gekregen.
      • +
    • Het is niet duidelijk waar het eerste <strong>-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!
      • +
    • De incorrect geneste element zijn door de browser op deze manier hersteld: + 
      <strong>sterk
+  <em>sterk benadrukt</em>
+</strong>
+<em> wat is dat?</em>
      +
      • +
    • De link met het ontbrekende dubbele aanhalingsteken is helemaal verwijderd. Het laatste lijstonderdeel ziet er zo uit: + 
      <li>
+  <strong>Attributen die niet zijn afgesloten: Een andere vaak voorkomende bron van HTML-problemen.
+  Laat ons daarvoor een voorbeeld bekijken: </strong>
+</li>
      +
      • +
    +
    8. +
+ +

HTML validatie

+ +

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? 

+ +

De beste strategie is om je HTML-pagina eerst door de Markup Validation Service (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.

+ +

The HTML validator homepage

+ +

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.

+ +

Actief leren: Een HTML-document valideren

+ +

We gaan dit met ons sample document uitproberen.

+ +
    +
  1. Eerst laad je de Markup Validation Service in een tabblad van een browser, als je dat nog niet hebt gedaan.
    2. +
  2. Klik op Validate by Direct Input.
    3. +
  3. Kopiëer de volledige code van het sample document (dus niet enkel de body) en plak die in het tekstinvoerveld.
    4. +
  4. Klik op de Check knop.
    5. +
+ +

Nu zou je een lijst met fouten en andere informatie moeten zien.

+ +

A list of of HTML validation results from the W3C markup validation service

+ +

De interpretatie van de foutmelding

+ +

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.

+ + + +

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.

+ +

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.

+ +

Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."

+ +

Samenvating

+ +

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.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

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 new file mode 100644 index 0000000000..4da6104778 --- /dev/null +++ b/files/nl/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -0,0 +1,632 @@ +--- +title: Grondbeginselen van HTML-tekst +slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
+ +

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.

+ + + + + + + + + + + + +
Vereisten:Basiskennis HTML die je kunt terugvinden in Beginnen met HTML.
Doel: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.
+ +

De basis: Koppen en Paragrafen

+ +

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.

+ +

Een voorbeeld van een voorpagina van een krant, dat het gebruik van koppen, subkoppen en paragrafen laat zien.

+ +

Een gestructureerde inhoud maakt de leeservaring gemakkelijker en aangenamer.

+ +

In HTML moet elke paragraaf ingesloten worden door een {{htmlelement("p")}}-element zoals hieronder:

+ +
<p>Ik ben een paragraaf, laat me je dat vertellen.</p>
+ +

Elke hoofding moet worden ingesloten door een kop-element:

+ +
<h1>Ik ben de titel van het verhaal.</h1>
+ +

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; <h1> vertegenwoordigt de belangrijkste kop, <h2> vertegenwoordigt een ondertitel, <h3> vertegenwoordigt een ondertitel die zich nog een niveau lager bevindt, enzovoort.

+ +

De implementatie van structurele hiërarchie

+ +

We beginnen met een voorbeeld: in een verhaal zou <h1> voor de titel van het verhaal worden gebruikt, <h2>'s zouden de titel van elk hoofdstuk vertegenwoordigen, <h3>'s zouden de ondertitels van elk hoofdstuk vertegenwoordigen, enzovoort.

+ +
<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>
+ +

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:

+ + + +

Waarom hebben we structuur nodig?

+ +

Om deze vraag te beantwoorden, gaan we eerst text-start.html 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).

+ +

Als je het document echter in je browser opent, zul je zien dat de tekst er als één grote brok in zit!

+ +

Een webpagina die een muur van onopgemaakte tekst laat zien, omdat er geen elementen op de pagina zijn om deze te structureren.

+ +

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:

+ + + +

Het is dus nodig om onze inhoud structureel op te maken.

+ +

Actief leren: Onze inhoud structuur geven

+ +

We vallen direct met de deur in huis met een live voorbeeld. Voeg in het voorbeeld hieronder elementen aan de ruwe tekst in het Invoer-veld toe, zodat die als een kop en twee paragrafen in het Uitvoer-veld verschijnt.

+ +

Als je een fout maakt, kun je altijd op Maak ongedaan drukken. Als je vastraakt, gebruik dan de Toon oplossing-knop om het antwoord te zien.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 500) }}

+ +

Waarom hebben we semantiek nodig?

+ +

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.)

+ +

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".

+ +
<h1>Dit is een belangrijke hoofdtitel</h1>
+ +

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).

+ +

Aan de andere kant kun je elk element er als een hoofdtitel laten uitzien. Bekijk het volgende eens:

+ +
<span style="font-size: 32px; margin: 21px 0;">Is dit een hoofdtitel?</span>
+ +

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.

+ +

Lijsten

+ +

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.

+ +

Ongeordend

+ +

Ongeordende lijsten worden gebruikt om lijsten op te maken waarbij de volgorde van de onderdelen niet belangrijk is – als voorbeeld nemen we een boodschappenlijst.

+ +
melk
+eieren
+brood
+hummus
+ +

Elke ongeordende lijst begint met een {{htmlelement("ul")}}-element – je plaatst het rond alle lijstonderdelen:

+ +
<ul>
+melk
+eieren
+brood
+hummus
+</ul>
+ +

De laatste stap is om elk lijstonderdeel in een {{htmlelement("li")}}-element in te pakken:

+ +
<ul>
+  <li>melk</li>
+  <li>eieren</li>
+  <li>brood</li>
+  <li>hummus</li>
+</ul>
+ +

Actief leren: Een ongeordende lijst opmaken

+ +

Probeer het live voorbeeld hieronder te bewerken om zo je eigen ongeordende lijst te maken.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 400) }}

+ +

Geordend

+ +

Geordende lijsten zijn lijsten waarvan de volgorde van de onderdelen wel belangrijk is – als voorbeeld nemen we een reeks instructies om de weg mee uit te leggen:

+ +
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
+ +

De opmaakstructuur is gelijk aan die voor ongeordende lijsten, behalve dat je de lijstonderdelen in een {{htmlelement("ol")}}-element (i.p.v. een <ul>) moet inpakken:

+ +
<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>
+ +

Actief leren: Een geordende lijst opmaken

+ +

Bewerk het live voorbeeld hieronder om je eigen geordende lijst te maken.

+ + + +

{{ EmbedLiveSample('Playable_code_3', 700, 500) }}

+ +

Actief leren: Maak onze receptpagina op

+ +

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 text-start.html 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.

+ + + +

{{ EmbedLiveSample('Playable_code_4', 700, 500) }}

+ +

Als je vastraakt, kun je altijd op Toon oplossing drukken of ons text-complete.html voorbeeld bekijken dat je op onze github-repo vindt.

+ +

Lijsten nesten

+ +

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:

+ +
<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>
+ +

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:

+ +
<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>
+ +

Ga naar het vorige "Actief leren"-voorbeeld en werk de tweede lijst op deze manier bij.

+ +

Nadruk en belangrijkheid

+ +

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.

+ +

Nadruk

+ +

Als we in gesproken taal ergens de nadruk op willen leggen, beklemtonen 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.

+ +

Ik ben blij dat je niet te laat was.

+ +

Ik ben blij dat je niet te laat was.

+ +

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.

+ +

In HTML gebruiken we het {{htmlelement("em")}}-element (emphasis, 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>Ik ben <em>blij</em> dat je niet <em>te laat</em> was.</p>
+ +

Zeer belangrijke woorden

+ +

Om belangrijke woorden te benadrukken, hebben we de neiging om ze in gesproken taal te beklemtonen en om ze in geschreven taal vet te maken. Bijvoorbeeld:

+ +

Deze vloeistof is uiterst toxisch.

+ +

Ik reken op je. Wees niet te laat!

+ +

In HTML gebruiken we het {{htmlelement("strong")}}-element (strong importance, 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>Deze vloeistof is <strong>uiterst toxisch</strong>.</p>
+
+<p>Ik reken op je. <strong>Wees niet</strong> te laat!</p>
+ +

Indien gewenst kun je belangrijkheid en nadruk ook in elkaar nesten:

+ +
<p>Deze vloeistof is <strong>uiterst toxisch</strong> –
+als je hem drinkt, <strong>kun je <em>sterven</em></strong>.</p>
+ +

Actief leren: Laten we belangrijk zijn!

+ +

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.

+ + + +

{{ EmbedLiveSample('Playable_code_5', 700, 500) }}

+ +

Cursief, vet, onderstrepen...

+ +

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 formele elementen (presentational elements in het Engels) en kunnen beter niet meer gebruikt worden, omdat, zoals we reeds hebben gezien, semantiek belangrijk is voor de toegankelijkheid, SEO, enz.

+ +

HTML5 verschafte nieuwe definities voor <b>, <i> en <u> met nieuwe nogal verwarrende semantische rollen.

+ +

Dit is de beste vuistregel: het is waarschijnlijk geschikt om <b>, <i> of <u> 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.

+ + + +
+

Een vriendelijke waarschuwing over onderstreping: Mensen associëren onderstreping sterk met hyperlinks. Daarom kun je op het Web het beste slechts hyperlinks onderstrepen. Gebruik het <u>-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.

+
+ +
<!-- 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>
+ +

Samenvatting

+ +

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 hyperlinks creëren, misschien wel het belangrijkste element op het Web.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/nl/learn/html/introduction_to_html/hyperlinks_maken/index.html b/files/nl/learn/html/introduction_to_html/hyperlinks_maken/index.html new file mode 100644 index 0000000000..a00d948b29 --- /dev/null +++ b/files/nl/learn/html/introduction_to_html/hyperlinks_maken/index.html @@ -0,0 +1,306 @@ +--- +title: Hyperlinks maken +slug: Learn/HTML/Introduction_to_HTML/Hyperlinks_maken +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}
+ +

Hyperlinks zijn heel belangrijk – ze maken van het web een Web. Dit artikel toont de vereiste syntaxis voor het maken van een koppeling en bespreekt de beste werkwijzen om met koppelingen te werken.

+ + + + + + + + + + + + +
Vereisten:Basiskennis van HTML, zoals beschreven in Beginnen met HTML. Kennis over HTML-tekstopmaak, zoals beschreven in Grondbeginselen van HTML-tekst.
Doel:U leert hoe u een hyperlink op een doeltreffende manier aan uw inhoud kunt toevoegen en meerdere bestanden met elkaar kunt verbinden.
+ + + +

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 een Web 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")}}.)

+ +
+

Noot: 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.

+
+ +

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.

+ +

frontpage of bbc.co.uk, showing many news items, and navigation menu functionality

+ +

Anatomie van een koppeling

+ +

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 Hypertext Reference of target) dat het webadres zal bevatten waarnaar u de koppeling wilt laten wijzen.

+ +
<p>Ik ben een koppeling naar
+<a href="https://www.mozilla.org/nl/">de Mozilla-startpagina</a> aan het maken.
+</p>
+ +

Dit geeft het volgende resultaat:

+ +

Ik ben een koppeling naar de Mozilla-startpagina aan het maken.

+ +

Ondersteunende informatie toevoegen met het title-attribuut

+ +

Een andere attribuut dat u mogelijk aan uw koppelingen wilt toevoegen is title; 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>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>
+ +

De code hierboven zorgt ervoor dat de title als een tooltip verschijnt als u de muisaanwijzer boven een koppeling houdt:

+ +

Ik ben een koppeling naar de Mozilla-startpagina aan het maken.

+ +
+

Noot: 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.

+
+ +

Actief leren: uw eigen voorbeeldkoppeling maken

+ +

Tijd om actief te leren: we zouden graag zien dat u een HTML-document maakt met uw lokale broncode-editor. (Ons ‘getting started’-sjabloon is zeer geschikt voor dat doel.)

+ + + +

Koppelingen op blokniveau

+ +

We hebben al vermeld dat u ongeveer alle inhoud in een hyperlink kunt omzetten, zelfs elementen op blokniveau. Als u een afbeelding in een koppeling zou willen omzetten, kon u die afbeelding gewoon tussen <a></a>-labels zeten.

+ +
<a href="https://www.mozilla.org/nl/">
+  <img src="mozilla-image.png" alt="mozilla-logo dat naar de mozilla-startpagina verwijst">
+</a>
+ +
+

Noot: in een later artikel zult u nog veel meer over het gebruik van afbeeldingen op het web ontdekken.

+
+ +

Een snelle uitleg over URL’s en paden

+ +

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.

+ +

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 https://www.mozilla.org/nl/.

+ +

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 creating-hyperlinks.)

+ +

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

+ +

De hoofdmap van deze mapstructuur heet creating-hyperlinks. 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 index.html en een contacts.html. Op een echte website zou index.html onze startpagina of landingspagina zijn (een webpagina die als het startpunt voor een website of een bepaalde sectie van een website dient).

+ +

In onze hoofdmap zitten ook twee andere mappen – pdfs en projects. In elk van hen steekt één bestand – respectievelijk een PDF-bestand (project-brief.pdf) en een index.html-bestand. Twee index.html-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 index.html is misschien de landingspagina voor projectgerelateerde informatie. (Tussen haakjes: een landingspagina 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.)

+ + + +
+

Noot: zo nodig kunt u meerdere instanties van deze eigenschappen in complexe URL’s combineren, bijvoorbeeld ../../../complex/pad/naar/mijn/bestand.html.

+
+ +

Documentfragmenten

+ +

Het is mogelijk om naar een specifiek deel van een HTML-document te verwijzen. Dit specifieke deel noemen we een documentfragment. 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:

+ +
<h2 id="E-mailadres">E-mailadres</h2>
+ +

Om dan naar dat specifieke id te verwijzen, voegt u de inhoud van het id aan het einde van de URL toe, voorafgegaan door een hekje (#). Voorbeeld:

+ +
<p>Wilt u ons een brief schrijven? Gebruik dan ons <a href="contacts.html#e-mailadres">e-mailadres</a>.</p>
+ +

U kunt het documentfragment zelfs aan een ander deel van hetzelfde document koppelen:

+ +
<p>Het<a href="#e-mailadres">e-mailadres van ons bedrijf</a> vindt u onderaan de pagina.</p>
+ +

Absolute versus relatieve URL’s

+ +

Twee termen die u op het web zult tegenkomen zijn absolute URL en relatieve URL:

+ +

Een absolute URL 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 index.html wordt geüpload naar een map die projects heet. Als die zich in de hoofdmap (root in het Engels) van een webserver bevindt en het domein van de website is http://www.example.com, zou u de pagina op http://www.example.com/projects/index.html kunnen vinden. (Of zelfs alleen http://www.example.com/projects/, want de meeste webservers zoeken naar een landingspagina zoals index.html die ze kunnen laden als deze niet in de URL wordt vermeld.)

+ +

Een absolute URL zal altijd naar dezelfde locatie wijzen, waar deze ook wordt gebruikt.

+ +

Een relatieve URL wijst naar een locatie die relatief 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 http://www.example.com/projects/index.html naar een PDF-bestand in dezelfde map wilt maken, zou de URL alleen uit de bestandsnaam bestaan – bv. project-brief.pdf – extra informatie is dan niet nodig. Als de PDF beschikbaar was in de submap binnen projects met de naam pdfs, zou de relatieve koppeling pdfs/project-brief.pdf zijn (de equivalente absolute URL zou er dan zo uitzien: http://www.example.com/projects/pdfs/project-brief.pdf).

+ +

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 index.html uit de map projects zouden halen en dit in de hoofdmap van de website zouden plaatsen (het hoogste niveau, geen submappen), zou pdfs/project-brief.pdf nu naar http://www.example.com/pdfs/project-brief.pdf wijzen en niet naar http://www.example.com/projects/pdfs/project-brief.pdf.

+ +

Optimale methoden voor het werken met koppelingen

+ +

Er bestaan een aantal ‘beste werkwijzen’ die u kunt volgen als u een hyperlink maakt. Die werkwijzen gaan we hieronder bekijken.

+ + + +

Verwoord uw koppelingen duidelijk

+ +

Het is makkelijk om een paar koppelingen op uw pagina te plaatsen, maar dat is niet genoeg. We moeten onze hyperlinks toegankelijk maken voor alle lezers, ongeacht hun huidige context en hulpmiddelen van hun voorkeur. Voorbeeld:

+ + + +

We bekijken een specifiek voorbeeld:

+ +

Goede koppelingstekst: Download Firefox

+ +
<p><a href="https://firefox.com/">
+  Download Firefox
+</a></p>
+ +

Slechte koppelingstekst: Klik hier om Firefox te downloaden

+ +
<p><a href="https://firefox.com/">
+  Klik hier
+</a>
+om Firefox te downloaden</p>
+
+ +

Andere tips:

+ + + +

Gebruik relatieve koppelingen waar mogelijk

+ +

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 op dezelfde website verwijst (Als u naar een andere website verwijst, zult u een absolute koppeling nodig hebben):

+ + + +

Koppelingen naar browservreemde bronnen – gebruik duidelijke wegwijzers

+ +

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:

+ + + +

Laten we een paar voorbeelden bekijken en wat voor tekst we in dit soort gevallen kunnen gebruiken:

+ +
<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>
+ +

Gebruik het download-attribuut als u naar een download verwijst

+ +

Als u een koppeling naar een bron schrijft die beter kan worden gedownload dan deze in de browser te openen, kunt u het download-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:

+ +
<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>
+ +

Actief leren: een navigatiemenu maken

+ +

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.

+ +

U hebt lokale kopieën van de volgende vier pagina’s nodig, alle vier in dezelfde map (zie ook de map navigation-menu-start voor een volledige lijst):

+ + + +

Wat u moet doen:

+ +
    +
  1. 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.
    2. +
  2. Zet alle paginanamen om naar een hyperlink naar die pagina.
    3. +
  3. Kopieer het navigatiemenu naar de drie andere pagina’s.
    4. +
  4. 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.
    5. +
+ +

Het voltooide voorbeeld zou er ongeveer zo moeten uitzien:

+ +

Een voorbeeld van een eenvoudig HTML-navigatiemenu, met startmenu, afbeeldingen, projecten en sociale menu-items

+ +
+

Noot: als u vastloopt, of er niet zeker van bent dat u het allemaal juist hebt, kunt u de map navigation-menu-marked-up bekijken om het juiste antwoord te zien.

+
+ +

E-mailkoppelingen

+ +

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 mailto:.

+ +

In de meest eenvoudige en gebruikelijke vorm duidt een ‘mailto:-koppeling’ gewoon het e-mailadres van de bedoelde ontvanger aan. Voorbeeld:

+ +
<a href="mailto:nowhere@mozilla.org">E-mail nergens naartoe verzenden</a>
+
+ +

Het resultaat is een koppeling die er zo uitziet: E-mail nergens naartoe verzenden.

+ +

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.

+ +

Details toevoegen

+ +

Behalve het e-mailadres kunt u nog andere informatie toevoegen. In feite kunnen alle kopregels van een standaardmail worden toegevoegd aan de mailto-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.

+ +

Hier is een voorbeeld met cc, bcc, subject en body:

+ +
<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>
+ +
+

Noot: 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 ‘percent-escaped’). Let ook op het gebruik van het vraagteken (?) om de hoofd-URL van de ingevoerde waarden te scheiden, en de ampersand (&) om de velden in de mailto:-URL van elkaar te scheiden. Dit is standaard URL-zoeknotatie. U kunt de De GET-methode lezen als u meer over URL-querynotatie wilt weten.)

+
+ +

Dit zijn enkele voorbeelden van mailto-URL’s:

+ + + +

Samenvatting

+ +

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.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/nl/learn/html/introduction_to_html/index.html b/files/nl/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..2d3a59d5d5 --- /dev/null +++ b/files/nl/learn/html/introduction_to_html/index.html @@ -0,0 +1,64 @@ +--- +title: Een Inleiding op HTML +slug: Learn/HTML/Introduction_to_HTML +tags: + - Inleiding op HTML + - Structuur + - semantisch +translation_of: Learn/HTML/Introduction_to_HTML +--- +
{{LearnSidebar}}
+ +

{{glossary("HTML")}} is, in zijn kern, een vrij eenvoudige taal. Hij bestaat uit elementen 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.

+ +

Minimum vereisten

+ +

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 Basissoftware installeren. Het is ook nodig dat je begrijpt hoe je bestanden kan maken en beheren, zoals is uitgelegd in Omgaan met bestanden. Beide artikelen zijn hoofdstukken in onze module voor complete beginners, Van start met het web. 

+ +
+

Opmerking: 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  JSBin of Thimble schrijven.

+
+ +

Gidsen

+ +

Deze module bevat een aantal artikelen die de basistheorie van HTML bespreken en heel wat gelegenheden biedt om je vaardigheden uit te testen.

+ +
+
Met HTML beginnen
+
+

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! 

+
+
+ +
+
Wat zit er in het hoofd? Metadata in HTML
+
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).
+
HTML tekst : basisprincipes 
+
HTML vervult een aantal taken. Hij geeft onder andere betekenis aan een tekst (ook gekend als semantiek) 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.
+
Hyperlinks creëren
+
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.
+
Gevorderde tekstopmaak
+
Er zijn vele andere elementen in HTML om tekst mee te formatteren waar we in HTML tekst: de basisprincipes 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.
+
Document- en websitestructuur
+
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.
+
HTML debuggen
+
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.
+
+ +

Evalutie

+ +

De volgende oefeningen dienen als test van de HTML-basisbegrippen die in de gidsen hierboven zijn doorgenomen.

+ +
+
De opmaak van een brief
+
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.
+
De inhoud van een pagina structureren
+
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.
+
+ +

Zie ook

+ +
+
Web literacy basics 1
+
Dit is een uitstekende Mozilla foundation cursus. Vele vaardigheden die in de Met HTML beginnen 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.
+
diff --git a/files/nl/learn/html/introduction_to_html/opmaak_van_een_brief/index.html b/files/nl/learn/html/introduction_to_html/opmaak_van_een_brief/index.html new file mode 100644 index 0000000000..1942ef0baa --- /dev/null +++ b/files/nl/learn/html/introduction_to_html/opmaak_van_een_brief/index.html @@ -0,0 +1,81 @@ +--- +title: De opmaak van een brief +slug: Learn/HTML/Introduction_to_HTML/Opmaak_van_een_brief +translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}
+ +

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 <head> inhouden testen.

+ + + + + + + + + + + + +
Vereisten:Vooraleer je deze evaluatie uitprobeert zou je de volgende hoofdstukken moeten hebben doorgewerkt: Beginnen met HTML, Wat steek er in het hoofd? Metadata in HTML, HTML tekst: basisprincipes, Hyperlinks maken en Gevorderde tekstopmaak.
Doel: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>.
+ +

Startpunt

+ +

Om met deze evaluatie van start te kunnen gaan, heb je de ruwe tekst  die je gaat opmaken nodig en de CSS die je HTML zal bevatten. Creëer een nieuw .html bestand in je broncodebewerker. Daarin ga je je werk doen (een alternatief voor de broncodeverwerker is een site zoals JSBin of Thimble)

+ +

Instructies

+ +

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. 

+ +

Semantiek op blokniveau:

+ + + +

Inline semantiek:

+ + + +

Het hoofd van het document:

+ + + +

Hints en tips

+ + + +

Voorbeeld

+ +

De volgende schermafbeelding toont een voorbeeld van hoe de brief er uit zou kunnen zien nadat die is opgemaakt.

+ +

+ +

Evaluatie

+ +

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 Learning Area Discourse thread, of op het #mdn IRC kanaal op Mozilla IRC. Probeer de oefening eerst uit — met valsspelen ga je niks kunnen winnen!

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/nl/learn/html/introduction_to_html/structureren_inhoud_van_webpagina/index.html b/files/nl/learn/html/introduction_to_html/structureren_inhoud_van_webpagina/index.html new file mode 100644 index 0000000000..baca13f51b --- /dev/null +++ b/files/nl/learn/html/introduction_to_html/structureren_inhoud_van_webpagina/index.html @@ -0,0 +1,83 @@ +--- +title: De inhoud van een webpagina structureren +slug: Learn/HTML/Introduction_to_HTML/Structureren_inhoud_van_webpagina +translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
+ +

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.

+ + + + + + + + + + + + +
Vereisten:Vooraleer je aan deze evaluatie begint zou je al de vorige hoofdstukken al moeten hebben verwerkt, vooral  De structuur van je document en je website.
Doel:We testen je kennis van webpagina-structuren en hoe je een toekomstig lay-out ontwerp in html-opmaak kan weergeven.
+ +

Startpunt

+ +

Je start deze evaluatie met het zip bestand met al de hulpmiddelen om te starten. Het zip-bestand bevat:

+ + + +

Maak het voorbeeld op je lokale computer of gebruik een site als JSBin of Thimble om je evaluatie op uit te voeren.

+ +

Instructies voor die project

+ +

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:

+ + + +

Je hebt ook een elementen nodig voor:

+ + + +

Dit moet je ook nog doen:

+ + + +

Hints en tips

+ + + +

Voorbeeld

+ +

Devolgende schermafbeelding toont een voorbeeld van hoe de startpagina er zou kunnen uitzien nadat die werd opgemaakt.

+ +

The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message

+ +

Evaluatie

+ +

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 Learning Area Discourse thread, of op het #mdn IRC kanaal op Mozilla IRC. Probeer de oefening eerst uit — met valsspelen ga je niks kunnen winnen! 

+ +

{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/nl/learn/html/multimedia_inbedden/afbeeldingen_in_html/index.html b/files/nl/learn/html/multimedia_inbedden/afbeeldingen_in_html/index.html new file mode 100644 index 0000000000..5e2662b5ea --- /dev/null +++ b/files/nl/learn/html/multimedia_inbedden/afbeeldingen_in_html/index.html @@ -0,0 +1,368 @@ +--- +title: Afbeeldingen in HTML +slug: Learn/HTML/Multimedia_inbedden/Afbeeldingen_in_HTML +tags: + - Article + - Beginner + - Guide + - HTML + - Image + - alt text + - captions + - figcaption + - figure +translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +--- +
{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}
+ +

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.

+ + + + + + + + + + + + +
Vereisten:Basiscomputervaardigheden, de installatie van basissoftware, basiskennis van het werken met bestanden, vertrouwdheid met HTML-basisprincipes (zoals die worden besproken in Beginnen met HTML).
Doel: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.
+ +

Hoe plaatsen we een afbeelding op een webpagina?

+ +

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 src-attribuut (soms uitgesproken als het volledige woord, source, ofwel bron in het Nederlands). Het src-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.

+ +
+

Noot: voordat u verdergaat, zou u Een snelle uitleg over URL’s en paden moeten lezen om uw geheugen wat betreft relatieve en absolute URL’s op te frissen.

+
+ +

Als uw afbeelding bijvoorbeeld dinosaur.jpg heet en zich in dezelfde map bevindt als uw HTML-pagina, zou u de afbeelding als volgt kunnen inbedden:

+ +
<img src="dinosaurus.jpg">
+ +

Als de afbeelding zich in een submap afbeeldingen 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:

+ +
<img src="afbeeldingen/dinosaurus.jpg">
+ +

Enzovoort.

+ +
+

Noot: 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. dinosaurus.jpg is beter dan img835.png.

+
+ +

U zou de afbeelding met een absolute URL kunnen inbedden, zoals in dit voorbeeld:

+ +
<img src="https://www.example.com/afbeeldingen/dinosaurus.jpg">
+ +

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.

+ +
+

Waarschuwing: de meeste afbeeldingen zijn auteursrechtelijk beschermd. Plaats geen afbeelding op uw webpagina, tenzij:
+
+ 1) u de eigenaar van de afbeelding bent
+ 2) u expliciete, geschreven toestemming van de eigenaar van de afbeelding hebt, of
+ 3) u voldoende bewijs hebt dat de afbeelding tot het publieke domein behoort.
+
+ Schendingen van het auteursrecht zijn illegaal en onethisch. Bovendien mag u uw src-attribuut nooit 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.

+
+ +

De code hierboven zou het volgende resultaat opleveren:

+ +

A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it

+ +
+

Noot: elementen zoals {{htmlelement("img")}} en {{htmlelement("video")}} worden soms vervangen elementen 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. 

+
+ +
+

Noot: u kunt het voltooide voorbeeld van deze sectie op Github vinden (en bekijk ook de broncode.)

+
+ +

Alternatieve tekst

+ +

Het volgende attribuut dat we gaan bekijken heet alt. 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:

+ +
<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">
+ +

De makkelijkste manier om uw alt-tekst te testen is opzettelijk de bestandsnaam verkeerd spellen. Als bijvoorbeeld voor ons voorbeeld de naam dinosooooorus.jpg werd gebruikt, zou de browser in plaats van de afbeelding de alt-tekst weergeven:

+ +

The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.

+ +

Waarom zou u de alt-tekst ooit zien of nodig hebben? Wel, het kan om een aantal goede redenen handig zijn:

+ + + +

Wat moet er binnen datalt-attribuut worden beschreven? In de eerste plaats hangt het af van de reden waarom de afbeelding er is. Met andere woorden, wat u verliest als de afbeelding niet verschijnt:

+ + + +

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.

+ +
+

Noot: meer informatie vindt u in onze gids voor Tekstalternatieven.

+
+ +

Breedte en hoogte

+ +

U kunt de attributen width (breedte) en height (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 Cmd + I gebruiken om de informatie over het afbeeldingsbestand weer te geven. Met ons voorbeeld kunnen we dit doen:

+ +
<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">
+ +

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:

+ +

The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings

+ +

Dit is een goede praktijk; de pagina laadt sneller en soepeler.

+ +

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 hoogte-breedteverhouding niet respecteert. Het beste kunt u een afbeeldingseditor gebruiken om uw afbeelding de juiste grootte te geven voordat u deze op een webpagina plaatst.

+ +
+

Noot: als het niet nodig is om de grootte van een afbeelding aan te passen, kunt u beter CSS gebruiken.

+
+ +

Afbeeldingstitels

+ +

Net zoals bij koppelingen kunt u title-attributen aan uw afbeeldingen toevoegen om wanneer nodig extra informatie te verschaffen. In ons voorbeeld zouden we dit kunnen doen:

+ +
<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">
+ +

Dit geeft ons een tooltip, net zoals bij koppelingstitels:

+ +

The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum

+ +

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.

+ +

Actief leren: een afbeelding inbedden

+ +

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:

+ +

https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg

+ +

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é.

+ +

We willen ook dat u:

+ + + +

Als u een fout maakt, kunt u die altijd ongedaan maken via de knop Terugzetten. Als u echt vastloopt, klik dan op Oplossing tonen om een antwoord te zien:

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 500) }}

+ +

Bijschriften aan afbeeldingen toevoegen met figures en figure captions

+ +

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:

+ +
<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>
+ +

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?

+ +

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:

+ +
<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>
+ +

Het {{htmlelement("figcaption")}}-element vertelt browsers en ondersteunende technologie dat het bijschrift de andere inhoud van het {{htmlelement("figure")}}-element beschrijft.

+ +
+

Noot: 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 alt 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.

+
+ +

Een figuur hoeft geen afbeelding te zijn. Het kan een onafhankelijke inhoud zijn die:

+ + + +

Een figuur kan uit verschillende afbeeldingen bestaan, een codfragment, audio, video, vergelijkingen, een tabel, of iets anders.

+ +

Actief leren: een figuur maken

+ +

In deze sectie voor actief leren willen we dat u de voltooide code van de vorige oefening neemt en die in een figuur verandert:

+ + + +

Als u een fout maakt, kunt u die altijd ongedaan maken via de knop Terugzetten. Als u echt vastloopt, klik dan op Oplossing tonen om een antwoord te zien:

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 500) }}

+ +

CSS-achtergrondafbeeldingen

+ +

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 background-*-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 {
+  background-image: url("afbeeldingen/dinosaurus.jpg");
+},
+ +

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!

+ +

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.

+ +
+

Noot: u leert nog veel meer over CSS-achtergrondafbeeldingen in onze sectie CSS.

+
+ +

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.

+ +

{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}

diff --git a/files/nl/learn/html/multimedia_inbedden/index.html b/files/nl/learn/html/multimedia_inbedden/index.html new file mode 100644 index 0000000000..bd42da37c8 --- /dev/null +++ b/files/nl/learn/html/multimedia_inbedden/index.html @@ -0,0 +1,53 @@ +--- +title: Multimedia en inbedden +slug: Learn/HTML/Multimedia_inbedden +translation_of: Learn/HTML/Multimedia_and_embedding +--- +

{{LearnSidebar}}

+ +

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.

+ +

Vereisten

+ +

Voor je met deze module begint, zou je een redelijke basiskennis van HTML moeten hebben, zoals die in Introductie op HTML is behandeld. Als je deze module niet eerst hebt gelezen en verwerkt (of iets gelijkaardigs) doe dat dan eerst en kom dan terug!

+ +
+

Opmerking: 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 JSBin of Thimble.

+
+ +

Gidsen

+ +

Deze module bevat een aantal artikelen waarin alle basisprincipes over het inbedden van multimedia worden doorgenomen.

+ +
+
Afbeeldingen in HTML
+
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.
+
Video en audio
+
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.
+
Van <object> tot <iframe> — andere technologiën waarmee we inhoud kunnen inbedden
+
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. <iframe>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.
+
Vectorafbeeldingen aan het web toevoegen
+
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.
+
Responsieve afbeeldingen
+
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.
+
+ +

Evaluatie

+ +

De volgende evaluaties dienen om je kennis te testen van de HTML-basisprincipes die hierboven werden besproken :

+ +
+
Mozilla splash pagina
+
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!
+
+ +

Zie ook

+ +
+
Een afbeeldingsmap bovenop een afbeelding toevoegen
+
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.
+
Basis Webvaardigheden 2
+
+

Dit is een uitstekende cursus van de Mozilla stichting die een aantal van de vaardigheden test en onderzoekt waar we in Multimedia inbedden 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.

+
+
diff --git a/files/nl/learn/html/tables/index.html b/files/nl/learn/html/tables/index.html new file mode 100644 index 0000000000..e508a954b0 --- /dev/null +++ b/files/nl/learn/html/tables/index.html @@ -0,0 +1,42 @@ +--- +title: Tabellen in HTML +slug: Learn/HTML/Tables +tags: + - Artikel + - Beginner + - Gids + - HTML + - Landing + - Module + - Tabellen +translation_of: Learn/HTML/Tables +--- +
{{LearnSidebar}}
+ +

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 CSS 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.

+ +

Randvoorwaarden

+ +

Voordat u begint met deze module hebt u basiskennis nodig van HTML — zie Een inleiding op HTML.

+ +
+

Opmerking: 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 JSBin of Thimble.

+
+ +

Gidsen

+ +

Deze module bevat de volgende artikelen:

+ +
+
De basis van tabellen in HTML
+
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.
+
Geavanceerde functies en toegankelijkheid in HTML-tabellen
+
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.
+
+ +

Assessments

+ +
+
Data van planeten structureren
+
In ons assessment over tabellen geven we u wat data over de planeten in ons zonnestelsel, die u kunt structureren in een HTML-tabel.
+
-- cgit v1.2.3-54-g00ecf