From 004b3c5fc8d71b68fcb019c9e0346bf80024dbbd Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:48:47 +0100 Subject: unslug nl: move --- .../index.html | 1967 -------------------- .../javascript_basics/index.html | 339 ++++ .../web/api/document_object_model/index.html | 409 ++++ .../reference/global_objects/object/index.html | 241 +++ files/nl/dom/index.html | 409 ---- files/nl/dom/storage/index.html | 298 --- files/nl/firefox_1.5_voor_ontwikkelaars/index.html | 157 -- files/nl/gebruik_maken_van_dom_workers/index.html | 28 - files/nl/glossary/abstractie/index.html | 20 - files/nl/glossary/abstraction/index.html | 20 + files/nl/glossary/accessibility/index.html | 32 + files/nl/glossary/asynchronous/index.html | 25 + files/nl/glossary/asynchroon/index.html | 25 - files/nl/glossary/empty_element/index.html | 34 + files/nl/glossary/keyword/index.html | 21 + files/nl/glossary/leeg_element/index.html | 34 - files/nl/glossary/sleutelwoord/index.html | 21 - files/nl/glossary/ssl/index.html | 19 + files/nl/glossary/ssl_woordenlijst/index.html | 19 - files/nl/glossary/toegankelijkheid/index.html | 32 - files/nl/glossary/truthy/index.html | 26 + files/nl/glossary/waarachtig/index.html | 26 - .../learn/css/css_layout/positionering/index.html | 467 ----- .../nl/learn/css/css_layout/positioning/index.html | 467 +++++ files/nl/learn/css/first_steps/index.html | 63 + .../learn/forms/advanced_form_styling/index.html | 436 +++++ .../forms/basic_native_form_controls/index.html | 1448 ++++++++++++++ .../forms/how_to_structure_a_web_form/index.html | 964 ++++++++++ files/nl/learn/forms/index.html | 358 ++++ .../index.html | 1967 ++++++++++++++++++++ .../sending_and_retrieving_form_data/index.html | 339 ++++ files/nl/learn/forms/styling_web_forms/index.html | 344 ++++ files/nl/learn/forms/your_first_form/index.html | 273 +++ .../basis_software_installeren/index.html | 58 - .../bestanden_beheren/index.html | 103 - .../css_basics/index.html | 278 +++ .../css_basisbegrippen/index.html | 278 --- .../dealing_with_files/index.html | 103 + .../hoe_gaat_jouw_website_er_uit_zien/index.html | 102 - .../hoe_werkt_het_web/index.html | 98 - .../how_the_web_works/index.html | 98 + .../html_basics/index.html | 218 +++ .../html_basisbegrippen/index.html | 218 --- .../installing_basic_software/index.html | 58 + .../publicatie_website/index.html | 103 - .../publishing_your_website/index.html | 103 + .../what_will_your_website_look_like/index.html | 102 + .../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 --- .../advanced_text_formatting/index.html | 452 +++++ .../creating_hyperlinks/index.html | 306 +++ .../introduction_to_html/debugging_html/index.html | 161 ++ .../gevorderde_tekstopmaak/index.html | 452 ----- .../het_hoofd_metadata_in_html/index.html | 257 --- .../introduction_to_html/html_debuggen/index.html | 161 -- .../hyperlinks_maken/index.html | 306 --- .../marking_up_a_letter/index.html | 81 + .../opmaak_van_een_brief/index.html | 81 - .../structureren_inhoud_van_webpagina/index.html | 83 - .../structuring_a_page_of_content/index.html | 83 + .../the_head_metadata_in_html/index.html | 257 +++ .../images_in_html/index.html | 368 ++++ .../learn/html/multimedia_and_embedding/index.html | 53 + .../video_and_audio_content/index.html | 269 +++ .../afbeeldingen_in_html/index.html | 368 ---- files/nl/learn/html/multimedia_inbedden/index.html | 53 - .../manipulating_documents/index.html | 305 +++ .../manipuleren_documenten/index.html | 305 --- files/nl/mdn/about/index.html | 113 ++ files/nl/mdn/at_ten/index.html | 39 + files/nl/mdn/community/conversations/index.html | 60 - files/nl/mdn/community/index.html | 55 - .../samenwerken_in_een_community/index.html | 102 - files/nl/mdn/community/whats_happening/index.html | 40 - .../howto/aanmaken_mdn_account/index.html | 48 - .../een_redactionele_beoordeling_geven/index.html | 57 - .../een_technische_beoordeling_maken/index.html | 56 - .../howto/taggen_javascript_pagina/index.html | 74 - .../verhoogde_bevoegdheden_aanvragen/index.html | 21 - files/nl/mdn/guidelines/style_guide/index.html | 502 ----- .../mdn/guidelines/writing_style_guide/index.html | 502 +++++ files/nl/mdn/kuma/index.html | 27 - .../index.html | 69 - files/nl/mdn/over/index.html | 113 -- .../tools/kumascript/troubleshooting/index.html | 69 + files/nl/mdn/tools/template_editing/index.html | 16 - files/nl/mdn/yari/index.html | 27 + files/nl/mdn_at_ten/index.html | 39 - .../index.html | 25 - .../wat_zijn_webextensions/index.html | 24 - .../what_are_webextensions/index.html | 24 + .../dus_je_hebt_firefox_net_gebuild/index.html | 10 - .../so_you_just_built_firefox/index.html | 10 + files/nl/mozilla/firefox/releases/1.5/index.html | 157 ++ files/nl/mozilla_implementeren/index.html | 7 - .../mdn/community/conversations/index.html | 60 + files/nl/orphaned/mdn/community/index.html | 55 + .../mdn/community/whats_happening/index.html | 40 + .../mdn/community/working_in_community/index.html | 102 + .../howto/create_an_mdn_account/index.html | 48 + .../howto/do_a_technical_review/index.html | 56 + .../howto/do_an_editorial_review/index.html | 57 + .../howto/tag_javascript_pages/index.html | 74 + .../requesting_elevated_privileges/index.html | 21 + .../orphaned/mdn/tools/template_editing/index.html | 16 + .../porting_a_legacy_firefox_add-on/index.html | 25 + files/nl/orphaned/mozilla_implementeren/index.html | 7 + files/nl/tools/keyboard_shortcuts/index.html | 1065 +++++++++++ files/nl/tools/responsive_design_mode/index.html | 93 + files/nl/tools/responsive_design_view/index.html | 93 - files/nl/tools/sneltoetsen/index.html | 1065 ----------- .../web_console/keyboard_shortcuts/index.html | 10 + files/nl/tools/web_console/sneltoetsen/index.html | 10 - files/nl/web/api/crypto/getrandomvalues/index.html | 97 + .../nl/web/api/element/mousedown_event/index.html | 234 +++ files/nl/web/api/element/mouseout_event/index.html | 259 +++ files/nl/web/api/web_storage_api/index.html | 298 +++ .../web_workers_api/using_web_workers/index.html | 28 + .../api/window.crypto.getrandomvalues/index.html | 97 - files/nl/web/css/css_color/index.html | 120 ++ files/nl/web/css/css_colors/index.html | 120 -- .../de_stapelcontext/index.html | 239 --- .../the_stacking_context/index.html | 239 +++ files/nl/web/css/voor_beginners/index.html | 63 - files/nl/web/events/mousedown/index.html | 234 --- files/nl/web/events/mouseout/index.html | 259 --- .../html/html5_audio_en_video_gebruiken/index.html | 269 --- files/nl/web/javascript/aan_de_slag/index.html | 339 ---- .../guide/regular_expressions/index.html | 757 ++++++++ .../guide/reguliere_expressies/index.html | 757 -------- .../guide/werken_met_objecten/index.html | 497 ----- .../guide/working_with_objects/index.html | 497 +++++ .../nl/web/javascript/reference/classes/index.html | 252 +++ .../global_objects/object/prototype/index.html | 241 --- .../reference/global_objects/symbol/index.html | 205 ++ .../reference/global_objects/symbool/index.html | 205 -- .../nl/web/javascript/reference/klasses/index.html | 252 --- .../web/javascript/reference/operatoren/index.html | 288 --- .../reference/operatoren/typeof/index.html | 244 --- .../web/javascript/reference/operators/index.html | 288 +++ .../reference/operators/typeof/index.html | 244 +++ .../svg/tutorial/basic_transformations/index.html | 104 ++ .../svg/tutorial/basis_transformaties/index.html | 104 -- 148 files changed, 17412 insertions(+), 17412 deletions(-) delete mode 100644 files/nl/compatibiliteitstabel_voor_formulierelementen/index.html create mode 100644 files/nl/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html create mode 100644 files/nl/conflicting/web/api/document_object_model/index.html create mode 100644 files/nl/conflicting/web/javascript/reference/global_objects/object/index.html delete mode 100644 files/nl/dom/index.html delete mode 100644 files/nl/dom/storage/index.html delete mode 100644 files/nl/firefox_1.5_voor_ontwikkelaars/index.html delete mode 100644 files/nl/gebruik_maken_van_dom_workers/index.html delete mode 100644 files/nl/glossary/abstractie/index.html create mode 100644 files/nl/glossary/abstraction/index.html create mode 100644 files/nl/glossary/accessibility/index.html create mode 100644 files/nl/glossary/asynchronous/index.html delete mode 100644 files/nl/glossary/asynchroon/index.html create mode 100644 files/nl/glossary/empty_element/index.html create mode 100644 files/nl/glossary/keyword/index.html delete mode 100644 files/nl/glossary/leeg_element/index.html delete mode 100644 files/nl/glossary/sleutelwoord/index.html create mode 100644 files/nl/glossary/ssl/index.html delete mode 100644 files/nl/glossary/ssl_woordenlijst/index.html delete mode 100644 files/nl/glossary/toegankelijkheid/index.html create mode 100644 files/nl/glossary/truthy/index.html delete mode 100644 files/nl/glossary/waarachtig/index.html delete mode 100644 files/nl/learn/css/css_layout/positionering/index.html create mode 100644 files/nl/learn/css/css_layout/positioning/index.html create mode 100644 files/nl/learn/css/first_steps/index.html create mode 100644 files/nl/learn/forms/advanced_form_styling/index.html create mode 100644 files/nl/learn/forms/basic_native_form_controls/index.html create mode 100644 files/nl/learn/forms/how_to_structure_a_web_form/index.html create mode 100644 files/nl/learn/forms/index.html create mode 100644 files/nl/learn/forms/property_compatibility_table_for_form_controls/index.html create mode 100644 files/nl/learn/forms/sending_and_retrieving_form_data/index.html create mode 100644 files/nl/learn/forms/styling_web_forms/index.html create mode 100644 files/nl/learn/forms/your_first_form/index.html delete mode 100644 files/nl/learn/getting_started_with_the_web/basis_software_installeren/index.html delete mode 100644 files/nl/learn/getting_started_with_the_web/bestanden_beheren/index.html create mode 100644 files/nl/learn/getting_started_with_the_web/css_basics/index.html delete mode 100644 files/nl/learn/getting_started_with_the_web/css_basisbegrippen/index.html create mode 100644 files/nl/learn/getting_started_with_the_web/dealing_with_files/index.html delete mode 100644 files/nl/learn/getting_started_with_the_web/hoe_gaat_jouw_website_er_uit_zien/index.html delete mode 100644 files/nl/learn/getting_started_with_the_web/hoe_werkt_het_web/index.html create mode 100644 files/nl/learn/getting_started_with_the_web/how_the_web_works/index.html create mode 100644 files/nl/learn/getting_started_with_the_web/html_basics/index.html delete mode 100644 files/nl/learn/getting_started_with_the_web/html_basisbegrippen/index.html create mode 100644 files/nl/learn/getting_started_with_the_web/installing_basic_software/index.html delete mode 100644 files/nl/learn/getting_started_with_the_web/publicatie_website/index.html create mode 100644 files/nl/learn/getting_started_with_the_web/publishing_your_website/index.html create mode 100644 files/nl/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html delete mode 100644 files/nl/learn/html/forms/geavanceerde_styling_van_html-formulieren/index.html delete mode 100644 files/nl/learn/html/forms/how_to_structure_an_html_form/index.html delete mode 100644 files/nl/learn/html/forms/index.html delete mode 100644 files/nl/learn/html/forms/styling_html_forms/index.html delete mode 100644 files/nl/learn/html/forms/the_native_form_widgets/index.html delete mode 100644 files/nl/learn/html/forms/verzenden_van_formuliergegevens/index.html delete mode 100644 files/nl/learn/html/forms/your_first_html_form/index.html create mode 100644 files/nl/learn/html/introduction_to_html/advanced_text_formatting/index.html create mode 100644 files/nl/learn/html/introduction_to_html/creating_hyperlinks/index.html create mode 100644 files/nl/learn/html/introduction_to_html/debugging_html/index.html delete mode 100644 files/nl/learn/html/introduction_to_html/gevorderde_tekstopmaak/index.html delete mode 100644 files/nl/learn/html/introduction_to_html/het_hoofd_metadata_in_html/index.html delete mode 100644 files/nl/learn/html/introduction_to_html/html_debuggen/index.html delete mode 100644 files/nl/learn/html/introduction_to_html/hyperlinks_maken/index.html create mode 100644 files/nl/learn/html/introduction_to_html/marking_up_a_letter/index.html delete mode 100644 files/nl/learn/html/introduction_to_html/opmaak_van_een_brief/index.html delete mode 100644 files/nl/learn/html/introduction_to_html/structureren_inhoud_van_webpagina/index.html create mode 100644 files/nl/learn/html/introduction_to_html/structuring_a_page_of_content/index.html create mode 100644 files/nl/learn/html/introduction_to_html/the_head_metadata_in_html/index.html create mode 100644 files/nl/learn/html/multimedia_and_embedding/images_in_html/index.html create mode 100644 files/nl/learn/html/multimedia_and_embedding/index.html create mode 100644 files/nl/learn/html/multimedia_and_embedding/video_and_audio_content/index.html delete mode 100644 files/nl/learn/html/multimedia_inbedden/afbeeldingen_in_html/index.html delete mode 100644 files/nl/learn/html/multimedia_inbedden/index.html create mode 100644 files/nl/learn/javascript/client-side_web_apis/manipulating_documents/index.html delete mode 100644 files/nl/learn/javascript/client-side_web_apis/manipuleren_documenten/index.html create mode 100644 files/nl/mdn/about/index.html create mode 100644 files/nl/mdn/at_ten/index.html delete mode 100644 files/nl/mdn/community/conversations/index.html delete mode 100644 files/nl/mdn/community/index.html delete mode 100644 files/nl/mdn/community/samenwerken_in_een_community/index.html delete mode 100644 files/nl/mdn/community/whats_happening/index.html delete mode 100644 files/nl/mdn/contribute/howto/aanmaken_mdn_account/index.html delete mode 100644 files/nl/mdn/contribute/howto/een_redactionele_beoordeling_geven/index.html delete mode 100644 files/nl/mdn/contribute/howto/een_technische_beoordeling_maken/index.html delete mode 100644 files/nl/mdn/contribute/howto/taggen_javascript_pagina/index.html delete mode 100644 files/nl/mdn/contribute/processes/verhoogde_bevoegdheden_aanvragen/index.html delete mode 100644 files/nl/mdn/guidelines/style_guide/index.html create mode 100644 files/nl/mdn/guidelines/writing_style_guide/index.html delete mode 100644 files/nl/mdn/kuma/index.html delete mode 100644 files/nl/mdn/kuma/probleemoplossingen_kumascript_errors/index.html delete mode 100644 files/nl/mdn/over/index.html create mode 100644 files/nl/mdn/tools/kumascript/troubleshooting/index.html delete mode 100644 files/nl/mdn/tools/template_editing/index.html create mode 100644 files/nl/mdn/yari/index.html delete mode 100644 files/nl/mdn_at_ten/index.html delete mode 100644 files/nl/mozilla/add-ons/webextensions/een_verouderde_firefox-add-on_porteren/index.html delete mode 100644 files/nl/mozilla/add-ons/webextensions/wat_zijn_webextensions/index.html create mode 100644 files/nl/mozilla/add-ons/webextensions/what_are_webextensions/index.html delete mode 100644 files/nl/mozilla/developer_guide/dus_je_hebt_firefox_net_gebuild/index.html create mode 100644 files/nl/mozilla/developer_guide/so_you_just_built_firefox/index.html create mode 100644 files/nl/mozilla/firefox/releases/1.5/index.html delete mode 100644 files/nl/mozilla_implementeren/index.html create mode 100644 files/nl/orphaned/mdn/community/conversations/index.html create mode 100644 files/nl/orphaned/mdn/community/index.html create mode 100644 files/nl/orphaned/mdn/community/whats_happening/index.html create mode 100644 files/nl/orphaned/mdn/community/working_in_community/index.html create mode 100644 files/nl/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html create mode 100644 files/nl/orphaned/mdn/contribute/howto/do_a_technical_review/index.html create mode 100644 files/nl/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html create mode 100644 files/nl/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html create mode 100644 files/nl/orphaned/mdn/contribute/processes/requesting_elevated_privileges/index.html create mode 100644 files/nl/orphaned/mdn/tools/template_editing/index.html create mode 100644 files/nl/orphaned/mozilla/add-ons/webextensions/porting_a_legacy_firefox_add-on/index.html create mode 100644 files/nl/orphaned/mozilla_implementeren/index.html create mode 100644 files/nl/tools/keyboard_shortcuts/index.html create mode 100644 files/nl/tools/responsive_design_mode/index.html delete mode 100644 files/nl/tools/responsive_design_view/index.html delete mode 100644 files/nl/tools/sneltoetsen/index.html create mode 100644 files/nl/tools/web_console/keyboard_shortcuts/index.html delete mode 100644 files/nl/tools/web_console/sneltoetsen/index.html create mode 100644 files/nl/web/api/crypto/getrandomvalues/index.html create mode 100644 files/nl/web/api/element/mousedown_event/index.html create mode 100644 files/nl/web/api/element/mouseout_event/index.html create mode 100644 files/nl/web/api/web_storage_api/index.html create mode 100644 files/nl/web/api/web_workers_api/using_web_workers/index.html delete mode 100644 files/nl/web/api/window.crypto.getrandomvalues/index.html create mode 100644 files/nl/web/css/css_color/index.html delete mode 100644 files/nl/web/css/css_colors/index.html delete mode 100644 files/nl/web/css/css_positioning/understanding_z_index/de_stapelcontext/index.html create mode 100644 files/nl/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html delete mode 100644 files/nl/web/css/voor_beginners/index.html delete mode 100644 files/nl/web/events/mousedown/index.html delete mode 100644 files/nl/web/events/mouseout/index.html delete mode 100644 files/nl/web/guide/html/html5_audio_en_video_gebruiken/index.html delete mode 100644 files/nl/web/javascript/aan_de_slag/index.html create mode 100644 files/nl/web/javascript/guide/regular_expressions/index.html delete mode 100644 files/nl/web/javascript/guide/reguliere_expressies/index.html delete mode 100644 files/nl/web/javascript/guide/werken_met_objecten/index.html create mode 100644 files/nl/web/javascript/guide/working_with_objects/index.html create mode 100644 files/nl/web/javascript/reference/classes/index.html delete mode 100644 files/nl/web/javascript/reference/global_objects/object/prototype/index.html create mode 100644 files/nl/web/javascript/reference/global_objects/symbol/index.html delete mode 100644 files/nl/web/javascript/reference/global_objects/symbool/index.html delete mode 100644 files/nl/web/javascript/reference/klasses/index.html delete mode 100644 files/nl/web/javascript/reference/operatoren/index.html delete mode 100644 files/nl/web/javascript/reference/operatoren/typeof/index.html create mode 100644 files/nl/web/javascript/reference/operators/index.html create mode 100644 files/nl/web/javascript/reference/operators/typeof/index.html create mode 100644 files/nl/web/svg/tutorial/basic_transformations/index.html delete mode 100644 files/nl/web/svg/tutorial/basis_transformaties/index.html (limited to 'files') diff --git a/files/nl/compatibiliteitstabel_voor_formulierelementen/index.html b/files/nl/compatibiliteitstabel_voor_formulierelementen/index.html deleted file mode 100644 index 37de621400..0000000000 --- a/files/nl/compatibiliteitstabel_voor_formulierelementen/index.html +++ /dev/null @@ -1,1967 +0,0 @@ ---- -title: Compatibiliteitstabel voor formulierelementen -slug: Compatibiliteitstabel_voor_formulierelementen -translation_of: Learn/Forms/Property_compatibility_table_for_form_controls ---- -

De volgende compatibiliteitstabellen trachten een samenvatting te geven van CSS-ondersteuning voor HTML-formulieren. Door de complexiteit van CSS en HTML kunnen deze tabellen niet als volledig beschouwd worden. Zij geven echter een goed inzicht in wat wel en wat niet mogelijk is.

- -

Hoe de tabellen lezen

- -

Waarden

- -

Voor elke eigenschap zijn er vier mogelijke waarden:

- -
-
JA
-
De eigenschap gedraagt zich consistent over browsers. Neveneffecten zijn in bepaalde gevallen echter niet uitgesloten.
-
GEDEELTELIJK
-
Alhoewel de eigenschap werkt, zijn er toch soms neveneffecten of inconsistenties. Men gebruikt deze eigenschappen best niet tenzij de neveneffecten op voorhand aangepakt worden.
-
NEEN
-
De eigenschap werkt niet of is zo inconsistent dat zij niet betrouwbaar werkt.
-
N.V.T.
-
De eigenschap heeft geen enkele betekenis voor dit type of element.
-
- -

Weergave

- -

Elke eigenschap wordt op twee manieren weergegeven:

- -
-
N (Normaal)
-
Betekent dat de eigenschap gewoon toegepast kan worden.
-
A (Aangepast)
-
Geeft aan dat de eigenschap toegepast wordt met onderstaande regels:
-
- -
* {
-/* Schakelt het klassieke uiterlijk en aanvoelen uit bij WebKit gebaseerde browsers */
-  -webkit-appearance: none;
-
-/* Schakelt het klassieke uiterlijk en aanvoelen uit bij Gecko gebaseerde browsers */
-  -moz-appearance: none;
-
-/* Schakelt het klassieke uiterlijk en aanvoelen uit bij diverse browsers met inbegrip
-  van Opera, Internet Explorer en Firefox */
-  background: none;
-}
- -

Compatibiliteitstabellen

- -

Globaal gedrag

- -

Sommige eigenschappen gedragen zich in het algemeen hetzelfde over de diverse browsers:

- -
-
{{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}}
-
Deze eigenschappen kunnen bij bepaalde browsers geheel of gedeeltelijk het klassieke uiterlijk en aanvoelen uitschakelen. Deze eigenschappen moeten met voorzichtigheid gebruikt worden.
-
{{cssxref("line-height")}}
-
Deze eigenschap is inconsistent over de verschillende browsers. Zij kan beter vermeden worden.
-
{{cssxref("text-decoration")}}
-
Deze eigenschap wordt niet ondersteund door Opera voor formulierelementen.
-
{{cssxref("text-overflow")}}
-
Opera, Safari en IE9 ondersteunen deze eigenschap niet voor formulierelementen.
-
{{cssxref("text-shadow")}}
-
Opera ondersteunt {{cssxref("text-shadow")}}  niet voor formulierelementen en IE9 ondersteunt het helemaal niet.
-
- -

Tekstvelden

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EigenschapNANota
CSS box model
{{cssxref("width")}}JaJa 
{{cssxref("height")}}Gedeeltelijk[1][2]Ja -
    -
  1. WebKit browsers (meestal op  Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Daarom is het noodzakelijk om  -webkit-appearance:none te gebruiken om deze eigenschap te gebruiken bij zoekvelden.
    2. -
  2.  Windows 7, Internet Explorer 9 gebruikt de rand niet tenzij background:none wordt gebruikt.
    3. -
-
{{cssxref("border")}}Gedeeltelijk[1][2]Ja -
    -
  1. WebKit browsers (meestal op  Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Daarom is het noodzakelijk om  -webkit-appearance:none te gebruiken om deze eigenschap te gebruiken bij zoekvelden.
    2. -
  2. Windows 7, Internet Explorer 9 gebruikt de rand niet tenzij background:none wordt gebruikt.
    3. -
-
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}Gedeeltelijk[1][2]Ja -
    -
  1. WebKit browsers (meestal op  Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Daarom is het noodzakelijk om  -webkit-appearance:none te gebruiken om deze eigenschap te gebruiken bij zoekvelden.
    2. -
  2. Windows 7, Internet Explorer 9 gebruikt de rand niet tenzij background:none wordt gebruikt.
    3. -
-
Tekst en font
{{cssxref("color")}}[1]JaJa -
    -
  1. Als de {{cssxref("border-color")}} eigenschap niet ingesteld is zullen browsers die op WebKit gebaseerd zijn de {{cssxref("color")}} eigenschap toepassen op de rand en font voor {{HTMLElement("textarea")}}.
    2. -
-
{{cssxref("font")}}JaJaZie de nota over {{cssxref("line-height")}}
{{cssxref("letter-spacing")}}JaJa 
{{cssxref("text-align")}}JaJa 
{{cssxref("text-decoration")}}GedeeltelijkGedeeltelijkZie nota betreffende Opera
{{cssxref("text-indent")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. IE9 ondersteunt deze eigenschap alleen voor {{HTMLElement("textarea")}}, terwijl Opera het alleen ondersteunt in éénregelige tekstvelden.
    2. -
-
{{cssxref("text-overflow")}}GedeeltelijkGedeeltelijk 
{{cssxref("text-shadow")}}GedeeltelijkGedeeltelijk 
{{cssxref("text-transform")}}JaJa 
Rand en achtergrond
{{cssxref("background")}}Gedeeltelijk[1]Ja -
    -
  1. WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden.  Hiertoe moet -webkit-appearance:none   aangewend worden.  Bij Windows 7 gebruikt Internet Explorer 9 geen rand tenzij background:none gebruikt wordt.
    2. -
-
{{cssxref("border-radius")}}Gedeeltelijk[1][2]Ja -
    -
  1. WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Hiertoe moet -webkit-appearance:none aangewend worden .  Bij Windows 7 gebruikt Internet Explorer 9 geen rand tenzij background:none gebruikt wordt.
    2. -
  2. Bij Opera wordt de {{cssxref("border-radius")}} eigenschap alleen gebruikt als er expliciet een rand ingesteld is.
    3. -
-
{{cssxref("box-shadow")}}NeenGedeeltelijk[1] -
    -
  1. IE9 ondersteunt deze eigenschap niet.
    2. -
-
- -

Knoppen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EigenschapNANota
CSS box model
{{cssxref("width")}}JaJa 
{{cssxref("height")}}Gedeeltelijk[1]Ja -
    -
  1. Deze eigenschap wordt niet gebruikt bij browsers op Mac OSX of iOS die gebaseerd zijn op WebKit.
    2. -
-
{{cssxref("border")}}GedeeltelijkJa 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}Gedeeltelijk[1]Ja -
    -
  1. Deze eigenschap wordt niet gebruikt bij browsers op Mac OSX of iOS die gebaseerd zijn op WebKit.
    2. -
-
Tekst en font
{{cssxref("color")}}JaJa 
{{cssxref("font")}}JaJaZie nota over  {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}JaJa 
{{cssxref("text-align")}}NeenNeen 
{{cssxref("text-decoration")}}GedeeltelijkJa 
{{cssxref("text-indent")}}JaJa 
{{cssxref("text-overflow")}}NeenNeen 
{{cssxref("text-shadow")}}GedeeltelijkGedeeltelijk 
{{cssxref("text-transform")}}JaJa 
Rand en achtergrond
{{cssxref("background")}}JaJa 
{{cssxref("border-radius")}}Ja[1]Ja[1] -
    -
  1. Bij Opera wordt de {{cssxref("border-radius")}} eigenschap alleen gebruikt als er expliciet een rand ingesteld is.
    2. -
-
{{cssxref("box-shadow")}}NeenPartial[1] -
    -
  1. IE9 ondersteunt deze eigenschap niet.
    2. -
-
- -

Number

- -

Bij browsers die het  number  element gebruiken is er geen standaard manier om de stijl van de spinner, die de waarde van het  veld aanpast, te  wijzigen. Noteer dat bij Safari de spinner buiten het veld staat.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EigenschapNANota
CSS box model
{{cssxref("width")}}JaJa 
{{cssxref("height")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. Bij Opera worden de spinners ingezoomd, hetgeen de inhoud van het veld kan verbergen.
    2. -
-
{{cssxref("border")}}JaJa 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. Bij Opera worden de spinners ingezoomd, hetgeen de inhoud van het veld kan verbergen.
    2. -
-
Tekst en font
{{cssxref("color")}}JaJa 
{{cssxref("font")}}JaJaZie nota over {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}JaJa 
{{cssxref("text-align")}}JaJa 
{{cssxref("text-decoration")}}GedeeltelijkGedeeltelijk 
{{cssxref("text-indent")}}JaJa 
{{cssxref("text-overflow")}}NeenNeen 
{{cssxref("text-shadow")}}GedeeltelijkGedeeltelijk 
{{cssxref("text-transform")}}N.V.T.N.V.T. 
Rand en achtergrond
{{cssxref("background")}}NeenNeen -

Wordt ondersteund maar er is te weinig consistentie tussen browsers om betrouwbaar te zijn.

-
{{cssxref("border-radius")}}NeenNeen
{{cssxref("box-shadow")}}NeenNeen
- -

Keuzevakjes en keuzerondjes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EigenschapNANota
CSS box model
{{cssxref("width")}}Neen[1]Neen[1] -
    -
  1. Sommige browsers voegen extra marges toe, andere vergroten het element.
    2. -
-
{{cssxref("height")}}Neen[1]Neen[1] -
    -
  1. Sommige browsers voegen extra marges toe, andere vergroten het element.
    2. -
-
{{cssxref("border")}}NeenNeen 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}NeenNeen 
Text and font
{{cssxref("color")}}N.V.T.N.V.T. 
{{cssxref("font")}}N.V.T.N.V.T. 
{{cssxref("letter-spacing")}}N.V.T.N.V.T. 
{{cssxref("text-align")}}N.V.T.N.V.T. 
{{cssxref("text-decoration")}}N.V.T.N.V.T. 
{{cssxref("text-indent")}}N.V.T.N.V.T. 
{{cssxref("text-overflow")}}N.V.T.N.V.T. 
{{cssxref("text-shadow")}}N.V.T.N.V.T. 
{{cssxref("text-transform")}}N.V.T.N.V.T. 
Rand en achtergrond
{{cssxref("background")}}NeenNeen 
{{cssxref("border-radius")}}NeenNeen 
{{cssxref("box-shadow")}}NeenNeen 
- -

Keuzevakken (éénregelig)

- -

Firefox voorziet geen mogelijkheid om het selectiepijltje van het {{HTMLElement("select")}} element te wijzigen.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EigenschapNANota
CSS box model
{{cssxref("width")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. Deze eigenschap werkt voor het {{HTMLElement("select")}} element maar niet voor de {{HTMLElement("option")}} of {{HTMLElement("optgroup")}} elementen.
    2. -
-
{{cssxref("height")}}NeenJa 
{{cssxref("border")}}GedeeltelijkJa 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}Neen[1]Gedeeltelijk[2] -
    -
  1. De eigenschap werkt maar maar niet consistent over browsers op Mac OSX.
    2. -
  2. Deze eigenschap werkt voor het {{HTMLElement("select")}} element maar niet voor de {{HTMLElement("option")}} of {{HTMLElement("optgroup")}} elementen.
    3. -
-
Tekst en font
{{cssxref("color")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. Mac OSX ondersteunt niet de WebKit gebaseerde browsers. Evenmin ondersteunt MAC OSX samen met Opera het   {{HTMLElement("option")}} en het {{HTMLElement("optgroup")}} element.
    2. -
-
{{cssxref("font")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor de oorspronkelijke elementen. Evenmin ondersteunt MAC OSX samen met Opera het   {{HTMLElement("option")}} en het {{HTMLElement("optgroup")}} element.
    2. -
-
{{cssxref("letter-spacing")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. IE9 ondersteunt deze eiegenschap niet voor de {{HTMLElement("select")}}, {{HTMLElement("option")}} en {{HTMLElement("optgroup")}} elementen.  WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor de {{HTMLElement("option")}} en {{HTMLElement("optgroup")}} elementen.
    2. -
-
{{cssxref("text-align")}}Neen[1]Neen[1] -
    -
  1. IE9 op Windows 7 en WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor dit element.
    2. -
-
{{cssxref("text-decoration")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. Alleen Firefox ondersteunt deze eigenschap volledig. Opera ondersteunt deze eigenschap helemaal niet en andere browsers ondersteunen alleen het {{HTMLElement("select")}} element.
    2. -
-
{{cssxref("text-indent")}}Gedeeltelijk[1][2]Gedeeltelijk[1][2] -
    -
  1. De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.
    2. -
  2. IE9 ondersteunt deze eigenschap niet.
    3. -
-
{{cssxref("text-overflow")}}NeenNeen 
{{cssxref("text-shadow")}}Gedeeltelijk[1][2]Gedeeltelijk[1][2] -
    -
  1. De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.
    2. -
  2. IE9 ondersteunt deze eigenschap niet.
    3. -
-
{{cssxref("text-transform")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.
    2. -
-
Rand en achtergrond
{{cssxref("background")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.
    2. -
-
{{cssxref("border-radius")}}Gedeeltelijk[1]Gedeeltelijk[1]
{{cssxref("box-shadow")}}NeenGedeeltelijk[1]
- -

Keuzevakken (meerregelig)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EigenschapNANota
CSS box model
{{cssxref("width")}}JaJa 
{{cssxref("height")}}JaJa 
{{cssxref("border")}}JaJa 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. Opera ondersteunt niet {{cssxref("padding-top")}} en {{cssxref("padding-bottom")}} van het {{HTMLElement("select")}} element.
    2. -
-
Tekst en font
{{cssxref("color")}}JaJa 
{{cssxref("font")}}JaJaZie de nota betreffende {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. IE9 ondersteunt deze eigenschap niet voor de {{HTMLElement("select")}}, {{HTMLElement("option")}} en {{HTMLElement("optgroup")}} elementen. WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor de {{HTMLElement("option")}} en {{HTMLElement("optgroup")}} elementen.
    2. -
-
{{cssxref("text-align")}}Neen[1]Neen[1] -
    -
  1. IE9 op Windows 7 en WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet.
    2. -
-
{{cssxref("text-decoration")}}Neen[1]Neen[1] -
    -
  1. Alleen ondersteund door Firefox en IE9+.
    2. -
-
{{cssxref("text-indent")}}NeenNeen 
{{cssxref("text-overflow")}}NeenNeen 
{{cssxref("text-shadow")}}NeenNeen 
{{cssxref("text-transform")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. De meeste browsers ondersteunen deze eigenschap slechts voor het {{HTMLElement("select")}} element.
    2. -
-
Rand en achtergrond
{{cssxref("background")}}JaJa 
{{cssxref("border-radius")}}Ja[1]Ja[1] -
    -
  1. Bij Opera wordt de {{cssxref("border-radius")}} eigenschap alleen ondersteund als expliciet een rand ingesteld is.
    2. -
-
{{cssxref("box-shadow")}}NeenGedeeltelijk[1] -
    -
  1. IE9 ondersteunt deze eigenschap niet.
    2. -
-
- -

Datalist

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EigenschapNANota
CSS box model
{{cssxref("width")}}NeenNeen 
{{cssxref("height")}}NeenNeen 
{{cssxref("border")}}NeenNeen 
{{cssxref("margin")}}NeenNeen 
{{cssxref("padding")}}NeenNeen 
Tekst en font
{{cssxref("color")}}NeenNeen 
{{cssxref("font")}}NeenNeen 
{{cssxref("letter-spacing")}}NeenNeen 
{{cssxref("text-align")}}NeenNeen 
{{cssxref("text-decoration")}}NeenNeen 
{{cssxref("text-indent")}}NeenNeen 
{{cssxref("text-overflow")}}Neen -

Neen

- 		 
{{cssxref("text-shadow")}}NeenNeen 
{{cssxref("text-transform")}}NeenNeen 
Rand en achtergrond
{{cssxref("background")}}NeenNeen 
{{cssxref("border-radius")}}NeenNeen 
{{cssxref("box-shadow")}}NeenNeen 
- -

Bestandslijst

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EigenschapNANota
CSS box model
{{cssxref("width")}}NeenNeen 
{{cssxref("height")}}NeenNeen 
{{cssxref("border")}}NeenNeen 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}NeenNeen 
Tekst en font
{{cssxref("color")}}JaJa 
{{cssxref("font")}}Neen[1]Neen[1] -
    -
  1. Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
    2. -
-
{{cssxref("letter-spacing")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. Veel browsers passen deze eigenschap toe op de selectieknop.
    2. -
-
{{cssxref("text-align")}}NeenNeen 
{{cssxref("text-decoration")}}NeenNeen 
{{cssxref("text-indent")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. Reageert min of meer als een extra linker marge buiten het element.
    2. -
-
{{cssxref("text-overflow")}}NeenNeen 
{{cssxref("text-shadow")}}NeenNeen 
{{cssxref("text-transform")}}NeenNeen 
Border and background
{{cssxref("background")}}Neen[1]Neen[1] -
    -
  1. Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
    2. -
-
{{cssxref("border-radius")}}NeenNeen 
{{cssxref("box-shadow")}}NeenGedeeltelijk[1] -
    -
  1. IE9 ondersteunt deze eigenschap niet.
    2. -
-
- -

Datumselectie

- -

Vele eigenschappen worden ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
-  

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EigenschapNANota
CSS box model
{{cssxref("width")}}NeenNeen 
{{cssxref("height")}}NeenNeen 
{{cssxref("border")}}NeenNeen 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}NeenNeen 
Tekst en font
{{cssxref("color")}}NeenNeen 
{{cssxref("font")}}NeenNeen 
{{cssxref("letter-spacing")}}NeenNeen 
{{cssxref("text-align")}}NeenNeen 
{{cssxref("text-decoration")}}NeenNeen 
{{cssxref("text-indent")}}NeenNeen 
{{cssxref("text-overflow")}}NeenNeen 
{{cssxref("text-shadow")}}NeenNeen 
{{cssxref("text-transform")}}NeenNeen 
Rand en achtergrond
{{cssxref("background")}}NeenNeen 
{{cssxref("border-radius")}}NeenNeen 
{{cssxref("box-shadow")}}NeenNeen 
- -

Kleurenselectie

- -

Er zijn op het ogenblik te weinig toepassingen om een betrouwbaar gedrag te vast te stellen.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EigenschapNANota
CSS box model
{{cssxref("width")}}JaJa 
{{cssxref("height")}}Neen[1]Ja -
    -
  1. Opera behandelt deze eigenschap als een gewoon selectie element met dezelfde restricties.
    2. -
-
{{cssxref("border")}}JaJa 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}Neen[1]Ja -
    -
  1. Opera behandelt deze eigenschap als een gewoon selectie element met dezelfde restricties.
    2. -
-
Tekst en font
{{cssxref("color")}}N.V.T.N.V.T. 
{{cssxref("font")}}N.V.T.N.V.T. 
{{cssxref("letter-spacing")}}N.V.T.N.V.T. 
{{cssxref("text-align")}}N.V.T.N.V.T. 
{{cssxref("text-decoration")}}N.V.T.N.V.T. 
{{cssxref("text-indent")}}N.V.T.N.V.T. 
{{cssxref("text-overflow")}}N.V.T.N.V.T. 
{{cssxref("text-shadow")}}N.V.T.N.V.T. 
{{cssxref("text-transform")}}N.V.T.N.V.T. 
Rand en achtergrond
{{cssxref("background")}}Neen[1]Neen[1] -
    -
  1. Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
    2. -
-
{{cssxref("border-radius")}}Neen[1]Neen[1]
{{cssxref("box-shadow")}}Neen[1]Neen[1]
- -

Meters en voortgangsbalken

- -

Er zijn op het ogenblik te weinig toepassingen om een betrouwbaar gedrag te vast te stellen.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EigenschapNANota
CSS box model
{{cssxref("width")}}JaJa 
{{cssxref("height")}}JaJa 
{{cssxref("border")}}GedeeltelijkJa 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}JaGedeeltelijk[1] -
    -
  1. Chrome verbergt de {{HTMLElement("progress")}} en  {{HTMLElement("meter")}} elementen wanneer de {{cssxref("padding")}} eigenschap is toegepast op een element.
    2. -
-
Tekst en font
{{cssxref("color")}}N.V.T.N.V.T. 
{{cssxref("font")}}N.V.T.N.V.T. 
{{cssxref("letter-spacing")}}N.V.T.N.V.T. 
{{cssxref("text-align")}}N.V.T.N.V.T. 
{{cssxref("text-decoration")}}N.V.T.N.V.T. 
{{cssxref("text-indent")}}N.V.T.N.V.T. 
{{cssxref("text-overflow")}}N.V.T.N.V.T. 
{{cssxref("text-shadow")}}N.V.T.N.V.T. 
{{cssxref("text-transform")}}N.V.T.N.V.T. 
Rand en achtergrond
{{cssxref("background")}}Neen[1]Neen[1] -
    -
  1. Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
    2. -
-
{{cssxref("border-radius")}}Neen[1]Neen[1]
{{cssxref("box-shadow")}}Neen[1]Neen[1]
- -

Bereik

- -

Er is geen standaard manier om de stijl van het handvat van het bereik te veranderen en Opera laat helemaal geen wijziging toe van de standaard stijl.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EigenschapNANota
CSS box model
{{cssxref("width")}}JaJa 
{{cssxref("height")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. Chrome en Opera voegen wat extra ruimte toe rond het element terwijl Opera op Windows 7 de greep vergroot.
    2. -
-
{{cssxref("border")}}NeenJa 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}Gedeeltelijk[1]Ja -
    -
  1. {{cssxref("padding")}} wordt gebruikt maar heeft geen visueel effect.
    2. -
-
Tekst en font
{{cssxref("color")}}N.V.T.N.V.T. 
{{cssxref("font")}}N.V.T.N.V.T. 
{{cssxref("letter-spacing")}}N.V.T.N.V.T. 
{{cssxref("text-align")}}N.V.T.N.V.T. 
{{cssxref("text-decoration")}}N.V.T.N.V.T. 
{{cssxref("text-indent")}}N.V.T.N.V.T. 
{{cssxref("text-overflow")}}N.V.T.N.V.T. 
{{cssxref("text-shadow")}}N.V.T.N.V.T. 
{{cssxref("text-transform")}}N.V.T.N.V.T. 
Border and background
{{cssxref("background")}}Neen[1]Neen[1] -
    -
  1. Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
    2. -
-
{{cssxref("border-radius")}}Neen[1]Neen[1]
{{cssxref("box-shadow")}}Neen[1]Neen[1]
- -

Afbeeldingsknoppen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EigenschapNANota
CSS box model
{{cssxref("width")}}JaJa 
{{cssxref("height")}}JaJa 
{{cssxref("border")}}JaJa 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}JaJa 
Tekst en font
{{cssxref("color")}}N.V.T.N.V.T. 
{{cssxref("font")}}N.V.T.N.V.T. 
{{cssxref("letter-spacing")}}N.V.T.N.V.T. 
{{cssxref("text-align")}}N.V.T.N.V.T. 
{{cssxref("text-decoration")}}N.V.T.N.V.T. 
{{cssxref("text-indent")}}N.V.T.N.V.T. 
{{cssxref("text-overflow")}}N.V.T.N.V.T. 
{{cssxref("text-shadow")}}N.V.T.N.V.T. 
{{cssxref("text-transform")}}N.V.T.N.V.T. 
Rand en achtergrond
{{cssxref("background")}}JaJa 
{{cssxref("border-radius")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. IE9 ondersteunt deze eigenschap niet.
    2. -
-
{{cssxref("box-shadow")}}Gedeeltelijk[1]Gedeeltelijk[1] -
    -
  1. IE9 ondersteunt deze eigenschap niet.
    2. -
-
- -

 

diff --git a/files/nl/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html b/files/nl/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html new file mode 100644 index 0000000000..35b2bd97f9 --- /dev/null +++ b/files/nl/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,339 @@ +--- +title: Aan de slag (Handleiding Javascript) +slug: Web/JavaScript/Aan_de_slag +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +translation_of_original: Web/JavaScript/Getting_Started +--- +

Waarom JavaScript?

+

JavaScript is een krachtige, ingewikkelde, en vaak misbegrepen programmeertaal. Het maakt het mogelijk om snel programma's te ontwikkelen waarin gebruikers direct informatie kunnen invullen en het resultaat kunnen zien.

+

Het voornamelijke voordeel van JavaScript, ook wel bekend als ECMAScript, is dat het rond de Web browser draait en daardoor de mogelijkheid heeft om dezelfde resultaten te produceren op alle platformen die door de browser ondersteund worden. De voorbeelden op deze pagina, net als Google Maps, draait op Linux, Windows, en Mac OS. Met de recente groei van vele JavaScript bibliotheken is het nu nog makkelijker om door een document te navigeren, DOM elementen te selecteren, animaties te maken, gebeurtenissen af te handelen en Ajax applicaties te ontwikkelen. In tegenstelling tot de hype rondom andere technologieën die private interesses hebben is Javascript eigenlijk de enige client-side taal die op meerde platformen draait en tegelijkertijd gratis is en universeel geaccepteerd.

+

Wat je al zou moeten weten

+

JavaScript is een taal waar je makkelijk mee kunt beginnen. Alles wat je nodig hebt is een tekstverwerker en een Web browser.

+

Er zijn vele andere technologieën die geïntegreerd kunnen worden met JavaScript, dit valt echter buiten het bestek van dit document. Verwacht niet dat je direct een enorme applicatie als Google Maps kunt maken op jouw eerste dag!

+

Aan de slag

+

Beginnen met JavaScript is erg makkelijk. Je hoeft geen ingewikkelde ontwikkelprogramma's geïnstalleerd te hebben. Je hoeft niet te weten hoe je een shell moet gebruiken, hoe je Make programmeert of hoe je een compiler moet gebruiken. JavaScript wordt geïnterpreteerd door jour Web browser. Alles wat je moet doen is een programma als tekstbestand opslaan en het openen in jouw Web browser. Dat is alles!

+

JavaScript is een uitstekende programmeertaal voor beginners. Het maakt het mogelijk om direct resultaten te tonen aan de nieuwe leerling en leert hen over hulpmiddelen die zij waarschijnlijk nuttig vinden in het dagelijks leven. Dit staat in contrast met talen als C, C++ en Java die eigenlijk alleen nuttig zijn voor toegewijde software ontwikkelaars.

+

Browser compatibiliteitsproblemen

+

Er zijn variaties in de beschikbare functionaliteit in verschillende browsers. Mozilla Firefox, Microsoft Internet Explorer (MSIE of kortweg IE), Apple Safari en Opera verschillen in gedrag. We zijn van plan om deze afwijkingen te documenteren. Deze problemen kun je verminderen door het gebruik van de verschijnende cross-platform JavaScript APIs. Deze APIs bieden veelgebruikte functionaliteit en verbergen de afwijkingen voor jou.

+

Het proberen van voorbeelden

+

De onderstaande voorbeelden bevatten wat codes. Er zijn vele manieren om deze uit te proberen. Als je al een eigen website hebt, dan kun je deze als nieuwe webpagina's opslaan op jouw website.

+

Als je nog geen eigen website hebt, dan kun je deze voorbeelden opslaan als bestanden op de computer, en deze openen in jouw huidige Web browser. Hierdoor is JavaScript ook zo'n gemakkelijke taal voor beginnende programmeurs. Je hebt geen compiler of ontwikkelomgeving nodig; alles wat je nodig hebt is een browser en jijzelf!

+

Voorbeeld: een muisklik opvangen

+

De details over het afhandelen van events (NL: gebeurtenissen; details zoals event typen, het registreren van verwerkers, doorgifte, enz.) zijn te uitgebreid om in dit simpele voorbeeld te behandelen. Echter, dit voorbeeld kan niet het vangen van een muisklik demonstreren zonder een beetje in te gaan op het gebeurtenissens systeem van JavaScript. Houd echter in het achterhoofd dat dit voorbeeld de volledige details over JavaScript gebeurtenissen weglaat. Als je meer te weten wilt komen naast de beginselen die hier worden beschreven, lees meer over het gebeurtenissen systeem van JavaScript.

+

'Muis' gebeurtenissen zijn een deelverzameling van alle gebeurtenissen die een browser genereert als reactie op acties van de gebruiker. De volgende gebeurtenissen kunnen afgegeven worden als reactie op een muis actie:

+ +

Merk op dat inline event handlers (ingesloten gebeurtenissenverwerkers, oftewel datgene dat toegevoegd is als attribuut voor een HTML element) normaliter met kleine letters geschreven zijn en dat deze in een script altijd met kleine letters geschreven moeten zijn.

+

De meest simpele methode om deze gebeurtenissen af te vangen (in HTML), het registreren van event handlers is door individuele gebeurtenissen als attributen op te geven voor het element. Voorbeeld:

+
  <span onclick="alert('Hallo Wereld!');">Klik Hier</span>
+

De JavaScript code die je wilt uitvoeren kan ingesloten worden als attribuut waarde, of je kunt deze aanroepen als een functie. Deze functie zou dan eerder geregistreerd moeten zijn in een <script> blok op de HTML pagina:

+
<script>
+  function clickHandler() {
+    alert("Hallo, Wereld!");
+  }
+</script>
+<span onclick="clickHandler();">Klik Hier</span>
+

Daarnaast is een gebeurtenisobject beschikbaar waarmee de ontwikkelaar toegang kan verkrijgen tot details van de gebeurtenis, zoals het element dat de gebeurtenis heeft ontvangen, het type van de gebeurtenis en welke muisknop werd ingedrukt. Uitbreidend op het eerdere voorbeeld:

+
<script>
+  function clickHandler(event) {
+    var eType = event.type;
+    /* het volgende stuk is voor compatibiliteit met oude IE versies */
+    /* Standaardbrowsers stellen de 'target' eigenschap in van het 'event' object */
+    /* IE 8 en ouder gebruikt de 'srcElement' eigenschap */
+    var eTarget = event.target || event.srcElement;
+
+    alert( "Opgevangen Gebeurtenis (type=" + eType + ", doel=" + eTarget );
+  }
+</script>
+<span onclick="clickHandler(event);">Klik Hier</span>
+

Naast het registreren voor het ontvangen van gebeurtenissen in jouw HTML code kun je dezelfde attributen voor elke HTMLElement object instellen in de JavaScript code. Het onderstaande voorbeeld creërt een zogenaamde 'span' object, voegt deze toe aan de pagina en registreert tenslotte functies voor het 'span' object waarmee enkele muisgebeurtenissen kunnen worden ontvangen.

+
<body></body>
+<script>
+  function mouseeventHandler(event) {
+    /* het volgende stuk is voor compatibiliteit met oude IE versies */
+    /* IE geeft standaard NIET het event object door. */
+    /* Verkrijg eeb referentie tot de event als het niet gegeven was */
+    if (!event) event = window.event;
+
+    /* verkrijg de gebeurtenis type en doel zoals eerder beschreven */
+    var eType = event.type;
+    var eTarget = event.target || event.srcElement;
+    alert(eType + ' gebeurtenis op element met ID: ' + eTarget.id);
+  }
+
+ function onloadHandler() {
+   /* verkrijg een referentie naar de 'body' element op de pagina */
+   var body = document.body;
+   /* maak een 'span' element aan die aangeklikt moet worden */
+   var span = document.createElement('span');
+   span.id = 'VoorbeeldSpan';
+   span.appendChild(document.createTextNode('Klik Hier!'));
+
+   /* registreer enkele functies op het span object om gebeurtenissen
+      af te handelen. Merk op dat de namen van de events (on...) per se
+      kleingeschreven moeten zijn terwijl de handlers elke naam kunnen
+      aannemen.
+   */
+   span.onmousedown = mouseeventHandler;
+   span.onmouseup = mouseeventHandler;
+   span.onmouseover = mouseeventHandler;
+   span.onmouseout = mouseeventHandler;
+
+   /* weergeef de span element op de pagina */
+   body.appendChild(span);
+}
+
+// doordat we de handler vervangen, en niet aanroepen, hebben we GEEN '()' nodig
+// na de functie naam.
+window.onload = onloadHandler;
+</script>
+

Voorbeeld: een toetsenbord gebeurtenis opvangen

+

Het vangen van een toetsenbordgebeurtenis is vergelijkbaar met het bovenstaande "opvangen van een muisklik" voorbeeld, en maakt gebruik van het gebeurtenissen systeem in JavaScript. Toetsenbord gebeurtenissen worden afgevuurd wanneer een toets van het toetsenbord wordt gebruikt.

+

Het aantal gebeurtenissen die optreden als reactie voor een toetsenbord actie is veel kleiner vergeleken met die voor een muis:

+ +

Bij een keypress gebeurtenis is de Unicode waarde van de ingedrukte toets opgeslagen in óf de keyCode, óf de charCode eigenschap. Als de toets een karakter genereert (bijv. 'a'), dan bevat charCode de code van dat teken, hierbij wordt rekening gehouden met hoofdletters (d.w.z. dat er rekening wordt gehouden of de Shift toets ingedrukt is). In andere gevallen is de code van de ingedrukte toets beschikbaar in keyCode.

+

De meest simpele methode om toetsenbord gebeurtenissen op te vangen is weer doot het registreren van event handlers in HTML. Hierbij wordt weer een individuele gebeurtenis opgegeven als attribuut voor het HTML element:

+
  <input type="text" onkeypress="alert('Hallo Wereld!');">
+
+

Zoals bij muis gebeurtenissen kun je zowel inline JavaScript code gebruiken in het attribuut, of een functie aanroepen die eerder in een <script> block gedefinieërd was:

+
<script>
+  function keypressHandler() {
+    alert("Hallo, Wereld!");
+  }
+</script>
+
+<input onkeypress="keypressHandler();">
+
+

Het opvangen van de gebeurtenis en het aflezen van de ingedrukte toets kan worden gedaan op een soortgelijke manier als bij muis gebeurtenissen:

+
<script>
+  function keypressHandler(evt) {
+      var eType = evt.type; // Zal "keypress" bevatten als event type
+      /* hier zullen we weer een cross-browser methode gebruiken
+         Iedereen gebruikt 'which', behalve IE 8 en ouder, die gebruikt 'keyCode'
+         De voorwaardelijke, ternary operator kan hier goed gebruikt worden */
+      var keyCode = evt.which ? evt.which : evt.keyCode;
+      var eCode = 'keyCode is ' + keyCode;
+      var eChar = 'charCode is ' + String.fromCharCode(keyCode); // of evt.charCode
+      alert("Opgevangen Gebeurtenis (type=" + eType + ", Unicode waarde van toets=" + eCode + ", ASCII waarde=" + eChar + ")");
+   }
+</script>
+<input onkeypress="keypressHandler(event);">
+

Het opvangen van alle toetsen op een pagina kan worden gedaan door het registreren van event handlers op het niveau van het document:

+
<script>
+  document.onkeypress = keypressHandler;
+  document.onkeydown = keypressHandler;
+  document.onkeyup = keypressHandler;
+</script>
+

Hier is een compleet voorbeeld dat het gebruik van toetsenborden gebeurtenissen weergeeft:

+
<!DOCTYPE html>
+<html>
+<head>
+  <script>
+    var metaChar = false;
+    var voorbeeldToets = 16;
+    function keyEvent(event) {
+      var key = event.keyCode || event.which; // alternatief voor ternary - als er geen keyCode is, gebruik which
+      var keychar = String.fromCharCode(key);
+      if (key == voorbeeldToets) {
+        metaChar = true;
+      }
+      if (key != voorbeeldToets) {
+        if (metaChar) {
+          alert("Combinatie met Meta + " + keychar)
+          metaChar = false;
+        } else {
+          alert("Ingedrukte toets: " + key);
+        }
+      }
+    }
+    function metaKeyUp(event) {
+      var key = event.keyCode || event.which;
+      if (key == exampleKey) { metaChar = false; }
+    }
+  </script>
+</head>
+<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)">
+    Druk een willekeurige toets!
+</body>
+</html>
+

Browser bugs and eigenaardigheden

+

De twee beschreven eigenschappen van toetsen gebeurtenissen zijn keyCode en charCode. In simpele termen, keyCode verwijst naar de werkelijke toets dat door de gebruiker ingedrukt werd terwijl charCode de ASCII waarde van de toets weergeeft. Deze twee waarden hoeven niet gelijk te zijn; een kleine letter 'a' en een hoofdletter 'A' hebben dezelfde keyCode omdat de gebruiker dezelfde toets indrukt, maar een andere charCode omdat de resulterende teken verschilt.

+

De manier waarmee verschillende browser met charCode omgaan is niet overal consistent. Als voorbeeld, Internet Explorer en Opera ondersteunen charCode niet. Aan de andere kant geven ze de karakter informatie in keyCode, maar alleen bij de onkeypress event. De keyCode eigenschap levert voor onkeydown and onkeyup events informatie op over de toets. Firefox gebruikt een ander woord, namelijk "which" welke het verschil in de teken kan onderscheiden.

+

Lees in de Mozilla Documentatie over Keyboard Events (en) voor een uitgebreidere behandeling van toetsenbord gebeurtenissen.

+

Voorbeeld: rondslepen van afbeeldingen

+

In het volgende voorbeeld is het mogelijk om een afbeelding in een pagina rond te slepen:

+
<!DOCTYPE html>
+<html>
+<head>
+<style>
+img { position: absolute; }
+</style>
+
+<script>
+// declareer globale variablen die hieronder wordt gebruikt.
+var mouseover, posLinks, posBoven, xCoord, yCoord;
+
+window.onload = function() {
+
+  movMeId = document.getElementById("ImgMov");
+  movMeId.style.top = "80px";
+  movMeId.style.left = "80px";
+
+  document.onmousedown = coordinates;
+  document.onmouseup = mouseup;
+
+  function coordinates(e) {
+    if (e == null) { e = window.event;}
+
+    // e.srcElement bevat het doel element in IE8 en ouder,
+    // e.target wordt gebruikt in standaardbrowsers (inclusief Firefox)
+    // Beide eigenschappen geven het HTML element waarin het event optrad
+
+    var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;
+
+    if (sender.id == "ImgMov") {
+       mouseover = true;
+       posLinks = parseInt(movMeId.style.left);
+       posBoven = parseInt(movMeId.style.top);
+       xCoord = e.clientX;
+       yCoord = e.clientY;
+       document.onmousemove = moveImage;
+       return false;
+    } else {
+       return false;
+    }
+  }
+
+  function moveImage(e) {
+    if (e == null) { e = window.event; }
+    movMeId.style.left = posLinks + e.clientX - xCoord + "px";
+    movMeId.style.top = posBoven + e.clientY - yCoord + "px";
+    return false;
+  }
+
+  function mouseup(e) {
+    // voorkom dat de moveImage functie wordt aangeroepen door de
+    // gebeurtenis registratie te verwijderen.
+    document.onmousemove = null;
+  }
+}
+</script>
+</head>
+
+<body>
+  <img id="ImgMov" src="http://placehold.it/100x100&text=JS" width="64" height="64">
+  <p>Sleep en zet het plaatje op deze pagina neer</p>
+</body>
+
+</html>
+

Voorbeeld: vergroot of verklein objecten

+
+

Voorbeeld waarbij de grootte van een afbeelding wordt gewijzigd (de originele afbeelding wordt niet gewijzigd, enkel hoe deze op de pagina weergeven wordt).

+ 
  <!DOCTYPE html>
+  <html>
+    <head>
+      <style>
+        #resizeImage {
+          margin-left: 100px;
+        }
+      </style>
+      <script>
+      window.onload = function() {
+
+        var resizeId = document.getElementById("resizeImage");
+        var resizeStartCoordsX,
+            resizeStartCoordsY,
+            resizeEndCoordsX,
+            resizeEndCoordsY;
+
+        var resizeEndCoords;
+        var resizing = false;
+
+        document.onmousedown = coordinatesMousedown;
+        document.onmouseup = coordinatesMouseup;
+
+        function coordinatesMousedown(e) {
+          if (e == null) {
+            e = window.event;
+          }
+
+          var element = (typeof( window.event ) != 'undefined' ) ? e.srcElement : e.target;
+
+          if (element.id == "resizeImage") {
+            resizing = true;
+            resizeStartCoordsX = e.clientX;
+            resizeStartCoordsY = e.clientY;
+          }
+          return false;
+        }
+
+        function coordinatesMouseup(e) {
+          if (e == null) {
+            e = window.event;
+          }
+
+          if (resizing === true) {
+            var currentImageWidth = parseInt(resizeId.width);
+            var currentImageHeight = parseInt(resizeId.height);
+
+            resizeEndCoordsX = e.clientX;
+            resizeEndCoordsY = e.clientY;
+
+            resizeId.style.height = currentImageHeight - (resizeStartCoordsY - resizeEndCoordsY) + 'px';
+            resizeId.style.width = currentImageWidth - (resizeStartCoordsX - resizeEndCoordsX) + 'px';
+
+            resizing = false;
+          }
+          return false;
+        }
+      }
+      </script>
+    </head>
+
+    <body>
+      <img id="resizeImage" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png"
+width="64" height="64">
+      <p>Klik op het plaatje en sleep om de grootte te wijzigen.</p>
+    </body>
+
+  </html>
+
+

Voorbeeld: lijnen tekenen

+
<!DOCTYPE html>
+<html>
+<head>
+<script>
+function linedraw(ax,ay,bx,by)
+{
+    if(ay>by)
+    {
+        bx=ax+bx;
+        ax=bx-ax;
+        bx=bx-ax;
+        by=ay+by;
+        ay=by-ay;
+        by=by-ay;
+    }
+    var calc=Math.atan((ay-by)/(bx-ax));
+    calc=calc*180/Math.PI;
+    var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by));
+    document.body.innerHTML += "<div id='line' style='height:" + length + "px;width:1px;background-color:black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc  + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;'></div>"
+}
+</script>
+</head>
+<body onload=linedraw(200,400,500,900);> <!-- Replace with your co-ordinate -->
+</body>
+</html>
+

 

diff --git a/files/nl/conflicting/web/api/document_object_model/index.html b/files/nl/conflicting/web/api/document_object_model/index.html new file mode 100644 index 0000000000..7caa501c32 --- /dev/null +++ b/files/nl/conflicting/web/api/document_object_model/index.html @@ -0,0 +1,409 @@ +--- +title: DOM +slug: DOM +tags: + - DOM +translation_of: Web/API/Document_Object_Model +translation_of_original: DOM +--- +

The Document Object Model (DOM) is a programming interface for HTML, XML and SVG documents. It provides a structured representation of the document (a tree) and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content. The DOM provides a representation of the document as a structured group of nodes and objects that have properties and methods. Nodes can also have event handlers attached to them, and once that event is triggered the event handlers get executed. Essentially, it connects web pages to scripts or programming languages.

+ +

Though often accessed using JavaScript, the DOM itself is not a part of the JavaScript language, and it can be accessed by other languages, though this is much less common.

+ +

An introduction to the DOM is available.

+ +

DOM interfaces

+ +
+ +
+ +

Obsolete DOM interfaces

+ +

The Document Object Model is being highly simplified. In order to achieve this the following interfaces present in the different DOM level 3 or earlier specification have been removed. It is still unclear if some may be reintroduced, but for the moment they have to be considered as obsolete and should be avoided:

+ +
+ +
+ +

HTML interfaces

+ +

A document containing HTML is described using the {{domxref("HTMLDocument")}} interface. Note that the HTML specification also extends the {{domxref("Document")}} interface.

+ +

An HTMLDocument object also gives access to browser features: the tab, or window, in which a page is drawn using the {{domxref("Window")}} interface, the {{domxref("window.style", "Style")}} associated to it (usually CSS), the history of the browser relative to the context, {{domxref("window.history", "History")}} , eventually a {{domxref("Selection")}} done on the document.

+ +

HTML element interfaces

+ +
+ +
+ +

Other interfaces

+ +
+ +
+ +

Obsolete HTML interfaces

+ +
+ +
+ +

SVG interfaces

+ +

SVG element interfaces

+ +
+ +
+ +

SVG data type interfaces

+ +

Here are the DOM API for data types used in the definitions of SVG properties and attributes.

+ +
+

Note: Starting in {{Gecko("5.0")}},the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed like arrays; in addition, they have a length property indicating the number of items in the lists: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}}, and {{domxref("SVGPointList")}}.

+
+ +

Static type

+ +
+ +
+ +

Animated type

+ +
+ +
+ +

SVG Path segment interfaces

+ +
+ +
+ + + +
+ +
+ +

Other SVG interfaces

+ +
+ +
+ +

See also

+ + diff --git a/files/nl/conflicting/web/javascript/reference/global_objects/object/index.html b/files/nl/conflicting/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..8fcfcbfa59 --- /dev/null +++ b/files/nl/conflicting/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,241 @@ +--- +title: Object.prototype +slug: Web/JavaScript/Reference/Global_Objects/Object/prototype +tags: + - JavaScript + - Object + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Object +translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype +--- +
{{JSRef}}
+ +

De Object.prototype eigenschap vertegenwoordigt het {{jsxref("Object")}} prototype object.

+ +

{{js_property_attributes(0, 0, 0)}}

+ +

Beschrijving

+ +

Alle objecten in JavaScript zijn afstammelingen van het {{jsxref("Object")}}; alle objecten erven methode's en eigenschappen van Object.prototype, althans kunnen ze overschreden worden (behalve een Object met een null prototype, i.e Object.create(null)). Bijvoorbeeld, een andere constructors' prototypes overschrijden de constructor eigenschap en voorzien hun eigen  {{jsxref("Object.prototype.toString()", "toString()")}} methode's.

+ +

Veranderingen in het Object prototype object zijn zichtbaar voor alle objecten door prototype chaining, tenzij de eigenschappen en methode's onderworpen door deze veranderingen worden overschreden verderop de prototype chain. Dit voorziet een vrij krachtig althans potentieel gevaarlijk mechanisme om het gedrag van een object te overschrijden of aan te vullen.

+ +

Eigenschappen

+ +
+
{{jsxref("Object.prototype.constructor")}}
+
Beschrijft de functie dat het object's prototype aanmaakt.
+
{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}
+
Wijst aan het object welke was bebruikt als prototype wanneer het object was geinstantieerd.
+
{{jsxref("Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}
+
Laat het toe om een functie te definieeren dat zal worden uitgevoerd wanneer een ongedefinieerd lid van een object word geroepen als een methode. 
+
{{jsxref("Object.prototype.count","Object.prototype.__count__")}} {{obsolete_inline}}
+
Used to return the number of enumerable properties directly on a user-defined object, but has been removed.
+
{{jsxref("Object.prototype.parent","Object.prototype.__parent__")}} {{obsolete_inline}}
+
Used to point to an object's context, but has been removed.
+
+ +

Methode's

+ +
+
{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Associeert een functie met een eigenschap dat, wanneer toegankelijk, een functie uitvoerd en zijn keert zijn return waarde terug.
+
{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Associeert een functie met een eigenschap dat, wanneer gezet, een functie uitvoerd dat de eigenchap veranderd.
+
{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Keert de functie geassocieert met de gespecificieerde eigenschap door de {{jsxref("Object.prototype.__defineGetter__()", "__defineGetter__()")}} methode.
+
{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Keert de functie geassocieert met de gespecificieerde eigenschap door de {{jsxref("Object.prototype.__defineSetter__()", "__defineSetter__()")}} method.
+
{{jsxref("Object.prototype.hasOwnProperty()")}}
+
Keert een boolean terug die aanwijst of een object dat de eigenschap bevat als een directe eigenschap van dat object en niet wordt geerfd door de prototype chain.
+
{{jsxref("Object.prototype.isPrototypeOf()")}}
+
Keert een boolean waarde terug die aanwijst of het object in de prototype chain zit van het object van waaruit deze methode is geroepen.
+
{{jsxref("Object.prototype.propertyIsEnumerable()")}}
+
Keert een boolean waarde terug die aanwijst of de ECMAScript [[Enumerable]] attribute is gezet.
+
{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}
+
Keert een string terug die de bron van een object zijn literal, die het object waarop deze methode word op geroepen represedenteerd; je kan deze waarde gebruiken om een niew object te maken.
+
{{jsxref("Object.prototype.toLocaleString()")}}
+
Roept {{jsxref("Object.toString", "toString()")}}.
+
{{jsxref("Object.prototype.toString()")}}
+
Keert een string representatie terug van het object.
+
{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}
+
Verwijderd een watchpoint van een eigenschap van het object.
+
{{jsxref("Object.prototype.valueOf()")}}
+
Keert een primitive waarde terug van het gespecifieerde object.
+
{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}
+
Voegt een watchpoint toe aan de eigenschap van het object.
+
{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}
+
Used to evaluate a string of JavaScript code in the context of the specified object, but has been removed.
+
+ +

Voorbeelden

+ +

Als het gedrag van bestaande Object.prototype's methode's worden veranderd, overweeg code te injecteren door je uitbreiding in te wikkelen voor of achter de bestaande logica. Bijvoorbeeld, deze (ongeteste) code zal onvoorwaardelijk aangepaste logica uitvoeren vooralleer de ingebouwde logica of anderman's uitbreiding word uitgevoerd.

+ +

Wanneer een functie is geroepen zullen de argumenten worden gehouden in de array-achtige "variable" van de argumenten. Bijvoorbeeld, in de call "myFn(a, b, c)", zullen de argumenten binnenin myFn's lichaam 3 array elementen bevatten die coressponderen tot (a, b, c).  Wanneer prototype's met haken worden bijgewerkt, voer simpelweg deze & de argementen (de call toestand) toe aan het huidig gedrag door apply() te roepen op de functie. Dit patroon can worden gebruikt voor elk prototype, zoals Node.prototype, Function.prototype, etc.

+ +

var current = Object.prototype.valueOf; // Since my property "-prop-value" is cross-cutting and isn't always // on the same prototype chain, I want to modify Object.prototype: Object.prototype.valueOf = function() { if (this.hasOwnProperty("-prop-value") {   return this["-prop-value"];   } else {   // It doesn't look like one of my objects, so let's fall back on   // the default behavior by reproducing the current behavior as best we can.   // The apply behaves like "super" in some other languages.   // Even though valueOf() doesn't take arguments, some other hook may.   return current.apply(this, arguments);   } }

+ +

Doordat JavaScript geen sub-classe object bevat, prototype is een handige workaround om een "base class" object aan te maken van bepaalde functie's die zich gedragen als objecten. Bijvoorbeeld:

+ +
var Person = function() {
+  this.canTalk = true;
+};
+
+Person.prototype.greet = function() {
+  if (this.canTalk) {
+    console.log('Hi, I am ' + this.name);
+  }
+};
+
+var Employee = function(name, title) {
+  Person.call(this);
+  this.name = name;
+  this.title = title;
+};
+
+Employee.prototype = Object.create(Person.prototype);
+Employee.prototype.constructor = Employee;
+
+Employee.prototype.greet = function() {
+  if (this.canTalk) {
+    console.log('Hi, I am ' + this.name + ', the ' + this.title);
+  }
+};
+
+var Customer = function(name) {
+  Person.call(this);
+  this.name = name;
+};
+
+Customer.prototype = Object.create(Person.prototype);
+Customer.prototype.constructor = Customer;
+
+var Mime = function(name) {
+  Person.call(this);
+  this.name = name;
+  this.canTalk = false;
+};
+
+Mime.prototype = Object.create(Person.prototype);
+Mime.prototype.constructor = Mime;
+
+var bob = new Employee('Bob', 'Builder');
+var joe = new Customer('Joe');
+var rg = new Employee('Red Green', 'Handyman');
+var mike = new Customer('Mike');
+var mime = new Mime('Mime');
+
+bob.greet();
+// Hi, I am Bob, the Builder
+
+joe.greet();
+// Hi, I am Joe
+
+rg.greet();
+// Hi, I am Red Green, the Handyman
+
+mike.greet();
+// Hi, I am Mike
+
+mime.greet();
+
+ +

Specificaties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificatieStatusCommentaar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale definitie. Geimplemented in JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.prototype', 'Object.prototype')}}{{Spec2('ESDraft')}} 
+ +

Browser ondersteuning

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
SoortChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basis Ondersteuning{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
SoortAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
+ + + + + + + +
Basis Ondersteuning 
+ 		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ + diff --git a/files/nl/dom/index.html b/files/nl/dom/index.html deleted file mode 100644 index 7caa501c32..0000000000 --- a/files/nl/dom/index.html +++ /dev/null @@ -1,409 +0,0 @@ ---- -title: DOM -slug: DOM -tags: - - DOM -translation_of: Web/API/Document_Object_Model -translation_of_original: DOM ---- -

The Document Object Model (DOM) is a programming interface for HTML, XML and SVG documents. It provides a structured representation of the document (a tree) and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content. The DOM provides a representation of the document as a structured group of nodes and objects that have properties and methods. Nodes can also have event handlers attached to them, and once that event is triggered the event handlers get executed. Essentially, it connects web pages to scripts or programming languages.

- -

Though often accessed using JavaScript, the DOM itself is not a part of the JavaScript language, and it can be accessed by other languages, though this is much less common.

- -

An introduction to the DOM is available.

- -

DOM interfaces

- -
- -
- -

Obsolete DOM interfaces

- -

The Document Object Model is being highly simplified. In order to achieve this the following interfaces present in the different DOM level 3 or earlier specification have been removed. It is still unclear if some may be reintroduced, but for the moment they have to be considered as obsolete and should be avoided:

- -
- -
- -

HTML interfaces

- -

A document containing HTML is described using the {{domxref("HTMLDocument")}} interface. Note that the HTML specification also extends the {{domxref("Document")}} interface.

- -

An HTMLDocument object also gives access to browser features: the tab, or window, in which a page is drawn using the {{domxref("Window")}} interface, the {{domxref("window.style", "Style")}} associated to it (usually CSS), the history of the browser relative to the context, {{domxref("window.history", "History")}} , eventually a {{domxref("Selection")}} done on the document.

- -

HTML element interfaces

- -
- -
- -

Other interfaces

- -
- -
- -

Obsolete HTML interfaces

- -
- -
- -

SVG interfaces

- -

SVG element interfaces

- -
- -
- -

SVG data type interfaces

- -

Here are the DOM API for data types used in the definitions of SVG properties and attributes.

- -
-

Note: Starting in {{Gecko("5.0")}},the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed like arrays; in addition, they have a length property indicating the number of items in the lists: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}}, and {{domxref("SVGPointList")}}.

-
- -

Static type

- -
- -
- -

Animated type

- -
- -
- -

SVG Path segment interfaces

- -
- -
- - - -
- -
- -

Other SVG interfaces

- -
- -
- -

See also

- - diff --git a/files/nl/dom/storage/index.html b/files/nl/dom/storage/index.html deleted file mode 100644 index 310129e321..0000000000 --- a/files/nl/dom/storage/index.html +++ /dev/null @@ -1,298 +0,0 @@ ---- -title: DOM Storage -slug: DOM/Storage -translation_of: Web/API/Web_Storage_API -translation_of_original: Web/Guide/API/DOM/Storage ---- -

Samenvatting

-

DOM Storage is de naam van een set opslag-gerelateerde features voor het eerst geïntroduceerd in de Web Applications 1.0-specificatie en nu afgesplitst in zijn eigen W3C Web Storage-specificatie. DOM Storage is ontworpen met als doel een grotere, beter beveiligde en makkelijker te gebruiken alternatief voor opslaan van informatie dan cookies te zijn. Het is geintroduceerd met Firefox 2 en Safari 4.

-
- Note: DOM Storage is niet hetzelfde als mozStorage (Mozilla's XPCOM interfaces voor SQLite) of Session store API (een XPCOM opslag utility te gebruiken door extensies).
-

Omschrijving

-

Het DOM Storage-mechanisme is een manier om key/value-paren op een veilige manier op te slaan en later ophalen voor gebruik. Het doel van deze toevoeging is om een uitgebreide manier te leveren waardoor het mogelijk wordt om interactieve applicaties te maken (inclusief geavanceerde capaciteiten, zoals het 'offline' kunnen werken voor langere tijd).

-

Op Mozilla-gebaseerde browsers, Internet Explorer 8+, Safari 4+, Chrome en Opera leveren allemaal een werkende implementatie van de DOM Storage-specificatie. (In het geval dat je ook oudere versies van IE ondersteunt, kan het handig zijn om te weten dat er een legacy feature genaamd "userData behavior" in pre-8 versies van IE zit)

-

DOM Storage is handig omdat er geen goede browser-only methode bestaat voor het aanhoudend opslaan van redelijke hoeveelheden data voor een willekeurige tijdsperiode. Browsercookies hebben gelimiteerde capaciteit en geven geen mogelijkheid voor het organiseren van aanhoudende data. Andere methodes (zoals Flash Local Storage) vereisen een externe plugin.

-

Een van de eerste publieke applicaties die gebruik maakt van de nieuwe DOM Storage-functionalitiet (naast Internet Explorer's userData Behavior) was halfnote (een notitieapplicatie) geschreven door Aaron Boodman. In zijn applicatie, sloeg Aaron notities zowel op door middel van een server (als een internetverbinding beschikbaar was) en een lokale dataopslag. Dit maakte het voor de gebruiker mogelijk om veilig opgeslagen notities te maken met een sporadische internetverbinding.

-

Ondanks dat het concept, en implementatie, in halfnote redelijk simpel was, laat de creatie zien wat de mogelijkheden zijn voor een nieuw soort webapplicaties die zowel online als offline bruikbaar zijn.

-

Referentie

-

Het hierop volgende zijn globale objecten die bestaan als een property van elk window object. Dit betekent dat ze aangesproken kunnen worden als sessionStorage of window.sessionStorage. (Dit is belangrijk omdat je hierdoor ze kan gebruiken in IFrames om extra data op te slaan, aan te spreken, buiten wat er direct beschikbaar is in je eigen pagina.)

-

Storage

-

Dit is een constructor (Storage) voor alle Storage instanties (sessionStorage en globalStorage[location.hostname]). Het zetten van Storage.prototype.removeKey = function(key){ this.removeItem(this.key(key)) } zou zowel localStorage.removeKey en sessionStorage.removeKey als zodanig veranderen.

-

globalStorage items zijn geen instanties van Storage, maar zijn instanties van StorageObsolete.

-

Storage is gedefineerd door de WhatWG Storage Interface als het volgende:

-
interface Storage {
-  readonly attribute unsigned long length;
-  [IndexGetter] DOMString key(in unsigned long index);
-  [NameGetter] DOMString getItem(in DOMString key);
-  [NameSetter] void setItem(in DOMString key, in DOMString data);
-  [NameDeleter] void removeItem(in DOMString key);
-  void clear();
-};
-
-
- Note: Ookal kan je de waardes lezen en schrijven door de standaard JavaScript property access methode, het gebruik van de getItem en setItem methodes wordt aangeraden.
-
- Note: Onthoud dat alles dat je opslaat via een store beschreven op deze pagina wordt omgezet naar een string via zijn .toString methode voordat het wordt opgeslagen. Een gewoon object opslaan resulteert dus in een string "[object Object]" dat wordt opgeslagen, in plaats van het object of zijn JSON-representatie. Het gebruik van native JSON parsing en serializatie methodes geleverd door de browser is een goede en veelvuldig gebruikte manier om objecten in string formaat op te slaan.
-

sessionStorage

-

Dit is een globaal object (sessionStorage) dat een opslagruimte biedt gedurende de duur van paginasessie. Een paginasessie duurt zolang de browser open is en overleeft het herladen van de pagina en paginarestoraties. Het openen van een pagina in een nieuwe tab of window zorgt ervoor dat een nieuwe sessie wordt gestart.

-
// Sla data op in de huidige sessie store
-sessionStorage.setItem("username", "John");
-
-// Spreek de opgeslagen data aan
-alert( "username = " + sessionStorage.getItem("username"));
-
-

Het sessionStorage object is het handigst voor het bijhouden van tijdelijke data die behouden moet blijven als de pagina per ongeluk wordt herladen.

-

{{ fx_minversion_note("3.5", "Voor Firefox 3.5, werd sessionStorage data niet automatisch hersteld van een browsercrash. Startend vanaf Firefox 3.5, werkt dit zoals per de specificatie.") }}

-

Voorbeelden:

-

Automatisch opslaan van de inhoud van een tekstveld en als de browser per ongeluk herladen wordt, het herstellen van de inhoud van het tekstveld, zodat geen tekst verloren gaat.

-
 // Haal het tekstveld op dat we gaan volgen
- var field = document.getElementById("field");
-
- // Kijk of er een autosave waarde is
- // (Dit gebeurt alleen als de pagina per ongeluk wordt herladen)
- if ( sessionStorage.getItem("autosave")) {
-    // Herstel de inhoud van het tekstveld
-    field.value = sessionStorage.getItem("autosave");
- }
-
- // Bekijk de inhoud van het tekstveld iedere seconde
- setInterval(function(){
-    // En sla het resultaat op in het sessie storage object
-    sessionStorage.setItem("autosave", field.value);
- }, 1000);
-
-

Meer informatie:

- -

localStorage

-

localStorage is hetzelfde als {{ Anch("sessionStorage") }} met dezelfde same-origin regels toegepast, maar is vasthoudend. localStorage werd geintroduceerd in Firefox 3.5.

-
- Note: Als de browser in prive browsing modus gaat, wordt er een nieuwe, tijdelijke database aangemaakt om lokale dat in op te slaan. Deze database wordt geleegd en weggegooid als prive browsing modus wordt uitgezet.
-

Compatibility

-

Storage objecten zijn een recente toevoeging aan de standaard. Hierdoor is het mogelijk dat ze niet aanwezig zijn in alle browsers. Je kan hier omheen werken door het toevoegen van en van de volgende twee stukken code aan het begin van je scripts. Dit maakt het gebruik van het localStorage object mogelijk in implementaties die het niet native ondersteunen.

-

Dit algoritme is een exacte imitatie van het localStorage object, maar maakt gebruik van cookies.

-
if (!window.localStorage) {
-  Object.defineProperty(window, "localStorage", new (function () {
-    var aKeys = [], oStorage = {};
-    Object.defineProperty(oStorage, "getItem", {
-      value: function (sKey) { return sKey ? this[sKey] : null; },
-      writable: false,
-      configurable: false,
-      enumerable: false
-    });
-    Object.defineProperty(oStorage, "key", {
-      value: function (nKeyId) { return aKeys[nKeyId]; },
-      writable: false,
-      configurable: false,
-      enumerable: false
-    });
-    Object.defineProperty(oStorage, "setItem", {
-      value: function (sKey, sValue) {
-        if(!sKey) { return; }
-        document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
-      },
-      writable: false,
-      configurable: false,
-      enumerable: false
-    });
-    Object.defineProperty(oStorage, "length", {
-      get: function () { return aKeys.length; },
-      configurable: false,
-      enumerable: false
-    });
-    Object.defineProperty(oStorage, "removeItem", {
-      value: function (sKey) {
-        if(!sKey) { return; }
-        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
-      },
-      writable: false,
-      configurable: false,
-      enumerable: false
-    });
-    this.get = function () {
-      var iThisIndx;
-      for (var sKey in oStorage) {
-        iThisIndx = aKeys.indexOf(sKey);
-        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
-        else { aKeys.splice(iThisIndx, 1); }
-        delete oStorage[sKey];
-      }
-      for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
-      for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) {
-        aCouple = aCouples[nIdx].split(/\s*=\s*/);
-        if (aCouple.length > 1) {
-          oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
-          aKeys.push(iKey);
-        }
-      }
-      return oStorage;
-    };
-    this.configurable = false;
-    this.enumerable = true;
-  })());
-}
-
-
- Note: De maximum grootte van de data dat kan worden opgeslagen is zeer beperkt door het gebruik van cookies.  Met dit algoritme gebruik de functies localStorage.setItem() en localStorage.removeItem() om een key toe te voegen, te veranderen of te verwijderen. Het gebruik van de methodes localStorage.yourKey = yourValue; en delete localStorage.yourKey; om een key te zetten en te verwijderen is niet een veilige manier met deze code. Je kan ook de naam veranderen en het alleen gebruiken om een documents cookies te beheren onafhankelijk van het localStorage object. Door het aanpassen van de  string "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" naar: "; path=/" (en het aanpassen van de naam) wordt dit een sessionStorage polyfill in plaat van een localStorage polyfill.
-

Hier is nog een, minder precieze, imitatie van het localStorage object. Het is simpeler dan de vorige, maar is compatible met oudere browsers, zoals pre-8 versie van IE (werkend getest tot Internet Explorer 6). Het maakt ook gebruik van cookies.

-
if (!window.localStorage) {
-  window.localStorage = {
-    getItem: function (sKey) {
-      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
-      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
-    },
-    key: function (nKeyId) {
-      return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
-    },
-    setItem: function (sKey, sValue) {
-      if(!sKey) { return; }
-      document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
-      this.length = document.cookie.match(/\=/g).length;
-    },
-    length: 0,
-    removeItem: function (sKey) {
-      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
-      document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
-      this.length--;
-    },
-    hasOwnProperty: function (sKey) {
-      return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
-    }
-  };
-  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
-}
-
-
- Note:  De maximum grootte van de data dat kan worden opgeslagen is zeer beperkt door het gebruik van cookies. Maak bij dit algoritme gebruik van de functies localStorage.getItem(), localStorage.setItem() and localStorage.removeItem() om een key te krijgen, veranderen of verwijderen. Het gebruik van de methode localStorage.yourKey om een key te krijgen veranderen of verwijderen is niet toegestaan bij deze code. Je kan ook de naam veranderen en het alleen gebruiken om een documents cookies te beheren onafhankelijk van het localStorage object. Door het aanpassen van de  string "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" into: "; path=/"  (en het aanpassen van de naam) wordt dit een sessionStorage polyfill in plaat van een localStorage polyfill.
-

Compatibility en de relatie met globalStorage

-

localStorage is hetzelfde als globalStorage[location.hostname], met de uitzondering dat deze gescoped is naar een HTML5 origin (scheme + hostname + non-standard port) en dat localStorage een instantie is van Storage in tegenstelling tot globalStorage[location.hostname] wat een instantie is van StorageObsolete welke hieronder wordt behandeld. Bijvoorbeeld, http://example.com is niet bereikbaar voor het localStorage object als https://example.com maar ze kunnen hetzelfde globalStorage item aanspreken. localStorage is een standaard interface terwijl globalStorage een non-standaard is, dus dien je niet er van uit te gaan dat deze beschikbaar is.

-

Merk op dat het zetten van een property op globalStorage[location.hostname] deze niet zet op localStorage en dat het uitbreiden van Storage.prototype geen effect heeft op globalStorage items, alleen het uitbreiden van StorageObsolete.prototype werkt.

-

globalStorage

-
- {{ Non-standard_header }}{{ obsolete_header("13.0") }}
-

globalStorage is verouderd sinds Gecko 1.9.1 (Firefox 3.5) en niet meer ondersteund sinds Gecko 13 (Firefox 13). Gebruik {{ Anch("localStorage") }} ter vervanging. Deze voorgestelde specificatie is verwijderd van de HTML5 specificatie ten gunste van {{ Anch("localStorage") }}, wat geimplementeerd is in Firefox 3.5. Dit is een  globaal object (globalStorage) dat meerdere prive opslag ruimtes bijhoud die gebruikt kunnen worden om data over een langere periode op te slaan (bijv. gedurende meerdere pagina en browser sessies).

-
- Note: globalStorage is niet een Storage instantie, maar een StorageList instantie dat StorageObsolete instanties bevat.
-
// Sla data op dat alleen scripts op het mozilla.org domein kunnen aanspreken
-globalStorage['mozilla.org'].setItem("snippet", "<b>Hello</b>, how are you?");
-
-

Specifiek, levert het globalStorage object toegang tot een aantal verschillende opslag objecten waar data in kan worden opgeslagen. Bijvoorbeeld, als we een web pagina maakten dat globalStorage gebruikte op dit domein (developer.mozilla.org) dan hadden we de volgende opslag object tot onze beschikking:

- -

Voorbeelden:

-

Elk van deze voorbeelden vereist dat je een script stopt (met de volgende code) in elke pagina waar je het resultaat wilt zien.

-

Onthoud een gebruikers gebruikersnaam voor het specifieke sub-domein dat wordt bezocht:

-
 globalStorage['developer.mozilla.org'].setItem("username", "John");
-
-

Houd bij hoe vaak een gebruiker een pagina bezoekt op je domein:

-
 // parseInt moet gebruikt worden omdat alle dat als string wordt opgeslagen
- globalStorage['mozilla.org'].setItem("visits", parseInt(globalStorage['mozilla.org'].getItem("visits") || 0 ) + 1);
-
-

Opslag locatie en weggooien van de data

-

In Firefox de DOM storage data wordt opgeslagen in het webappsstore.sqlite bestand in de profiel folder (er is ook een chromeappsstore.sqlite bestand dat gebruikt wordt om de browsers eigen data op te slaan, met name voor de start pagina - about:home, maar mogelijk ook voor andere interne pagina met "about:" URLs).

- -

Zie ook clearing offline resources cache.

-

Meer informatie

- -

Voorbeelden

- -

Browser compatibility

-

{{ CompatibilityTable() }}

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
globalStorage{{ CompatNo }}2-13{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
-
-
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}iOS 3.2
-
-

All browsers have varying capacity levels for both local- and sessionStorage. Here is a detailed rundown of all the storage capacities for various browsers.

-
-

Note: since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional clean up, at the behest of the OS, typically if space is short.

-
- - -
- {{ HTML5ArticleTOC }}
diff --git a/files/nl/firefox_1.5_voor_ontwikkelaars/index.html b/files/nl/firefox_1.5_voor_ontwikkelaars/index.html deleted file mode 100644 index ad0bcb92a1..0000000000 --- a/files/nl/firefox_1.5_voor_ontwikkelaars/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: Firefox 1.5 voor ontwikkelaars -slug: Firefox_1.5_voor_ontwikkelaars -tags: - - CSS - - DOM - - Extensions - - HTML - - JavaScript - - RDF - - SVG - - Web Development - - Web Standards - - XML - - XML Web Services - - XSLT - - XUL -translation_of: Mozilla/Firefox/Releases/1.5 ---- -
{{FirefoxSidebar}}

 

- -

Firefox 1.5 RC 3 (Deer Park)

- -

De laatste uitgave in de Firefox 1.5 product ontwikkelings cyclus, gericht op website-ontwikkelaren en extensie auteurs, Firefox 1.5 RC 3, gebaseerd op de Gecko 1.8 processor, verbetert al het beste in standaarden ondersteuning, en zorgt voor nieuwe capaciteiten om de nieuwe generatie web-applicaties mogelijk te maken. Firefox 1.5 zal verbeterde ondersteuning voor CSS2 en CSS3, APIs voor scriptbare en programeerbare 2D beelden dmv. SVG 1.1 en <canvas>, XForms en XML events, samen met nog veel meer DHTML, JavaScript en DOM verbeteringen.

- -

Firefox 1.5 RC 3 is beschikbaar op: http://www.mozilla.org/projects/firefox/

- -

Ontwikkelaar Hulpmiddelen

- -

Vescheidene hulpmiddelen en browser extensies zijn beschikbaar om ontwikkelaars te helpen om Firefox 1.5 te ondersteunen.

- - - -

Let op: Sommige extensies, zoals JavaScript Debugger (Venkman), ondersteunen Firefox 1.5 Beta niet op dit moment en worden automatisch buiten werking gezet.

- -

Overzicht

- -

Sommige van de nieuwe functies in Firefox 1.5:

- -

Web site en applicatie ontwikkelaars

- -

Zie Wat Is Er Nieuw In Deer Park Alpha

- -
-
SVG In XHTML Introductie 
-
Leer hoe je SVG in XHTML pagina's gebruikt en hoe je JavaScript en CSS gebruikt om het plaatje op dezelfde manier te manipuleren als dat je zou doen met normaal XHTML.
-
- -
-
Beelden maken met Canvas 
-
Leer over de nieuwe <canvas> tag en hoe je grafieken en andere objecten tekent in Firefox.
-
- -
-
CSS3 Columns 
-
Leer over de nieuwe ondersteuning voor automatisch multi-kolom text layout zoals voorgesteld voor CSS3.
-
- -
-
Gebruik maken van Firefox 1.5 caching 
-
Leer over bfcache en hoe het voor- en achteruit navigeren sneller maakt.
-
- -

XUL en Extensie Ontwikkelaars

- -
-
Een Extensie Bouwen 
-
Dit document zal je leiden door de stappen die nodig zijn om een basis extensie te bouwen voor Firefox. Zie ook: nog een document op het MozillaZine knowledge base (Engels), dat demonstreert hoe je de nieuwe functies van de Extensie Manager in Firefox 1.5 dat het maken van een nieuwe extensie nog makkelijker maakt.
-
- -
-
XPCNativeWrapper 
-
XPCNativeWrapper is een manier om een object zo in te pakken dat het velig is om toegang tot te krijgen van bevoorrecht code. Het kan gebruikt worden in alle Firefox versies, al is het gedrag iets veranderd beginnend vanaf Firefox 1.5 (Gecko 1.8).
-
- -
-
Voorkeuren Systeem 
-
Leer meer over de nieuwe 'widgets' die je makkelijker en met minder JavaScript code een Opties scherm kan laten maken.
-
- -
-
Internationale Tekens in XUL JavaScript 
-
XUL JavaScript bestanden kunnen nu niet-ASCII characters bevatten.
-
- -
-
Tree API veranderingen 
-
De interface voor de toegang tot XUL <tree> elementen zijn veranderd. Zie http://mozdev.org/pipermail/project_...il/002131.html (Engels) voor een lijst van veranderingen.
-
- -

Nieuwe Eindgebruiker Functies

- -

Gebruiker Ervaring

- - - -

Veiligheid en Privacy

- - - -

Ondersteuning voor open Web standaarden

- -

Firefox support for Web standards continues to lead the industry with consistent cross-platform implementations for:

- -

Firefox ondersteuning voor Web standaarden zet voort om de industrie te leiden met consistente multi-platform implementaties voor:

- - - -

Firefox 1.5 supports the following data transport protocols (HTTP, FTP, SSL, TLS, and others), multilingual character data (Unicode), graphics (GIF, JPEG, PNG, SVG, and others) and the latest version of the world's most popular scripting language, JavaScript 1.6.

- -

Firefox 1.5 ondersteunt data transport protocols (HTTP, FTP, SSL, TLS en meer), meertalig teken data (Unicode), grafische media (GIF, JPEG, PNG, SVG en meer) en de laatste versie van de meest populaire code taal, JavaScript 1.6.

- -

Veranderingen sinds Firefox 1.0

- -

Many changes have been introduced into Firefox since it was first released on November 9, 2004. Firefox has progressed with many new features and bug fixes. The Deer Park and Firefox release-notes are excellent sources of information about changes in each release of Firefox.

- -

Veel veranderingen zijn geintroduceerd in Firefox sinds het voor het eerst publiekelijk is uitgegeven op 9 november, 2004. Firefox is verbeterd met veel nieuwe functies en bug fixes. De Deer Park en Firefox uitgave details zijn een uitstekende bron van informatie over de veranderingen in elke uitgave van Firefox.

- - - -

{{ languages( { "en": "en/Firefox_1.5_for_Developers", "es": "es/Firefox_1.5_para_Desarrolladores", "fr": "fr/Firefox_1.5_pour_les_d\u00e9veloppeurs", "ja": "ja/Firefox_1.5_for_Developers", "pl": "pl/Firefox_1.5_dla_programist\u00f3w", "pt": "pt/Firefox_1.5_para_Desenvolvedores" } ) }}

diff --git a/files/nl/gebruik_maken_van_dom_workers/index.html b/files/nl/gebruik_maken_van_dom_workers/index.html deleted file mode 100644 index cd5c32adaa..0000000000 --- a/files/nl/gebruik_maken_van_dom_workers/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Gebruik DOM workers -slug: Gebruik_maken_van_DOM_workers -tags: - - HeeftTaalgebruikHerzieningNodig -translation_of: Web/API/Web_Workers_API/Using_web_workers ---- -

{{ fx_minversion_header(3.1) }}

-

{{ draft() }}

-
- Let op: De specificaties voor de DOM workers zijn nog niet volledig.
-

DOM workers maken het mogelijk voor web content om scripts in achtergrond threads uit te voeren. Zodra een worker aangemaakt is kan deze thread berichten sturen door middel van een event handler, die gespecificeerd is door de maker.

-

Een worker thread kan opdrachten uitvoeren zonder de gebruikers interface te storen.

-
- Notitie: Zoals altijd, background threads — inclusief workers — kunnen geen invloed uit oefenen op de DOM. Als er acties uitgevoerd moeten worden vanuit de background thread, moeten dezen eerst terug gestuurd worden naar de oorsprongkelijke maker (main thread).
-

Het maken van een worker

-

Het maken van een nieuwe worker is simpel. Alles wat je hoeft te doen is de Worker() constructor op te roepen, opgeven van het script dat uitgevoerd moet worden in de background thread. Als je wenst notificaties te ontvangen van de worker, kun je de worker's onmessage property wijzigen naar een event handler functie.

-
var myWorker = new Worker('my_worker.js');
-myWorker.onmessage = function(event) {
-  print("Called back by the worker!\n");
-};
-

Regel 1 in dit voorbeeld maakt en start het uitvoeren van een worker thread. Regel 2 zet de onmessage handler voor de worker naar een functie, dat opgeroepen kan worden als de worker zijn eigen postMessage() functie oproept.

-

Zie ook

- diff --git a/files/nl/glossary/abstractie/index.html b/files/nl/glossary/abstractie/index.html deleted file mode 100644 index e89972a444..0000000000 --- a/files/nl/glossary/abstractie/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Abstractie -slug: Glossary/Abstractie -tags: - - Abstractie - - Coderen - - CodingScripting - - Programmeertaal - - woordenlijst -translation_of: Glossary/Abstraction ---- -

Abstractie in {{Glossary("computerprogrammeren")}} is een manier om complixiteit te verminderen en efficiënt design en efficiënte implementatie mogelijk te maken. Het verstopt de technische complexiteit van systemen achter simpelere {{Glossary("API", "API's")}}.

- -

Meer informatie

- -

Algemene kennis

- - diff --git a/files/nl/glossary/abstraction/index.html b/files/nl/glossary/abstraction/index.html new file mode 100644 index 0000000000..e89972a444 --- /dev/null +++ b/files/nl/glossary/abstraction/index.html @@ -0,0 +1,20 @@ +--- +title: Abstractie +slug: Glossary/Abstractie +tags: + - Abstractie + - Coderen + - CodingScripting + - Programmeertaal + - woordenlijst +translation_of: Glossary/Abstraction +--- +

Abstractie in {{Glossary("computerprogrammeren")}} is een manier om complixiteit te verminderen en efficiënt design en efficiënte implementatie mogelijk te maken. Het verstopt de technische complexiteit van systemen achter simpelere {{Glossary("API", "API's")}}.

+ +

Meer informatie

+ +

Algemene kennis

+ + diff --git a/files/nl/glossary/accessibility/index.html b/files/nl/glossary/accessibility/index.html new file mode 100644 index 0000000000..11e4ff6c7c --- /dev/null +++ b/files/nl/glossary/accessibility/index.html @@ -0,0 +1,32 @@ +--- +title: Toegankelijkheid +slug: Glossary/Toegankelijkheid +tags: + - Toegankelijkheid + - woordenlijst +translation_of: Glossary/Accessibility +--- +

Webtoegankelijkheid (A11Y) verwijst naar optimale werkwijzen om een website gebruiksvriendelijk te houden ondanks fysieke of technische beperkingen. Webtoegankelijkheid is formeel gedefinieerd en besproken op de {{Glossary("W3C")}} door het {{Glossary("WAI","Web Accessibility Initiative")}} (WAI).

+ +

Meer informatie

+ +

Algemene kennis

+ + + +

Leer over webtoegankelijkheid

+ + + +

Technische referentie

+ + diff --git a/files/nl/glossary/asynchronous/index.html b/files/nl/glossary/asynchronous/index.html new file mode 100644 index 0000000000..2c3e490748 --- /dev/null +++ b/files/nl/glossary/asynchronous/index.html @@ -0,0 +1,25 @@ +--- +title: Asynchroon +slug: Glossary/Asynchroon +tags: + - Web + - WebMechanics + - woordenlijst +translation_of: Glossary/Asynchronous +--- +

 

+ +

Asynchroon verwijst naar een communicatieomgeving waar beide partijen berichten sturen en verwerken wanneer het handig of mogelijk is in plaats van onmiddellijk.

+ +

Het kan gebruikt worden om een menselijke communicatieomgeving zoals e-mail — de zender verstuurt een e-mail en de ontvanger zal antwoorden wanneer op een gepast moment; ze moeten niet onmiddellijk antwoorden.

+ +

Het kan ook gebruikt worden om een programmatorische communicatieomgeving te beschrijven. Bijvoorbeeld {{domxref("Ajax")}} is een asynchroon mechanisme om kleine stukjes data te verzoeken via HTTP; het resultaat wordt verstuurd wanneer het antwoord volledig is, niet onmiddellijk.

+ +

Meer informatie

+ +

Technische referentie

+ + diff --git a/files/nl/glossary/asynchroon/index.html b/files/nl/glossary/asynchroon/index.html deleted file mode 100644 index 2c3e490748..0000000000 --- a/files/nl/glossary/asynchroon/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Asynchroon -slug: Glossary/Asynchroon -tags: - - Web - - WebMechanics - - woordenlijst -translation_of: Glossary/Asynchronous ---- -

 

- -

Asynchroon verwijst naar een communicatieomgeving waar beide partijen berichten sturen en verwerken wanneer het handig of mogelijk is in plaats van onmiddellijk.

- -

Het kan gebruikt worden om een menselijke communicatieomgeving zoals e-mail — de zender verstuurt een e-mail en de ontvanger zal antwoorden wanneer op een gepast moment; ze moeten niet onmiddellijk antwoorden.

- -

Het kan ook gebruikt worden om een programmatorische communicatieomgeving te beschrijven. Bijvoorbeeld {{domxref("Ajax")}} is een asynchroon mechanisme om kleine stukjes data te verzoeken via HTTP; het resultaat wordt verstuurd wanneer het antwoord volledig is, niet onmiddellijk.

- -

Meer informatie

- -

Technische referentie

- - diff --git a/files/nl/glossary/empty_element/index.html b/files/nl/glossary/empty_element/index.html new file mode 100644 index 0000000000..0293d5b811 --- /dev/null +++ b/files/nl/glossary/empty_element/index.html @@ -0,0 +1,34 @@ +--- +title: Leeg element +slug: Glossary/Leeg_element +tags: + - CodingScripting + - Gemiddeld niveau + - Woordenboek +translation_of: Glossary/Empty_element +--- +

Een leeg element is een {{Glossary("element")}} van HTML, SVG of MathML dat geen childnode kan bevatten (geneste elementen of tekstnodes).

+ +

De specificaties voor HTML, SVG en MathML definiëren heel nauwkeurig wat elk element kan bevatten. Vele combinaties hebben geen semantische betekenis, bijvoorbeeld een {{HTMLElement("audio")}}-element dat is genest in een {{HTMLElement("hr")}}-element.

+ +

In HTML is het gebruik van een sluitlabel op een leeg element over het algemeen ongeldig. <input type="text"></input> is bijvoorbeeld ongeldige HTML.

+ +

In HTML bestaan de volgende lege elementen:

+ + diff --git a/files/nl/glossary/keyword/index.html b/files/nl/glossary/keyword/index.html new file mode 100644 index 0000000000..45d30d453a --- /dev/null +++ b/files/nl/glossary/keyword/index.html @@ -0,0 +1,21 @@ +--- +title: Sleutelwoord +slug: Glossary/Sleutelwoord +tags: + - Sleutelwoord + - Sleutelwoord zoeken + - woordenlijst + - zoeken +translation_of: Glossary/Keyword +--- +

Een sleutelwoord is een woord dat of zin die inhoud beschrijft. Online sleutelwoorden worden gebruikt als zoekopdracht voor zoekmachines of als woorden om inhoud op websites te identificeren.

+ +

Wanneer u een zoekmachine gebruikt, gebruikt u sleutelwoorden om te specificeren waar u naar op zoek bent, en de zoekmachine geeft relevante webpagina's terug. Probeer specifiekere sleutelwoorden te gebruiken voor nauwkeurigere resultaten, zoals "Blauwe Mustang GTO" in plaats van alleen "Mustang". Webpagina's gebruiken ook sleutelwoorden in een metatag (in de {{htmlelement("head")}}-sectie) om paginainhoud te beschrijven, zodat zoekmachines webpagina's  beter kunnen identificeren en organiseren. 

+ +

Meer informatie

+ +

Algemene kennis

+ + diff --git a/files/nl/glossary/leeg_element/index.html b/files/nl/glossary/leeg_element/index.html deleted file mode 100644 index 0293d5b811..0000000000 --- a/files/nl/glossary/leeg_element/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Leeg element -slug: Glossary/Leeg_element -tags: - - CodingScripting - - Gemiddeld niveau - - Woordenboek -translation_of: Glossary/Empty_element ---- -

Een leeg element is een {{Glossary("element")}} van HTML, SVG of MathML dat geen childnode kan bevatten (geneste elementen of tekstnodes).

- -

De specificaties voor HTML, SVG en MathML definiëren heel nauwkeurig wat elk element kan bevatten. Vele combinaties hebben geen semantische betekenis, bijvoorbeeld een {{HTMLElement("audio")}}-element dat is genest in een {{HTMLElement("hr")}}-element.

- -

In HTML is het gebruik van een sluitlabel op een leeg element over het algemeen ongeldig. <input type="text"></input> is bijvoorbeeld ongeldige HTML.

- -

In HTML bestaan de volgende lege elementen:

- - diff --git a/files/nl/glossary/sleutelwoord/index.html b/files/nl/glossary/sleutelwoord/index.html deleted file mode 100644 index 45d30d453a..0000000000 --- a/files/nl/glossary/sleutelwoord/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Sleutelwoord -slug: Glossary/Sleutelwoord -tags: - - Sleutelwoord - - Sleutelwoord zoeken - - woordenlijst - - zoeken -translation_of: Glossary/Keyword ---- -

Een sleutelwoord is een woord dat of zin die inhoud beschrijft. Online sleutelwoorden worden gebruikt als zoekopdracht voor zoekmachines of als woorden om inhoud op websites te identificeren.

- -

Wanneer u een zoekmachine gebruikt, gebruikt u sleutelwoorden om te specificeren waar u naar op zoek bent, en de zoekmachine geeft relevante webpagina's terug. Probeer specifiekere sleutelwoorden te gebruiken voor nauwkeurigere resultaten, zoals "Blauwe Mustang GTO" in plaats van alleen "Mustang". Webpagina's gebruiken ook sleutelwoorden in een metatag (in de {{htmlelement("head")}}-sectie) om paginainhoud te beschrijven, zodat zoekmachines webpagina's  beter kunnen identificeren en organiseren. 

- -

Meer informatie

- -

Algemene kennis

- - diff --git a/files/nl/glossary/ssl/index.html b/files/nl/glossary/ssl/index.html new file mode 100644 index 0000000000..579de9153f --- /dev/null +++ b/files/nl/glossary/ssl/index.html @@ -0,0 +1,19 @@ +--- +title: SSL +slug: Glossary/SSL_Woordenlijst +translation_of: Glossary/SSL +--- +

SSL (Secure Sockets Layer) is een standaard protocol dat verzekert dat de communicatie tussen twee computerprogramma's vertrouwelijk en beveiligd is (berichten kunnen gelezen noch gewijzigd worden door buitenstaanders). Het is de basis voor het {{Glossary("TLS")}} protocol.

+ +

Meer informatie

+ +

Algemene kennis

+ +

{{Interwiki("wikipedia", "Transport Layer Security")}} on Wikipedia

+ +

Zie ook

+ + diff --git a/files/nl/glossary/ssl_woordenlijst/index.html b/files/nl/glossary/ssl_woordenlijst/index.html deleted file mode 100644 index 579de9153f..0000000000 --- a/files/nl/glossary/ssl_woordenlijst/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: SSL -slug: Glossary/SSL_Woordenlijst -translation_of: Glossary/SSL ---- -

SSL (Secure Sockets Layer) is een standaard protocol dat verzekert dat de communicatie tussen twee computerprogramma's vertrouwelijk en beveiligd is (berichten kunnen gelezen noch gewijzigd worden door buitenstaanders). Het is de basis voor het {{Glossary("TLS")}} protocol.

- -

Meer informatie

- -

Algemene kennis

- -

{{Interwiki("wikipedia", "Transport Layer Security")}} on Wikipedia

- -

Zie ook

- - diff --git a/files/nl/glossary/toegankelijkheid/index.html b/files/nl/glossary/toegankelijkheid/index.html deleted file mode 100644 index 11e4ff6c7c..0000000000 --- a/files/nl/glossary/toegankelijkheid/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Toegankelijkheid -slug: Glossary/Toegankelijkheid -tags: - - Toegankelijkheid - - woordenlijst -translation_of: Glossary/Accessibility ---- -

Webtoegankelijkheid (A11Y) verwijst naar optimale werkwijzen om een website gebruiksvriendelijk te houden ondanks fysieke of technische beperkingen. Webtoegankelijkheid is formeel gedefinieerd en besproken op de {{Glossary("W3C")}} door het {{Glossary("WAI","Web Accessibility Initiative")}} (WAI).

- -

Meer informatie

- -

Algemene kennis

- - - -

Leer over webtoegankelijkheid

- - - -

Technische referentie

- - diff --git a/files/nl/glossary/truthy/index.html b/files/nl/glossary/truthy/index.html new file mode 100644 index 0000000000..a99021a002 --- /dev/null +++ b/files/nl/glossary/truthy/index.html @@ -0,0 +1,26 @@ +--- +title: Waarachtig ("Truthy") +slug: Glossary/Waarachtig +translation_of: Glossary/Truthy +--- +

In {{Glossary("JavaScript")}}, is een waarachtige waarde (truthy value) een waarde welke vertaalbaar is naar true wanneer deze geevalueerd wordt in een  {{Glossary("Boolean")}} context. Alle waarden zijn waarachtig, tenzij deze worden gedefinieerd als foutief  {{Glossary("Falsy", "falsy")}} (bijv., met uitzondering van false, 0, "", null, undefined, and NaN).

+ +

{{Glossary("JavaScript")}} gebruikt type {{Glossary("Type_Conversion", "coercion")}} in een Boolean context.

+ +

Voorbeelden van waarachtige waarden/ "truthy values" in JavaScript (die vertaalbaar zijn naar true en dus het  if blok zullen doen uitvoeren):

+ +
if (true)
+if ({})
+if ([])
+if (42)
+if ("foo")
+if (new Date())
+
+ +

See also

+ + diff --git a/files/nl/glossary/waarachtig/index.html b/files/nl/glossary/waarachtig/index.html deleted file mode 100644 index a99021a002..0000000000 --- a/files/nl/glossary/waarachtig/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Waarachtig ("Truthy") -slug: Glossary/Waarachtig -translation_of: Glossary/Truthy ---- -

In {{Glossary("JavaScript")}}, is een waarachtige waarde (truthy value) een waarde welke vertaalbaar is naar true wanneer deze geevalueerd wordt in een  {{Glossary("Boolean")}} context. Alle waarden zijn waarachtig, tenzij deze worden gedefinieerd als foutief  {{Glossary("Falsy", "falsy")}} (bijv., met uitzondering van false, 0, "", null, undefined, and NaN).

- -

{{Glossary("JavaScript")}} gebruikt type {{Glossary("Type_Conversion", "coercion")}} in een Boolean context.

- -

Voorbeelden van waarachtige waarden/ "truthy values" in JavaScript (die vertaalbaar zijn naar true en dus het  if blok zullen doen uitvoeren):

- -
if (true)
-if ({})
-if ([])
-if (42)
-if ("foo")
-if (new Date())
-
- -

See also

- - diff --git a/files/nl/learn/css/css_layout/positionering/index.html b/files/nl/learn/css/css_layout/positionering/index.html deleted file mode 100644 index a46d73a38b..0000000000 --- a/files/nl/learn/css/css_layout/positionering/index.html +++ /dev/null @@ -1,467 +0,0 @@ ---- -title: Positionering -slug: Learn/CSS/CSS_layout/Positionering -tags: - - Article - - Beginner - - CSS - - CoderenScripten - - Gids - - Layout - - Positionering - - VAST - - absoluut - - relatief -translation_of: Learn/CSS/CSS_layout/Positioning ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}
- -

Positionering laat je toe om elementen uit de normale layout flow te nemen, en ervoor te zorgen dat ze zich anders gedragen dan normaal.  Bijvoorbeeld, dat ze boven op elkaar zitten, of altijd op dezelfde plaats in de viewport.  Dit artikel overloopt de verschillende mogelijke waarden voor {{cssxref("position")}} en hoe die te gebruiken.

- - - - - - - - - - - - -
Prerequisites:Basis van HTML (bestudeer Introductie tot HTML) en een idee van Hoe CSS werkt (bestudeer Introductie tot CSS.)
Objective:Leren hoe CSS positionering werkt.
- -

Documentstroom

- -

Positionering is een behoorlijk complex onderwerkp, dus gaan we voor we in de code duiken de layout theorie herhalen en licht uitbreiden, zodat we een idee krijgen van hoe dit werkt.

- -

Ten eerste worden individuele element-dozen gelayout door de inhoud van het element te nemen, dan de vulling, rand en marge toe te voegen daar rond: kort gezegd is dat het doosmodel.  Standaard neemt een blok-level element 100% van de beschikbare breedte in van zijn ouderelement, en is het even hoog als de eigen inhoud.  Inline elementen zijn zo hoog en zo breed als hun inhoud.  Je kan de breedte en hoogte niet instellen voor inline elementen, ze zitten gewoon in de inhoud van blok-level elementen.  Indien je de grootte van een inline element wil instellen, moet je maken dat het zich gedraagt als een blok-level element met display: block;.

- -

Dit verklaart de individuele elementen, maar hoe zit het met de interactie tussen elementen?  De normale layout flow (vermeld bij de inleiding van dit hoofdstuk) is het systeem volgens hetwelk de elementen binnen de viewport geplaatst worden.  Standaard worden block-level elementen vertikaal uitgelegd in de viewport: elk block-level element zal op een nieuwe lijn onder het vorig element verschijnen, en ze zullen worden gescheiden door de marge die erop ingesteld wordt.

- -

Inline elementen gedragen zich anders, ze verschijnen niet op nieuwe regels.  Zij worden op dezelfde regel geplaatst als andere inline elementen en tekstinhoud, op voorwaarde dat er plaats is om dat te doen binnen de breedte van het ouderelement.  Indien er geen ruimte is dan zal de overvloeiende tekst of zullen de overvloeiende elementen naar een volgende regel verhuizen. 

- -

Indien twee naast elkaar gelegen element allebei een marge hebben, en de twee marges raken elkaar, dan zal de kleinere marge verdwijnen.  Dit noemen we samenvallende marges, wat we al eerder zagen.

- -

We illustreren dit alles met een eenvoudig voorbeeld:

- -
<h1>Basic document flow</h1>
-
-<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
-
-<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
-
-<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
-
-<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
- -
body {
-  width: 500px;
-  margin: 0 auto;
-}
-
-p {
-  background: aqua;
-  border: 3px solid blue;
-  padding: 10px;
-  margin: 10px;
-}
-
-span {
-  background: red;
-  border: 1px solid black;
-}
- -

{{ EmbedLiveSample('Document_flow', '100%', 500) }}

- -

We komen nog een aantal keer terug op dit voorbeeld naarmate we door dit hoofdstuk verder gaan, om de effecten van de verschillende positioneringsmogelijkheden aan te tonen.

- -

We zouden graag hebben dat je met deze voorbeelden meevolgt op je lokale computer, indien mogelijk.  Haal een kopie van 0_basic-flow.html af van onze Github repo (broncode hier) en gebruik dat als aanvangspunt.

- -

Inleiding tot positionering

- -

Het idee achter positionering is dat het ons toelaat om de algemene documentstroom, die hierboven werd uiteengezet, te overschrijven.  Wat indien je de positie van sommige dozen wil wijzigen om bv. een licht rare sfeer op te wekken?  Positioneren is de manier waarop je dat kan.  Of wat indien je een UI element wil maken dat boven de andere delen van de pagina drijft, en/of altijd in dezelfde plaats in het browservenster zweeft ook al wordt de pagina gescrolled?  Positioneren maakt dit mogelijk.

- -

Er zijn een aantal verschillende soorten van positionering die je kan toepassen op HTML elementen.  Om die in te stellen gebruiken we de {{cssxref("position")}} eigenschap.

- -

Statische positionering

- -

Statische positionering is de standaard voor elk element.  Het betekent gewoon: "zet het element op zijn normale positie in de documentstroom, hier is niets speciaals te zien".

- -

Om dit te illustreren, en om je voorbeeld klaar te maken voor de volgende secties, voeg je de klasse positioned toe  aan het tweede {{htmlelement("p")}} in de HTML:

- -
<p class="positioned"> ... </p>
- -

Voeg nu de volgende regel toe aan de onderkant van je CSS:

- -
.positioned {
-   position: static;
-  background: yellow;
-}
- -

Als je nu opslaat en herlaad, zal je maar één verschil zien: de veranderde achtergrondkleur van de tweede paragraaf. 

- -
-

Opmerking: Je kan het voorbeeld live zien op 1_static-positioning.html (zie broncode).

-
- -

Relatieve positionering

- -

Relatieve positionering is de eerste soort positie die we regelmatig zullen bekijken.  Deze soort is zeer gelijkaardig aan statische positionering, behalve dat eens het element zijn normale plaats in de normal layout flow heeft ingenomen, je de uiteindelijke positie nog kan wijzigen.   Zo kan je het andere elementen laten overlappen op de pagina.  Probeer de positiedeclaratie te updaten in je code:

- -
position: relative;
- -

Indien je nu opslaat en herlaad, zul je geen verandering zien in het resultaat.  Hoe wijzig je dan de positie van het element?  Je moet de {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, en {{cssxref("right")}} eigenschappen gebruiken, welke we hierna gaan bespreken.

- -

Kennis maken met top, bottom, left, and right

- -

{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, en {{cssxref("right")}} worden gebruikt in conjunctie met {{cssxref("position")}} om in te stellen waar het gepositioneerde element naar toe moet.  Om dit uit te proberen kan je de volgende declaraties toevoegen aan de .positioned regel in je CSS:

- -
top: 30px;
-left: 30px;
- -
-

Opmerking: De waarden van deze eigenschappen kunnen alle eenheden aanvaarden die je logischerwijze zou verwachten: pixels, mm, rems, %, enz.

-
- -

IIndien je nu opslaat en herlaad zal je dit resultaat krijgen:

- - - -

{{ EmbedLiveSample('Introducing_top_bottom_left_and_right', '100%', 500) }}

- -

Cool, niet?  Dit was misschien niet wat je zou verwachten: waarom is het naar onder en naar rechts verschoven nadat we boven en links specifieerden?  Hoe onlogisch het aanvankelijk ook mag klinken: dit is gewoon de manier waarop relatieve positionering werkt.  Je moet denken aan een onzichtbare kracht die duwt tegen de zijkant van de gepositioneerde doos, waardoor die in de tegenovergestelde richting beweegt.  Als je dus specifieert top: 30px;, dan duwt die kracht tegen de bovenkant van de doos waardoor die 30px naar beneden beweegt.

- -
-

Opmerking: Je kan dit voorbeeld in actie zien op 2_relative-positioning.html (zie broncode).

-
- -

Absolute positionering

- -

Absolute positionering geeft radicaal andere resultaten.  Laten we proberen om de positie in onze declaratie als volgt te veranderen:

- -
position: absolute;
- -

Als je nu opslaat en herlaad, zou je iets moeten zien dat hier op trekt:

- - - -

{{ EmbedLiveSample('Absolute_positioning', '100%', 420) }}

- -

Merk ten eerste op dat het eerste en derde element na elkaar komen alsof het tweede element niet meer bestaat!  Dit klopt ook: een absoluut gepositioneerd element bestaat niet meer in de normale document layout flow.  In de plaats daarvan bestaat het in een eigen laag, die los staat van alle andere elementen.  Dit is zeer bruikbaar: het betekent dat we geïsoleerde UI elementen kunnen maken die niet interageren met de positie van andere elementen op de pagina.  Popups, menus, enz. zijn mogelijke voorbeelden.

- -

Merk ten tweede op dat de positie van het element veranderd is.  Dit komt doordat {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, en {{cssxref("right")}} zich anders gedragen bij absolute positionering.  In plaats van te specificeren in welke richting een element moet bewegen, specificeren ze de afstand die het element moet hebben van de zijde van het element waarin het vervat zit.  In dit geval zeggen we dat het absoluut gepositioneerde element 30px van de bovenkant, en 30px van de linkerkant moet gepositioneerd zijn van het "vervattende" element.

- -
-

Opmerking: Je kan {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, en {{cssxref("right")}} gebruiken om de grootte van elementen aan te passen indien nodig.  Probeer volgende zaken in te stellen voor je gepositioneerde elementen en kijk wat er gebeurt: top: 0; bottom: 0; left: 0; right: 0; en margin: 0;.  Zet die waarden nadien terug naar de originele waarden.

-
- -
-

Opmerking: Ja, marges zijn nog steeds van toepassing op gepositioneerde elementen.  Ze vallen echter niet samen.

-
- -
-

Opmerking: Je kan dit voorbeeld live zien op 3_absolute-positioning.html (zie broncode).

-
- -

Positioneringscontexten

- -

Welk element is het "vervattende element" van een absoluut gepositioneerd element?  Standaard is dit het {{htmlelement("html")}} element: het gepositioneerde element is genest in de {{htmlelement("body")}} in de broncode, maar in de uiteindelijke layout is het 30px van de bovenkant en linkerkant van de rand van de pagina, en dat is het {{htmlelement("html")}} element. Dit wordt ook wel de positioneringscontext van het element genoemd.

- -

We kunnen de positioneringscontext (ten opzichte van welk element het absolute element relatief gepositioneerd wordt) veranderen.  Dit wordt gedaan door één van de voorouders van het element te positioneren, maw. één van de elementen waarin het absoluut gepositioneerde element genest is (het is onmogelijk te positioneren relatief ten opzichte van een element waarin het niet genest is).  Om dit te verduidelijken, voeg je de volgende declaratie toe aan de regel voor de body:

- -
position: relative;
- -

Dit zou het volgende resultaat moeten geven:

- - - -

{{ EmbedLiveSample('Positioning_contexts', '100%', 420) }}

- -

Het gepositioneerde element zit nu relatief ten opzichte van het {{htmlelement("body")}} element.

- -
-

Opmerking: Je kan het voorbeeld live zien op 4_positioning-context.html (zie broncode).

-
- -

De z-index

- -

Absolute positionering is leuk, maar er is iets anders waar we nog niet over gesproken hebben: welk element zal als bovenste worden weergegeven indien elementen overlappen?  In het voorbeeld dat we tot nu toe zagen, positioneerden we slechts één element in de positioneringscontext.  Dat element zal bovenaan staan, aangezien gepositioneerde elementen winnen van niet-gepositioneerde elementen.  Maar wat als er meer dan één is?

- -

Probeer het volgende toe te voegen aan je CSS, waardoor de eerste paragraaf ook absoluut gepositioneerd zal worden:

- -
p:nth-of-type(1) {
-  position: absolute;
-  background: lime;
-  top: 10px;
-  right: 30px;
-}
- -

Nu zal je de eerste, groengekleurde paragraaf uit de document flow zien bewegen, en een beetje hoger gepositioneerd worden dan waar hij normaal zou staan.  Hij wordt ook weergegeven onder de andere gepositioneerde paragraaf, waar de twee overlappen.  Dit is omdat de andere gepositioneerde paragraaf later komt in de broncode, en gepositioneerde elementen die later in de broncode komen zullen winnen van gepositioneerde elementen die eerder in de broncode komen.

- -

Kan je die volgorde veranderen?  Jazeker, met behulp van de {{cssxref("z-index")}} eigenschap. "z-index" is een referentie naar de z-as.  Je zal je misschien herinneren van eerdere punten in de uitleg waar we bespraken hoe webpagina's horizontale (x-as) en verticale (y-as) coördinaten gebruiken om de positionering te bepalen van zaken zoals achtergrondafbeeldingen en drop shadow offsets.  (0,0) is linksboven aan de pagina (of aan het element), en de x- en y-assen lopen tot de rechteronderhoek van de pagina (voor talen die van links naar rechts gelezen worden).

- -

Webpaginas hebben ook een z-as: een denkbeeldige lijn die gaat van je scherm naar je gezicht (of wat het ook is dat je voor het scherm hebt).  {{cssxref("z-index")}} waarden hebben bijgevolg een effect op waar de gepositioneerde elementen op de z-as staan: positieve waarden betekenen dat het element hoger zal komen, negatieve waarden betekenen dat het element lager zal komen.  Standaard hebben gepositioneerde elementen een z-index van auto, wat praktisch gezien 0 is.

- -

Om de volgorde te veranderen, voeg je volgende declaratie toe aan de p:nth-of-type(1) regel:

- -
z-index: 1;
- -

Je zou nu het voltooide voorbeeld moeten zien:

- - - -

{{ EmbedLiveSample('Introducing_z-index', '100%', 400) }}

- -

Bemerk dat z-index enkel eenheidsloze waarden aanvaardt.  Je kan niet specificeren dat je een element 23 pixels wil laten bewegen op de z-as, zo werkt het niet.  Hogere waarden gaan boven lagere waarden, en het is aan jou om te bepalen welke waarden je gebruikt.  2 en 3 gebruiken zal het zelfde effect hebben als 300 en 40000 gebruiken.

- -

Merk ook op dat we binnen een enkele positioneringscontext bleven met ons voorbeeld.  Indien je twee sets van gepositioneerde elementen zou hebben in een pagina, en je zou er voor willen zorgen dat ze overlappen en dat de volgorde volgens een bepaald patroon verloopt, dan zou het ingewikkeld worden.  Gelukkig kom je zo'n complexiteit maar zelden tegen met de z-index.  Als je in meer detail wil lezen hoe de z-index werkt, bekijk dan het Web Standards Curriculum z-index artikel.  In dit hoofdstuk hebben we je alle informatie gegeven die je momenteel nodig hebt.

- -
-

Opmerking: Je kan het voorbeeld live zien op5_z-index.html (zie broncode).

-
- -

Fixed positioning

- -

There is one more type of positioning to cover — fixed. This works in exactly the same way as absolute positioning, with one key difference — whereas absolute positioning fixes an element in place relative to the {{htmlelement("html")}} element or its nearest positioned ancestor, fixed positioning fixes an element in place relative to the browser viewport itself. This means that you can create useful UI items that are fixed in place, like persisting navigation menus.

- -

Let's put together a simple example to show what we mean. First of all, delete the existing p:nth-of-type(1) and .positioned rules from your CSS.

- -

Now, update the body rule to remove the position: relative; declaration and add a fixed height, like so:

- -
body {
-  width: 500px;
-  height: 1400px;
-  margin: 0 auto;
-}
- -

Now we're going to give the {{htmlelement("h1")}} element position: fixed;, and get it to sit at the top center of the viewport. Add the following rule to your CSS:

- -
h1 {
-  position: fixed;
-  top: 0;
-  width: 500px;
-  margin: 0 auto;
-  background: white;
-  padding: 10px;
-}
- -

The top: 0; is required to make it stick to the top of the screen; we then give the heading the same width as the content column and use the faithful old margin: 0 auto; trick to center it. We then give it a white background and some padding, so the content won't be visible underneath it.

- -

If you save and refresh now, you'll see a fun little effect whereby the heading stays fixed, and the content appears to scroll up and disappear underneath it. But we could improve this more — at the moment some of the content starts off underneath the heading, because the positioned heading no longer appears in the document flow, so the rest of the content moves up to the top. We need to move it all down a bit; we can do this by setting some top margin on the first paragraph. Add this now:

- -
p:nth-of-type(1) {
-  margin-top: 60px;
-}
- -

You should now see the finished example:

- - - -

{{ EmbedLiveSample('Fixed_positioning', '100%', 400) }}

- -
-

Opmerking: Je kan dit voorbeeld live aan het werk zien op 6_fixed-positioning.html (zie broncode).

-
- -

Experimental: position sticky

- -

There is a new positioning value available called position: sticky, support for which is not very widespread yet. This is basically a hybrid between relative and fixed position, which allows a positioned element to act like it is relatively positioned until it is scrolled to a certain threshold point (e.g. 10px from the top of the viewport), after which it becomes fixed.  See our position: sticky reference entry for more details and an example.

- -

Samenvatting

- -

Ik ben er zeker van dat je plezier had om met de basis positionering te spelen.  Het is één van de elementaire tools om complexe layouts te maken met CSS.  Met dat in gedachten, zullen we in het volgende hoofdstuk nog meer plezier hebben met positionering: we gaan er een stap verder en bouwen enkele zaken die ook in de "echte wereld" nuttig zijn.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}

diff --git a/files/nl/learn/css/css_layout/positioning/index.html b/files/nl/learn/css/css_layout/positioning/index.html new file mode 100644 index 0000000000..a46d73a38b --- /dev/null +++ b/files/nl/learn/css/css_layout/positioning/index.html @@ -0,0 +1,467 @@ +--- +title: Positionering +slug: Learn/CSS/CSS_layout/Positionering +tags: + - Article + - Beginner + - CSS + - CoderenScripten + - Gids + - Layout + - Positionering + - VAST + - absoluut + - relatief +translation_of: Learn/CSS/CSS_layout/Positioning +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}
+ +

Positionering laat je toe om elementen uit de normale layout flow te nemen, en ervoor te zorgen dat ze zich anders gedragen dan normaal.  Bijvoorbeeld, dat ze boven op elkaar zitten, of altijd op dezelfde plaats in de viewport.  Dit artikel overloopt de verschillende mogelijke waarden voor {{cssxref("position")}} en hoe die te gebruiken.

+ + + + + + + + + + + + +
Prerequisites:Basis van HTML (bestudeer Introductie tot HTML) en een idee van Hoe CSS werkt (bestudeer Introductie tot CSS.)
Objective:Leren hoe CSS positionering werkt.
+ +

Documentstroom

+ +

Positionering is een behoorlijk complex onderwerkp, dus gaan we voor we in de code duiken de layout theorie herhalen en licht uitbreiden, zodat we een idee krijgen van hoe dit werkt.

+ +

Ten eerste worden individuele element-dozen gelayout door de inhoud van het element te nemen, dan de vulling, rand en marge toe te voegen daar rond: kort gezegd is dat het doosmodel.  Standaard neemt een blok-level element 100% van de beschikbare breedte in van zijn ouderelement, en is het even hoog als de eigen inhoud.  Inline elementen zijn zo hoog en zo breed als hun inhoud.  Je kan de breedte en hoogte niet instellen voor inline elementen, ze zitten gewoon in de inhoud van blok-level elementen.  Indien je de grootte van een inline element wil instellen, moet je maken dat het zich gedraagt als een blok-level element met display: block;.

+ +

Dit verklaart de individuele elementen, maar hoe zit het met de interactie tussen elementen?  De normale layout flow (vermeld bij de inleiding van dit hoofdstuk) is het systeem volgens hetwelk de elementen binnen de viewport geplaatst worden.  Standaard worden block-level elementen vertikaal uitgelegd in de viewport: elk block-level element zal op een nieuwe lijn onder het vorig element verschijnen, en ze zullen worden gescheiden door de marge die erop ingesteld wordt.

+ +

Inline elementen gedragen zich anders, ze verschijnen niet op nieuwe regels.  Zij worden op dezelfde regel geplaatst als andere inline elementen en tekstinhoud, op voorwaarde dat er plaats is om dat te doen binnen de breedte van het ouderelement.  Indien er geen ruimte is dan zal de overvloeiende tekst of zullen de overvloeiende elementen naar een volgende regel verhuizen. 

+ +

Indien twee naast elkaar gelegen element allebei een marge hebben, en de twee marges raken elkaar, dan zal de kleinere marge verdwijnen.  Dit noemen we samenvallende marges, wat we al eerder zagen.

+ +

We illustreren dit alles met een eenvoudig voorbeeld:

+ +
<h1>Basic document flow</h1>
+
+<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
+
+<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
+
+<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
+
+<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+ +
body {
+  width: 500px;
+  margin: 0 auto;
+}
+
+p {
+  background: aqua;
+  border: 3px solid blue;
+  padding: 10px;
+  margin: 10px;
+}
+
+span {
+  background: red;
+  border: 1px solid black;
+}
+ +

{{ EmbedLiveSample('Document_flow', '100%', 500) }}

+ +

We komen nog een aantal keer terug op dit voorbeeld naarmate we door dit hoofdstuk verder gaan, om de effecten van de verschillende positioneringsmogelijkheden aan te tonen.

+ +

We zouden graag hebben dat je met deze voorbeelden meevolgt op je lokale computer, indien mogelijk.  Haal een kopie van 0_basic-flow.html af van onze Github repo (broncode hier) en gebruik dat als aanvangspunt.

+ +

Inleiding tot positionering

+ +

Het idee achter positionering is dat het ons toelaat om de algemene documentstroom, die hierboven werd uiteengezet, te overschrijven.  Wat indien je de positie van sommige dozen wil wijzigen om bv. een licht rare sfeer op te wekken?  Positioneren is de manier waarop je dat kan.  Of wat indien je een UI element wil maken dat boven de andere delen van de pagina drijft, en/of altijd in dezelfde plaats in het browservenster zweeft ook al wordt de pagina gescrolled?  Positioneren maakt dit mogelijk.

+ +

Er zijn een aantal verschillende soorten van positionering die je kan toepassen op HTML elementen.  Om die in te stellen gebruiken we de {{cssxref("position")}} eigenschap.

+ +

Statische positionering

+ +

Statische positionering is de standaard voor elk element.  Het betekent gewoon: "zet het element op zijn normale positie in de documentstroom, hier is niets speciaals te zien".

+ +

Om dit te illustreren, en om je voorbeeld klaar te maken voor de volgende secties, voeg je de klasse positioned toe  aan het tweede {{htmlelement("p")}} in de HTML:

+ +
<p class="positioned"> ... </p>
+ +

Voeg nu de volgende regel toe aan de onderkant van je CSS:

+ +
.positioned {
+   position: static;
+  background: yellow;
+}
+ +

Als je nu opslaat en herlaad, zal je maar één verschil zien: de veranderde achtergrondkleur van de tweede paragraaf. 

+ +
+

Opmerking: Je kan het voorbeeld live zien op 1_static-positioning.html (zie broncode).

+
+ +

Relatieve positionering

+ +

Relatieve positionering is de eerste soort positie die we regelmatig zullen bekijken.  Deze soort is zeer gelijkaardig aan statische positionering, behalve dat eens het element zijn normale plaats in de normal layout flow heeft ingenomen, je de uiteindelijke positie nog kan wijzigen.   Zo kan je het andere elementen laten overlappen op de pagina.  Probeer de positiedeclaratie te updaten in je code:

+ +
position: relative;
+ +

Indien je nu opslaat en herlaad, zul je geen verandering zien in het resultaat.  Hoe wijzig je dan de positie van het element?  Je moet de {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, en {{cssxref("right")}} eigenschappen gebruiken, welke we hierna gaan bespreken.

+ +

Kennis maken met top, bottom, left, and right

+ +

{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, en {{cssxref("right")}} worden gebruikt in conjunctie met {{cssxref("position")}} om in te stellen waar het gepositioneerde element naar toe moet.  Om dit uit te proberen kan je de volgende declaraties toevoegen aan de .positioned regel in je CSS:

+ +
top: 30px;
+left: 30px;
+ +
+

Opmerking: De waarden van deze eigenschappen kunnen alle eenheden aanvaarden die je logischerwijze zou verwachten: pixels, mm, rems, %, enz.

+
+ +

IIndien je nu opslaat en herlaad zal je dit resultaat krijgen:

+ + + +

{{ EmbedLiveSample('Introducing_top_bottom_left_and_right', '100%', 500) }}

+ +

Cool, niet?  Dit was misschien niet wat je zou verwachten: waarom is het naar onder en naar rechts verschoven nadat we boven en links specifieerden?  Hoe onlogisch het aanvankelijk ook mag klinken: dit is gewoon de manier waarop relatieve positionering werkt.  Je moet denken aan een onzichtbare kracht die duwt tegen de zijkant van de gepositioneerde doos, waardoor die in de tegenovergestelde richting beweegt.  Als je dus specifieert top: 30px;, dan duwt die kracht tegen de bovenkant van de doos waardoor die 30px naar beneden beweegt.

+ +
+

Opmerking: Je kan dit voorbeeld in actie zien op 2_relative-positioning.html (zie broncode).

+
+ +

Absolute positionering

+ +

Absolute positionering geeft radicaal andere resultaten.  Laten we proberen om de positie in onze declaratie als volgt te veranderen:

+ +
position: absolute;
+ +

Als je nu opslaat en herlaad, zou je iets moeten zien dat hier op trekt:

+ + + +

{{ EmbedLiveSample('Absolute_positioning', '100%', 420) }}

+ +

Merk ten eerste op dat het eerste en derde element na elkaar komen alsof het tweede element niet meer bestaat!  Dit klopt ook: een absoluut gepositioneerd element bestaat niet meer in de normale document layout flow.  In de plaats daarvan bestaat het in een eigen laag, die los staat van alle andere elementen.  Dit is zeer bruikbaar: het betekent dat we geïsoleerde UI elementen kunnen maken die niet interageren met de positie van andere elementen op de pagina.  Popups, menus, enz. zijn mogelijke voorbeelden.

+ +

Merk ten tweede op dat de positie van het element veranderd is.  Dit komt doordat {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, en {{cssxref("right")}} zich anders gedragen bij absolute positionering.  In plaats van te specificeren in welke richting een element moet bewegen, specificeren ze de afstand die het element moet hebben van de zijde van het element waarin het vervat zit.  In dit geval zeggen we dat het absoluut gepositioneerde element 30px van de bovenkant, en 30px van de linkerkant moet gepositioneerd zijn van het "vervattende" element.

+ +
+

Opmerking: Je kan {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, en {{cssxref("right")}} gebruiken om de grootte van elementen aan te passen indien nodig.  Probeer volgende zaken in te stellen voor je gepositioneerde elementen en kijk wat er gebeurt: top: 0; bottom: 0; left: 0; right: 0; en margin: 0;.  Zet die waarden nadien terug naar de originele waarden.

+
+ +
+

Opmerking: Ja, marges zijn nog steeds van toepassing op gepositioneerde elementen.  Ze vallen echter niet samen.

+
+ +
+

Opmerking: Je kan dit voorbeeld live zien op 3_absolute-positioning.html (zie broncode).

+
+ +

Positioneringscontexten

+ +

Welk element is het "vervattende element" van een absoluut gepositioneerd element?  Standaard is dit het {{htmlelement("html")}} element: het gepositioneerde element is genest in de {{htmlelement("body")}} in de broncode, maar in de uiteindelijke layout is het 30px van de bovenkant en linkerkant van de rand van de pagina, en dat is het {{htmlelement("html")}} element. Dit wordt ook wel de positioneringscontext van het element genoemd.

+ +

We kunnen de positioneringscontext (ten opzichte van welk element het absolute element relatief gepositioneerd wordt) veranderen.  Dit wordt gedaan door één van de voorouders van het element te positioneren, maw. één van de elementen waarin het absoluut gepositioneerde element genest is (het is onmogelijk te positioneren relatief ten opzichte van een element waarin het niet genest is).  Om dit te verduidelijken, voeg je de volgende declaratie toe aan de regel voor de body:

+ +
position: relative;
+ +

Dit zou het volgende resultaat moeten geven:

+ + + +

{{ EmbedLiveSample('Positioning_contexts', '100%', 420) }}

+ +

Het gepositioneerde element zit nu relatief ten opzichte van het {{htmlelement("body")}} element.

+ +
+

Opmerking: Je kan het voorbeeld live zien op 4_positioning-context.html (zie broncode).

+
+ +

De z-index

+ +

Absolute positionering is leuk, maar er is iets anders waar we nog niet over gesproken hebben: welk element zal als bovenste worden weergegeven indien elementen overlappen?  In het voorbeeld dat we tot nu toe zagen, positioneerden we slechts één element in de positioneringscontext.  Dat element zal bovenaan staan, aangezien gepositioneerde elementen winnen van niet-gepositioneerde elementen.  Maar wat als er meer dan één is?

+ +

Probeer het volgende toe te voegen aan je CSS, waardoor de eerste paragraaf ook absoluut gepositioneerd zal worden:

+ +
p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+}
+ +

Nu zal je de eerste, groengekleurde paragraaf uit de document flow zien bewegen, en een beetje hoger gepositioneerd worden dan waar hij normaal zou staan.  Hij wordt ook weergegeven onder de andere gepositioneerde paragraaf, waar de twee overlappen.  Dit is omdat de andere gepositioneerde paragraaf later komt in de broncode, en gepositioneerde elementen die later in de broncode komen zullen winnen van gepositioneerde elementen die eerder in de broncode komen.

+ +

Kan je die volgorde veranderen?  Jazeker, met behulp van de {{cssxref("z-index")}} eigenschap. "z-index" is een referentie naar de z-as.  Je zal je misschien herinneren van eerdere punten in de uitleg waar we bespraken hoe webpagina's horizontale (x-as) en verticale (y-as) coördinaten gebruiken om de positionering te bepalen van zaken zoals achtergrondafbeeldingen en drop shadow offsets.  (0,0) is linksboven aan de pagina (of aan het element), en de x- en y-assen lopen tot de rechteronderhoek van de pagina (voor talen die van links naar rechts gelezen worden).

+ +

Webpaginas hebben ook een z-as: een denkbeeldige lijn die gaat van je scherm naar je gezicht (of wat het ook is dat je voor het scherm hebt).  {{cssxref("z-index")}} waarden hebben bijgevolg een effect op waar de gepositioneerde elementen op de z-as staan: positieve waarden betekenen dat het element hoger zal komen, negatieve waarden betekenen dat het element lager zal komen.  Standaard hebben gepositioneerde elementen een z-index van auto, wat praktisch gezien 0 is.

+ +

Om de volgorde te veranderen, voeg je volgende declaratie toe aan de p:nth-of-type(1) regel:

+ +
z-index: 1;
+ +

Je zou nu het voltooide voorbeeld moeten zien:

+ + + +

{{ EmbedLiveSample('Introducing_z-index', '100%', 400) }}

+ +

Bemerk dat z-index enkel eenheidsloze waarden aanvaardt.  Je kan niet specificeren dat je een element 23 pixels wil laten bewegen op de z-as, zo werkt het niet.  Hogere waarden gaan boven lagere waarden, en het is aan jou om te bepalen welke waarden je gebruikt.  2 en 3 gebruiken zal het zelfde effect hebben als 300 en 40000 gebruiken.

+ +

Merk ook op dat we binnen een enkele positioneringscontext bleven met ons voorbeeld.  Indien je twee sets van gepositioneerde elementen zou hebben in een pagina, en je zou er voor willen zorgen dat ze overlappen en dat de volgorde volgens een bepaald patroon verloopt, dan zou het ingewikkeld worden.  Gelukkig kom je zo'n complexiteit maar zelden tegen met de z-index.  Als je in meer detail wil lezen hoe de z-index werkt, bekijk dan het Web Standards Curriculum z-index artikel.  In dit hoofdstuk hebben we je alle informatie gegeven die je momenteel nodig hebt.

+ +
+

Opmerking: Je kan het voorbeeld live zien op5_z-index.html (zie broncode).

+
+ +

Fixed positioning

+ +

There is one more type of positioning to cover — fixed. This works in exactly the same way as absolute positioning, with one key difference — whereas absolute positioning fixes an element in place relative to the {{htmlelement("html")}} element or its nearest positioned ancestor, fixed positioning fixes an element in place relative to the browser viewport itself. This means that you can create useful UI items that are fixed in place, like persisting navigation menus.

+ +

Let's put together a simple example to show what we mean. First of all, delete the existing p:nth-of-type(1) and .positioned rules from your CSS.

+ +

Now, update the body rule to remove the position: relative; declaration and add a fixed height, like so:

+ +
body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}
+ +

Now we're going to give the {{htmlelement("h1")}} element position: fixed;, and get it to sit at the top center of the viewport. Add the following rule to your CSS:

+ +
h1 {
+  position: fixed;
+  top: 0;
+  width: 500px;
+  margin: 0 auto;
+  background: white;
+  padding: 10px;
+}
+ +

The top: 0; is required to make it stick to the top of the screen; we then give the heading the same width as the content column and use the faithful old margin: 0 auto; trick to center it. We then give it a white background and some padding, so the content won't be visible underneath it.

+ +

If you save and refresh now, you'll see a fun little effect whereby the heading stays fixed, and the content appears to scroll up and disappear underneath it. But we could improve this more — at the moment some of the content starts off underneath the heading, because the positioned heading no longer appears in the document flow, so the rest of the content moves up to the top. We need to move it all down a bit; we can do this by setting some top margin on the first paragraph. Add this now:

+ +
p:nth-of-type(1) {
+  margin-top: 60px;
+}
+ +

You should now see the finished example:

+ + + +

{{ EmbedLiveSample('Fixed_positioning', '100%', 400) }}

+ +
+

Opmerking: Je kan dit voorbeeld live aan het werk zien op 6_fixed-positioning.html (zie broncode).

+
+ +

Experimental: position sticky

+ +

There is a new positioning value available called position: sticky, support for which is not very widespread yet. This is basically a hybrid between relative and fixed position, which allows a positioned element to act like it is relatively positioned until it is scrolled to a certain threshold point (e.g. 10px from the top of the viewport), after which it becomes fixed.  See our position: sticky reference entry for more details and an example.

+ +

Samenvatting

+ +

Ik ben er zeker van dat je plezier had om met de basis positionering te spelen.  Het is één van de elementaire tools om complexe layouts te maken met CSS.  Met dat in gedachten, zullen we in het volgende hoofdstuk nog meer plezier hebben met positionering: we gaan er een stap verder en bouwen enkele zaken die ook in de "echte wereld" nuttig zijn.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}

diff --git a/files/nl/learn/css/first_steps/index.html b/files/nl/learn/css/first_steps/index.html new file mode 100644 index 0000000000..e2b167686e --- /dev/null +++ b/files/nl/learn/css/first_steps/index.html @@ -0,0 +1,63 @@ +--- +title: Voor Beginners +slug: Web/CSS/Voor_Beginners +translation_of: Learn/CSS/First_steps +translation_of_original: Web/Guide/CSS/Getting_started +--- +

+

+

Introductie

+

Deze cursus is een introductie op Cascading Style Sheets (CSS). Het begeleid je door de basis eigenschappen van CSS met praktische voorbeelden die je zelf kan proberen op je eigen computer. Het is opgedeeld in twee delen. +

+ + +

Deze cursus is gebaseerd op de CSS 2.1 Specificatie. +

+

Wie zou deze cursus moeten gebruiken?

+

Deze cursus is grotendeels voor beginners, maar je kan het ook gebruiken als je al wat ervaring hebt met CSS. +

Als je een beginner bent met CSS, gebruik dan Deel I van deze cursus om te begrijpen wat CSS is en hoe je het moet gebruiken. Gebruik vervolgens Deel II om te leren hoe je CSS gebruikt in Mozilla. +

Als je al wat CSS kent, kan je de delen van de cursus overslaan die je al kent, en alleen de delen lezen die je interesseren. +

Als je ervaren bent met CSS maar niet in Mozilla, kun je direct naar Deel II gaan. +

+

Wat heb je nodig voordat je begint?

+

Om het beste uit deze cursus te halen, heb je een editor nodig voor tekstbestanden en een Mozilla browser (Firefox of Mozilla Suite). Je moet ook weten hoe je deze moet gebruiken voor basishandelingen. +

Als je geen bestanden wilt veranderen, dan kun je alleen de cursus lezen en naar de plaatjes kijken, maar dat is een minder effectieve manier om te leren. +

Voor een aantal delen van deze cursus kan andere Mozilla software nodig zijn. Als je geen andere Mozilla software wil downloaden hoef je deze delen niet te volgen. +

Let op: CSS zorgt voor een manier om met kleur te werken, dus delen van deze cursus hebben kleuren nodig. Je kunt deze delen van de cursus alleen makkelijk gebruiken als je een kleurenscherm en normaal kleurenzicht hebt. +

+

Hoe je deze cursus moet gebruiken

+

Om deze cursus goed te gebruiken moet je de pagina's aandachtig en in volgorde lezen. Als je een pagina overslaat kan het moeilijk zijn latere pagina's te begrijpen. +

Gebruik de Informatie sectie op elke pagina om te begrijpen hoe CSS werkt. Gebruik de Actie sectie om CSS te proberen op je eigen computer. +

Om je begrip te testen, gebruik de uitdaging aan het einde van elke pagina. Uitkomsten voor sommige van deze uitdagingen worden op latere pagina's in de cursus bekend gemaakt. +

Om dieper in te gaan op CSS, lees de informatie die je kunt vinden in de kaders benoemd "Meer details". Gebruik de links daar om referentiemateriaal te vinden over CSS. +

+

Cursus Deel I

+

Een basis stap-voor-stap gids. +

+
  1. Wat is CSS? +
  2. Waarom CSS Gebruiken? +
  3. Hoe CSS Werkt +
  4. 'Cascading' en nalatenschap +
  5. Selectors +
  6. Leesbaar CSS +
  7. Text Stijlen +
  8. Kleur +
  9. Inhoud +
  10. Lijsten +
  11. Kaders +
  12. Layout +
  13. Tabellen +
  14. Media +
+

Cursus Deel II

+

Voorbeelden die CSS in Mozilla laten zien. +

+
  1. JavaScript +
  2. XBL Bindingen +
  3. CSS en XUL +
  4. CSS en SVG +
  5. XML data +
+{{ languages( { "en": "en/CSS/Getting_Started", "fr": "fr/CSS/Premiers_pas", "ja": "ja/CSS/Getting_Started", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar" } ) }} diff --git a/files/nl/learn/forms/advanced_form_styling/index.html b/files/nl/learn/forms/advanced_form_styling/index.html new file mode 100644 index 0000000000..1025b94397 --- /dev/null +++ b/files/nl/learn/forms/advanced_form_styling/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/forms/basic_native_form_controls/index.html b/files/nl/learn/forms/basic_native_form_controls/index.html new file mode 100644 index 0000000000..844466956e --- /dev/null +++ b/files/nl/learn/forms/basic_native_form_controls/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/forms/how_to_structure_a_web_form/index.html b/files/nl/learn/forms/how_to_structure_a_web_form/index.html new file mode 100644 index 0000000000..ae4ec439c2 --- /dev/null +++ b/files/nl/learn/forms/how_to_structure_a_web_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/forms/index.html b/files/nl/learn/forms/index.html new file mode 100644 index 0000000000..13853c2ccf --- /dev/null +++ b/files/nl/learn/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/forms/property_compatibility_table_for_form_controls/index.html b/files/nl/learn/forms/property_compatibility_table_for_form_controls/index.html new file mode 100644 index 0000000000..37de621400 --- /dev/null +++ b/files/nl/learn/forms/property_compatibility_table_for_form_controls/index.html @@ -0,0 +1,1967 @@ +--- +title: Compatibiliteitstabel voor formulierelementen +slug: Compatibiliteitstabel_voor_formulierelementen +translation_of: Learn/Forms/Property_compatibility_table_for_form_controls +--- +

De volgende compatibiliteitstabellen trachten een samenvatting te geven van CSS-ondersteuning voor HTML-formulieren. Door de complexiteit van CSS en HTML kunnen deze tabellen niet als volledig beschouwd worden. Zij geven echter een goed inzicht in wat wel en wat niet mogelijk is.

+ +

Hoe de tabellen lezen

+ +

Waarden

+ +

Voor elke eigenschap zijn er vier mogelijke waarden:

+ +
+
JA
+
De eigenschap gedraagt zich consistent over browsers. Neveneffecten zijn in bepaalde gevallen echter niet uitgesloten.
+
GEDEELTELIJK
+
Alhoewel de eigenschap werkt, zijn er toch soms neveneffecten of inconsistenties. Men gebruikt deze eigenschappen best niet tenzij de neveneffecten op voorhand aangepakt worden.
+
NEEN
+
De eigenschap werkt niet of is zo inconsistent dat zij niet betrouwbaar werkt.
+
N.V.T.
+
De eigenschap heeft geen enkele betekenis voor dit type of element.
+
+ +

Weergave

+ +

Elke eigenschap wordt op twee manieren weergegeven:

+ +
+
N (Normaal)
+
Betekent dat de eigenschap gewoon toegepast kan worden.
+
A (Aangepast)
+
Geeft aan dat de eigenschap toegepast wordt met onderstaande regels:
+
+ +
* {
+/* Schakelt het klassieke uiterlijk en aanvoelen uit bij WebKit gebaseerde browsers */
+  -webkit-appearance: none;
+
+/* Schakelt het klassieke uiterlijk en aanvoelen uit bij Gecko gebaseerde browsers */
+  -moz-appearance: none;
+
+/* Schakelt het klassieke uiterlijk en aanvoelen uit bij diverse browsers met inbegrip
+  van Opera, Internet Explorer en Firefox */
+  background: none;
+}
+ +

Compatibiliteitstabellen

+ +

Globaal gedrag

+ +

Sommige eigenschappen gedragen zich in het algemeen hetzelfde over de diverse browsers:

+ +
+
{{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}}
+
Deze eigenschappen kunnen bij bepaalde browsers geheel of gedeeltelijk het klassieke uiterlijk en aanvoelen uitschakelen. Deze eigenschappen moeten met voorzichtigheid gebruikt worden.
+
{{cssxref("line-height")}}
+
Deze eigenschap is inconsistent over de verschillende browsers. Zij kan beter vermeden worden.
+
{{cssxref("text-decoration")}}
+
Deze eigenschap wordt niet ondersteund door Opera voor formulierelementen.
+
{{cssxref("text-overflow")}}
+
Opera, Safari en IE9 ondersteunen deze eigenschap niet voor formulierelementen.
+
{{cssxref("text-shadow")}}
+
Opera ondersteunt {{cssxref("text-shadow")}}  niet voor formulierelementen en IE9 ondersteunt het helemaal niet.
+
+ +

Tekstvelden

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EigenschapNANota
CSS box model
{{cssxref("width")}}JaJa 
{{cssxref("height")}}Gedeeltelijk[1][2]Ja +
    +
  1. WebKit browsers (meestal op  Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Daarom is het noodzakelijk om  -webkit-appearance:none te gebruiken om deze eigenschap te gebruiken bij zoekvelden.
    2. +
  2.  Windows 7, Internet Explorer 9 gebruikt de rand niet tenzij background:none wordt gebruikt.
    3. +
+
{{cssxref("border")}}Gedeeltelijk[1][2]Ja +
    +
  1. WebKit browsers (meestal op  Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Daarom is het noodzakelijk om  -webkit-appearance:none te gebruiken om deze eigenschap te gebruiken bij zoekvelden.
    2. +
  2. Windows 7, Internet Explorer 9 gebruikt de rand niet tenzij background:none wordt gebruikt.
    3. +
+
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}Gedeeltelijk[1][2]Ja +
    +
  1. WebKit browsers (meestal op  Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Daarom is het noodzakelijk om  -webkit-appearance:none te gebruiken om deze eigenschap te gebruiken bij zoekvelden.
    2. +
  2. Windows 7, Internet Explorer 9 gebruikt de rand niet tenzij background:none wordt gebruikt.
    3. +
+
Tekst en font
{{cssxref("color")}}[1]JaJa +
    +
  1. Als de {{cssxref("border-color")}} eigenschap niet ingesteld is zullen browsers die op WebKit gebaseerd zijn de {{cssxref("color")}} eigenschap toepassen op de rand en font voor {{HTMLElement("textarea")}}.
    2. +
+
{{cssxref("font")}}JaJaZie de nota over {{cssxref("line-height")}}
{{cssxref("letter-spacing")}}JaJa 
{{cssxref("text-align")}}JaJa 
{{cssxref("text-decoration")}}GedeeltelijkGedeeltelijkZie nota betreffende Opera
{{cssxref("text-indent")}}Gedeeltelijk[1]Gedeeltelijk[1] +
    +
  1. IE9 ondersteunt deze eigenschap alleen voor {{HTMLElement("textarea")}}, terwijl Opera het alleen ondersteunt in éénregelige tekstvelden.
    2. +
+
{{cssxref("text-overflow")}}GedeeltelijkGedeeltelijk 
{{cssxref("text-shadow")}}GedeeltelijkGedeeltelijk 
{{cssxref("text-transform")}}JaJa 
Rand en achtergrond
{{cssxref("background")}}Gedeeltelijk[1]Ja +
    +
  1. WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden.  Hiertoe moet -webkit-appearance:none   aangewend worden.  Bij Windows 7 gebruikt Internet Explorer 9 geen rand tenzij background:none gebruikt wordt.
    2. +
+
{{cssxref("border-radius")}}Gedeeltelijk[1][2]Ja +
    +
  1. WebKit browsers (meestal op Mac OSX en iOS) gebruiken het natuurlijk uiterlijk en aanvoelen voor zoekvelden. Hiertoe moet -webkit-appearance:none aangewend worden .  Bij Windows 7 gebruikt Internet Explorer 9 geen rand tenzij background:none gebruikt wordt.
    2. +
  2. Bij Opera wordt de {{cssxref("border-radius")}} eigenschap alleen gebruikt als er expliciet een rand ingesteld is.
    3. +
+
{{cssxref("box-shadow")}}NeenGedeeltelijk[1] +
    +
  1. IE9 ondersteunt deze eigenschap niet.
    2. +
+
+ +

Knoppen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EigenschapNANota
CSS box model
{{cssxref("width")}}JaJa 
{{cssxref("height")}}Gedeeltelijk[1]Ja +
    +
  1. Deze eigenschap wordt niet gebruikt bij browsers op Mac OSX of iOS die gebaseerd zijn op WebKit.
    2. +
+
{{cssxref("border")}}GedeeltelijkJa 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}Gedeeltelijk[1]Ja +
    +
  1. Deze eigenschap wordt niet gebruikt bij browsers op Mac OSX of iOS die gebaseerd zijn op WebKit.
    2. +
+
Tekst en font
{{cssxref("color")}}JaJa 
{{cssxref("font")}}JaJaZie nota over  {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}JaJa 
{{cssxref("text-align")}}NeenNeen 
{{cssxref("text-decoration")}}GedeeltelijkJa 
{{cssxref("text-indent")}}JaJa 
{{cssxref("text-overflow")}}NeenNeen 
{{cssxref("text-shadow")}}GedeeltelijkGedeeltelijk 
{{cssxref("text-transform")}}JaJa 
Rand en achtergrond
{{cssxref("background")}}JaJa 
{{cssxref("border-radius")}}Ja[1]Ja[1] +
    +
  1. Bij Opera wordt de {{cssxref("border-radius")}} eigenschap alleen gebruikt als er expliciet een rand ingesteld is.
    2. +
+
{{cssxref("box-shadow")}}NeenPartial[1] +
    +
  1. IE9 ondersteunt deze eigenschap niet.
    2. +
+
+ +

Number

+ +

Bij browsers die het  number  element gebruiken is er geen standaard manier om de stijl van de spinner, die de waarde van het  veld aanpast, te  wijzigen. Noteer dat bij Safari de spinner buiten het veld staat.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EigenschapNANota
CSS box model
{{cssxref("width")}}JaJa 
{{cssxref("height")}}Gedeeltelijk[1]Gedeeltelijk[1] +
    +
  1. Bij Opera worden de spinners ingezoomd, hetgeen de inhoud van het veld kan verbergen.
    2. +
+
{{cssxref("border")}}JaJa 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}Gedeeltelijk[1]Gedeeltelijk[1] +
    +
  1. Bij Opera worden de spinners ingezoomd, hetgeen de inhoud van het veld kan verbergen.
    2. +
+
Tekst en font
{{cssxref("color")}}JaJa 
{{cssxref("font")}}JaJaZie nota over {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}JaJa 
{{cssxref("text-align")}}JaJa 
{{cssxref("text-decoration")}}GedeeltelijkGedeeltelijk 
{{cssxref("text-indent")}}JaJa 
{{cssxref("text-overflow")}}NeenNeen 
{{cssxref("text-shadow")}}GedeeltelijkGedeeltelijk 
{{cssxref("text-transform")}}N.V.T.N.V.T. 
Rand en achtergrond
{{cssxref("background")}}NeenNeen +

Wordt ondersteund maar er is te weinig consistentie tussen browsers om betrouwbaar te zijn.

+
{{cssxref("border-radius")}}NeenNeen
{{cssxref("box-shadow")}}NeenNeen
+ +

Keuzevakjes en keuzerondjes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EigenschapNANota
CSS box model
{{cssxref("width")}}Neen[1]Neen[1] +
    +
  1. Sommige browsers voegen extra marges toe, andere vergroten het element.
    2. +
+
{{cssxref("height")}}Neen[1]Neen[1] +
    +
  1. Sommige browsers voegen extra marges toe, andere vergroten het element.
    2. +
+
{{cssxref("border")}}NeenNeen 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}NeenNeen 
Text and font
{{cssxref("color")}}N.V.T.N.V.T. 
{{cssxref("font")}}N.V.T.N.V.T. 
{{cssxref("letter-spacing")}}N.V.T.N.V.T. 
{{cssxref("text-align")}}N.V.T.N.V.T. 
{{cssxref("text-decoration")}}N.V.T.N.V.T. 
{{cssxref("text-indent")}}N.V.T.N.V.T. 
{{cssxref("text-overflow")}}N.V.T.N.V.T. 
{{cssxref("text-shadow")}}N.V.T.N.V.T. 
{{cssxref("text-transform")}}N.V.T.N.V.T. 
Rand en achtergrond
{{cssxref("background")}}NeenNeen 
{{cssxref("border-radius")}}NeenNeen 
{{cssxref("box-shadow")}}NeenNeen 
+ +

Keuzevakken (éénregelig)

+ +

Firefox voorziet geen mogelijkheid om het selectiepijltje van het {{HTMLElement("select")}} element te wijzigen.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EigenschapNANota
CSS box model
{{cssxref("width")}}Gedeeltelijk[1]Gedeeltelijk[1] +
    +
  1. Deze eigenschap werkt voor het {{HTMLElement("select")}} element maar niet voor de {{HTMLElement("option")}} of {{HTMLElement("optgroup")}} elementen.
    2. +
+
{{cssxref("height")}}NeenJa 
{{cssxref("border")}}GedeeltelijkJa 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}Neen[1]Gedeeltelijk[2] +
    +
  1. De eigenschap werkt maar maar niet consistent over browsers op Mac OSX.
    2. +
  2. Deze eigenschap werkt voor het {{HTMLElement("select")}} element maar niet voor de {{HTMLElement("option")}} of {{HTMLElement("optgroup")}} elementen.
    3. +
+
Tekst en font
{{cssxref("color")}}Gedeeltelijk[1]Gedeeltelijk[1] +
    +
  1. Mac OSX ondersteunt niet de WebKit gebaseerde browsers. Evenmin ondersteunt MAC OSX samen met Opera het   {{HTMLElement("option")}} en het {{HTMLElement("optgroup")}} element.
    2. +
+
{{cssxref("font")}}Gedeeltelijk[1]Gedeeltelijk[1] +
    +
  1. WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor de oorspronkelijke elementen. Evenmin ondersteunt MAC OSX samen met Opera het   {{HTMLElement("option")}} en het {{HTMLElement("optgroup")}} element.
    2. +
+
{{cssxref("letter-spacing")}}Gedeeltelijk[1]Gedeeltelijk[1] +
    +
  1. IE9 ondersteunt deze eiegenschap niet voor de {{HTMLElement("select")}}, {{HTMLElement("option")}} en {{HTMLElement("optgroup")}} elementen.  WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor de {{HTMLElement("option")}} en {{HTMLElement("optgroup")}} elementen.
    2. +
+
{{cssxref("text-align")}}Neen[1]Neen[1] +
    +
  1. IE9 op Windows 7 en WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor dit element.
    2. +
+
{{cssxref("text-decoration")}}Gedeeltelijk[1]Gedeeltelijk[1] +
    +
  1. Alleen Firefox ondersteunt deze eigenschap volledig. Opera ondersteunt deze eigenschap helemaal niet en andere browsers ondersteunen alleen het {{HTMLElement("select")}} element.
    2. +
+
{{cssxref("text-indent")}}Gedeeltelijk[1][2]Gedeeltelijk[1][2] +
    +
  1. De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.
    2. +
  2. IE9 ondersteunt deze eigenschap niet.
    3. +
+
{{cssxref("text-overflow")}}NeenNeen 
{{cssxref("text-shadow")}}Gedeeltelijk[1][2]Gedeeltelijk[1][2] +
    +
  1. De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.
    2. +
  2. IE9 ondersteunt deze eigenschap niet.
    3. +
+
{{cssxref("text-transform")}}Gedeeltelijk[1]Gedeeltelijk[1] +
    +
  1. De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.
    2. +
+
Rand en achtergrond
{{cssxref("background")}}Gedeeltelijk[1]Gedeeltelijk[1] +
    +
  1. De meeste browsers ondersteunen alleen het {{HTMLElement("select")}} element.
    2. +
+
{{cssxref("border-radius")}}Gedeeltelijk[1]Gedeeltelijk[1]
{{cssxref("box-shadow")}}NeenGedeeltelijk[1]
+ +

Keuzevakken (meerregelig)

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EigenschapNANota
CSS box model
{{cssxref("width")}}JaJa 
{{cssxref("height")}}JaJa 
{{cssxref("border")}}JaJa 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}Gedeeltelijk[1]Gedeeltelijk[1] +
    +
  1. Opera ondersteunt niet {{cssxref("padding-top")}} en {{cssxref("padding-bottom")}} van het {{HTMLElement("select")}} element.
    2. +
+
Tekst en font
{{cssxref("color")}}JaJa 
{{cssxref("font")}}JaJaZie de nota betreffende {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}}Gedeeltelijk[1]Gedeeltelijk[1] +
    +
  1. IE9 ondersteunt deze eigenschap niet voor de {{HTMLElement("select")}}, {{HTMLElement("option")}} en {{HTMLElement("optgroup")}} elementen. WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet voor de {{HTMLElement("option")}} en {{HTMLElement("optgroup")}} elementen.
    2. +
+
{{cssxref("text-align")}}Neen[1]Neen[1] +
    +
  1. IE9 op Windows 7 en WebKit gebaseerde browsers op Mac OSX ondersteunen deze eigenschap niet.
    2. +
+
{{cssxref("text-decoration")}}Neen[1]Neen[1] +
    +
  1. Alleen ondersteund door Firefox en IE9+.
    2. +
+
{{cssxref("text-indent")}}NeenNeen 
{{cssxref("text-overflow")}}NeenNeen 
{{cssxref("text-shadow")}}NeenNeen 
{{cssxref("text-transform")}}Gedeeltelijk[1]Gedeeltelijk[1] +
    +
  1. De meeste browsers ondersteunen deze eigenschap slechts voor het {{HTMLElement("select")}} element.
    2. +
+
Rand en achtergrond
{{cssxref("background")}}JaJa 
{{cssxref("border-radius")}}Ja[1]Ja[1] +
    +
  1. Bij Opera wordt de {{cssxref("border-radius")}} eigenschap alleen ondersteund als expliciet een rand ingesteld is.
    2. +
+
{{cssxref("box-shadow")}}NeenGedeeltelijk[1] +
    +
  1. IE9 ondersteunt deze eigenschap niet.
    2. +
+
+ +

Datalist

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EigenschapNANota
CSS box model
{{cssxref("width")}}NeenNeen 
{{cssxref("height")}}NeenNeen 
{{cssxref("border")}}NeenNeen 
{{cssxref("margin")}}NeenNeen 
{{cssxref("padding")}}NeenNeen 
Tekst en font
{{cssxref("color")}}NeenNeen 
{{cssxref("font")}}NeenNeen 
{{cssxref("letter-spacing")}}NeenNeen 
{{cssxref("text-align")}}NeenNeen 
{{cssxref("text-decoration")}}NeenNeen 
{{cssxref("text-indent")}}NeenNeen 
{{cssxref("text-overflow")}}Neen +

Neen

+ 		 
{{cssxref("text-shadow")}}NeenNeen 
{{cssxref("text-transform")}}NeenNeen 
Rand en achtergrond
{{cssxref("background")}}NeenNeen 
{{cssxref("border-radius")}}NeenNeen 
{{cssxref("box-shadow")}}NeenNeen 
+ +

Bestandslijst

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EigenschapNANota
CSS box model
{{cssxref("width")}}NeenNeen 
{{cssxref("height")}}NeenNeen 
{{cssxref("border")}}NeenNeen 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}NeenNeen 
Tekst en font
{{cssxref("color")}}JaJa 
{{cssxref("font")}}Neen[1]Neen[1] +
    +
  1. Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
    2. +
+
{{cssxref("letter-spacing")}}Gedeeltelijk[1]Gedeeltelijk[1] +
    +
  1. Veel browsers passen deze eigenschap toe op de selectieknop.
    2. +
+
{{cssxref("text-align")}}NeenNeen 
{{cssxref("text-decoration")}}NeenNeen 
{{cssxref("text-indent")}}Gedeeltelijk[1]Gedeeltelijk[1] +
    +
  1. Reageert min of meer als een extra linker marge buiten het element.
    2. +
+
{{cssxref("text-overflow")}}NeenNeen 
{{cssxref("text-shadow")}}NeenNeen 
{{cssxref("text-transform")}}NeenNeen 
Border and background
{{cssxref("background")}}Neen[1]Neen[1] +
    +
  1. Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
    2. +
+
{{cssxref("border-radius")}}NeenNeen 
{{cssxref("box-shadow")}}NeenGedeeltelijk[1] +
    +
  1. IE9 ondersteunt deze eigenschap niet.
    2. +
+
+ +

Datumselectie

+ +

Vele eigenschappen worden ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
+  

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EigenschapNANota
CSS box model
{{cssxref("width")}}NeenNeen 
{{cssxref("height")}}NeenNeen 
{{cssxref("border")}}NeenNeen 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}NeenNeen 
Tekst en font
{{cssxref("color")}}NeenNeen 
{{cssxref("font")}}NeenNeen 
{{cssxref("letter-spacing")}}NeenNeen 
{{cssxref("text-align")}}NeenNeen 
{{cssxref("text-decoration")}}NeenNeen 
{{cssxref("text-indent")}}NeenNeen 
{{cssxref("text-overflow")}}NeenNeen 
{{cssxref("text-shadow")}}NeenNeen 
{{cssxref("text-transform")}}NeenNeen 
Rand en achtergrond
{{cssxref("background")}}NeenNeen 
{{cssxref("border-radius")}}NeenNeen 
{{cssxref("box-shadow")}}NeenNeen 
+ +

Kleurenselectie

+ +

Er zijn op het ogenblik te weinig toepassingen om een betrouwbaar gedrag te vast te stellen.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EigenschapNANota
CSS box model
{{cssxref("width")}}JaJa 
{{cssxref("height")}}Neen[1]Ja +
    +
  1. Opera behandelt deze eigenschap als een gewoon selectie element met dezelfde restricties.
    2. +
+
{{cssxref("border")}}JaJa 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}Neen[1]Ja +
    +
  1. Opera behandelt deze eigenschap als een gewoon selectie element met dezelfde restricties.
    2. +
+
Tekst en font
{{cssxref("color")}}N.V.T.N.V.T. 
{{cssxref("font")}}N.V.T.N.V.T. 
{{cssxref("letter-spacing")}}N.V.T.N.V.T. 
{{cssxref("text-align")}}N.V.T.N.V.T. 
{{cssxref("text-decoration")}}N.V.T.N.V.T. 
{{cssxref("text-indent")}}N.V.T.N.V.T. 
{{cssxref("text-overflow")}}N.V.T.N.V.T. 
{{cssxref("text-shadow")}}N.V.T.N.V.T. 
{{cssxref("text-transform")}}N.V.T.N.V.T. 
Rand en achtergrond
{{cssxref("background")}}Neen[1]Neen[1] +
    +
  1. Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
    2. +
+
{{cssxref("border-radius")}}Neen[1]Neen[1]
{{cssxref("box-shadow")}}Neen[1]Neen[1]
+ +

Meters en voortgangsbalken

+ +

Er zijn op het ogenblik te weinig toepassingen om een betrouwbaar gedrag te vast te stellen.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EigenschapNANota
CSS box model
{{cssxref("width")}}JaJa 
{{cssxref("height")}}JaJa 
{{cssxref("border")}}GedeeltelijkJa 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}JaGedeeltelijk[1] +
    +
  1. Chrome verbergt de {{HTMLElement("progress")}} en  {{HTMLElement("meter")}} elementen wanneer de {{cssxref("padding")}} eigenschap is toegepast op een element.
    2. +
+
Tekst en font
{{cssxref("color")}}N.V.T.N.V.T. 
{{cssxref("font")}}N.V.T.N.V.T. 
{{cssxref("letter-spacing")}}N.V.T.N.V.T. 
{{cssxref("text-align")}}N.V.T.N.V.T. 
{{cssxref("text-decoration")}}N.V.T.N.V.T. 
{{cssxref("text-indent")}}N.V.T.N.V.T. 
{{cssxref("text-overflow")}}N.V.T.N.V.T. 
{{cssxref("text-shadow")}}N.V.T.N.V.T. 
{{cssxref("text-transform")}}N.V.T.N.V.T. 
Rand en achtergrond
{{cssxref("background")}}Neen[1]Neen[1] +
    +
  1. Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
    2. +
+
{{cssxref("border-radius")}}Neen[1]Neen[1]
{{cssxref("box-shadow")}}Neen[1]Neen[1]
+ +

Bereik

+ +

Er is geen standaard manier om de stijl van het handvat van het bereik te veranderen en Opera laat helemaal geen wijziging toe van de standaard stijl.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EigenschapNANota
CSS box model
{{cssxref("width")}}JaJa 
{{cssxref("height")}}Gedeeltelijk[1]Gedeeltelijk[1] +
    +
  1. Chrome en Opera voegen wat extra ruimte toe rond het element terwijl Opera op Windows 7 de greep vergroot.
    2. +
+
{{cssxref("border")}}NeenJa 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}Gedeeltelijk[1]Ja +
    +
  1. {{cssxref("padding")}} wordt gebruikt maar heeft geen visueel effect.
    2. +
+
Tekst en font
{{cssxref("color")}}N.V.T.N.V.T. 
{{cssxref("font")}}N.V.T.N.V.T. 
{{cssxref("letter-spacing")}}N.V.T.N.V.T. 
{{cssxref("text-align")}}N.V.T.N.V.T. 
{{cssxref("text-decoration")}}N.V.T.N.V.T. 
{{cssxref("text-indent")}}N.V.T.N.V.T. 
{{cssxref("text-overflow")}}N.V.T.N.V.T. 
{{cssxref("text-shadow")}}N.V.T.N.V.T. 
{{cssxref("text-transform")}}N.V.T.N.V.T. 
Border and background
{{cssxref("background")}}Neen[1]Neen[1] +
    +
  1. Wordt ondersteund maar er is te weinig consistentie over de verschillende browsers om betrouwbaar te zijn.
    2. +
+
{{cssxref("border-radius")}}Neen[1]Neen[1]
{{cssxref("box-shadow")}}Neen[1]Neen[1]
+ +

Afbeeldingsknoppen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EigenschapNANota
CSS box model
{{cssxref("width")}}JaJa 
{{cssxref("height")}}JaJa 
{{cssxref("border")}}JaJa 
{{cssxref("margin")}}JaJa 
{{cssxref("padding")}}JaJa 
Tekst en font
{{cssxref("color")}}N.V.T.N.V.T. 
{{cssxref("font")}}N.V.T.N.V.T. 
{{cssxref("letter-spacing")}}N.V.T.N.V.T. 
{{cssxref("text-align")}}N.V.T.N.V.T. 
{{cssxref("text-decoration")}}N.V.T.N.V.T. 
{{cssxref("text-indent")}}N.V.T.N.V.T. 
{{cssxref("text-overflow")}}N.V.T.N.V.T. 
{{cssxref("text-shadow")}}N.V.T.N.V.T. 
{{cssxref("text-transform")}}N.V.T.N.V.T. 
Rand en achtergrond
{{cssxref("background")}}JaJa 
{{cssxref("border-radius")}}Gedeeltelijk[1]Gedeeltelijk[1] +
    +
  1. IE9 ondersteunt deze eigenschap niet.
    2. +
+
{{cssxref("box-shadow")}}Gedeeltelijk[1]Gedeeltelijk[1] +
    +
  1. IE9 ondersteunt deze eigenschap niet.
    2. +
+
+ +

 

diff --git a/files/nl/learn/forms/sending_and_retrieving_form_data/index.html b/files/nl/learn/forms/sending_and_retrieving_form_data/index.html new file mode 100644 index 0000000000..feea7f5f78 --- /dev/null +++ b/files/nl/learn/forms/sending_and_retrieving_form_data/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/forms/styling_web_forms/index.html b/files/nl/learn/forms/styling_web_forms/index.html new file mode 100644 index 0000000000..f6c3cda07c --- /dev/null +++ b/files/nl/learn/forms/styling_web_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/forms/your_first_form/index.html b/files/nl/learn/forms/your_first_form/index.html new file mode 100644 index 0000000000..43c489e5a9 --- /dev/null +++ b/files/nl/learn/forms/your_first_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/getting_started_with_the_web/basis_software_installeren/index.html b/files/nl/learn/getting_started_with_the_web/basis_software_installeren/index.html deleted file mode 100644 index 118139d178..0000000000 --- a/files/nl/learn/getting_started_with_the_web/basis_software_installeren/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Basissoftware installeren -slug: Learn/Getting_started_with_the_web/Basis_software_installeren -tags: - - Beginner - - Browser - - Gereedschap - - Leren - - Setup - - WebMechanics - - tekstverwerker -translation_of: Learn/Getting_started_with_the_web/Installing_basic_software ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
- -
-

In Basissoftware installeren gaan we u laten zien welke gereedschappen u nodig hebt om eenvoudige websites te maken en hoe u deze gereedschappen correct kunt installeren.

-
- -

Welke gereedschappen gebruiken de professionals?

- - - -

Welke gereedschappen heb ik nu nodig?

- -

Het is een akelige lijst, maar gelukkig kunt u al met webontwikkeling beginnen zonder al te veel kennis over dit gereedschap. In dit artikel gaan we de minimale benodigdheden installeren: een tekstverwerker en een paar moderne webbrowsers.

- -

Een tekstverwerker installeren

- -

Waarschijnlijk hebt u al een eenvoudige tekstverwerker op uw computer. Windows bevat standaard Notepad en OS X heeft TextEdit. Linux verschilt per distro; gedit wordt standaard met Ubuntu geïnstalleerd.

- -

Voor webontwikkeling, kunt u wel een beter programma gebruiken dan Notepad of TextEdit. Wij raden beginners Brackets aan, een gratis editor met een live voorbeeldmodus en hints voor de code.

- -

Moderne webbrowsers installeren

- -

We beginnen met de installatie van een paar webbrowsers op uw desktop waarmee we onze code kunnen uittesten. Kies uw besturingssysteem hieronder en klik op de relevante links om de installatieprogramma's van uw favoriete browsers te downloaden :

- - - -

Voor u verder gaat, zou u op zijn minst twee van deze browsers geïnstalleerd moeten hebben om de code mee te testen.

- -

{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}

diff --git a/files/nl/learn/getting_started_with_the_web/bestanden_beheren/index.html b/files/nl/learn/getting_started_with_the_web/bestanden_beheren/index.html deleted file mode 100644 index 66219f2149..0000000000 --- a/files/nl/learn/getting_started_with_the_web/bestanden_beheren/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Omgaan met bestanden -slug: Learn/Getting_started_with_the_web/Bestanden_beheren -tags: - - Beginner - - Bestanden - - CodingScripting - - Gids - - HTML - - Theorie - - website -translation_of: Learn/Getting_started_with_the_web/Dealing_with_files ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
- -
-

Een website bestaat uit vele bestanden: tekstinhoud, code, stijlbladen, media- inhoud enzovoort. Als u een website bouwt, is het nodig deze bestanden in een verstandige structuur onder te brengen op uw lokale computer. U moet ervoor zorgen dat ze met elkaar kunnen praten en uw volledige inhoud moet er goed uitzien, vooraleer u uw bestanden naar een server uploadt. Omgaan met bestanden bespreekt een aantal problemen waar u zich bewust van zou moeten zijn, zodat u een verstandige mappenstructuur voor uw website kunt opzetten.

-
- -

Waar moet uw website op uw computer leven?

- -

Als u op uw lokale computer aan uw website werkt, moet u alle gerelateerde bestanden in een enkele map bewaren die de mappenstructuur van de gepuliceerde website op de server spiegelt. Deze map kan eender waar leven, maar u kunt hem het beste ergens plaatsen waar u hem gemakkelijk terugvindt; misschien op uw Bureaublad, in uw Home-map of in het hoofdpad (i.e. the root) van uw harde schijf. 

- -
    -
  1. Kies een plaats om uw website-projecten op te slaan. Crëeer hier een nieuwe map die u webprojecten (of iets gelijkaardigs) noemt. Hier zullen al uw webprojecten leven. 
    2. -
  2. In deze eerste map, maakt u een nog een map waarin u uw eerste website opslaat. Noem hem testsite (of kies een naam die meer tot uw verbeelding spreekt).
    3. -
- -

Over hoofdletters en spaties 

- -

U zult merken dat we u in dit artikel zullen vragen om de namen van u bestanden en mappen volledig in kleine letters en zonder spaties te schrijven. Er zijn twee redenen voor:  

- -
    -
  1. Vele computers, vooral webservers, zijn hoofdlettergevoelig. Stel dat u een afbeelding op uw website zet met dit pad:  testsite/MijnAfbeelding.jpg. In een ander bestand probeert u het beeld op te roepen met testsite/mijnafbeelding.jpg. Tja, dat zal misschien niet werken. 
    2. -
  2. Browsers, webservers en andere programmeertalen gaan niet consistent om met spaties. Als u bijvoorbeeld spaties in uw bestandsnaam gebruikt, is het mogelijk dat sommige systemen deze bestandsnaam als twee bestandsnamen zullen behandelen. Sommige servers zullen de spaties in uw bestandsnamen door  "%20"  (de tekens die spaties in URIs voorstellen) vervangen en ze zullen al uw hyperlinks breken. Het is beter om woorden van elkaar te scheiden met underscores (i.e. zo'n streepje dat op de regel zelf ligt) of door koppeltekens:  my-file.html of my_file.html.
    3. -
- -

Daarom is het beter om er een gewoonte van te maken uw bestands- en mappennamen altijd met kleine letters en zonder spaties te schrijven, tenminste tot u weet wat u doet. Op die manier zult u minder problemen tegenkomen. 

- -

Wat voor een structuur moet uw website hebben?

- -

Nu gaan we de structuur van onze website bekijken. De meest voorkomende zaken die we op een website tegenkomen, zijn een index.html-bestand en mappen met afbeeldingen, stijlbladen en scriptbestanden erin.  Die gaan we nu maken:

- -
    -
  1. index.html: Dit betand zal standaard uw startpagina (homepage in het Engels) bevatten, d.w.z de tekst en de afbeeldingen die mensen zien als ze naar uw site surfen. Maak een nieuw bestand met uw broncodeverwerker en noem het index.html . Sla het op in uw test-site-map.
    2. -
  2. Afbeeldingenmap: In deze map zullen alle afbeeldingen zitten die u op uw website gebruikt. Creëer in uw testsite-map een map die afbeeldingen heet. 
    3. -
  3. Stijlbladenmap: Deze map zal de CSS-code bevatten die u gebruikt om een stijl aan uw inhoud te geven. (door bijvoorbeeld de kleur van uw tekst en die van de achtergrond te bepalen). In uw testsite-map maakt u een map die stijlen heet.
    4. -
  4. Scriptsmap: Deze map zal alle JavaScriptcode bevatten die wordt gebruikt om interactieve functionaliteit aan uw site toe te voegen (bijvoorbeeld knoppen die data inladen als erop wordt geklikt). Creëer in uw testsite-map een map die scripts heet.
    5. -
- -
-

Opmerking: Op Windows computers kunt u wat problemen tegenkomen als u de betandsnamen wilt zien, omdat Windows over een hinderlijke optie beschikt die Verberg Bestandsnaamextensies heet en die standaard wordt aangezet. Meestal kunt u die uitzetten door naar Windows Verkenner te gaan, het vinkje uit het keuzevak te verwijderen en dan op OK klikken. Specifieke informatie die de correcte procedure voor uw Windowsversie behandelt, kunt u met Yahoo! opzoeken. 

-
- -

Bestandspaden

- -

Om bestanden met elkaar te laten praten, moet u paden tussen hen maken  — een route zodat elk bestand weet waar de anderen zijn. Om dit te demonstreren, zullen we een beetje HTML in ons index.html bestand plaatsen, zodat het de afbeeldingen toont die u in het vorige artikel ("Hoe gaat uw website eruitzien?") hebt gekozen.

- -
    -
  1. Kopiëer de afbeelding die u reeds hebt gekozen in uw afbeeldingenmap. 
    2. -
  2. Open uw index.html-bestand en plaats de volgende code exact zoals die wordt getoond in het bestand. Maakt u zich nu nog geen zorgen over wat het allemaal betekent   — we zullen deze structuren later in deze reeks in detail bekijken. - 
    <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Mijn testpagina</title>
-  </head>
-  <body>
-    <img src="" alt="Mijn testafbeelding">
-  </body>
-</html>
    -
    3. -
  3. The regel <img src="" alt="Mijn testafbeelding"> is de HTML-code waarmee een afbeelding in de webpagina wordt ingevoegd. We moeten de HTML vertellen waar de afbeelding is. Het beeld zit in de afbeeldingenmap en die zit in dezelfde map als index.html. Om  in de bestandsstructuur van index.html tot aan onze afbeelding af te dalen, hebben we het volgende bestandspad nodig:  afbeeldingen/jouw-beeld-bestandsnaam. Onze afbeelding heet bijvoorbeeld firefox-icon.png, dus het bestandspad is afbeeldingen/firefox-icon.png.
    4. -
  4. Schrijf het bestandspad in uw HTML-code tussen de dubbele aanhalingstekens van de src="" code.
    5. -
  5. Sla uw HTML-bestand op en laadt het dan in in uw webbrowser (dubbelklik op het bestand). U zou nu uw niewe webpagina moeten zien met uw afbeelding erin!
    6. -
- -

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

- -

Enkele algemene regels voor bestandspaden:

- - - -

Voorlopig is dat alles wat u moet weten.

- -
-

Opmerking: Het Windows bestandensysteem gebruikt vaak schuine streepjes die naar achter leunen in plaats van naar voor. Bijvoorbeeld  C:\windows. Op zich is dat niet zo erg. Zelfs als u uw website ontwikkelt met Windows, moet u in uw code nog steeds schuine streepjes gebruiken die naar voor leunen.

-
- -

Wat moet er nog worden gedaan? 

- -

Voorlopig is dit ongeveer alles. Uw bestandenstructuur moet er ongeveer zo uitzien:

- -

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}

diff --git a/files/nl/learn/getting_started_with_the_web/css_basics/index.html b/files/nl/learn/getting_started_with_the_web/css_basics/index.html new file mode 100644 index 0000000000..8b24396a2f --- /dev/null +++ b/files/nl/learn/getting_started_with_the_web/css_basics/index.html @@ -0,0 +1,278 @@ +--- +title: De basisbegrippen van CSS +slug: Learn/Getting_started_with_the_web/CSS_basisbegrippen +tags: + - Beginner + - CSS + - CodingScripting + - Leren + - Stijlen + - Web +translation_of: Learn/Getting_started_with_the_web/CSS_basics +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

CSS (Cascading Style Sheets of Waterval Stijlbestanden) is de code die u gebruikt om uw webpagina van stijlen te voorzien. In De Basisbegrippen van CSS nemen we alles door wat u nodig hebt om te beginnen. We beantwoorden vragen zoals : Hoe maak ik mijn tekst zwart of rood? Hoe laat ik mijn inhoud op die en die plaats in het scherm verschijnen? Hoe versier ik mijn webpagina met afbeeldingen en kleuren?

+
+ +

Dus wat is CSS eigenlijk?

+ +

Zoals HTML is CSS  niet echt een programmeertaal. Het is ook geen opmaaktaal. Het is een stijlbladtaal, dat wil zeggen, dat het u toestaat om stijlen op geselecteerde elementen in uw HTML-documenten toe te passen. Om bijvoorbeeld, alle paragraaf-elementen in uw HTML-pagina te selecteren en de tekst erin rood te maken, zou u deze CSS schrijven:

+ +
p {
+  color: red;
+}
+ +

Probeer het eens: kopieer deze drie CSS-regels in een nieuw bestand in uw broncode-editor. Dan noemt u het bestand stijl.css en slaat u het op in uw stijlbladenmap.

+ +

Maar we moeten de CSS nog op uw HTML-document toepassen, anders zal de CSS-stijl geen effect hebben op de manier waarop uw browser het HTML-document weergeeft.  (Als u niet aan ons project hebt meegedaan, lees dan eerst Omgaan met Bestanden en Basisbegrippen HTML zodat u weet wat u eerst moet doen.)

+ +
    +
  1. Open uw index.html bestand en plak de volgende lijnen ergens in het hoofd, dat wil zeggen tussen de <head> en </head>-labels: + + 
    <link href="stijlen/stijl.css" rel="stylesheet" type="text/css">
    +
    2. +
  2. Sla index.html op en laadt het in uw browser. U zou iets moeten zien dat er ongeveer zo uitziet:
    3. +
+ +

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.

+ +

Als de tekst van uw paragraaf nu rood is, kan ik u feliciteren; u hebt nu uw eerste succesvolle CSS geschreven! 

+ +

Anatomie van een set CSS-regels

+ +

We gaan de CSS hierboven wat grondiger bekijken:

+ +

+ +

De hele structuur wordt een regel-set (een rule set in het Engels) genoemd (maar vaak afgekort tot "stijlregel", i.e. "rule"). Elk onderdeel heeft ook zijn eigen naam:

+ +
+
Selector
+
Dit is de HTML-elementnaam aan het begin van de regelset. Het selecteert de elementen waarop een stijl zal worden toegepast (in dit geval p-elementen). Om een ander element een stijl te geven, verandert u gewoon de selector.
+
Stijldeclaratie (declaration)
+
Een stijldeclaratie is enkele stijlregel, zoals color: red;. De declaratie bepaalt welke eigenschappen (properties in het Engels) van het element een stijl zullen krijgen.
+
Eigenschappen (properties)
+
Met eigenschappen kunt u een HTML-elementstijlen (In dit geval is color een eigenschap van de p-elementen). Met CSS kunt u de eigenschappen kiezen die u met uw regel wilt beïnvloeden. 
+
Stijlwaarden (property values)
+
Aan de rechterkant van de eigenschap, na de dubbele punt (:), vinden we de stijlwaarde die per eigenschap vele verschillende gedaantes kan aannemen (behalve rood, zijn er nog vele andere kleuren).
+
+ +

Dit zijn de andere belangrijke delen van de syntax:

+ + + +

Dus om meerdere stijlwaarden tegelijk te gebruiken, moet u ze apart en gescheiden door puntkomma's schrijven zoals hieronder:

+ +
p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}
+ +

Meerdere elementen selecteren

+ +

U kunt meerdere elementtypes selecteren en één enkele regel op hen allemaal toepassen. Ze worden met komma's van elkaar gescheiden. Bijvoorbeeld:

+ +
p,li,h1 {
+  color: red;
+}
+ +

Verschillende selectortypes

+ +

Er zijn vele verschillende selectortypes. Hierboven hebben we enkel elementselectoren bekeken. Dit zijn selectoren die alle elementen van een bepaald type in een HTML-document selecteren. Maar we kunnen veel preciezer dan dat selecteren. Hieronder volgende de gebruikelijkste selectortypes:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SelectornaamWat het selecteertVoorbeeld
Elementselector (soms een label of typeselector genoemd)Alle HTML-elementen van het gekozen type.p
+ selecteert <p>
ID-selectorHet element op de pagina die het ID als attribuut heeft gekregen (in een HTML-pagina is slechts 'één element per ID toegestaan).#my-id
+ selecteert <p id="my-id"> of <a id="my-id">
Class-selectorEen of meerdere elementen op de pagina die een specifieke class als attribuut hebben gekregen. (In het Nederlands is dit een klasse, maar u moet het Engelse 'class' als selector gebruiken.)   (verschillende elementen kunnen dezelfde klasse krijgen )..my-class
+ selecteert <p class="my-class"> en <a class="my-class">
Attribuut- selectorEen of meerdere elementen op de pagina met het specifieke attribuut. img[src]
+ selecteert <img src="myimage.png"> maar niet <img>
Pseudo-class selectorEen of meerdere gekozen elementen maar enkel als ze zich in een specifieke staat bevinden, bijvoorbeeld als u er met uw muis overheen beweegt (dat is "hover" in het Engels). a:hover
+ selecteert <a>, maar enkel als de muis over de hyperlink heen beweegt.
+ +

Er zijn nog veel meer selectoren om te onderzoeken en u kunt er een gedetailleerde lijst van vinden in onze Selectorengids.

+ +

Lettertypes en tekst

+ +

Nu we een inleiding op CSS hebben verwerkt, kunnen we meer stijlregels en informatie aan ons stijl.css bestand toevoegen om ons voorbeeld er mooi uit te laten zien. Eerst gaan we aan onze lettertypes en tekst werken.

+ +
    +
  1. Om te beginnen, gaat u terug en vindt u de code van Google Fonts die u ergens veilig hebt opgeslagen. Voeg het  <link ... >-element in het hoofd van index.html toe (opnieuw, ergens tussen de <head> en </head>-labels). Het zal er ongeveer zo uitzien: + + 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    +
    2. +
  2. Dan verwijdert u de regel die in uw stijl.css bestand staat. Die regel was een goede test, maar rode tekst ziet er eigenlijk echt niet goed uit. 
    3. +
  3. Vervang de verwijderde regel door de regels die u hieronder in het voorbeeld ziet, terwijl u de tijdelijke aanduiding door het lettertype (i.e. de 'font-family'-regel) vervangt die u uit Google Fonts hebt gehaald. ('font-family' betekent gewoon een of meerdere lettertypes die u voor uw tekst wilt gebruiken). Deze regel stelt een globaal basislettertype in en de lettergrootte voor de volledige pagina. ( <html> is het ouderelement van de volledige pagina en alle elementen die erin zitten erven hetzelfde lettertype en dezelfde lettergrootte): + 
    html {
+  font-size: 10px; /* px betekent 'pixels': de basislettergrootte is nu 10 pixels hoog  */
+  font-family: tijdelijke aanduiding: dit zou de rest van de stijlregel moeten zijn die u uit Google fonts hebt gehaald
+}
    + +
    +

    Opmerking: In het voorbeeld hierboven is er een commentaar toegevoegd dat uitlegt wat  "px" betekent. Alles dat in een CSS-document tussen /* en */ staat is een CSS-commentaar, dat de browser zal negeren wanneer het de code genereert. Dit is een plek voor u waar u nuttige opmerkingen kunt schrijven over de code waar u mee bezig bent.

    +
    +
    4. +
  4. Nu gaan we de lettergroottes instellen voor elementen binnen het HTML body ({{htmlelement("h1")}}, {{htmlelement("li")}}, and {{htmlelement("p")}}) die tekst bevatten. We gaan ook de tekst van onze hoofding centreren en de lijnhoogte en letterafstand op de inhoud van het body instellen om die wat leesbaarder te maken: 
    5. +
  5. + 
    h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}
    +
    6. +
+ +

U kunt deze px-waarden afstemmen tot u het ontwerp hebt dat u wilt, maar in grote lijnen moet het er ongeveer zo uitzien:

+ +

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

+ +

Dozen, dozen, het gaat allemaal over dozen

+ +

Er is een ding dat u zult merken als u CSS-code schrijft. Heel vaak gaat die over dozen  — hoe u hun grootte, kleur, positie, enz. instelt. De meeste van de HTML-elementen op uw pagina kunnen als dozen worden gezien die op elkaar zijn gestapeld.

+ +

a big stack of boxes or crates sat on top of one another

+ +

Het is dan ook geen verrassing dat CSS-opmaak hoofdzakelijk op het doos-model is gebaseerd. Elk van de blokken, die plaats innemen op uw pagina, heeft eigenschappen zoals die hieronder:

+ + + +

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

+ +

In dit gedeelte gebruiken we ook:

+ + + +

We gaan beginnen met nog meer CSS-toevoegingen aan onze pagina! Voeg al deze nieuwe regels toe onderaan uw pagina en wees niet bang om met de waarden van de eigenschappen te experimenteren. 

+ +

De kleur van de pagina veranderen

+ +
html {
+  background-color: #00539F;
+}
+ +

Deze regel stelt de achtergrondkleur van de hele pagina in. Verander de kleurcode hierboven in eender welke kleur die u kiest als u het ontwerp van uw site plant.

+ +

Uitzoeken hoe de body in elkaar steekt

+ +
body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}
+ +

En dan nu het body-element. Er zijn nogal wat stijldeclaraties hier en we gaan er een per een doorheen:

+ + + +

Onze hoofdtitel positioneren en stijlen

+ +
h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}
+ +

Het is u misschien al opgevallen dat er een afschuwelijk gat aan de bovenkant van de body zit. Dat gebeurt, omdat browsers een default styling (een standaardstijl) op het {{htmlelement("h1")}}- element toepassen (en ook op andere), zelfs als u geen enkele CSS hebt ingesteld! Dat klinkt misschien als een slecht idee, maar we willen dat een onopgemaakte pagina toch leesbaar is. Om van dat gat af te raken hebben we de default styling opgeheven door de  marge op 0 te zetten:  margin: 0;.

+ +

We gaan verder met de padding van de onder- en bovenkant van de grootste heading (dat is dus de hoofdtitel). Die hebben we 20 pixels gegeven en we hebben de tekst van de heading dezelfde kleur gegeven als de achtergrondkleur van de html.

+ +

We hebben hier een interessante eigenschap gebruikt: text-shadow, die past een slagschaduw toe op de tekstinhoud van het element. Het krijgt de volgende vier waarden:

+ + + +

Probeer opnieuw met verschillende waarden te experimenteren en kijk eens wat u zoal kunt bedenken.

+ +

Het beeld centreren

+ +
img {
+  display: block;
+  margin: 0 auto;
+}
+ +

Tot slot zullen we de afbeelding centreren zodat die er beter uitziet. We zouden opnieuw de margin: 0 auto truck kunnen we gebruiken zoals we dat voor de body hebben gedaan, maar we moeten ook iets anders doen. Het body-element zit namelijk op block niveau, wat wil zeggen dat het ruimte inneemt op de pagina en margin-waarden kan krijgen (het kan ook andere waarden krijgen die de afstand tussen elementen bepalen).  Afbeeldingen, daarentegen, zijn inline elementen, wat wil zeggen dat zij dat niet kunnen. Dus, om de afbeelding marges te kunnen geven, moet het beeld zich gedragen als een element op block niveau. We doen dat met  display: block;.(display is weergave in het Nederlands)

+ +
+

Opmerking: Maakt u zich geen zorgen als u display: block; en het block/inline verschil nog niet begrijpt. Dat komt als u CSS grondiger bestudeert. U kunt meer over de verschillende display-waarden ontdekken op onze display referentiepagina.

+
+ +

Conclusie

+ +

Als u alle instructies in dit artikel hebt gevolgd, zou u een pagina moeten hebben gemaakt die er ongeveer zo uitziet  (U kan ook onze versie hier bekijken):

+ +

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

+ +

Als u vast komt te zitten, kunt u uw werk altijd vergelijken met onze voltooide voorbeeldcode op Github.

+ +

Hier hebben we u niet meer dan de eerste stappen op het CSS-pad laten zetten. Ga naar onze CSS Learning topic om meer te ontdekken.

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}

diff --git a/files/nl/learn/getting_started_with_the_web/css_basisbegrippen/index.html b/files/nl/learn/getting_started_with_the_web/css_basisbegrippen/index.html deleted file mode 100644 index 8b24396a2f..0000000000 --- a/files/nl/learn/getting_started_with_the_web/css_basisbegrippen/index.html +++ /dev/null @@ -1,278 +0,0 @@ ---- -title: De basisbegrippen van CSS -slug: Learn/Getting_started_with_the_web/CSS_basisbegrippen -tags: - - Beginner - - CSS - - CodingScripting - - Leren - - Stijlen - - Web -translation_of: Learn/Getting_started_with_the_web/CSS_basics ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
- -
-

CSS (Cascading Style Sheets of Waterval Stijlbestanden) is de code die u gebruikt om uw webpagina van stijlen te voorzien. In De Basisbegrippen van CSS nemen we alles door wat u nodig hebt om te beginnen. We beantwoorden vragen zoals : Hoe maak ik mijn tekst zwart of rood? Hoe laat ik mijn inhoud op die en die plaats in het scherm verschijnen? Hoe versier ik mijn webpagina met afbeeldingen en kleuren?

-
- -

Dus wat is CSS eigenlijk?

- -

Zoals HTML is CSS  niet echt een programmeertaal. Het is ook geen opmaaktaal. Het is een stijlbladtaal, dat wil zeggen, dat het u toestaat om stijlen op geselecteerde elementen in uw HTML-documenten toe te passen. Om bijvoorbeeld, alle paragraaf-elementen in uw HTML-pagina te selecteren en de tekst erin rood te maken, zou u deze CSS schrijven:

- -
p {
-  color: red;
-}
- -

Probeer het eens: kopieer deze drie CSS-regels in een nieuw bestand in uw broncode-editor. Dan noemt u het bestand stijl.css en slaat u het op in uw stijlbladenmap.

- -

Maar we moeten de CSS nog op uw HTML-document toepassen, anders zal de CSS-stijl geen effect hebben op de manier waarop uw browser het HTML-document weergeeft.  (Als u niet aan ons project hebt meegedaan, lees dan eerst Omgaan met Bestanden en Basisbegrippen HTML zodat u weet wat u eerst moet doen.)

- -
    -
  1. Open uw index.html bestand en plak de volgende lijnen ergens in het hoofd, dat wil zeggen tussen de <head> en </head>-labels: - - 
    <link href="stijlen/stijl.css" rel="stylesheet" type="text/css">
    -
    2. -
  2. Sla index.html op en laadt het in uw browser. U zou iets moeten zien dat er ongeveer zo uitziet:
    3. -
- -

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.

- -

Als de tekst van uw paragraaf nu rood is, kan ik u feliciteren; u hebt nu uw eerste succesvolle CSS geschreven! 

- -

Anatomie van een set CSS-regels

- -

We gaan de CSS hierboven wat grondiger bekijken:

- -

- -

De hele structuur wordt een regel-set (een rule set in het Engels) genoemd (maar vaak afgekort tot "stijlregel", i.e. "rule"). Elk onderdeel heeft ook zijn eigen naam:

- -
-
Selector
-
Dit is de HTML-elementnaam aan het begin van de regelset. Het selecteert de elementen waarop een stijl zal worden toegepast (in dit geval p-elementen). Om een ander element een stijl te geven, verandert u gewoon de selector.
-
Stijldeclaratie (declaration)
-
Een stijldeclaratie is enkele stijlregel, zoals color: red;. De declaratie bepaalt welke eigenschappen (properties in het Engels) van het element een stijl zullen krijgen.
-
Eigenschappen (properties)
-
Met eigenschappen kunt u een HTML-elementstijlen (In dit geval is color een eigenschap van de p-elementen). Met CSS kunt u de eigenschappen kiezen die u met uw regel wilt beïnvloeden. 
-
Stijlwaarden (property values)
-
Aan de rechterkant van de eigenschap, na de dubbele punt (:), vinden we de stijlwaarde die per eigenschap vele verschillende gedaantes kan aannemen (behalve rood, zijn er nog vele andere kleuren).
-
- -

Dit zijn de andere belangrijke delen van de syntax:

- - - -

Dus om meerdere stijlwaarden tegelijk te gebruiken, moet u ze apart en gescheiden door puntkomma's schrijven zoals hieronder:

- -
p {
-  color: red;
-  width: 500px;
-  border: 1px solid black;
-}
- -

Meerdere elementen selecteren

- -

U kunt meerdere elementtypes selecteren en één enkele regel op hen allemaal toepassen. Ze worden met komma's van elkaar gescheiden. Bijvoorbeeld:

- -
p,li,h1 {
-  color: red;
-}
- -

Verschillende selectortypes

- -

Er zijn vele verschillende selectortypes. Hierboven hebben we enkel elementselectoren bekeken. Dit zijn selectoren die alle elementen van een bepaald type in een HTML-document selecteren. Maar we kunnen veel preciezer dan dat selecteren. Hieronder volgende de gebruikelijkste selectortypes:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectornaamWat het selecteertVoorbeeld
Elementselector (soms een label of typeselector genoemd)Alle HTML-elementen van het gekozen type.p
- selecteert <p>
ID-selectorHet element op de pagina die het ID als attribuut heeft gekregen (in een HTML-pagina is slechts 'één element per ID toegestaan).#my-id
- selecteert <p id="my-id"> of <a id="my-id">
Class-selectorEen of meerdere elementen op de pagina die een specifieke class als attribuut hebben gekregen. (In het Nederlands is dit een klasse, maar u moet het Engelse 'class' als selector gebruiken.)   (verschillende elementen kunnen dezelfde klasse krijgen )..my-class
- selecteert <p class="my-class"> en <a class="my-class">
Attribuut- selectorEen of meerdere elementen op de pagina met het specifieke attribuut. img[src]
- selecteert <img src="myimage.png"> maar niet <img>
Pseudo-class selectorEen of meerdere gekozen elementen maar enkel als ze zich in een specifieke staat bevinden, bijvoorbeeld als u er met uw muis overheen beweegt (dat is "hover" in het Engels). a:hover
- selecteert <a>, maar enkel als de muis over de hyperlink heen beweegt.
- -

Er zijn nog veel meer selectoren om te onderzoeken en u kunt er een gedetailleerde lijst van vinden in onze Selectorengids.

- -

Lettertypes en tekst

- -

Nu we een inleiding op CSS hebben verwerkt, kunnen we meer stijlregels en informatie aan ons stijl.css bestand toevoegen om ons voorbeeld er mooi uit te laten zien. Eerst gaan we aan onze lettertypes en tekst werken.

- -
    -
  1. Om te beginnen, gaat u terug en vindt u de code van Google Fonts die u ergens veilig hebt opgeslagen. Voeg het  <link ... >-element in het hoofd van index.html toe (opnieuw, ergens tussen de <head> en </head>-labels). Het zal er ongeveer zo uitzien: - - 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    -
    2. -
  2. Dan verwijdert u de regel die in uw stijl.css bestand staat. Die regel was een goede test, maar rode tekst ziet er eigenlijk echt niet goed uit. 
    3. -
  3. Vervang de verwijderde regel door de regels die u hieronder in het voorbeeld ziet, terwijl u de tijdelijke aanduiding door het lettertype (i.e. de 'font-family'-regel) vervangt die u uit Google Fonts hebt gehaald. ('font-family' betekent gewoon een of meerdere lettertypes die u voor uw tekst wilt gebruiken). Deze regel stelt een globaal basislettertype in en de lettergrootte voor de volledige pagina. ( <html> is het ouderelement van de volledige pagina en alle elementen die erin zitten erven hetzelfde lettertype en dezelfde lettergrootte): - 
    html {
-  font-size: 10px; /* px betekent 'pixels': de basislettergrootte is nu 10 pixels hoog  */
-  font-family: tijdelijke aanduiding: dit zou de rest van de stijlregel moeten zijn die u uit Google fonts hebt gehaald
-}
    - -
    -

    Opmerking: In het voorbeeld hierboven is er een commentaar toegevoegd dat uitlegt wat  "px" betekent. Alles dat in een CSS-document tussen /* en */ staat is een CSS-commentaar, dat de browser zal negeren wanneer het de code genereert. Dit is een plek voor u waar u nuttige opmerkingen kunt schrijven over de code waar u mee bezig bent.

    -
    -
    4. -
  4. Nu gaan we de lettergroottes instellen voor elementen binnen het HTML body ({{htmlelement("h1")}}, {{htmlelement("li")}}, and {{htmlelement("p")}}) die tekst bevatten. We gaan ook de tekst van onze hoofding centreren en de lijnhoogte en letterafstand op de inhoud van het body instellen om die wat leesbaarder te maken: 
    5. -
  5. - 
    h1 {
-  font-size: 60px;
-  text-align: center;
-}
-
-p, li {
-  font-size: 16px;
-  line-height: 2;
-  letter-spacing: 1px;
-}
    -
    6. -
- -

U kunt deze px-waarden afstemmen tot u het ontwerp hebt dat u wilt, maar in grote lijnen moet het er ongeveer zo uitzien:

- -

a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered

- -

Dozen, dozen, het gaat allemaal over dozen

- -

Er is een ding dat u zult merken als u CSS-code schrijft. Heel vaak gaat die over dozen  — hoe u hun grootte, kleur, positie, enz. instelt. De meeste van de HTML-elementen op uw pagina kunnen als dozen worden gezien die op elkaar zijn gestapeld.

- -

a big stack of boxes or crates sat on top of one another

- -

Het is dan ook geen verrassing dat CSS-opmaak hoofdzakelijk op het doos-model is gebaseerd. Elk van de blokken, die plaats innemen op uw pagina, heeft eigenschappen zoals die hieronder:

- - - -

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

- -

In dit gedeelte gebruiken we ook:

- - - -

We gaan beginnen met nog meer CSS-toevoegingen aan onze pagina! Voeg al deze nieuwe regels toe onderaan uw pagina en wees niet bang om met de waarden van de eigenschappen te experimenteren. 

- -

De kleur van de pagina veranderen

- -
html {
-  background-color: #00539F;
-}
- -

Deze regel stelt de achtergrondkleur van de hele pagina in. Verander de kleurcode hierboven in eender welke kleur die u kiest als u het ontwerp van uw site plant.

- -

Uitzoeken hoe de body in elkaar steekt

- -
body {
-  width: 600px;
-  margin: 0 auto;
-  background-color: #FF9500;
-  padding: 0 20px 20px 20px;
-  border: 5px solid black;
-}
- -

En dan nu het body-element. Er zijn nogal wat stijldeclaraties hier en we gaan er een per een doorheen:

- - - -

Onze hoofdtitel positioneren en stijlen

- -
h1 {
-  margin: 0;
-  padding: 20px 0;
-  color: #00539F;
-  text-shadow: 3px 3px 1px black;
-}
- -

Het is u misschien al opgevallen dat er een afschuwelijk gat aan de bovenkant van de body zit. Dat gebeurt, omdat browsers een default styling (een standaardstijl) op het {{htmlelement("h1")}}- element toepassen (en ook op andere), zelfs als u geen enkele CSS hebt ingesteld! Dat klinkt misschien als een slecht idee, maar we willen dat een onopgemaakte pagina toch leesbaar is. Om van dat gat af te raken hebben we de default styling opgeheven door de  marge op 0 te zetten:  margin: 0;.

- -

We gaan verder met de padding van de onder- en bovenkant van de grootste heading (dat is dus de hoofdtitel). Die hebben we 20 pixels gegeven en we hebben de tekst van de heading dezelfde kleur gegeven als de achtergrondkleur van de html.

- -

We hebben hier een interessante eigenschap gebruikt: text-shadow, die past een slagschaduw toe op de tekstinhoud van het element. Het krijgt de volgende vier waarden:

- - - -

Probeer opnieuw met verschillende waarden te experimenteren en kijk eens wat u zoal kunt bedenken.

- -

Het beeld centreren

- -
img {
-  display: block;
-  margin: 0 auto;
-}
- -

Tot slot zullen we de afbeelding centreren zodat die er beter uitziet. We zouden opnieuw de margin: 0 auto truck kunnen we gebruiken zoals we dat voor de body hebben gedaan, maar we moeten ook iets anders doen. Het body-element zit namelijk op block niveau, wat wil zeggen dat het ruimte inneemt op de pagina en margin-waarden kan krijgen (het kan ook andere waarden krijgen die de afstand tussen elementen bepalen).  Afbeeldingen, daarentegen, zijn inline elementen, wat wil zeggen dat zij dat niet kunnen. Dus, om de afbeelding marges te kunnen geven, moet het beeld zich gedragen als een element op block niveau. We doen dat met  display: block;.(display is weergave in het Nederlands)

- -
-

Opmerking: Maakt u zich geen zorgen als u display: block; en het block/inline verschil nog niet begrijpt. Dat komt als u CSS grondiger bestudeert. U kunt meer over de verschillende display-waarden ontdekken op onze display referentiepagina.

-
- -

Conclusie

- -

Als u alle instructies in dit artikel hebt gevolgd, zou u een pagina moeten hebben gemaakt die er ongeveer zo uitziet  (U kan ook onze versie hier bekijken):

- -

a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.

- -

Als u vast komt te zitten, kunt u uw werk altijd vergelijken met onze voltooide voorbeeldcode op Github.

- -

Hier hebben we u niet meer dan de eerste stappen op het CSS-pad laten zetten. Ga naar onze CSS Learning topic om meer te ontdekken.

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}

diff --git a/files/nl/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/nl/learn/getting_started_with_the_web/dealing_with_files/index.html new file mode 100644 index 0000000000..66219f2149 --- /dev/null +++ b/files/nl/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -0,0 +1,103 @@ +--- +title: Omgaan met bestanden +slug: Learn/Getting_started_with_the_web/Bestanden_beheren +tags: + - Beginner + - Bestanden + - CodingScripting + - Gids + - HTML + - Theorie + - website +translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

Een website bestaat uit vele bestanden: tekstinhoud, code, stijlbladen, media- inhoud enzovoort. Als u een website bouwt, is het nodig deze bestanden in een verstandige structuur onder te brengen op uw lokale computer. U moet ervoor zorgen dat ze met elkaar kunnen praten en uw volledige inhoud moet er goed uitzien, vooraleer u uw bestanden naar een server uploadt. Omgaan met bestanden bespreekt een aantal problemen waar u zich bewust van zou moeten zijn, zodat u een verstandige mappenstructuur voor uw website kunt opzetten.

+
+ +

Waar moet uw website op uw computer leven?

+ +

Als u op uw lokale computer aan uw website werkt, moet u alle gerelateerde bestanden in een enkele map bewaren die de mappenstructuur van de gepuliceerde website op de server spiegelt. Deze map kan eender waar leven, maar u kunt hem het beste ergens plaatsen waar u hem gemakkelijk terugvindt; misschien op uw Bureaublad, in uw Home-map of in het hoofdpad (i.e. the root) van uw harde schijf. 

+ +
    +
  1. Kies een plaats om uw website-projecten op te slaan. Crëeer hier een nieuwe map die u webprojecten (of iets gelijkaardigs) noemt. Hier zullen al uw webprojecten leven. 
    2. +
  2. In deze eerste map, maakt u een nog een map waarin u uw eerste website opslaat. Noem hem testsite (of kies een naam die meer tot uw verbeelding spreekt).
    3. +
+ +

Over hoofdletters en spaties 

+ +

U zult merken dat we u in dit artikel zullen vragen om de namen van u bestanden en mappen volledig in kleine letters en zonder spaties te schrijven. Er zijn twee redenen voor:  

+ +
    +
  1. Vele computers, vooral webservers, zijn hoofdlettergevoelig. Stel dat u een afbeelding op uw website zet met dit pad:  testsite/MijnAfbeelding.jpg. In een ander bestand probeert u het beeld op te roepen met testsite/mijnafbeelding.jpg. Tja, dat zal misschien niet werken. 
    2. +
  2. Browsers, webservers en andere programmeertalen gaan niet consistent om met spaties. Als u bijvoorbeeld spaties in uw bestandsnaam gebruikt, is het mogelijk dat sommige systemen deze bestandsnaam als twee bestandsnamen zullen behandelen. Sommige servers zullen de spaties in uw bestandsnamen door  "%20"  (de tekens die spaties in URIs voorstellen) vervangen en ze zullen al uw hyperlinks breken. Het is beter om woorden van elkaar te scheiden met underscores (i.e. zo'n streepje dat op de regel zelf ligt) of door koppeltekens:  my-file.html of my_file.html.
    3. +
+ +

Daarom is het beter om er een gewoonte van te maken uw bestands- en mappennamen altijd met kleine letters en zonder spaties te schrijven, tenminste tot u weet wat u doet. Op die manier zult u minder problemen tegenkomen. 

+ +

Wat voor een structuur moet uw website hebben?

+ +

Nu gaan we de structuur van onze website bekijken. De meest voorkomende zaken die we op een website tegenkomen, zijn een index.html-bestand en mappen met afbeeldingen, stijlbladen en scriptbestanden erin.  Die gaan we nu maken:

+ +
    +
  1. index.html: Dit betand zal standaard uw startpagina (homepage in het Engels) bevatten, d.w.z de tekst en de afbeeldingen die mensen zien als ze naar uw site surfen. Maak een nieuw bestand met uw broncodeverwerker en noem het index.html . Sla het op in uw test-site-map.
    2. +
  2. Afbeeldingenmap: In deze map zullen alle afbeeldingen zitten die u op uw website gebruikt. Creëer in uw testsite-map een map die afbeeldingen heet. 
    3. +
  3. Stijlbladenmap: Deze map zal de CSS-code bevatten die u gebruikt om een stijl aan uw inhoud te geven. (door bijvoorbeeld de kleur van uw tekst en die van de achtergrond te bepalen). In uw testsite-map maakt u een map die stijlen heet.
    4. +
  4. Scriptsmap: Deze map zal alle JavaScriptcode bevatten die wordt gebruikt om interactieve functionaliteit aan uw site toe te voegen (bijvoorbeeld knoppen die data inladen als erop wordt geklikt). Creëer in uw testsite-map een map die scripts heet.
    5. +
+ +
+

Opmerking: Op Windows computers kunt u wat problemen tegenkomen als u de betandsnamen wilt zien, omdat Windows over een hinderlijke optie beschikt die Verberg Bestandsnaamextensies heet en die standaard wordt aangezet. Meestal kunt u die uitzetten door naar Windows Verkenner te gaan, het vinkje uit het keuzevak te verwijderen en dan op OK klikken. Specifieke informatie die de correcte procedure voor uw Windowsversie behandelt, kunt u met Yahoo! opzoeken. 

+
+ +

Bestandspaden

+ +

Om bestanden met elkaar te laten praten, moet u paden tussen hen maken  — een route zodat elk bestand weet waar de anderen zijn. Om dit te demonstreren, zullen we een beetje HTML in ons index.html bestand plaatsen, zodat het de afbeeldingen toont die u in het vorige artikel ("Hoe gaat uw website eruitzien?") hebt gekozen.

+ +
    +
  1. Kopiëer de afbeelding die u reeds hebt gekozen in uw afbeeldingenmap. 
    2. +
  2. Open uw index.html-bestand en plaats de volgende code exact zoals die wordt getoond in het bestand. Maakt u zich nu nog geen zorgen over wat het allemaal betekent   — we zullen deze structuren later in deze reeks in detail bekijken. + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Mijn testpagina</title>
+  </head>
+  <body>
+    <img src="" alt="Mijn testafbeelding">
+  </body>
+</html>
    +
    3. +
  3. The regel <img src="" alt="Mijn testafbeelding"> is de HTML-code waarmee een afbeelding in de webpagina wordt ingevoegd. We moeten de HTML vertellen waar de afbeelding is. Het beeld zit in de afbeeldingenmap en die zit in dezelfde map als index.html. Om  in de bestandsstructuur van index.html tot aan onze afbeelding af te dalen, hebben we het volgende bestandspad nodig:  afbeeldingen/jouw-beeld-bestandsnaam. Onze afbeelding heet bijvoorbeeld firefox-icon.png, dus het bestandspad is afbeeldingen/firefox-icon.png.
    4. +
  4. Schrijf het bestandspad in uw HTML-code tussen de dubbele aanhalingstekens van de src="" code.
    5. +
  5. Sla uw HTML-bestand op en laadt het dan in in uw webbrowser (dubbelklik op het bestand). U zou nu uw niewe webpagina moeten zien met uw afbeelding erin!
    6. +
+ +

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

+ +

Enkele algemene regels voor bestandspaden:

+ + + +

Voorlopig is dat alles wat u moet weten.

+ +
+

Opmerking: Het Windows bestandensysteem gebruikt vaak schuine streepjes die naar achter leunen in plaats van naar voor. Bijvoorbeeld  C:\windows. Op zich is dat niet zo erg. Zelfs als u uw website ontwikkelt met Windows, moet u in uw code nog steeds schuine streepjes gebruiken die naar voor leunen.

+
+ +

Wat moet er nog worden gedaan? 

+ +

Voorlopig is dit ongeveer alles. Uw bestandenstructuur moet er ongeveer zo uitzien:

+ +

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}

diff --git a/files/nl/learn/getting_started_with_the_web/hoe_gaat_jouw_website_er_uit_zien/index.html b/files/nl/learn/getting_started_with_the_web/hoe_gaat_jouw_website_er_uit_zien/index.html deleted file mode 100644 index 9c16e8b1a9..0000000000 --- a/files/nl/learn/getting_started_with_the_web/hoe_gaat_jouw_website_er_uit_zien/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Hoe gaat uw website eruitzien? -slug: Learn/Getting_started_with_the_web/Hoe_gaat_jouw_website_er_uit_zien -tags: - - Beginner - - Benodigdheden - - Design - - Inhoud - - Leren - - Lettertypes - - Ontwerpen - - Plannen -translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
- -
-

Hoe gaat uw website eruitzien? beschrijft een eenvoudige methode die u kunt volgen om de inhoud en het ontwerp van uw website te plannen voordat u code begint te schrijven, en geeft antwoorden op vragen als ‘Welke informatie ga ik aanbieden?’, ‘Welke lettertypen en kleuren wil ik gebruiken?’ en ‘Wat is het doel van mijn website?’

-
- -

Beginnen bij het begin: planning

- -

Voordat u begint, hebt u een paar ideeën nodig. Wat gaat uw website bieden? Een website kan zo goed als alles doen, maar met uw eerste probeersel kunt u het beter simpel houden. We beginnen met een eenvoudige webpagina die een hoofdkop, een afbeelding en een paar alinea’s bevat.

- -

Om te beginnen, hebt u een antwoord op deze vragen nodig:

- -
    -
  1. Waar gaat uw website over? Houdt u van honden, New York of Pacman?
    2. -
  2. Welke informatie wilt u over het onderwerp aanbieden? Schrijf een titel, een paar alinea’s en denk na over een afbeelding die u op uw pagina wilt tonen.
    3. -
  3. Hoe gaat uw website eruitzien? Gebruik eenvoudige termen. Welke achtergrondkleur kiest u? Welk lettertype is het meest geschikt: formeel, cartoony, vetgedrukt, subtiel?
    4. -
- -
-

Noot: complexe projecten hebben gedetailleerde richtlijnen nodig die alle details bevatten over kleuren, lettertypen, spaties tussen items op de pagina, aangewezen schrijfstijl, enzovoort. Dit wordt ook wel een ontwerpgids of merkboek genoemd. U kunt een voorbeeld bekijken op Firefox OS Guidelines.

-
- -

Uw ontwerp schetsen

- -

Vervolgens neemt u pen en papier en maakt u een ruwe schets van uw webpagina. Voor uw eerste pagina is er nog niet veel dat u op papier kunt zetten, maar u zou er nu al een gewoonte van moeten maken. Het helpt echt en u hoeft geen Van Gogh te zijn!

- -

- -
-

Noot: zelfs op echte, complexe websites begint het ontwerpteam meestal met ruwe schetsen op papier. Later bouwen ze digitale mockups (modellen) met een grafische editor of een andere webtechnologie.

- -

Een grafisch ontwerper en een {{Glossary("UX", "user-experience")}} (UX)-designer zijn vaak leden van een webteam. Grafische ontwerpers ontwikkelen de visuele aspecten van een website. UX-ontwerpers spelen een eerder abstracte rol. Zij zijn verantwoordelijk voor de gebruikerservaring en -interactie met de website.

-
- -

Uw hulpprogramma’s kiezen

- -

Nu bent u zo ver om de inhoud samen te stellen die uiteindelijk op uw webpagina terecht zal komen.

- -

Tekst

- -

U zou nog steeds de alinea’s en de titel van uw ontwerp van eerder moeten hebben. Houd die paraat.

- -

Themakleur

- -

Ga naar de Kleurenkiezer om een kleur te kiezen. Zoek er een uit die u bevalt. Als u op een kleur klikt, zult u een vreemde code zien die uit zes tekens bestaat, zoals bijvoorbeeld #660066. Die tekens vormen een hex(adecimale)-code, en vertegenwoordigen uw kleur. Kopieer de code in een document dat u ergens veilig bijhoudt.

- -

- -

Afbeeldingen

- -

Om een afbeelding te kiezen, gaat u naar Google Afbeeldingen en zoekt u naar iets geschikts.

- -
    -
  1. Als u een afbeelding hebt gevonden die u bevalt, klikt u op de afbeelding.
    2. -
  2. Druk op de knop Afbeeldingen bekijken.
    3. -
  3. Op de volgende pagina klikt u met de rechtermuisknop op de afbeelding (Ctrl + klik op een Mac), kies daarna Afbeelding opslaan als… en kies een veilige plek om de afbeelding op te slaan. Als alternatief voor deze methode kunt u ook het webadres van uw afbeelding opslaan voor later gebruik (het webadres vindt u in de adresbalk van uw browser).
    4. -
- -

- -

- -
-

Noot: de meeste afbeeldingen op het web, dus ook die van Google Afbeeldingen, zijn auteursrechtelijk beschermd. Om de kans op het schenden van dat auteursrecht te verkleinen, kunt u Google’s licentiefilter gebruiken. Klik hiervoor op 1) Tools en dan op 2) Gebruiksrechten:

- -

-
- -

Lettertypen

- -

Om een lettertype te kiezen:

- -
    -
  1. Ga naar Google Fonts en scroll omlaag totdat u een lettertype in de lijst vindt dat u wilt gebruiken. U kunt ook het bedieningspaneel aan de rechterkant gebruiken om uw resultaten verder te filteren.
    2. -
  2. Klik op het ‘plus’-pictogram (Toevoegen aan) naast het lettertype van uw keuze.
    3. -
  3. Klik op de knop ‘* Family Selected’ in het paneel aan de onderkant van de pagina (‘*’ is afhankelijk van het aantal lettertypen dat u hebt geselecteerd).
    4. -
  4. In het pop-upscherm kunt u de regels met code zien die Google aan u doorgeeft. Die regels kopieert u in een teksteditor en slaat u op voor later gebruik.
    5. -
- -

- -

 

- -

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}

diff --git a/files/nl/learn/getting_started_with_the_web/hoe_werkt_het_web/index.html b/files/nl/learn/getting_started_with_the_web/hoe_werkt_het_web/index.html deleted file mode 100644 index 763655de10..0000000000 --- a/files/nl/learn/getting_started_with_the_web/hoe_werkt_het_web/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Hoe werkt het web? -slug: Learn/Getting_started_with_the_web/Hoe_werkt_het_web -tags: - - Beginner - - Client - - DNS - - HTTP - - IP - - Leren - - Server - - TCP - - infrastructuur -translation_of: Learn/Getting_started_with_the_web/How_the_Web_works ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
- -
-

Hoe werkt het web biedt een vereenvoudigde kijk op wat er gebeurt als u een webpagina in uw browser op uw computer of telefoon bekijkt.

-
- -

Op korte termijn is deze theorie niet van essentieel belang, maar als u webcode wilt schrijven, is het echt beter om te begrijpen wat er in de achtergrond gebeurt. Het zal niet lang duren voor u echt van die kennis begint te profiteren.

- -

Clienten en servers

- -

Computers die met het web verbonden zijn, noemen we clienten en servers. Zo ziet een eenvoudig diagram van de interactie tussen hen beide er uit:

- -

- - - -

De andere instrumenten in de gereedschapskist

- -

De client en de server die we hierboven hebben beschreven, vertellen niet het volledige verhaal. Er zijn nog vele andere gereedschappen bij betrokken en die beschrijven we hieronder.

- -

Voorlopig kunnen we het web voorstellen als een weg. Aan het einde van de weg is de client en die ziet eruit als uw huis. Aan de andere kant is de server en die is een winkel waar u iets wilt kopen.

- -

- -

 Behalve de client en de server moeten we ook hallo zeggen tegen: 

- - - -

Wat er gebeurt er nu precies?

- -

Stel dat u een webadres in uw browser typt (analoog met: stel dat u naar de winkel gaat), wat gebeurt er dan?

- -
    -
  1. De browser gaat naar de DNS-server en vindt het echte adres van de server waarop de website staat (u vindt het adres van de winkel).
    2. -
  2. De browser verzendt een bericht met HTTP-verzoek erin naar de server en vraagt die een kopie van de website naar de client te sturen (u gaat naar de winkel en u bestelt uw artikelen). Dit bericht en alle andere data die is verstuurd tussen de client en de server, wordt langs uw internetverbinding met TCP/IP verstuurd.
    3. -
  3. Als de server het verzoek van de client goedkeurt, stuurt de server een boodschap met daarin "200 OK". Dit betekent zoiets als: "maar natuurlijk kunt u die website bekijken! Hier is hij.". Dan begint de website bestanden te versturen die in een serie kleine brokken (chunks in het Engels) worden verdeeld (de winkel geeft u uw artikelen en u neemt ze mee naar huis). Die brokken noemen we data packets (datapakketjes).
    4. -
  4. De browser stelt de kleine brokken samen tot een volledige website en toont die aan u (de goederen arriveren aan uw deur  — nieuw blinkend materiaal, geweldig!).
    5. -
- -

DNS uitgelegd

- -

Echte webaddressen zijn niet de leuke makkelijk te onhouden strings die u in uw adresbalk typt om uw favoriete websites te vinden. Een webadres is een serie getallen zoals deze: 63.245.215.20.

- -

Zo'n getallenreeks noemen we een {{Glossary("IP Address", "IP-adres")}} en het staat voor een unieke locatie op het web. Het is echter niet echt gemakkelijk om te onthouden en daarom zijn Domain Name Servers uitgevonden. Dat zijn speciale servers die het webadres dat u in de adresbalk van uw browser typt (zoals "mozilla.org") aan het echte (IP-)adres van de website vastkoppelen.

- -

Websites kunnen via hun echte IP-adres worden bereikt. Probeer de website van Mozilla te openen door 63.245.215.20 in de adresbalk van een nieuwe tabpagina in uw browser te typen.

- -

A domain name is just another form of an IP address

- -

Paketten uitgelegd

- -

Eerder hebben we de term "pakketten" gebruikt om het formaat te beschrijven waarin de data van de server naar de client wordt verstuurd. Wat bedoelen we hier? Het komt erop neer dat data die doorheen het web wordt verstuurd, als duizenden kleine brokken worden verzonden, zodat vele verschillende webgebruikers tegelijkertijd dezelfde website kunnen downloaden. Als een website als een enkele brok zou worden verstuurd, zou slechts één gebruiker de website kunnen downloaden en zou de rest zijn beurt moeten afwachten. Dat zou het web heel inefficiënt maken en niet erg aangenaam in het gebruik.

- -

Zie ook

- - - -

Illustratie

- -

Straatfoto: Street composing, door Kevin D.

- -

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

diff --git a/files/nl/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/nl/learn/getting_started_with_the_web/how_the_web_works/index.html new file mode 100644 index 0000000000..763655de10 --- /dev/null +++ b/files/nl/learn/getting_started_with_the_web/how_the_web_works/index.html @@ -0,0 +1,98 @@ +--- +title: Hoe werkt het web? +slug: Learn/Getting_started_with_the_web/Hoe_werkt_het_web +tags: + - Beginner + - Client + - DNS + - HTTP + - IP + - Leren + - Server + - TCP + - infrastructuur +translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
+ +
+

Hoe werkt het web biedt een vereenvoudigde kijk op wat er gebeurt als u een webpagina in uw browser op uw computer of telefoon bekijkt.

+
+ +

Op korte termijn is deze theorie niet van essentieel belang, maar als u webcode wilt schrijven, is het echt beter om te begrijpen wat er in de achtergrond gebeurt. Het zal niet lang duren voor u echt van die kennis begint te profiteren.

+ +

Clienten en servers

+ +

Computers die met het web verbonden zijn, noemen we clienten en servers. Zo ziet een eenvoudig diagram van de interactie tussen hen beide er uit:

+ +

+ + + +

De andere instrumenten in de gereedschapskist

+ +

De client en de server die we hierboven hebben beschreven, vertellen niet het volledige verhaal. Er zijn nog vele andere gereedschappen bij betrokken en die beschrijven we hieronder.

+ +

Voorlopig kunnen we het web voorstellen als een weg. Aan het einde van de weg is de client en die ziet eruit als uw huis. Aan de andere kant is de server en die is een winkel waar u iets wilt kopen.

+ +

+ +

 Behalve de client en de server moeten we ook hallo zeggen tegen: 

+ + + +

Wat er gebeurt er nu precies?

+ +

Stel dat u een webadres in uw browser typt (analoog met: stel dat u naar de winkel gaat), wat gebeurt er dan?

+ +
    +
  1. De browser gaat naar de DNS-server en vindt het echte adres van de server waarop de website staat (u vindt het adres van de winkel).
    2. +
  2. De browser verzendt een bericht met HTTP-verzoek erin naar de server en vraagt die een kopie van de website naar de client te sturen (u gaat naar de winkel en u bestelt uw artikelen). Dit bericht en alle andere data die is verstuurd tussen de client en de server, wordt langs uw internetverbinding met TCP/IP verstuurd.
    3. +
  3. Als de server het verzoek van de client goedkeurt, stuurt de server een boodschap met daarin "200 OK". Dit betekent zoiets als: "maar natuurlijk kunt u die website bekijken! Hier is hij.". Dan begint de website bestanden te versturen die in een serie kleine brokken (chunks in het Engels) worden verdeeld (de winkel geeft u uw artikelen en u neemt ze mee naar huis). Die brokken noemen we data packets (datapakketjes).
    4. +
  4. De browser stelt de kleine brokken samen tot een volledige website en toont die aan u (de goederen arriveren aan uw deur  — nieuw blinkend materiaal, geweldig!).
    5. +
+ +

DNS uitgelegd

+ +

Echte webaddressen zijn niet de leuke makkelijk te onhouden strings die u in uw adresbalk typt om uw favoriete websites te vinden. Een webadres is een serie getallen zoals deze: 63.245.215.20.

+ +

Zo'n getallenreeks noemen we een {{Glossary("IP Address", "IP-adres")}} en het staat voor een unieke locatie op het web. Het is echter niet echt gemakkelijk om te onthouden en daarom zijn Domain Name Servers uitgevonden. Dat zijn speciale servers die het webadres dat u in de adresbalk van uw browser typt (zoals "mozilla.org") aan het echte (IP-)adres van de website vastkoppelen.

+ +

Websites kunnen via hun echte IP-adres worden bereikt. Probeer de website van Mozilla te openen door 63.245.215.20 in de adresbalk van een nieuwe tabpagina in uw browser te typen.

+ +

A domain name is just another form of an IP address

+ +

Paketten uitgelegd

+ +

Eerder hebben we de term "pakketten" gebruikt om het formaat te beschrijven waarin de data van de server naar de client wordt verstuurd. Wat bedoelen we hier? Het komt erop neer dat data die doorheen het web wordt verstuurd, als duizenden kleine brokken worden verzonden, zodat vele verschillende webgebruikers tegelijkertijd dezelfde website kunnen downloaden. Als een website als een enkele brok zou worden verstuurd, zou slechts één gebruiker de website kunnen downloaden en zou de rest zijn beurt moeten afwachten. Dat zou het web heel inefficiënt maken en niet erg aangenaam in het gebruik.

+ +

Zie ook

+ + + +

Illustratie

+ +

Straatfoto: Street composing, door Kevin D.

+ +

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

diff --git a/files/nl/learn/getting_started_with_the_web/html_basics/index.html b/files/nl/learn/getting_started_with_the_web/html_basics/index.html new file mode 100644 index 0000000000..e454602471 --- /dev/null +++ b/files/nl/learn/getting_started_with_the_web/html_basics/index.html @@ -0,0 +1,218 @@ +--- +title: De basisbegrippen van HTML +slug: Learn/Getting_started_with_the_web/HTML_basisbegrippen +tags: + - Beginner + - CodingScripting + - HTML + - Leren + - Web +translation_of: Learn/Getting_started_with_the_web/HTML_basics +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Bestanden_beheren", "Learn/Getting_started_with_the_web/CSS_basisbegrippen", "Learn/Getting_started_with_the_web")}}
+ +
+

HTML (Hypertext Markup Language of opmaaktaal voor gelinkte tekst) is de code die wordt gebruikt om een webpagina en zijn inhoud te structureren en weer te geven. De inhoud moet bijvoorbeeld worden gestructureerd in een reeks paragrafen, in een lijst met opsommingstekens of voorzien van illustraties en tabellen. Zoals de titel suggereert zal dit artikel u de basisbegrippen van HTML uitleggen en wat zijn functie is.

+
+ +

Dus wat is HTML nu eigenlijk?

+ +

HTML is geen programmeertaal; het is een opmaaktaal en hij wordt gebruikt om uw browser te vertellen hoe de webpagina's die u bezoekt, moeten worden weergegeven. Het kan even simpel of ingewikkeld zijn als de webontwerper dat wenst. HTML bestaat uit een serie {{Glossary("element", "elementen")}} die u kunt gebruiken om verschillende onderdelen van uw inhoud te verpakken of te omhullen zodat die er op een bepaalde manier gaat uitzien of zich gedragen. De tags (een ander woord voor labels of markeerders) die de tekst insluiten kunnen van een woord of een afbeelding een hyperlink naar ergens anders maken, ze kunnen woorden cursiveren, lettertypes vergroten of verkleinen enzovoort. Neem bijvoorbeeld de volgende regel tekst:

+ +
Mijn kat is heel chagrijnig
+ +

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>Mijn kat is heel chagrijnig</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 begint. Hier begint ook de invloed die het op de regel uitoefent en 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 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. +
+ +

Elementen kunnen ook attributen krijgen die er zo uitzien:

+ +

+ +

Attributen bevatten extra informatie over het element die u niet in de inhoud wilt zien zitten. Hier is class the naam van het attribuut en editor-note is de waarde van het attribuut. Met het class-attribuut kan een identificeerder aan het element worden toegevoegd die later gebruikt kan worden om van het element een doelwit voor stijlinformatie en andere zaken te maken.

+ +

Een attribuut krijgt altijd de volgende kenmerken:

+ +
    +
  1. Een spatie tussen het attribuut en de naam van het element (of het vorige attribuut als het element er meer dan een heeft).
    2. +
  2. De naam van het attribuut wordt gevolgd door een is-gelijk-aan teken (=).
    3. +
  3. De waarde van het attribuut staat tussen aanhalingstekens.       
    4. +
+ +

Geneste Elementen

+ +

U kunt elementen in andere elementen steken - we noemen dit nesten. Als we willen zeggen dat onze kat HEEL chagrijnig is, kunnen we het woord "heel" in een {{htmlelement("strong")}}-element insluiten. Dat zorgt ervoor dat het woord wordt beklemtoond:

+ +
<p>Mijn kat is <strong>heel</strong> chagrijnig.</p>
+ +

U moet er echter wel voor zorgen dat uw elementen correct worden genest: in het voorbeeld hierboven openden we het  <p> element eerst en dan het <strong> element.  Dus moeten we eerst het <strong> sluiten en dan <p>. Het volgende is fout:

+ +
<p>Mijn kat is <strong>heel chagrijnig.</p></strong>
+ +

De elementen moeten op de juiste manier worden geopend en gesloten zodat ze duidelijk in of buiten elkaar bestaan. Als ze overlappen zoals hierboven, zal de webbrowser proberen te raden wat u wilt zeggen en dat kan heel onverwachte resultaten opleveren. Doe dat dus niet!

+ +

Lege elementen

+ +

Sommige elementen hebben geen inhoud en worden lege elementen genoemd. Het {{htmlelement("img")}}-element bijvoorbeeld, die al in onze  HTML zit, is zo'n leeg element:

+ +
<img src="images/firefox-icon.png" alt="My test image">
+ +

Dit element bevat twee attributen, maar er is geen </img> die het element afsluit en ook geen inhoud in het element. Het img-element sluit namelijk geen inhoud in om er vervolgens effect op te hebben. Het doel van dit element is om een afbeelding in de HTML-pagina in te bedden op de plaats van het < /img>-element. 

+ +

Anatomie van een HTML-document

+ +

Daarmee kunnen we onze inleiding op individuele HTML-elementen afsluiten, maar ze zijn op zichzelf niet erg nuttig. Nu gaan we bekijken hoe individuele elementen gecombineerd worden om een volledige HTML-pagina te vormen. We gaan de code bekijken die we in ons index.html-voorbeeld hebben gestoken (we hebben die voor het eerst gebruikt in Omgaan met Bestanden):

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Mijn testpagina</title>
+  </head>
+  <body>
+    <img src="images/firefox-icon.png" alt="Mijn testafbeelding">
+  </body>
+</html>
+ +

Wat zit er in die pagina ?

+ + + +

Afbeeldingen

+ +

Nu willen we onze aandacht op het afbeeldingselement vestigen:

+ +
<img src="images/firefox-icon.png" alt="My test image">
+ +

Zoals we al hebben gezegd, kunnen we met dit element een afbeelding in onze pagina inbedden. We doen dat met het src-attribuut (src = source en source betekent bron). Dit attribuut bevat het pad naar ons afbeeldingsbestand.

+ +

We hebben ook een alt-attribuut toegevoegd. (alt = alternative, alternatief in het Nederlands). Met dit attribuut kunt u een beschrijving aan uw afbeelding geven voor tekstgebruikers die de afbeelding niet kunnen zien. Dat kan zijn omdat :

+ +
    +
  1. Ze visueel beperkt zijn. Gebruikers met ernstig visuele beperkingen gebruiken vaak Screen Reader software die de alt-tekst aan hen voorleest. 
    2. +
  2. Er is iets misgegaan en het beeld kan niet worden weergegeven. Probeer bijvoorbeeld eens opzettelijk het pad in uw src-attribuut te veranderen zodat het niet langer correct is. Als u uw HTML-bestand opslaat en uw pagina herlaadt, zult u in plaats van de afbeelding een of andere tekst zoals hieronder zien:
    3. +
+ +

+ +

De sleutelwoorden met betrekking tot alt-tekst zijn "beschrijvende tekst". Met de alt-tekst die u schrijft, zou de lezer zich een goed beeld moeten kunnen vormen van wat de afbeelding nu eigenlijk afbeeldt.  De tekst van ons voorbeeld hierboven  "Mijn testafbeelding" is echt niet goed genoeg. Een veel beter alternatief voor ons Firefox logo zou zijn:  "Het Firefox logo: een brandende vos die de aarde omringt."

+ +

Probeer nu een betere alt-tekst te bedenken voor uw afbeelding.

+ +
+

Opmerking: Ontdek meer over toegankelijkheid op MDN's Accessibility landing page.

+
+ +

Tekst Opmaken

+ +

In dit deel bespreken we een aantal standaard HTML-elementen, die we gebruiken om tekst op te maken.

+ +

Hoofdingen

+ +

Met hoofdingen of kopelementen kunt u bepaalde delen van uw inhoud als kop of hoofding opmaken. Net zoals een boek een titel heeft en zijn hoofdstukken titels en ondertitels, heeft een HTML-pagina die ook. HTML bevat zes niveaus voor koppen  {{htmlelement("h1")}}–{{htmlelement("h6")}} hoewel u er meestal slechts drie of vier zult gebruiken.

+ +
<h1>De titel van mijn artikel</h1>
+<h2>De titel van een hoofdstuk in mijn artikel</h2>
+<h3>Mijn ondertitel</h3>
+<h4>De ondertitel die onder mijn ondertitel staat</h4>
+ +

Probeer nu een geschikte titel aan uw HTML-pagina toe te voegen en plaats hem net boven uw {{htmlelement("img")}}-element.

+ +

Paragrafen

+ +

Zoals hierboven is uitgelegd dienen {{htmlelement("p")}}-elementen als containers voor paragrafen. U zult ze regelmatig gebruiken als u gewone tekstinhoud opmaakt:

+ +
<p>Dit is een enkele paragraaf.</p>
+ +

Voeg uw voorbeeldtekst toe (die zou u al moeten opgesteld hebben in Hoe gaat uw website eruitzien?) in een paar paragrafen die u direct onder uw <img>-element plaatst.

+ +

Lijsten

+ +

Veel webinhoud bestaat uit lijsten en HTML heeft er speciale elementen voor. De opmaak van een lijst bestaat altijd uit twee elementen. De gebruikelijkste lijsttypes zijn geordende en ongeordende lijsten:

+ +
    +
  1. Ongeordende lijsten zijn lijsten waarbij de volgorde van de artikelen in de lijst er niet toe doet, zoals een boodschappenlijst. Deze worden ingesloten in een {{htmlelement("ul")}}-element.
    2. +
  2. Geordende lijsten zijn lijsten waarbij de volgorde van de artikelen of onderwerpen in de lijst er wel degelijk toe doet, zoals een recept. Deze worden ingesloten door een {{htmlelement("ol")}}-element.
    3. +
+ +

Elk artikel of onderwerp in de lijsten wordt ingebed in een {{htmlelement("li")}}-element.

+ +

Als we bijvoorbeeld een deel van de volgende paragraaf in een lijst zouden willen veranderen,

+ +
<p>Bij Mozilla, zijn we een globale gemeentschap van technici, denkers en bouwers die met elkaar samenwerken... </p>
+ +

zouden we de opmaak op deze manier kunnen veranderen:

+ +
<p>Bij Mozilla, zijn we een globale gemeenschap van</p>
+
+<ul>
+  <li>technici</li>
+  <li>denkers</li>
+  <li>bouwers</li>
+</ul>
+
+<p>die met elkaar samenwerken ... </p>
+ +

Voeg een ongeordende en een geordende lijst toe aan uw voorbeeldpagina.

+ + + +

Hyperlinks zijn zeer belangrijk  — zij zijn wat het web EEN WEB maakt. Om een hyperlink toe te voegen, moeten we een eenvoudig element gebruiken  — {{htmlelement("a")}} — de a staat voor "anker". Om een stuk tekst van uw paragraaf in een link te veranderen, volgt u deze stappen :

+ +
    +
  1. Kies een stuk tekst. Wij kozen de tekst "Mozilla Manifesto".
    2. +
  2. Sluit de tekst in een <a>-element in, zoals dit: + 
    <a>Mozilla Manifesto</a>
    +
    3. +
  3. Geef het <a>-element een attribuut en doe dat op deze manier: + 
    <a href="">Mozilla Manifesto</a>
    +
    4. +
  4. De waarde van het attribuut wordt het webadres waarmee u de hyperlink wilt verbinden.:
    5. +
  5. + 
    <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
    +
    6. +
+ +

U zou onverwachte resultaten kunnen krijgen als u https:// of http:// zou weglaten. Dit deel noemen we het protocol en het staat aan het begin van het webadres. Nadat u de hyperlink hebt gemaakt, klikt u erop zodat u er zeker van bent dat hij u brengt naar waar u heen wilt.

+ +
+

Op het eerste zicht ziet href er misschien als een nogal obscure naam voor een attribuut uit. Als u moeite hebt om u zich de naam te herinneren, denk er dan aan dat href een afkorting is voor hypertext reference (hypertekst verwijzing in het Nederlands).

+
+ +

Voeg een link aan uw pagina toe, als u dat nog niet hebt gedaan.

+ +

Conclusie

+ +

Als u alle instructies in dit artikel hebt opgevolgd, zou u nu een pagina moeten hebben die er ongeveer uitziet zoals de pagina hieronder. (u kunt die ook hier zien):
+
+ A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

+ +

Als u vast komt te zitten, kunt u uw werk nog altijd met ons voltooide voorbeeld vergelijken op Github.

+ +

Eigenlijk hebben we hier enkel een fractie van de mogelijkheden gezien die HTML biedt. Om meer te ontdekken, gaat u naar HTML-Structuring the Web.

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}

diff --git a/files/nl/learn/getting_started_with_the_web/html_basisbegrippen/index.html b/files/nl/learn/getting_started_with_the_web/html_basisbegrippen/index.html deleted file mode 100644 index e454602471..0000000000 --- a/files/nl/learn/getting_started_with_the_web/html_basisbegrippen/index.html +++ /dev/null @@ -1,218 +0,0 @@ ---- -title: De basisbegrippen van HTML -slug: Learn/Getting_started_with_the_web/HTML_basisbegrippen -tags: - - Beginner - - CodingScripting - - HTML - - Leren - - Web -translation_of: Learn/Getting_started_with_the_web/HTML_basics ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Bestanden_beheren", "Learn/Getting_started_with_the_web/CSS_basisbegrippen", "Learn/Getting_started_with_the_web")}}
- -
-

HTML (Hypertext Markup Language of opmaaktaal voor gelinkte tekst) is de code die wordt gebruikt om een webpagina en zijn inhoud te structureren en weer te geven. De inhoud moet bijvoorbeeld worden gestructureerd in een reeks paragrafen, in een lijst met opsommingstekens of voorzien van illustraties en tabellen. Zoals de titel suggereert zal dit artikel u de basisbegrippen van HTML uitleggen en wat zijn functie is.

-
- -

Dus wat is HTML nu eigenlijk?

- -

HTML is geen programmeertaal; het is een opmaaktaal en hij wordt gebruikt om uw browser te vertellen hoe de webpagina's die u bezoekt, moeten worden weergegeven. Het kan even simpel of ingewikkeld zijn als de webontwerper dat wenst. HTML bestaat uit een serie {{Glossary("element", "elementen")}} die u kunt gebruiken om verschillende onderdelen van uw inhoud te verpakken of te omhullen zodat die er op een bepaalde manier gaat uitzien of zich gedragen. De tags (een ander woord voor labels of markeerders) die de tekst insluiten kunnen van een woord of een afbeelding een hyperlink naar ergens anders maken, ze kunnen woorden cursiveren, lettertypes vergroten of verkleinen enzovoort. Neem bijvoorbeeld de volgende regel tekst:

- -
Mijn kat is heel chagrijnig
- -

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>Mijn kat is heel chagrijnig</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 begint. Hier begint ook de invloed die het op de regel uitoefent en 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 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. -
- -

Elementen kunnen ook attributen krijgen die er zo uitzien:

- -

- -

Attributen bevatten extra informatie over het element die u niet in de inhoud wilt zien zitten. Hier is class the naam van het attribuut en editor-note is de waarde van het attribuut. Met het class-attribuut kan een identificeerder aan het element worden toegevoegd die later gebruikt kan worden om van het element een doelwit voor stijlinformatie en andere zaken te maken.

- -

Een attribuut krijgt altijd de volgende kenmerken:

- -
    -
  1. Een spatie tussen het attribuut en de naam van het element (of het vorige attribuut als het element er meer dan een heeft).
    2. -
  2. De naam van het attribuut wordt gevolgd door een is-gelijk-aan teken (=).
    3. -
  3. De waarde van het attribuut staat tussen aanhalingstekens.       
    4. -
- -

Geneste Elementen

- -

U kunt elementen in andere elementen steken - we noemen dit nesten. Als we willen zeggen dat onze kat HEEL chagrijnig is, kunnen we het woord "heel" in een {{htmlelement("strong")}}-element insluiten. Dat zorgt ervoor dat het woord wordt beklemtoond:

- -
<p>Mijn kat is <strong>heel</strong> chagrijnig.</p>
- -

U moet er echter wel voor zorgen dat uw elementen correct worden genest: in het voorbeeld hierboven openden we het  <p> element eerst en dan het <strong> element.  Dus moeten we eerst het <strong> sluiten en dan <p>. Het volgende is fout:

- -
<p>Mijn kat is <strong>heel chagrijnig.</p></strong>
- -

De elementen moeten op de juiste manier worden geopend en gesloten zodat ze duidelijk in of buiten elkaar bestaan. Als ze overlappen zoals hierboven, zal de webbrowser proberen te raden wat u wilt zeggen en dat kan heel onverwachte resultaten opleveren. Doe dat dus niet!

- -

Lege elementen

- -

Sommige elementen hebben geen inhoud en worden lege elementen genoemd. Het {{htmlelement("img")}}-element bijvoorbeeld, die al in onze  HTML zit, is zo'n leeg element:

- -
<img src="images/firefox-icon.png" alt="My test image">
- -

Dit element bevat twee attributen, maar er is geen </img> die het element afsluit en ook geen inhoud in het element. Het img-element sluit namelijk geen inhoud in om er vervolgens effect op te hebben. Het doel van dit element is om een afbeelding in de HTML-pagina in te bedden op de plaats van het < /img>-element. 

- -

Anatomie van een HTML-document

- -

Daarmee kunnen we onze inleiding op individuele HTML-elementen afsluiten, maar ze zijn op zichzelf niet erg nuttig. Nu gaan we bekijken hoe individuele elementen gecombineerd worden om een volledige HTML-pagina te vormen. We gaan de code bekijken die we in ons index.html-voorbeeld hebben gestoken (we hebben die voor het eerst gebruikt in Omgaan met Bestanden):

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Mijn testpagina</title>
-  </head>
-  <body>
-    <img src="images/firefox-icon.png" alt="Mijn testafbeelding">
-  </body>
-</html>
- -

Wat zit er in die pagina ?

- - - -

Afbeeldingen

- -

Nu willen we onze aandacht op het afbeeldingselement vestigen:

- -
<img src="images/firefox-icon.png" alt="My test image">
- -

Zoals we al hebben gezegd, kunnen we met dit element een afbeelding in onze pagina inbedden. We doen dat met het src-attribuut (src = source en source betekent bron). Dit attribuut bevat het pad naar ons afbeeldingsbestand.

- -

We hebben ook een alt-attribuut toegevoegd. (alt = alternative, alternatief in het Nederlands). Met dit attribuut kunt u een beschrijving aan uw afbeelding geven voor tekstgebruikers die de afbeelding niet kunnen zien. Dat kan zijn omdat :

- -
    -
  1. Ze visueel beperkt zijn. Gebruikers met ernstig visuele beperkingen gebruiken vaak Screen Reader software die de alt-tekst aan hen voorleest. 
    2. -
  2. Er is iets misgegaan en het beeld kan niet worden weergegeven. Probeer bijvoorbeeld eens opzettelijk het pad in uw src-attribuut te veranderen zodat het niet langer correct is. Als u uw HTML-bestand opslaat en uw pagina herlaadt, zult u in plaats van de afbeelding een of andere tekst zoals hieronder zien:
    3. -
- -

- -

De sleutelwoorden met betrekking tot alt-tekst zijn "beschrijvende tekst". Met de alt-tekst die u schrijft, zou de lezer zich een goed beeld moeten kunnen vormen van wat de afbeelding nu eigenlijk afbeeldt.  De tekst van ons voorbeeld hierboven  "Mijn testafbeelding" is echt niet goed genoeg. Een veel beter alternatief voor ons Firefox logo zou zijn:  "Het Firefox logo: een brandende vos die de aarde omringt."

- -

Probeer nu een betere alt-tekst te bedenken voor uw afbeelding.

- -
-

Opmerking: Ontdek meer over toegankelijkheid op MDN's Accessibility landing page.

-
- -

Tekst Opmaken

- -

In dit deel bespreken we een aantal standaard HTML-elementen, die we gebruiken om tekst op te maken.

- -

Hoofdingen

- -

Met hoofdingen of kopelementen kunt u bepaalde delen van uw inhoud als kop of hoofding opmaken. Net zoals een boek een titel heeft en zijn hoofdstukken titels en ondertitels, heeft een HTML-pagina die ook. HTML bevat zes niveaus voor koppen  {{htmlelement("h1")}}–{{htmlelement("h6")}} hoewel u er meestal slechts drie of vier zult gebruiken.

- -
<h1>De titel van mijn artikel</h1>
-<h2>De titel van een hoofdstuk in mijn artikel</h2>
-<h3>Mijn ondertitel</h3>
-<h4>De ondertitel die onder mijn ondertitel staat</h4>
- -

Probeer nu een geschikte titel aan uw HTML-pagina toe te voegen en plaats hem net boven uw {{htmlelement("img")}}-element.

- -

Paragrafen

- -

Zoals hierboven is uitgelegd dienen {{htmlelement("p")}}-elementen als containers voor paragrafen. U zult ze regelmatig gebruiken als u gewone tekstinhoud opmaakt:

- -
<p>Dit is een enkele paragraaf.</p>
- -

Voeg uw voorbeeldtekst toe (die zou u al moeten opgesteld hebben in Hoe gaat uw website eruitzien?) in een paar paragrafen die u direct onder uw <img>-element plaatst.

- -

Lijsten

- -

Veel webinhoud bestaat uit lijsten en HTML heeft er speciale elementen voor. De opmaak van een lijst bestaat altijd uit twee elementen. De gebruikelijkste lijsttypes zijn geordende en ongeordende lijsten:

- -
    -
  1. Ongeordende lijsten zijn lijsten waarbij de volgorde van de artikelen in de lijst er niet toe doet, zoals een boodschappenlijst. Deze worden ingesloten in een {{htmlelement("ul")}}-element.
    2. -
  2. Geordende lijsten zijn lijsten waarbij de volgorde van de artikelen of onderwerpen in de lijst er wel degelijk toe doet, zoals een recept. Deze worden ingesloten door een {{htmlelement("ol")}}-element.
    3. -
- -

Elk artikel of onderwerp in de lijsten wordt ingebed in een {{htmlelement("li")}}-element.

- -

Als we bijvoorbeeld een deel van de volgende paragraaf in een lijst zouden willen veranderen,

- -
<p>Bij Mozilla, zijn we een globale gemeentschap van technici, denkers en bouwers die met elkaar samenwerken... </p>
- -

zouden we de opmaak op deze manier kunnen veranderen:

- -
<p>Bij Mozilla, zijn we een globale gemeenschap van</p>
-
-<ul>
-  <li>technici</li>
-  <li>denkers</li>
-  <li>bouwers</li>
-</ul>
-
-<p>die met elkaar samenwerken ... </p>
- -

Voeg een ongeordende en een geordende lijst toe aan uw voorbeeldpagina.

- - - -

Hyperlinks zijn zeer belangrijk  — zij zijn wat het web EEN WEB maakt. Om een hyperlink toe te voegen, moeten we een eenvoudig element gebruiken  — {{htmlelement("a")}} — de a staat voor "anker". Om een stuk tekst van uw paragraaf in een link te veranderen, volgt u deze stappen :

- -
    -
  1. Kies een stuk tekst. Wij kozen de tekst "Mozilla Manifesto".
    2. -
  2. Sluit de tekst in een <a>-element in, zoals dit: - 
    <a>Mozilla Manifesto</a>
    -
    3. -
  3. Geef het <a>-element een attribuut en doe dat op deze manier: - 
    <a href="">Mozilla Manifesto</a>
    -
    4. -
  4. De waarde van het attribuut wordt het webadres waarmee u de hyperlink wilt verbinden.:
    5. -
  5. - 
    <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
    -
    6. -
- -

U zou onverwachte resultaten kunnen krijgen als u https:// of http:// zou weglaten. Dit deel noemen we het protocol en het staat aan het begin van het webadres. Nadat u de hyperlink hebt gemaakt, klikt u erop zodat u er zeker van bent dat hij u brengt naar waar u heen wilt.

- -
-

Op het eerste zicht ziet href er misschien als een nogal obscure naam voor een attribuut uit. Als u moeite hebt om u zich de naam te herinneren, denk er dan aan dat href een afkorting is voor hypertext reference (hypertekst verwijzing in het Nederlands).

-
- -

Voeg een link aan uw pagina toe, als u dat nog niet hebt gedaan.

- -

Conclusie

- -

Als u alle instructies in dit artikel hebt opgevolgd, zou u nu een pagina moeten hebben die er ongeveer uitziet zoals de pagina hieronder. (u kunt die ook hier zien):
-
- A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

- -

Als u vast komt te zitten, kunt u uw werk nog altijd met ons voltooide voorbeeld vergelijken op Github.

- -

Eigenlijk hebben we hier enkel een fractie van de mogelijkheden gezien die HTML biedt. Om meer te ontdekken, gaat u naar HTML-Structuring the Web.

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}

diff --git a/files/nl/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/nl/learn/getting_started_with_the_web/installing_basic_software/index.html new file mode 100644 index 0000000000..118139d178 --- /dev/null +++ b/files/nl/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -0,0 +1,58 @@ +--- +title: Basissoftware installeren +slug: Learn/Getting_started_with_the_web/Basis_software_installeren +tags: + - Beginner + - Browser + - Gereedschap + - Leren + - Setup + - WebMechanics + - tekstverwerker +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
+ +
+

In Basissoftware installeren gaan we u laten zien welke gereedschappen u nodig hebt om eenvoudige websites te maken en hoe u deze gereedschappen correct kunt installeren.

+
+ +

Welke gereedschappen gebruiken de professionals?

+ + + +

Welke gereedschappen heb ik nu nodig?

+ +

Het is een akelige lijst, maar gelukkig kunt u al met webontwikkeling beginnen zonder al te veel kennis over dit gereedschap. In dit artikel gaan we de minimale benodigdheden installeren: een tekstverwerker en een paar moderne webbrowsers.

+ +

Een tekstverwerker installeren

+ +

Waarschijnlijk hebt u al een eenvoudige tekstverwerker op uw computer. Windows bevat standaard Notepad en OS X heeft TextEdit. Linux verschilt per distro; gedit wordt standaard met Ubuntu geïnstalleerd.

+ +

Voor webontwikkeling, kunt u wel een beter programma gebruiken dan Notepad of TextEdit. Wij raden beginners Brackets aan, een gratis editor met een live voorbeeldmodus en hints voor de code.

+ +

Moderne webbrowsers installeren

+ +

We beginnen met de installatie van een paar webbrowsers op uw desktop waarmee we onze code kunnen uittesten. Kies uw besturingssysteem hieronder en klik op de relevante links om de installatieprogramma's van uw favoriete browsers te downloaden :

+ + + +

Voor u verder gaat, zou u op zijn minst twee van deze browsers geïnstalleerd moeten hebben om de code mee te testen.

+ +

{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}

diff --git a/files/nl/learn/getting_started_with_the_web/publicatie_website/index.html b/files/nl/learn/getting_started_with_the_web/publicatie_website/index.html deleted file mode 100644 index 920c4eccbc..0000000000 --- a/files/nl/learn/getting_started_with_the_web/publicatie_website/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: De publicatie van je website -slug: Learn/Getting_started_with_the_web/Publicatie_website -translation_of: Learn/Getting_started_with_the_web/Publishing_your_website ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}
- -
-

Als je code eenmaal af is en je hebt de bestanden die je website opmaken, georganiseerd, moet je de site online zetten zodat mensen hem kunnen vinden. Dit artikel legt uit hoe je jouw eenvoudige voorbeeldcode met weinig moeite online kan zetten. 

-
- -

Welke opties zijn er?

- -

De publicatie van een website is geen eenvoudig onderwerp. Er zijn zoveel manieren om een website online te zetten. In dit artikel gaan we niet proberen om alle methodes uit te doeken te doen. We gaan ons beperken tot de pro's en contra's van drie algemene stragegieën vanuit het standpunt van een beginner en dan bespreken we met jou stap voor stap één methode die geschikt is voor onze code.

- -

Hosting met een domeinnaam

- -

Als je totale controle over je gepucliceerde website wil hebben, dan zal je waarschijnlijk geld aan hosting en een domeinnaam moeten uitgeven :

- - - -

Vele professionele websites gaan op die manier online.

- -

Je zal bovendien ook een {{Glossary("FTP", "File Transfer Protocol (FTP)")}}-programma (zie How much does it cost: software  voor meer details) nodig hebben om de bestanden van je website naar de server over te hevelen. FTP-programma's verschillen onderling zeer veel van elkaar, maar meestal moet je op de webserver inloggen met details die jou worden aangeboden door je hostingbedrijf (bijvoorbeeld gebruikersnaam, paswoord, hostnaam). Dan toont het programma jouw lokale bestanden en die van de webserver in twee vensters, zodat je ze heen en weer kan slepen en in het juiste venster loslaten:

- -

- -

Tips voor het vinden van hostingruimte en domeinen

- - - -

Gebruik een online dienst zoals GitHub of Google App Engine

- -

Met sommige webinstrumenten kan je je website online publiceren:

- - - -

In tegenstelling tot hosting, kan je zulke webinstrumenten meestal gratis gebruiken maar hun functionaliteit zal beperkt zijn. 

- -

Gebruik een IDE op het internet zoals Thimble

- -

Er zijn een aantal webapps die een omgeving nabootsen waarin je je website kan ontwikkelen. (IDE staat voor Integrated Development Environment. In het Nederlands is dat Geïntegreerde Ontwikkelingsomgeving). Je kan er je  HTML, CSS and JavaScript in schrijven en je kan het resultaat van al die code weergeven als een website — en dat allemaal in één tabblad van je browser. Meestal zijn deze instrumenten vrij gemakkelijk in het gebruik, geweldig om mee te leren, gratis (toch de basisdiensten) en ze tonen je weergegeven pagina op een uniek webadres. De hulpmiddelen die je kan gebruiken, zijn echter nogal beperkt en de apps bieden meestal enkel hostingruimte aan voor tekst (afbeeldingen kan je er bijvoorbeeld niet in steken.

- -

Speel een beetje met een paar van deze voorbeelden en kijk eens welke jou het meeste aanspreekt:

- - - -

- -

Publiceren via GitHub

- -

Nu gaan we stap voor stap je site op een gemakkelijke manier publiceren met GitHub Pages.

- -
    -
  1. Eerst, schrijf je je in bij GitHub en verifiëer je je emailadres. 
    2. -
  2. Daarna moet je een een opslagplaats of repository creëren waarin je je bestanden zult steken. (Het woord repository wordt zeer vaak gebruikt. Het doet het dan ook veel beter dan opslagplaats in een zoekmachine.)
    3. -
  3. Op deze pagina, in het invoerveld dat Repository name heet, voer je username.github.io in, waar username jouw gebruikersnaam is. Dus bijvoorbeeld, onze vriend bobsmith zou je dan invoeren als bobsmith.github.io.
    - Vink ook Initialize this repository with a README aan en click dan op Create repository.
    4. -
  4. Daarna sleep je de inhoud van je websitemap naar je repository en laat je die erin vallen. Dan klik je op Commit changes (dit betekent ongeveer 'sla de veranderingen op'.)
    - -
    -

    Opmerking: Zorg ervoor dat je map een index.html bestand heeft.

    -
    -
    5. -
  5. -

    Nu navigeer je je browser naar username.github.io om je website online te zien. Bijvoorbeeld, voor de gebruikersnaam chrisdavidmills, ga je naar chrisdavidmills.github.io.

    - -
    -

    Opmerking: Het kan een paar minuten duren vooraleer je website live is. Als het niet onmiddellijk werkt, zal je paar minuten moeten wachten en dan opnieuw proberen.

    -
    -
    6. -
- -

Om meer te leren ga je naar GitHub Pages Help.

- -

Meer lezen over

- - - -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}

diff --git a/files/nl/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/nl/learn/getting_started_with_the_web/publishing_your_website/index.html new file mode 100644 index 0000000000..920c4eccbc --- /dev/null +++ b/files/nl/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -0,0 +1,103 @@ +--- +title: De publicatie van je website +slug: Learn/Getting_started_with_the_web/Publicatie_website +translation_of: Learn/Getting_started_with_the_web/Publishing_your_website +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}
+ +
+

Als je code eenmaal af is en je hebt de bestanden die je website opmaken, georganiseerd, moet je de site online zetten zodat mensen hem kunnen vinden. Dit artikel legt uit hoe je jouw eenvoudige voorbeeldcode met weinig moeite online kan zetten. 

+
+ +

Welke opties zijn er?

+ +

De publicatie van een website is geen eenvoudig onderwerp. Er zijn zoveel manieren om een website online te zetten. In dit artikel gaan we niet proberen om alle methodes uit te doeken te doen. We gaan ons beperken tot de pro's en contra's van drie algemene stragegieën vanuit het standpunt van een beginner en dan bespreken we met jou stap voor stap één methode die geschikt is voor onze code.

+ +

Hosting met een domeinnaam

+ +

Als je totale controle over je gepucliceerde website wil hebben, dan zal je waarschijnlijk geld aan hosting en een domeinnaam moeten uitgeven :

+ + + +

Vele professionele websites gaan op die manier online.

+ +

Je zal bovendien ook een {{Glossary("FTP", "File Transfer Protocol (FTP)")}}-programma (zie How much does it cost: software  voor meer details) nodig hebben om de bestanden van je website naar de server over te hevelen. FTP-programma's verschillen onderling zeer veel van elkaar, maar meestal moet je op de webserver inloggen met details die jou worden aangeboden door je hostingbedrijf (bijvoorbeeld gebruikersnaam, paswoord, hostnaam). Dan toont het programma jouw lokale bestanden en die van de webserver in twee vensters, zodat je ze heen en weer kan slepen en in het juiste venster loslaten:

+ +

+ +

Tips voor het vinden van hostingruimte en domeinen

+ + + +

Gebruik een online dienst zoals GitHub of Google App Engine

+ +

Met sommige webinstrumenten kan je je website online publiceren:

+ + + +

In tegenstelling tot hosting, kan je zulke webinstrumenten meestal gratis gebruiken maar hun functionaliteit zal beperkt zijn. 

+ +

Gebruik een IDE op het internet zoals Thimble

+ +

Er zijn een aantal webapps die een omgeving nabootsen waarin je je website kan ontwikkelen. (IDE staat voor Integrated Development Environment. In het Nederlands is dat Geïntegreerde Ontwikkelingsomgeving). Je kan er je  HTML, CSS and JavaScript in schrijven en je kan het resultaat van al die code weergeven als een website — en dat allemaal in één tabblad van je browser. Meestal zijn deze instrumenten vrij gemakkelijk in het gebruik, geweldig om mee te leren, gratis (toch de basisdiensten) en ze tonen je weergegeven pagina op een uniek webadres. De hulpmiddelen die je kan gebruiken, zijn echter nogal beperkt en de apps bieden meestal enkel hostingruimte aan voor tekst (afbeeldingen kan je er bijvoorbeeld niet in steken.

+ +

Speel een beetje met een paar van deze voorbeelden en kijk eens welke jou het meeste aanspreekt:

+ + + +

+ +

Publiceren via GitHub

+ +

Nu gaan we stap voor stap je site op een gemakkelijke manier publiceren met GitHub Pages.

+ +
    +
  1. Eerst, schrijf je je in bij GitHub en verifiëer je je emailadres. 
    2. +
  2. Daarna moet je een een opslagplaats of repository creëren waarin je je bestanden zult steken. (Het woord repository wordt zeer vaak gebruikt. Het doet het dan ook veel beter dan opslagplaats in een zoekmachine.)
    3. +
  3. Op deze pagina, in het invoerveld dat Repository name heet, voer je username.github.io in, waar username jouw gebruikersnaam is. Dus bijvoorbeeld, onze vriend bobsmith zou je dan invoeren als bobsmith.github.io.
    + Vink ook Initialize this repository with a README aan en click dan op Create repository.
    4. +
  4. Daarna sleep je de inhoud van je websitemap naar je repository en laat je die erin vallen. Dan klik je op Commit changes (dit betekent ongeveer 'sla de veranderingen op'.)
    + +
    +

    Opmerking: Zorg ervoor dat je map een index.html bestand heeft.

    +
    +
    5. +
  5. +

    Nu navigeer je je browser naar username.github.io om je website online te zien. Bijvoorbeeld, voor de gebruikersnaam chrisdavidmills, ga je naar chrisdavidmills.github.io.

    + +
    +

    Opmerking: Het kan een paar minuten duren vooraleer je website live is. Als het niet onmiddellijk werkt, zal je paar minuten moeten wachten en dan opnieuw proberen.

    +
    +
    6. +
+ +

Om meer te leren ga je naar GitHub Pages Help.

+ +

Meer lezen over

+ + + +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}

diff --git a/files/nl/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/nl/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html new file mode 100644 index 0000000000..9c16e8b1a9 --- /dev/null +++ b/files/nl/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -0,0 +1,102 @@ +--- +title: Hoe gaat uw website eruitzien? +slug: Learn/Getting_started_with_the_web/Hoe_gaat_jouw_website_er_uit_zien +tags: + - Beginner + - Benodigdheden + - Design + - Inhoud + - Leren + - Lettertypes + - Ontwerpen + - Plannen +translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
+ +
+

Hoe gaat uw website eruitzien? beschrijft een eenvoudige methode die u kunt volgen om de inhoud en het ontwerp van uw website te plannen voordat u code begint te schrijven, en geeft antwoorden op vragen als ‘Welke informatie ga ik aanbieden?’, ‘Welke lettertypen en kleuren wil ik gebruiken?’ en ‘Wat is het doel van mijn website?’

+
+ +

Beginnen bij het begin: planning

+ +

Voordat u begint, hebt u een paar ideeën nodig. Wat gaat uw website bieden? Een website kan zo goed als alles doen, maar met uw eerste probeersel kunt u het beter simpel houden. We beginnen met een eenvoudige webpagina die een hoofdkop, een afbeelding en een paar alinea’s bevat.

+ +

Om te beginnen, hebt u een antwoord op deze vragen nodig:

+ +
    +
  1. Waar gaat uw website over? Houdt u van honden, New York of Pacman?
    2. +
  2. Welke informatie wilt u over het onderwerp aanbieden? Schrijf een titel, een paar alinea’s en denk na over een afbeelding die u op uw pagina wilt tonen.
    3. +
  3. Hoe gaat uw website eruitzien? Gebruik eenvoudige termen. Welke achtergrondkleur kiest u? Welk lettertype is het meest geschikt: formeel, cartoony, vetgedrukt, subtiel?
    4. +
+ +
+

Noot: complexe projecten hebben gedetailleerde richtlijnen nodig die alle details bevatten over kleuren, lettertypen, spaties tussen items op de pagina, aangewezen schrijfstijl, enzovoort. Dit wordt ook wel een ontwerpgids of merkboek genoemd. U kunt een voorbeeld bekijken op Firefox OS Guidelines.

+
+ +

Uw ontwerp schetsen

+ +

Vervolgens neemt u pen en papier en maakt u een ruwe schets van uw webpagina. Voor uw eerste pagina is er nog niet veel dat u op papier kunt zetten, maar u zou er nu al een gewoonte van moeten maken. Het helpt echt en u hoeft geen Van Gogh te zijn!

+ +

+ +
+

Noot: zelfs op echte, complexe websites begint het ontwerpteam meestal met ruwe schetsen op papier. Later bouwen ze digitale mockups (modellen) met een grafische editor of een andere webtechnologie.

+ +

Een grafisch ontwerper en een {{Glossary("UX", "user-experience")}} (UX)-designer zijn vaak leden van een webteam. Grafische ontwerpers ontwikkelen de visuele aspecten van een website. UX-ontwerpers spelen een eerder abstracte rol. Zij zijn verantwoordelijk voor de gebruikerservaring en -interactie met de website.

+
+ +

Uw hulpprogramma’s kiezen

+ +

Nu bent u zo ver om de inhoud samen te stellen die uiteindelijk op uw webpagina terecht zal komen.

+ +

Tekst

+ +

U zou nog steeds de alinea’s en de titel van uw ontwerp van eerder moeten hebben. Houd die paraat.

+ +

Themakleur

+ +

Ga naar de Kleurenkiezer om een kleur te kiezen. Zoek er een uit die u bevalt. Als u op een kleur klikt, zult u een vreemde code zien die uit zes tekens bestaat, zoals bijvoorbeeld #660066. Die tekens vormen een hex(adecimale)-code, en vertegenwoordigen uw kleur. Kopieer de code in een document dat u ergens veilig bijhoudt.

+ +

+ +

Afbeeldingen

+ +

Om een afbeelding te kiezen, gaat u naar Google Afbeeldingen en zoekt u naar iets geschikts.

+ +
    +
  1. Als u een afbeelding hebt gevonden die u bevalt, klikt u op de afbeelding.
    2. +
  2. Druk op de knop Afbeeldingen bekijken.
    3. +
  3. Op de volgende pagina klikt u met de rechtermuisknop op de afbeelding (Ctrl + klik op een Mac), kies daarna Afbeelding opslaan als… en kies een veilige plek om de afbeelding op te slaan. Als alternatief voor deze methode kunt u ook het webadres van uw afbeelding opslaan voor later gebruik (het webadres vindt u in de adresbalk van uw browser).
    4. +
+ +

+ +

+ +
+

Noot: de meeste afbeeldingen op het web, dus ook die van Google Afbeeldingen, zijn auteursrechtelijk beschermd. Om de kans op het schenden van dat auteursrecht te verkleinen, kunt u Google’s licentiefilter gebruiken. Klik hiervoor op 1) Tools en dan op 2) Gebruiksrechten:

+ +

+
+ +

Lettertypen

+ +

Om een lettertype te kiezen:

+ +
    +
  1. Ga naar Google Fonts en scroll omlaag totdat u een lettertype in de lijst vindt dat u wilt gebruiken. U kunt ook het bedieningspaneel aan de rechterkant gebruiken om uw resultaten verder te filteren.
    2. +
  2. Klik op het ‘plus’-pictogram (Toevoegen aan) naast het lettertype van uw keuze.
    3. +
  3. Klik op de knop ‘* Family Selected’ in het paneel aan de onderkant van de pagina (‘*’ is afhankelijk van het aantal lettertypen dat u hebt geselecteerd).
    4. +
  4. In het pop-upscherm kunt u de regels met code zien die Google aan u doorgeeft. Die regels kopieert u in een teksteditor en slaat u op voor later gebruik.
    5. +
+ +

+ +

 

+ +

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}

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 deleted file mode 100644 index 1025b94397..0000000000 --- a/files/nl/learn/html/forms/geavanceerde_styling_van_html-formulieren/index.html +++ /dev/null @@ -1,436 +0,0 @@ ---- -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 deleted file mode 100644 index ae4ec439c2..0000000000 --- a/files/nl/learn/html/forms/how_to_structure_an_html_form/index.html +++ /dev/null @@ -1,964 +0,0 @@ ---- -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 deleted file mode 100644 index 13853c2ccf..0000000000 --- a/files/nl/learn/html/forms/index.html +++ /dev/null @@ -1,358 +0,0 @@ ---- -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 deleted file mode 100644 index f6c3cda07c..0000000000 --- a/files/nl/learn/html/forms/styling_html_forms/index.html +++ /dev/null @@ -1,344 +0,0 @@ ---- -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 deleted file mode 100644 index 844466956e..0000000000 --- a/files/nl/learn/html/forms/the_native_form_widgets/index.html +++ /dev/null @@ -1,1448 +0,0 @@ ---- -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 deleted file mode 100644 index feea7f5f78..0000000000 --- a/files/nl/learn/html/forms/verzenden_van_formuliergegevens/index.html +++ /dev/null @@ -1,339 +0,0 @@ ---- -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 deleted file mode 100644 index 43c489e5a9..0000000000 --- a/files/nl/learn/html/forms/your_first_html_form/index.html +++ /dev/null @@ -1,273 +0,0 @@ ---- -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/introduction_to_html/advanced_text_formatting/index.html b/files/nl/learn/html/introduction_to_html/advanced_text_formatting/index.html new file mode 100644 index 0000000000..1413987a12 --- /dev/null +++ b/files/nl/learn/html/introduction_to_html/advanced_text_formatting/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/creating_hyperlinks/index.html b/files/nl/learn/html/introduction_to_html/creating_hyperlinks/index.html new file mode 100644 index 0000000000..a00d948b29 --- /dev/null +++ b/files/nl/learn/html/introduction_to_html/creating_hyperlinks/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/debugging_html/index.html b/files/nl/learn/html/introduction_to_html/debugging_html/index.html new file mode 100644 index 0000000000..e0b791bd12 --- /dev/null +++ b/files/nl/learn/html/introduction_to_html/debugging_html/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/gevorderde_tekstopmaak/index.html b/files/nl/learn/html/introduction_to_html/gevorderde_tekstopmaak/index.html deleted file mode 100644 index 1413987a12..0000000000 --- a/files/nl/learn/html/introduction_to_html/gevorderde_tekstopmaak/index.html +++ /dev/null @@ -1,452 +0,0 @@ ---- -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 deleted file mode 100644 index b6e0307328..0000000000 --- a/files/nl/learn/html/introduction_to_html/het_hoofd_metadata_in_html/index.html +++ /dev/null @@ -1,257 +0,0 @@ ---- -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 deleted file mode 100644 index e0b791bd12..0000000000 --- a/files/nl/learn/html/introduction_to_html/html_debuggen/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -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/hyperlinks_maken/index.html b/files/nl/learn/html/introduction_to_html/hyperlinks_maken/index.html deleted file mode 100644 index a00d948b29..0000000000 --- a/files/nl/learn/html/introduction_to_html/hyperlinks_maken/index.html +++ /dev/null @@ -1,306 +0,0 @@ ---- -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/marking_up_a_letter/index.html b/files/nl/learn/html/introduction_to_html/marking_up_a_letter/index.html new file mode 100644 index 0000000000..1942ef0baa --- /dev/null +++ b/files/nl/learn/html/introduction_to_html/marking_up_a_letter/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/opmaak_van_een_brief/index.html b/files/nl/learn/html/introduction_to_html/opmaak_van_een_brief/index.html deleted file mode 100644 index 1942ef0baa..0000000000 --- a/files/nl/learn/html/introduction_to_html/opmaak_van_een_brief/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -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 deleted file mode 100644 index baca13f51b..0000000000 --- a/files/nl/learn/html/introduction_to_html/structureren_inhoud_van_webpagina/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -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/introduction_to_html/structuring_a_page_of_content/index.html b/files/nl/learn/html/introduction_to_html/structuring_a_page_of_content/index.html new file mode 100644 index 0000000000..baca13f51b --- /dev/null +++ b/files/nl/learn/html/introduction_to_html/structuring_a_page_of_content/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/introduction_to_html/the_head_metadata_in_html/index.html b/files/nl/learn/html/introduction_to_html/the_head_metadata_in_html/index.html new file mode 100644 index 0000000000..b6e0307328 --- /dev/null +++ b/files/nl/learn/html/introduction_to_html/the_head_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/multimedia_and_embedding/images_in_html/index.html b/files/nl/learn/html/multimedia_and_embedding/images_in_html/index.html new file mode 100644 index 0000000000..5e2662b5ea --- /dev/null +++ b/files/nl/learn/html/multimedia_and_embedding/images_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_and_embedding/index.html b/files/nl/learn/html/multimedia_and_embedding/index.html new file mode 100644 index 0000000000..bd42da37c8 --- /dev/null +++ b/files/nl/learn/html/multimedia_and_embedding/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/multimedia_and_embedding/video_and_audio_content/index.html b/files/nl/learn/html/multimedia_and_embedding/video_and_audio_content/index.html new file mode 100644 index 0000000000..86c1b3aa4b --- /dev/null +++ b/files/nl/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -0,0 +1,269 @@ +--- +title: HTML5 audio en video gebruiken +slug: Web/Guide/HTML/HTML5_audio_en_video_gebruiken +tags: + - Audio + - HTML5 + - Instructie + - Media + - Ogg + - Video + - mp3 + - voorbeeld +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video +--- +

HTML5 introduceert ingebouwde media ondersteuning via de {{ HTMLElement("audio") }} en {{ HTMLElement("video") }} elementen, waarmee het mogelijk wordt om op een eenvoudige manier media in te sluiten in HTML documenten.

+ +

Media insluiten

+ +

Het insluiten van media in uw HTML document stelt niet zoveel voor:

+ +
+
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
+  Uw browser ondersteunt het element <code>video</code> niet.
+</video>
+ +

Dit voorbeeld speelt een sample video van de Theora website inclusief controls voor het afspelen.

+ +

En hier is een voorbeeld van het inbedden van een audio element in uw HTML document.

+ +
<audio src="/test/audio.ogg">
+<p>Het audio element wordt niet door uw browser ondersteund.</p>
+</audio>
+
+ +

The src attribuut bevat een URL van een geluidsbestand of een pad naar een lokaal geluidsbestand.

+ +
+
<audio src="audio.ogg" controls autoplay loop>
+<p>Het audio element wordt niet door uw browser ondersteund.</p>
+</audio>
+
+ +

Dit voorbeeld van de code gebruikt attributen van het {{ HTMLElement("audio") }} element:

+ + + +
+
<audio src="audio.mp3" preload="auto" controls></audio>
+
+ +

Het preload attribuut wordt gebruikt in een audio element om grote bestanden te bufferen. U kunt hierbij 3 waarden gebruiken:

+ + + +

Meerdere bronbestanden kunnen vastgelegd worden met behulp van het {{ HTMLElement("source") }} element om verschillende formaten in verschillende browsers te ondersteunen voor geluid of beeld. Bijvoorbeeld:

+ +
<video controls>
+  <source src="foo.ogg" type="video/ogg">
+  <source src="foo.mp4" type="video/mp4">
+  Het <code>video</code> element wordt niet ondersteund door uw browser.
+</video>
+
+ +

In dit voorbeeld wordt het Ogg-bestand afgespeeld in browsers die Ogg ondersteunen. Als de browser dat niet doet, wordt automatisch het MPEG-4-bestand gebruikt. Kijk ook naar de lijst met media formaten die ondersteund worden door de audio en video elementen in de diverse browsers.

+ +

U kunt ook opgeven welke codes het mediabestand vereist; dit maakt het mogelijk voor de browser om nog intelligentere beslissingen te nemens:

+ +
<video controls>
+  <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
+  Het <code>video</code> element wordt niet ondersteund door uw browser.
+</video>
+ +

We hebben hier vastgelegd dat deze via de Dirac en Speex codes gebruikt. Als de browser wel Ogg ondersteund, maar niet deze codes dan zal de video niet laden.

+ +

Wanneer het type attribuut niet gespecificeerd is dan wordt het mediatype van de server gehaald en er wordt gecontroleerd of de browser er mee om kan gaan; als het niet weergegeven kan worden, zal de volgende source gecontroleerd worden. Wanneer niet een van de source elementen gebruik kan worden, wordt een error gebeurtenis naar het video element verzonden. Wanneer het type attribuut vastgelegd is, wordt deze vergeleken met de types die de browser kan afspelen en wanneer het niet herkend wordt, zal direct volgende source gecontroleerd worden. Er wordt dan dus niets via de server opgehaald of gecontroleerd.

+ +

Bekijk ook Media gebeurtenissen voor een complete lijst van gebeurtenissen die die aan het afspelen van media gekoppeld kunnen worden. Voor details van media formaten die ondersteund worden door de diverse browsers bekijk Media formaten die ondersteund worden door de audio en video elementen.

+ +

Het afspelen van media

+ +

Als je eenmaal de media hebt ingebed in het HTML document met de nieuwe elementen kun je ze programma-technisch gaan besturen met JavaScript code. Een voorbeeld: om het afspelen te starten of the herstarten, kun je het volgende doen:

+ +
var v = document.getElementsByTagName("video")[0];
+v.play();
+
+ +

De eerste regel haalt het eerste video-element van het document op en de tweede regel roept de play() methode, zoals deze gedefinieerd is in de {{ interface("nsIDOMHTMLMediaElement") }} interface die gebruikt wordt om media-element te implementeren.

+ +

Het besturen van een HTML5 audio element om af te spelen, te pauzeren, het volume te verhogen of te verlagen met gebruik van Javascript is eenvoudig.

+ +
<audio id="demo" src="audio.mp3"></audio>
+<div>
+  <button onclick="document.getElementById('demo').play()">Audio afspelen</button>
+  <button onclick="document.getElementById('demo').pause()">Audio pauzeren</button>
+  <button onclick="document.getElementById('demo').volume+=0.1">Volume verhogen</button>
+  <button onclick="document.getElementById('demo').volume-=0.1">Volume verlagen</button>
+</div>
+
+ +

Het downloaden van media stoppen

+ +

Het afspelen stoppen van media is zo eenvoudig als het aanroepen van de de pause() methode, maar de browser zal blijven downloaden totdat het media-element wordt afgevoerd door de garbage collector.

+ +

Bij deze de truck om het downloaden direct te stoppen:

+ +
var mediaElement = document.getElementById("myMediaElementID");
+mediaElement.pause();
+mediaElement.src='';
+//or
+mediaElement.removeAttribute("src");
+
+ +

Door het src attribuut van het media-element te verwijderen (of deze met een lege string te vullen, dat kan van de browser afhangen) wordt de interne decoder van het element gesloopt en dat zal het downloaden doen stoppen. The specificaties zijn echter nog tamelijk onduidelijk wat betreft het  removeAttribute() scenario en het leegmaken (lege string) van het <video> 'src' attribuut kan een ongewenst verzoek veroorzaken (Mozilla Firefox 22).

+ +

Het doorzoeken van media

+ +

Media elementen voorzien in ondersteuning van het wijzigen van de afspeelpositie naar specifieke punten in de inhoud van de media. Dit wordt gedaan via het invullen van de eigenschap currentTime  op het element; zie hiervoor {{ domxref("HTMLMediaElement") }} voor meer details over de eigenschappen van een media-element. Zet eenvoudig de waarde op de tijd, in seconden, van de positie waarop het afspelen moet doorgaan.

+ +

U gebruikt de eigenschap seekable om het gebied dat beschikbaar is te doorzoeken. De eigenschap retourneert een {{ domxref("TimeRanges") }} object waarbinnen een lijst bestaat met de tijden waarop gezocht kan worden.

+ +
var mediaElement = document.getElementById('mediaElementID');
+mediaElement.seekable.start();  // Retourneert de starttijd (in seconden)
+mediaElement.seekable.end();    // Retourneert de einddtijd (in seconden)
+mediaElement.currentTime = 122; // Ga naar 122 seconden
+mediaElement.played.end();      // Retourneert het aantal seconden dat de browser heeft afgespeeld
+
+ +

Leg het afspeelgebied vast

+ +

Bij het opgeven van de URI van de media voor een {{HTMLElement ("audio")}} of {{HTMLElement ("video")}} element kunt u desgewenst aanvullende informatie geven voor het deel van de media dat afgespeeld moet worden. Om dit te doen, voeg een hekje ("#"), gevolgd door de media fragment beschrijving.
+
+ Een tijdsgebied wordt opgegeven met de syntaxis:

+ +
#t=[starttime][,endtime]
+ +

De tijd kan worden opgegeven als een aantal seconden (als een floating-point waarde) of als een uren / minuten / seconden tijd gescheiden met dubbele punten (zoals 02:05:01 2 uur, 5 minuten en 1 seconde).

+ +

Een paar voorbeelden:

+ +
+
http://foo.com/video.ogg#t=10,20
+
Laat de video afspelen te beginnen bij 10 seconden en ga door tot en met de 20 seconden.
+
http://foo.com/video.ogg#t=,10.5
+
Speel de video af vanaf het begin tot en met 10,5 seconden.
+
http://foo.com/video.ogg#t=,02:00:00
+
Speel de video af vanaf het begin en voor de duur van 2 uur.
+
http://foo.com/video.ogg#t=60
+
Speel de video af vanaf de 60ste seconden en speel tot het einde.
+
+ +
+

The playback range portion of the media element URI specification was added to Gecko 9.0 {{ geckoRelease("9.0") }}. At this time, this is the only part of the Media Fragments URI specification implemented by Gecko, and it can only be used when specifying the source for media elements, and not in the address bar.

+
+ +

Uitwijkmogelijkheden

+ +

HTML opgenomen tussen bijvoorbeeld de openings- en de sluittags van media-elementen wordt verwerkt door browsers die geen ondersteuning hebben voor HTML5 media. U kunt profiteren van dit feit om alternatieve fallback media te bieden voor die browsers.
+
+ Dit gedeelte bevat twee mogelijke fallback opties voor video. Voor elk geval, als de browser HTML5 video ondersteunt, dan wordt die gebruikt; in alle andere gevallen wordt de optie fallback gebruikt.

+ +

Het gebruik van Flash

+ +

U kunt Flash gebruiken om een Flash-formaat film af te spelen als de {{HTMLElement ("video")}} element niet wordt ondersteund:

+ +
<video src="video.ogv" controls>
+    <object data="flvplayer.swf" type="application/x-shockwave-flash">
+      <param value="flvplayer.swf" name="movie"/>
+    </object>
+</video>
+ +

NB: gebruik geen classid in het object-tag om compatibel te zijn/blijven met andere browsers dan Internet Explorer.

+ +

Ogg videos afspelen met gebruik van een Java applet

+ +

Er is een Java appletCortado die je kunt gebruiken las uitwijkmogelijkheid voor het afspelen van Ogg videos in browsers die Java ondersteunen, maar dat niet doen voor HTML5 video:

+ +
<video src="my_ogg_video.ogg" controls width="320" height="240">
+  <object type="application/x-java-applet" width="320" height="240">
+     <param name="archive" value="cortado.jar">
+     <param name="code" value="com.fluendo.player.Cortado.class">
+     <param name="url" value="my_ogg_video.ogg">
+     <p>You need to install Java to play this file.</p>
+  </object>
+</video>
+ +

Als u geen alternatief kind-element creëert van het cortado object element, zoals het {{HTMLElement ("p")}} element hierboven, dan zullen FireFox 3.5 installaties die de video native behandelen, maar geen Java geïnstalleerd hebben ten onrechte de gebruiker informeren dat ze een plugin moeten installeren om de inhoud op de pagina te bekijken.

+ +

{{ h1_gecko_minversion("Foutafhandeling", "2.0") }}

+ +

Met ingang van Gecko 2.0 is de foutafhandeling is herzien om te voldoen aan de meest recente versie van de HTML5 specificaties. De error gebeurtenis wordt nu naar afgeleverd bij het kind-element dat behoort bij de bron die de fout laat ontstaan in plaats van bij het media-element zelf.

+ +

Dit zorgt er voor dat u kunt bepalen welke bron niet geladen werd, dit kan nuttig zijn. Bekijk deze HTML maar eens:

+ +
<video>
+<source id="mp4_src"
+  src="video.mp4"
+  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
+</source>
+<source id="3gp_src"
+  src="video.3gp"
+  type='video/3gpp; codecs="mp4v.20.8, samr"'>
+</source>
+<source id="ogg_src"
+  src="video.ogv"
+  type='video/ogg; codecs="theora, vorbis"'>
+</source>
+</video>
+ +

Omdat Firefox MP4 en 3GP niet ondersteunt vanwege principe van patentbezwaren zullen {{ HTMLElement("source") }} elementen met de ID's "mp4_src" en "3gp_src" in een error gebeurtenis lopen voordat de Ogg bron geladen wordt. De bronnen worden uitgevoerd in de volgorde waarin ze staan en wanneer er eenmaal een succesvol geladen is dan worden de overige bronnen helemaal niet meer geraadpleegd.

+ +

Detecteren of er geen bronnen zijn geladen

+ +

Om vast te stellen dat niet een {{ HTMLElement("source") }} kindelement is geladen kunt u de waarde van het attribuut networkState van het media-element controleren, Wanneer de waarde HTMLMediaElement.NETWORK_NO_SOURCE is dan weet u dat geen van de bronnen geladen is.

+ +

Op dat punt gekomen kunt u een andere bron invoegen met behulp van een nieuw {{ HTMLElement("source") }} element als child van het media element en Gecko zal een poging doen om die bron te laden.

+ +

Inhoud tonen wanneer geen bron gedecodeerd kon worden

+ +

Een andere manier om de fallback inhoud van een video te tonen als geen van de bronnen kan worden gedecodeerd in de huidige browser's is het toevoegenvan foutafhandeling in het laatste bronelement. Dan kunt u de video vervangen met zijn fallback inhoud:

+ +
<video controls>
+  <source src="dynamicsearch.mp4" type="video/mp4"></source>
+  <a href="dynamicsearch.mp4">
+    <img src="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS">
+  </a>
+  <p>Klik op de afbeelding om een video demo van een dynamische app zoekopdracht af te spelen</p>
+</video>
+
+
+ +
var v = document.querySelector('video'),
+    sources = v.querySelectorAll('source'),
+    lastsource = sources[sources.length-1];
+lastsource.addEventListener('error', function(ev) {
+  var d = document.createElement('div');
+  d.innerHTML = v.innerHTML;
+  v.parentNode.replaceChild(d, v);
+}, false);
+
+ +

Bekijk ook

+ + 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 deleted file mode 100644 index 5e2662b5ea..0000000000 --- a/files/nl/learn/html/multimedia_inbedden/afbeeldingen_in_html/index.html +++ /dev/null @@ -1,368 +0,0 @@ ---- -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 deleted file mode 100644 index bd42da37c8..0000000000 --- a/files/nl/learn/html/multimedia_inbedden/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -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/javascript/client-side_web_apis/manipulating_documents/index.html b/files/nl/learn/javascript/client-side_web_apis/manipulating_documents/index.html new file mode 100644 index 0000000000..61f3e48bcf --- /dev/null +++ b/files/nl/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -0,0 +1,305 @@ +--- +title: Documenten manipuleren +slug: Learn/JavaScript/Client-side_web_APIs/Manipuleren_documenten +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}
+ +

Als je een webpagina of app ontwerpt, zal je regelmatig de documentstructuur van je site willen manipuleren. Het zal een van je meest voorkomende taken zijn.  Meestal doen we dit met het Document Object Model (DOM). Het DOM is een reeks APIs waarmee we de HTML van onze pagina kunnen controleren en de informatie erin opmaken met allerlei stijlelementen. Het DOM maakt vooral gebruik van het {{domxref("Document")}} object. In dit artikel leren we hoe we hoe we het DOM kunnen gebruiken en we bekijken een aantal interessante APIs waarmee we onze webomgeving op een interessante manier kunnen veranderen.

+ + + + + + + + + + + + +
Vereiste kennis:Basiskennis van een computer, basisbegrippen van HTML, CSS en Javascript, inclusief Javascript objecten.
Doelstelling: +

Vertrouwd worden met de kern APIs van het DOM en met de andere APIs die meestal met het DOM en documentmanipulatie worden geassociëerd.

+
+ +

De belangrijke onderdelen van een webbrowser 

+ +

Web browsers bestaan uit zeer complexe software met vele bewegende onderdelen erin. Veel van die delen kunnen niet worden gecontrolleerd of gemanipuleerd door een webontwikkelaar die Javascript gebruikt. Je zou kunnen veronderstellen dat dat slecht is, maar er zijn goede redenen voor het vergrendelen van browsers. De meeste ervan draaien rond veiligheid. Beeld je je een website in die zomaar toegang zou kunnen hebben tot je opgeslagen paswoorden of andere gevoelige informatie en zou kunnen inloggen op websites alsof hij jou was? 

+ +

Ondanks de beperkingen geven Web APIs ons toegang tot heel wat functionaliteit die ons in staat stelt vele dingen te doen met webpagina's. Er zijn een aantal evidente onderdelen waar je regelmatig naar zult verwijzen in je code. In het volgende diagram vind je de belangrijkste onderdelen van een webbrowser die betrokken zijn bij de weergave van een webpagina :

+ +

+ + + +

In dit artikel zullen we vooral aandacht besteden aan de manipulatie van het document, maar we zullen ook nog een paar andere nuttige zaken tonen.

+ +

Het document object model

+ +

Het document dat in een van de browsertabs van je webbrowser is geladen, wordt weergegeven door het document object model. Dit model heeft een boomstructuur en wordt door de browser zelf gecrëerd. Deze voorstellingswijze maakt de HTML zeer toegankelijk voor programmeertalen. De browser zelf gebruikt het DOM om allerlei regels rond vormgeving en andere informatie op de HTML toe te passen terwijl het de pagina weergeeft. Ontwikkelaars zoals jij kunnen Javascriptcode schrijven die het DOM manipuleert nadat de pagina al is opgeladen in de browser.

+ +

We hebben een eenvoudig voorbeeld gemaakt op dom-example.html (bekijk het ook live). Probeer dit voorbeeld in je browser te openen. Het is een zeer simpele pagina die een{{htmlelement("section")}} element bevat waarin je een afbeelding en paragraaf kan vinden. In de paragraaf zit ook nog een link. De html-broncode ziet er zo uit :

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Simple DOM example</title>
+  </head>
+  <body>
+      <section>
+        <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
+        <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p>
+      </section>
+  </body>
+</html>
+ +

Het DOM daarentegen ziet er zo uit:

+ +

+ +
+

Opmerking: Dit DOM boomdiagram werd gegenereerd met Ian Hickson's Live DOM viewer.

+
+ +

Zoals je kan zien krijgen elk element en elk stukje tekst in het document een plek in de boomstructuur. Zo’n plek noemen we een knooppunt (in het Engels een node). Je zal ook verschillende termen tegenkomen die worden gebruikt om te beschrijven met welk type knooppunt we te maken hebben en termen die hun posititie in de boom en hun relatie met elkaar beschrijven.

+ +

Je zal merken dat ik zowel Engelse als Nederlandse termen gebruik. Een vertaling kan zeer verhelderend zijn maar een woord als "afstammelingsknooppunt" vind ik veel te lang om nog werkbaar te zijn en als je het googelt, heb je nul resulaten. Ik eet dus een beetje van twee walletjes.

+ + + +

Het is nuttig om je deze terminologie eigen te maken vooraleer je met het DOM begint te werken omdat een aantal andere termen die je zult tegenkomen op vergelijkbare wijze zijn opgebouwd. Je bent ze misschien zelf al tegengekomen als je CSS hebt geleerd (bijv. descendant selector, child selector).

+ +

Actief Leren: Eenvoudige DOM-Manipulatie

+ +

Onze eerste les over DOM-manipulatie beginnen we met een praktisch voorbeeld.

+ +
    +
  1. Maak een lokale kopie van de dom-example.html pagina en het beeld dat erbij hoort.
    2. +
  2. Voeg net onder </body> een <script></script> element toe. (Let op, dus onder de tweede tag die het body-element afsluit!).
    3. +
  3. Om een element in het DOM te manipuleren, moet je het eerst selecteren en een verwijzing ernaar opslaan in een variabele. Om dat te doen, voeg je de volgende regel aan je script toe: + 
    var link = document.querySelector('a');
    +
    4. +
  4. Nu we een verwijzing naar het element hebben opgeslagen in een variabele, kunnen we beginnen met een aantal eigenschappen en methodes die beschikbaar zijn gemaakt voor de manipulatie van het DOM. (Deze worden gedefiniëerd in interfaces zoals het {{domxref("HTMLAnchorElement")}} voor een {{htmlelement("a")}} element, zijn algemenere ouder-interface, het {{domxref("HTMLElement")}}, en {{domxref("Node")}} die alle knooppunten in het DOM vertegenwoordigt. Laat ons eerst en vooral de tekst in de hyperlink veranderen door de waarde van de {{domxref("Node.textContent")}}aan te passen. Voeg de volgende regel toe aan de vorige: + 
    link.textContent = 'Mozilla Developer Network';
    +
    5. +
  5. We moeten ook de URL veranderen waar de hyperlink naar verwijst zodat die ons niet naar de verkeerde pagina brengt als we erop klikken. Voeg daarvoor de volgende regel toe: : + 
    link.href = 'https://developer.mozilla.org';
    +
    6. +
+ +
+

Opmerking : Zoals met zoveel in Javascript, zijn er vele manieren om een element te selecteren en om een verwijzing ernaar op te slaan in een variable. {{domxref("Document.querySelector()")}} is de aanbevolen moderne manier. Dat komt goed uit want deze methode laat je elementen selecteren met CSS-selectoren. De regel hierboven komt overeen met het eerste {{htmlelement("a")}} element dat in het document opduikt. Als je meer dan één element wil manipuleren, kan je {{domxref("Document.querySelectorAll()")}} gebruiken. Deze methode selecteert elk element in het document dat overeenkomt met de selector en slaat die op in een array.

+ +

Er zijn ook oudere methodes beschikbaar om verwijzingen naar een element te grijpen, zoals:

+ + + +

Deze twee methoden werken in oudere browsers die moderne methoden zoals querySelector() niet zullen begrijpen maar ze zijn niet zo praktisch. Kijk maar eens rond en zie welke anderen je nog kan vinden.

+
+ +

Nieuwe Knooppunten (Nodes) Creëren en Plaatsen

+ +

Hierboven heb je eens kunnen proeven van wat je kan doen, maar laat ons nu verder gaan en kijken hoe we nieuwe elementen kunnen creëren.

+ +
    +
  1. We gebruiken opnieuw ons laatste voorbeeld en maken een referentie naar ons {{htmlelement("section")}} element. Daarvoor voegen we de volgende code toe onderaan het script waar we mee bezig waren (doe ook hetzelfde met de volgende regels): + 
    var sect = document.querySelector('section');
    +
    2. +
  2. Nu gaan we een nieuwe paragraaf creëren met {{domxref("Document.createElement()")}} en we gaan er wat tekst in steken op dezelfde manier die we ervoor hebben gebruikt: + 
    var para = document.createElement('p');
+para.textContent = 'We hope you enjoyed the ride.';
    +
    3. +
  3. Nu kan je de nieuwe paragraaf aan het einde van de sectie vastmaken met {{domxref("Node.appendChild()")}}: + 
    sect.appendChild(para);
    +
    4. +
  4. Als laatste stap van dit gedeelte, voegen we een tekstknooppunt aan de paragraaf toe waar de hyperlink in zit. Daarvoor creëren we eerst de textnode met {{domxref("Document.createTextNode()")}}: + 
    var text = document.createTextNode(' — the premier source for web development knowledge.');
    +
    5. +
  5. Nu grijpen we een referentie naar de paragraaf waar de hyperlink in zit en maken het tekstknooppunt eraan vast : + 
    var linkPara = document.querySelector('p');
+linkPara.appendChild(text);
    +
    6. +
+ +

Dat is het meeste van wat je nodig hebt om knooppunten aan het DOM toe te voegen. Je zal deze methoden vaak gebruiken als je dynamische interfaces maakt (we zullen later een paar voorbeelden bekijken.

+ +

Elementen Verplaatsen en Verwijderen

+ +

Het zal regelmatig nodig zijn om knooppunten te verplaatsen of zelfs helemaal uit het DOM te verwijderen. En dat is natuurlijk mogelijk.

+ +

Stel dat we de paragraaf met de hyperlink naar het einde van de sectie willen verplaatsen, dan doen we gewoon dit:

+ +
sect.appendChild(linkPara);
+ +

Dit verplaatst de paragraaf naar het einde van het <section> element. Je zou denken dat het een tweede kopie van de paragraaf zou maken, maar dat is niet het geval. linkPara is een referentie naar de enige kopie van die paragraaf. Als je een kopie zou willen maken en die ook nog toevoegen, zou je in de plaats daarvan {{domxref("Node.cloneNode()")}} moeten gebruiken.

+ +

Een knooppunt is ook heel makkelijk te verwijderen, ten minste als je een verwijzing naar het knooppunt en zijn ouder hebt. In ons voorbeeld kunnen we gewoon {{domxref("Node.removeChild()")}} gebruiken:

+ +
sect.removeChild(linkPara);
+ +

Het wordt iets complexer als je een knooppunt wil verwijderen dat is gebaseerd op een verwijzing naar zichzelf, wat vrij vaak voorkomt. Er bestaat geen methode die een knooppunt vertelt zichzelf te verwijderen en dus moet je het volgende doen:

+ +
linkPara.parentNode.removeChild(linkPara);
+ +

Probeer nu deze regels uit in je de code van het voorbeeld en bekijk het resultaat.

+ +

Stijl Manipuleren

+ +

Het is mogelijk om de CSS van je webpagina op verschillende manieren te manipuleren met Javascript.

+ +

Om te beginnen kan je met {{domxref("Document.stylesheets")}} een lijst opvragen van alle stijlbladen die aan je document vasthangen. Deze methode brengt ons een array van {{domxref("CSSStyleSheet")}} objecten op. Je kan dan naar wens stijlelementen toevoegen en verwijderen. We gaan echter niet dieper in op deze methodes omdat ze een beetje archaïsch zijn en nogal lastig in het gebruik. Er bestaan veel gemakkelijker methoden.

+ +

De eerste manier is om inline-stijlen onmiddellijk aan de elementen toe te voegen die je dynamisch wil vormgeven. Dit wordt met {{domxref("HTMLElement.style")}} gedaan, die inline stijlinformatie over elk element in het document bevat. Je kan de eigenschappen van dit object bepalen en zo direct de stijl van je elementen bijwerken.

+ +
    +
  1. Voeg de volgende regels toe aan het voorbeeld waar we mee bezig zijn: + 
    para.style.color = 'white';
+para.style.backgroundColor = 'black';
+para.style.padding = '10px';
+para.style.width = '250px';
+para.style.textAlign = 'center';
    +
    2. +
  2. Vernieuw de pagina en je zal zien dat de verschillende stijlen zijn toegepast op de paragraaf. Als je de paragraaf in je browser's Page Inspector/DOM inspector bekijkt, zal je zien dat deze stijlregels inderdaad inline in je document worden toegevoegd: + 
    <p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;">We hope you enjoyed the ride.</p>
    +
    3. +
+ +
+

Opmerking: Let op hoe de Javascript versie van CSS-eigenschapen in lower camel case (*) wordt geschreven terwijl de CSS-versies een koppelteken krijgen (bijv. backgroundColor versus background-color). Let erop deze niet met elkaar te verwarren, anders zullen ze niet werken.
+ (*) De woorden worden aan elkaar geschreven en vanaf het tweede woord begint elk woord met een hoofdletter.

+
+ +

Er is nog een algemeen aanvaarde manier om je stijlen dynamisch in je document te manipuleren en die gaan we nu bekijken:

+ +
    +
  1. Verwijder de vorige vijf regels die je aan je JavaScript hebt toegevoegd.
    2. +
  2. Voeg de volgende regels toe aan je HTML {{htmlelement("head")}}: + 
    <style>
+.highlight {
+  color: white;
+  background-color: black;
+  padding: 10px;
+  width: 250px;
+  text-align: center;
+}
+</style>
    +
    3. +
  3. Nu gaan we een zeer nuttig methode gebruiken voor algemene HTML-manipulatie : {{domxref("Element.setAttribute()")}}. Deze methode krijgt twee argumenten: het attribuut dat je aan het element wil vasthangen en de waarde die je het attribuut wenst te geven. In dit geval geven we onze paragraaf een klasse die de waarde ‘highlight’ krijgt. + 
    para.setAttribute('class', 'highlight');
    +
    4. +
  4. Vernieuw je pagina en je zult geen verandering zien; de CSS wordt nog steeds op de paragraaf toegepast. Deze keer gebeurt dat echter omdat we de paragraaf een klasse geven die wordt geselecteerd door onze CSS-regel, niet door het gebruik van een inline CSS-stijl.
    5. +
+ +

Welke methode je kiest hangt van jou af; beide hebben hun voordelen en nadelen. De eerste methode vereist minder gedoe en is goed voor eenvoudig gebruik. De tweede is meer voor de puristen onder ons. (CSS en Javascript worden niet met elkaar vermengd want er zijn geen inline-regels. Inline-stijl wordt als een slechte gewoonte beschouwd). Als je grotere en complexere apps begint te bouwen, zal je waarschijnlijk de tweede methode gaan gebruiken, maar het is echt helemaal jouw beslissing.

+ +

Tot nu toe hebben we nog niet echt iets nuttigs gedaan! Het is zinloos om Javascript te gebruiken voor de creatie van statische inhoud – je kan die toch net zo goed in je HTML schrijven zonder Javascript te gebruiken. Het is ingewikkelder dan HTML en als je de inhoud met Javascript maakt, zijn er ook nog andere problemen mee verbonden (de Javascript-code is bijvoorbeeld onleesbaar voor zoekmachines).

+ +

In de volgende secties zullen we paar praktische manieren zien waarop we DOM APIs kunnen gebruiken.

+ +
+

Opmerking: Je kan onze afgewerkte versie van het dom-example.html op GitHub vinden. (bekijk het ook live).

+
+ +

Actief Leren: Nuttige informatie uit het window object halen.

+ +

Tot nu toe hebben enkel de kenmerken van {{domxref("Node")}} en {{domxref("Document")}} bekeken om documenten te manipuleren, maar er is geen reden waarom je geen data uit andere bronnen zou kunnen halen en die in je UI gebruiken. Denk eens even terug aan onze eenvoudige maps-example.html demo uit het vorige artikel. We hadden locatiedata gevonden en die gebruikt om een map van jouw streek te maken. Je moet er gewoon voor zorgen dat je data het juiste formaat heeft. Javascript maakt het gemakkelijker dan vele andere talen om dat te doen want het gebruikt zwakke types; nummers zullen bijvoorbeeld gemakkelijk in strings kunnen worden omgezet als je ze in je scherm wil afdrukken.

+ +

In dit voorbeeld zullen we een probleem oplossen dat vaak voorkomt : ervoor zorgen dat je applicatie even groot is als het window waarin het wordt bekeken, wat dan ook de grootte van dat venster mag zijn. Dit is vaak nuttig in situaties zoals spelletjes, waarin je zoveel mogelijk gebruik van de schermgrootte wil kunnen maken om het spel erin te spelen.

+ +

Om te beginnen maken we een lokale kopie van twee demo-bestanden: window-resize-example.html en bgtile.png. Open ze en bekijk ze eens. Je zal zien een {{htmlelement("div")}} element zien dat een klein deel van het scherm beslaat. Op de achtergrond van het scherm wordt een tegel toegepast. Dit gaan we gebruiken om het UI-gebied van onze app weer te geven.

+ +
    +
  1. Grijp eerst en vooral een referentie naar de div en dan naar de breedte en hoogte van het viewport (het venster waar we je document in zien zitten). Die sla je op in variabelen. Deze twee waarden worden handig opgeslagen in twee eigenschappen: {{domxref("Window.innerWidth")}} en {{domxref("Window.innerHeight")}}. Voeg de volgende regels toe aan je {{htmlelement("script")}}: + 
    var div = document.querySelector('div');
+var WIDTH = window.innerWidth;
+var HEIGHT = window.innerHeight;
    +
    2. +
  2. Daarna gaan we de breedte en de hoogte van de div dynamisch aanpassen zodat ze gelijk worden aan die van de viewport. Voeg de volgende lijnen toe aan de vorige: : + 
    div.style.width = WIDTH + 'px';
+div.style.height = HEIGHT + 'px';
    +
    3. +
  3. Sla alles op en vernieuw je browser. Nu zou de div even groot als je viewport moeten zijn wat ook de afmetingen van je scherm zijn. Als je nu de afmetingen opnieuw probeert te veranderen om je venster groter te maken, zal je zien dat de div dezelfde grootte behoudt. We bepalen de afmetingen slechts eenmaal.
    4. +
  4. We kunnen ook een gebeurtenis of event gebruiken zodat de afmetingen van de div samen met die van het venster veranderen. Het {{domxref("Window")}} object beschikt over een event dat ‘resize’ heet en dat telkens wordt getriggered als de grootte van het venster wordt gewijzigd. De {{domxref("Window.onresize")}} event handler staat ons toe dit event aan onze code vast te koppelen. Zo wordt die uitgevoerd telkens als de afmetingen van het window veranderen. Voeg de volgende lijnen toe onderaan je code: + 
    window.onresize = function() {
+  WIDTH = window.innerWidth;
+  HEIGHT = window.innerHeight;
+  div.style.width = WIDTH + 'px';
+  div.style.height = HEIGHT + 'px';
+}
    +
    5. +
+ +
+

Opmerking: Als je vastraakt, kan je altijd nog ons voltooide window resize voorbeeld bekijken. (bekijk het ook live).

+
+ +

Actief Leren : een dynamische boodschappenlijst

+ +

Om het artikel af te ronden, willen we je een kleine uitdaging aanbieden: we willen een eenvoudige boodschappenlijst maken waar je dynamisch artikelen aan kan toevoegen door een invoerveld en een knop te gebruiken. Als je een artikel in het veld invult en op de knop drukt:

+ + + +

De voltooide demo zal er ongeveer zo uitzien:

+ +

+ +

Om de oefening te maken, volg je de stappen hieronder en zorg je ervoor dat de lijst zich gedraagt zoals hierboven is beschreven.

+ +
    +
  1. Om te beginen download je dit bestand: shopping-list.html. Je zal zien dat er minimum aan CSS in zit, een lijst met een label, een invoerveld, een knop, een lege lijst en een {{htmlelement("script")}}-element. Je zal al je code aan het script toevoegen.
    2. +
  2. Creëer drie variabelen die een referentie naar de {{htmlelement("ul")}}, {{htmlelement("input")}}, en  {{htmlelement("button")}} elementen bevatten.
    3. +
  3. Creëer een functie die zal worden uitgevoerd als er op de knop wordt geklikt.
    4. +
  4. In de functie sla je eerst de waarde die het invoerveld nu heeft, op in een variabele.
    5. +
  5. Daarna maak je het invoerveld leeg door zijn waarde gelijk te maken aan een lege string: ''.
    6. +
  6. Creëer drie nieuwe elementen {{htmlelement('li')}}, {{htmlelement('span')}}, en {{htmlelement('button')}}. Sla ze op in variabelen.
    7. +
  7. Bevestig het span-element en de knop aan het lijstonderdeel (li dus) en maak ze de kinderen van li.
    8. +
  8. Zet de tekstinhoud van het span-element gelijk aan de waarde van het invoerveld dat je eerder al hebt opgeslagen en de tekst van de knop gelijk aan 'Verwijderen'.
    9. +
  9. Bevestig het lijstonderdeel aan de lijst en maak het een kind van de lijst.
    10. +
  10. Bevestig een event handler aan de verwijderknop, die het volledige lijstonderdeel zal verwijderen als erop wordt geklikt. (Herinner je je nog hoe we al een node/knooppunt hebben verwijderd? Deze keer wil je echter niet het kind van zijn ouder verwijderen, je wil het kind van de grootouder verwijderen!)
    11. +
  11. Ten slotte gebruik je de focus()-methode om de focus op het invoerveld te leggen zodat je het volgende artikel kan invullen.
    12. +
+ +
+

Opmerking: Als je echt vast raakt, kijk dan eens naar onze voltooide boodschappenlijst (bekijk hem ook live.)

+
+ +

Samenvating

+ +

We hebben het einde van ons artikel over DOM-manipulatie bereikt. Je kent nu de belangrijke onderdelen van een webbrowser waarmee documenten worden gecontrolleerd en andere aspecten die relevant zijn voor onze beleving van een webpagina. Maar vooral begrijp je nu wat het Document Object Model is en hoe je het kan manipuleren om nuttige functionaliteit te creëren

+ +

Zie ook

+ +

Er zijn nog veel meer eigenschappen die je kan gebruiken om je documenten te manipuleren. Bekijk de volgende onderwerpen en zie wat je nog kan ontdekken.

+ + + +

(Werp ook eens een blik op onze Web API index voor de volledige lijst van Web APIs die worden gedocumenteerd op MDN!)

+ +
{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}
diff --git a/files/nl/learn/javascript/client-side_web_apis/manipuleren_documenten/index.html b/files/nl/learn/javascript/client-side_web_apis/manipuleren_documenten/index.html deleted file mode 100644 index 61f3e48bcf..0000000000 --- a/files/nl/learn/javascript/client-side_web_apis/manipuleren_documenten/index.html +++ /dev/null @@ -1,305 +0,0 @@ ---- -title: Documenten manipuleren -slug: Learn/JavaScript/Client-side_web_APIs/Manipuleren_documenten -translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}
- -

Als je een webpagina of app ontwerpt, zal je regelmatig de documentstructuur van je site willen manipuleren. Het zal een van je meest voorkomende taken zijn.  Meestal doen we dit met het Document Object Model (DOM). Het DOM is een reeks APIs waarmee we de HTML van onze pagina kunnen controleren en de informatie erin opmaken met allerlei stijlelementen. Het DOM maakt vooral gebruik van het {{domxref("Document")}} object. In dit artikel leren we hoe we hoe we het DOM kunnen gebruiken en we bekijken een aantal interessante APIs waarmee we onze webomgeving op een interessante manier kunnen veranderen.

- - - - - - - - - - - - -
Vereiste kennis:Basiskennis van een computer, basisbegrippen van HTML, CSS en Javascript, inclusief Javascript objecten.
Doelstelling: -

Vertrouwd worden met de kern APIs van het DOM en met de andere APIs die meestal met het DOM en documentmanipulatie worden geassociëerd.

-
- -

De belangrijke onderdelen van een webbrowser 

- -

Web browsers bestaan uit zeer complexe software met vele bewegende onderdelen erin. Veel van die delen kunnen niet worden gecontrolleerd of gemanipuleerd door een webontwikkelaar die Javascript gebruikt. Je zou kunnen veronderstellen dat dat slecht is, maar er zijn goede redenen voor het vergrendelen van browsers. De meeste ervan draaien rond veiligheid. Beeld je je een website in die zomaar toegang zou kunnen hebben tot je opgeslagen paswoorden of andere gevoelige informatie en zou kunnen inloggen op websites alsof hij jou was? 

- -

Ondanks de beperkingen geven Web APIs ons toegang tot heel wat functionaliteit die ons in staat stelt vele dingen te doen met webpagina's. Er zijn een aantal evidente onderdelen waar je regelmatig naar zult verwijzen in je code. In het volgende diagram vind je de belangrijkste onderdelen van een webbrowser die betrokken zijn bij de weergave van een webpagina :

- -

- - - -

In dit artikel zullen we vooral aandacht besteden aan de manipulatie van het document, maar we zullen ook nog een paar andere nuttige zaken tonen.

- -

Het document object model

- -

Het document dat in een van de browsertabs van je webbrowser is geladen, wordt weergegeven door het document object model. Dit model heeft een boomstructuur en wordt door de browser zelf gecrëerd. Deze voorstellingswijze maakt de HTML zeer toegankelijk voor programmeertalen. De browser zelf gebruikt het DOM om allerlei regels rond vormgeving en andere informatie op de HTML toe te passen terwijl het de pagina weergeeft. Ontwikkelaars zoals jij kunnen Javascriptcode schrijven die het DOM manipuleert nadat de pagina al is opgeladen in de browser.

- -

We hebben een eenvoudig voorbeeld gemaakt op dom-example.html (bekijk het ook live). Probeer dit voorbeeld in je browser te openen. Het is een zeer simpele pagina die een{{htmlelement("section")}} element bevat waarin je een afbeelding en paragraaf kan vinden. In de paragraaf zit ook nog een link. De html-broncode ziet er zo uit :

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Simple DOM example</title>
-  </head>
-  <body>
-      <section>
-        <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
-        <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p>
-      </section>
-  </body>
-</html>
- -

Het DOM daarentegen ziet er zo uit:

- -

- -
-

Opmerking: Dit DOM boomdiagram werd gegenereerd met Ian Hickson's Live DOM viewer.

-
- -

Zoals je kan zien krijgen elk element en elk stukje tekst in het document een plek in de boomstructuur. Zo’n plek noemen we een knooppunt (in het Engels een node). Je zal ook verschillende termen tegenkomen die worden gebruikt om te beschrijven met welk type knooppunt we te maken hebben en termen die hun posititie in de boom en hun relatie met elkaar beschrijven.

- -

Je zal merken dat ik zowel Engelse als Nederlandse termen gebruik. Een vertaling kan zeer verhelderend zijn maar een woord als "afstammelingsknooppunt" vind ik veel te lang om nog werkbaar te zijn en als je het googelt, heb je nul resulaten. Ik eet dus een beetje van twee walletjes.

- - - -

Het is nuttig om je deze terminologie eigen te maken vooraleer je met het DOM begint te werken omdat een aantal andere termen die je zult tegenkomen op vergelijkbare wijze zijn opgebouwd. Je bent ze misschien zelf al tegengekomen als je CSS hebt geleerd (bijv. descendant selector, child selector).

- -

Actief Leren: Eenvoudige DOM-Manipulatie

- -

Onze eerste les over DOM-manipulatie beginnen we met een praktisch voorbeeld.

- -
    -
  1. Maak een lokale kopie van de dom-example.html pagina en het beeld dat erbij hoort.
    2. -
  2. Voeg net onder </body> een <script></script> element toe. (Let op, dus onder de tweede tag die het body-element afsluit!).
    3. -
  3. Om een element in het DOM te manipuleren, moet je het eerst selecteren en een verwijzing ernaar opslaan in een variabele. Om dat te doen, voeg je de volgende regel aan je script toe: - 
    var link = document.querySelector('a');
    -
    4. -
  4. Nu we een verwijzing naar het element hebben opgeslagen in een variabele, kunnen we beginnen met een aantal eigenschappen en methodes die beschikbaar zijn gemaakt voor de manipulatie van het DOM. (Deze worden gedefiniëerd in interfaces zoals het {{domxref("HTMLAnchorElement")}} voor een {{htmlelement("a")}} element, zijn algemenere ouder-interface, het {{domxref("HTMLElement")}}, en {{domxref("Node")}} die alle knooppunten in het DOM vertegenwoordigt. Laat ons eerst en vooral de tekst in de hyperlink veranderen door de waarde van de {{domxref("Node.textContent")}}aan te passen. Voeg de volgende regel toe aan de vorige: - 
    link.textContent = 'Mozilla Developer Network';
    -
    5. -
  5. We moeten ook de URL veranderen waar de hyperlink naar verwijst zodat die ons niet naar de verkeerde pagina brengt als we erop klikken. Voeg daarvoor de volgende regel toe: : - 
    link.href = 'https://developer.mozilla.org';
    -
    6. -
- -
-

Opmerking : Zoals met zoveel in Javascript, zijn er vele manieren om een element te selecteren en om een verwijzing ernaar op te slaan in een variable. {{domxref("Document.querySelector()")}} is de aanbevolen moderne manier. Dat komt goed uit want deze methode laat je elementen selecteren met CSS-selectoren. De regel hierboven komt overeen met het eerste {{htmlelement("a")}} element dat in het document opduikt. Als je meer dan één element wil manipuleren, kan je {{domxref("Document.querySelectorAll()")}} gebruiken. Deze methode selecteert elk element in het document dat overeenkomt met de selector en slaat die op in een array.

- -

Er zijn ook oudere methodes beschikbaar om verwijzingen naar een element te grijpen, zoals:

- - - -

Deze twee methoden werken in oudere browsers die moderne methoden zoals querySelector() niet zullen begrijpen maar ze zijn niet zo praktisch. Kijk maar eens rond en zie welke anderen je nog kan vinden.

-
- -

Nieuwe Knooppunten (Nodes) Creëren en Plaatsen

- -

Hierboven heb je eens kunnen proeven van wat je kan doen, maar laat ons nu verder gaan en kijken hoe we nieuwe elementen kunnen creëren.

- -
    -
  1. We gebruiken opnieuw ons laatste voorbeeld en maken een referentie naar ons {{htmlelement("section")}} element. Daarvoor voegen we de volgende code toe onderaan het script waar we mee bezig waren (doe ook hetzelfde met de volgende regels): - 
    var sect = document.querySelector('section');
    -
    2. -
  2. Nu gaan we een nieuwe paragraaf creëren met {{domxref("Document.createElement()")}} en we gaan er wat tekst in steken op dezelfde manier die we ervoor hebben gebruikt: - 
    var para = document.createElement('p');
-para.textContent = 'We hope you enjoyed the ride.';
    -
    3. -
  3. Nu kan je de nieuwe paragraaf aan het einde van de sectie vastmaken met {{domxref("Node.appendChild()")}}: - 
    sect.appendChild(para);
    -
    4. -
  4. Als laatste stap van dit gedeelte, voegen we een tekstknooppunt aan de paragraaf toe waar de hyperlink in zit. Daarvoor creëren we eerst de textnode met {{domxref("Document.createTextNode()")}}: - 
    var text = document.createTextNode(' — the premier source for web development knowledge.');
    -
    5. -
  5. Nu grijpen we een referentie naar de paragraaf waar de hyperlink in zit en maken het tekstknooppunt eraan vast : - 
    var linkPara = document.querySelector('p');
-linkPara.appendChild(text);
    -
    6. -
- -

Dat is het meeste van wat je nodig hebt om knooppunten aan het DOM toe te voegen. Je zal deze methoden vaak gebruiken als je dynamische interfaces maakt (we zullen later een paar voorbeelden bekijken.

- -

Elementen Verplaatsen en Verwijderen

- -

Het zal regelmatig nodig zijn om knooppunten te verplaatsen of zelfs helemaal uit het DOM te verwijderen. En dat is natuurlijk mogelijk.

- -

Stel dat we de paragraaf met de hyperlink naar het einde van de sectie willen verplaatsen, dan doen we gewoon dit:

- -
sect.appendChild(linkPara);
- -

Dit verplaatst de paragraaf naar het einde van het <section> element. Je zou denken dat het een tweede kopie van de paragraaf zou maken, maar dat is niet het geval. linkPara is een referentie naar de enige kopie van die paragraaf. Als je een kopie zou willen maken en die ook nog toevoegen, zou je in de plaats daarvan {{domxref("Node.cloneNode()")}} moeten gebruiken.

- -

Een knooppunt is ook heel makkelijk te verwijderen, ten minste als je een verwijzing naar het knooppunt en zijn ouder hebt. In ons voorbeeld kunnen we gewoon {{domxref("Node.removeChild()")}} gebruiken:

- -
sect.removeChild(linkPara);
- -

Het wordt iets complexer als je een knooppunt wil verwijderen dat is gebaseerd op een verwijzing naar zichzelf, wat vrij vaak voorkomt. Er bestaat geen methode die een knooppunt vertelt zichzelf te verwijderen en dus moet je het volgende doen:

- -
linkPara.parentNode.removeChild(linkPara);
- -

Probeer nu deze regels uit in je de code van het voorbeeld en bekijk het resultaat.

- -

Stijl Manipuleren

- -

Het is mogelijk om de CSS van je webpagina op verschillende manieren te manipuleren met Javascript.

- -

Om te beginnen kan je met {{domxref("Document.stylesheets")}} een lijst opvragen van alle stijlbladen die aan je document vasthangen. Deze methode brengt ons een array van {{domxref("CSSStyleSheet")}} objecten op. Je kan dan naar wens stijlelementen toevoegen en verwijderen. We gaan echter niet dieper in op deze methodes omdat ze een beetje archaïsch zijn en nogal lastig in het gebruik. Er bestaan veel gemakkelijker methoden.

- -

De eerste manier is om inline-stijlen onmiddellijk aan de elementen toe te voegen die je dynamisch wil vormgeven. Dit wordt met {{domxref("HTMLElement.style")}} gedaan, die inline stijlinformatie over elk element in het document bevat. Je kan de eigenschappen van dit object bepalen en zo direct de stijl van je elementen bijwerken.

- -
    -
  1. Voeg de volgende regels toe aan het voorbeeld waar we mee bezig zijn: - 
    para.style.color = 'white';
-para.style.backgroundColor = 'black';
-para.style.padding = '10px';
-para.style.width = '250px';
-para.style.textAlign = 'center';
    -
    2. -
  2. Vernieuw de pagina en je zal zien dat de verschillende stijlen zijn toegepast op de paragraaf. Als je de paragraaf in je browser's Page Inspector/DOM inspector bekijkt, zal je zien dat deze stijlregels inderdaad inline in je document worden toegevoegd: - 
    <p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;">We hope you enjoyed the ride.</p>
    -
    3. -
- -
-

Opmerking: Let op hoe de Javascript versie van CSS-eigenschapen in lower camel case (*) wordt geschreven terwijl de CSS-versies een koppelteken krijgen (bijv. backgroundColor versus background-color). Let erop deze niet met elkaar te verwarren, anders zullen ze niet werken.
- (*) De woorden worden aan elkaar geschreven en vanaf het tweede woord begint elk woord met een hoofdletter.

-
- -

Er is nog een algemeen aanvaarde manier om je stijlen dynamisch in je document te manipuleren en die gaan we nu bekijken:

- -
    -
  1. Verwijder de vorige vijf regels die je aan je JavaScript hebt toegevoegd.
    2. -
  2. Voeg de volgende regels toe aan je HTML {{htmlelement("head")}}: - 
    <style>
-.highlight {
-  color: white;
-  background-color: black;
-  padding: 10px;
-  width: 250px;
-  text-align: center;
-}
-</style>
    -
    3. -
  3. Nu gaan we een zeer nuttig methode gebruiken voor algemene HTML-manipulatie : {{domxref("Element.setAttribute()")}}. Deze methode krijgt twee argumenten: het attribuut dat je aan het element wil vasthangen en de waarde die je het attribuut wenst te geven. In dit geval geven we onze paragraaf een klasse die de waarde ‘highlight’ krijgt. - 
    para.setAttribute('class', 'highlight');
    -
    4. -
  4. Vernieuw je pagina en je zult geen verandering zien; de CSS wordt nog steeds op de paragraaf toegepast. Deze keer gebeurt dat echter omdat we de paragraaf een klasse geven die wordt geselecteerd door onze CSS-regel, niet door het gebruik van een inline CSS-stijl.
    5. -
- -

Welke methode je kiest hangt van jou af; beide hebben hun voordelen en nadelen. De eerste methode vereist minder gedoe en is goed voor eenvoudig gebruik. De tweede is meer voor de puristen onder ons. (CSS en Javascript worden niet met elkaar vermengd want er zijn geen inline-regels. Inline-stijl wordt als een slechte gewoonte beschouwd). Als je grotere en complexere apps begint te bouwen, zal je waarschijnlijk de tweede methode gaan gebruiken, maar het is echt helemaal jouw beslissing.

- -

Tot nu toe hebben we nog niet echt iets nuttigs gedaan! Het is zinloos om Javascript te gebruiken voor de creatie van statische inhoud – je kan die toch net zo goed in je HTML schrijven zonder Javascript te gebruiken. Het is ingewikkelder dan HTML en als je de inhoud met Javascript maakt, zijn er ook nog andere problemen mee verbonden (de Javascript-code is bijvoorbeeld onleesbaar voor zoekmachines).

- -

In de volgende secties zullen we paar praktische manieren zien waarop we DOM APIs kunnen gebruiken.

- -
-

Opmerking: Je kan onze afgewerkte versie van het dom-example.html op GitHub vinden. (bekijk het ook live).

-
- -

Actief Leren: Nuttige informatie uit het window object halen.

- -

Tot nu toe hebben enkel de kenmerken van {{domxref("Node")}} en {{domxref("Document")}} bekeken om documenten te manipuleren, maar er is geen reden waarom je geen data uit andere bronnen zou kunnen halen en die in je UI gebruiken. Denk eens even terug aan onze eenvoudige maps-example.html demo uit het vorige artikel. We hadden locatiedata gevonden en die gebruikt om een map van jouw streek te maken. Je moet er gewoon voor zorgen dat je data het juiste formaat heeft. Javascript maakt het gemakkelijker dan vele andere talen om dat te doen want het gebruikt zwakke types; nummers zullen bijvoorbeeld gemakkelijk in strings kunnen worden omgezet als je ze in je scherm wil afdrukken.

- -

In dit voorbeeld zullen we een probleem oplossen dat vaak voorkomt : ervoor zorgen dat je applicatie even groot is als het window waarin het wordt bekeken, wat dan ook de grootte van dat venster mag zijn. Dit is vaak nuttig in situaties zoals spelletjes, waarin je zoveel mogelijk gebruik van de schermgrootte wil kunnen maken om het spel erin te spelen.

- -

Om te beginnen maken we een lokale kopie van twee demo-bestanden: window-resize-example.html en bgtile.png. Open ze en bekijk ze eens. Je zal zien een {{htmlelement("div")}} element zien dat een klein deel van het scherm beslaat. Op de achtergrond van het scherm wordt een tegel toegepast. Dit gaan we gebruiken om het UI-gebied van onze app weer te geven.

- -
    -
  1. Grijp eerst en vooral een referentie naar de div en dan naar de breedte en hoogte van het viewport (het venster waar we je document in zien zitten). Die sla je op in variabelen. Deze twee waarden worden handig opgeslagen in twee eigenschappen: {{domxref("Window.innerWidth")}} en {{domxref("Window.innerHeight")}}. Voeg de volgende regels toe aan je {{htmlelement("script")}}: - 
    var div = document.querySelector('div');
-var WIDTH = window.innerWidth;
-var HEIGHT = window.innerHeight;
    -
    2. -
  2. Daarna gaan we de breedte en de hoogte van de div dynamisch aanpassen zodat ze gelijk worden aan die van de viewport. Voeg de volgende lijnen toe aan de vorige: : - 
    div.style.width = WIDTH + 'px';
-div.style.height = HEIGHT + 'px';
    -
    3. -
  3. Sla alles op en vernieuw je browser. Nu zou de div even groot als je viewport moeten zijn wat ook de afmetingen van je scherm zijn. Als je nu de afmetingen opnieuw probeert te veranderen om je venster groter te maken, zal je zien dat de div dezelfde grootte behoudt. We bepalen de afmetingen slechts eenmaal.
    4. -
  4. We kunnen ook een gebeurtenis of event gebruiken zodat de afmetingen van de div samen met die van het venster veranderen. Het {{domxref("Window")}} object beschikt over een event dat ‘resize’ heet en dat telkens wordt getriggered als de grootte van het venster wordt gewijzigd. De {{domxref("Window.onresize")}} event handler staat ons toe dit event aan onze code vast te koppelen. Zo wordt die uitgevoerd telkens als de afmetingen van het window veranderen. Voeg de volgende lijnen toe onderaan je code: - 
    window.onresize = function() {
-  WIDTH = window.innerWidth;
-  HEIGHT = window.innerHeight;
-  div.style.width = WIDTH + 'px';
-  div.style.height = HEIGHT + 'px';
-}
    -
    5. -
- -
-

Opmerking: Als je vastraakt, kan je altijd nog ons voltooide window resize voorbeeld bekijken. (bekijk het ook live).

-
- -

Actief Leren : een dynamische boodschappenlijst

- -

Om het artikel af te ronden, willen we je een kleine uitdaging aanbieden: we willen een eenvoudige boodschappenlijst maken waar je dynamisch artikelen aan kan toevoegen door een invoerveld en een knop te gebruiken. Als je een artikel in het veld invult en op de knop drukt:

- - - -

De voltooide demo zal er ongeveer zo uitzien:

- -

- -

Om de oefening te maken, volg je de stappen hieronder en zorg je ervoor dat de lijst zich gedraagt zoals hierboven is beschreven.

- -
    -
  1. Om te beginen download je dit bestand: shopping-list.html. Je zal zien dat er minimum aan CSS in zit, een lijst met een label, een invoerveld, een knop, een lege lijst en een {{htmlelement("script")}}-element. Je zal al je code aan het script toevoegen.
    2. -
  2. Creëer drie variabelen die een referentie naar de {{htmlelement("ul")}}, {{htmlelement("input")}}, en  {{htmlelement("button")}} elementen bevatten.
    3. -
  3. Creëer een functie die zal worden uitgevoerd als er op de knop wordt geklikt.
    4. -
  4. In de functie sla je eerst de waarde die het invoerveld nu heeft, op in een variabele.
    5. -
  5. Daarna maak je het invoerveld leeg door zijn waarde gelijk te maken aan een lege string: ''.
    6. -
  6. Creëer drie nieuwe elementen {{htmlelement('li')}}, {{htmlelement('span')}}, en {{htmlelement('button')}}. Sla ze op in variabelen.
    7. -
  7. Bevestig het span-element en de knop aan het lijstonderdeel (li dus) en maak ze de kinderen van li.
    8. -
  8. Zet de tekstinhoud van het span-element gelijk aan de waarde van het invoerveld dat je eerder al hebt opgeslagen en de tekst van de knop gelijk aan 'Verwijderen'.
    9. -
  9. Bevestig het lijstonderdeel aan de lijst en maak het een kind van de lijst.
    10. -
  10. Bevestig een event handler aan de verwijderknop, die het volledige lijstonderdeel zal verwijderen als erop wordt geklikt. (Herinner je je nog hoe we al een node/knooppunt hebben verwijderd? Deze keer wil je echter niet het kind van zijn ouder verwijderen, je wil het kind van de grootouder verwijderen!)
    11. -
  11. Ten slotte gebruik je de focus()-methode om de focus op het invoerveld te leggen zodat je het volgende artikel kan invullen.
    12. -
- -
-

Opmerking: Als je echt vast raakt, kijk dan eens naar onze voltooide boodschappenlijst (bekijk hem ook live.)

-
- -

Samenvating

- -

We hebben het einde van ons artikel over DOM-manipulatie bereikt. Je kent nu de belangrijke onderdelen van een webbrowser waarmee documenten worden gecontrolleerd en andere aspecten die relevant zijn voor onze beleving van een webpagina. Maar vooral begrijp je nu wat het Document Object Model is en hoe je het kan manipuleren om nuttige functionaliteit te creëren

- -

Zie ook

- -

Er zijn nog veel meer eigenschappen die je kan gebruiken om je documenten te manipuleren. Bekijk de volgende onderwerpen en zie wat je nog kan ontdekken.

- - - -

(Werp ook eens een blik op onze Web API index voor de volledige lijst van Web APIs die worden gedocumenteerd op MDN!)

- -
{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}
diff --git a/files/nl/mdn/about/index.html b/files/nl/mdn/about/index.html new file mode 100644 index 0000000000..9af7825aab --- /dev/null +++ b/files/nl/mdn/about/index.html @@ -0,0 +1,113 @@ +--- +title: Over MDN +slug: MDN/Over +tags: + - Auteursrechten + - Collaboratie + - Community + - Documentație + - Gids + - Licenties + - MDN Meta +translation_of: MDN/About +--- +
{{MDNSidebar}}
+ +
{{IncludeSubNav("/nl/docs/MDN")}}
+ +

MDN Web Docs is een evoluerend leerplatform voor webtechnologieën en de software die het Web van zijn kracht voorziet, zoals:

+ + + +

Onze missie

+ +

MDN's missie is simpelweg ontwikkelaars de informatie bieden die ze nodig hebben om eenvoudig projecten op het open Web te creëren. Als het een open technologie is die wordt blootgesteld aan het web, willen we het documenteren.

+ +

Daarnaast bieden we documentatie over Mozillaproducten en hoe te bouwen en bij te dragen aan Mozillaprojecten.

+ +

Als u onzeker bent of een specifiek onderwerp wel of niet past  op MDN, lees dan: Hoort dit op MDN?

+ +

Hoe u kunt helpen

+ +

U hoeft niet te kunnen coderen—of goed kunnen schrijven—om MDN te kunnen helpen! We hebben vele manieren waarop men kan helpen, van het beoordelen van artikelen om er zeker van te zijn dat ze logisch zijn, tot het bijdragen van tekst en het toevoegen van voorbeeldcode. In feite zijn er zoveel manieren om te helpen dat we een pagina, genaamd Beginnen op MDN, hebben die u helpt een taak te kiezen, gebaseerd op uw interesses en hoeveel tijd u hebt!

+ +

U kunt ook helpen door het promoten van MDN op uw eigen blog of website.

+ +

De MDN-gemeenschap

+ +

Onze gemeenschap is een wereldwijde! We hebben geweldige bijdragers over de hele wereld, in verschillende talen. Als u meer wilt weten over ons, of als u hulp nodig hebt met MDN op welke manier dan ook, neem dan gerust een kijkje op ons discussieforum of IRC-kanaal! U kunt ook bijhouden wat we doen door ons Twitter-account te volgen, @MozDevNet. U kunt ook tweets naar ons verzenden als u ziet dat er iets verkeerd is, of als u feedback wilt geven (of bedankjes) aan onze schrijvers en bijdragers!

+ +

De inhoud van MDN Web Docs gebruiken

+ +

Auteursrechten en licenties

+ +

MDN's wikidocumenten zijn opgesteld met de bijdragen van vele auteurs, zowel binnen als buiten de Mozilla Foundation. Tenzij anders aangegeven, is de inhoud beschikbaar onder de voorwaarden van de Creative Commons Attribution-ShareAlike license (CC-BY-SA), v2.5 of een latere versie. Schrijf "Mozilla-bijdragers" toe en voeg een hyperlink (online) of URL (in gedrukte vorm) toe aan de specifieke wikipagina voor de inhoud die wordt aangekocht. Als u bijvoorbeeld een toeschrijving voor dit artikel wilt geven, kunt u schrijven:

+ +
Over MDN door Mozilla Bijdragers is onder licentie van CC-BY-SA 2.5.
+ +

"Mozilla Bijdragers" verwijst naar de geschiedenis van de geciteerde pagina. Zie Best practices for attribution voor verdere uitleg.

+ +
+

Zie MDN content op WebPlatform.org voor informatie over hoe u MDN-inhoud op die site kunt hergebruiken en toeschrijven.

+
+ +

Codevoorbeelden die zijn toegevoegd voor 20 augustus 2010, zijn beschikbaar onder de MIT-licentie; U moet de volgende attributie-informatie in het MIT-sjabloon zetten: "© <datum van laatste herziening van de wikipagina> <naam van de persoon die het in de wiki heeft geplaatst>".

+ +

Codevoorbeelden toegevoegd op of na 20 augustus 2010 zijn in het publiek domein. Er is geen licentie nodig, maar als er een nodig is, kunt u de volgende gebruiken: "Alle auteursrechten zijn opgedragen aan het publiek domein. http://creativecommons.org/publicdomain/zero/1.0/".

+ +

Als u een bijdrage wilt leveren aan deze wiki, moet u uw documentatie beschikbaar maken onder de Attribution-ShareAlike-licentie (of soms een alternatieve licentie die al is opgegeven door de pagina die u aan het bewerken bent) en uw codevoorbeelden beschikbaar maken onder Creative Commons CC-0 (een publiek-domeinaanduiding). Door bij te dragen aan deze wiki, stemt u ermee in dat uw bijdragen onder die licenties beschikbaar worden gesteld.

+ +

Sommige oudere inhoud was beschikbaar gemaakt onder een andere licentie dan hierboven genoteerd; deze staan onderaan elke pagina genoteerd aan de hand van een Alternatief licentieblok.

+ +
+

Er mogen geen nieuwe pagina's gemaakt worden met andere licenties.

+
+ +

Auteursrecht voor ingebrachte materialen blijft bij de auteur, tenzij de auteur het aan iemand anders toewijst.

+ +

Als u vragen of opmerkingen hebt over alles wat hier wordt besproken, neem dan contact op met Eric Shepherd.

+ +
+

De rechten op de handelsmerken, logo's, servicemerken van de Mozilla Foundation en het uiterlijk van deze website zijn niet gelicentieerd onder de Creative Commons-licentie en voor zover het werken van auteurschap betreft (zoals logo's en grafische afbeeldingen) ontwerp), zijn ze niet opgenomen in het werk dat onder die voorwaarden is gelicentieerd. Als u de tekst van documenten gebruikt en tevens een van deze rechten wilt gebruiken, of als u andere vragen hebt over het voldoen aan onze licentievoorwaarden voor deze verzameling, dient u hier contact op te nemen met de Mozilla Foundation: licensing@mozilla.org.

+ + + +

Linken naar MDN

+ +

Zie dit artikel voor begeleiding op linken naar MDN voor de beste uitvoeringen bij het linken.

+ + + + + +

Downloaden van content

+ +

U kunt een volledige tarball mirror van MDN downloaden (2.1 GB vanaf februari 2017).

+ +

Enkele pagina's

+ +

U kunt de inhoud van één pagina op MDN ophalen door documentparameters toe te voegen aan de URL om op te geven welke indeling u wilt.

+ +

Third-party tools

+ +

U kunt MDN content bekijken via third-party tools zoals Dash (voor Mac OS) en Zeal (voor Linux en Windows).

+ +

Kapeli publiceert ook offline MDN docs over HTML, CSS, JavaScript, SVG, en XSLT.

+ +

Problemen rapporteren met MDN Web Docs

+ +

Zie Hoe rapporteert men een probleem op MDN.

+ +

Geschiedenis van MDN Web Docs

+ +

Het MDN Web Docs (voorheen Mozilla Developer Network (MDN), voorheen Mozilla Developer Center (MDC), a.k.a. Devmo) project startte begin 2005, toen de Mozilla Foundation Een licentie van AOL verkreeg om de originele Netscape DevEdge content te gebruiken. De DevEdge-inhoud werd gedolven voor nog bruikbaar materiaal, dat vervolgens door vrijwilligers werd gemigreerd naar deze wiki, zodat het gemakkelijker te updaten en onderhouden was.

+ +

U kunt meer geschiedenis van MDN vinden op onze 10-jarig jubileum-pagina, inclusief een mondelinge geschiedenis door enkele van de mensen die erbij betrokken waren.

+ +

Over Mozilla

+ +

Of u nu meer wilt weten over wie we zijn, hoe u een deel van Mozilla kunt zijn of waar u ons kunt vinden, u bent hier aan het juiste adres. Als u wilt weten wat ons drijft en ons anders maakt, bezoek dan onze missiepagina.

diff --git a/files/nl/mdn/at_ten/index.html b/files/nl/mdn/at_ten/index.html new file mode 100644 index 0000000000..f1bd6ea3b7 --- /dev/null +++ b/files/nl/mdn/at_ten/index.html @@ -0,0 +1,39 @@ +--- +title: MDN at 10 +slug: MDN_at_ten +tags: + - Geschiedenis +translation_of: MDN_at_ten +--- + + +
+
+

De geschiedenis van MDN

+ +

In het begin van 2005, zette een klein team van idealisten het plan op om een nieuwe, vrije, door de gemeenschap gemaakte, online hulpbron voor alle Webontwikkelaars te maken. Hun brilliante, maar ongewone idee is uitgegroeid tot het Mozilla Developer Network van vandaag, de voornaamste hulpbron voor alle open Web technologieën. Tien jaar later is onze wereldwijde gemeenschap groter dan ooit, en samen maken we nog altijd documentatie, voorbeeldcode and leermiddelen voor alle open Web technologieën, zoals CSS, HTML, JavaScript en alle andere dingen die het open Web zo krachtig maken.

+ +

Meer weten about the history

+ + +

Bijdragen tot MDN

+ +

Gedurende tien jaar heeft de MDN gemeenschap het open Web gedocumenteerd. Van het corrigeren van simpele typefouten tot het schrijven van een volledige documentatie voor een nieuwe API, iedereen heeft iets te bieden en geen bijdrage is te groot of te klein. We hebben meer dan 90,000 pagina's die geschreven of vertaald werden door leden van onze voortreffelijke gemeenschap van Mozillians. U kunt een van hen worden.

+ +

Meer weten about contributing

+ +

 

+ +

 

+
+ +
{{TenthCampaignQuote}}
+ + + +
    +
  1. MDN at 10
    2. +
  2. De geschiedenis van MDN
    3. +
  3. Bijdragen tot MDN
    4. +
+
diff --git a/files/nl/mdn/community/conversations/index.html b/files/nl/mdn/community/conversations/index.html deleted file mode 100644 index e1319c3259..0000000000 --- a/files/nl/mdn/community/conversations/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: MDN-gemeenschapsgesprekken -slug: MDN/Community/Conversations -tags: - - Gemeenschap - - Gids - - MDN Meta -translation_of: MDN/Community/Conversations ---- -
{{MDNSidebar}}

Het ‘werk’ van MDN gebeurt op de MDN-website, maar de ‘gemeenschap’ bestaat ook door middel van (asynchrone) discussie en (synchrone) online chat en bijeenkomsten.

- -

Asynchrone discussies

- -

Voor het delen van informatie en het hebben van lopende discussies heeft MDN zijn eigen categorie (‘MDN’) op het Discourse-forum van Mozilla. Deze categorie kan worden gebruikt voor alle onderwerpen die zijn gerelateerd aan MDN, zoals de creatie, vertaling en het onderhoud van documentatie-inhoud, de ontwikkeling van het MDN-platform en zaken als plannen, doelen stellen en het bewaken van de voortgang.

- - - -

Historische archieven

- -

Voor juni 2017 vonden MDN-gerelateerde discussies plaats in mailinglijsten die toegankelijk werden gemaakt en werden gearchiveerd met Google-groepen. Als u in deze afgelopen discussies wil zoeken, kunt u kijken naar de Google-groepen die met de oude mailinglijsten corresponderen. (Ja, we weten dat deze namen overlappen en verwarrend zijn. Historisch ongeluk. Sorry hiervoor.)

- -
-
mozilla.dev.mdc alias dev-mdc
-
Deze lijst was voor discussies over documentatie-inhoud op MDN.
-
mozilla.dev.mdn alias dev-mdn
-
Deze lijst was voor ontwikkelwerk van het onderliggende platform van MDN, genaamd Kuma.
-
mozilla.mdn alias mdn@
-
Dit forum was voor discussies over planning en prioritering op een hoger niveau, voor de MDN-website en andere gerelateerde initiatieven.
-
- -

 

- -

Chat in IRC

- -

 

- -

Internet Relay Chat (IRC) is de methode waaraan we de voorkeur geven voor dagelijkse chat en real-time discussies tussen gemeenschapsleden. We gebruiken een aantal kanalen op de server irc.mozilla.org voor discussies die aan MDN zijn gerelateerd.

- -
-
#mdn
-
Dit kanaal is ons voornaamste kanaal voor het bespreken van de inhoud van MDN. We praten over schrijven, het organiseren van inhoud, enzovoort. We hebben hier ook onze ‘koffieautomaatgesprekken’ – het is een manier waarop de gemeenschap contact kan houden en kan samenkomen. Dit is ook de plek om over andere aspecten van MDN te praten (anders dan de ontwikkeling van het platform), zoals Demo Studio, profielen, enzovoort.
-
#mdndev
-
In dit kanaal komen de leden van ons ontwikkelteam – de mensen die de code schrijven waarmee MDN werkt – samen en bespreken ze hun dagelijkse werk. U bent welkom om deel te nemen en mee te doen met het ontwikkelen of vragen te stellen over problemen met de software die u ziet.
-
- -

Deze kanalen zijn waarschijnlijk het meest actief tijdens doordeweekse dagen in Noord-Amerika.

- -

Het kan zijn dat u meer over IRC wilt leren en een installeerbare IRC-client zoals ChatZilla wilt gebruiken. Het is geïmplementeerd als een add-on voor Firefox, waardoor het makkelijk is te installeren en gebruiken. Als u niet bekend bent met IRC, is deelnemen door gebruik van een webgebaseerde IRC-client zoals Mibbit een makkelijke manier. Hier vindt u directe koppelingen naar de kanalen #mdn en #mdndev op Mibbit.

- -

Neem deel aan onze bijeenkomsten (en andere evenementen)

- -

Het MDN-team houdt regelmatig een aantal bijeenkomsten dat open is voor de MDN-gemeenschap. Bekijk de pagina MDN-bijeenkomsten op de wiki van Mozilla voor details over het rooster, de agenda’s en notulen, en informatie over hoe u kunt deelnemen.

- -

Bekijk de evenementenkalender van MDN voor deze en andere bijeenkomsten, lokale bijeenkomsten en andere evenementen. De terugkerende bijeenkomsten worden samengevat op de wiki-pagina MDN-bijeenkomsten.

- -

Als u een bijeenkomst ziet die plaatsvindt in het kanaal ‘mdn’ op uw Vidyo-videoconferentiesysteem, kunt u het gesprek bijwonen via internet.

diff --git a/files/nl/mdn/community/index.html b/files/nl/mdn/community/index.html deleted file mode 100644 index 7856783b88..0000000000 --- a/files/nl/mdn/community/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Deelnemen aan de MDN-gemeenschap -slug: MDN/Community -tags: - - Community - - Gemeenschap - - Handleiding - - Landing - - MDN Meta -translation_of: MDN/Community ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/nl/docs/MDN")}}
- -
-

MDN Web Docs is meer dan een wiki: het is een gemeenschap van ontwikkelaars die samenwerken om MDN een uitstekende bron te maken voor ontwikkelaars die open-source technologieën gebruiken.

-
- -

We zouden graag zien dat u aan MDN bijdraagt, maar we zien nog liever dat u aan de MDN-gemeenschap deelneemt. U kunt als volgt verbonden raken, in drie eenvoudige stappen:

- -
    -
  1. Maak een MDN-account aan.
    2. -
  2. Neem deel aan conversaties.
    3. -
  3. Volg wat er gebeurt.
    4. -
- -

Hoe de gemeenschap werkt

- -

De volgende artikelen beschrijven een aantal mogelijkheden in de gemeenschap van MDN.

- -
-
-
-
Rollen binnen de gemeenschap
-
Er is een aantal rollen binnen de MDN-gemeenschap dat bepaalde verantwoordelijkheden met zich meedraagt.
-
Doc sprints
-
Dit is een handleiding voor het organiseren van een documentatiesprint. Deze bevat advies en tips van mensen die docsprints hebben georganiseerd, met de bedoeling om u er ook een te helpen organiseren.
-
Blijf op de hoogte
-
MDN wordt u aangeboden door de Mozilla Developer Network Community. Hier vindt u wat manieren waarop we informatie delen over wat we doen.
-
- -
-
-
- -
-
-
MDN gemeenschapsdiscussies
-
Het ‘werk’ van MDN vindt plaats op de website van MDN, maar de ‘gemeenschap’ bestaat ook uit (asynchrone) discussies en (synchrone) onlinechat en -meetings.
-
Werken in de gemeenschap
-
Een groot deel van het op grote schaal bijdragen aan MDN documentatie is weten hoe u als onderdeel van de MDN-gemeenschap kunt werken. Dit artikel biedt tips om de communicatie tussen en naar andere schrijvers en ontwikkelteams zo efficiënt mogelijk te laten verlopen.
-
-
-
diff --git a/files/nl/mdn/community/samenwerken_in_een_community/index.html b/files/nl/mdn/community/samenwerken_in_een_community/index.html deleted file mode 100644 index a2256cf365..0000000000 --- a/files/nl/mdn/community/samenwerken_in_een_community/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Samenwerken in een community -slug: MDN/Community/Samenwerken_in_een_community -translation_of: MDN/Community/Working_in_community ---- -
{{MDNSidebar}}
- -

Een groot onderdeel van de bijdrages van MDN documentaties op grote schaal, is het samenwerken en de communicatie in een community. Dit artikel geeft tips om interacties tussen schrijvers en ontwikkelteams beter te maken.

- -

Algemene gedragscodes

- -

Hier zijn een paar algemene gedragscodes wanneer men werkt in de Mozilla Community.

- - - -

Be tactful

- -

Always be tactful and respectful when communicating with others.

- -

Politely pointing out mistakes

- -

If your purpose in contacting someone is to ask them to do something differently, or to point out a mistake they've been making (especially if they repeatedly do it), start your message with a positive comment. This softens the blow, so to speak, and it demonstrates that you're trying to be helpful, rather than setting you up as the  bad guy.

- -

For example, if a new contributor has been creating lots of pages without tags, and you'd like to point out this problem, your message to them might look like this (the stuff you'd need to change for each case us underlined):

- -
-

Hi, MrBigglesworth, I've been noticing your contributions to the Wormhole API documentation, and it's fantastic to have your help! I particularly like the way you balanced your level of detail with readability. That said, though, you could make these articles even better and more helpful if you added the correct tags to the pages as you go.

- -

See the MDN tagging guide (https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Tag) for details.

- -

Thanks again, and I look forward to your future contributions!

-
- -

Sharing knowledge

- -

As you participate in the MDN project, it's useful to know what's going on, and to interact with other members of our community. By talking with others in our community, you can get—and share—ideas, status updates, and more. We also have tools and informational resources that can help you know what's being done, by whom.

- -

Communication channels

- -

There are several ways you can engage with community members (either developers or writers), each of which has some of its own particular rules of etiquette.

- -

Bugzilla

- -

When writing documentation to cover changes implemented as a result of a bug in Bugzilla, you'll often interact with people involved in those bugs. Be sure to keep the Bugzilla Etiquette guide in mind at all times!

- -

Email

- -

Sometimes, a private email exchange between you and one or more other people is the way to go, if you have their email address.

- -
-

Note: As a general rule, if someone has posted their email address on documents about the technology you're documenting, has given you their email address personally, or generally has a well-known email address, email is an acceptable "first contact" approach. If you have to dig for it, you probably should try to get permission in IRC or a mailing list first, unless you've exhausted all other attempts at getting in touch.

-
- -

Content status tools

- -

We have several useful tools that provide information about the status of documentation content.

- -
-
Revision dashboard
-
The revision dashboard provides a fantastic tool to review changes made to MDN content. You can see recent history, choose a range of time to view, and filter based on things like locale, contributor's name, and topic. Once you're looking at a set of revisions, you can view the changes made in each revision, quickly open the page, see a full history, or even revert the changes (if you have those privileges).
-
Documentation status overview
-
Our documentation status overview page provides a list of all the areas of MDN that have been configured for status tracking, with information about how many pages therein need different types of work done. Click through to a particular topic area to see detailed lists of content that needs work, such as pages that have no tags, or are tagged with indicators that certain types of work need to be done. You can even see lists of pages that haven't been updated in a long time and may be out of date, as well as a list of bugs that have been flagged as impacting the documentation in that area.
-
Documentation project plans
-
We have a number of writing projects that are in the planning stages, or are large and ongoing, for which we have written planning documents to help us keep track of what we need to get done.
-
MDN Trello board
-
The MDN staff writers use a Trello board to manage current and future documentation projects. You can take a look to see what we're doing and how it's going, and you can see what projects we'd like to see happen soon. Some of those will be taken on by staff writers, but you should feel free to take one over if you like! For more information about how this board is used and how you can use it, you can read this page.
-
- -

The development community

- -

Possibly the most important relationships to develop and maintain, as a member of the MDN writing community, are those you develop and sustain with the developers. They create the software we're developing, but they're also the most useful source of information we have. It's crucial that we maintain good relations with developers—the more they like you, the more likely they are to answer your questions quickly, accurately, and thoroughly!

- -

In addition, you represent the MDN writing community. Please help ensure we keep our excellent working relationship with the dev team by making every interaction they have with the writing team be a good one.

- -

On a related note, a great way to find the right person to talk to is to look at the module owners lists.

- -

The writing community

- -

The writing community is a large one. While the number of extremely frequent, or large-scale contributors is relatively small, there are many dozens or hundreds of people who contribute at least now and then. Fortunately, these are by and large awesome people with a genuine love of the Web, Mozilla, and/or documentation, and interacting with them is almost always pretty easy.

- -

See the article Join the community for more information about the MDN community.

- -

The most frequent place you'll directly interact with other writers is in the {{IRCLink("mdn")}} channel on IRC. This channel is specifically reserved for discussing documentation. For IRC-specific etiquette tips, see the Mozilla Support article "Getting Started with IRC." You'll also have discussions with us on the MDN discussion forum. In general, IRC tends to be used for quick, more in-person-like discussions, while the mailing list is typically used for longer-duration conversation.

- -

By keeping in mind the {{anch("General etiquette guidelines")}}, you'll find that usually things go very smoothly.

- -

Zie ook

- - diff --git a/files/nl/mdn/community/whats_happening/index.html b/files/nl/mdn/community/whats_happening/index.html deleted file mode 100644 index d3daf3b9df..0000000000 --- a/files/nl/mdn/community/whats_happening/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Blijf op de hoogte -slug: MDN/Community/Whats_happening -tags: - - Beginner - - Gemeenschap - - Gids - - MDN Meta -translation_of: MDN/Community/Whats_happening ---- -
{{MDNSidebar}}

MDN wordt mede mogelijk gemaakt door de MDN-gemeenschap. Hier is een aantal manieren waarop we informatie delen over wat we doen.

- -

Blogs

- -
-
Mozilla Hacks
-
Nieuws over en uitgebreide dekking van web- en Mozillatechnologieën en functies.
-
Engaging Developers
-
Het promoten van activiteiten en discussies omtrent de gemeenschap die betrokken is bij MDN van Mozilla.
-
- -

Streams of ephemera

- - - -

Statusboards en dashboards

- -

Bekijk de documentatiestatuspagina's om te zien wat er gebeurt over de volledige breedte van de MDN-inhoud. U kunt zien welke artikelen moeten worden geschreven of bijgewerkt, welke onderwerpen de meeste hulp nodig hebben, en nog veel meer.

- -

MDN-bijeenkomsten

- -

Er is een aantal vaste bijeenkomsten voor het bijhouden en delen van voortgang binnen verschillende MDN-gerelateerde projecten en processen. Ze staan beschreven op de wikipagina voor MDN-bijeenkomsten.

- -

Om een idee te krijgen van wat er gebeurt, is de MDN gemeenschapsbijeenkomst de beste bijeenkomst om bij te wonen. Deze bijeenkomst vindt elke twee weken plaats op woensdag, 10:00 US Pacific time (UTC-0800 Oktober-Maart, UTC-0700 in Maart-Oktober), in het #mdn IRC-kanaal. Bekijk de wikipagina voor MDN-bijeenkomsten voor agenda's en notulen van de vorige bijeenkomsten.

- -

De agenda voor openbare MDN-evenementen bevat gemeenschapsbijeenkomsten van MDN, doc sprints en andere MDN-gerelateerde evenementen. Als u een bijeenkomst ziet die plaatsvindt in het "mdn"-kanaal op uw Vidyo videoconferentiesysteem kunt u het gesprek bijwonen via internet.

diff --git a/files/nl/mdn/contribute/howto/aanmaken_mdn_account/index.html b/files/nl/mdn/contribute/howto/aanmaken_mdn_account/index.html deleted file mode 100644 index cc50327400..0000000000 --- a/files/nl/mdn/contribute/howto/aanmaken_mdn_account/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Een account op MDN aanmaken -slug: MDN/Contribute/Howto/Aanmaken_MDN_account -tags: - - Aanmelden - - Beginner - - Documentație - - Gids - - GitHub - - Profiel -translation_of: MDN/Contribute/Howto/Create_an_MDN_account ---- -
{{MDNSidebar}}

Om wijzigingen aan te brengen in de inhoud van MDN is een MDN-profiel nodig. Voor het lezen van en zoeken in de MDN-documentatie hebt u geen profiel nodig. Deze gids helpt u om uw MDN-profiel aan te maken.

- -
-
-

Waarom heeft MDN mijn e-mailadres nodig?

- -

Het e-mailadres wordt gebruik om uw account te herstellen. Indien nodig kan het beheer van MDN contact met u opnemen over uw account of uw activiteit op de site.

- -

Daarnaast kunt u zich aanmelden voor notificaties (bijvoorbeeld wanneer bepaalde pagina's worden aangepast) en berichten (bijvoorbeeld als u zich hebt aangemeld voor het beta-testteam en u nieuwe e-mails wilt ontvangen over nieuwe functies die moeten worden getest).

- -

Het e-mailadres wordt nooit getoond op MDN en wordt alleen gebruikt overeenkomstig ons privacybeleid.

- -

 

- -
U ontvangt geen berichten of notificaties van MDN als u inlogt op MDN via GitHub en u daar een "noreply"-e-mailadres gebruikt.
-
-
- -
    -
  1. Op MDN bevindt zich bovenaan elke pagina een knop Aanmelden met. Door de muisaanwijzer erboven te houden (of door hem aan te raken op een mobiel toestel) verschijnt er een lijst met authenticatiemethoden die worden ondersteund door MDN.
    2. -
  2. Selecteer een methode om in te loggen. Op dit moment is alleen GitHub beschikbaar. Als u GitHub selecteert, zal een link naar uw profiel op GitHub worden weergegeven op uw openbare profielpagina op MDN.
    3. -
  3. Volg de aanwijzingen van GitHub om uw account te verbinden met MDN.
    4. -
  4. Als de authenticatiedienst u laat terugkeren naar MDN, wordt u gevraagd om een gebruikersnaam en een e-mailadres in te voeren. De gebruikersnaam wordt openbaar getoond om u te prijzen voor uw werk. Gebruik geen e-mailadres als gebruikersnaam.
    5. -
  5. Klik Creëer mijn MDN-profiel.
    6. -
  6. Als het e-mailadres dat u hebt ingevoerd bij stap 4 niet hetzelfde is als het e-mailadres dat u gebruikt bij de authenticatiedienst, controleer dan uw e-mail en klik op de link in de bevestigings-e-mail die we u sturen.
    7. -
- -

Dat is alles! U hebt nu een MDN account en kunt onmiddellijk beginnen met het bewerken van pagina's!

- -

U kunt bovenaan elke pagina van MDN klikken op uw naam om uw openbaar profiel te zien. Daar vandaan kunt u op Bewerken klikken om uw profiel te veranderen of iets toe te voegen aan uw profiel..

- -

 

- -
-

Nieuwe gebruikersnamen mogen geen spaties of het karakter "@" bevatten. Denk eraan dat uw gebruikersnaam openbaar wordt getoond om u te prijzen voor uw werk.

-
diff --git a/files/nl/mdn/contribute/howto/een_redactionele_beoordeling_geven/index.html b/files/nl/mdn/contribute/howto/een_redactionele_beoordeling_geven/index.html deleted file mode 100644 index 38785c1f26..0000000000 --- a/files/nl/mdn/contribute/howto/een_redactionele_beoordeling_geven/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Een redactionele beoordeling geven -slug: MDN/Contribute/Howto/Een_redactionele_beoordeling_geven -tags: - - Documentație - - Gids - - Hoe kan ik - - MDN-Meta - - Redactionele beoordeling -translation_of: MDN/Contribute/Howto/Do_an_editorial_review ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/nl/docs/MDN")}}
- -

Redactionele beoordelingen bestaan uit het corrigeren van typefouten en spelling, grammatica, gebruik of tekstuele fouten in een artikel. U hoeft geen taalexpert te zijn om waardevolle bijdragen te doen aan de technische documentatie van MDN, maar artikelen hebben nog steeds controlewerk en moeten worden proefgelezen. Dit wordt in een redactionele beoordeling gedaan.

- -

Dit artikel beschrijft hoe u een redactionele beoordeling kunt geven, wat ervoor zorgt dat de inhoud op MDN accuraat is.

- -
-
Wat houdt de taak in?
-
Controlewerk (‘copy-editing’) en proeflezen (‘proof-reading’) van artikelen die zijn gemarkeerd als artikelen die een redactionele beoordeling nodig hebben.
-
Waar dient dit te worden gedaan?
-
Binnen bepaalde artikelen die zijn gemarkeerd als artikelen die een redactionele beoordeling nodig hebben.
-
Wat dient u te weten om de taak te vervullen?
-
U dient goede vaardigheden op het gebied van Nederlandse grammatica en spelling te hebben. Een redactionele beoordeling zorgt ervoor dat de grammatica, spelling en het woordgebruik juist en logisch zijn, en dat de MDN-schrijfstijlgids wordt gevolgd.
-
Wat zijn de stappen om dit te doen?
-
-
    -
  1. Kies een artikel voor beoordeling: -
      -
    1. Ga naar de lijst van artikelen die een redactionele beoordeling nodig hebben. Deze vermeldt alle pagina’s waarvoor een redactionele beoordeling is aangevraagd.
      2. -
    2. Klik op het artikel om de pagina te laden.
      - Merk op: Deze lijst wordt automatisch maar niet regelmatig gegenereerd, waardoor er artikelen in de lijst verschijnen die geen redactionele beoordeling meer nodig hebben. Als het artikel dat u hebt geselecteerd geen vak weergeeft waarin 'Dit artikel heeft een redactionele beoordeling nodig' staat, sla het artikel dan over en kies een andere.
      3. -
    3. Klik op de artikelkoppeling om de pagina te laden.
      4. -
    -
    2. -
  2. Lees het artikel en let goed op typefouten, spelling, grammatica of gebruiksfouten. Aarzel niet om naar een andere pagina te gaan als de eerste die u koos niet geschikt voor u is.
    3. -
  3. Als er geen fouten zijn, hoeft u het artikel niet te bewerken om het als beoordeeld te markeren. Zoek naar het veld voor ‘snelle beoordeling’ in de linkerzijbalk van de pagina:
    - Schermafbeelding van het zijbalkveld voor het beoordelingsverzoek
    4. -
  4. Deselecteer het vakje Redactioneel en klik op Opslaan.
    5. -
  5. Als u fouten vindt die dienen te worden gecorrigeerd: -
      -
    1. Klik boven in de pagina op de knop Bewerken; dit brengt u naar de MDN-editor.
      2. -
    2. Corrigeer eventuele typefouten en spelling, grammatica of gebruiksfouten die u tegenkomt. U hoeft niet alles te corrigeren om nuttig te zijn, maar zorg ervoor dat het verzoek voor redactionele beoordeling actief blijft als u niet helemaal zeker weet of u een volledige controle van het hele artikel hebt gedaan.
      3. -
    3. Voer onder in het artikel een Revisieopmerking in; zoiets als ‘Redactionele beoordeling: typefouten, grammatica en spelling gecorrigeerd’. Dit laat andere medewerkers en website-editors weten wat u hebt gewijzigd en waarom.
      4. -
    4. Deselecteer het vakje Redactioneel onder Beoordeling nodig? Dit bevindt zich net onder de sectie Revisieopmerking van de pagina.
      5. -
    5. Klik op de knop Publiceren.
      6. -
    -
    6. -
- -
-

Mogelijk zijn uw wijzigingen niet meteen zichtbaar na het opslaan; er kan een vertraging zijn bij het verwerken en opslaan van de pagina.

-
-
-
diff --git a/files/nl/mdn/contribute/howto/een_technische_beoordeling_maken/index.html b/files/nl/mdn/contribute/howto/een_technische_beoordeling_maken/index.html deleted file mode 100644 index 119e15a9d2..0000000000 --- a/files/nl/mdn/contribute/howto/een_technische_beoordeling_maken/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Een technische beoordeling geven -slug: MDN/Contribute/Howto/Een_technische_beoordeling_maken -tags: - - Beoordeling - - Documentație - - Gids - - MDN Meta -translation_of: MDN/Contribute/Howto/Do_a_technical_review ---- -
{{MDNSidebar}}
{{IncludeSubnav("/nl/docs/MDN")}}
- -

Een technische beoordeling bestaat uit het beoordelen van de technische nauwkeurigheid en volledigheid van een artikel, en het corrigeren hiervan als het nodig is. Als een schrijver van een artikel iemand anders wil vragen om de technische inhoud van een artikel te controleren, klikt diegene op het vakje met de naam 'Technische beoordeling' tijdens het bewerken. Vaak neemt een schrijver contact op met een specifieke technicus om de tekst te laten beoordelen, maar iedereen met technische kennis kan dit doen.

- -

Dit artikel beschrijft hoe een technische beoordeling kan worden gedaan, die helpt te zorgen dat de inhoud op MDN nauwkeurig is.

- -
-
Wat is de taak?
-
Het beoordelen en corrigeren van artikelen op technische nauwkeurigheid en volledigheid.
-
Waar moet dit worden gedaan?
-
In specifieke artikelen die zijn gemarkeerd als het behoeven van een technische beoordeling.
-
Wat moet u weten om de taak te kunnen uitvoeren?
-
-
    -
  • Vakkundige kennis over het onderwerp van het artikel dat u beoordeelt. Als het lezen van het artikel u geen nieuwe kennis bijbrengt, kunt u zichzelf beschouwen als een expert.
    • -
  • Hoe u een wiki-artikel op MDN kunt bewerken.
    • -
-
-
Stappenplan
-
-
    -
  1. Kies een artikel om te beoordelen: -
      -
    1. Ga naar de lijst met pagina's die een technische beoordeling nodig hebben. Op deze lijst staan alle pagina's waar technische beoordelingen voor zijn aangevraagd.
      2. -
    2. Kies een pagina met een onderwerp waar u bekend mee bent.
      3. -
    3. Klik op het artikel om de pagina te laden.
      4. -
    -
    2. -
  2. Lees het artikel, waarbij u goed let op de technische details: Is het artikel correct? Mist er iets? Aarzel niet om naar een andere pagina te gaan als de eerste die u koos niet bij u past.
    3. -
  3. Als er geen fouten zijn hoeft u het artikel niet te bewerken om het als beoordeeld te markeren. Zoek naar het vak 'snelle beoordeling' aan de linkerkant van de pagina. Dit gele vak geeft alle beoordelingen weer die in behandeling zijn. Hier kunt u een beoordeling als voltooid markeren. Als er om een technische beoordeling is gevraagd, ziet dat er als volgt uit:
    - Screenshot van een vak aan de linkerkant van de pagina, waarin de beoordelingen staan die moeten worden uitgevoerd en waar markeringen kunnen worden gewijzigd.
    4. -
  4. Verwijder de selectie van het vakje Technisch en klik op Opslaan.
    5. -
  5. Als u fouten vindt die moeten worden gecorrigeerd is het ook mogelijk om de status van de beoordelingsaanvraag te wijzigen in de editor. U kunt dat als volgt doen: -
      -
    1. Klik op de knop Bewerken bovenaan de pagina om de pagina te bewerken. Hiermee gaat u naar de editor van MDN.
      2. -
    2. Herstel alle informatie die niet correct is, en/of voeg belangrijke informatie toe die mist.
      3. -
    3. Vul een revisieopmerking onderaan het artikel. Dit is een kort bericht dat beschrijft wat u hebt gedaan, zoals 'Technische beoordeling voltooid.' Als u informatie hebt gecorrigeerd, kunt u dat noemen in uw opmerking, bijvoorbeeld 'Technische beoordeling en parameterbeschrijvingen hersteld.' Hierdoor weten andere medewerkers en websitebewerkers wat u hebt gewijzigd en waarom. U kunt ook noemen of er specifieke stukken waren waarvoor u zich niet deskundig genoeg voelde om het te beoordelen.
      4. -
    4. Verwijder de selectie van het vakje Technisch onder Beoordeling nodig? onder het gedeelte van de pagina waarin u een revisieopmerking kunt schrijven.
      5. -
    5. Klik op de knop Publiceren.
      6. -
    -
    6. -
- -

Gefeliciteerd! U hebt uw eerste technische beoordeling gedaan! Bedankt voor uw hulp!

-
-
diff --git a/files/nl/mdn/contribute/howto/taggen_javascript_pagina/index.html b/files/nl/mdn/contribute/howto/taggen_javascript_pagina/index.html deleted file mode 100644 index ce57acb2f4..0000000000 --- a/files/nl/mdn/contribute/howto/taggen_javascript_pagina/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: JavaScript-pagina’s taggen -slug: MDN/Contribute/Howto/Taggen_JavaScript_pagina -tags: - - Guide - - Howto - - JavaScript - - MDN Meta -translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages ---- -
{{MDNSidebar}}

Taggen bestaat uit het toevoegen van meta-informatie aan pagina’s, zodat gerelateerde inhoud kan worden gegroepeerd, bijvoorbeeld in het zoekhulpmiddel.

- -
-
Waar moet dit worden gedaan?
-
Binnen specifieke JavaScript-gerelateerde pagina’s zonder labels.
-
Wat dient u te weten om de taak uit te voeren?
-
Basiskennis over programmeren met JavaScript, zoals weten wat een methode of een eigenschap is.
-
Wat zijn de stappen om het te doen?
-
-
    -
  1. Kies een van de pagina’s in de lijst hierboven.
    2. -
  2. Klik op de artikelkoppeling om de pagina te laden.
    3. -
  3. Klik zodra de pagina is geladen op de knop BEWERKEN bovenaan het artikel; hierdoor komt u in de MDN-editor.
    4. -
  4. Op zijn minst dient het label JavaScript te worden toegevoegd. Mogelijke andere labels om toe te voegen zijn: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    LabelPagina’s om het op te gebruiken
    Method (Methode)methoden
    Property (Eigenschap)eigenschappen
    prototype (prototype)prototypen
    Object type name (type objectnaam)methoden van een object; String.vanCharCode dient bijvoorbeeld het label String te bevatten.
    ECMAScript6 en Experimental (ECMAScript6 en experimenteel)functies toegevoegd in een nieuwe ECMAScript-versie
    Deprecated (afgeschaft)afgeschafte functies (waarvan het gebruik wordt afgeraden, maar die nog steeds worden ondersteund)
    Obsolete (verouderd)verouderde functies (die niet meer in moderne browsers worden ondersteund)
    others (andere)Zie MDN-labelstandaarden voor andere mogelijke labels die kunnen worden toegepast
    -
    5. -
  5. Sla het artikel op met een opmerking.
    6. -
  6. U bent klaar!
    7. -
-
-
- -

 

diff --git a/files/nl/mdn/contribute/processes/verhoogde_bevoegdheden_aanvragen/index.html b/files/nl/mdn/contribute/processes/verhoogde_bevoegdheden_aanvragen/index.html deleted file mode 100644 index f7f085ae5b..0000000000 --- a/files/nl/mdn/contribute/processes/verhoogde_bevoegdheden_aanvragen/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Verhoogde bevoegdheden aanvragen -slug: MDN/Contribute/Processes/Verhoogde_bevoegdheden_aanvragen -tags: - - Gids - - MDN Meta - - Processen -translation_of: MDN/Contribute/Processes/Requesting_elevated_privileges ---- -
{{MDNSidebar}}

Voor sommige hulpmiddelen en handelingen op MDN zijn er verhoogde toegangsbevoegdheden nodig, die niet beschikbaar zijn voor normale gebruikers.

- -

Als u bevoegdheden wilt of nodig hebt voor een hulpmiddel, volg dan de onderstaande stappen:

- -
    -
  1. Open een Bugzilla-bug, waarin een beschrijving staat van wat u nodig heeft en waarom u het nodig heeft. Zet uw accountnaam op MDN erbij.
    2. -
  2. Zorg ervoor dat u uitleg waarom u voldoet aan de voorwaarden voor het verkrijgen van bevoegdheden, voor elk hulpmiddel waar u bevoegdheden voor aanvraagt. Bekijk hiervoor de 'Voorwaarden voor het verkrijgen van deze bevoegdheid' voor het hulpmiddel of de hulpmiddelen in kwestie.
    3. -
  3. U hebt twee gelijken nodig voor de betreffende tool, die voor u instaan in de bug.
    4. -
  4. Als aan 1-3 zijn voldaan, kan een van de MDN-admins u toegang geven tot het hulpmiddel dat of de hulpmiddelen die u nodig hebt.
    5. -
- -

Bij misbruik of een aanzienlijk probleem (zoals een recent ontdekte, gevaarlijke bug in het hulpmiddel) kan elke admin op elk moment de toegang tot een tool opschorten.

diff --git a/files/nl/mdn/guidelines/style_guide/index.html b/files/nl/mdn/guidelines/style_guide/index.html deleted file mode 100644 index 92fa1e530b..0000000000 --- a/files/nl/mdn/guidelines/style_guide/index.html +++ /dev/null @@ -1,502 +0,0 @@ ---- -title: MDN style guide -slug: MDN/Guidelines/Style_guide -translation_of: MDN/Guidelines/Writing_style_guide ---- -
{{MDNSidebar}}
- -

In an effort to display documentation in an organized, standardized and easy-to-read manner, the Mozilla Developer Network style guide describes how text should be organized, spelled, formatted, and so on. These are guidelines rather than strict rules. We are more interested in content than formatting, so don't feel obligated to learn the style guide before contributing. Do not be upset or surprised, however, if an industrious volunteer later edits your work to conform to this guide.

- -

If you're looking for specifics of how a given type of page should be structured, see the MDN page layout guide.

- -

The language aspects of this guide apply primarily to English-language documentation. Other languages may have (and are welcome to create) their own style guides. These should be published as subpages of the localization team's page.

- -

For style standards that apply to content written for sites other than MDN, refer to the One Mozilla style guide.

- -

Basics

- -

Page titles

- -

Page titles are used in search results and also used to structure the page hierarchy in the breadcrumb list at the top of the page. The page title (which is displayed at the top of the page and in the search results) can be different from the page "slug," which is the portion of the page's URL following "<locale>/docs/".

- -

Title and heading capitalization

- -

Page titles and section headings should use sentence-style capitalization (only capitalize the first word and proper nouns) rather than headline-style capitalization:

- - - -

We have many older pages that were written before this style rule was established. Feel free to update them as needed if you like. We're gradually getting to them.

- -

Choosing titles and slugs

- -

Page slugs should be kept short; when creating a new level of hierarchy, the new level's component in the slug should generally just be a word or two.

- -

Page titles, on the other hand, may be as long as you like, within reason, and they should be descriptive.

- -

Creating new subtrees

- -

When you need to add a number of articles about a topic or topic area, you will typically do so by creating a landing page, then adding subpages for each of the individual articles. The landing page should open with a paragraph or two describing the topic or technology, then provide a list of the subpages with descriptions of each page. You can automate the insertion of pages into the list using a number of macros we've created.

- -

For example, consider the JavaScript guide, which is structured like this:

- - - -

Try to avoid putting your article at the top of the hierarchy, which slows the site down and makes search and site navigation less effective.

- -

Sections, paragraphs, and newlines

- -

Use heading levels in decreasing order: {{HTMLElement("h2")}} then {{HTMLElement("h3")}} then {{HTMLElement("h4")}}, without skipping levels. H2 is the highest level allowed because H1 is reserved for the page title. If you need more than three or four levels of headers you should consider breaking up the article into several smaller articles with a landing page, linking them together using the {{TemplateLink("Next")}}, {{TemplateLink("Previous")}}, and {{TemplateLink("PreviousNext")}} macros.

- -

The enter (or return) key on your keyboard starts a new paragraph. To insert a newline without a space, hold down the shift key while pressing enter.

- -

Text formatting and styles

- -

Use the "Formatting Styles" drop-down list to apply predefined styles to selected content.

- -
Note: The "Note" style is used to call out important notes, like this one.
- -
Warning: Similarly, the "Warning" style creates warning boxes like this.
- -

Unless specifically instructed to do so, do not use the HTML style attribute to manually style content. If you can't do it using a predefined class, drop into {{IRCLink("mdn")}} and ask for help.

- -

Code sample style and formatting

- -

Tabs and line breaks

- -

Use two spaces per tab in all code samples. Code should be indented cleanly, with open-brace ("{") characters on the same line as the statement that opens the block. For example:

- -
if (condition) {
-  /* handle the condition */
-} else {
-  /* handle the "else" case */
-}
-
- -

Long lines shouldn't be allowed to stretch off horizontally to the extent that they require horizontal scrolling to read. Instead, break at natural breaking points. Some examples follow:

- -
if (class.CONDITION || class.OTHER_CONDITION || class.SOME_OTHER_CONDITION
-       || class.YET_ANOTHER_CONDITION ) {
-  /* something */
-}
-
-var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-service;1"]
-                           .createInstance(Components.interfaces.nsIToolkitProfileService);
-
- -

Inline code formatting

- -

Use the "Code" button (labeled with two angle brackets "<>") to apply inline code-style formatting to function names, variable names, and method names (this uses the {{HTMLElement("code")}} element). For example, "the frenchText() function".

- -

Method names should be followed by a pair of parentheses: doSomethingUseful(). This helps to differentiate methods from other code terms.

- -

Syntax highlighting

- -

Screenshot of the "syntax highlighting" menu.Entire lines (or multiple lines) of code should be formatted using syntax highlighting rather than the {{HTMLElement("code")}} element. Click the "pre" button in the toolbar to create the preformatted content box in which you'll then write your code. Then, with the text entry cursor inside the code box, select the appropriate language from the language list button to the right of the "pre" button, as seen in the screenshot to the right. The following example shows text with JavaScript formatting:

- -
-
for (var i = 0, j = 9; i <= 9; i++, j--)
-  document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);
-
- -

If no appropriate transformation is available, use the pre tag without specifying a language ("No Highlight" in the language menu).

- -
x = 42;
- -

Styling HTML element references

- -

There are various specific rules to follow when writing about HTML elements, in order to consistently describe the various components of elements, and to ensure that they're properly linked to detailed documentation.

- -
-
Element names
-
Use the {{TemplateLink("HTMLElement")}} macro, which creates a link to the page for that element. For example, writing \{{HTMLElement("title")}} produces "{{HTMLElement("title")}}". If you don't want to create a link, enclose the name in angle brackets and use "Code (inline)" style (e.g., <title>).
-
Attribute names
-
Use bold face.
-
Attribute definitions
-
Use the {{TemplateLink("htmlattrdef")}} macro (e.g., \{{htmlattrdef("type")}}) for the definition term, so that it can be linked to from other pages, then use the {{TemplateLink("htmlattrxref")}} macro (e.g., \{{htmlattrxref("attr","element")}}) to reference attribute definitions.
-
Attribute values
-
Use "Code (inline)" style, and do not use quotation marks around strings, unless needed by the syntax of a code sample. E.g.: When the type attribute of an <input> element is set to email or tel ...
-
Labeling attributes
-
Use labels like {{HTMLVersionInline(5)}} thoughtfully. For example, use them next to the bold attribute name but not for every occurrence in your body text.
-
- -

Latin abbreviations

- -

In notes and parentheses

- - - -

In running text

- - - -

Meanings and English equivalents of Latin abbreviations

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AbbrevLatinEnglish
cf.confercompare
e.g.exempli gratiafor example
et al.et aliiand others
etc.et ceteraand so forth, and so on
i.e.id estthat is, in other words
N.B.nota benenote well
P.S.post scriptumpostscript
- -
-

Note: Always consider whether it's truly beneficial to use a Latin abbreviation. Some of these are used so rarely that many readers won't understand the meaning, and others are often confused with one another. And be sure that you use them correctly, if you choose to do so. For example, be careful not to confuse "e.g." with "i.e.", which is a common error.

-
- -

Acronyms and abbreviations

- -

Capitalization and periods

- -

Use full capitals and delete periods in all acronyms and abbreviations, including organizations such as "US" and "UN".

- - - -

Expansion

- -

On the first mention of a term on a page, expand acronyms likely to be unfamiliar to users. When in doubt, expand it, or, better, link it to the article or glossary entry describing the technology.

- - - -

Plurals of acronyms and abbreviations

- -

For plurals of acronyms or abbreviations, add s. Don't use an apostrophe. Ever. Please.

- - - -

Capitalization

- -

Use standard English capitalization rules in body text, and capitalize "World Wide Web" and "Web".

- -

Contractions

- -

Use contractions (e.g. "don't", "can't", "shouldn't") if you prefer. We're not that formal!

- -

Pluralization

- -

Use English-style plurals, not the Latin- or Greek-influenced forms.

- - - -

Hyphenation

- -

Hyphenate compounds when the last letter of the prefix is a vowel and is the same as the first letter of the root.

- - - -

Numbers and numerals

- -

Dates

- -

For dates (not including dates in code samples) use the format "January 1, 1990".

- - - -

Alternately, you can use the YYYY/MM/DD format.

- - - -

Decades

- -

For decades, use the format "1990s". Don't use an apostrophe.

- - - -

Plurals of numerals

- -

For plurals of numerals add "s". Don't use an apostrophe.

- - - -

Commas

- -

In running text, use commas only in five-digit and larger numbers.

- - - -

Punctuation

- -

Serial comma

- -

Use the serial comma. The serial (also known as "Oxford") comma is the comma that appears before the conjunction in a series of three or more items.

- - - -
-

Note: This is in contrast to the One Mozilla style guide, which specifies that the serial comma is not to be used. MDN is an exception to this rule.

-
- -

Spelling

- -

For words with variant spellings, always use the first entry at Answers.com. Do not use variant spellings.

- - - -

Terminology

- -

Obsolete vs. deprecated

- -

It's important to be clear on the difference between the terms obsolete and deprecated.

- -
-
Obsolete:
-
On MDN, the term obsolete marks an API or technology that is not only no longer recommended, but also no longer implemented in the browser. For Mozilla-specific technologies, the API is no longer implemented in Mozilla code; for Web standard technology, the API or feature is no longer supported by current, commonly-used browsers.
-
Deprecated:
-
On MDN, the term deprecated marks an API or technology that is no longer recommended, but is still implemented and may still work. These technologies will in theory eventually become obsolete and be removed, so you should stop using them. For Mozilla-specific technologies, the API is still supported in Mozilla code; for Web standard technology, the API or feature has been removed or replaced in a recent version of the defining standard.
-
- -

HTML elements

- -

Use "elements" to refer to HTML and XML elements, rather than "tags". In addition, they should almost always be wrapped in "<>", and should be in the {{HTMLElement("code")}} style. Also, at least the first time you reference a given element in a section should use the {{TemplateLink("HTMLElement")}} macro, to create a link to the documentation for the element (unless you're writing within that element's reference document page).

- - - -

User interface actions

- -

In task sequences, describe user interface actions using the imperative mood. Identify the user interface element by its label and type.

- - - -

Voice

- -

While the active voice is generally preferred, the passive voice is also acceptable, given the informal feel of our content. Try to be consistent, though.

- -

Wiki markup and usage

- - - -

To automatically create a link to a Bugzilla bug, use this template:

- -
\{{Bug(322603)}}
-
- -

This results in:

- -

{{Bug(322603)}}

- -

For WebKit bugs, you can use this template:

- -
\{{Webkitbug("322603")}}
-
- -

This results in:

- -

{{Webkitbug("322603")}}

- -

Page tags

- -

Tags provide meta information about a page and/or indicate that a page has specific improvements needed to its content. Every page in the wiki should have tags. You can find details on tagging in our How to properly tag pages guide.

- -

The tagging interface lives at the bottom of a page while you're in edit mode, and looks something like this:

- -

Screenshot of the UX for adding and removing tags on MDN

- -

To add a tag, click in the edit box at the end of the tag list and type the tag name you wish to add. Tags will autocomplete as you type. Press enter (or return) to submit the new tag. Each article may have as many tags as needed. For example, an article about using JavaScript in AJAX programming might have both "JavaScript" and "AJAX" as tags.

- -

To remove a tag, simply click the little "X" icon in the tag.

- -

Tagging pages that need work

- -

In addition to using tags to track information about the documentation's quality and content, we also use them to mark articles as needing specific types of work.

- -

Tagging obsolete pages

- -

Use the following tags for pages that are not current:

- - - -

SEO summary

- -

The SEO summary is a very short summary of the page. It will be reported as a summary of the article to robots crawling the site, and will then appear in search results for the page. It is also used by macros that automate the construction of landing pages inside MDN itself.

- -

By default, the first pagragraph of the page is used as the SEO summary. However you can override this behavior by marking a section with the "SEO summary" style in the WYSIWYG editor.

- -

Landing pages

- -

Landing pages are pages at the root of a topic area of the site, such as the main CSS or HTML pages. They have a standard format that consists of three areas:

- -
    -
  1. A brief (typically one paragraph) overview of what the technology is and what it's used for. See {{anch("Writing a landing page overview")}} for tips.
    2. -
  2. A two-column list of links with appropriate headings. See {{anch("Creating a page link list")}} for guidelines.
    3. -
  3. An optional "Browser compatibility" section at the bottom of the page.
    4. -
- -

Creating a page link list

- -

The link list section of an MDN landing page consists of two columns. These are created using the following HTML:

- -
<div class="row topicpage-table">
-  <div class="section">
-    ... left column contents ...
-  </div>
-  <div class="section">
-    ... right column contents ...
-  </div>
-</div>
- -

The left-hand column should be a list of articles, with an <h2> header at the top of the left column explaining that it's a list of articles about the topic (for example "Documentation and tutorials about foo"); this header should use the CSS class "Documentation". Below that is a <dl> list of articles, with each article's link in a <dt> block and a brief one-or-two sentence summary of the article in the corresponding <dd> block.

- -

The right-hand column should contain one or more of the following sections, in order:

- -
-
Getting help from the community
-
This should provide information on Matrix rooms and mailing lists available about the topic. The heading should use the class "Community".
-
Tools
-
A list of tools the user can look at to help with the use of the technology described in this section of MDN. The heading should use the class "Tools".
-
Related topics
-
A list of links to landing pages for other, related, technologies of relevance. The heading should use the class "Related_Topics".
-
- -

<<<finish this once we finalize the landing page standards>>>

- -

Using, inserting images

- -

It's sometimes helpful to provide an image in an article you create or modify, especially if the article is very technical. To include an image:

- -
    -
  1. Attach the desired image file to the article (at the bottom of every article in edit mode)
    2. -
  2. Create an image in the WYSIWYG editor
    3. -
  3. In the WYSIWYG editor in the drop-down list listing attachments, select the newly created attachment which is your image
    4. -
  4. Press OK.
    5. -
- -

Other References

- -

Preferred style guides

- -

If you have questions about usage and style not covered here, we recommend referring to the Economist style guide or, failing that, the Chicago Manual of Style.

- -

Preferred dictionary

- -

For questions of spelling, please refer to Answers.com. The spell-checker for this site uses American English. Please do not use variant spellings (e.g., use honor rather than honour).

- -

We will be expanding the guide over time, so if you have specific questions that aren't covered in this document, please send them to the MDC mailing list or project lead so we know what should be added.

- -

MDN-specific

- - - -

Language, grammar, spelling

- -

If you're interested in improving your writing and editing skills, you may find the following resources to be helpful.

- - diff --git a/files/nl/mdn/guidelines/writing_style_guide/index.html b/files/nl/mdn/guidelines/writing_style_guide/index.html new file mode 100644 index 0000000000..92fa1e530b --- /dev/null +++ b/files/nl/mdn/guidelines/writing_style_guide/index.html @@ -0,0 +1,502 @@ +--- +title: MDN style guide +slug: MDN/Guidelines/Style_guide +translation_of: MDN/Guidelines/Writing_style_guide +--- +
{{MDNSidebar}}
+ +

In an effort to display documentation in an organized, standardized and easy-to-read manner, the Mozilla Developer Network style guide describes how text should be organized, spelled, formatted, and so on. These are guidelines rather than strict rules. We are more interested in content than formatting, so don't feel obligated to learn the style guide before contributing. Do not be upset or surprised, however, if an industrious volunteer later edits your work to conform to this guide.

+ +

If you're looking for specifics of how a given type of page should be structured, see the MDN page layout guide.

+ +

The language aspects of this guide apply primarily to English-language documentation. Other languages may have (and are welcome to create) their own style guides. These should be published as subpages of the localization team's page.

+ +

For style standards that apply to content written for sites other than MDN, refer to the One Mozilla style guide.

+ +

Basics

+ +

Page titles

+ +

Page titles are used in search results and also used to structure the page hierarchy in the breadcrumb list at the top of the page. The page title (which is displayed at the top of the page and in the search results) can be different from the page "slug," which is the portion of the page's URL following "<locale>/docs/".

+ +

Title and heading capitalization

+ +

Page titles and section headings should use sentence-style capitalization (only capitalize the first word and proper nouns) rather than headline-style capitalization:

+ + + +

We have many older pages that were written before this style rule was established. Feel free to update them as needed if you like. We're gradually getting to them.

+ +

Choosing titles and slugs

+ +

Page slugs should be kept short; when creating a new level of hierarchy, the new level's component in the slug should generally just be a word or two.

+ +

Page titles, on the other hand, may be as long as you like, within reason, and they should be descriptive.

+ +

Creating new subtrees

+ +

When you need to add a number of articles about a topic or topic area, you will typically do so by creating a landing page, then adding subpages for each of the individual articles. The landing page should open with a paragraph or two describing the topic or technology, then provide a list of the subpages with descriptions of each page. You can automate the insertion of pages into the list using a number of macros we've created.

+ +

For example, consider the JavaScript guide, which is structured like this:

+ + + +

Try to avoid putting your article at the top of the hierarchy, which slows the site down and makes search and site navigation less effective.

+ +

Sections, paragraphs, and newlines

+ +

Use heading levels in decreasing order: {{HTMLElement("h2")}} then {{HTMLElement("h3")}} then {{HTMLElement("h4")}}, without skipping levels. H2 is the highest level allowed because H1 is reserved for the page title. If you need more than three or four levels of headers you should consider breaking up the article into several smaller articles with a landing page, linking them together using the {{TemplateLink("Next")}}, {{TemplateLink("Previous")}}, and {{TemplateLink("PreviousNext")}} macros.

+ +

The enter (or return) key on your keyboard starts a new paragraph. To insert a newline without a space, hold down the shift key while pressing enter.

+ +

Text formatting and styles

+ +

Use the "Formatting Styles" drop-down list to apply predefined styles to selected content.

+ +
Note: The "Note" style is used to call out important notes, like this one.
+ +
Warning: Similarly, the "Warning" style creates warning boxes like this.
+ +

Unless specifically instructed to do so, do not use the HTML style attribute to manually style content. If you can't do it using a predefined class, drop into {{IRCLink("mdn")}} and ask for help.

+ +

Code sample style and formatting

+ +

Tabs and line breaks

+ +

Use two spaces per tab in all code samples. Code should be indented cleanly, with open-brace ("{") characters on the same line as the statement that opens the block. For example:

+ +
if (condition) {
+  /* handle the condition */
+} else {
+  /* handle the "else" case */
+}
+
+ +

Long lines shouldn't be allowed to stretch off horizontally to the extent that they require horizontal scrolling to read. Instead, break at natural breaking points. Some examples follow:

+ +
if (class.CONDITION || class.OTHER_CONDITION || class.SOME_OTHER_CONDITION
+       || class.YET_ANOTHER_CONDITION ) {
+  /* something */
+}
+
+var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-service;1"]
+                           .createInstance(Components.interfaces.nsIToolkitProfileService);
+
+ +

Inline code formatting

+ +

Use the "Code" button (labeled with two angle brackets "<>") to apply inline code-style formatting to function names, variable names, and method names (this uses the {{HTMLElement("code")}} element). For example, "the frenchText() function".

+ +

Method names should be followed by a pair of parentheses: doSomethingUseful(). This helps to differentiate methods from other code terms.

+ +

Syntax highlighting

+ +

Screenshot of the "syntax highlighting" menu.Entire lines (or multiple lines) of code should be formatted using syntax highlighting rather than the {{HTMLElement("code")}} element. Click the "pre" button in the toolbar to create the preformatted content box in which you'll then write your code. Then, with the text entry cursor inside the code box, select the appropriate language from the language list button to the right of the "pre" button, as seen in the screenshot to the right. The following example shows text with JavaScript formatting:

+ +
+
for (var i = 0, j = 9; i <= 9; i++, j--)
+  document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);
+
+ +

If no appropriate transformation is available, use the pre tag without specifying a language ("No Highlight" in the language menu).

+ +
x = 42;
+ +

Styling HTML element references

+ +

There are various specific rules to follow when writing about HTML elements, in order to consistently describe the various components of elements, and to ensure that they're properly linked to detailed documentation.

+ +
+
Element names
+
Use the {{TemplateLink("HTMLElement")}} macro, which creates a link to the page for that element. For example, writing \{{HTMLElement("title")}} produces "{{HTMLElement("title")}}". If you don't want to create a link, enclose the name in angle brackets and use "Code (inline)" style (e.g., <title>).
+
Attribute names
+
Use bold face.
+
Attribute definitions
+
Use the {{TemplateLink("htmlattrdef")}} macro (e.g., \{{htmlattrdef("type")}}) for the definition term, so that it can be linked to from other pages, then use the {{TemplateLink("htmlattrxref")}} macro (e.g., \{{htmlattrxref("attr","element")}}) to reference attribute definitions.
+
Attribute values
+
Use "Code (inline)" style, and do not use quotation marks around strings, unless needed by the syntax of a code sample. E.g.: When the type attribute of an <input> element is set to email or tel ...
+
Labeling attributes
+
Use labels like {{HTMLVersionInline(5)}} thoughtfully. For example, use them next to the bold attribute name but not for every occurrence in your body text.
+
+ +

Latin abbreviations

+ +

In notes and parentheses

+ + + +

In running text

+ + + +

Meanings and English equivalents of Latin abbreviations

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AbbrevLatinEnglish
cf.confercompare
e.g.exempli gratiafor example
et al.et aliiand others
etc.et ceteraand so forth, and so on
i.e.id estthat is, in other words
N.B.nota benenote well
P.S.post scriptumpostscript
+ +
+

Note: Always consider whether it's truly beneficial to use a Latin abbreviation. Some of these are used so rarely that many readers won't understand the meaning, and others are often confused with one another. And be sure that you use them correctly, if you choose to do so. For example, be careful not to confuse "e.g." with "i.e.", which is a common error.

+
+ +

Acronyms and abbreviations

+ +

Capitalization and periods

+ +

Use full capitals and delete periods in all acronyms and abbreviations, including organizations such as "US" and "UN".

+ + + +

Expansion

+ +

On the first mention of a term on a page, expand acronyms likely to be unfamiliar to users. When in doubt, expand it, or, better, link it to the article or glossary entry describing the technology.

+ + + +

Plurals of acronyms and abbreviations

+ +

For plurals of acronyms or abbreviations, add s. Don't use an apostrophe. Ever. Please.

+ + + +

Capitalization

+ +

Use standard English capitalization rules in body text, and capitalize "World Wide Web" and "Web".

+ +

Contractions

+ +

Use contractions (e.g. "don't", "can't", "shouldn't") if you prefer. We're not that formal!

+ +

Pluralization

+ +

Use English-style plurals, not the Latin- or Greek-influenced forms.

+ + + +

Hyphenation

+ +

Hyphenate compounds when the last letter of the prefix is a vowel and is the same as the first letter of the root.

+ + + +

Numbers and numerals

+ +

Dates

+ +

For dates (not including dates in code samples) use the format "January 1, 1990".

+ + + +

Alternately, you can use the YYYY/MM/DD format.

+ + + +

Decades

+ +

For decades, use the format "1990s". Don't use an apostrophe.

+ + + +

Plurals of numerals

+ +

For plurals of numerals add "s". Don't use an apostrophe.

+ + + +

Commas

+ +

In running text, use commas only in five-digit and larger numbers.

+ + + +

Punctuation

+ +

Serial comma

+ +

Use the serial comma. The serial (also known as "Oxford") comma is the comma that appears before the conjunction in a series of three or more items.

+ + + +
+

Note: This is in contrast to the One Mozilla style guide, which specifies that the serial comma is not to be used. MDN is an exception to this rule.

+
+ +

Spelling

+ +

For words with variant spellings, always use the first entry at Answers.com. Do not use variant spellings.

+ + + +

Terminology

+ +

Obsolete vs. deprecated

+ +

It's important to be clear on the difference between the terms obsolete and deprecated.

+ +
+
Obsolete:
+
On MDN, the term obsolete marks an API or technology that is not only no longer recommended, but also no longer implemented in the browser. For Mozilla-specific technologies, the API is no longer implemented in Mozilla code; for Web standard technology, the API or feature is no longer supported by current, commonly-used browsers.
+
Deprecated:
+
On MDN, the term deprecated marks an API or technology that is no longer recommended, but is still implemented and may still work. These technologies will in theory eventually become obsolete and be removed, so you should stop using them. For Mozilla-specific technologies, the API is still supported in Mozilla code; for Web standard technology, the API or feature has been removed or replaced in a recent version of the defining standard.
+
+ +

HTML elements

+ +

Use "elements" to refer to HTML and XML elements, rather than "tags". In addition, they should almost always be wrapped in "<>", and should be in the {{HTMLElement("code")}} style. Also, at least the first time you reference a given element in a section should use the {{TemplateLink("HTMLElement")}} macro, to create a link to the documentation for the element (unless you're writing within that element's reference document page).

+ + + +

User interface actions

+ +

In task sequences, describe user interface actions using the imperative mood. Identify the user interface element by its label and type.

+ + + +

Voice

+ +

While the active voice is generally preferred, the passive voice is also acceptable, given the informal feel of our content. Try to be consistent, though.

+ +

Wiki markup and usage

+ + + +

To automatically create a link to a Bugzilla bug, use this template:

+ +
\{{Bug(322603)}}
+
+ +

This results in:

+ +

{{Bug(322603)}}

+ +

For WebKit bugs, you can use this template:

+ +
\{{Webkitbug("322603")}}
+
+ +

This results in:

+ +

{{Webkitbug("322603")}}

+ +

Page tags

+ +

Tags provide meta information about a page and/or indicate that a page has specific improvements needed to its content. Every page in the wiki should have tags. You can find details on tagging in our How to properly tag pages guide.

+ +

The tagging interface lives at the bottom of a page while you're in edit mode, and looks something like this:

+ +

Screenshot of the UX for adding and removing tags on MDN

+ +

To add a tag, click in the edit box at the end of the tag list and type the tag name you wish to add. Tags will autocomplete as you type. Press enter (or return) to submit the new tag. Each article may have as many tags as needed. For example, an article about using JavaScript in AJAX programming might have both "JavaScript" and "AJAX" as tags.

+ +

To remove a tag, simply click the little "X" icon in the tag.

+ +

Tagging pages that need work

+ +

In addition to using tags to track information about the documentation's quality and content, we also use them to mark articles as needing specific types of work.

+ +

Tagging obsolete pages

+ +

Use the following tags for pages that are not current:

+ + + +

SEO summary

+ +

The SEO summary is a very short summary of the page. It will be reported as a summary of the article to robots crawling the site, and will then appear in search results for the page. It is also used by macros that automate the construction of landing pages inside MDN itself.

+ +

By default, the first pagragraph of the page is used as the SEO summary. However you can override this behavior by marking a section with the "SEO summary" style in the WYSIWYG editor.

+ +

Landing pages

+ +

Landing pages are pages at the root of a topic area of the site, such as the main CSS or HTML pages. They have a standard format that consists of three areas:

+ +
    +
  1. A brief (typically one paragraph) overview of what the technology is and what it's used for. See {{anch("Writing a landing page overview")}} for tips.
    2. +
  2. A two-column list of links with appropriate headings. See {{anch("Creating a page link list")}} for guidelines.
    3. +
  3. An optional "Browser compatibility" section at the bottom of the page.
    4. +
+ +

Creating a page link list

+ +

The link list section of an MDN landing page consists of two columns. These are created using the following HTML:

+ +
<div class="row topicpage-table">
+  <div class="section">
+    ... left column contents ...
+  </div>
+  <div class="section">
+    ... right column contents ...
+  </div>
+</div>
+ +

The left-hand column should be a list of articles, with an <h2> header at the top of the left column explaining that it's a list of articles about the topic (for example "Documentation and tutorials about foo"); this header should use the CSS class "Documentation". Below that is a <dl> list of articles, with each article's link in a <dt> block and a brief one-or-two sentence summary of the article in the corresponding <dd> block.

+ +

The right-hand column should contain one or more of the following sections, in order:

+ +
+
Getting help from the community
+
This should provide information on Matrix rooms and mailing lists available about the topic. The heading should use the class "Community".
+
Tools
+
A list of tools the user can look at to help with the use of the technology described in this section of MDN. The heading should use the class "Tools".
+
Related topics
+
A list of links to landing pages for other, related, technologies of relevance. The heading should use the class "Related_Topics".
+
+ +

<<<finish this once we finalize the landing page standards>>>

+ +

Using, inserting images

+ +

It's sometimes helpful to provide an image in an article you create or modify, especially if the article is very technical. To include an image:

+ +
    +
  1. Attach the desired image file to the article (at the bottom of every article in edit mode)
    2. +
  2. Create an image in the WYSIWYG editor
    3. +
  3. In the WYSIWYG editor in the drop-down list listing attachments, select the newly created attachment which is your image
    4. +
  4. Press OK.
    5. +
+ +

Other References

+ +

Preferred style guides

+ +

If you have questions about usage and style not covered here, we recommend referring to the Economist style guide or, failing that, the Chicago Manual of Style.

+ +

Preferred dictionary

+ +

For questions of spelling, please refer to Answers.com. The spell-checker for this site uses American English. Please do not use variant spellings (e.g., use honor rather than honour).

+ +

We will be expanding the guide over time, so if you have specific questions that aren't covered in this document, please send them to the MDC mailing list or project lead so we know what should be added.

+ +

MDN-specific

+ + + +

Language, grammar, spelling

+ +

If you're interested in improving your writing and editing skills, you may find the following resources to be helpful.

+ + diff --git a/files/nl/mdn/kuma/index.html b/files/nl/mdn/kuma/index.html deleted file mode 100644 index 8c20ce6be7..0000000000 --- a/files/nl/mdn/kuma/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: 'Kuma: MDN’s wiki-platform' -slug: MDN/Kuma -tags: - - Kuma - - Landing - - MDN - - MDN Meta -translation_of: MDN/Kuma ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/nl/docs/MDN")}}
- -

Kuma is de Django-code die MDN Web Docs mogelijk maakt.

- -

{{SubpagesWithSummaries}}

- -

Meewerken aan Kuma

- -

Doe het volgende om aan Kuma mee te werken:

- - diff --git a/files/nl/mdn/kuma/probleemoplossingen_kumascript_errors/index.html b/files/nl/mdn/kuma/probleemoplossingen_kumascript_errors/index.html deleted file mode 100644 index 1c6e356ac9..0000000000 --- a/files/nl/mdn/kuma/probleemoplossingen_kumascript_errors/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Probleemoplossing KumaScript-errors -slug: MDN/Kuma/Probleemoplossingen_KumaScript_errors -tags: - - Documentatie(2) - - Errors - - Fouten - - KumaScript - - MDN -translation_of: MDN/Tools/KumaScript/Troubleshooting ---- -
{{MDNSidebar}}
-

KumaScript fouten die op pagina's verschijnen kunnen ontmoedigend zijn voor degene die deze tegenkomen. Gelukkig kan iedereen met een MDN-account deze documenten bewerken om deze bugs op te lossen. Wanneer een pagina deze fout toont, wordt deze toegevoegd aan de lijst documenten met fouten.  Site editors spitten deze regelmatig door om deze bugs te vinden en ze op te lossen. Dit artikel omschrijft vier typen KumaScript-fouten, en hoe je deze kunt oplossen.

-
- -

DocumentParsingError

- -

DocumentParsingError verschijnt wanneer KumaScript problemen heeft met het begrijpen van het document zelf. De meest voorkomende oorzaak is een syntax error(een character of string verkeerd geplaatst in een command of instruction waardoor een storing ontstaat in het uitvoeren) in een macro.

- -

Controleren op:

- -
-
Het gebruik van accolades zonder de bedoeling een macro op te roepen.
-
Als u een \{ wilt schrijven in een document zonder een macro aan te roepen, kunt u dit doen door een extra \ ervoor toe te voegen. Zoals dit: \\{
-
Het gebruik van een speciaal karakter in een macro parameter.
-
Wanneer u een \ of een "  binnenin een macro parameter nodig heeft, kunt u dit doen door een \ ervoor toe te voegen. Zoals dit: \\ of \"
-
Ontbrekende komma tussen macro parameters.
-
Macro parameters moeten afgebakend worden door een komma (,) maar niet aan het einde van de lijst van parameters, voorbeeld; \{\{anch("top", "Back to top")}}.
-
HTML tags verschijnen in een macro oproep
-
Als je styling/vormgeving toepast in een macro, zal het vaak breken omdat, bijvoorbeeld een </code> tag verschenen is in de geschreven macro code van de broncode. Controleer de bron om te zien wat er is en verwijder onnodige styling/vormgeving.
-
- - - -

TemplateLoadingError

- -

TemplateLoadingError verschijnt wanneer Kumascript moeite heeft met het bepalen welke macro op de pagina te include

- -

Controleer op:

- -
-
Verkeerd gespelde macro namen of hernoemde macro's.
-
U kunt proberen te kijken of de macro juist genoemd is in de sjabloonpagina. De URL van de sjabloonpagina kan worden berekend door de naam template aan het einde van de URL toe te voegen; https://developer.mozilla.org/en-US/docs/Template: — bijvoorbeeld de sjabloonpagina voor \{\{anch("top", "Back to top")}}  is https://developer.mozilla.org/en-US/docs/Template:anch.
-
- Er is een gedeeltelijke lijst van macros voor de MDN, die de bestaande macro's en zijn correcte/nieuwe spelling kan omvatten.
-
- -
-

Tip: Je kan een snelle en makkelijke sprong maken naar een specifieke macro door een zoekwoord toe te voegen aan Firefox. <<<Meer info binnenkort>>>

-
- -

TemplateExecutionError

- -

TemplateExecutionError verschijnt wanneer KumaScript een fout treft in de macro. Deze fouten kunnen alleen worden opgelost door admins/beheerders en moeten gerapporteerd worden als bugs.

- -

Controleer voordat je fouten rapporteerd, of deze fout al opgelost is. Dit kun je doen door Shift ingedrukt te houden terwijl je de KumaScript pagina herlaadt (Shift + Ctrl + R op Windows/Linux, Shift + Cmd + R op Mac).

- -

Meldt een bug wanneer de fout niet opgelost wordt, voeg hierbij de URL van de pagina en de de tekst in de foutmelding.

- -

Overige fouten

- -

Dit is de categorie waar niet bovenstaande fouten tot behoren.

- -

Controleer voor fixes en rapporteer hardnekkige bugs zoals beschreven onder TemplateExecutionError.

- -

 

- -

 

diff --git a/files/nl/mdn/over/index.html b/files/nl/mdn/over/index.html deleted file mode 100644 index 9af7825aab..0000000000 --- a/files/nl/mdn/over/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Over MDN -slug: MDN/Over -tags: - - Auteursrechten - - Collaboratie - - Community - - Documentație - - Gids - - Licenties - - MDN Meta -translation_of: MDN/About ---- -
{{MDNSidebar}}
- -
{{IncludeSubNav("/nl/docs/MDN")}}
- -

MDN Web Docs is een evoluerend leerplatform voor webtechnologieën en de software die het Web van zijn kracht voorziet, zoals:

- - - -

Onze missie

- -

MDN's missie is simpelweg ontwikkelaars de informatie bieden die ze nodig hebben om eenvoudig projecten op het open Web te creëren. Als het een open technologie is die wordt blootgesteld aan het web, willen we het documenteren.

- -

Daarnaast bieden we documentatie over Mozillaproducten en hoe te bouwen en bij te dragen aan Mozillaprojecten.

- -

Als u onzeker bent of een specifiek onderwerp wel of niet past  op MDN, lees dan: Hoort dit op MDN?

- -

Hoe u kunt helpen

- -

U hoeft niet te kunnen coderen—of goed kunnen schrijven—om MDN te kunnen helpen! We hebben vele manieren waarop men kan helpen, van het beoordelen van artikelen om er zeker van te zijn dat ze logisch zijn, tot het bijdragen van tekst en het toevoegen van voorbeeldcode. In feite zijn er zoveel manieren om te helpen dat we een pagina, genaamd Beginnen op MDN, hebben die u helpt een taak te kiezen, gebaseerd op uw interesses en hoeveel tijd u hebt!

- -

U kunt ook helpen door het promoten van MDN op uw eigen blog of website.

- -

De MDN-gemeenschap

- -

Onze gemeenschap is een wereldwijde! We hebben geweldige bijdragers over de hele wereld, in verschillende talen. Als u meer wilt weten over ons, of als u hulp nodig hebt met MDN op welke manier dan ook, neem dan gerust een kijkje op ons discussieforum of IRC-kanaal! U kunt ook bijhouden wat we doen door ons Twitter-account te volgen, @MozDevNet. U kunt ook tweets naar ons verzenden als u ziet dat er iets verkeerd is, of als u feedback wilt geven (of bedankjes) aan onze schrijvers en bijdragers!

- -

De inhoud van MDN Web Docs gebruiken

- -

Auteursrechten en licenties

- -

MDN's wikidocumenten zijn opgesteld met de bijdragen van vele auteurs, zowel binnen als buiten de Mozilla Foundation. Tenzij anders aangegeven, is de inhoud beschikbaar onder de voorwaarden van de Creative Commons Attribution-ShareAlike license (CC-BY-SA), v2.5 of een latere versie. Schrijf "Mozilla-bijdragers" toe en voeg een hyperlink (online) of URL (in gedrukte vorm) toe aan de specifieke wikipagina voor de inhoud die wordt aangekocht. Als u bijvoorbeeld een toeschrijving voor dit artikel wilt geven, kunt u schrijven:

- -
Over MDN door Mozilla Bijdragers is onder licentie van CC-BY-SA 2.5.
- -

"Mozilla Bijdragers" verwijst naar de geschiedenis van de geciteerde pagina. Zie Best practices for attribution voor verdere uitleg.

- -
-

Zie MDN content op WebPlatform.org voor informatie over hoe u MDN-inhoud op die site kunt hergebruiken en toeschrijven.

-
- -

Codevoorbeelden die zijn toegevoegd voor 20 augustus 2010, zijn beschikbaar onder de MIT-licentie; U moet de volgende attributie-informatie in het MIT-sjabloon zetten: "© <datum van laatste herziening van de wikipagina> <naam van de persoon die het in de wiki heeft geplaatst>".

- -

Codevoorbeelden toegevoegd op of na 20 augustus 2010 zijn in het publiek domein. Er is geen licentie nodig, maar als er een nodig is, kunt u de volgende gebruiken: "Alle auteursrechten zijn opgedragen aan het publiek domein. http://creativecommons.org/publicdomain/zero/1.0/".

- -

Als u een bijdrage wilt leveren aan deze wiki, moet u uw documentatie beschikbaar maken onder de Attribution-ShareAlike-licentie (of soms een alternatieve licentie die al is opgegeven door de pagina die u aan het bewerken bent) en uw codevoorbeelden beschikbaar maken onder Creative Commons CC-0 (een publiek-domeinaanduiding). Door bij te dragen aan deze wiki, stemt u ermee in dat uw bijdragen onder die licenties beschikbaar worden gesteld.

- -

Sommige oudere inhoud was beschikbaar gemaakt onder een andere licentie dan hierboven genoteerd; deze staan onderaan elke pagina genoteerd aan de hand van een Alternatief licentieblok.

- -
-

Er mogen geen nieuwe pagina's gemaakt worden met andere licenties.

-
- -

Auteursrecht voor ingebrachte materialen blijft bij de auteur, tenzij de auteur het aan iemand anders toewijst.

- -

Als u vragen of opmerkingen hebt over alles wat hier wordt besproken, neem dan contact op met Eric Shepherd.

- -
-

De rechten op de handelsmerken, logo's, servicemerken van de Mozilla Foundation en het uiterlijk van deze website zijn niet gelicentieerd onder de Creative Commons-licentie en voor zover het werken van auteurschap betreft (zoals logo's en grafische afbeeldingen) ontwerp), zijn ze niet opgenomen in het werk dat onder die voorwaarden is gelicentieerd. Als u de tekst van documenten gebruikt en tevens een van deze rechten wilt gebruiken, of als u andere vragen hebt over het voldoen aan onze licentievoorwaarden voor deze verzameling, dient u hier contact op te nemen met de Mozilla Foundation: licensing@mozilla.org.

- - - -

Linken naar MDN

- -

Zie dit artikel voor begeleiding op linken naar MDN voor de beste uitvoeringen bij het linken.

- - - - - -

Downloaden van content

- -

U kunt een volledige tarball mirror van MDN downloaden (2.1 GB vanaf februari 2017).

- -

Enkele pagina's

- -

U kunt de inhoud van één pagina op MDN ophalen door documentparameters toe te voegen aan de URL om op te geven welke indeling u wilt.

- -

Third-party tools

- -

U kunt MDN content bekijken via third-party tools zoals Dash (voor Mac OS) en Zeal (voor Linux en Windows).

- -

Kapeli publiceert ook offline MDN docs over HTML, CSS, JavaScript, SVG, en XSLT.

- -

Problemen rapporteren met MDN Web Docs

- -

Zie Hoe rapporteert men een probleem op MDN.

- -

Geschiedenis van MDN Web Docs

- -

Het MDN Web Docs (voorheen Mozilla Developer Network (MDN), voorheen Mozilla Developer Center (MDC), a.k.a. Devmo) project startte begin 2005, toen de Mozilla Foundation Een licentie van AOL verkreeg om de originele Netscape DevEdge content te gebruiken. De DevEdge-inhoud werd gedolven voor nog bruikbaar materiaal, dat vervolgens door vrijwilligers werd gemigreerd naar deze wiki, zodat het gemakkelijker te updaten en onderhouden was.

- -

U kunt meer geschiedenis van MDN vinden op onze 10-jarig jubileum-pagina, inclusief een mondelinge geschiedenis door enkele van de mensen die erbij betrokken waren.

- -

Over Mozilla

- -

Of u nu meer wilt weten over wie we zijn, hoe u een deel van Mozilla kunt zijn of waar u ons kunt vinden, u bent hier aan het juiste adres. Als u wilt weten wat ons drijft en ons anders maakt, bezoek dan onze missiepagina.

diff --git a/files/nl/mdn/tools/kumascript/troubleshooting/index.html b/files/nl/mdn/tools/kumascript/troubleshooting/index.html new file mode 100644 index 0000000000..1c6e356ac9 --- /dev/null +++ b/files/nl/mdn/tools/kumascript/troubleshooting/index.html @@ -0,0 +1,69 @@ +--- +title: Probleemoplossing KumaScript-errors +slug: MDN/Kuma/Probleemoplossingen_KumaScript_errors +tags: + - Documentatie(2) + - Errors + - Fouten + - KumaScript + - MDN +translation_of: MDN/Tools/KumaScript/Troubleshooting +--- +
{{MDNSidebar}}
+

KumaScript fouten die op pagina's verschijnen kunnen ontmoedigend zijn voor degene die deze tegenkomen. Gelukkig kan iedereen met een MDN-account deze documenten bewerken om deze bugs op te lossen. Wanneer een pagina deze fout toont, wordt deze toegevoegd aan de lijst documenten met fouten.  Site editors spitten deze regelmatig door om deze bugs te vinden en ze op te lossen. Dit artikel omschrijft vier typen KumaScript-fouten, en hoe je deze kunt oplossen.

+
+ +

DocumentParsingError

+ +

DocumentParsingError verschijnt wanneer KumaScript problemen heeft met het begrijpen van het document zelf. De meest voorkomende oorzaak is een syntax error(een character of string verkeerd geplaatst in een command of instruction waardoor een storing ontstaat in het uitvoeren) in een macro.

+ +

Controleren op:

+ +
+
Het gebruik van accolades zonder de bedoeling een macro op te roepen.
+
Als u een \{ wilt schrijven in een document zonder een macro aan te roepen, kunt u dit doen door een extra \ ervoor toe te voegen. Zoals dit: \\{
+
Het gebruik van een speciaal karakter in een macro parameter.
+
Wanneer u een \ of een "  binnenin een macro parameter nodig heeft, kunt u dit doen door een \ ervoor toe te voegen. Zoals dit: \\ of \"
+
Ontbrekende komma tussen macro parameters.
+
Macro parameters moeten afgebakend worden door een komma (,) maar niet aan het einde van de lijst van parameters, voorbeeld; \{\{anch("top", "Back to top")}}.
+
HTML tags verschijnen in een macro oproep
+
Als je styling/vormgeving toepast in een macro, zal het vaak breken omdat, bijvoorbeeld een </code> tag verschenen is in de geschreven macro code van de broncode. Controleer de bron om te zien wat er is en verwijder onnodige styling/vormgeving.
+
+ + + +

TemplateLoadingError

+ +

TemplateLoadingError verschijnt wanneer Kumascript moeite heeft met het bepalen welke macro op de pagina te include

+ +

Controleer op:

+ +
+
Verkeerd gespelde macro namen of hernoemde macro's.
+
U kunt proberen te kijken of de macro juist genoemd is in de sjabloonpagina. De URL van de sjabloonpagina kan worden berekend door de naam template aan het einde van de URL toe te voegen; https://developer.mozilla.org/en-US/docs/Template: — bijvoorbeeld de sjabloonpagina voor \{\{anch("top", "Back to top")}}  is https://developer.mozilla.org/en-US/docs/Template:anch.
+
+ Er is een gedeeltelijke lijst van macros voor de MDN, die de bestaande macro's en zijn correcte/nieuwe spelling kan omvatten.
+
+ +
+

Tip: Je kan een snelle en makkelijke sprong maken naar een specifieke macro door een zoekwoord toe te voegen aan Firefox. <<<Meer info binnenkort>>>

+
+ +

TemplateExecutionError

+ +

TemplateExecutionError verschijnt wanneer KumaScript een fout treft in de macro. Deze fouten kunnen alleen worden opgelost door admins/beheerders en moeten gerapporteerd worden als bugs.

+ +

Controleer voordat je fouten rapporteerd, of deze fout al opgelost is. Dit kun je doen door Shift ingedrukt te houden terwijl je de KumaScript pagina herlaadt (Shift + Ctrl + R op Windows/Linux, Shift + Cmd + R op Mac).

+ +

Meldt een bug wanneer de fout niet opgelost wordt, voeg hierbij de URL van de pagina en de de tekst in de foutmelding.

+ +

Overige fouten

+ +

Dit is de categorie waar niet bovenstaande fouten tot behoren.

+ +

Controleer voor fixes en rapporteer hardnekkige bugs zoals beschreven onder TemplateExecutionError.

+ +

 

+ +

 

diff --git a/files/nl/mdn/tools/template_editing/index.html b/files/nl/mdn/tools/template_editing/index.html deleted file mode 100644 index 51ce66b56b..0000000000 --- a/files/nl/mdn/tools/template_editing/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Sjablonen bewerken -slug: MDN/Tools/Template_editing -tags: - - Gids - - Hulpmiddelen - - MDN - - MDN Meta - - Paginaniveau - - Privileges - - Rollen(2) -translation_of: MDN/Tools/Template_editing ---- -
{{MDNSidebar}}

Op MDN worden in KumaScript geschreven sjablonen gebruikt om het genereren en aanpassen van inhoud binnen pagina's te automatiseren. Elk sjabloon is een apart bestand in de map macros op de GitHub-repository van KumaScript.

- -

Iedereen die wikipagina's op MDN bewerkt, kan macro's aanroepen in MDN-artikelen. Daarnaast kan iedereen sjablonen aanmaken en bewerken via de GitHub-repository van KumaScript, waarbij standaard open-source-gewoonten worden gebruikt (fork de repo, maak een branch, maak wijzigingen en stuur een pull-request ter beoordeling). Op dit moment is het sturen van een pull-request de enige manier om vertaalde strings bij te werken in sjablonen die deze strings bevatten.

diff --git a/files/nl/mdn/yari/index.html b/files/nl/mdn/yari/index.html new file mode 100644 index 0000000000..8c20ce6be7 --- /dev/null +++ b/files/nl/mdn/yari/index.html @@ -0,0 +1,27 @@ +--- +title: 'Kuma: MDN’s wiki-platform' +slug: MDN/Kuma +tags: + - Kuma + - Landing + - MDN + - MDN Meta +translation_of: MDN/Kuma +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/nl/docs/MDN")}}
+ +

Kuma is de Django-code die MDN Web Docs mogelijk maakt.

+ +

{{SubpagesWithSummaries}}

+ +

Meewerken aan Kuma

+ +

Doe het volgende om aan Kuma mee te werken:

+ + diff --git a/files/nl/mdn_at_ten/index.html b/files/nl/mdn_at_ten/index.html deleted file mode 100644 index f1bd6ea3b7..0000000000 --- a/files/nl/mdn_at_ten/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: MDN at 10 -slug: MDN_at_ten -tags: - - Geschiedenis -translation_of: MDN_at_ten ---- - - -
-
-

De geschiedenis van MDN

- -

In het begin van 2005, zette een klein team van idealisten het plan op om een nieuwe, vrije, door de gemeenschap gemaakte, online hulpbron voor alle Webontwikkelaars te maken. Hun brilliante, maar ongewone idee is uitgegroeid tot het Mozilla Developer Network van vandaag, de voornaamste hulpbron voor alle open Web technologieën. Tien jaar later is onze wereldwijde gemeenschap groter dan ooit, en samen maken we nog altijd documentatie, voorbeeldcode and leermiddelen voor alle open Web technologieën, zoals CSS, HTML, JavaScript en alle andere dingen die het open Web zo krachtig maken.

- -

Meer weten about the history

- - -

Bijdragen tot MDN

- -

Gedurende tien jaar heeft de MDN gemeenschap het open Web gedocumenteerd. Van het corrigeren van simpele typefouten tot het schrijven van een volledige documentatie voor een nieuwe API, iedereen heeft iets te bieden en geen bijdrage is te groot of te klein. We hebben meer dan 90,000 pagina's die geschreven of vertaald werden door leden van onze voortreffelijke gemeenschap van Mozillians. U kunt een van hen worden.

- -

Meer weten about contributing

- -

 

- -

 

-
- -
{{TenthCampaignQuote}}
- - - -
    -
  1. MDN at 10
    2. -
  2. De geschiedenis van MDN
    3. -
  3. Bijdragen tot MDN
    4. -
-
diff --git a/files/nl/mozilla/add-ons/webextensions/een_verouderde_firefox-add-on_porteren/index.html b/files/nl/mozilla/add-ons/webextensions/een_verouderde_firefox-add-on_porteren/index.html deleted file mode 100644 index 01bce8b60c..0000000000 --- a/files/nl/mozilla/add-ons/webextensions/een_verouderde_firefox-add-on_porteren/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Een verouderde Firefox-add-on porteren -slug: Mozilla/Add-ons/WebExtensions/Een_verouderde_Firefox-add-on_porteren -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on ---- -
{{AddonSidebar}}
- -

Als u een add-on voor Firefox hebt ontwikkeld via een verouderde technologie, zoals XUL/XPCOM of de Add-on-SDK, vertelt deze snelle handleiding hoe u deze add-on kunt bijwerken.

- -
    -
  1. Om een idee te krijgen van de belangrijkste zaken die u in uw add-on moet wijzigen: - -
    2. -
  2. Herschrijf de code van uw add-on. Meer bronnen en ondersteuning vindt u in de Mozilla-wiki. Vanaf Firefox 51 en hoger kunt u een WebExtension in een ‘bootstrapped’ extensie of een SDK-add-on inbedden en op die manier verouderde add-ons een voor een porteren, en bij elke stap over een werkende add-on beschikken. Zie hiervoor Embedded WebExtensions.
    3. -
  3. Zodra u eraan toe bent om uw oude add-on bij te werken, dient u de nieuwe add-on in bij AMO als een update voor de oude. Dit betekent dat u een verouderde add-on kunt omzetten naar het gebruik van WebExtensions, en dezelfde add-on-ID kunt behouden.
    4. -
- -
-

Houd er rekening mee dat dit een omzetting is in één richting: u kunt een WebExtension niet bijwerken voor het gebruik van oudere technologie. Dit houdt in dat u er zeker van moet zijn dat u eraan toe bent om de bijgewerkte add-on naar WebExtensions vast te leggen voordat u deze bij AMO indient.

-
diff --git a/files/nl/mozilla/add-ons/webextensions/wat_zijn_webextensions/index.html b/files/nl/mozilla/add-ons/webextensions/wat_zijn_webextensions/index.html deleted file mode 100644 index d404228574..0000000000 --- a/files/nl/mozilla/add-ons/webextensions/wat_zijn_webextensions/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Wat zijn extensies? -slug: Mozilla/Add-ons/WebExtensions/Wat_zijn_WebExtensions -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions ---- -
{{AddonSidebar}}
- -

Extensies zijn stukjes code die de functionaliteit van een webbrowser aanpassen. Deze worden geschreven door gebruik te maken van standaard webtechnologieën - JavaScript, HTML en CSS - plus een aantal specifieke JavaScript-API’s. Naast andere dingen kunnen extensies nieuwe functies aan de browser toevoegen of de vormgeving of inhoud van bepaalde websites wijzigen.

- -

Extensies voor Firefox worden gebouwd via WebExtensions-API’s, een browseronafhankelijk systeem voor het ontwikkelen van extensies. De API is in grote mate compatibel met de extensie-API die door Google Chrome en Opera wordt ondersteund. Extensies die voor deze browsers zijn gemaakt, zullen in de meeste gevallen met slechts enkele aanpassingen in Firefox of Microsoft Edge werken. De API is ook volledig compatibel met multiprocess-Firefox.

- -

In het verleden kon u Firefox-extensies ontwikkelen via één van drie verschillende systemen: XUL/XPCOM-overlays, ‘bootstrapped’ extensies, of de Add-on-SDK. Aan het einde van november 2017 zullen WebExtensions-API’s de enige manier zijn om Firefox-extensies te ontwikkelen, en worden andere systemen niet meer ondersteund.

- -

Als u ideeën of vragen hebt, of hulp nodig hebt bij het migreren van een verouderde add-on naar WebExtensions-API’s, kunt u ons bereiken op de dev-addons-mailinglijst of in #extdev op IRC.

- -

Wat volgt?

- - diff --git a/files/nl/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/nl/mozilla/add-ons/webextensions/what_are_webextensions/index.html new file mode 100644 index 0000000000..d404228574 --- /dev/null +++ b/files/nl/mozilla/add-ons/webextensions/what_are_webextensions/index.html @@ -0,0 +1,24 @@ +--- +title: Wat zijn extensies? +slug: Mozilla/Add-ons/WebExtensions/Wat_zijn_WebExtensions +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +--- +
{{AddonSidebar}}
+ +

Extensies zijn stukjes code die de functionaliteit van een webbrowser aanpassen. Deze worden geschreven door gebruik te maken van standaard webtechnologieën - JavaScript, HTML en CSS - plus een aantal specifieke JavaScript-API’s. Naast andere dingen kunnen extensies nieuwe functies aan de browser toevoegen of de vormgeving of inhoud van bepaalde websites wijzigen.

+ +

Extensies voor Firefox worden gebouwd via WebExtensions-API’s, een browseronafhankelijk systeem voor het ontwikkelen van extensies. De API is in grote mate compatibel met de extensie-API die door Google Chrome en Opera wordt ondersteund. Extensies die voor deze browsers zijn gemaakt, zullen in de meeste gevallen met slechts enkele aanpassingen in Firefox of Microsoft Edge werken. De API is ook volledig compatibel met multiprocess-Firefox.

+ +

In het verleden kon u Firefox-extensies ontwikkelen via één van drie verschillende systemen: XUL/XPCOM-overlays, ‘bootstrapped’ extensies, of de Add-on-SDK. Aan het einde van november 2017 zullen WebExtensions-API’s de enige manier zijn om Firefox-extensies te ontwikkelen, en worden andere systemen niet meer ondersteund.

+ +

Als u ideeën of vragen hebt, of hulp nodig hebt bij het migreren van een verouderde add-on naar WebExtensions-API’s, kunt u ons bereiken op de dev-addons-mailinglijst of in #extdev op IRC.

+ +

Wat volgt?

+ + diff --git a/files/nl/mozilla/developer_guide/dus_je_hebt_firefox_net_gebuild/index.html b/files/nl/mozilla/developer_guide/dus_je_hebt_firefox_net_gebuild/index.html deleted file mode 100644 index 675134790e..0000000000 --- a/files/nl/mozilla/developer_guide/dus_je_hebt_firefox_net_gebuild/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Dus je hebt Firefox net gebuild -slug: Mozilla/Developer_guide/Dus_je_hebt_Firefox_net_gebuild -translation_of: Mozilla/Developer_guide/So_you_just_built_Firefox ---- -

Een link naar deze pagina zal worden weergegeven na iedere succesvolle build van Firefox. Ze zou moeten nuttige volgende stappen bevatten, zoals hoe je de software test, je build verpakt en dergelijke. Probeer de inhoud op deze pagina bondig te houden en plaats gedetailleerde info op de pagina's waar je naar linkt. Het doelpubliek van deze pagina zijn de mensen die Firefox net voor de eerste keer gebuild hebben.

-

Enkele nuttige links:

-

De tests uitvoeren

-

Debug

-

Rapporteer een bug

diff --git a/files/nl/mozilla/developer_guide/so_you_just_built_firefox/index.html b/files/nl/mozilla/developer_guide/so_you_just_built_firefox/index.html new file mode 100644 index 0000000000..675134790e --- /dev/null +++ b/files/nl/mozilla/developer_guide/so_you_just_built_firefox/index.html @@ -0,0 +1,10 @@ +--- +title: Dus je hebt Firefox net gebuild +slug: Mozilla/Developer_guide/Dus_je_hebt_Firefox_net_gebuild +translation_of: Mozilla/Developer_guide/So_you_just_built_Firefox +--- +

Een link naar deze pagina zal worden weergegeven na iedere succesvolle build van Firefox. Ze zou moeten nuttige volgende stappen bevatten, zoals hoe je de software test, je build verpakt en dergelijke. Probeer de inhoud op deze pagina bondig te houden en plaats gedetailleerde info op de pagina's waar je naar linkt. Het doelpubliek van deze pagina zijn de mensen die Firefox net voor de eerste keer gebuild hebben.

+

Enkele nuttige links:

+

De tests uitvoeren

+

Debug

+

Rapporteer een bug

diff --git a/files/nl/mozilla/firefox/releases/1.5/index.html b/files/nl/mozilla/firefox/releases/1.5/index.html new file mode 100644 index 0000000000..ad0bcb92a1 --- /dev/null +++ b/files/nl/mozilla/firefox/releases/1.5/index.html @@ -0,0 +1,157 @@ +--- +title: Firefox 1.5 voor ontwikkelaars +slug: Firefox_1.5_voor_ontwikkelaars +tags: + - CSS + - DOM + - Extensions + - HTML + - JavaScript + - RDF + - SVG + - Web Development + - Web Standards + - XML + - XML Web Services + - XSLT + - XUL +translation_of: Mozilla/Firefox/Releases/1.5 +--- +
{{FirefoxSidebar}}

 

+ +

Firefox 1.5 RC 3 (Deer Park)

+ +

De laatste uitgave in de Firefox 1.5 product ontwikkelings cyclus, gericht op website-ontwikkelaren en extensie auteurs, Firefox 1.5 RC 3, gebaseerd op de Gecko 1.8 processor, verbetert al het beste in standaarden ondersteuning, en zorgt voor nieuwe capaciteiten om de nieuwe generatie web-applicaties mogelijk te maken. Firefox 1.5 zal verbeterde ondersteuning voor CSS2 en CSS3, APIs voor scriptbare en programeerbare 2D beelden dmv. SVG 1.1 en <canvas>, XForms en XML events, samen met nog veel meer DHTML, JavaScript en DOM verbeteringen.

+ +

Firefox 1.5 RC 3 is beschikbaar op: http://www.mozilla.org/projects/firefox/

+ +

Ontwikkelaar Hulpmiddelen

+ +

Vescheidene hulpmiddelen en browser extensies zijn beschikbaar om ontwikkelaars te helpen om Firefox 1.5 te ondersteunen.

+ + + +

Let op: Sommige extensies, zoals JavaScript Debugger (Venkman), ondersteunen Firefox 1.5 Beta niet op dit moment en worden automatisch buiten werking gezet.

+ +

Overzicht

+ +

Sommige van de nieuwe functies in Firefox 1.5:

+ +

Web site en applicatie ontwikkelaars

+ +

Zie Wat Is Er Nieuw In Deer Park Alpha

+ +
+
SVG In XHTML Introductie 
+
Leer hoe je SVG in XHTML pagina's gebruikt en hoe je JavaScript en CSS gebruikt om het plaatje op dezelfde manier te manipuleren als dat je zou doen met normaal XHTML.
+
+ +
+
Beelden maken met Canvas 
+
Leer over de nieuwe <canvas> tag en hoe je grafieken en andere objecten tekent in Firefox.
+
+ +
+
CSS3 Columns 
+
Leer over de nieuwe ondersteuning voor automatisch multi-kolom text layout zoals voorgesteld voor CSS3.
+
+ +
+
Gebruik maken van Firefox 1.5 caching 
+
Leer over bfcache en hoe het voor- en achteruit navigeren sneller maakt.
+
+ +

XUL en Extensie Ontwikkelaars

+ +
+
Een Extensie Bouwen 
+
Dit document zal je leiden door de stappen die nodig zijn om een basis extensie te bouwen voor Firefox. Zie ook: nog een document op het MozillaZine knowledge base (Engels), dat demonstreert hoe je de nieuwe functies van de Extensie Manager in Firefox 1.5 dat het maken van een nieuwe extensie nog makkelijker maakt.
+
+ +
+
XPCNativeWrapper 
+
XPCNativeWrapper is een manier om een object zo in te pakken dat het velig is om toegang tot te krijgen van bevoorrecht code. Het kan gebruikt worden in alle Firefox versies, al is het gedrag iets veranderd beginnend vanaf Firefox 1.5 (Gecko 1.8).
+
+ +
+
Voorkeuren Systeem 
+
Leer meer over de nieuwe 'widgets' die je makkelijker en met minder JavaScript code een Opties scherm kan laten maken.
+
+ +
+
Internationale Tekens in XUL JavaScript 
+
XUL JavaScript bestanden kunnen nu niet-ASCII characters bevatten.
+
+ +
+
Tree API veranderingen 
+
De interface voor de toegang tot XUL <tree> elementen zijn veranderd. Zie http://mozdev.org/pipermail/project_...il/002131.html (Engels) voor een lijst van veranderingen.
+
+ +

Nieuwe Eindgebruiker Functies

+ +

Gebruiker Ervaring

+ + + +

Veiligheid en Privacy

+ + + +

Ondersteuning voor open Web standaarden

+ +

Firefox support for Web standards continues to lead the industry with consistent cross-platform implementations for:

+ +

Firefox ondersteuning voor Web standaarden zet voort om de industrie te leiden met consistente multi-platform implementaties voor:

+ + + +

Firefox 1.5 supports the following data transport protocols (HTTP, FTP, SSL, TLS, and others), multilingual character data (Unicode), graphics (GIF, JPEG, PNG, SVG, and others) and the latest version of the world's most popular scripting language, JavaScript 1.6.

+ +

Firefox 1.5 ondersteunt data transport protocols (HTTP, FTP, SSL, TLS en meer), meertalig teken data (Unicode), grafische media (GIF, JPEG, PNG, SVG en meer) en de laatste versie van de meest populaire code taal, JavaScript 1.6.

+ +

Veranderingen sinds Firefox 1.0

+ +

Many changes have been introduced into Firefox since it was first released on November 9, 2004. Firefox has progressed with many new features and bug fixes. The Deer Park and Firefox release-notes are excellent sources of information about changes in each release of Firefox.

+ +

Veel veranderingen zijn geintroduceerd in Firefox sinds het voor het eerst publiekelijk is uitgegeven op 9 november, 2004. Firefox is verbeterd met veel nieuwe functies en bug fixes. De Deer Park en Firefox uitgave details zijn een uitstekende bron van informatie over de veranderingen in elke uitgave van Firefox.

+ + + +

{{ languages( { "en": "en/Firefox_1.5_for_Developers", "es": "es/Firefox_1.5_para_Desarrolladores", "fr": "fr/Firefox_1.5_pour_les_d\u00e9veloppeurs", "ja": "ja/Firefox_1.5_for_Developers", "pl": "pl/Firefox_1.5_dla_programist\u00f3w", "pt": "pt/Firefox_1.5_para_Desenvolvedores" } ) }}

diff --git a/files/nl/mozilla_implementeren/index.html b/files/nl/mozilla_implementeren/index.html deleted file mode 100644 index e14fbfc70d..0000000000 --- a/files/nl/mozilla_implementeren/index.html +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: Mozilla Implementeren -slug: Mozilla_Implementeren ---- -

Mozilla Implementeren

-

Gecko laat ontwikkelaars van 3e partij software toe om dezelfde technologie te gebruiken als in Mozilla. Dat wil zeggen dat u een webbrowser kan implementeren in een 3e partij applicatie, kanalen en streams kan openen op het netwerk, door het DOM kan wandelen enzovoort. U kan zelfs hele nieuwe applicaties maken -

diff --git a/files/nl/orphaned/mdn/community/conversations/index.html b/files/nl/orphaned/mdn/community/conversations/index.html new file mode 100644 index 0000000000..e1319c3259 --- /dev/null +++ b/files/nl/orphaned/mdn/community/conversations/index.html @@ -0,0 +1,60 @@ +--- +title: MDN-gemeenschapsgesprekken +slug: MDN/Community/Conversations +tags: + - Gemeenschap + - Gids + - MDN Meta +translation_of: MDN/Community/Conversations +--- +
{{MDNSidebar}}

Het ‘werk’ van MDN gebeurt op de MDN-website, maar de ‘gemeenschap’ bestaat ook door middel van (asynchrone) discussie en (synchrone) online chat en bijeenkomsten.

+ +

Asynchrone discussies

+ +

Voor het delen van informatie en het hebben van lopende discussies heeft MDN zijn eigen categorie (‘MDN’) op het Discourse-forum van Mozilla. Deze categorie kan worden gebruikt voor alle onderwerpen die zijn gerelateerd aan MDN, zoals de creatie, vertaling en het onderhoud van documentatie-inhoud, de ontwikkeling van het MDN-platform en zaken als plannen, doelen stellen en het bewaken van de voortgang.

+ + + +

Historische archieven

+ +

Voor juni 2017 vonden MDN-gerelateerde discussies plaats in mailinglijsten die toegankelijk werden gemaakt en werden gearchiveerd met Google-groepen. Als u in deze afgelopen discussies wil zoeken, kunt u kijken naar de Google-groepen die met de oude mailinglijsten corresponderen. (Ja, we weten dat deze namen overlappen en verwarrend zijn. Historisch ongeluk. Sorry hiervoor.)

+ +
+
mozilla.dev.mdc alias dev-mdc
+
Deze lijst was voor discussies over documentatie-inhoud op MDN.
+
mozilla.dev.mdn alias dev-mdn
+
Deze lijst was voor ontwikkelwerk van het onderliggende platform van MDN, genaamd Kuma.
+
mozilla.mdn alias mdn@
+
Dit forum was voor discussies over planning en prioritering op een hoger niveau, voor de MDN-website en andere gerelateerde initiatieven.
+
+ +

 

+ +

Chat in IRC

+ +

 

+ +

Internet Relay Chat (IRC) is de methode waaraan we de voorkeur geven voor dagelijkse chat en real-time discussies tussen gemeenschapsleden. We gebruiken een aantal kanalen op de server irc.mozilla.org voor discussies die aan MDN zijn gerelateerd.

+ +
+
#mdn
+
Dit kanaal is ons voornaamste kanaal voor het bespreken van de inhoud van MDN. We praten over schrijven, het organiseren van inhoud, enzovoort. We hebben hier ook onze ‘koffieautomaatgesprekken’ – het is een manier waarop de gemeenschap contact kan houden en kan samenkomen. Dit is ook de plek om over andere aspecten van MDN te praten (anders dan de ontwikkeling van het platform), zoals Demo Studio, profielen, enzovoort.
+
#mdndev
+
In dit kanaal komen de leden van ons ontwikkelteam – de mensen die de code schrijven waarmee MDN werkt – samen en bespreken ze hun dagelijkse werk. U bent welkom om deel te nemen en mee te doen met het ontwikkelen of vragen te stellen over problemen met de software die u ziet.
+
+ +

Deze kanalen zijn waarschijnlijk het meest actief tijdens doordeweekse dagen in Noord-Amerika.

+ +

Het kan zijn dat u meer over IRC wilt leren en een installeerbare IRC-client zoals ChatZilla wilt gebruiken. Het is geïmplementeerd als een add-on voor Firefox, waardoor het makkelijk is te installeren en gebruiken. Als u niet bekend bent met IRC, is deelnemen door gebruik van een webgebaseerde IRC-client zoals Mibbit een makkelijke manier. Hier vindt u directe koppelingen naar de kanalen #mdn en #mdndev op Mibbit.

+ +

Neem deel aan onze bijeenkomsten (en andere evenementen)

+ +

Het MDN-team houdt regelmatig een aantal bijeenkomsten dat open is voor de MDN-gemeenschap. Bekijk de pagina MDN-bijeenkomsten op de wiki van Mozilla voor details over het rooster, de agenda’s en notulen, en informatie over hoe u kunt deelnemen.

+ +

Bekijk de evenementenkalender van MDN voor deze en andere bijeenkomsten, lokale bijeenkomsten en andere evenementen. De terugkerende bijeenkomsten worden samengevat op de wiki-pagina MDN-bijeenkomsten.

+ +

Als u een bijeenkomst ziet die plaatsvindt in het kanaal ‘mdn’ op uw Vidyo-videoconferentiesysteem, kunt u het gesprek bijwonen via internet.

diff --git a/files/nl/orphaned/mdn/community/index.html b/files/nl/orphaned/mdn/community/index.html new file mode 100644 index 0000000000..7856783b88 --- /dev/null +++ b/files/nl/orphaned/mdn/community/index.html @@ -0,0 +1,55 @@ +--- +title: Deelnemen aan de MDN-gemeenschap +slug: MDN/Community +tags: + - Community + - Gemeenschap + - Handleiding + - Landing + - MDN Meta +translation_of: MDN/Community +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/nl/docs/MDN")}}
+ +
+

MDN Web Docs is meer dan een wiki: het is een gemeenschap van ontwikkelaars die samenwerken om MDN een uitstekende bron te maken voor ontwikkelaars die open-source technologieën gebruiken.

+
+ +

We zouden graag zien dat u aan MDN bijdraagt, maar we zien nog liever dat u aan de MDN-gemeenschap deelneemt. U kunt als volgt verbonden raken, in drie eenvoudige stappen:

+ +
    +
  1. Maak een MDN-account aan.
    2. +
  2. Neem deel aan conversaties.
    3. +
  3. Volg wat er gebeurt.
    4. +
+ +

Hoe de gemeenschap werkt

+ +

De volgende artikelen beschrijven een aantal mogelijkheden in de gemeenschap van MDN.

+ +
+
+
+
Rollen binnen de gemeenschap
+
Er is een aantal rollen binnen de MDN-gemeenschap dat bepaalde verantwoordelijkheden met zich meedraagt.
+
Doc sprints
+
Dit is een handleiding voor het organiseren van een documentatiesprint. Deze bevat advies en tips van mensen die docsprints hebben georganiseerd, met de bedoeling om u er ook een te helpen organiseren.
+
Blijf op de hoogte
+
MDN wordt u aangeboden door de Mozilla Developer Network Community. Hier vindt u wat manieren waarop we informatie delen over wat we doen.
+
+ +
+
+
+ +
+
+
MDN gemeenschapsdiscussies
+
Het ‘werk’ van MDN vindt plaats op de website van MDN, maar de ‘gemeenschap’ bestaat ook uit (asynchrone) discussies en (synchrone) onlinechat en -meetings.
+
Werken in de gemeenschap
+
Een groot deel van het op grote schaal bijdragen aan MDN documentatie is weten hoe u als onderdeel van de MDN-gemeenschap kunt werken. Dit artikel biedt tips om de communicatie tussen en naar andere schrijvers en ontwikkelteams zo efficiënt mogelijk te laten verlopen.
+
+
+
diff --git a/files/nl/orphaned/mdn/community/whats_happening/index.html b/files/nl/orphaned/mdn/community/whats_happening/index.html new file mode 100644 index 0000000000..d3daf3b9df --- /dev/null +++ b/files/nl/orphaned/mdn/community/whats_happening/index.html @@ -0,0 +1,40 @@ +--- +title: Blijf op de hoogte +slug: MDN/Community/Whats_happening +tags: + - Beginner + - Gemeenschap + - Gids + - MDN Meta +translation_of: MDN/Community/Whats_happening +--- +
{{MDNSidebar}}

MDN wordt mede mogelijk gemaakt door de MDN-gemeenschap. Hier is een aantal manieren waarop we informatie delen over wat we doen.

+ +

Blogs

+ +
+
Mozilla Hacks
+
Nieuws over en uitgebreide dekking van web- en Mozillatechnologieën en functies.
+
Engaging Developers
+
Het promoten van activiteiten en discussies omtrent de gemeenschap die betrokken is bij MDN van Mozilla.
+
+ +

Streams of ephemera

+ + + +

Statusboards en dashboards

+ +

Bekijk de documentatiestatuspagina's om te zien wat er gebeurt over de volledige breedte van de MDN-inhoud. U kunt zien welke artikelen moeten worden geschreven of bijgewerkt, welke onderwerpen de meeste hulp nodig hebben, en nog veel meer.

+ +

MDN-bijeenkomsten

+ +

Er is een aantal vaste bijeenkomsten voor het bijhouden en delen van voortgang binnen verschillende MDN-gerelateerde projecten en processen. Ze staan beschreven op de wikipagina voor MDN-bijeenkomsten.

+ +

Om een idee te krijgen van wat er gebeurt, is de MDN gemeenschapsbijeenkomst de beste bijeenkomst om bij te wonen. Deze bijeenkomst vindt elke twee weken plaats op woensdag, 10:00 US Pacific time (UTC-0800 Oktober-Maart, UTC-0700 in Maart-Oktober), in het #mdn IRC-kanaal. Bekijk de wikipagina voor MDN-bijeenkomsten voor agenda's en notulen van de vorige bijeenkomsten.

+ +

De agenda voor openbare MDN-evenementen bevat gemeenschapsbijeenkomsten van MDN, doc sprints en andere MDN-gerelateerde evenementen. Als u een bijeenkomst ziet die plaatsvindt in het "mdn"-kanaal op uw Vidyo videoconferentiesysteem kunt u het gesprek bijwonen via internet.

diff --git a/files/nl/orphaned/mdn/community/working_in_community/index.html b/files/nl/orphaned/mdn/community/working_in_community/index.html new file mode 100644 index 0000000000..a2256cf365 --- /dev/null +++ b/files/nl/orphaned/mdn/community/working_in_community/index.html @@ -0,0 +1,102 @@ +--- +title: Samenwerken in een community +slug: MDN/Community/Samenwerken_in_een_community +translation_of: MDN/Community/Working_in_community +--- +
{{MDNSidebar}}
+ +

Een groot onderdeel van de bijdrages van MDN documentaties op grote schaal, is het samenwerken en de communicatie in een community. Dit artikel geeft tips om interacties tussen schrijvers en ontwikkelteams beter te maken.

+ +

Algemene gedragscodes

+ +

Hier zijn een paar algemene gedragscodes wanneer men werkt in de Mozilla Community.

+ + + +

Be tactful

+ +

Always be tactful and respectful when communicating with others.

+ +

Politely pointing out mistakes

+ +

If your purpose in contacting someone is to ask them to do something differently, or to point out a mistake they've been making (especially if they repeatedly do it), start your message with a positive comment. This softens the blow, so to speak, and it demonstrates that you're trying to be helpful, rather than setting you up as the  bad guy.

+ +

For example, if a new contributor has been creating lots of pages without tags, and you'd like to point out this problem, your message to them might look like this (the stuff you'd need to change for each case us underlined):

+ +
+

Hi, MrBigglesworth, I've been noticing your contributions to the Wormhole API documentation, and it's fantastic to have your help! I particularly like the way you balanced your level of detail with readability. That said, though, you could make these articles even better and more helpful if you added the correct tags to the pages as you go.

+ +

See the MDN tagging guide (https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Tag) for details.

+ +

Thanks again, and I look forward to your future contributions!

+
+ +

Sharing knowledge

+ +

As you participate in the MDN project, it's useful to know what's going on, and to interact with other members of our community. By talking with others in our community, you can get—and share—ideas, status updates, and more. We also have tools and informational resources that can help you know what's being done, by whom.

+ +

Communication channels

+ +

There are several ways you can engage with community members (either developers or writers), each of which has some of its own particular rules of etiquette.

+ +

Bugzilla

+ +

When writing documentation to cover changes implemented as a result of a bug in Bugzilla, you'll often interact with people involved in those bugs. Be sure to keep the Bugzilla Etiquette guide in mind at all times!

+ +

Email

+ +

Sometimes, a private email exchange between you and one or more other people is the way to go, if you have their email address.

+ +
+

Note: As a general rule, if someone has posted their email address on documents about the technology you're documenting, has given you their email address personally, or generally has a well-known email address, email is an acceptable "first contact" approach. If you have to dig for it, you probably should try to get permission in IRC or a mailing list first, unless you've exhausted all other attempts at getting in touch.

+
+ +

Content status tools

+ +

We have several useful tools that provide information about the status of documentation content.

+ +
+
Revision dashboard
+
The revision dashboard provides a fantastic tool to review changes made to MDN content. You can see recent history, choose a range of time to view, and filter based on things like locale, contributor's name, and topic. Once you're looking at a set of revisions, you can view the changes made in each revision, quickly open the page, see a full history, or even revert the changes (if you have those privileges).
+
Documentation status overview
+
Our documentation status overview page provides a list of all the areas of MDN that have been configured for status tracking, with information about how many pages therein need different types of work done. Click through to a particular topic area to see detailed lists of content that needs work, such as pages that have no tags, or are tagged with indicators that certain types of work need to be done. You can even see lists of pages that haven't been updated in a long time and may be out of date, as well as a list of bugs that have been flagged as impacting the documentation in that area.
+
Documentation project plans
+
We have a number of writing projects that are in the planning stages, or are large and ongoing, for which we have written planning documents to help us keep track of what we need to get done.
+
MDN Trello board
+
The MDN staff writers use a Trello board to manage current and future documentation projects. You can take a look to see what we're doing and how it's going, and you can see what projects we'd like to see happen soon. Some of those will be taken on by staff writers, but you should feel free to take one over if you like! For more information about how this board is used and how you can use it, you can read this page.
+
+ +

The development community

+ +

Possibly the most important relationships to develop and maintain, as a member of the MDN writing community, are those you develop and sustain with the developers. They create the software we're developing, but they're also the most useful source of information we have. It's crucial that we maintain good relations with developers—the more they like you, the more likely they are to answer your questions quickly, accurately, and thoroughly!

+ +

In addition, you represent the MDN writing community. Please help ensure we keep our excellent working relationship with the dev team by making every interaction they have with the writing team be a good one.

+ +

On a related note, a great way to find the right person to talk to is to look at the module owners lists.

+ +

The writing community

+ +

The writing community is a large one. While the number of extremely frequent, or large-scale contributors is relatively small, there are many dozens or hundreds of people who contribute at least now and then. Fortunately, these are by and large awesome people with a genuine love of the Web, Mozilla, and/or documentation, and interacting with them is almost always pretty easy.

+ +

See the article Join the community for more information about the MDN community.

+ +

The most frequent place you'll directly interact with other writers is in the {{IRCLink("mdn")}} channel on IRC. This channel is specifically reserved for discussing documentation. For IRC-specific etiquette tips, see the Mozilla Support article "Getting Started with IRC." You'll also have discussions with us on the MDN discussion forum. In general, IRC tends to be used for quick, more in-person-like discussions, while the mailing list is typically used for longer-duration conversation.

+ +

By keeping in mind the {{anch("General etiquette guidelines")}}, you'll find that usually things go very smoothly.

+ +

Zie ook

+ + diff --git a/files/nl/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html b/files/nl/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html new file mode 100644 index 0000000000..cc50327400 --- /dev/null +++ b/files/nl/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html @@ -0,0 +1,48 @@ +--- +title: Een account op MDN aanmaken +slug: MDN/Contribute/Howto/Aanmaken_MDN_account +tags: + - Aanmelden + - Beginner + - Documentație + - Gids + - GitHub + - Profiel +translation_of: MDN/Contribute/Howto/Create_an_MDN_account +--- +
{{MDNSidebar}}

Om wijzigingen aan te brengen in de inhoud van MDN is een MDN-profiel nodig. Voor het lezen van en zoeken in de MDN-documentatie hebt u geen profiel nodig. Deze gids helpt u om uw MDN-profiel aan te maken.

+ +
+
+

Waarom heeft MDN mijn e-mailadres nodig?

+ +

Het e-mailadres wordt gebruik om uw account te herstellen. Indien nodig kan het beheer van MDN contact met u opnemen over uw account of uw activiteit op de site.

+ +

Daarnaast kunt u zich aanmelden voor notificaties (bijvoorbeeld wanneer bepaalde pagina's worden aangepast) en berichten (bijvoorbeeld als u zich hebt aangemeld voor het beta-testteam en u nieuwe e-mails wilt ontvangen over nieuwe functies die moeten worden getest).

+ +

Het e-mailadres wordt nooit getoond op MDN en wordt alleen gebruikt overeenkomstig ons privacybeleid.

+ +

 

+ +
U ontvangt geen berichten of notificaties van MDN als u inlogt op MDN via GitHub en u daar een "noreply"-e-mailadres gebruikt.
+
+
+ +
    +
  1. Op MDN bevindt zich bovenaan elke pagina een knop Aanmelden met. Door de muisaanwijzer erboven te houden (of door hem aan te raken op een mobiel toestel) verschijnt er een lijst met authenticatiemethoden die worden ondersteund door MDN.
    2. +
  2. Selecteer een methode om in te loggen. Op dit moment is alleen GitHub beschikbaar. Als u GitHub selecteert, zal een link naar uw profiel op GitHub worden weergegeven op uw openbare profielpagina op MDN.
    3. +
  3. Volg de aanwijzingen van GitHub om uw account te verbinden met MDN.
    4. +
  4. Als de authenticatiedienst u laat terugkeren naar MDN, wordt u gevraagd om een gebruikersnaam en een e-mailadres in te voeren. De gebruikersnaam wordt openbaar getoond om u te prijzen voor uw werk. Gebruik geen e-mailadres als gebruikersnaam.
    5. +
  5. Klik Creëer mijn MDN-profiel.
    6. +
  6. Als het e-mailadres dat u hebt ingevoerd bij stap 4 niet hetzelfde is als het e-mailadres dat u gebruikt bij de authenticatiedienst, controleer dan uw e-mail en klik op de link in de bevestigings-e-mail die we u sturen.
    7. +
+ +

Dat is alles! U hebt nu een MDN account en kunt onmiddellijk beginnen met het bewerken van pagina's!

+ +

U kunt bovenaan elke pagina van MDN klikken op uw naam om uw openbaar profiel te zien. Daar vandaan kunt u op Bewerken klikken om uw profiel te veranderen of iets toe te voegen aan uw profiel..

+ +

 

+ +
+

Nieuwe gebruikersnamen mogen geen spaties of het karakter "@" bevatten. Denk eraan dat uw gebruikersnaam openbaar wordt getoond om u te prijzen voor uw werk.

+
diff --git a/files/nl/orphaned/mdn/contribute/howto/do_a_technical_review/index.html b/files/nl/orphaned/mdn/contribute/howto/do_a_technical_review/index.html new file mode 100644 index 0000000000..119e15a9d2 --- /dev/null +++ b/files/nl/orphaned/mdn/contribute/howto/do_a_technical_review/index.html @@ -0,0 +1,56 @@ +--- +title: Een technische beoordeling geven +slug: MDN/Contribute/Howto/Een_technische_beoordeling_maken +tags: + - Beoordeling + - Documentație + - Gids + - MDN Meta +translation_of: MDN/Contribute/Howto/Do_a_technical_review +--- +
{{MDNSidebar}}
{{IncludeSubnav("/nl/docs/MDN")}}
+ +

Een technische beoordeling bestaat uit het beoordelen van de technische nauwkeurigheid en volledigheid van een artikel, en het corrigeren hiervan als het nodig is. Als een schrijver van een artikel iemand anders wil vragen om de technische inhoud van een artikel te controleren, klikt diegene op het vakje met de naam 'Technische beoordeling' tijdens het bewerken. Vaak neemt een schrijver contact op met een specifieke technicus om de tekst te laten beoordelen, maar iedereen met technische kennis kan dit doen.

+ +

Dit artikel beschrijft hoe een technische beoordeling kan worden gedaan, die helpt te zorgen dat de inhoud op MDN nauwkeurig is.

+ +
+
Wat is de taak?
+
Het beoordelen en corrigeren van artikelen op technische nauwkeurigheid en volledigheid.
+
Waar moet dit worden gedaan?
+
In specifieke artikelen die zijn gemarkeerd als het behoeven van een technische beoordeling.
+
Wat moet u weten om de taak te kunnen uitvoeren?
+
+
    +
  • Vakkundige kennis over het onderwerp van het artikel dat u beoordeelt. Als het lezen van het artikel u geen nieuwe kennis bijbrengt, kunt u zichzelf beschouwen als een expert.
    • +
  • Hoe u een wiki-artikel op MDN kunt bewerken.
    • +
+
+
Stappenplan
+
+
    +
  1. Kies een artikel om te beoordelen: +
      +
    1. Ga naar de lijst met pagina's die een technische beoordeling nodig hebben. Op deze lijst staan alle pagina's waar technische beoordelingen voor zijn aangevraagd.
      2. +
    2. Kies een pagina met een onderwerp waar u bekend mee bent.
      3. +
    3. Klik op het artikel om de pagina te laden.
      4. +
    +
    2. +
  2. Lees het artikel, waarbij u goed let op de technische details: Is het artikel correct? Mist er iets? Aarzel niet om naar een andere pagina te gaan als de eerste die u koos niet bij u past.
    3. +
  3. Als er geen fouten zijn hoeft u het artikel niet te bewerken om het als beoordeeld te markeren. Zoek naar het vak 'snelle beoordeling' aan de linkerkant van de pagina. Dit gele vak geeft alle beoordelingen weer die in behandeling zijn. Hier kunt u een beoordeling als voltooid markeren. Als er om een technische beoordeling is gevraagd, ziet dat er als volgt uit:
    + Screenshot van een vak aan de linkerkant van de pagina, waarin de beoordelingen staan die moeten worden uitgevoerd en waar markeringen kunnen worden gewijzigd.
    4. +
  4. Verwijder de selectie van het vakje Technisch en klik op Opslaan.
    5. +
  5. Als u fouten vindt die moeten worden gecorrigeerd is het ook mogelijk om de status van de beoordelingsaanvraag te wijzigen in de editor. U kunt dat als volgt doen: +
      +
    1. Klik op de knop Bewerken bovenaan de pagina om de pagina te bewerken. Hiermee gaat u naar de editor van MDN.
      2. +
    2. Herstel alle informatie die niet correct is, en/of voeg belangrijke informatie toe die mist.
      3. +
    3. Vul een revisieopmerking onderaan het artikel. Dit is een kort bericht dat beschrijft wat u hebt gedaan, zoals 'Technische beoordeling voltooid.' Als u informatie hebt gecorrigeerd, kunt u dat noemen in uw opmerking, bijvoorbeeld 'Technische beoordeling en parameterbeschrijvingen hersteld.' Hierdoor weten andere medewerkers en websitebewerkers wat u hebt gewijzigd en waarom. U kunt ook noemen of er specifieke stukken waren waarvoor u zich niet deskundig genoeg voelde om het te beoordelen.
      4. +
    4. Verwijder de selectie van het vakje Technisch onder Beoordeling nodig? onder het gedeelte van de pagina waarin u een revisieopmerking kunt schrijven.
      5. +
    5. Klik op de knop Publiceren.
      6. +
    +
    6. +
+ +

Gefeliciteerd! U hebt uw eerste technische beoordeling gedaan! Bedankt voor uw hulp!

+
+
diff --git a/files/nl/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html b/files/nl/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html new file mode 100644 index 0000000000..38785c1f26 --- /dev/null +++ b/files/nl/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html @@ -0,0 +1,57 @@ +--- +title: Een redactionele beoordeling geven +slug: MDN/Contribute/Howto/Een_redactionele_beoordeling_geven +tags: + - Documentație + - Gids + - Hoe kan ik + - MDN-Meta + - Redactionele beoordeling +translation_of: MDN/Contribute/Howto/Do_an_editorial_review +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/nl/docs/MDN")}}
+ +

Redactionele beoordelingen bestaan uit het corrigeren van typefouten en spelling, grammatica, gebruik of tekstuele fouten in een artikel. U hoeft geen taalexpert te zijn om waardevolle bijdragen te doen aan de technische documentatie van MDN, maar artikelen hebben nog steeds controlewerk en moeten worden proefgelezen. Dit wordt in een redactionele beoordeling gedaan.

+ +

Dit artikel beschrijft hoe u een redactionele beoordeling kunt geven, wat ervoor zorgt dat de inhoud op MDN accuraat is.

+ +
+
Wat houdt de taak in?
+
Controlewerk (‘copy-editing’) en proeflezen (‘proof-reading’) van artikelen die zijn gemarkeerd als artikelen die een redactionele beoordeling nodig hebben.
+
Waar dient dit te worden gedaan?
+
Binnen bepaalde artikelen die zijn gemarkeerd als artikelen die een redactionele beoordeling nodig hebben.
+
Wat dient u te weten om de taak te vervullen?
+
U dient goede vaardigheden op het gebied van Nederlandse grammatica en spelling te hebben. Een redactionele beoordeling zorgt ervoor dat de grammatica, spelling en het woordgebruik juist en logisch zijn, en dat de MDN-schrijfstijlgids wordt gevolgd.
+
Wat zijn de stappen om dit te doen?
+
+
    +
  1. Kies een artikel voor beoordeling: +
      +
    1. Ga naar de lijst van artikelen die een redactionele beoordeling nodig hebben. Deze vermeldt alle pagina’s waarvoor een redactionele beoordeling is aangevraagd.
      2. +
    2. Klik op het artikel om de pagina te laden.
      + Merk op: Deze lijst wordt automatisch maar niet regelmatig gegenereerd, waardoor er artikelen in de lijst verschijnen die geen redactionele beoordeling meer nodig hebben. Als het artikel dat u hebt geselecteerd geen vak weergeeft waarin 'Dit artikel heeft een redactionele beoordeling nodig' staat, sla het artikel dan over en kies een andere.
      3. +
    3. Klik op de artikelkoppeling om de pagina te laden.
      4. +
    +
    2. +
  2. Lees het artikel en let goed op typefouten, spelling, grammatica of gebruiksfouten. Aarzel niet om naar een andere pagina te gaan als de eerste die u koos niet geschikt voor u is.
    3. +
  3. Als er geen fouten zijn, hoeft u het artikel niet te bewerken om het als beoordeeld te markeren. Zoek naar het veld voor ‘snelle beoordeling’ in de linkerzijbalk van de pagina:
    + Schermafbeelding van het zijbalkveld voor het beoordelingsverzoek
    4. +
  4. Deselecteer het vakje Redactioneel en klik op Opslaan.
    5. +
  5. Als u fouten vindt die dienen te worden gecorrigeerd: +
      +
    1. Klik boven in de pagina op de knop Bewerken; dit brengt u naar de MDN-editor.
      2. +
    2. Corrigeer eventuele typefouten en spelling, grammatica of gebruiksfouten die u tegenkomt. U hoeft niet alles te corrigeren om nuttig te zijn, maar zorg ervoor dat het verzoek voor redactionele beoordeling actief blijft als u niet helemaal zeker weet of u een volledige controle van het hele artikel hebt gedaan.
      3. +
    3. Voer onder in het artikel een Revisieopmerking in; zoiets als ‘Redactionele beoordeling: typefouten, grammatica en spelling gecorrigeerd’. Dit laat andere medewerkers en website-editors weten wat u hebt gewijzigd en waarom.
      4. +
    4. Deselecteer het vakje Redactioneel onder Beoordeling nodig? Dit bevindt zich net onder de sectie Revisieopmerking van de pagina.
      5. +
    5. Klik op de knop Publiceren.
      6. +
    +
    6. +
+ +
+

Mogelijk zijn uw wijzigingen niet meteen zichtbaar na het opslaan; er kan een vertraging zijn bij het verwerken en opslaan van de pagina.

+
+
+
diff --git a/files/nl/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html b/files/nl/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html new file mode 100644 index 0000000000..ce57acb2f4 --- /dev/null +++ b/files/nl/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html @@ -0,0 +1,74 @@ +--- +title: JavaScript-pagina’s taggen +slug: MDN/Contribute/Howto/Taggen_JavaScript_pagina +tags: + - Guide + - Howto + - JavaScript + - MDN Meta +translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages +--- +
{{MDNSidebar}}

Taggen bestaat uit het toevoegen van meta-informatie aan pagina’s, zodat gerelateerde inhoud kan worden gegroepeerd, bijvoorbeeld in het zoekhulpmiddel.

+ +
+
Waar moet dit worden gedaan?
+
Binnen specifieke JavaScript-gerelateerde pagina’s zonder labels.
+
Wat dient u te weten om de taak uit te voeren?
+
Basiskennis over programmeren met JavaScript, zoals weten wat een methode of een eigenschap is.
+
Wat zijn de stappen om het te doen?
+
+
    +
  1. Kies een van de pagina’s in de lijst hierboven.
    2. +
  2. Klik op de artikelkoppeling om de pagina te laden.
    3. +
  3. Klik zodra de pagina is geladen op de knop BEWERKEN bovenaan het artikel; hierdoor komt u in de MDN-editor.
    4. +
  4. Op zijn minst dient het label JavaScript te worden toegevoegd. Mogelijke andere labels om toe te voegen zijn: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    LabelPagina’s om het op te gebruiken
    Method (Methode)methoden
    Property (Eigenschap)eigenschappen
    prototype (prototype)prototypen
    Object type name (type objectnaam)methoden van een object; String.vanCharCode dient bijvoorbeeld het label String te bevatten.
    ECMAScript6 en Experimental (ECMAScript6 en experimenteel)functies toegevoegd in een nieuwe ECMAScript-versie
    Deprecated (afgeschaft)afgeschafte functies (waarvan het gebruik wordt afgeraden, maar die nog steeds worden ondersteund)
    Obsolete (verouderd)verouderde functies (die niet meer in moderne browsers worden ondersteund)
    others (andere)Zie MDN-labelstandaarden voor andere mogelijke labels die kunnen worden toegepast
    +
    5. +
  5. Sla het artikel op met een opmerking.
    6. +
  6. U bent klaar!
    7. +
+
+
+ +

 

diff --git a/files/nl/orphaned/mdn/contribute/processes/requesting_elevated_privileges/index.html b/files/nl/orphaned/mdn/contribute/processes/requesting_elevated_privileges/index.html new file mode 100644 index 0000000000..f7f085ae5b --- /dev/null +++ b/files/nl/orphaned/mdn/contribute/processes/requesting_elevated_privileges/index.html @@ -0,0 +1,21 @@ +--- +title: Verhoogde bevoegdheden aanvragen +slug: MDN/Contribute/Processes/Verhoogde_bevoegdheden_aanvragen +tags: + - Gids + - MDN Meta + - Processen +translation_of: MDN/Contribute/Processes/Requesting_elevated_privileges +--- +
{{MDNSidebar}}

Voor sommige hulpmiddelen en handelingen op MDN zijn er verhoogde toegangsbevoegdheden nodig, die niet beschikbaar zijn voor normale gebruikers.

+ +

Als u bevoegdheden wilt of nodig hebt voor een hulpmiddel, volg dan de onderstaande stappen:

+ +
    +
  1. Open een Bugzilla-bug, waarin een beschrijving staat van wat u nodig heeft en waarom u het nodig heeft. Zet uw accountnaam op MDN erbij.
    2. +
  2. Zorg ervoor dat u uitleg waarom u voldoet aan de voorwaarden voor het verkrijgen van bevoegdheden, voor elk hulpmiddel waar u bevoegdheden voor aanvraagt. Bekijk hiervoor de 'Voorwaarden voor het verkrijgen van deze bevoegdheid' voor het hulpmiddel of de hulpmiddelen in kwestie.
    3. +
  3. U hebt twee gelijken nodig voor de betreffende tool, die voor u instaan in de bug.
    4. +
  4. Als aan 1-3 zijn voldaan, kan een van de MDN-admins u toegang geven tot het hulpmiddel dat of de hulpmiddelen die u nodig hebt.
    5. +
+ +

Bij misbruik of een aanzienlijk probleem (zoals een recent ontdekte, gevaarlijke bug in het hulpmiddel) kan elke admin op elk moment de toegang tot een tool opschorten.

diff --git a/files/nl/orphaned/mdn/tools/template_editing/index.html b/files/nl/orphaned/mdn/tools/template_editing/index.html new file mode 100644 index 0000000000..51ce66b56b --- /dev/null +++ b/files/nl/orphaned/mdn/tools/template_editing/index.html @@ -0,0 +1,16 @@ +--- +title: Sjablonen bewerken +slug: MDN/Tools/Template_editing +tags: + - Gids + - Hulpmiddelen + - MDN + - MDN Meta + - Paginaniveau + - Privileges + - Rollen(2) +translation_of: MDN/Tools/Template_editing +--- +
{{MDNSidebar}}

Op MDN worden in KumaScript geschreven sjablonen gebruikt om het genereren en aanpassen van inhoud binnen pagina's te automatiseren. Elk sjabloon is een apart bestand in de map macros op de GitHub-repository van KumaScript.

+ +

Iedereen die wikipagina's op MDN bewerkt, kan macro's aanroepen in MDN-artikelen. Daarnaast kan iedereen sjablonen aanmaken en bewerken via de GitHub-repository van KumaScript, waarbij standaard open-source-gewoonten worden gebruikt (fork de repo, maak een branch, maak wijzigingen en stuur een pull-request ter beoordeling). Op dit moment is het sturen van een pull-request de enige manier om vertaalde strings bij te werken in sjablonen die deze strings bevatten.

diff --git a/files/nl/orphaned/mozilla/add-ons/webextensions/porting_a_legacy_firefox_add-on/index.html b/files/nl/orphaned/mozilla/add-ons/webextensions/porting_a_legacy_firefox_add-on/index.html new file mode 100644 index 0000000000..01bce8b60c --- /dev/null +++ b/files/nl/orphaned/mozilla/add-ons/webextensions/porting_a_legacy_firefox_add-on/index.html @@ -0,0 +1,25 @@ +--- +title: Een verouderde Firefox-add-on porteren +slug: Mozilla/Add-ons/WebExtensions/Een_verouderde_Firefox-add-on_porteren +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Porting_a_legacy_Firefox_add-on +--- +
{{AddonSidebar}}
+ +

Als u een add-on voor Firefox hebt ontwikkeld via een verouderde technologie, zoals XUL/XPCOM of de Add-on-SDK, vertelt deze snelle handleiding hoe u deze add-on kunt bijwerken.

+ +
    +
  1. Om een idee te krijgen van de belangrijkste zaken die u in uw add-on moet wijzigen: + +
    2. +
  2. Herschrijf de code van uw add-on. Meer bronnen en ondersteuning vindt u in de Mozilla-wiki. Vanaf Firefox 51 en hoger kunt u een WebExtension in een ‘bootstrapped’ extensie of een SDK-add-on inbedden en op die manier verouderde add-ons een voor een porteren, en bij elke stap over een werkende add-on beschikken. Zie hiervoor Embedded WebExtensions.
    3. +
  3. Zodra u eraan toe bent om uw oude add-on bij te werken, dient u de nieuwe add-on in bij AMO als een update voor de oude. Dit betekent dat u een verouderde add-on kunt omzetten naar het gebruik van WebExtensions, en dezelfde add-on-ID kunt behouden.
    4. +
+ +
+

Houd er rekening mee dat dit een omzetting is in één richting: u kunt een WebExtension niet bijwerken voor het gebruik van oudere technologie. Dit houdt in dat u er zeker van moet zijn dat u eraan toe bent om de bijgewerkte add-on naar WebExtensions vast te leggen voordat u deze bij AMO indient.

+
diff --git a/files/nl/orphaned/mozilla_implementeren/index.html b/files/nl/orphaned/mozilla_implementeren/index.html new file mode 100644 index 0000000000..e14fbfc70d --- /dev/null +++ b/files/nl/orphaned/mozilla_implementeren/index.html @@ -0,0 +1,7 @@ +--- +title: Mozilla Implementeren +slug: Mozilla_Implementeren +--- +

Mozilla Implementeren

+

Gecko laat ontwikkelaars van 3e partij software toe om dezelfde technologie te gebruiken als in Mozilla. Dat wil zeggen dat u een webbrowser kan implementeren in een 3e partij applicatie, kanalen en streams kan openen op het netwerk, door het DOM kan wandelen enzovoort. U kan zelfs hele nieuwe applicaties maken +

diff --git a/files/nl/tools/keyboard_shortcuts/index.html b/files/nl/tools/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..66612a527a --- /dev/null +++ b/files/nl/tools/keyboard_shortcuts/index.html @@ -0,0 +1,1065 @@ +--- +title: Sneltoetsen +slug: Tools/Sneltoetsen +tags: + - Tools + - 'l10n:priority' +translation_of: Tools/Keyboard_shortcuts +--- +

Deze pagina vermeldt alle sneltoetsen voor de ontwikkelaarshulpmiddelen die in Firefox zijn ingebouwd.

+ +

De eerste sectie vermeldt de sneltoets voor het openen van elk hulpmiddel, de tweede sectie vermeldt sneltoetsen die van toepassing zijn op de Werkset zelf. Daarna volgt één sectie voor elk hulpmiddel waarin de sneltoetsen worden vermeld die u binnen dat hulpmiddel kunt gebruiken.

+ +

Omdat toegangstoetsen afhankelijk zijn van de locale, worden ze niet op deze pagina vermeld.

+ +

Hulpmiddelen openen en sluiten

+ +

Deze sneltoetsen werken in het hoofdbrowservenster voor het openen van het bepaalde hulpmiddel. Voor hulpmiddelen die door de Werkset worden verzorgd, werken ze voor het sluiten van het hulpmiddel als dit actief is. Voor hulpmiddelen zoals de Browserconsole die in een nieuw venster wordt geopend, moet u het venster sluiten om het hulpmiddel te sluiten.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OpdrachtWindowsOS XLinux
Werkset openen (met het meest recente hulpmiddel geactiveerd)Ctrl + Shift + ICmd + Opt + ICtrl + Shift + I
Werkset naar voorgrond brengen (als Werkset zich in een apart venster en niet op voorgrond bevindt)Ctrl + Shift + I of F12Cmd + Opt + I of F12Ctrl + Shift + I of F12
Werkset sluiten (als Werkset zich in een apart venster en wel op voorgrond bevindt)Ctrl + Shift + I of F12Cmd + Opt + I of F12Ctrl + Shift + I of F12
Webconsole openen 1Ctrl + Shift + KCmd + Opt + KCtrl + Shift + K
Inspector in-/uitschakelenCtrl + Shift + ICmd + Opt + ICtrl + Shift + I
Debugger openenCtrl + Shift + SCmd + Opt + SCtrl + Shift + S
Stijleditor openenShift + F7Shift + F7 1Shift + F7
Profiler openenShift + F5Shift + F5 1Shift + F5
Networkmonitor openenCtrl + Shift + QCmd + Opt + QCtrl + Shift + Q
Ontwikkelaarswerkbalk in-/uitschakelenShift + F2Shift + F2 1Shift + F2
Responsive Design-weergave in-/uitschakelenCtrl + Shift + MCmd + Opt + MCtrl + Shift + M
Browserconsole openen 2Ctrl + Shift + JCmd + Shift + JCtrl + Shift + J
Browserwerkset openenCtrl + Alt + Shift + ICmd + Opt + Shift + ICtrl + Alt + Shift + I
Kladblok openenShift + F4Shift + F4Shift + F4
WebIDE openenShift + F8Shift + F8Shift + F8
Opslag-inspector 3Shift + F9Shift + F9Shift + F9
+ +

1. In tegenstelling tot de andere door de werkset verzorgde hulpmiddelen sluit deze sneltoets niet tevens de Webconsole. In plaats daarvan wordt hierdoor de focus op de opdrachtregel van de Webconsole gelegd. Gebruik de algemene werksetsneltoets Ctrl + Shift + I (Cmd + Opt + I op een Mac) om de Webconsole te sluiten.

+ +

2. Tot aan Firefox 38 sloot, wanneer de Browserconsole was verborgen door een normaal Firefox-venster, dezelfde toetscombinatie de Browserconsole. In Firefox 38 en hoger brengt, als de Browserconsole wordt verborgen door een normaal Firefox-venster, deze sneltoetscombinatie de Browserconsole weer op de voorgrond en wordt hier de focus op gelegd.

+ +

3. Het hulpmiddel is standaard uitgeschakeld, dus de sneltoets zou niet werken voordat deze is ingeschakeld vanuit het paneel Instellingen.

+ +

Werkset

+ +
+

Deze sneltoetsen werken zolang de werkset is geopend, ongeacht welk hulpmiddel actief is.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OpdrachtWindowsOS XLinux
Door hulpmiddelen stappen van links naar rechtsCtrl + ]Cmd + ]Ctrl + ]
Door hulpmiddelen stappen van rechts naar linksCtrl + [Cmd + [Ctrl + [
+

Wisselen tussen actief hulpmiddel en instellingen

+ 		Ctrl + Shift + OCmd + Shift + OCtrl + Shift + O
Wisselen tussen actief hulpmiddel en instellingen (nieuw in Firefox 43)F1F1F1
+

Werkset wisselen tussen de laatste 2 dockingmodi (nieuw in Firefox 41)

+ 		Ctrl + Shift + DCmd + Shift + DCtrl + Shift + D
Gesplitste console in-/uitschakelen (behalve als console het huidige geselecteerde hulpmiddel is)EscEscEsc
+
+ +
+

Deze sneltoetsen werken in alle hulpmiddelen die door de werkset worden verzorgd.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OpdrachtWindowsOS XLinux
Lettergrootte vergrotenCtrl + + Cmd + + Ctrl + +
Lettergrootte verkleinenCtrl + -Cmd + -Ctrl + -
Lettergrootte herinitialiserenCtrl + 0Cmd + 0Ctrl + 0
+
+ +

Broneditor

+ +
+

Deze tabel vermeldt de standaardsneltoetsen voor de broneditor.

+ +

In de sectie Editorvoorkeuren van de instellingen voor de ontwikkelaarshulpmiddelen kunt u in plaats daarvan kiezen voor het gebruik van sneltoetsen van Vim, Emacs of Sublime Text.

+ +

Bezoek about:config, selecteer de instelling devtools.editor.keymap en wijs ‘vim’, ‘emacs’ of ‘sublime’ toe aan die instelling om deze sneltoetsen te selecteren. Als u dit doet, worden de geselecteerde toetsen gebruikt voor alle ontwikkelaarshulpmiddelen die de broneditor gebruiken. U dient de editor opnieuw te openen om de wijziging van kracht te laten worden.

+ +

Vanaf Firefox 33 en hoger is de sneltoetsvoorkeur zichtbaar in de sectie Editorvoorkeuren van de instellingen voor de ontwikkelaarshulpmiddelen, en kunt u dit daar instellen in plaats van via about:config.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OpdrachtWindowsOS XLinux
Naar regel gaanCtrl + JCmd + JCtrl + J
Zoeken in bestandCtrl + FCmd + FCtrl + F
Opnieuw zoekenCtrl + GCmd + GCtrl + G
Alles selecterenCtrl + ACmd + ACtrl + A
KnippenCtrl + XCmd + XCtrl + X
KopiërenCtrl + CCmd + CCtrl + C
PlakkenCtrl + VCmd + VCtrl + V
Ongedaan makenCtrl + ZCmd + ZCtrl + Z
Opnieuw uitvoerenCtrl + Shift + Z / Ctrl + YCmd + Shift + Z / Cmd + YCtrl + Shift + Z / Ctrl + Y
InspringenTabTabTab
Inspringen ongedaan makenShift + TabShift + TabShift + Tab
Regel(s) omhoog verplaatsenAlt + UpAlt + UpAlt + Up
Regel(s) omlaag verplaatsenAlt + DownAlt + DownAlt + Down
Regel(s) van opmerking voorzien/ontdoenCtrl + /Cmd + /Ctrl + /
+
+ +

Pagina-inspector

+ +
+ + + + + + + + + + + + + + + +
OpdrachtWindowsOS XLinux
Element inspecterenCtrl + Shift + CCmd + Opt + CCtrl + Shift + C
+ +

HTML-paneel

+ +

Deze sneltoetsen werken terwijl u zich in het HTML-paneel van de Inspector bevindt.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OpdrachtWindowsOS XLinux
De geselecteerde node verwijderenDeleteDeleteDelete
Verwijderen van een node ongedaan makenCtrl + ZCmd + ZCtrl + Z
Verwijderen van een node opnieuw uitvoerenCtrl + Shift + Z / Ctrl + YCmd + Shift + Z / Cmd + YCtrl + Shift + Z / Ctrl + Y
Verder naar volgende node (alleen uitgevouwen nodes)Pijl omlaagPijl omlaagPijl omlaag
Terug naar vorige nodePijl omhoogPijl omhoogPijl omhoog
Huidige geselecteerde node uitvouwenPijl naar rechtsPijl naar rechtsPijl naar rechts
Huidige geselecteerde node samenvouwenPijl naar rechtsPijl naar rechtsPijl naar rechts
Vooruit stappen door de attributen van een nodeTabTabTab
Terug stappen door de attributen van een nodeShift + TabShift + TabShift + Tab
Beginnen met bewerken van het geselecteerde attribuutEnterReturnEnter
De geselecteerde node verbergen/tonenHHH
Focus op het zoekveld in het HTML-paneel leggenCtrl + FCmd + FCtrl + F
Bewerken als HTMLF2F2F2
De buitenste HTML van de geselecteerde node kopiëren (nieuw in Firefox 42)Ctrl + CCmd + CCtrl + C
De geselecteerde node scrollen in weergave (nieuw in Firefox 44)SSS
De volgende overeenkomst in de opmaak zoeken, als zoeken actief isEnterReturnEnter
De vorige overeenkomst in de opmaak zoeken, als zoeken actief is (nieuw in Firefox 48)Shift + EnterShift + ReturnShift + Enter
+ +

CSS-paneel

+ +

Deze sneltoetsen werken wanneer u zich in het CSS-paneel van de Inspector bevindt.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OpdrachtWindowsOS XLinux
Focus op het zoekveld in het CSS-paneel leggenCtrl + FCmd + FCtrl + F
Inhoud van zoekveld wissen (alleen wanneer focus op het zoekveld ligt, en inhoud is ingevoerd)EscEscEsc
Vooruit stappen door eigenschappen en waardenTabTabTab
Terug stappen door eigenschappen en waardenShift + TabShift + TabShift + Tab
Beginnen met bewerken van eigenschap of waarde (alleen weergave Regels, wanneer een eigenschap of waarde is geselecteerd, maar nog niet wordt bewerkt)Enter of SpatieReturn of SpatieEnter of Spatie
Omhoog en omlaag bewegen tussen suggesties voor automatisch aanvullen (alleen weergave Regels, wanneer een eigenschap of waarde wordt bewerkt)Pijl omhoog , Pijl omlaagPijl omhoog , Pijl omlaagPijl omhoog , Pijl omlaag
Huidige suggestie voor automatisch aanvullen kiezen (alleen weergave Regels, wanneer een eigenschap of waarde wordt bewerkt)Enter or TabReturn or TabEnter or Tab
Geselecteerde waarde met 1 verhogenPijl omhoogPijl omhoogPijl omhoog
Geselecteerde waarde met 1 verlagenPijl omlaagPijl omlaagPijl omlaag
Geselecteerde waarde met 100 verhogenShift + Page UpShift + Page UpShift + Page Up
Geselecteerde waarde met 100 verlagenShift + Page DownShift + Page DownShift + Page Down
Geselecteerde waarde met 10 verhogenShift + Pijl omhoogShift + Pijl omhoogShift + Pijl omhoog
Geselecteerde waarde met 10 verlagenShift + Pijl omlaagShift + Pijl omlaagShift + Pijl omlaag
Geselecteerde waarde met 0,1 verhogenAlt + Pijl omhoogOpt + Pijl omhoogAlt + Pijl omhoog
Geselecteerde waarde met 0,1 verlagenAlt + Pijl omlaagOpt + Pijl omlaagAlt + Pijl omlaag
Meer informatie over huidige eigenschap tonen/verbergen (alleen weergave Berekend, wanneer een eigenschap is geselecteerd, nieuw in Firefox 49)Enter of SpatieReturn of SpatieEnter of Spatie
MDN-referentiepagina over huidige eigenschap openen (alleen weergave Berekend, wanneer een eigenschap is geselecteerd, nieuw in Firefox 49)F1F1F1
Huidige CSS-bestand openen in Stijleditor (alleen weergave Berekend, wanneer meer informatie over een eigenschap wordt getoond en focus op een CSS-bestandsreferentie ligt, nieuw in Firefox 49)EnterReturnEnter
+
+ +

Debugger

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OpdrachtWindowsOS XLinux
De Debugger openenCtrl + Shift + SCmd + Opt + SCtrl + Shift + S
Zoeken in de huidige bron via het scriptfilterCtrl + FCmd + FCtrl + F
Volgende zoeken in de huidige bronEnter / Pijl omhoogReturn / Pijl omhoogEnter / Pijl omhoog
Vorige zoeken in de huidige bronShift + Enter / Pijl omlaagShift + Return / Pijl omlaagShift + Enter / Pijl omlaag
Zoeken in alle bronnen via het scriptfilterCtrl + Alt + FCmd + Opt + FCtrl + Alt + F
Zoeken naar scripts op naamCtrl + P / Ctrl + OCmd + P / Ctrl + OCtrl + P / Ctrl + O
Zoeken naar functiedefinitiesCtrl + DCmd + DCtrl + D
Variabelen filteren bij gepauzeerde uitvoeringCtrl + Alt + VCmd + Opt + VCtrl + Alt + V
Uitvoering hervatten bij een breakpointF8F8 1F8
OverslaanF10F10 1F10
InstappenF11F11 1F11
UitstappenShift + F11Shift + F11 1Shift + F11
Breakpoint op de huidige geselecteerde regel in-/uitschakelenCtrl + BCmd + BCtrl + B
Voorwaardelijk breakpoint op de huidige geselecteerde regel in-/uitschakelenCtrl + Shift + BCmd + Shift + BCtrl + Shift + B
Geselecteerde tekst aan Watch-expressies toevoegenCtrl + Shift + ECmd + Shift + ECtrl + Shift + E
Naar regel gaan via het scriptfilterCtrl + LCmd + LCtrl + L
Zoeken via het scriptfilterCtrl + OCmd + OCtrl + O
In het bronpaneel naar een functiedefinitie springen (nieuw in Firefox 44)Ctrl + klikkenCmd + klikkenCtrl + klikken
+ +

1. Standaard is op sommige Macs de functietoets anders toegewezen voor het gebruik van een speciale functie: bijvoorbeeld voor het wijzigen van de schermhelderheid of het volume. Bekijk hiervoor deze handleiding voor het gebruik van deze toetsen als standaard functietoetsen. Houd ook de functietoets ingedrukt om een anders toegewezen toets als een standaard functietoets te gebruiken (gebruik dus Shift + Functie + F5 om de Profiler te openen).

+
+ +

Webconsole

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OpdrachtWindowsOS XLinux
De Webconsole openenCtrl + Shift + KCmd + Opt + KCtrl + Shift + K
Zoeken in het berichtweergavepaneelCtrl + FCmd + FCtrl + F
Het object-inspector-paneel wissenEscapeEscapeEscape
Focus op de opdrachtregel leggenCtrl + Shift + KCmd + Opt + KCtrl + Shift + K
Uitvoer wissen +

Ctrl + L

+ +

Vanaf Firefox 44:

+ +

Ctrl + Shift + L

+ 		Ctrl + L +

Ctrl + L

+ +

Vanaf Firefox 44:

+ +

Ctrl + Shift + L

+
+ +

Opdrachtregel-interpreter

+ +

Deze sneltoetsen zijn van toepassing wanneer u zich in de opdrachtregel-interpreter bevindt.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OpdrachtWindowsOS XLinux
Scrollen naar begin van console-uitvoer (alleen als de opdrachtregel leeg is)HomeHomeHome
Scrollen naar einde van console-uitvoer (alleen als de opdrachtregel leeg is)EndEndEnd
Pagina omhoog door console-uitvoerPage upPage upPage up
Pagina omlaag door console-uitvoerPage downPage downPage down
Teruggaan door opdrachtgeschiedenisPijl omhoogPijl omhoogPijl omhoog
Vooruit gaan door opdrachtgeschiedenisPijl omlaagPijl omlaagPijl omlaag
Naar het begin van de regel springenHomeCtrl + ACtrl + A
Naar het einde van de regel springenEndCtrl + ECtrl + E
De huidige expressie uitvoerenEnterReturnEnter
Een nieuwe regel toevoegen, voor het invoeren van meerregelige expressiesShift + EnterShift + ReturnShift + Enter
+ +

Pop-up voor automatisch aanvullen

+ +

Deze sneltoetsen zijn van toepassing terwijl de pop-up voor automatisch aanvullen is geopend:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OpdrachtWindowsOS XLinux
De huidige suggestie voor automatisch aanvullen kiezenTabTabTab
De pop-up voor automatisch aanvullen annulerenEscapeEscapeEscape
Naar de vorige suggestie voor automatisch aanvullen springenPijl omhoogPijl omhoogPijl omhoog
Naar de volgende suggestie voor automatisch aanvullen springenPijl omlaagPijl omlaagPijl omlaag
Pagina omhoog door suggesties voor automatisch aanvullenPage upPage upPage up
Pagina omlaag door suggesties voor automatisch aanvullenPage downPage downPage down
Scrollen naar begin van suggesties voor automatisch aanvullenHomeHomeHome
Scrollen naar einde van suggesties voor automatisch aanvullenEndEndEnd
+
+ +

Stijleditor

+ + + + + + + + + + + + + + + + + + + + + + +
OpdrachtWindowsOS XLinux
De Stijleditor openenShift + F7Shift + F7Shift + F7
Pop-up voor automatisch aanvullen openenCtrl + SpatieCmd + SpatieCtrl + Spatie
+ +
+

Kladblok

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OpdrachtWindowsOS XLinux
Het Kladblok openenShift + F4Shift + F4Shift + F4
Kladbok-code uitvoerenCtrl + RCmd + RCtrl + R
Kladblok-code uitvoeren, het resultaat in de object-inspector weergevenCtrl + ICmd + ICtrl + I
Kladblok-code uitvoeren,het resultaat als een opmerking invoegenCtrl + LCmd + LCtrl + L
Huidige functie opnieuw evaluerenCtrl + ECmd + ECtrl + E
De huidige pagina laden, daarna Kladblok-code uitvoerenCtrl + Shift + RCmd + Shift + RCtrl + Shift + R
Het blok opslaanCtrl + SCmd + SCtrl + S
Een bestaand blok openenCtrl + OCmd + OCtrl + O
Een nieuw blok makenCtrl + NCmd + NCtrl + N
Kladblok sluitenCtrl + WCmd + WCtrl + W
De code ‘prettyprinten’ in KladblokCtrl + PCmd + PCtrl + P
Suggesties voor automatisch aanvullen tonenCtrl + SpatieCtrl + SpatieCtrl + Spatie
Inlinedocumentatie tonenCtrl + Shift + SpatieCtrl + Shift + SpatieCtrl + Shift + Spatie
+
+ +
+

Eyedropper

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OpdrachtWindowsOS XLinux
De huidige kleur selecterenEnterReturnEnter
De Eyedropper sluitenEscapeEscapeEscape
Verplaatsen per 1 pixelPijltoetsenPijltoetsenPijltoetsen
Verplaatsen per 10 pixelsShift + pijltoetsenShift + pijltoetsenShift + pijltoetsen
+
diff --git a/files/nl/tools/responsive_design_mode/index.html b/files/nl/tools/responsive_design_mode/index.html new file mode 100644 index 0000000000..2158a40f54 --- /dev/null +++ b/files/nl/tools/responsive_design_mode/index.html @@ -0,0 +1,93 @@ +--- +title: Responsive Design View +slug: Tools/Responsive_Design_View +translation_of: Tools/Responsive_Design_Mode +--- +

Responsive design past zich aan verschillende beeldgroottes aan om een presentatie te voorzien dat werkt voor verschillende soorten apparaten, zoals mobiele telefoons of tablets. Het Responsive Design View maakt het gemakkelijk om te zien hoe jouw website of app er zou uitzien op verschillende beeldgroottes.

+ +

{{EmbedYouTube("LBcE72sG2s8")}}

+ +

Het screenshot hieronder laat een mobiele versie zien van een Wikipedia-pagina met een grootte van 320 op 480.

+ +

+ +

Het Responsive Design View werkt vlot omdat je snel en precies de grootte van het beeld kan aanpassen.

+ +

Je kan natuurlijk ook de grootte van het browservenster aanpassen; maar als je het browservenster kleiner maakt, maak je ook de andere tabs kleiner, zo wordt het moeilijker om de browserinterface te gebruiken.

+ +

Als het Responsive Design View is ingeschakeld, kan je verder surfen in het verkleinde beeld.

+ +

Aan- en afzetten

+ +

Er zijn drie manieren om Responsive Design View mode aan te zetten:

+ + + +

en drie manieren om Responsive Design View af te zetten:

+ + + +

Vergroten / verkleinen

+ +

Je kan het inhoudsvlak vergroten of verkleinen op twee manieren:

+ + + +

Als je de grootte aanpast door de zijkanten te verslepen, kan je Control (Cmd bij OS X) ingedrukt houden om de snelheid van de aanpassing te vertragen. Dit maakt het gemakkelijker om een precieze grootte te selecteren.

+ +
+

Responsive Design View controls

+ +

Aan de bovenkant van het venstertje van het Responsive Design View, staan vijf knoppen:

+ + + + + + + + + + + + + + + + + + + + + + + + +
SluitenSluit het Responsive Design View en browse verder zoals voordien.
Select size +

Kies een voorgemaakte combinatie tussen breedte en hoogte of maak er zelf één.

+ +


+ Vanaf Firefox 33 zijn de nummers die hier staan direct aanpasbaar. Zo kan je gemakkelijk eigen dimensies toevoegen.

+
Portret/LandschapWissel het scherm tussen een portret view en een landschap view.
+

Simuleer touch events

+ 		+

Schakel touch event simulatie in of uit: als touch event simulatie is ingeschakeld, worden muis events omgezet naar touch events.

+
+

Neem een screenshot

+ 		Neem een screenshot van het inhoudsgebied. +

Screenshots worden opgeslagen in de standaard downloadlocatie van Firefox.

+
+
+ +

 

diff --git a/files/nl/tools/responsive_design_view/index.html b/files/nl/tools/responsive_design_view/index.html deleted file mode 100644 index 2158a40f54..0000000000 --- a/files/nl/tools/responsive_design_view/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Responsive Design View -slug: Tools/Responsive_Design_View -translation_of: Tools/Responsive_Design_Mode ---- -

Responsive design past zich aan verschillende beeldgroottes aan om een presentatie te voorzien dat werkt voor verschillende soorten apparaten, zoals mobiele telefoons of tablets. Het Responsive Design View maakt het gemakkelijk om te zien hoe jouw website of app er zou uitzien op verschillende beeldgroottes.

- -

{{EmbedYouTube("LBcE72sG2s8")}}

- -

Het screenshot hieronder laat een mobiele versie zien van een Wikipedia-pagina met een grootte van 320 op 480.

- -

- -

Het Responsive Design View werkt vlot omdat je snel en precies de grootte van het beeld kan aanpassen.

- -

Je kan natuurlijk ook de grootte van het browservenster aanpassen; maar als je het browservenster kleiner maakt, maak je ook de andere tabs kleiner, zo wordt het moeilijker om de browserinterface te gebruiken.

- -

Als het Responsive Design View is ingeschakeld, kan je verder surfen in het verkleinde beeld.

- -

Aan- en afzetten

- -

Er zijn drie manieren om Responsive Design View mode aan te zetten:

- - - -

en drie manieren om Responsive Design View af te zetten:

- - - -

Vergroten / verkleinen

- -

Je kan het inhoudsvlak vergroten of verkleinen op twee manieren:

- - - -

Als je de grootte aanpast door de zijkanten te verslepen, kan je Control (Cmd bij OS X) ingedrukt houden om de snelheid van de aanpassing te vertragen. Dit maakt het gemakkelijker om een precieze grootte te selecteren.

- -
-

Responsive Design View controls

- -

Aan de bovenkant van het venstertje van het Responsive Design View, staan vijf knoppen:

- - - - - - - - - - - - - - - - - - - - - - - - -
SluitenSluit het Responsive Design View en browse verder zoals voordien.
Select size -

Kies een voorgemaakte combinatie tussen breedte en hoogte of maak er zelf één.

- -


- Vanaf Firefox 33 zijn de nummers die hier staan direct aanpasbaar. Zo kan je gemakkelijk eigen dimensies toevoegen.

-
Portret/LandschapWissel het scherm tussen een portret view en een landschap view.
-

Simuleer touch events

- 		-

Schakel touch event simulatie in of uit: als touch event simulatie is ingeschakeld, worden muis events omgezet naar touch events.

-
-

Neem een screenshot

- 		Neem een screenshot van het inhoudsgebied. -

Screenshots worden opgeslagen in de standaard downloadlocatie van Firefox.

-
-
- -

 

diff --git a/files/nl/tools/sneltoetsen/index.html b/files/nl/tools/sneltoetsen/index.html deleted file mode 100644 index 66612a527a..0000000000 --- a/files/nl/tools/sneltoetsen/index.html +++ /dev/null @@ -1,1065 +0,0 @@ ---- -title: Sneltoetsen -slug: Tools/Sneltoetsen -tags: - - Tools - - 'l10n:priority' -translation_of: Tools/Keyboard_shortcuts ---- -

Deze pagina vermeldt alle sneltoetsen voor de ontwikkelaarshulpmiddelen die in Firefox zijn ingebouwd.

- -

De eerste sectie vermeldt de sneltoets voor het openen van elk hulpmiddel, de tweede sectie vermeldt sneltoetsen die van toepassing zijn op de Werkset zelf. Daarna volgt één sectie voor elk hulpmiddel waarin de sneltoetsen worden vermeld die u binnen dat hulpmiddel kunt gebruiken.

- -

Omdat toegangstoetsen afhankelijk zijn van de locale, worden ze niet op deze pagina vermeld.

- -

Hulpmiddelen openen en sluiten

- -

Deze sneltoetsen werken in het hoofdbrowservenster voor het openen van het bepaalde hulpmiddel. Voor hulpmiddelen die door de Werkset worden verzorgd, werken ze voor het sluiten van het hulpmiddel als dit actief is. Voor hulpmiddelen zoals de Browserconsole die in een nieuw venster wordt geopend, moet u het venster sluiten om het hulpmiddel te sluiten.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OpdrachtWindowsOS XLinux
Werkset openen (met het meest recente hulpmiddel geactiveerd)Ctrl + Shift + ICmd + Opt + ICtrl + Shift + I
Werkset naar voorgrond brengen (als Werkset zich in een apart venster en niet op voorgrond bevindt)Ctrl + Shift + I of F12Cmd + Opt + I of F12Ctrl + Shift + I of F12
Werkset sluiten (als Werkset zich in een apart venster en wel op voorgrond bevindt)Ctrl + Shift + I of F12Cmd + Opt + I of F12Ctrl + Shift + I of F12
Webconsole openen 1Ctrl + Shift + KCmd + Opt + KCtrl + Shift + K
Inspector in-/uitschakelenCtrl + Shift + ICmd + Opt + ICtrl + Shift + I
Debugger openenCtrl + Shift + SCmd + Opt + SCtrl + Shift + S
Stijleditor openenShift + F7Shift + F7 1Shift + F7
Profiler openenShift + F5Shift + F5 1Shift + F5
Networkmonitor openenCtrl + Shift + QCmd + Opt + QCtrl + Shift + Q
Ontwikkelaarswerkbalk in-/uitschakelenShift + F2Shift + F2 1Shift + F2
Responsive Design-weergave in-/uitschakelenCtrl + Shift + MCmd + Opt + MCtrl + Shift + M
Browserconsole openen 2Ctrl + Shift + JCmd + Shift + JCtrl + Shift + J
Browserwerkset openenCtrl + Alt + Shift + ICmd + Opt + Shift + ICtrl + Alt + Shift + I
Kladblok openenShift + F4Shift + F4Shift + F4
WebIDE openenShift + F8Shift + F8Shift + F8
Opslag-inspector 3Shift + F9Shift + F9Shift + F9
- -

1. In tegenstelling tot de andere door de werkset verzorgde hulpmiddelen sluit deze sneltoets niet tevens de Webconsole. In plaats daarvan wordt hierdoor de focus op de opdrachtregel van de Webconsole gelegd. Gebruik de algemene werksetsneltoets Ctrl + Shift + I (Cmd + Opt + I op een Mac) om de Webconsole te sluiten.

- -

2. Tot aan Firefox 38 sloot, wanneer de Browserconsole was verborgen door een normaal Firefox-venster, dezelfde toetscombinatie de Browserconsole. In Firefox 38 en hoger brengt, als de Browserconsole wordt verborgen door een normaal Firefox-venster, deze sneltoetscombinatie de Browserconsole weer op de voorgrond en wordt hier de focus op gelegd.

- -

3. Het hulpmiddel is standaard uitgeschakeld, dus de sneltoets zou niet werken voordat deze is ingeschakeld vanuit het paneel Instellingen.

- -

Werkset

- -
-

Deze sneltoetsen werken zolang de werkset is geopend, ongeacht welk hulpmiddel actief is.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OpdrachtWindowsOS XLinux
Door hulpmiddelen stappen van links naar rechtsCtrl + ]Cmd + ]Ctrl + ]
Door hulpmiddelen stappen van rechts naar linksCtrl + [Cmd + [Ctrl + [
-

Wisselen tussen actief hulpmiddel en instellingen

- 		Ctrl + Shift + OCmd + Shift + OCtrl + Shift + O
Wisselen tussen actief hulpmiddel en instellingen (nieuw in Firefox 43)F1F1F1
-

Werkset wisselen tussen de laatste 2 dockingmodi (nieuw in Firefox 41)

- 		Ctrl + Shift + DCmd + Shift + DCtrl + Shift + D
Gesplitste console in-/uitschakelen (behalve als console het huidige geselecteerde hulpmiddel is)EscEscEsc
-
- -
-

Deze sneltoetsen werken in alle hulpmiddelen die door de werkset worden verzorgd.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OpdrachtWindowsOS XLinux
Lettergrootte vergrotenCtrl + + Cmd + + Ctrl + +
Lettergrootte verkleinenCtrl + -Cmd + -Ctrl + -
Lettergrootte herinitialiserenCtrl + 0Cmd + 0Ctrl + 0
-
- -

Broneditor

- -
-

Deze tabel vermeldt de standaardsneltoetsen voor de broneditor.

- -

In de sectie Editorvoorkeuren van de instellingen voor de ontwikkelaarshulpmiddelen kunt u in plaats daarvan kiezen voor het gebruik van sneltoetsen van Vim, Emacs of Sublime Text.

- -

Bezoek about:config, selecteer de instelling devtools.editor.keymap en wijs ‘vim’, ‘emacs’ of ‘sublime’ toe aan die instelling om deze sneltoetsen te selecteren. Als u dit doet, worden de geselecteerde toetsen gebruikt voor alle ontwikkelaarshulpmiddelen die de broneditor gebruiken. U dient de editor opnieuw te openen om de wijziging van kracht te laten worden.

- -

Vanaf Firefox 33 en hoger is de sneltoetsvoorkeur zichtbaar in de sectie Editorvoorkeuren van de instellingen voor de ontwikkelaarshulpmiddelen, en kunt u dit daar instellen in plaats van via about:config.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OpdrachtWindowsOS XLinux
Naar regel gaanCtrl + JCmd + JCtrl + J
Zoeken in bestandCtrl + FCmd + FCtrl + F
Opnieuw zoekenCtrl + GCmd + GCtrl + G
Alles selecterenCtrl + ACmd + ACtrl + A
KnippenCtrl + XCmd + XCtrl + X
KopiërenCtrl + CCmd + CCtrl + C
PlakkenCtrl + VCmd + VCtrl + V
Ongedaan makenCtrl + ZCmd + ZCtrl + Z
Opnieuw uitvoerenCtrl + Shift + Z / Ctrl + YCmd + Shift + Z / Cmd + YCtrl + Shift + Z / Ctrl + Y
InspringenTabTabTab
Inspringen ongedaan makenShift + TabShift + TabShift + Tab
Regel(s) omhoog verplaatsenAlt + UpAlt + UpAlt + Up
Regel(s) omlaag verplaatsenAlt + DownAlt + DownAlt + Down
Regel(s) van opmerking voorzien/ontdoenCtrl + /Cmd + /Ctrl + /
-
- -

Pagina-inspector

- -
- - - - - - - - - - - - - - - -
OpdrachtWindowsOS XLinux
Element inspecterenCtrl + Shift + CCmd + Opt + CCtrl + Shift + C
- -

HTML-paneel

- -

Deze sneltoetsen werken terwijl u zich in het HTML-paneel van de Inspector bevindt.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OpdrachtWindowsOS XLinux
De geselecteerde node verwijderenDeleteDeleteDelete
Verwijderen van een node ongedaan makenCtrl + ZCmd + ZCtrl + Z
Verwijderen van een node opnieuw uitvoerenCtrl + Shift + Z / Ctrl + YCmd + Shift + Z / Cmd + YCtrl + Shift + Z / Ctrl + Y
Verder naar volgende node (alleen uitgevouwen nodes)Pijl omlaagPijl omlaagPijl omlaag
Terug naar vorige nodePijl omhoogPijl omhoogPijl omhoog
Huidige geselecteerde node uitvouwenPijl naar rechtsPijl naar rechtsPijl naar rechts
Huidige geselecteerde node samenvouwenPijl naar rechtsPijl naar rechtsPijl naar rechts
Vooruit stappen door de attributen van een nodeTabTabTab
Terug stappen door de attributen van een nodeShift + TabShift + TabShift + Tab
Beginnen met bewerken van het geselecteerde attribuutEnterReturnEnter
De geselecteerde node verbergen/tonenHHH
Focus op het zoekveld in het HTML-paneel leggenCtrl + FCmd + FCtrl + F
Bewerken als HTMLF2F2F2
De buitenste HTML van de geselecteerde node kopiëren (nieuw in Firefox 42)Ctrl + CCmd + CCtrl + C
De geselecteerde node scrollen in weergave (nieuw in Firefox 44)SSS
De volgende overeenkomst in de opmaak zoeken, als zoeken actief isEnterReturnEnter
De vorige overeenkomst in de opmaak zoeken, als zoeken actief is (nieuw in Firefox 48)Shift + EnterShift + ReturnShift + Enter
- -

CSS-paneel

- -

Deze sneltoetsen werken wanneer u zich in het CSS-paneel van de Inspector bevindt.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OpdrachtWindowsOS XLinux
Focus op het zoekveld in het CSS-paneel leggenCtrl + FCmd + FCtrl + F
Inhoud van zoekveld wissen (alleen wanneer focus op het zoekveld ligt, en inhoud is ingevoerd)EscEscEsc
Vooruit stappen door eigenschappen en waardenTabTabTab
Terug stappen door eigenschappen en waardenShift + TabShift + TabShift + Tab
Beginnen met bewerken van eigenschap of waarde (alleen weergave Regels, wanneer een eigenschap of waarde is geselecteerd, maar nog niet wordt bewerkt)Enter of SpatieReturn of SpatieEnter of Spatie
Omhoog en omlaag bewegen tussen suggesties voor automatisch aanvullen (alleen weergave Regels, wanneer een eigenschap of waarde wordt bewerkt)Pijl omhoog , Pijl omlaagPijl omhoog , Pijl omlaagPijl omhoog , Pijl omlaag
Huidige suggestie voor automatisch aanvullen kiezen (alleen weergave Regels, wanneer een eigenschap of waarde wordt bewerkt)Enter or TabReturn or TabEnter or Tab
Geselecteerde waarde met 1 verhogenPijl omhoogPijl omhoogPijl omhoog
Geselecteerde waarde met 1 verlagenPijl omlaagPijl omlaagPijl omlaag
Geselecteerde waarde met 100 verhogenShift + Page UpShift + Page UpShift + Page Up
Geselecteerde waarde met 100 verlagenShift + Page DownShift + Page DownShift + Page Down
Geselecteerde waarde met 10 verhogenShift + Pijl omhoogShift + Pijl omhoogShift + Pijl omhoog
Geselecteerde waarde met 10 verlagenShift + Pijl omlaagShift + Pijl omlaagShift + Pijl omlaag
Geselecteerde waarde met 0,1 verhogenAlt + Pijl omhoogOpt + Pijl omhoogAlt + Pijl omhoog
Geselecteerde waarde met 0,1 verlagenAlt + Pijl omlaagOpt + Pijl omlaagAlt + Pijl omlaag
Meer informatie over huidige eigenschap tonen/verbergen (alleen weergave Berekend, wanneer een eigenschap is geselecteerd, nieuw in Firefox 49)Enter of SpatieReturn of SpatieEnter of Spatie
MDN-referentiepagina over huidige eigenschap openen (alleen weergave Berekend, wanneer een eigenschap is geselecteerd, nieuw in Firefox 49)F1F1F1
Huidige CSS-bestand openen in Stijleditor (alleen weergave Berekend, wanneer meer informatie over een eigenschap wordt getoond en focus op een CSS-bestandsreferentie ligt, nieuw in Firefox 49)EnterReturnEnter
-
- -

Debugger

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OpdrachtWindowsOS XLinux
De Debugger openenCtrl + Shift + SCmd + Opt + SCtrl + Shift + S
Zoeken in de huidige bron via het scriptfilterCtrl + FCmd + FCtrl + F
Volgende zoeken in de huidige bronEnter / Pijl omhoogReturn / Pijl omhoogEnter / Pijl omhoog
Vorige zoeken in de huidige bronShift + Enter / Pijl omlaagShift + Return / Pijl omlaagShift + Enter / Pijl omlaag
Zoeken in alle bronnen via het scriptfilterCtrl + Alt + FCmd + Opt + FCtrl + Alt + F
Zoeken naar scripts op naamCtrl + P / Ctrl + OCmd + P / Ctrl + OCtrl + P / Ctrl + O
Zoeken naar functiedefinitiesCtrl + DCmd + DCtrl + D
Variabelen filteren bij gepauzeerde uitvoeringCtrl + Alt + VCmd + Opt + VCtrl + Alt + V
Uitvoering hervatten bij een breakpointF8F8 1F8
OverslaanF10F10 1F10
InstappenF11F11 1F11
UitstappenShift + F11Shift + F11 1Shift + F11
Breakpoint op de huidige geselecteerde regel in-/uitschakelenCtrl + BCmd + BCtrl + B
Voorwaardelijk breakpoint op de huidige geselecteerde regel in-/uitschakelenCtrl + Shift + BCmd + Shift + BCtrl + Shift + B
Geselecteerde tekst aan Watch-expressies toevoegenCtrl + Shift + ECmd + Shift + ECtrl + Shift + E
Naar regel gaan via het scriptfilterCtrl + LCmd + LCtrl + L
Zoeken via het scriptfilterCtrl + OCmd + OCtrl + O
In het bronpaneel naar een functiedefinitie springen (nieuw in Firefox 44)Ctrl + klikkenCmd + klikkenCtrl + klikken
- -

1. Standaard is op sommige Macs de functietoets anders toegewezen voor het gebruik van een speciale functie: bijvoorbeeld voor het wijzigen van de schermhelderheid of het volume. Bekijk hiervoor deze handleiding voor het gebruik van deze toetsen als standaard functietoetsen. Houd ook de functietoets ingedrukt om een anders toegewezen toets als een standaard functietoets te gebruiken (gebruik dus Shift + Functie + F5 om de Profiler te openen).

-
- -

Webconsole

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OpdrachtWindowsOS XLinux
De Webconsole openenCtrl + Shift + KCmd + Opt + KCtrl + Shift + K
Zoeken in het berichtweergavepaneelCtrl + FCmd + FCtrl + F
Het object-inspector-paneel wissenEscapeEscapeEscape
Focus op de opdrachtregel leggenCtrl + Shift + KCmd + Opt + KCtrl + Shift + K
Uitvoer wissen -

Ctrl + L

- -

Vanaf Firefox 44:

- -

Ctrl + Shift + L

- 		Ctrl + L -

Ctrl + L

- -

Vanaf Firefox 44:

- -

Ctrl + Shift + L

-
- -

Opdrachtregel-interpreter

- -

Deze sneltoetsen zijn van toepassing wanneer u zich in de opdrachtregel-interpreter bevindt.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OpdrachtWindowsOS XLinux
Scrollen naar begin van console-uitvoer (alleen als de opdrachtregel leeg is)HomeHomeHome
Scrollen naar einde van console-uitvoer (alleen als de opdrachtregel leeg is)EndEndEnd
Pagina omhoog door console-uitvoerPage upPage upPage up
Pagina omlaag door console-uitvoerPage downPage downPage down
Teruggaan door opdrachtgeschiedenisPijl omhoogPijl omhoogPijl omhoog
Vooruit gaan door opdrachtgeschiedenisPijl omlaagPijl omlaagPijl omlaag
Naar het begin van de regel springenHomeCtrl + ACtrl + A
Naar het einde van de regel springenEndCtrl + ECtrl + E
De huidige expressie uitvoerenEnterReturnEnter
Een nieuwe regel toevoegen, voor het invoeren van meerregelige expressiesShift + EnterShift + ReturnShift + Enter
- -

Pop-up voor automatisch aanvullen

- -

Deze sneltoetsen zijn van toepassing terwijl de pop-up voor automatisch aanvullen is geopend:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OpdrachtWindowsOS XLinux
De huidige suggestie voor automatisch aanvullen kiezenTabTabTab
De pop-up voor automatisch aanvullen annulerenEscapeEscapeEscape
Naar de vorige suggestie voor automatisch aanvullen springenPijl omhoogPijl omhoogPijl omhoog
Naar de volgende suggestie voor automatisch aanvullen springenPijl omlaagPijl omlaagPijl omlaag
Pagina omhoog door suggesties voor automatisch aanvullenPage upPage upPage up
Pagina omlaag door suggesties voor automatisch aanvullenPage downPage downPage down
Scrollen naar begin van suggesties voor automatisch aanvullenHomeHomeHome
Scrollen naar einde van suggesties voor automatisch aanvullenEndEndEnd
-
- -

Stijleditor

- - - - - - - - - - - - - - - - - - - - - - -
OpdrachtWindowsOS XLinux
De Stijleditor openenShift + F7Shift + F7Shift + F7
Pop-up voor automatisch aanvullen openenCtrl + SpatieCmd + SpatieCtrl + Spatie
- -
-

Kladblok

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OpdrachtWindowsOS XLinux
Het Kladblok openenShift + F4Shift + F4Shift + F4
Kladbok-code uitvoerenCtrl + RCmd + RCtrl + R
Kladblok-code uitvoeren, het resultaat in de object-inspector weergevenCtrl + ICmd + ICtrl + I
Kladblok-code uitvoeren,het resultaat als een opmerking invoegenCtrl + LCmd + LCtrl + L
Huidige functie opnieuw evaluerenCtrl + ECmd + ECtrl + E
De huidige pagina laden, daarna Kladblok-code uitvoerenCtrl + Shift + RCmd + Shift + RCtrl + Shift + R
Het blok opslaanCtrl + SCmd + SCtrl + S
Een bestaand blok openenCtrl + OCmd + OCtrl + O
Een nieuw blok makenCtrl + NCmd + NCtrl + N
Kladblok sluitenCtrl + WCmd + WCtrl + W
De code ‘prettyprinten’ in KladblokCtrl + PCmd + PCtrl + P
Suggesties voor automatisch aanvullen tonenCtrl + SpatieCtrl + SpatieCtrl + Spatie
Inlinedocumentatie tonenCtrl + Shift + SpatieCtrl + Shift + SpatieCtrl + Shift + Spatie
-
- -
-

Eyedropper

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OpdrachtWindowsOS XLinux
De huidige kleur selecterenEnterReturnEnter
De Eyedropper sluitenEscapeEscapeEscape
Verplaatsen per 1 pixelPijltoetsenPijltoetsenPijltoetsen
Verplaatsen per 10 pixelsShift + pijltoetsenShift + pijltoetsenShift + pijltoetsen
-
diff --git a/files/nl/tools/web_console/keyboard_shortcuts/index.html b/files/nl/tools/web_console/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..34c8a2e3a5 --- /dev/null +++ b/files/nl/tools/web_console/keyboard_shortcuts/index.html @@ -0,0 +1,10 @@ +--- +title: Sneltoetsen +slug: Tools/Web_Console/Sneltoetsen +translation_of: Tools/Web_Console/Keyboard_shortcuts +--- +

{{ Page ("nl/docs/tools/Keyboard_shortcuts", "web-console") }}

+ +

Algemene sneltoetsen

+ +

{{ Page ("nl/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

diff --git a/files/nl/tools/web_console/sneltoetsen/index.html b/files/nl/tools/web_console/sneltoetsen/index.html deleted file mode 100644 index 34c8a2e3a5..0000000000 --- a/files/nl/tools/web_console/sneltoetsen/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Sneltoetsen -slug: Tools/Web_Console/Sneltoetsen -translation_of: Tools/Web_Console/Keyboard_shortcuts ---- -

{{ Page ("nl/docs/tools/Keyboard_shortcuts", "web-console") }}

- -

Algemene sneltoetsen

- -

{{ Page ("nl/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

diff --git a/files/nl/web/api/crypto/getrandomvalues/index.html b/files/nl/web/api/crypto/getrandomvalues/index.html new file mode 100644 index 0000000000..c91a691be9 --- /dev/null +++ b/files/nl/web/api/crypto/getrandomvalues/index.html @@ -0,0 +1,97 @@ +--- +title: window.crypto.getRandomValues +slug: Web/API/window.crypto.getRandomValues +translation_of: Web/API/Crypto/getRandomValues +--- +

{{ ApiRef() }}

+

{{ SeeCompatTable() }}

+

Met deze functie kunt u cryptografisch willekeurige getallen verkrijgen.

+

Syntax

+
window.crypto.getRandomValues(typedArray);
+

Parameters

+ + + + + + + + + + + + + +
ParameterDescription
typedArrayInteger-gebaseerde TypedArray. Alle elementen in de array zullen worden overschreven door willekeurige getallen.
+

Beschrijving

+

Als u een integer-gebaseerde TypedArray (d.w.z. een Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array, of Uint32Array) meegeeft, zal de functie de array vullen met cryptografisch willekeurige getallen. Het is de bedoeling dat de browser een sterke (pseudo)willekeurige getalsgenerator gebruikt. Omdat de browser waarschijnlijk slechts een beperkte hoeveelheid entropie heeft, mag de methode een QuotaExceededError geven, als teveel entropie wordt gebruikt.

+

Voorbeeld

+
/* ervanuit gaande dat that window.crypto.getRandomValues beschikbaar is */
+
+var array = new Uint32Array(10);
+window.crypto.getRandomValues(array);
+
+console.log("Uw geluksnummers:");
+for (var i = 0; i < array.length; i++) {
+    console.log(array[i]);
+}
+
+

Browsercompatibiliteit

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + +
KenmerkChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basisondersteuning11.0 {{ webkitbug("22049") }}21.0{{ CompatNo() }}{{ CompatNo() }}3.1
+
+
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid BrowserChrome (as App)Firefox Mobile (Gecko)IE MobileOpera MobileSafari
Basic support{{ CompatNo() }}2321.0{{ CompatNo() }}{{ CompatNo() }}iOS 6
+
+

Specificatie

+ +

See also

+ diff --git a/files/nl/web/api/element/mousedown_event/index.html b/files/nl/web/api/element/mousedown_event/index.html new file mode 100644 index 0000000000..a042336cd2 --- /dev/null +++ b/files/nl/web/api/element/mousedown_event/index.html @@ -0,0 +1,234 @@ +--- +title: mousedown +slug: Web/Events/mousedown +tags: + - API + - DOM + - Event + - Interface + - NeedsSpecTable + - Referentie +translation_of: Web/API/Element/mousedown_event +--- +
Het mousedown event wordt opgeworpen wanneer de knop van een aanwijs device wordt ingedrukt op een element.
+ +

Algemene info

+ +
+
Specificatie
+
DOM L3
+
Interface
+
{{domxref("MouseEvent")}}
+
Bubbles
+
Ja
+
Cancelable
+
Ja
+
Doel
+
Element
+
Default Actie
+
Varieert: Start een drag/drop operatie; start een text selectie; start een scroll/pan interactie (in combinatie met de middelste muisknop, indien ondersteund)
+
+ +

Eigenschappen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EigenschapTypeBeschrijving
target {{readonlyInline}}{{domxref("EventTarget")}}Het event target (het hoogste target in de DOM boom).
type {{readonlyInline}}{{domxref("DOMString")}}Het type van het event.
bubbles {{readonlyInline}}BooleanOf het event normaalgezien bubblet of niet
cancelable {{readonlyInline}}BooleanKan het event gecancellet worden of niet?
view {{readonlyInline}}{{domxref("WindowProxy")}}{{domxref("document.defaultView")}} (window van het document)
detail {{readonlyInline}}long (float)Het aantal opeenvolgende clicks in een kort inerval, plus een.
currentTarget {{readonlyInline}}{{domxref("EventTarget")}}De node waar de event listener aan hangt.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}}Voor mouseover, mouseout, mouseenter en mouseleave events: target van het complementaire event (mouseleave target in het geval van een mouseenter event). null anders.
screenX {{readonlyInline}}longDe X coordinaat van de muiscursor in globale (scherm) coordinaten.
screenY {{readonlyInline}}longDe Y coordinaat van de muiscursor in globale (scherm) coordinaten.
clientX {{readonlyInline}}longDe X coordinaat van de muiscursor in lokale (DOM inhoud) coordinaten.
clientY {{readonlyInline}}longDe Y coordinaat van de muiscursor in lokale (DOM inhoud) coordinaten.
button {{readonlyInline}}unsigned shortHet getal van de knop die ingedrukt werd toen het event afgevuurd werd: Linkse knop=0, middelste knop=1 (indien aanwezig), rechtse knop=2. Voor muizen geconfigureerd voor linkshandig gebruik, waarbij de knopacties omgekeerd zijn, worden de waarden van rechts naar links gelezen.
buttons {{readonlyInline}}unsigned short +

De knoppen die ingedrukt werden op het moment dat het muisevent afgevuurd werd: Linkse knop=1, Rechtse knop=2, Middelste (wiel) knop=4, 4e knop (typisch, "Browser Back" knop)=8, 5e knop (typisch, "Browser Forward" knop)=16. Indien twee of meer knoppen samen ingedrukt zijn, wordt de logische som van de waarden teruggegeven. B.v., indien zowel de linkse als de rechtse knop ingedrukt worden, wordt 3 teruggeven  (=1 | 2). Meer info.

+
mozPressure {{readonlyInline}}float +

De hoeveelheid druk toegepast op een touch of tabdevice, wanneer het event gegenereerd werd; deze waarde ligt tussen 0.0 (minimale druk) en 1.0 (maximale druk).

+
ctrlKey {{readonlyInline}}booleantrue indien de control toets ingedrukt was wanneer het event gevuurd werd. false indien niet.
shiftKey {{readonlyInline}}booleantrue indien de shift key ingedrukt was wanneer het event gevuurd werd. false indien niet.
altKey {{readonlyInline}}booleantrue indien de alt key ingedrukt was wanneer het event gevuurd werd. false indien niet.
metaKey {{readonlyInline}}booleantrue indien de meta key ingedrukt was wanneer het event gevuurd werd. false indien niet.
+ +

Browser compatibiliteit

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Basis support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+

Op disabled form elements

+ 		{{CompatVersionUnknown}}[1]{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basis support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Op disabled form elements{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Werkt enkel voor {{HTMLElement("textarea")}} elementen and enkele {{HTMLElement("input")}} element types.

+ +

Zie ook

+ + diff --git a/files/nl/web/api/element/mouseout_event/index.html b/files/nl/web/api/element/mouseout_event/index.html new file mode 100644 index 0000000000..f454a2d50b --- /dev/null +++ b/files/nl/web/api/element/mouseout_event/index.html @@ -0,0 +1,259 @@ +--- +title: mouseout +slug: Web/Events/mouseout +translation_of: Web/API/Element/mouseout_event +--- +

Het mouseout event wordt uitgevoerd wanneer een aanwijzend apparaat (doorgaans een muis) van het element (of een van zijn children) dat de listener aan zich heeft verbonden,  af is bewogen.  

+ +

Algemene info

+ +
+
Specificatie
+
DOM L3
+
Interface
+
MouseEvent
+
Bubbles
+
Ja
+
Cancelable
+
Ja
+
Target
+
Element
+
Default Action
+
Geen
+
+ +

Eigenschappen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not?
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)A count of consecutive clicks that happened in a short amount of time, incremented by one.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Voorbeeld

+ +

Het volgende voorbeeld illustreert het verschil tussen mouseout en mouseleave events.

+ +
<ul id="test">
+  <li>item 1</li>
+  <li>item 2</li>
+  <li>item 3</li>
+</ul>
+
+<script>
+  var test = document.getElementById("test");
+
+
+  // this handler will be executed only once when the cursor moves off the unordered list
+  test.addEventListener("mouseleave", function( event ) {
+    // highlight the mouseleave target
+    event.target.style.color = "purple";
+
+    // reset the color after a short delay
+    setTimeout(function() {
+      event.target.style.color = "";
+    }, 500);
+  }, false);
+
+
+  // this handler will be executed every time the cursor is moved off a different list-item
+  test.addEventListener("mouseout", function( event ) {
+    // highlight the mouseout target
+    event.target.style.color = "orange";
+
+    // reset the color after a short delay
+    setTimeout(function() {
+      event.target.style.color = "";
+    }, 500);
+  }, false);
+</script>
+
+ +

Browsercompatibiliteit

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Basisondersteuning{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Op disabled formelementen{{CompatVersionUnknown}}[1]{{CompatGeckoDesktop("44.0")}}[2]{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basisondersteuning{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Op disabled formelementen{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Werkt alleen voor {{HTMLElement("textarea")}}-elementen en sommige {{HTMLElement("input")}} element types.

+ +

[2] Geïmplementeerd in {{bug("218093")}}.

+ +

Zie ook

+ + diff --git a/files/nl/web/api/web_storage_api/index.html b/files/nl/web/api/web_storage_api/index.html new file mode 100644 index 0000000000..310129e321 --- /dev/null +++ b/files/nl/web/api/web_storage_api/index.html @@ -0,0 +1,298 @@ +--- +title: DOM Storage +slug: DOM/Storage +translation_of: Web/API/Web_Storage_API +translation_of_original: Web/Guide/API/DOM/Storage +--- +

Samenvatting

+

DOM Storage is de naam van een set opslag-gerelateerde features voor het eerst geïntroduceerd in de Web Applications 1.0-specificatie en nu afgesplitst in zijn eigen W3C Web Storage-specificatie. DOM Storage is ontworpen met als doel een grotere, beter beveiligde en makkelijker te gebruiken alternatief voor opslaan van informatie dan cookies te zijn. Het is geintroduceerd met Firefox 2 en Safari 4.

+
+ Note: DOM Storage is niet hetzelfde als mozStorage (Mozilla's XPCOM interfaces voor SQLite) of Session store API (een XPCOM opslag utility te gebruiken door extensies).
+

Omschrijving

+

Het DOM Storage-mechanisme is een manier om key/value-paren op een veilige manier op te slaan en later ophalen voor gebruik. Het doel van deze toevoeging is om een uitgebreide manier te leveren waardoor het mogelijk wordt om interactieve applicaties te maken (inclusief geavanceerde capaciteiten, zoals het 'offline' kunnen werken voor langere tijd).

+

Op Mozilla-gebaseerde browsers, Internet Explorer 8+, Safari 4+, Chrome en Opera leveren allemaal een werkende implementatie van de DOM Storage-specificatie. (In het geval dat je ook oudere versies van IE ondersteunt, kan het handig zijn om te weten dat er een legacy feature genaamd "userData behavior" in pre-8 versies van IE zit)

+

DOM Storage is handig omdat er geen goede browser-only methode bestaat voor het aanhoudend opslaan van redelijke hoeveelheden data voor een willekeurige tijdsperiode. Browsercookies hebben gelimiteerde capaciteit en geven geen mogelijkheid voor het organiseren van aanhoudende data. Andere methodes (zoals Flash Local Storage) vereisen een externe plugin.

+

Een van de eerste publieke applicaties die gebruik maakt van de nieuwe DOM Storage-functionalitiet (naast Internet Explorer's userData Behavior) was halfnote (een notitieapplicatie) geschreven door Aaron Boodman. In zijn applicatie, sloeg Aaron notities zowel op door middel van een server (als een internetverbinding beschikbaar was) en een lokale dataopslag. Dit maakte het voor de gebruiker mogelijk om veilig opgeslagen notities te maken met een sporadische internetverbinding.

+

Ondanks dat het concept, en implementatie, in halfnote redelijk simpel was, laat de creatie zien wat de mogelijkheden zijn voor een nieuw soort webapplicaties die zowel online als offline bruikbaar zijn.

+

Referentie

+

Het hierop volgende zijn globale objecten die bestaan als een property van elk window object. Dit betekent dat ze aangesproken kunnen worden als sessionStorage of window.sessionStorage. (Dit is belangrijk omdat je hierdoor ze kan gebruiken in IFrames om extra data op te slaan, aan te spreken, buiten wat er direct beschikbaar is in je eigen pagina.)

+

Storage

+

Dit is een constructor (Storage) voor alle Storage instanties (sessionStorage en globalStorage[location.hostname]). Het zetten van Storage.prototype.removeKey = function(key){ this.removeItem(this.key(key)) } zou zowel localStorage.removeKey en sessionStorage.removeKey als zodanig veranderen.

+

globalStorage items zijn geen instanties van Storage, maar zijn instanties van StorageObsolete.

+

Storage is gedefineerd door de WhatWG Storage Interface als het volgende:

+
interface Storage {
+  readonly attribute unsigned long length;
+  [IndexGetter] DOMString key(in unsigned long index);
+  [NameGetter] DOMString getItem(in DOMString key);
+  [NameSetter] void setItem(in DOMString key, in DOMString data);
+  [NameDeleter] void removeItem(in DOMString key);
+  void clear();
+};
+
+
+ Note: Ookal kan je de waardes lezen en schrijven door de standaard JavaScript property access methode, het gebruik van de getItem en setItem methodes wordt aangeraden.
+
+ Note: Onthoud dat alles dat je opslaat via een store beschreven op deze pagina wordt omgezet naar een string via zijn .toString methode voordat het wordt opgeslagen. Een gewoon object opslaan resulteert dus in een string "[object Object]" dat wordt opgeslagen, in plaats van het object of zijn JSON-representatie. Het gebruik van native JSON parsing en serializatie methodes geleverd door de browser is een goede en veelvuldig gebruikte manier om objecten in string formaat op te slaan.
+

sessionStorage

+

Dit is een globaal object (sessionStorage) dat een opslagruimte biedt gedurende de duur van paginasessie. Een paginasessie duurt zolang de browser open is en overleeft het herladen van de pagina en paginarestoraties. Het openen van een pagina in een nieuwe tab of window zorgt ervoor dat een nieuwe sessie wordt gestart.

+
// Sla data op in de huidige sessie store
+sessionStorage.setItem("username", "John");
+
+// Spreek de opgeslagen data aan
+alert( "username = " + sessionStorage.getItem("username"));
+
+

Het sessionStorage object is het handigst voor het bijhouden van tijdelijke data die behouden moet blijven als de pagina per ongeluk wordt herladen.

+

{{ fx_minversion_note("3.5", "Voor Firefox 3.5, werd sessionStorage data niet automatisch hersteld van een browsercrash. Startend vanaf Firefox 3.5, werkt dit zoals per de specificatie.") }}

+

Voorbeelden:

+

Automatisch opslaan van de inhoud van een tekstveld en als de browser per ongeluk herladen wordt, het herstellen van de inhoud van het tekstveld, zodat geen tekst verloren gaat.

+
 // Haal het tekstveld op dat we gaan volgen
+ var field = document.getElementById("field");
+
+ // Kijk of er een autosave waarde is
+ // (Dit gebeurt alleen als de pagina per ongeluk wordt herladen)
+ if ( sessionStorage.getItem("autosave")) {
+    // Herstel de inhoud van het tekstveld
+    field.value = sessionStorage.getItem("autosave");
+ }
+
+ // Bekijk de inhoud van het tekstveld iedere seconde
+ setInterval(function(){
+    // En sla het resultaat op in het sessie storage object
+    sessionStorage.setItem("autosave", field.value);
+ }, 1000);
+
+

Meer informatie:

+ +

localStorage

+

localStorage is hetzelfde als {{ Anch("sessionStorage") }} met dezelfde same-origin regels toegepast, maar is vasthoudend. localStorage werd geintroduceerd in Firefox 3.5.

+
+ Note: Als de browser in prive browsing modus gaat, wordt er een nieuwe, tijdelijke database aangemaakt om lokale dat in op te slaan. Deze database wordt geleegd en weggegooid als prive browsing modus wordt uitgezet.
+

Compatibility

+

Storage objecten zijn een recente toevoeging aan de standaard. Hierdoor is het mogelijk dat ze niet aanwezig zijn in alle browsers. Je kan hier omheen werken door het toevoegen van en van de volgende twee stukken code aan het begin van je scripts. Dit maakt het gebruik van het localStorage object mogelijk in implementaties die het niet native ondersteunen.

+

Dit algoritme is een exacte imitatie van het localStorage object, maar maakt gebruik van cookies.

+
if (!window.localStorage) {
+  Object.defineProperty(window, "localStorage", new (function () {
+    var aKeys = [], oStorage = {};
+    Object.defineProperty(oStorage, "getItem", {
+      value: function (sKey) { return sKey ? this[sKey] : null; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "key", {
+      value: function (nKeyId) { return aKeys[nKeyId]; },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "setItem", {
+      value: function (sKey, sValue) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "length", {
+      get: function () { return aKeys.length; },
+      configurable: false,
+      enumerable: false
+    });
+    Object.defineProperty(oStorage, "removeItem", {
+      value: function (sKey) {
+        if(!sKey) { return; }
+        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      },
+      writable: false,
+      configurable: false,
+      enumerable: false
+    });
+    this.get = function () {
+      var iThisIndx;
+      for (var sKey in oStorage) {
+        iThisIndx = aKeys.indexOf(sKey);
+        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
+        else { aKeys.splice(iThisIndx, 1); }
+        delete oStorage[sKey];
+      }
+      for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
+      for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) {
+        aCouple = aCouples[nIdx].split(/\s*=\s*/);
+        if (aCouple.length > 1) {
+          oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
+          aKeys.push(iKey);
+        }
+      }
+      return oStorage;
+    };
+    this.configurable = false;
+    this.enumerable = true;
+  })());
+}
+
+
+ Note: De maximum grootte van de data dat kan worden opgeslagen is zeer beperkt door het gebruik van cookies.  Met dit algoritme gebruik de functies localStorage.setItem() en localStorage.removeItem() om een key toe te voegen, te veranderen of te verwijderen. Het gebruik van de methodes localStorage.yourKey = yourValue; en delete localStorage.yourKey; om een key te zetten en te verwijderen is niet een veilige manier met deze code. Je kan ook de naam veranderen en het alleen gebruiken om een documents cookies te beheren onafhankelijk van het localStorage object. Door het aanpassen van de  string "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" naar: "; path=/" (en het aanpassen van de naam) wordt dit een sessionStorage polyfill in plaat van een localStorage polyfill.
+

Hier is nog een, minder precieze, imitatie van het localStorage object. Het is simpeler dan de vorige, maar is compatible met oudere browsers, zoals pre-8 versie van IE (werkend getest tot Internet Explorer 6). Het maakt ook gebruik van cookies.

+
if (!window.localStorage) {
+  window.localStorage = {
+    getItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
+      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
+    },
+    key: function (nKeyId) {
+      return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
+    },
+    setItem: function (sKey, sValue) {
+      if(!sKey) { return; }
+      document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+      this.length = document.cookie.match(/\=/g).length;
+    },
+    length: 0,
+    removeItem: function (sKey) {
+      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
+      document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+      this.length--;
+    },
+    hasOwnProperty: function (sKey) {
+      return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
+    }
+  };
+  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
+}
+
+
+ Note:  De maximum grootte van de data dat kan worden opgeslagen is zeer beperkt door het gebruik van cookies. Maak bij dit algoritme gebruik van de functies localStorage.getItem(), localStorage.setItem() and localStorage.removeItem() om een key te krijgen, veranderen of verwijderen. Het gebruik van de methode localStorage.yourKey om een key te krijgen veranderen of verwijderen is niet toegestaan bij deze code. Je kan ook de naam veranderen en het alleen gebruiken om een documents cookies te beheren onafhankelijk van het localStorage object. Door het aanpassen van de  string "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" into: "; path=/"  (en het aanpassen van de naam) wordt dit een sessionStorage polyfill in plaat van een localStorage polyfill.
+

Compatibility en de relatie met globalStorage

+

localStorage is hetzelfde als globalStorage[location.hostname], met de uitzondering dat deze gescoped is naar een HTML5 origin (scheme + hostname + non-standard port) en dat localStorage een instantie is van Storage in tegenstelling tot globalStorage[location.hostname] wat een instantie is van StorageObsolete welke hieronder wordt behandeld. Bijvoorbeeld, http://example.com is niet bereikbaar voor het localStorage object als https://example.com maar ze kunnen hetzelfde globalStorage item aanspreken. localStorage is een standaard interface terwijl globalStorage een non-standaard is, dus dien je niet er van uit te gaan dat deze beschikbaar is.

+

Merk op dat het zetten van een property op globalStorage[location.hostname] deze niet zet op localStorage en dat het uitbreiden van Storage.prototype geen effect heeft op globalStorage items, alleen het uitbreiden van StorageObsolete.prototype werkt.

+

globalStorage

+
+ {{ Non-standard_header }}{{ obsolete_header("13.0") }}
+

globalStorage is verouderd sinds Gecko 1.9.1 (Firefox 3.5) en niet meer ondersteund sinds Gecko 13 (Firefox 13). Gebruik {{ Anch("localStorage") }} ter vervanging. Deze voorgestelde specificatie is verwijderd van de HTML5 specificatie ten gunste van {{ Anch("localStorage") }}, wat geimplementeerd is in Firefox 3.5. Dit is een  globaal object (globalStorage) dat meerdere prive opslag ruimtes bijhoud die gebruikt kunnen worden om data over een langere periode op te slaan (bijv. gedurende meerdere pagina en browser sessies).

+
+ Note: globalStorage is niet een Storage instantie, maar een StorageList instantie dat StorageObsolete instanties bevat.
+
// Sla data op dat alleen scripts op het mozilla.org domein kunnen aanspreken
+globalStorage['mozilla.org'].setItem("snippet", "<b>Hello</b>, how are you?");
+
+

Specifiek, levert het globalStorage object toegang tot een aantal verschillende opslag objecten waar data in kan worden opgeslagen. Bijvoorbeeld, als we een web pagina maakten dat globalStorage gebruikte op dit domein (developer.mozilla.org) dan hadden we de volgende opslag object tot onze beschikking:

+ +

Voorbeelden:

+

Elk van deze voorbeelden vereist dat je een script stopt (met de volgende code) in elke pagina waar je het resultaat wilt zien.

+

Onthoud een gebruikers gebruikersnaam voor het specifieke sub-domein dat wordt bezocht:

+
 globalStorage['developer.mozilla.org'].setItem("username", "John");
+
+

Houd bij hoe vaak een gebruiker een pagina bezoekt op je domein:

+
 // parseInt moet gebruikt worden omdat alle dat als string wordt opgeslagen
+ globalStorage['mozilla.org'].setItem("visits", parseInt(globalStorage['mozilla.org'].getItem("visits") || 0 ) + 1);
+
+

Opslag locatie en weggooien van de data

+

In Firefox de DOM storage data wordt opgeslagen in het webappsstore.sqlite bestand in de profiel folder (er is ook een chromeappsstore.sqlite bestand dat gebruikt wordt om de browsers eigen data op te slaan, met name voor de start pagina - about:home, maar mogelijk ook voor andere interne pagina met "about:" URLs).

+ +

Zie ook clearing offline resources cache.

+

Meer informatie

+ +

Voorbeelden

+ +

Browser compatibility

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
globalStorage{{ CompatNo }}2-13{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}iOS 3.2
+
+

All browsers have varying capacity levels for both local- and sessionStorage. Here is a detailed rundown of all the storage capacities for various browsers.

+
+

Note: since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional clean up, at the behest of the OS, typically if space is short.

+
+ + +
+ {{ HTML5ArticleTOC }}
diff --git a/files/nl/web/api/web_workers_api/using_web_workers/index.html b/files/nl/web/api/web_workers_api/using_web_workers/index.html new file mode 100644 index 0000000000..cd5c32adaa --- /dev/null +++ b/files/nl/web/api/web_workers_api/using_web_workers/index.html @@ -0,0 +1,28 @@ +--- +title: Gebruik DOM workers +slug: Gebruik_maken_van_DOM_workers +tags: + - HeeftTaalgebruikHerzieningNodig +translation_of: Web/API/Web_Workers_API/Using_web_workers +--- +

{{ fx_minversion_header(3.1) }}

+

{{ draft() }}

+
+ Let op: De specificaties voor de DOM workers zijn nog niet volledig.
+

DOM workers maken het mogelijk voor web content om scripts in achtergrond threads uit te voeren. Zodra een worker aangemaakt is kan deze thread berichten sturen door middel van een event handler, die gespecificeerd is door de maker.

+

Een worker thread kan opdrachten uitvoeren zonder de gebruikers interface te storen.

+
+ Notitie: Zoals altijd, background threads — inclusief workers — kunnen geen invloed uit oefenen op de DOM. Als er acties uitgevoerd moeten worden vanuit de background thread, moeten dezen eerst terug gestuurd worden naar de oorsprongkelijke maker (main thread).
+

Het maken van een worker

+

Het maken van een nieuwe worker is simpel. Alles wat je hoeft te doen is de Worker() constructor op te roepen, opgeven van het script dat uitgevoerd moet worden in de background thread. Als je wenst notificaties te ontvangen van de worker, kun je de worker's onmessage property wijzigen naar een event handler functie.

+
var myWorker = new Worker('my_worker.js');
+myWorker.onmessage = function(event) {
+  print("Called back by the worker!\n");
+};
+

Regel 1 in dit voorbeeld maakt en start het uitvoeren van een worker thread. Regel 2 zet de onmessage handler voor de worker naar een functie, dat opgeroepen kan worden als de worker zijn eigen postMessage() functie oproept.

+

Zie ook

+ diff --git a/files/nl/web/api/window.crypto.getrandomvalues/index.html b/files/nl/web/api/window.crypto.getrandomvalues/index.html deleted file mode 100644 index c91a691be9..0000000000 --- a/files/nl/web/api/window.crypto.getrandomvalues/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: window.crypto.getRandomValues -slug: Web/API/window.crypto.getRandomValues -translation_of: Web/API/Crypto/getRandomValues ---- -

{{ ApiRef() }}

-

{{ SeeCompatTable() }}

-

Met deze functie kunt u cryptografisch willekeurige getallen verkrijgen.

-

Syntax

-
window.crypto.getRandomValues(typedArray);
-

Parameters

- - - - - - - - - - - - - -
ParameterDescription
typedArrayInteger-gebaseerde TypedArray. Alle elementen in de array zullen worden overschreven door willekeurige getallen.
-

Beschrijving

-

Als u een integer-gebaseerde TypedArray (d.w.z. een Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array, of Uint32Array) meegeeft, zal de functie de array vullen met cryptografisch willekeurige getallen. Het is de bedoeling dat de browser een sterke (pseudo)willekeurige getalsgenerator gebruikt. Omdat de browser waarschijnlijk slechts een beperkte hoeveelheid entropie heeft, mag de methode een QuotaExceededError geven, als teveel entropie wordt gebruikt.

-

Voorbeeld

-
/* ervanuit gaande dat that window.crypto.getRandomValues beschikbaar is */
-
-var array = new Uint32Array(10);
-window.crypto.getRandomValues(array);
-
-console.log("Uw geluksnummers:");
-for (var i = 0; i < array.length; i++) {
-    console.log(array[i]);
-}
-
-

Browsercompatibiliteit

-

{{ CompatibilityTable() }}

-
- - - - - - - - - - - - - - - - - - - -
KenmerkChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basisondersteuning11.0 {{ webkitbug("22049") }}21.0{{ CompatNo() }}{{ CompatNo() }}3.1
-
-
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroid BrowserChrome (as App)Firefox Mobile (Gecko)IE MobileOpera MobileSafari
Basic support{{ CompatNo() }}2321.0{{ CompatNo() }}{{ CompatNo() }}iOS 6
-
-

Specificatie

- -

See also

- diff --git a/files/nl/web/css/css_color/index.html b/files/nl/web/css/css_color/index.html new file mode 100644 index 0000000000..93bc7ca016 --- /dev/null +++ b/files/nl/web/css/css_color/index.html @@ -0,0 +1,120 @@ +--- +title: CSS Colors +slug: Web/CSS/CSS_Colors +tags: + - CSS + - CSS Colors + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Color +translation_of_original: Web/CSS/CSS_Colors +--- +
{{CSSRef}}
+ +

CSS Colors is a module of CSS that deals with colors, color types and transparency.

+ +

Reference

+ +

Properties

+ +
+ +
+ +

CSS Data Types

+ +

{{cssxref("<color>")}}

+ +

Guides

+ +

None.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Initial definition
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
+ +

See also

+ + diff --git a/files/nl/web/css/css_colors/index.html b/files/nl/web/css/css_colors/index.html deleted file mode 100644 index 93bc7ca016..0000000000 --- a/files/nl/web/css/css_colors/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: CSS Colors -slug: Web/CSS/CSS_Colors -tags: - - CSS - - CSS Colors - - NeedsTranslation - - Overview - - Reference - - TopicStub -translation_of: Web/CSS/CSS_Color -translation_of_original: Web/CSS/CSS_Colors ---- -
{{CSSRef}}
- -

CSS Colors is a module of CSS that deals with colors, color types and transparency.

- -

Reference

- -

Properties

- -
- -
- -

CSS Data Types

- -

{{cssxref("<color>")}}

- -

Guides

- -

None.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Initial definition
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
-
- -

See also

- - diff --git a/files/nl/web/css/css_positioning/understanding_z_index/de_stapelcontext/index.html b/files/nl/web/css/css_positioning/understanding_z_index/de_stapelcontext/index.html deleted file mode 100644 index 2256b38632..0000000000 --- a/files/nl/web/css/css_positioning/understanding_z_index/de_stapelcontext/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: Het stapelverband -slug: Web/CSS/CSS_Positioning/Understanding_z_index/De_stapelcontext -tags: - - CSS - - Geavanceerd - - Gids - - Referentie - - Stapelverband - - z-index -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context ---- -
{{cssref}}
- -

Het stapelverband (stacking context) is een driedimensionale conceptualisatie van HTML-elementen langs de denkbeeldige z-as ten opzichte van de gebruiker, van wie wordt aangenomen dat deze wordt geconfronteerd met de viewport of de webpagina. HTML-elementen bezetten deze ruimte in prioriteitsvolgorde op basis van elementattributen.

- -

Het stapelverband

- -

In het vorige deel van dit artikel, z-index gebruiken, wordt de weergavevolgorde van bepaalde elementen beïnvloed door hun z-indexwaarde. Dit gebeurt omdat deze elementen speciale eigenschappen hebben waardoor ze een stapelverband vormen.

- -

Een stapelverband wordt gevormd, waar dan ook in het document, door elk element in de volgende scenario's:

- - - -

Binnen zo'n stapelverband worden onderliggende elementen gestapeld volgens dezelfde regels die eerder zijn uitgelegd. Belangrijk is dat de z-indexwaarden van de onderliggende stapelverbanden alleen betekenis hebben binnen het stapelverband van hun ouder element. Stapelverbanden worden atomair behandeld als een enkele eenheid in de ouders' stapelverband.

- -

Samengevat:

- - - -
Opmerking: de hiërarchie van stapelverbanden is een subset van de hiërarchie van HTML-elementen, omdat alleen bepaalde elementen stapelverbanden maken. We kunnen zeggen dat elementen die hun eigen stapelverbanden niet creëren, worden geassimileerd door de ouders' stapelverband.
- -

Het voorbeeld

- -

Example of stacking rules modified using z-index

- -

In dit voorbeeld creeërt elk gepositioneerd element zijn eigen stapelverband door hun position en z-index waardes. De hiërarchie van de stapelverbanden is als volgt georganiseerd:

- - - -

Het is belangrijk om op te merken dat DIV #4, DIV #5 en DIV #6 kinderen zijn van DIV #3, dus het stapelen van deze elementen gebeurd volledig binnen DIV #3. Wanneer het stapelen binnen DIV #3 is voltooid, wordt DIV #3 met haar kinderen gestapeld binnen de volgende stapelverband, namelijk die van het root element <html>.

- -
-

Notes:

- - -
- -

Voorbeeld

- -

HTML

- -
<div id="div1">
-  <h1>Division Element #1</h1>
-  <code>position: relative;<br/>
-  z-index: 5;</code>
-</div>
-
-<div id="div2">
-  <h1>Division Element #2</h1>
-  <code>position: relative;<br/>
-  z-index: 2;</code>
-</div>
-
-<div id="div3">
-  <div id="div4">
-    <h1>Division Element #4</h1>
-    <code>position: relative;<br/>
-    z-index: 6;</code>
-  </div>
-
-  <h1>Division Element #3</h1>
-  <code>position: absolute;<br/>
-  z-index: 4;</code>
-
-  <div id="div5">
-    <h1>Division Element #5</h1>
-    <code>position: relative;<br/>
-    z-index: 1;</code>
-  </div>
-
-  <div id="div6">
-    <h1>Division Element #6</h1>
-    <code>position: absolute;<br/>
-    z-index: 3;</code>
-  </div>
-</div>
-
- -

CSS

- -
* {
-  margin: 0;
-}
-html {
-  padding: 20px;
-  font: 12px/20px Arial, sans-serif;
-}
-div {
-  opacity: 0.7;
-  position: relative;
-}
-h1 {
-  font: inherit;
-  font-weight: bold;
-}
-#div1,
-#div2 {
-  border: 1px dashed #696;
-  padding: 10px;
-  background-color: #cfc;
-}
-#div1 {
-  z-index: 5;
-  margin-bottom: 190px;
-}
-#div2 {
-  z-index: 2;
-}
-#div3 {
-  z-index: 4;
-  opacity: 1;
-  position: absolute;
-  top: 40px;
-  left: 180px;
-  width: 330px;
-  border: 1px dashed #900;
-  background-color: #fdd;
-  padding: 40px 20px 20px;
-}
-#div4,
-#div5 {
-  border: 1px dashed #996;
-  background-color: #ffc;
-}
-#div4 {
-  z-index: 6;
-  margin-bottom: 15px;
-  padding: 25px 10px 5px;
-}
-#div5 {
-  z-index: 1;
-  margin-top: 15px;
-  padding: 5px 10px;
-}
-#div6 {
-  z-index: 3;
-  position: absolute;
-  top: 20px;
-  left: 180px;
-  width: 150px;
-  height: 125px;
-  border: 1px dashed #009;
-  padding-top: 125px;
-  background-color: #ddf;
-  text-align: center;
-}
- -

Resultaat

- -

{{ EmbedLiveSample('Example', '100%', '396') }}

- -

Zie ook

- - - -
-

Original Document Information

- - -
diff --git a/files/nl/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/nl/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html new file mode 100644 index 0000000000..2256b38632 --- /dev/null +++ b/files/nl/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -0,0 +1,239 @@ +--- +title: Het stapelverband +slug: Web/CSS/CSS_Positioning/Understanding_z_index/De_stapelcontext +tags: + - CSS + - Geavanceerd + - Gids + - Referentie + - Stapelverband + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +--- +
{{cssref}}
+ +

Het stapelverband (stacking context) is een driedimensionale conceptualisatie van HTML-elementen langs de denkbeeldige z-as ten opzichte van de gebruiker, van wie wordt aangenomen dat deze wordt geconfronteerd met de viewport of de webpagina. HTML-elementen bezetten deze ruimte in prioriteitsvolgorde op basis van elementattributen.

+ +

Het stapelverband

+ +

In het vorige deel van dit artikel, z-index gebruiken, wordt de weergavevolgorde van bepaalde elementen beïnvloed door hun z-indexwaarde. Dit gebeurt omdat deze elementen speciale eigenschappen hebben waardoor ze een stapelverband vormen.

+ +

Een stapelverband wordt gevormd, waar dan ook in het document, door elk element in de volgende scenario's:

+ + + +

Binnen zo'n stapelverband worden onderliggende elementen gestapeld volgens dezelfde regels die eerder zijn uitgelegd. Belangrijk is dat de z-indexwaarden van de onderliggende stapelverbanden alleen betekenis hebben binnen het stapelverband van hun ouder element. Stapelverbanden worden atomair behandeld als een enkele eenheid in de ouders' stapelverband.

+ +

Samengevat:

+ + + +
Opmerking: de hiërarchie van stapelverbanden is een subset van de hiërarchie van HTML-elementen, omdat alleen bepaalde elementen stapelverbanden maken. We kunnen zeggen dat elementen die hun eigen stapelverbanden niet creëren, worden geassimileerd door de ouders' stapelverband.
+ +

Het voorbeeld

+ +

Example of stacking rules modified using z-index

+ +

In dit voorbeeld creeërt elk gepositioneerd element zijn eigen stapelverband door hun position en z-index waardes. De hiërarchie van de stapelverbanden is als volgt georganiseerd:

+ + + +

Het is belangrijk om op te merken dat DIV #4, DIV #5 en DIV #6 kinderen zijn van DIV #3, dus het stapelen van deze elementen gebeurd volledig binnen DIV #3. Wanneer het stapelen binnen DIV #3 is voltooid, wordt DIV #3 met haar kinderen gestapeld binnen de volgende stapelverband, namelijk die van het root element <html>.

+ +
+

Notes:

+ + +
+ +

Voorbeeld

+ +

HTML

+ +
<div id="div1">
+  <h1>Division Element #1</h1>
+  <code>position: relative;<br/>
+  z-index: 5;</code>
+</div>
+
+<div id="div2">
+  <h1>Division Element #2</h1>
+  <code>position: relative;<br/>
+  z-index: 2;</code>
+</div>
+
+<div id="div3">
+  <div id="div4">
+    <h1>Division Element #4</h1>
+    <code>position: relative;<br/>
+    z-index: 6;</code>
+  </div>
+
+  <h1>Division Element #3</h1>
+  <code>position: absolute;<br/>
+  z-index: 4;</code>
+
+  <div id="div5">
+    <h1>Division Element #5</h1>
+    <code>position: relative;<br/>
+    z-index: 1;</code>
+  </div>
+
+  <div id="div6">
+    <h1>Division Element #6</h1>
+    <code>position: absolute;<br/>
+    z-index: 3;</code>
+  </div>
+</div>
+
+ +

CSS

+ +
* {
+  margin: 0;
+}
+html {
+  padding: 20px;
+  font: 12px/20px Arial, sans-serif;
+}
+div {
+  opacity: 0.7;
+  position: relative;
+}
+h1 {
+  font: inherit;
+  font-weight: bold;
+}
+#div1,
+#div2 {
+  border: 1px dashed #696;
+  padding: 10px;
+  background-color: #cfc;
+}
+#div1 {
+  z-index: 5;
+  margin-bottom: 190px;
+}
+#div2 {
+  z-index: 2;
+}
+#div3 {
+  z-index: 4;
+  opacity: 1;
+  position: absolute;
+  top: 40px;
+  left: 180px;
+  width: 330px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+  padding: 40px 20px 20px;
+}
+#div4,
+#div5 {
+  border: 1px dashed #996;
+  background-color: #ffc;
+}
+#div4 {
+  z-index: 6;
+  margin-bottom: 15px;
+  padding: 25px 10px 5px;
+}
+#div5 {
+  z-index: 1;
+  margin-top: 15px;
+  padding: 5px 10px;
+}
+#div6 {
+  z-index: 3;
+  position: absolute;
+  top: 20px;
+  left: 180px;
+  width: 150px;
+  height: 125px;
+  border: 1px dashed #009;
+  padding-top: 125px;
+  background-color: #ddf;
+  text-align: center;
+}
+ +

Resultaat

+ +

{{ EmbedLiveSample('Example', '100%', '396') }}

+ +

Zie ook

+ + + +
+

Original Document Information

+ + +
diff --git a/files/nl/web/css/voor_beginners/index.html b/files/nl/web/css/voor_beginners/index.html deleted file mode 100644 index e2b167686e..0000000000 --- a/files/nl/web/css/voor_beginners/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Voor Beginners -slug: Web/CSS/Voor_Beginners -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started ---- -

-

-

Introductie

-

Deze cursus is een introductie op Cascading Style Sheets (CSS). Het begeleid je door de basis eigenschappen van CSS met praktische voorbeelden die je zelf kan proberen op je eigen computer. Het is opgedeeld in twee delen. -

- - -

Deze cursus is gebaseerd op de CSS 2.1 Specificatie. -

-

Wie zou deze cursus moeten gebruiken?

-

Deze cursus is grotendeels voor beginners, maar je kan het ook gebruiken als je al wat ervaring hebt met CSS. -

Als je een beginner bent met CSS, gebruik dan Deel I van deze cursus om te begrijpen wat CSS is en hoe je het moet gebruiken. Gebruik vervolgens Deel II om te leren hoe je CSS gebruikt in Mozilla. -

Als je al wat CSS kent, kan je de delen van de cursus overslaan die je al kent, en alleen de delen lezen die je interesseren. -

Als je ervaren bent met CSS maar niet in Mozilla, kun je direct naar Deel II gaan. -

-

Wat heb je nodig voordat je begint?

-

Om het beste uit deze cursus te halen, heb je een editor nodig voor tekstbestanden en een Mozilla browser (Firefox of Mozilla Suite). Je moet ook weten hoe je deze moet gebruiken voor basishandelingen. -

Als je geen bestanden wilt veranderen, dan kun je alleen de cursus lezen en naar de plaatjes kijken, maar dat is een minder effectieve manier om te leren. -

Voor een aantal delen van deze cursus kan andere Mozilla software nodig zijn. Als je geen andere Mozilla software wil downloaden hoef je deze delen niet te volgen. -

Let op: CSS zorgt voor een manier om met kleur te werken, dus delen van deze cursus hebben kleuren nodig. Je kunt deze delen van de cursus alleen makkelijk gebruiken als je een kleurenscherm en normaal kleurenzicht hebt. -

-

Hoe je deze cursus moet gebruiken

-

Om deze cursus goed te gebruiken moet je de pagina's aandachtig en in volgorde lezen. Als je een pagina overslaat kan het moeilijk zijn latere pagina's te begrijpen. -

Gebruik de Informatie sectie op elke pagina om te begrijpen hoe CSS werkt. Gebruik de Actie sectie om CSS te proberen op je eigen computer. -

Om je begrip te testen, gebruik de uitdaging aan het einde van elke pagina. Uitkomsten voor sommige van deze uitdagingen worden op latere pagina's in de cursus bekend gemaakt. -

Om dieper in te gaan op CSS, lees de informatie die je kunt vinden in de kaders benoemd "Meer details". Gebruik de links daar om referentiemateriaal te vinden over CSS. -

-

Cursus Deel I

-

Een basis stap-voor-stap gids. -

-
  1. Wat is CSS? -
  2. Waarom CSS Gebruiken? -
  3. Hoe CSS Werkt -
  4. 'Cascading' en nalatenschap -
  5. Selectors -
  6. Leesbaar CSS -
  7. Text Stijlen -
  8. Kleur -
  9. Inhoud -
  10. Lijsten -
  11. Kaders -
  12. Layout -
  13. Tabellen -
  14. Media -
-

Cursus Deel II

-

Voorbeelden die CSS in Mozilla laten zien. -

-
  1. JavaScript -
  2. XBL Bindingen -
  3. CSS en XUL -
  4. CSS en SVG -
  5. XML data -
-{{ languages( { "en": "en/CSS/Getting_Started", "fr": "fr/CSS/Premiers_pas", "ja": "ja/CSS/Getting_Started", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar" } ) }} diff --git a/files/nl/web/events/mousedown/index.html b/files/nl/web/events/mousedown/index.html deleted file mode 100644 index a042336cd2..0000000000 --- a/files/nl/web/events/mousedown/index.html +++ /dev/null @@ -1,234 +0,0 @@ ---- -title: mousedown -slug: Web/Events/mousedown -tags: - - API - - DOM - - Event - - Interface - - NeedsSpecTable - - Referentie -translation_of: Web/API/Element/mousedown_event ---- -
Het mousedown event wordt opgeworpen wanneer de knop van een aanwijs device wordt ingedrukt op een element.
- -

Algemene info

- -
-
Specificatie
-
DOM L3
-
Interface
-
{{domxref("MouseEvent")}}
-
Bubbles
-
Ja
-
Cancelable
-
Ja
-
Doel
-
Element
-
Default Actie
-
Varieert: Start een drag/drop operatie; start een text selectie; start een scroll/pan interactie (in combinatie met de middelste muisknop, indien ondersteund)
-
- -

Eigenschappen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EigenschapTypeBeschrijving
target {{readonlyInline}}{{domxref("EventTarget")}}Het event target (het hoogste target in de DOM boom).
type {{readonlyInline}}{{domxref("DOMString")}}Het type van het event.
bubbles {{readonlyInline}}BooleanOf het event normaalgezien bubblet of niet
cancelable {{readonlyInline}}BooleanKan het event gecancellet worden of niet?
view {{readonlyInline}}{{domxref("WindowProxy")}}{{domxref("document.defaultView")}} (window van het document)
detail {{readonlyInline}}long (float)Het aantal opeenvolgende clicks in een kort inerval, plus een.
currentTarget {{readonlyInline}}{{domxref("EventTarget")}}De node waar de event listener aan hangt.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}}Voor mouseover, mouseout, mouseenter en mouseleave events: target van het complementaire event (mouseleave target in het geval van een mouseenter event). null anders.
screenX {{readonlyInline}}longDe X coordinaat van de muiscursor in globale (scherm) coordinaten.
screenY {{readonlyInline}}longDe Y coordinaat van de muiscursor in globale (scherm) coordinaten.
clientX {{readonlyInline}}longDe X coordinaat van de muiscursor in lokale (DOM inhoud) coordinaten.
clientY {{readonlyInline}}longDe Y coordinaat van de muiscursor in lokale (DOM inhoud) coordinaten.
button {{readonlyInline}}unsigned shortHet getal van de knop die ingedrukt werd toen het event afgevuurd werd: Linkse knop=0, middelste knop=1 (indien aanwezig), rechtse knop=2. Voor muizen geconfigureerd voor linkshandig gebruik, waarbij de knopacties omgekeerd zijn, worden de waarden van rechts naar links gelezen.
buttons {{readonlyInline}}unsigned short -

De knoppen die ingedrukt werden op het moment dat het muisevent afgevuurd werd: Linkse knop=1, Rechtse knop=2, Middelste (wiel) knop=4, 4e knop (typisch, "Browser Back" knop)=8, 5e knop (typisch, "Browser Forward" knop)=16. Indien twee of meer knoppen samen ingedrukt zijn, wordt de logische som van de waarden teruggegeven. B.v., indien zowel de linkse als de rechtse knop ingedrukt worden, wordt 3 teruggeven  (=1 | 2). Meer info.

-
mozPressure {{readonlyInline}}float -

De hoeveelheid druk toegepast op een touch of tabdevice, wanneer het event gegenereerd werd; deze waarde ligt tussen 0.0 (minimale druk) en 1.0 (maximale druk).

-
ctrlKey {{readonlyInline}}booleantrue indien de control toets ingedrukt was wanneer het event gevuurd werd. false indien niet.
shiftKey {{readonlyInline}}booleantrue indien de shift key ingedrukt was wanneer het event gevuurd werd. false indien niet.
altKey {{readonlyInline}}booleantrue indien de alt key ingedrukt was wanneer het event gevuurd werd. false indien niet.
metaKey {{readonlyInline}}booleantrue indien de meta key ingedrukt was wanneer het event gevuurd werd. false indien niet.
- -

Browser compatibiliteit

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Basis support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-

Op disabled form elements

- 		{{CompatVersionUnknown}}[1]{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basis support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Op disabled form elements{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Werkt enkel voor {{HTMLElement("textarea")}} elementen and enkele {{HTMLElement("input")}} element types.

- -

Zie ook

- - diff --git a/files/nl/web/events/mouseout/index.html b/files/nl/web/events/mouseout/index.html deleted file mode 100644 index f454a2d50b..0000000000 --- a/files/nl/web/events/mouseout/index.html +++ /dev/null @@ -1,259 +0,0 @@ ---- -title: mouseout -slug: Web/Events/mouseout -translation_of: Web/API/Element/mouseout_event ---- -

Het mouseout event wordt uitgevoerd wanneer een aanwijzend apparaat (doorgaans een muis) van het element (of een van zijn children) dat de listener aan zich heeft verbonden,  af is bewogen.  

- -

Algemene info

- -
-
Specificatie
-
DOM L3
-
Interface
-
MouseEvent
-
Bubbles
-
Ja
-
Cancelable
-
Ja
-
Target
-
Element
-
Default Action
-
Geen
-
- -

Eigenschappen

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not?
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)A count of consecutive clicks that happened in a short amount of time, incremented by one.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
- -

Voorbeeld

- -

Het volgende voorbeeld illustreert het verschil tussen mouseout en mouseleave events.

- -
<ul id="test">
-  <li>item 1</li>
-  <li>item 2</li>
-  <li>item 3</li>
-</ul>
-
-<script>
-  var test = document.getElementById("test");
-
-
-  // this handler will be executed only once when the cursor moves off the unordered list
-  test.addEventListener("mouseleave", function( event ) {
-    // highlight the mouseleave target
-    event.target.style.color = "purple";
-
-    // reset the color after a short delay
-    setTimeout(function() {
-      event.target.style.color = "";
-    }, 500);
-  }, false);
-
-
-  // this handler will be executed every time the cursor is moved off a different list-item
-  test.addEventListener("mouseout", function( event ) {
-    // highlight the mouseout target
-    event.target.style.color = "orange";
-
-    // reset the color after a short delay
-    setTimeout(function() {
-      event.target.style.color = "";
-    }, 500);
-  }, false);
-</script>
-
- -

Browsercompatibiliteit

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerEdgeOperaSafari
Basisondersteuning{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Op disabled formelementen{{CompatVersionUnknown}}[1]{{CompatGeckoDesktop("44.0")}}[2]{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basisondersteuning{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Op disabled formelementen{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Werkt alleen voor {{HTMLElement("textarea")}}-elementen en sommige {{HTMLElement("input")}} element types.

- -

[2] Geïmplementeerd in {{bug("218093")}}.

- -

Zie ook

- - diff --git a/files/nl/web/guide/html/html5_audio_en_video_gebruiken/index.html b/files/nl/web/guide/html/html5_audio_en_video_gebruiken/index.html deleted file mode 100644 index 86c1b3aa4b..0000000000 --- a/files/nl/web/guide/html/html5_audio_en_video_gebruiken/index.html +++ /dev/null @@ -1,269 +0,0 @@ ---- -title: HTML5 audio en video gebruiken -slug: Web/Guide/HTML/HTML5_audio_en_video_gebruiken -tags: - - Audio - - HTML5 - - Instructie - - Media - - Ogg - - Video - - mp3 - - voorbeeld -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video ---- -

HTML5 introduceert ingebouwde media ondersteuning via de {{ HTMLElement("audio") }} en {{ HTMLElement("video") }} elementen, waarmee het mogelijk wordt om op een eenvoudige manier media in te sluiten in HTML documenten.

- -

Media insluiten

- -

Het insluiten van media in uw HTML document stelt niet zoveel voor:

- -
-
<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
-  Uw browser ondersteunt het element <code>video</code> niet.
-</video>
- -

Dit voorbeeld speelt een sample video van de Theora website inclusief controls voor het afspelen.

- -

En hier is een voorbeeld van het inbedden van een audio element in uw HTML document.

- -
<audio src="/test/audio.ogg">
-<p>Het audio element wordt niet door uw browser ondersteund.</p>
-</audio>
-
- -

The src attribuut bevat een URL van een geluidsbestand of een pad naar een lokaal geluidsbestand.

- -
-
<audio src="audio.ogg" controls autoplay loop>
-<p>Het audio element wordt niet door uw browser ondersteund.</p>
-</audio>
-
- -

Dit voorbeeld van de code gebruikt attributen van het {{ HTMLElement("audio") }} element:

- - - -
-
<audio src="audio.mp3" preload="auto" controls></audio>
-
- -

Het preload attribuut wordt gebruikt in een audio element om grote bestanden te bufferen. U kunt hierbij 3 waarden gebruiken:

- - - -

Meerdere bronbestanden kunnen vastgelegd worden met behulp van het {{ HTMLElement("source") }} element om verschillende formaten in verschillende browsers te ondersteunen voor geluid of beeld. Bijvoorbeeld:

- -
<video controls>
-  <source src="foo.ogg" type="video/ogg">
-  <source src="foo.mp4" type="video/mp4">
-  Het <code>video</code> element wordt niet ondersteund door uw browser.
-</video>
-
- -

In dit voorbeeld wordt het Ogg-bestand afgespeeld in browsers die Ogg ondersteunen. Als de browser dat niet doet, wordt automatisch het MPEG-4-bestand gebruikt. Kijk ook naar de lijst met media formaten die ondersteund worden door de audio en video elementen in de diverse browsers.

- -

U kunt ook opgeven welke codes het mediabestand vereist; dit maakt het mogelijk voor de browser om nog intelligentere beslissingen te nemens:

- -
<video controls>
-  <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
-  Het <code>video</code> element wordt niet ondersteund door uw browser.
-</video>
- -

We hebben hier vastgelegd dat deze via de Dirac en Speex codes gebruikt. Als de browser wel Ogg ondersteund, maar niet deze codes dan zal de video niet laden.

- -

Wanneer het type attribuut niet gespecificeerd is dan wordt het mediatype van de server gehaald en er wordt gecontroleerd of de browser er mee om kan gaan; als het niet weergegeven kan worden, zal de volgende source gecontroleerd worden. Wanneer niet een van de source elementen gebruik kan worden, wordt een error gebeurtenis naar het video element verzonden. Wanneer het type attribuut vastgelegd is, wordt deze vergeleken met de types die de browser kan afspelen en wanneer het niet herkend wordt, zal direct volgende source gecontroleerd worden. Er wordt dan dus niets via de server opgehaald of gecontroleerd.

- -

Bekijk ook Media gebeurtenissen voor een complete lijst van gebeurtenissen die die aan het afspelen van media gekoppeld kunnen worden. Voor details van media formaten die ondersteund worden door de diverse browsers bekijk Media formaten die ondersteund worden door de audio en video elementen.

- -

Het afspelen van media

- -

Als je eenmaal de media hebt ingebed in het HTML document met de nieuwe elementen kun je ze programma-technisch gaan besturen met JavaScript code. Een voorbeeld: om het afspelen te starten of the herstarten, kun je het volgende doen:

- -
var v = document.getElementsByTagName("video")[0];
-v.play();
-
- -

De eerste regel haalt het eerste video-element van het document op en de tweede regel roept de play() methode, zoals deze gedefinieerd is in de {{ interface("nsIDOMHTMLMediaElement") }} interface die gebruikt wordt om media-element te implementeren.

- -

Het besturen van een HTML5 audio element om af te spelen, te pauzeren, het volume te verhogen of te verlagen met gebruik van Javascript is eenvoudig.

- -
<audio id="demo" src="audio.mp3"></audio>
-<div>
-  <button onclick="document.getElementById('demo').play()">Audio afspelen</button>
-  <button onclick="document.getElementById('demo').pause()">Audio pauzeren</button>
-  <button onclick="document.getElementById('demo').volume+=0.1">Volume verhogen</button>
-  <button onclick="document.getElementById('demo').volume-=0.1">Volume verlagen</button>
-</div>
-
- -

Het downloaden van media stoppen

- -

Het afspelen stoppen van media is zo eenvoudig als het aanroepen van de de pause() methode, maar de browser zal blijven downloaden totdat het media-element wordt afgevoerd door de garbage collector.

- -

Bij deze de truck om het downloaden direct te stoppen:

- -
var mediaElement = document.getElementById("myMediaElementID");
-mediaElement.pause();
-mediaElement.src='';
-//or
-mediaElement.removeAttribute("src");
-
- -

Door het src attribuut van het media-element te verwijderen (of deze met een lege string te vullen, dat kan van de browser afhangen) wordt de interne decoder van het element gesloopt en dat zal het downloaden doen stoppen. The specificaties zijn echter nog tamelijk onduidelijk wat betreft het  removeAttribute() scenario en het leegmaken (lege string) van het <video> 'src' attribuut kan een ongewenst verzoek veroorzaken (Mozilla Firefox 22).

- -

Het doorzoeken van media

- -

Media elementen voorzien in ondersteuning van het wijzigen van de afspeelpositie naar specifieke punten in de inhoud van de media. Dit wordt gedaan via het invullen van de eigenschap currentTime  op het element; zie hiervoor {{ domxref("HTMLMediaElement") }} voor meer details over de eigenschappen van een media-element. Zet eenvoudig de waarde op de tijd, in seconden, van de positie waarop het afspelen moet doorgaan.

- -

U gebruikt de eigenschap seekable om het gebied dat beschikbaar is te doorzoeken. De eigenschap retourneert een {{ domxref("TimeRanges") }} object waarbinnen een lijst bestaat met de tijden waarop gezocht kan worden.

- -
var mediaElement = document.getElementById('mediaElementID');
-mediaElement.seekable.start();  // Retourneert de starttijd (in seconden)
-mediaElement.seekable.end();    // Retourneert de einddtijd (in seconden)
-mediaElement.currentTime = 122; // Ga naar 122 seconden
-mediaElement.played.end();      // Retourneert het aantal seconden dat de browser heeft afgespeeld
-
- -

Leg het afspeelgebied vast

- -

Bij het opgeven van de URI van de media voor een {{HTMLElement ("audio")}} of {{HTMLElement ("video")}} element kunt u desgewenst aanvullende informatie geven voor het deel van de media dat afgespeeld moet worden. Om dit te doen, voeg een hekje ("#"), gevolgd door de media fragment beschrijving.
-
- Een tijdsgebied wordt opgegeven met de syntaxis:

- -
#t=[starttime][,endtime]
- -

De tijd kan worden opgegeven als een aantal seconden (als een floating-point waarde) of als een uren / minuten / seconden tijd gescheiden met dubbele punten (zoals 02:05:01 2 uur, 5 minuten en 1 seconde).

- -

Een paar voorbeelden:

- -
-
http://foo.com/video.ogg#t=10,20
-
Laat de video afspelen te beginnen bij 10 seconden en ga door tot en met de 20 seconden.
-
http://foo.com/video.ogg#t=,10.5
-
Speel de video af vanaf het begin tot en met 10,5 seconden.
-
http://foo.com/video.ogg#t=,02:00:00
-
Speel de video af vanaf het begin en voor de duur van 2 uur.
-
http://foo.com/video.ogg#t=60
-
Speel de video af vanaf de 60ste seconden en speel tot het einde.
-
- -
-

The playback range portion of the media element URI specification was added to Gecko 9.0 {{ geckoRelease("9.0") }}. At this time, this is the only part of the Media Fragments URI specification implemented by Gecko, and it can only be used when specifying the source for media elements, and not in the address bar.

-
- -

Uitwijkmogelijkheden

- -

HTML opgenomen tussen bijvoorbeeld de openings- en de sluittags van media-elementen wordt verwerkt door browsers die geen ondersteuning hebben voor HTML5 media. U kunt profiteren van dit feit om alternatieve fallback media te bieden voor die browsers.
-
- Dit gedeelte bevat twee mogelijke fallback opties voor video. Voor elk geval, als de browser HTML5 video ondersteunt, dan wordt die gebruikt; in alle andere gevallen wordt de optie fallback gebruikt.

- -

Het gebruik van Flash

- -

U kunt Flash gebruiken om een Flash-formaat film af te spelen als de {{HTMLElement ("video")}} element niet wordt ondersteund:

- -
<video src="video.ogv" controls>
-    <object data="flvplayer.swf" type="application/x-shockwave-flash">
-      <param value="flvplayer.swf" name="movie"/>
-    </object>
-</video>
- -

NB: gebruik geen classid in het object-tag om compatibel te zijn/blijven met andere browsers dan Internet Explorer.

- -

Ogg videos afspelen met gebruik van een Java applet

- -

Er is een Java appletCortado die je kunt gebruiken las uitwijkmogelijkheid voor het afspelen van Ogg videos in browsers die Java ondersteunen, maar dat niet doen voor HTML5 video:

- -
<video src="my_ogg_video.ogg" controls width="320" height="240">
-  <object type="application/x-java-applet" width="320" height="240">
-     <param name="archive" value="cortado.jar">
-     <param name="code" value="com.fluendo.player.Cortado.class">
-     <param name="url" value="my_ogg_video.ogg">
-     <p>You need to install Java to play this file.</p>
-  </object>
-</video>
- -

Als u geen alternatief kind-element creëert van het cortado object element, zoals het {{HTMLElement ("p")}} element hierboven, dan zullen FireFox 3.5 installaties die de video native behandelen, maar geen Java geïnstalleerd hebben ten onrechte de gebruiker informeren dat ze een plugin moeten installeren om de inhoud op de pagina te bekijken.

- -

{{ h1_gecko_minversion("Foutafhandeling", "2.0") }}

- -

Met ingang van Gecko 2.0 is de foutafhandeling is herzien om te voldoen aan de meest recente versie van de HTML5 specificaties. De error gebeurtenis wordt nu naar afgeleverd bij het kind-element dat behoort bij de bron die de fout laat ontstaan in plaats van bij het media-element zelf.

- -

Dit zorgt er voor dat u kunt bepalen welke bron niet geladen werd, dit kan nuttig zijn. Bekijk deze HTML maar eens:

- -
<video>
-<source id="mp4_src"
-  src="video.mp4"
-  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
-</source>
-<source id="3gp_src"
-  src="video.3gp"
-  type='video/3gpp; codecs="mp4v.20.8, samr"'>
-</source>
-<source id="ogg_src"
-  src="video.ogv"
-  type='video/ogg; codecs="theora, vorbis"'>
-</source>
-</video>
- -

Omdat Firefox MP4 en 3GP niet ondersteunt vanwege principe van patentbezwaren zullen {{ HTMLElement("source") }} elementen met de ID's "mp4_src" en "3gp_src" in een error gebeurtenis lopen voordat de Ogg bron geladen wordt. De bronnen worden uitgevoerd in de volgorde waarin ze staan en wanneer er eenmaal een succesvol geladen is dan worden de overige bronnen helemaal niet meer geraadpleegd.

- -

Detecteren of er geen bronnen zijn geladen

- -

Om vast te stellen dat niet een {{ HTMLElement("source") }} kindelement is geladen kunt u de waarde van het attribuut networkState van het media-element controleren, Wanneer de waarde HTMLMediaElement.NETWORK_NO_SOURCE is dan weet u dat geen van de bronnen geladen is.

- -

Op dat punt gekomen kunt u een andere bron invoegen met behulp van een nieuw {{ HTMLElement("source") }} element als child van het media element en Gecko zal een poging doen om die bron te laden.

- -

Inhoud tonen wanneer geen bron gedecodeerd kon worden

- -

Een andere manier om de fallback inhoud van een video te tonen als geen van de bronnen kan worden gedecodeerd in de huidige browser's is het toevoegenvan foutafhandeling in het laatste bronelement. Dan kunt u de video vervangen met zijn fallback inhoud:

- -
<video controls>
-  <source src="dynamicsearch.mp4" type="video/mp4"></source>
-  <a href="dynamicsearch.mp4">
-    <img src="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS">
-  </a>
-  <p>Klik op de afbeelding om een video demo van een dynamische app zoekopdracht af te spelen</p>
-</video>
-
-
- -
var v = document.querySelector('video'),
-    sources = v.querySelectorAll('source'),
-    lastsource = sources[sources.length-1];
-lastsource.addEventListener('error', function(ev) {
-  var d = document.createElement('div');
-  d.innerHTML = v.innerHTML;
-  v.parentNode.replaceChild(d, v);
-}, false);
-
- -

Bekijk ook

- - diff --git a/files/nl/web/javascript/aan_de_slag/index.html b/files/nl/web/javascript/aan_de_slag/index.html deleted file mode 100644 index 35b2bd97f9..0000000000 --- a/files/nl/web/javascript/aan_de_slag/index.html +++ /dev/null @@ -1,339 +0,0 @@ ---- -title: Aan de slag (Handleiding Javascript) -slug: Web/JavaScript/Aan_de_slag -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics -translation_of_original: Web/JavaScript/Getting_Started ---- -

Waarom JavaScript?

-

JavaScript is een krachtige, ingewikkelde, en vaak misbegrepen programmeertaal. Het maakt het mogelijk om snel programma's te ontwikkelen waarin gebruikers direct informatie kunnen invullen en het resultaat kunnen zien.

-

Het voornamelijke voordeel van JavaScript, ook wel bekend als ECMAScript, is dat het rond de Web browser draait en daardoor de mogelijkheid heeft om dezelfde resultaten te produceren op alle platformen die door de browser ondersteund worden. De voorbeelden op deze pagina, net als Google Maps, draait op Linux, Windows, en Mac OS. Met de recente groei van vele JavaScript bibliotheken is het nu nog makkelijker om door een document te navigeren, DOM elementen te selecteren, animaties te maken, gebeurtenissen af te handelen en Ajax applicaties te ontwikkelen. In tegenstelling tot de hype rondom andere technologieën die private interesses hebben is Javascript eigenlijk de enige client-side taal die op meerde platformen draait en tegelijkertijd gratis is en universeel geaccepteerd.

-

Wat je al zou moeten weten

-

JavaScript is een taal waar je makkelijk mee kunt beginnen. Alles wat je nodig hebt is een tekstverwerker en een Web browser.

-

Er zijn vele andere technologieën die geïntegreerd kunnen worden met JavaScript, dit valt echter buiten het bestek van dit document. Verwacht niet dat je direct een enorme applicatie als Google Maps kunt maken op jouw eerste dag!

-

Aan de slag

-

Beginnen met JavaScript is erg makkelijk. Je hoeft geen ingewikkelde ontwikkelprogramma's geïnstalleerd te hebben. Je hoeft niet te weten hoe je een shell moet gebruiken, hoe je Make programmeert of hoe je een compiler moet gebruiken. JavaScript wordt geïnterpreteerd door jour Web browser. Alles wat je moet doen is een programma als tekstbestand opslaan en het openen in jouw Web browser. Dat is alles!

-

JavaScript is een uitstekende programmeertaal voor beginners. Het maakt het mogelijk om direct resultaten te tonen aan de nieuwe leerling en leert hen over hulpmiddelen die zij waarschijnlijk nuttig vinden in het dagelijks leven. Dit staat in contrast met talen als C, C++ en Java die eigenlijk alleen nuttig zijn voor toegewijde software ontwikkelaars.

-

Browser compatibiliteitsproblemen

-

Er zijn variaties in de beschikbare functionaliteit in verschillende browsers. Mozilla Firefox, Microsoft Internet Explorer (MSIE of kortweg IE), Apple Safari en Opera verschillen in gedrag. We zijn van plan om deze afwijkingen te documenteren. Deze problemen kun je verminderen door het gebruik van de verschijnende cross-platform JavaScript APIs. Deze APIs bieden veelgebruikte functionaliteit en verbergen de afwijkingen voor jou.

-

Het proberen van voorbeelden

-

De onderstaande voorbeelden bevatten wat codes. Er zijn vele manieren om deze uit te proberen. Als je al een eigen website hebt, dan kun je deze als nieuwe webpagina's opslaan op jouw website.

-

Als je nog geen eigen website hebt, dan kun je deze voorbeelden opslaan als bestanden op de computer, en deze openen in jouw huidige Web browser. Hierdoor is JavaScript ook zo'n gemakkelijke taal voor beginnende programmeurs. Je hebt geen compiler of ontwikkelomgeving nodig; alles wat je nodig hebt is een browser en jijzelf!

-

Voorbeeld: een muisklik opvangen

-

De details over het afhandelen van events (NL: gebeurtenissen; details zoals event typen, het registreren van verwerkers, doorgifte, enz.) zijn te uitgebreid om in dit simpele voorbeeld te behandelen. Echter, dit voorbeeld kan niet het vangen van een muisklik demonstreren zonder een beetje in te gaan op het gebeurtenissens systeem van JavaScript. Houd echter in het achterhoofd dat dit voorbeeld de volledige details over JavaScript gebeurtenissen weglaat. Als je meer te weten wilt komen naast de beginselen die hier worden beschreven, lees meer over het gebeurtenissen systeem van JavaScript.

-

'Muis' gebeurtenissen zijn een deelverzameling van alle gebeurtenissen die een browser genereert als reactie op acties van de gebruiker. De volgende gebeurtenissen kunnen afgegeven worden als reactie op een muis actie:

- -

Merk op dat inline event handlers (ingesloten gebeurtenissenverwerkers, oftewel datgene dat toegevoegd is als attribuut voor een HTML element) normaliter met kleine letters geschreven zijn en dat deze in een script altijd met kleine letters geschreven moeten zijn.

-

De meest simpele methode om deze gebeurtenissen af te vangen (in HTML), het registreren van event handlers is door individuele gebeurtenissen als attributen op te geven voor het element. Voorbeeld:

-
  <span onclick="alert('Hallo Wereld!');">Klik Hier</span>
-

De JavaScript code die je wilt uitvoeren kan ingesloten worden als attribuut waarde, of je kunt deze aanroepen als een functie. Deze functie zou dan eerder geregistreerd moeten zijn in een <script> blok op de HTML pagina:

-
<script>
-  function clickHandler() {
-    alert("Hallo, Wereld!");
-  }
-</script>
-<span onclick="clickHandler();">Klik Hier</span>
-

Daarnaast is een gebeurtenisobject beschikbaar waarmee de ontwikkelaar toegang kan verkrijgen tot details van de gebeurtenis, zoals het element dat de gebeurtenis heeft ontvangen, het type van de gebeurtenis en welke muisknop werd ingedrukt. Uitbreidend op het eerdere voorbeeld:

-
<script>
-  function clickHandler(event) {
-    var eType = event.type;
-    /* het volgende stuk is voor compatibiliteit met oude IE versies */
-    /* Standaardbrowsers stellen de 'target' eigenschap in van het 'event' object */
-    /* IE 8 en ouder gebruikt de 'srcElement' eigenschap */
-    var eTarget = event.target || event.srcElement;
-
-    alert( "Opgevangen Gebeurtenis (type=" + eType + ", doel=" + eTarget );
-  }
-</script>
-<span onclick="clickHandler(event);">Klik Hier</span>
-

Naast het registreren voor het ontvangen van gebeurtenissen in jouw HTML code kun je dezelfde attributen voor elke HTMLElement object instellen in de JavaScript code. Het onderstaande voorbeeld creërt een zogenaamde 'span' object, voegt deze toe aan de pagina en registreert tenslotte functies voor het 'span' object waarmee enkele muisgebeurtenissen kunnen worden ontvangen.

-
<body></body>
-<script>
-  function mouseeventHandler(event) {
-    /* het volgende stuk is voor compatibiliteit met oude IE versies */
-    /* IE geeft standaard NIET het event object door. */
-    /* Verkrijg eeb referentie tot de event als het niet gegeven was */
-    if (!event) event = window.event;
-
-    /* verkrijg de gebeurtenis type en doel zoals eerder beschreven */
-    var eType = event.type;
-    var eTarget = event.target || event.srcElement;
-    alert(eType + ' gebeurtenis op element met ID: ' + eTarget.id);
-  }
-
- function onloadHandler() {
-   /* verkrijg een referentie naar de 'body' element op de pagina */
-   var body = document.body;
-   /* maak een 'span' element aan die aangeklikt moet worden */
-   var span = document.createElement('span');
-   span.id = 'VoorbeeldSpan';
-   span.appendChild(document.createTextNode('Klik Hier!'));
-
-   /* registreer enkele functies op het span object om gebeurtenissen
-      af te handelen. Merk op dat de namen van de events (on...) per se
-      kleingeschreven moeten zijn terwijl de handlers elke naam kunnen
-      aannemen.
-   */
-   span.onmousedown = mouseeventHandler;
-   span.onmouseup = mouseeventHandler;
-   span.onmouseover = mouseeventHandler;
-   span.onmouseout = mouseeventHandler;
-
-   /* weergeef de span element op de pagina */
-   body.appendChild(span);
-}
-
-// doordat we de handler vervangen, en niet aanroepen, hebben we GEEN '()' nodig
-// na de functie naam.
-window.onload = onloadHandler;
-</script>
-

Voorbeeld: een toetsenbord gebeurtenis opvangen

-

Het vangen van een toetsenbordgebeurtenis is vergelijkbaar met het bovenstaande "opvangen van een muisklik" voorbeeld, en maakt gebruik van het gebeurtenissen systeem in JavaScript. Toetsenbord gebeurtenissen worden afgevuurd wanneer een toets van het toetsenbord wordt gebruikt.

-

Het aantal gebeurtenissen die optreden als reactie voor een toetsenbord actie is veel kleiner vergeleken met die voor een muis:

- -

Bij een keypress gebeurtenis is de Unicode waarde van de ingedrukte toets opgeslagen in óf de keyCode, óf de charCode eigenschap. Als de toets een karakter genereert (bijv. 'a'), dan bevat charCode de code van dat teken, hierbij wordt rekening gehouden met hoofdletters (d.w.z. dat er rekening wordt gehouden of de Shift toets ingedrukt is). In andere gevallen is de code van de ingedrukte toets beschikbaar in keyCode.

-

De meest simpele methode om toetsenbord gebeurtenissen op te vangen is weer doot het registreren van event handlers in HTML. Hierbij wordt weer een individuele gebeurtenis opgegeven als attribuut voor het HTML element:

-
  <input type="text" onkeypress="alert('Hallo Wereld!');">
-
-

Zoals bij muis gebeurtenissen kun je zowel inline JavaScript code gebruiken in het attribuut, of een functie aanroepen die eerder in een <script> block gedefinieërd was:

-
<script>
-  function keypressHandler() {
-    alert("Hallo, Wereld!");
-  }
-</script>
-
-<input onkeypress="keypressHandler();">
-
-

Het opvangen van de gebeurtenis en het aflezen van de ingedrukte toets kan worden gedaan op een soortgelijke manier als bij muis gebeurtenissen:

-
<script>
-  function keypressHandler(evt) {
-      var eType = evt.type; // Zal "keypress" bevatten als event type
-      /* hier zullen we weer een cross-browser methode gebruiken
-         Iedereen gebruikt 'which', behalve IE 8 en ouder, die gebruikt 'keyCode'
-         De voorwaardelijke, ternary operator kan hier goed gebruikt worden */
-      var keyCode = evt.which ? evt.which : evt.keyCode;
-      var eCode = 'keyCode is ' + keyCode;
-      var eChar = 'charCode is ' + String.fromCharCode(keyCode); // of evt.charCode
-      alert("Opgevangen Gebeurtenis (type=" + eType + ", Unicode waarde van toets=" + eCode + ", ASCII waarde=" + eChar + ")");
-   }
-</script>
-<input onkeypress="keypressHandler(event);">
-

Het opvangen van alle toetsen op een pagina kan worden gedaan door het registreren van event handlers op het niveau van het document:

-
<script>
-  document.onkeypress = keypressHandler;
-  document.onkeydown = keypressHandler;
-  document.onkeyup = keypressHandler;
-</script>
-

Hier is een compleet voorbeeld dat het gebruik van toetsenborden gebeurtenissen weergeeft:

-
<!DOCTYPE html>
-<html>
-<head>
-  <script>
-    var metaChar = false;
-    var voorbeeldToets = 16;
-    function keyEvent(event) {
-      var key = event.keyCode || event.which; // alternatief voor ternary - als er geen keyCode is, gebruik which
-      var keychar = String.fromCharCode(key);
-      if (key == voorbeeldToets) {
-        metaChar = true;
-      }
-      if (key != voorbeeldToets) {
-        if (metaChar) {
-          alert("Combinatie met Meta + " + keychar)
-          metaChar = false;
-        } else {
-          alert("Ingedrukte toets: " + key);
-        }
-      }
-    }
-    function metaKeyUp(event) {
-      var key = event.keyCode || event.which;
-      if (key == exampleKey) { metaChar = false; }
-    }
-  </script>
-</head>
-<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)">
-    Druk een willekeurige toets!
-</body>
-</html>
-

Browser bugs and eigenaardigheden

-

De twee beschreven eigenschappen van toetsen gebeurtenissen zijn keyCode en charCode. In simpele termen, keyCode verwijst naar de werkelijke toets dat door de gebruiker ingedrukt werd terwijl charCode de ASCII waarde van de toets weergeeft. Deze twee waarden hoeven niet gelijk te zijn; een kleine letter 'a' en een hoofdletter 'A' hebben dezelfde keyCode omdat de gebruiker dezelfde toets indrukt, maar een andere charCode omdat de resulterende teken verschilt.

-

De manier waarmee verschillende browser met charCode omgaan is niet overal consistent. Als voorbeeld, Internet Explorer en Opera ondersteunen charCode niet. Aan de andere kant geven ze de karakter informatie in keyCode, maar alleen bij de onkeypress event. De keyCode eigenschap levert voor onkeydown and onkeyup events informatie op over de toets. Firefox gebruikt een ander woord, namelijk "which" welke het verschil in de teken kan onderscheiden.

-

Lees in de Mozilla Documentatie over Keyboard Events (en) voor een uitgebreidere behandeling van toetsenbord gebeurtenissen.

-

Voorbeeld: rondslepen van afbeeldingen

-

In het volgende voorbeeld is het mogelijk om een afbeelding in een pagina rond te slepen:

-
<!DOCTYPE html>
-<html>
-<head>
-<style>
-img { position: absolute; }
-</style>
-
-<script>
-// declareer globale variablen die hieronder wordt gebruikt.
-var mouseover, posLinks, posBoven, xCoord, yCoord;
-
-window.onload = function() {
-
-  movMeId = document.getElementById("ImgMov");
-  movMeId.style.top = "80px";
-  movMeId.style.left = "80px";
-
-  document.onmousedown = coordinates;
-  document.onmouseup = mouseup;
-
-  function coordinates(e) {
-    if (e == null) { e = window.event;}
-
-    // e.srcElement bevat het doel element in IE8 en ouder,
-    // e.target wordt gebruikt in standaardbrowsers (inclusief Firefox)
-    // Beide eigenschappen geven het HTML element waarin het event optrad
-
-    var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;
-
-    if (sender.id == "ImgMov") {
-       mouseover = true;
-       posLinks = parseInt(movMeId.style.left);
-       posBoven = parseInt(movMeId.style.top);
-       xCoord = e.clientX;
-       yCoord = e.clientY;
-       document.onmousemove = moveImage;
-       return false;
-    } else {
-       return false;
-    }
-  }
-
-  function moveImage(e) {
-    if (e == null) { e = window.event; }
-    movMeId.style.left = posLinks + e.clientX - xCoord + "px";
-    movMeId.style.top = posBoven + e.clientY - yCoord + "px";
-    return false;
-  }
-
-  function mouseup(e) {
-    // voorkom dat de moveImage functie wordt aangeroepen door de
-    // gebeurtenis registratie te verwijderen.
-    document.onmousemove = null;
-  }
-}
-</script>
-</head>
-
-<body>
-  <img id="ImgMov" src="http://placehold.it/100x100&text=JS" width="64" height="64">
-  <p>Sleep en zet het plaatje op deze pagina neer</p>
-</body>
-
-</html>
-

Voorbeeld: vergroot of verklein objecten

-
-

Voorbeeld waarbij de grootte van een afbeelding wordt gewijzigd (de originele afbeelding wordt niet gewijzigd, enkel hoe deze op de pagina weergeven wordt).

- 
  <!DOCTYPE html>
-  <html>
-    <head>
-      <style>
-        #resizeImage {
-          margin-left: 100px;
-        }
-      </style>
-      <script>
-      window.onload = function() {
-
-        var resizeId = document.getElementById("resizeImage");
-        var resizeStartCoordsX,
-            resizeStartCoordsY,
-            resizeEndCoordsX,
-            resizeEndCoordsY;
-
-        var resizeEndCoords;
-        var resizing = false;
-
-        document.onmousedown = coordinatesMousedown;
-        document.onmouseup = coordinatesMouseup;
-
-        function coordinatesMousedown(e) {
-          if (e == null) {
-            e = window.event;
-          }
-
-          var element = (typeof( window.event ) != 'undefined' ) ? e.srcElement : e.target;
-
-          if (element.id == "resizeImage") {
-            resizing = true;
-            resizeStartCoordsX = e.clientX;
-            resizeStartCoordsY = e.clientY;
-          }
-          return false;
-        }
-
-        function coordinatesMouseup(e) {
-          if (e == null) {
-            e = window.event;
-          }
-
-          if (resizing === true) {
-            var currentImageWidth = parseInt(resizeId.width);
-            var currentImageHeight = parseInt(resizeId.height);
-
-            resizeEndCoordsX = e.clientX;
-            resizeEndCoordsY = e.clientY;
-
-            resizeId.style.height = currentImageHeight - (resizeStartCoordsY - resizeEndCoordsY) + 'px';
-            resizeId.style.width = currentImageWidth - (resizeStartCoordsX - resizeEndCoordsX) + 'px';
-
-            resizing = false;
-          }
-          return false;
-        }
-      }
-      </script>
-    </head>
-
-    <body>
-      <img id="resizeImage" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png"
-width="64" height="64">
-      <p>Klik op het plaatje en sleep om de grootte te wijzigen.</p>
-    </body>
-
-  </html>
-
-

Voorbeeld: lijnen tekenen

-
<!DOCTYPE html>
-<html>
-<head>
-<script>
-function linedraw(ax,ay,bx,by)
-{
-    if(ay>by)
-    {
-        bx=ax+bx;
-        ax=bx-ax;
-        bx=bx-ax;
-        by=ay+by;
-        ay=by-ay;
-        by=by-ay;
-    }
-    var calc=Math.atan((ay-by)/(bx-ax));
-    calc=calc*180/Math.PI;
-    var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by));
-    document.body.innerHTML += "<div id='line' style='height:" + length + "px;width:1px;background-color:black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc  + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;'></div>"
-}
-</script>
-</head>
-<body onload=linedraw(200,400,500,900);> <!-- Replace with your co-ordinate -->
-</body>
-</html>
-

 

diff --git a/files/nl/web/javascript/guide/regular_expressions/index.html b/files/nl/web/javascript/guide/regular_expressions/index.html new file mode 100644 index 0000000000..7b37d5ed31 --- /dev/null +++ b/files/nl/web/javascript/guide/regular_expressions/index.html @@ -0,0 +1,757 @@ +--- +title: Reguliere Expressies +slug: Web/JavaScript/Guide/Reguliere_Expressies +tags: + - JavaScript + - RegExp + - regex + - reguliere expressies +translation_of: Web/JavaScript/Guide/Regular_Expressions +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}
+ +

Reguliere expressies zijn patronen om combinaties van karakters in strings mee te vinden. In JavaScript zijn reguliere expressies ook objecten. Deze patronen worden gebruikt met de  {{jsxref("RegExp.exec", "exec")}} en {{jsxref("RegExp.test", "test")}} methoden van {{jsxref("RegExp")}}, en met de {{jsxref("String.match", "match")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}, en {{jsxref("String.split", "split")}} methoden van {{jsxref("String")}}. Dit hoofdstuk beschrijft reguliere expressies in JavaScript.

+ +

Een reguliere expressie maken

+ +

Een reguliere expressie kan op een van twee manieren gemaakt worden:

+ +

Met behulp van een letterlijke reguliere expressie, die bestaat uit een patroon tussen slash-karakters:

+ +
var re = /ab+c/;
+
+ +

Letterlijke reguliere expressies worden gecompileerd op het moment dat het script geladen is. Als de reguliere expressie constant blijft kan dit de prestaties verbeteren.

+ +

Of door de constructor-functie van het {{jsxref("RegExp")}} object te gebruiken, op de volgende manier:

+ +
var re = new RegExp('ab+c');
+
+ +

Het gebruik van de constructor-functie biedt runtime-compilatie van de reguliere expressie. Gebruik de constructor functie als je weet dat het reguliere expressie patroon zal veranderen, of als je het patroon niet weet en uit een andere bron krijgt, zoals input van een gebruiker.

+ +

Typen speciale karakters

+ +
+
Stellingen
+
Geven op een bepaalde manier aan dat een overeenkomst mogelijk is. Stellingen bevatten 'lookahead', 'lookbehind' en conditionele expressies.
+
Grenzen
+
Wijzen op de begin- en eindpunten van regels en woorden.
+
Karakter Klassen
+
Differentieer tussen verschillende soorten karakters zoals, bijvoorbeeld, tussen letters en cijfers.
+
Groepen en Bereiken
+
Geef groepen en bereiken van expressie karakters aan.
+
Kwantificeerders
+
Geef hoeveelheden karakters of expressies aan om te vinden.
+
Unicode Eigenschappen
+
Differentieer op basis van unicode karakter eigenschappen zoals, bijvoorbeeld, hoofd- en kleine letters, wiskundige symbolen, en punctuatie.
+
+ +

Een reguliere expressie schrijven

+ +

Een reguliere expressie bestaat uit eenvoudige karakters zoals /abc/, of een combinatie van eenvoudige en speciale karakters, zoals /ab*c/ of /Hoofdstuk (\d+)\.\d*/. Het laatste voorbeeld bevat haakjes die gebruikt worden als geheugen mechanisme. De overeenkomst die met dit deel gemaakt is wordt onthouden voor later gebruik., zoals beschreven in Using parenthesized substring matches.

+ +

Eenvoudige patronen gebruiken

+ +

Eenvoudige patronen bestaan uit karakters waarvoor je een directe overeenkomst wilt vinden. Het patroon /abc/ bijvoorbeeld komt alleen overeen met karakter combinaties als de karakters 'abc' samen voorkomen in exact die volgorde. Zo'n overeenkomst zou successvol zijn in de strings "Hi, do you know your abc's?" en "The latest airplane designs evolved from slabcraft." In beide gevallen is de overeenkomst de substring 'abc'. Er is geen overeenkomst met de string 'Grab crab' omdat hoewel het de substring 'ab c' bevat, het niet de precieze substring 'abc' bevat.

+ +

Speciale karakters gebruiken

+ +

Als het zoeken naar een overeenkomst meer vergt dan een directe overeenkomst, zoals het vinden van een of meerdere b's, of het vinden van witregels/ruimte, bevat het patroon speciale karakters. Het patroon /ab*c/ bijvoorbeeld komt overeen met elke combinatie karakters waarbij een enkele 'a' gevolgd wordt door nul of meerdere b's. (* betekent 0 of meer gevallen van het voorgaande item) en dan onmiddelijk gevolgd door 'c'. In de string "cbbabbbbcdebc," komt het patroon overeen met de substring 'abbbbc'.

+ +

Onderstaande tabel geeft een volledige lijst en beschrijving van de speciale karakters die gebruikt kunnen worden in reguliere expressies.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Speciale karakters in reguliere expressies
KarakterBetekenis
\ +

Matched volgens de volgende regels:
+
+ Een backslash die voorafgaat aan een niet-speciaal karakter geeft aan dat het volgende karakter speciaal is en niet letterlijk moet worden geïnterpreteerd. Bijvoorbeeld, een 'b' zonder een voorafgaande '\' matched kleine-letter b's waar die ook voorkomen  — Het karakter zal letterlijk worden geïnterpreteerd. Maar de opeenvolging van '\b' komt niet overeen met wat voor karakter dan ook; het duidt op een woordgrens.
+
+ Een backslash die voorafgaat aan een speciaal karakter geeft aan dat het volgende karakter niet speciaal is en letterlijk moet worden geïnterpreteerd. Bijvoorbeeld, het patroon /a*/ vertrouwt op het speciale karakter '*' om 0 of meerdere a's te matchen. Het patroon /a\*/ in contrast, noteert de '*'  als niet-speciaal, wat matches met strings zoals 'a' mogelijk maakt.

+ +

Vergeet niet om de \ zelf te escapen bij het gebruiken van de RegExp("patroon") notatie — \ is ook een escape karakter in strings.

+
^Matched het begin van de input. Matched ook direct na een line break karakter als de multiline vlag ingesteld is op 'true'.
+
+ Als voorbeeld, /^A/ matched niet de 'A' in "uit Amsterdam", maar matched wel de 'A' in "Apenstaartje".
+
+ De '^' heeft een verschillende betekenis wanneer het voorkomt als het eerste karakter in een karakterset patroon. Zie complemented character sets voor details en een voorbeeld.
$ +

Matched het einde van de input. Matched ook direct voor een line break karakter als de multiline vlag is ingesteld.

+ +

Als voorbeeld, /t$/ matched niet de 't' in "beter", maar matched wel in "beet".

+
* +

Matched de voorafgaande expressie 0 of meerdere malen. Equivalent aan {0,}.

+ +

Als voorbeeld, /bo*/ matched 'boo' in "de grote boom" en 'b' in "bar" maar niets in "hallo".

+
+ +

Vind de voorafgaande expressie 1 of meerdere malen. Equivalent aan {1,}.

+ +

Als voorbeeld, /a+/ matched de 'a' in "pan" and alle a's in "haaaaaaatsjoe", maar niets in "zzp".

+
? +

Matched de voorafgaande expressie 0 of 1 maal. Equivalent aan {0,1}.
+
+ Als voorbeeld, /e?le?/ matched de 'el' in "angel" en de 'le' in "angle" en ook de 'l' in "oslo".

+ +

Als het direct na de quantifiers  *, +, ?, or {} wordt gebruikt maakt het deze niet-gretig (matched het minst mogelijke aantal karakters), in tegenstelling tot de standaard, die gretig is (matched zo veel mogelijk karakters als mogelijk). Bijvoorbeeld, /\d+/ toepassen op "123abc" matched "123". Echter, /\d+?/ toepassen op diezelfde string matched alleen de "1".

+ +

Wordt ook gebruikt in lookahead stellingen, zoals beschreven in de (x(?=y) en  (x(?!y) van deze tabel.
+  

+
. +

(De decimale punt) matched welk individueel karakter dan ook, met uitzondering van de newline.

+ +

Als voorbeeld, /.n/ matched 'an' and 'on' in "nay, an apple is on the tree", maar niet 'nay'.

+ +

Wanneer de s ("dotAll") vlag is ingesteld op 'true' matched het ook newline karakters.

+
(x) +

Matched 'x' en onthoudt de match, zoals het volgende voorbeeld toont. De haakjes worden capturing parentheses genoemd
+
+ De '(foo)' en '(bar)' in het patroon /(foo) (bar) \1 \2/ matchen en onthouden de eerste twee woorden in de string "foo bar foo bar". De \1 en \2  geven de eerste en tweede substring matches tussen haakjes weer - foo and bar, en matchen de laatste twee woorden van de string. Let op dat \1, \2, ..., \n worden gebruikt in het matchende gedeelte van de regex, voor meer informatie, zie \n beneden. In het vervangings gedeelte van een regex moet de syntax $1, $2, ..., $n worden gebruikt, e.g.: 'bar foo'.replace(/(...) (...)/, '$2 $1').  $& betekent de gehele gevonden string.

+
(?:x)Matched 'x' maar onthoudt de match niet. De haakjes heten non-capturing haakjes, en maken het mogelijk om sub-expressies te definiëren voor regular expression operators om mee te werken.  Overweeg de voorbeeld expressie /(?:foo){1,2}/. Als de expressie /foo{1,2}/ was, zouden de {1,2} karakters alleen van toepassing zijn op de laatste 'o' in 'foo'. met de non-capturing haakjes, is {1,2} van toepassing op het gehele woord 'foo'. Voor meer informatie, zie Using parentheses.
x(?=y) +

Matched  'x' alleen als 'x' gevolgd wordt door 'y'. Dit heet een 'lookahead'.

+ +

Als voorbeeld, /Jack(?=Sprat)/ matched alleen 'Jack' als het gevolgd wordt door 'Sprat'. /Jack(?=Sprat|Frost)/ matched alleen 'Jack' als het gevolgd wordt door 'Sprat' of 'Frost'. Echter, noch 'Sprat' noch 'Frost' is onderdeel van de match resultaten.

+
x(?!y) +

Matched 'x' alleen als 'x' niet gevolgd wordt door 'y'. Dit heet een negated lookahead.

+ +

Als voorbeeld, /\d+(?!\.)/ matched alleen een nummer als het niet gevolgd wordt door een decimale punt. De reguliere expressie /\d+(?!\.)/.exec("3.141") matched '141' maar niet '3.141'.

+
(?<=y)x +

Matched x alleen als x wordt voorafgegaan door y.Dit heet een 'lookbehind'.

+ +

Als voorbeeld, /(?<=Jack)Sprat/ matched "Sprat" alleen als het wordt voorafgegaan door "Jack".
+ /(?<=Jack|Tom)Sprat/ matched "Sprat" alleen als het wordt voorafgegaan door "Jack" or "Tom".
+ Echter, noch "Jack" noch "Tom" maken deel uit van de match resultaten.

+
(?<!y)x +

Matched x alleen als x niet wordt voorafgegaan door y. Dit heet een 'negated lookbehind'.

+ +

Als voorbeeld, /(?<!-)\d+/ matched een nummer alleen als het niet wordt voorafgegaan door een min-teken.
+ /(?<!-)\d+/.exec('3') matched "3".
+  /(?<!-)\d+/.exec('-3')  wordt niet gevonden omdat aan het nummer een min-teken voorafgaat.

+
x|y +

Matched 'x', of 'y' (indien er geen match is voor 'x').

+ +

Als voorbeeld, /groene|rode/ matched 'groene' in "groene appel" en 'rode' in "rode appel." De volgorde van 'x' en 'y' maakt uit. a*|b matched bijvoorbeeld de lege string in "b", maar b|a* matched "b" in dezelfde string.

+
{n}Matched de voorafgaande expressie precies n maal. N moet een positief getal zijn.
+
+ Als voorbeeld, /a{2}/ matched de 'a' in "candy" niet, maar matched wel alle a's in "caandy," en de eerste twee a's in "caaandy."
{n,} +

Matched de voorafgaande expressie tenminste n maal. N moet een positief getal zijn.

+ +

Als voorbeeld, /a{2,}/ matched "aa", "aaaa" en "aaaaa" maar niet "a"

+
{n,m} +

Waar n en m positieve getallen zijn en n <= m. Matched tenminste n en maximaal m keer de voorafgaande expressie. Als m is weggelaten, wordt het behandeld als ∞.

+ +

Als voorbeeld, /a{1,3}/ matched niets in "cndy", de 'a' in "candy," de eerste twee a's in "caandy," en de eerste drie a's in "caaaaaaandy". Let op dat als "caaaaaaandy" wordt gematched, de match "aaa" is, ook al heeft de originele string meer a's er in staan.

+
[xyz]Karakter set. Dit type patroon matched een van de karakters tussen de haken, inclusief escape sequences. Speciale karakters zoals de punt(.) en asterisk(*) zijn niet speciaal binnen een karakter set, en hoeven niet geëscaped te worden. Je kan een reeks karakters specificeren door een streepje te gebruiken , zoals het volgende voorbeeld illustreert.
+
+ Het patroon [a-d], wat dezelfde match uitvoert als [abcd], matched de 'b' in "brisket" en de 'c' in "city". De patronen /[a-z.]+/ en /[\w.]+/ matchen de gehele string "test.i.ng".
[^xyz] +

Een genegeerde karakter set, dat wil zeggen het matched alles wat niet binnen de haakjes staat. Je kan een reeks karakters specificeren door een streepje te gebruiken. Alles wat werkt in een normale karakter set werkt ook hier.

+ +

Als voorbeeld, [^abc] is hetzelfde als [^a-c]. Ze matchen als eerste  'r' in "brisket" en 'h' in "chop."

+
[\b] +

Matched een backspace (U+0008). Je hebt vierkante haakjes nodig om een letterlijk backspace karakter te matchen. (Niet te verwarren met \b.)

+
\b +

Matched een woordgrens. een woordgrens matched de positie tussen een woord karakter gevolgd door een niet-woord karakter, of tussen een niet-woord karakter gevolgd door een woord karakter, of thet begin van de string, of het einde van de string. Een woordgrens is geen "karakter" om te matchen; net als een anker wordt een woordgens niet toegevoegd aan de match. In andere woorden, de lengte van een gematchede woordgrens is nul. (Niet te verwarren met [\b]

+ +

Voorbeelden met de input string "moon":

+ +

/\bm/ matched omdat de \b zich aan het begin van de string bevindt; de \b in /oo\b/ matched niet omdat de \b zowel voorafgegaan wordt als gevolgd wordt door woord karakters; de \b in /oon\b/ matched omdat het aan het zich einde van de string bevindt; de \b in /\w\b\w/ zal nooit iets matchen, omdat het zowel voorafgegaan en gevolgd wordt door een woordkarakter.

+ +
+

N.B.: JavaScript's reguliere expressie engine definieert een specifieke groep karakters als "woord" karakters. Enig karakter niet in groep wordt als non-woord karakter beschouwd. Deze groep karakters is redelijk beperkt: het bestaat enkel uit het Romeinse alfabet in zowel hoofd- als kleine letters, decimale getallen en het underscore karakter. Geaccentueerde karakters zoals "é" of "ü" worden helaas behandelt als non-woord karakters voor wat betreft woordgrenzen, evenals ideografische karakters (e.g. Chinees, Japans, Koreaans) in het algemeen.

+
+
\B +

Matched een non-woordgrens. Dit matched de volgende gevallen:

+ +
    +
  • Voor het eerste karakter van de string
    • +
  • Na het laatste karakter van de string
    • +
  • Tussen twee woord karakters
    • +
  • Tussen twee niet-woord karakters
    • +
  • Een lege string
    • +
+ +

Als voorbeeld, /\B../ matched 'oo' in "noonday", en /y\B./ matched 'ye' in "possibly yesterday."

+
\cX +

Waar X een karakter is in de reeks van A tot Z. Matched een control karakter in een string.

+ +

Als voorbeeld, /\cM/ matched control-M (U+000D) in een string.

+
\d +

Matched een numeriek (digit) karakter. Equivalent aan [0-9].

+ +

Als voorbeeld, /\d/ of /[0-9]/ matched '2' in "B2 is het kamernummer"

+
\D +

Matched een niet-numeriek karacter. Equivalent aan [^0-9].

+ +

Als voorbeeld, /\D/ or /[^0-9]/ matched 'B' in "B2 is het kamernummer"

+
\fMatched een form feed (U+000C).
\nMatched een line feed (U+000A).
\rMatched een carriage return (U+000D).
\s +

Matched een witruimte karacter, inclusief spatie, tab, form feed, line feed. Equivalent aan [ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].

+ +

Als voorbeeld, /\s\w*/ matches ' bar' in "foo bar."

+
\S +

Matched een karakter anders dan witruimte. Equivalent aan [^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].

+ +

Als voorbeeld, /\S*/ matched 'foo' in "foo bar."

+
\tMatched een tab (U+0009).
\vMatched een verticale tab (U+000B).
\w +

Matched elk alfanumeriek karakters met inbegrip van de underscore. Equivalent aan [A-Za-z0-9_].

+ +

Als voorbeeld, /\w/ matched 'a' in "apple," '5' in "$5.28," en '3' in "3D."

+
\W +

Matched een niet-woord karakter. Equivalent aan [^A-Za-z0-9_].

+ +

Als voorbeeld, /\W/ of /[^A-Za-z0-9_]/ matched '%' in "50%."

+
\n +

Waarbij n een positief getal is, een terugreferentie naar de laatste substring die de nde groep tussen ronde haakjes in de reguliere expressie matchde (linker haakjes tellend).

+ +

Als voorbeeld, /apple(,)\sorange\1/ matched 'apple, orange,' in "apple, orange, cherry, peach."

+
\0 +

Matched een NULL (U+0000) karakter. Volg dit niet met nog een getal, want \0<digits> is een octale escape sequence. Gebruik in plaats daarvan \x00.

+
\xhh +

Matched het karakter met de code hh (twee hexadecimale getallen)

+
\uhhhh +

Matched het karakter met de code hhhh (vier hexadecimale getallen).

+
\u{hhhh} +

(enkel als de u vlag is ingesteld) Matched het karakter met de Unicode-waarde hhhh (hexadecimale getallen).

+
+ +

Invoer van gebruikers escapen die als letterlijke string binnen een reguliere expressie behandeld moet worden—die anders als een speciaal karakter gezien zou worden—kan bereikt worden met eenvoudige vervanging:

+ +
function escapeRegExp(string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+}
+
+ +

De g na de reguliere expressie is een optie of vlaggetje wat globaal zoekt, dus in de hele string kijkt en alle vondsten teruggeeft. Dit wordt in detail beneden uitgelegd in Advanced Searching With Flags

+ +

Ronde haakjes gebruiken

+ +

Ronde haakjes om een deel van het reguliere expressie patroon zorgen ervoor dat een deel van de gevonden substring wordt onthouden. Eenmaal onthouden kan de substring opgehaald worden voor ander gebruik, zoals beschreven in Using Parenthesized Substring Matches.

+ +

Als voorbeeld, het patroon /Chapter (\d+)\.\d*/ illustreert additionele ontsnapte en bijzondere karakters en geeft aan dat een deel van het patroon moet worden onthouden. Het vind precies de karakters 'Chapter' gevolgd door een of meer numerieke karakters (\d betekent ieder numeriek karakter en + betekent 1 of meer keer), gevolgd door een decimale punt (wat een bijzonder karakter is uit zichzelf; \ voorafgaand aan de punt betekend dat het patroon moet zoeken naar het letterlijke karakter '.'), gevolgd door enig numeriek karakter 0 of meer keer. (\d betekent ieder numeriek karakter, * betekent 0 of meer keer). Daarnaast worden de ronde haakjes gebruikt om het eerste gevonden numerieke karakters te onthouden.

+ +

Dit patroon wordt gevonden in "Open Chapter 4.3, paragraph 6" en "4' wordt onthouden. Het patroon wordt niet gevonden in "Chapter 3 en 4" omdat de string geen punt bevat na de '3'.

+ +

Om een substring te vinden zonder het gevonden deel te onthouden kan binnen de ronde haakjes ?: voor het patroon geplaatst worden. Als voorbeeld, (?:\d+) vind een of meer numerieke karakters maar onthoudt de gevonden karakters niet.

+ +

Werken met reguliere expressies

+ +

Reguliere expressies worden gebruikt met de RegExp methoden test en exec en met de String methoden match, replace, search, and split. Deze methoden zijn in detail uitgelegd in de JavaScript referentie

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Methoden die reguliere expressies gebruiken
MethodeBeschrijving
{{jsxref("RegExp.exec", "exec")}} +

Een RegExp methode die zoekt naar een vondst in een string. Het geeft een lijst (array) met informatie terug of null bij geen vondst.

+
{{jsxref("RegExp.test", "test")}} +

Een RegExp methode die op een vondst test in een string. geeft true of false terug.

+
{{jsxref("String.match", "match")}} +

Een String methode die zoekt naar een vondst in een string. Het geeft een array met informatie terug of null bij geen vondst.

+
{{jsxref("String.matchAll", "matchAll")}} +

Een String methode die een iterator teruggeeft met alle vondsten, inclusief opgeslagen (capturing) groepen

+
{{jsxref("String.search", "search")}} +

Een String methode die op een vondst in een string test. Het geeft de index van de vonst terug of -1 indien niets gevonden is.

+
{{jsxref("String.replace", "replace")}} +

Een String methode die zoekt naar en vondst in een string en de gevonden substring vervangt met een andere substring.

+
{{jsxref("String.split", "split")}} +

Een String methode die een reguliere expressie of een vaste string gebruikt om een string op te delen in een lijst (array) van substrings.

+
+ +

Gebruik de test of search methode wanneer je wilt weten of een string een patroon bevat; gebruik voor meer informatie (maar langzamere executie) de exec of match methode. Als je exec of match gebruikt en als er vondsten zijn, dan geven deze methoden een lijst (array) terug en updaten de eigenschappen van het betreffende reguliere expressie object en ook van het voorgedefinieerde reguliere expressie object, RegExp. Als niets wordt gevonden geeft de exec methode null terug, wat teruggeleid wordt naar false.

+ +

In het volgende voorbeeld gebruikt het script de exec methode om een vondst te doen in een string.

+ +
var myRe = /d(b+)d/g;
+var myArray = myRe.exec('cdbbdbsbz');
+
+ +

Als je geen toegang nodig hebt tot de eigenschappen van de reguliere expressie is dit script een alternatieve manier om myArray te creëren:

+ +
var myArray = /d(b+)d/g.exec('cdbbdbsbz');
+    // gelijk aan "cdbbdbsbz".match(/d(b+)d/g); echter,
+    // "cdbbdbsbz".match(/d(b+)d/g) heeft als resultaat Array [ "dbbd" ], terwijl
+    // /d(b+)d/g.exec('cdbbdbsbz') als resultaat heeft Array [ 'dbbd', 'bb', index: 1, input: 'cdbbdbsbz' ].
+
+ +

(Zie g different behaviors voor verdere info over de verschillende werkingen.)

+ +

Als je een reguliere expressie wil opbouwen uit een string, is dit script nog een alternatief:

+ +
var myRe = new RegExp('d(b+)d', 'g');
+var myArray = myRe.exec('cdbbdbsbz');
+
+ +

Met dit script is de vondst een success en geeft het een lijst (array) terug en update de eigenschappen die in de volgende tabel worden getoond:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Resultaten van reguliere expressie executie.
ObjectEigenschap of indexBeschrijvingIn dit voorbeeld
myArray +

De gevonden string en alle onthouden substrings.

+ 		['dbbd', 'bb', index: 1, input: 'cdbbdbsbz']
index +

De 0-gebaseerde index van de vondst in de invoer string.

+ 		1
inputDe originele string"cdbbdbsbz"
[0]De laatste gevonden karakters."dbbd"
myRelastIndex +

De index vanaf waar de volgende match gestart moet worden. (deze eigenschap is alleen ingesteld als de reguliere expressie de g optie gebruikt, beschreven in Advanced Searching With Flags.)

+ 		5
source +

De tekst van het patroon. Geüpdate op het moment dat de reguliere expressie wordt gecreërd, niet geëxecuteerd.

+ 		"d(b+)d"
+ +

Zoals getoond in het tweede formulier van dit voorbeeld kan je een reguliere expressie gebruiken die gemaakt is met een object initializer zonder het aan een variabele toe te kennen. Echter, als je dit doet is ieder voorval een nieuwe reguliere expressie. Om deze reden, als je deze vorm gebruikt zonder het aan een variabele toe te kennen, kan je vervolgens niet de eigenschappen van de reguliere expressie verkrijgen. Stel dat je bijvoorbeeld dit script hebt:

+ +
var myRe = /d(b+)d/g;
+var myArray = myRe.exec('cdbbdbsbz');
+console.log('The value of lastIndex is ' + myRe.lastIndex);
+
+// "The value of lastIndex is 5"
+
+ +

Echter, als je dit script hebt:

+ +
var myArray = /d(b+)d/g.exec('cdbbdbsbz');
+console.log('The value of lastIndex is ' + /d(b+)d/g.lastIndex);
+
+// "The value of lastIndex is 0"
+
+ +

De voorvallen van /d(b+)d/g in de twee statements zijn verschillende reguliere expressie objecten en hebben daarom verschillende waarden voor hun lastIndex eigenschap. Als je toegang nodig hebt tot de eigenschappen van een reguliere expressie die gecreërd is met een object initializer, moet je het eerst toekennen aan een variabele.

+ +

Using parenthesized substring matches

+ +

Including parentheses in a regular expression pattern causes the corresponding submatch to be remembered. For example, /a(b)c/ matches the characters 'abc' and remembers 'b'. To recall these parenthesized substring matches, use the Array elements [1], ..., [n].

+ +

The number of possible parenthesized substrings is unlimited. The returned array holds all that were found. The following examples illustrate how to use parenthesized substring matches.

+ +

The following script uses the {{jsxref("String.replace", "replace()")}} method to switch the words in the string. For the replacement text, the script uses the $1 and $2 in the replacement to denote the first and second parenthesized substring matches.

+ +
var re = /(\w+)\s(\w+)/;
+var str = 'John Smith';
+var newstr = str.replace(re, '$2, $1');
+console.log(newstr);
+
+// "Smith, John"
+
+ +

Advanced searching with flags

+ +

Regular expressions have six optional flags that allow for functionality like global and case insensitive searching. These flags can be used separately or together in any order, and are included as part of the regular expression.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Regular expression flags
FlagDescription
gGlobal search.
iCase-insensitive search.
mMulti-line search.
sAllows . to match newline characters.
u"unicode"; treat a pattern as a sequence of unicode code points
yPerform a "sticky" search that matches starting at the current position in the target string. See {{jsxref("RegExp.sticky", "sticky")}}
+ +

To include a flag with the regular expression, use this syntax:

+ +
var re = /pattern/flags;
+
+ +

or

+ +
var re = new RegExp('pattern', 'flags');
+
+ +

Note that the flags are an integral part of a regular expression. They cannot be added or removed later.

+ +

For example, re = /\w+\s/g creates a regular expression that looks for one or more characters followed by a space, and it looks for this combination throughout the string.

+ +
var re = /\w+\s/g;
+var str = 'fee fi fo fum';
+var myArray = str.match(re);
+console.log(myArray);
+
+// ["fee ", "fi ", "fo "]
+
+ +

You could replace the line:

+ +
var re = /\w+\s/g;
+
+ +

with:

+ +
var re = new RegExp('\\w+\\s', 'g');
+
+ +

and get the same result.

+ +

The behavior associated with the 'g' flag is different when the .exec() method is used.  (The roles of "class" and "argument" get reversed: In the case of .match(), the string class (or data type) owns the method and the regular expression is just an argument, while in the case of .exec(), it is the regular expression that owns the method, with the string being the argument.  Contrast str.match(re) versus re.exec(str).)  The 'g' flag is used with the .exec() method to get iterative progression.

+ +
var xArray; while(xArray = re.exec(str)) console.log(xArray);
+// produces:
+// ["fee ", index: 0, input: "fee fi fo fum"]
+// ["fi ", index: 4, input: "fee fi fo fum"]
+// ["fo ", index: 7, input: "fee fi fo fum"]
+ +

The m flag is used to specify that a multiline input string should be treated as multiple lines. If the m flag is used, ^ and $ match at the start or end of any line within the input string instead of the start or end of the entire string.

+ +

Examples

+ +

The following examples show some uses of regular expressions.

+ +

Changing the order in an input string

+ +

The following example illustrates the formation of regular expressions and the use of string.split() and string.replace(). It cleans a roughly formatted input string containing names (first name last) separated by blanks, tabs and exactly one semicolon. Finally, it reverses the name order (last name first) and sorts the list.

+ +
// The name string contains multiple spaces and tabs,
+// and may have multiple spaces between first and last names.
+var names = 'Orange Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand ';
+
+var output = ['---------- Original String\n', names + '\n'];
+
+// Prepare two regular expression patterns and array storage.
+// Split the string into array elements.
+
+// pattern: possible white space then semicolon then possible white space
+var pattern = /\s*;\s*/;
+
+// Break the string into pieces separated by the pattern above and
+// store the pieces in an array called nameList
+var nameList = names.split(pattern);
+
+// new pattern: one or more characters then spaces then characters.
+// Use parentheses to "memorize" portions of the pattern.
+// The memorized portions are referred to later.
+pattern = /(\w+)\s+(\w+)/;
+
+// Below is the new array for holding names being processed.
+var bySurnameList = [];
+
+// Display the name array and populate the new array
+// with comma-separated names, last first.
+//
+// The replace method removes anything matching the pattern
+// and replaces it with the memorized string—the second memorized portion
+// followed by a comma, a space and the first memorized portion.
+//
+// The variables $1 and $2 refer to the portions
+// memorized while matching the pattern.
+
+output.push('---------- After Split by Regular Expression');
+
+var i, len;
+for (i = 0, len = nameList.length; i < len; i++) {
+  output.push(nameList[i]);
+  bySurnameList[i] = nameList[i].replace(pattern, '$2, $1');
+}
+
+// Display the new array.
+output.push('---------- Names Reversed');
+for (i = 0, len = bySurnameList.length; i < len; i++) {
+  output.push(bySurnameList[i]);
+}
+
+// Sort by last name, then display the sorted array.
+bySurnameList.sort();
+output.push('---------- Sorted');
+for (i = 0, len = bySurnameList.length; i < len; i++) {
+  output.push(bySurnameList[i]);
+}
+
+output.push('---------- End');
+
+console.log(output.join('\n'));
+
+ +

Using special characters to verify input

+ +

In the following example, the user is expected to enter a phone number. When the user presses the "Check" button, the script checks the validity of the number. If the number is valid (matches the character sequence specified by the regular expression), the script shows a message thanking the user and confirming the number. If the number is invalid, the script informs the user that the phone number is not valid.

+ +

Within non-capturing parentheses (?: , the regular expression looks for three numeric characters \d{3} OR | a left parenthesis \( followed by three digits \d{3}, followed by a close parenthesis \), (end non-capturing parenthesis )), followed by one dash, forward slash, or decimal point and when found, remember the character ([-\/\.]), followed by three digits \d{3}, followed by the remembered match of a dash, forward slash, or decimal point \1, followed by four digits \d{4}.

+ +

The Change event activated when the user presses Enter sets the value of RegExp.input.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
+    <meta http-equiv="Content-Script-Type" content="text/javascript">
+    <script type="text/javascript">
+      var re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/;
+      function testInfo(phoneInput) {
+        var OK = re.exec(phoneInput.value);
+        if (!OK)
+          window.alert(phoneInput.value + ' isn\'t a phone number with area code!');
+        else
+          window.alert('Thanks, your phone number is ' + OK[0]);
+      }
+    </script>
+  </head>
+  <body>
+    <p>Enter your phone number (with area code) and then click "Check".
+        <br>The expected format is like ###-###-####.</p>
+    <form action="#">
+      <input id="phone"><button onclick="testInfo(document.getElementById('phone'));">Check</button>
+    </form>
+  </body>
+</html>
+
+ +
{{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}
diff --git a/files/nl/web/javascript/guide/reguliere_expressies/index.html b/files/nl/web/javascript/guide/reguliere_expressies/index.html deleted file mode 100644 index 7b37d5ed31..0000000000 --- a/files/nl/web/javascript/guide/reguliere_expressies/index.html +++ /dev/null @@ -1,757 +0,0 @@ ---- -title: Reguliere Expressies -slug: Web/JavaScript/Guide/Reguliere_Expressies -tags: - - JavaScript - - RegExp - - regex - - reguliere expressies -translation_of: Web/JavaScript/Guide/Regular_Expressions ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}
- -

Reguliere expressies zijn patronen om combinaties van karakters in strings mee te vinden. In JavaScript zijn reguliere expressies ook objecten. Deze patronen worden gebruikt met de  {{jsxref("RegExp.exec", "exec")}} en {{jsxref("RegExp.test", "test")}} methoden van {{jsxref("RegExp")}}, en met de {{jsxref("String.match", "match")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}, en {{jsxref("String.split", "split")}} methoden van {{jsxref("String")}}. Dit hoofdstuk beschrijft reguliere expressies in JavaScript.

- -

Een reguliere expressie maken

- -

Een reguliere expressie kan op een van twee manieren gemaakt worden:

- -

Met behulp van een letterlijke reguliere expressie, die bestaat uit een patroon tussen slash-karakters:

- -
var re = /ab+c/;
-
- -

Letterlijke reguliere expressies worden gecompileerd op het moment dat het script geladen is. Als de reguliere expressie constant blijft kan dit de prestaties verbeteren.

- -

Of door de constructor-functie van het {{jsxref("RegExp")}} object te gebruiken, op de volgende manier:

- -
var re = new RegExp('ab+c');
-
- -

Het gebruik van de constructor-functie biedt runtime-compilatie van de reguliere expressie. Gebruik de constructor functie als je weet dat het reguliere expressie patroon zal veranderen, of als je het patroon niet weet en uit een andere bron krijgt, zoals input van een gebruiker.

- -

Typen speciale karakters

- -
-
Stellingen
-
Geven op een bepaalde manier aan dat een overeenkomst mogelijk is. Stellingen bevatten 'lookahead', 'lookbehind' en conditionele expressies.
-
Grenzen
-
Wijzen op de begin- en eindpunten van regels en woorden.
-
Karakter Klassen
-
Differentieer tussen verschillende soorten karakters zoals, bijvoorbeeld, tussen letters en cijfers.
-
Groepen en Bereiken
-
Geef groepen en bereiken van expressie karakters aan.
-
Kwantificeerders
-
Geef hoeveelheden karakters of expressies aan om te vinden.
-
Unicode Eigenschappen
-
Differentieer op basis van unicode karakter eigenschappen zoals, bijvoorbeeld, hoofd- en kleine letters, wiskundige symbolen, en punctuatie.
-
- -

Een reguliere expressie schrijven

- -

Een reguliere expressie bestaat uit eenvoudige karakters zoals /abc/, of een combinatie van eenvoudige en speciale karakters, zoals /ab*c/ of /Hoofdstuk (\d+)\.\d*/. Het laatste voorbeeld bevat haakjes die gebruikt worden als geheugen mechanisme. De overeenkomst die met dit deel gemaakt is wordt onthouden voor later gebruik., zoals beschreven in Using parenthesized substring matches.

- -

Eenvoudige patronen gebruiken

- -

Eenvoudige patronen bestaan uit karakters waarvoor je een directe overeenkomst wilt vinden. Het patroon /abc/ bijvoorbeeld komt alleen overeen met karakter combinaties als de karakters 'abc' samen voorkomen in exact die volgorde. Zo'n overeenkomst zou successvol zijn in de strings "Hi, do you know your abc's?" en "The latest airplane designs evolved from slabcraft." In beide gevallen is de overeenkomst de substring 'abc'. Er is geen overeenkomst met de string 'Grab crab' omdat hoewel het de substring 'ab c' bevat, het niet de precieze substring 'abc' bevat.

- -

Speciale karakters gebruiken

- -

Als het zoeken naar een overeenkomst meer vergt dan een directe overeenkomst, zoals het vinden van een of meerdere b's, of het vinden van witregels/ruimte, bevat het patroon speciale karakters. Het patroon /ab*c/ bijvoorbeeld komt overeen met elke combinatie karakters waarbij een enkele 'a' gevolgd wordt door nul of meerdere b's. (* betekent 0 of meer gevallen van het voorgaande item) en dan onmiddelijk gevolgd door 'c'. In de string "cbbabbbbcdebc," komt het patroon overeen met de substring 'abbbbc'.

- -

Onderstaande tabel geeft een volledige lijst en beschrijving van de speciale karakters die gebruikt kunnen worden in reguliere expressies.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Speciale karakters in reguliere expressies
KarakterBetekenis
\ -

Matched volgens de volgende regels:
-
- Een backslash die voorafgaat aan een niet-speciaal karakter geeft aan dat het volgende karakter speciaal is en niet letterlijk moet worden geïnterpreteerd. Bijvoorbeeld, een 'b' zonder een voorafgaande '\' matched kleine-letter b's waar die ook voorkomen  — Het karakter zal letterlijk worden geïnterpreteerd. Maar de opeenvolging van '\b' komt niet overeen met wat voor karakter dan ook; het duidt op een woordgrens.
-
- Een backslash die voorafgaat aan een speciaal karakter geeft aan dat het volgende karakter niet speciaal is en letterlijk moet worden geïnterpreteerd. Bijvoorbeeld, het patroon /a*/ vertrouwt op het speciale karakter '*' om 0 of meerdere a's te matchen. Het patroon /a\*/ in contrast, noteert de '*'  als niet-speciaal, wat matches met strings zoals 'a' mogelijk maakt.

- -

Vergeet niet om de \ zelf te escapen bij het gebruiken van de RegExp("patroon") notatie — \ is ook een escape karakter in strings.

-
^Matched het begin van de input. Matched ook direct na een line break karakter als de multiline vlag ingesteld is op 'true'.
-
- Als voorbeeld, /^A/ matched niet de 'A' in "uit Amsterdam", maar matched wel de 'A' in "Apenstaartje".
-
- De '^' heeft een verschillende betekenis wanneer het voorkomt als het eerste karakter in een karakterset patroon. Zie complemented character sets voor details en een voorbeeld.
$ -

Matched het einde van de input. Matched ook direct voor een line break karakter als de multiline vlag is ingesteld.

- -

Als voorbeeld, /t$/ matched niet de 't' in "beter", maar matched wel in "beet".

-
* -

Matched de voorafgaande expressie 0 of meerdere malen. Equivalent aan {0,}.

- -

Als voorbeeld, /bo*/ matched 'boo' in "de grote boom" en 'b' in "bar" maar niets in "hallo".

-
+ -

Vind de voorafgaande expressie 1 of meerdere malen. Equivalent aan {1,}.

- -

Als voorbeeld, /a+/ matched de 'a' in "pan" and alle a's in "haaaaaaatsjoe", maar niets in "zzp".

-
? -

Matched de voorafgaande expressie 0 of 1 maal. Equivalent aan {0,1}.
-
- Als voorbeeld, /e?le?/ matched de 'el' in "angel" en de 'le' in "angle" en ook de 'l' in "oslo".

- -

Als het direct na de quantifiers  *, +, ?, or {} wordt gebruikt maakt het deze niet-gretig (matched het minst mogelijke aantal karakters), in tegenstelling tot de standaard, die gretig is (matched zo veel mogelijk karakters als mogelijk). Bijvoorbeeld, /\d+/ toepassen op "123abc" matched "123". Echter, /\d+?/ toepassen op diezelfde string matched alleen de "1".

- -

Wordt ook gebruikt in lookahead stellingen, zoals beschreven in de (x(?=y) en  (x(?!y) van deze tabel.
-  

-
. -

(De decimale punt) matched welk individueel karakter dan ook, met uitzondering van de newline.

- -

Als voorbeeld, /.n/ matched 'an' and 'on' in "nay, an apple is on the tree", maar niet 'nay'.

- -

Wanneer de s ("dotAll") vlag is ingesteld op 'true' matched het ook newline karakters.

-
(x) -

Matched 'x' en onthoudt de match, zoals het volgende voorbeeld toont. De haakjes worden capturing parentheses genoemd
-
- De '(foo)' en '(bar)' in het patroon /(foo) (bar) \1 \2/ matchen en onthouden de eerste twee woorden in de string "foo bar foo bar". De \1 en \2  geven de eerste en tweede substring matches tussen haakjes weer - foo and bar, en matchen de laatste twee woorden van de string. Let op dat \1, \2, ..., \n worden gebruikt in het matchende gedeelte van de regex, voor meer informatie, zie \n beneden. In het vervangings gedeelte van een regex moet de syntax $1, $2, ..., $n worden gebruikt, e.g.: 'bar foo'.replace(/(...) (...)/, '$2 $1').  $& betekent de gehele gevonden string.

-
(?:x)Matched 'x' maar onthoudt de match niet. De haakjes heten non-capturing haakjes, en maken het mogelijk om sub-expressies te definiëren voor regular expression operators om mee te werken.  Overweeg de voorbeeld expressie /(?:foo){1,2}/. Als de expressie /foo{1,2}/ was, zouden de {1,2} karakters alleen van toepassing zijn op de laatste 'o' in 'foo'. met de non-capturing haakjes, is {1,2} van toepassing op het gehele woord 'foo'. Voor meer informatie, zie Using parentheses.
x(?=y) -

Matched  'x' alleen als 'x' gevolgd wordt door 'y'. Dit heet een 'lookahead'.

- -

Als voorbeeld, /Jack(?=Sprat)/ matched alleen 'Jack' als het gevolgd wordt door 'Sprat'. /Jack(?=Sprat|Frost)/ matched alleen 'Jack' als het gevolgd wordt door 'Sprat' of 'Frost'. Echter, noch 'Sprat' noch 'Frost' is onderdeel van de match resultaten.

-
x(?!y) -

Matched 'x' alleen als 'x' niet gevolgd wordt door 'y'. Dit heet een negated lookahead.

- -

Als voorbeeld, /\d+(?!\.)/ matched alleen een nummer als het niet gevolgd wordt door een decimale punt. De reguliere expressie /\d+(?!\.)/.exec("3.141") matched '141' maar niet '3.141'.

-
(?<=y)x -

Matched x alleen als x wordt voorafgegaan door y.Dit heet een 'lookbehind'.

- -

Als voorbeeld, /(?<=Jack)Sprat/ matched "Sprat" alleen als het wordt voorafgegaan door "Jack".
- /(?<=Jack|Tom)Sprat/ matched "Sprat" alleen als het wordt voorafgegaan door "Jack" or "Tom".
- Echter, noch "Jack" noch "Tom" maken deel uit van de match resultaten.

-
(?<!y)x -

Matched x alleen als x niet wordt voorafgegaan door y. Dit heet een 'negated lookbehind'.

- -

Als voorbeeld, /(?<!-)\d+/ matched een nummer alleen als het niet wordt voorafgegaan door een min-teken.
- /(?<!-)\d+/.exec('3') matched "3".
-  /(?<!-)\d+/.exec('-3')  wordt niet gevonden omdat aan het nummer een min-teken voorafgaat.

-
x|y -

Matched 'x', of 'y' (indien er geen match is voor 'x').

- -

Als voorbeeld, /groene|rode/ matched 'groene' in "groene appel" en 'rode' in "rode appel." De volgorde van 'x' en 'y' maakt uit. a*|b matched bijvoorbeeld de lege string in "b", maar b|a* matched "b" in dezelfde string.

-
{n}Matched de voorafgaande expressie precies n maal. N moet een positief getal zijn.
-
- Als voorbeeld, /a{2}/ matched de 'a' in "candy" niet, maar matched wel alle a's in "caandy," en de eerste twee a's in "caaandy."
{n,} -

Matched de voorafgaande expressie tenminste n maal. N moet een positief getal zijn.

- -

Als voorbeeld, /a{2,}/ matched "aa", "aaaa" en "aaaaa" maar niet "a"

-
{n,m} -

Waar n en m positieve getallen zijn en n <= m. Matched tenminste n en maximaal m keer de voorafgaande expressie. Als m is weggelaten, wordt het behandeld als ∞.

- -

Als voorbeeld, /a{1,3}/ matched niets in "cndy", de 'a' in "candy," de eerste twee a's in "caandy," en de eerste drie a's in "caaaaaaandy". Let op dat als "caaaaaaandy" wordt gematched, de match "aaa" is, ook al heeft de originele string meer a's er in staan.

-
[xyz]Karakter set. Dit type patroon matched een van de karakters tussen de haken, inclusief escape sequences. Speciale karakters zoals de punt(.) en asterisk(*) zijn niet speciaal binnen een karakter set, en hoeven niet geëscaped te worden. Je kan een reeks karakters specificeren door een streepje te gebruiken , zoals het volgende voorbeeld illustreert.
-
- Het patroon [a-d], wat dezelfde match uitvoert als [abcd], matched de 'b' in "brisket" en de 'c' in "city". De patronen /[a-z.]+/ en /[\w.]+/ matchen de gehele string "test.i.ng".
[^xyz] -

Een genegeerde karakter set, dat wil zeggen het matched alles wat niet binnen de haakjes staat. Je kan een reeks karakters specificeren door een streepje te gebruiken. Alles wat werkt in een normale karakter set werkt ook hier.

- -

Als voorbeeld, [^abc] is hetzelfde als [^a-c]. Ze matchen als eerste  'r' in "brisket" en 'h' in "chop."

-
[\b] -

Matched een backspace (U+0008). Je hebt vierkante haakjes nodig om een letterlijk backspace karakter te matchen. (Niet te verwarren met \b.)

-
\b -

Matched een woordgrens. een woordgrens matched de positie tussen een woord karakter gevolgd door een niet-woord karakter, of tussen een niet-woord karakter gevolgd door een woord karakter, of thet begin van de string, of het einde van de string. Een woordgrens is geen "karakter" om te matchen; net als een anker wordt een woordgens niet toegevoegd aan de match. In andere woorden, de lengte van een gematchede woordgrens is nul. (Niet te verwarren met [\b]

- -

Voorbeelden met de input string "moon":

- -

/\bm/ matched omdat de \b zich aan het begin van de string bevindt; de \b in /oo\b/ matched niet omdat de \b zowel voorafgegaan wordt als gevolgd wordt door woord karakters; de \b in /oon\b/ matched omdat het aan het zich einde van de string bevindt; de \b in /\w\b\w/ zal nooit iets matchen, omdat het zowel voorafgegaan en gevolgd wordt door een woordkarakter.

- -
-

N.B.: JavaScript's reguliere expressie engine definieert een specifieke groep karakters als "woord" karakters. Enig karakter niet in groep wordt als non-woord karakter beschouwd. Deze groep karakters is redelijk beperkt: het bestaat enkel uit het Romeinse alfabet in zowel hoofd- als kleine letters, decimale getallen en het underscore karakter. Geaccentueerde karakters zoals "é" of "ü" worden helaas behandelt als non-woord karakters voor wat betreft woordgrenzen, evenals ideografische karakters (e.g. Chinees, Japans, Koreaans) in het algemeen.

-
-
\B -

Matched een non-woordgrens. Dit matched de volgende gevallen:

- -
    -
  • Voor het eerste karakter van de string
    • -
  • Na het laatste karakter van de string
    • -
  • Tussen twee woord karakters
    • -
  • Tussen twee niet-woord karakters
    • -
  • Een lege string
    • -
- -

Als voorbeeld, /\B../ matched 'oo' in "noonday", en /y\B./ matched 'ye' in "possibly yesterday."

-
\cX -

Waar X een karakter is in de reeks van A tot Z. Matched een control karakter in een string.

- -

Als voorbeeld, /\cM/ matched control-M (U+000D) in een string.

-
\d -

Matched een numeriek (digit) karakter. Equivalent aan [0-9].

- -

Als voorbeeld, /\d/ of /[0-9]/ matched '2' in "B2 is het kamernummer"

-
\D -

Matched een niet-numeriek karacter. Equivalent aan [^0-9].

- -

Als voorbeeld, /\D/ or /[^0-9]/ matched 'B' in "B2 is het kamernummer"

-
\fMatched een form feed (U+000C).
\nMatched een line feed (U+000A).
\rMatched een carriage return (U+000D).
\s -

Matched een witruimte karacter, inclusief spatie, tab, form feed, line feed. Equivalent aan [ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].

- -

Als voorbeeld, /\s\w*/ matches ' bar' in "foo bar."

-
\S -

Matched een karakter anders dan witruimte. Equivalent aan [^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].

- -

Als voorbeeld, /\S*/ matched 'foo' in "foo bar."

-
\tMatched een tab (U+0009).
\vMatched een verticale tab (U+000B).
\w -

Matched elk alfanumeriek karakters met inbegrip van de underscore. Equivalent aan [A-Za-z0-9_].

- -

Als voorbeeld, /\w/ matched 'a' in "apple," '5' in "$5.28," en '3' in "3D."

-
\W -

Matched een niet-woord karakter. Equivalent aan [^A-Za-z0-9_].

- -

Als voorbeeld, /\W/ of /[^A-Za-z0-9_]/ matched '%' in "50%."

-
\n -

Waarbij n een positief getal is, een terugreferentie naar de laatste substring die de nde groep tussen ronde haakjes in de reguliere expressie matchde (linker haakjes tellend).

- -

Als voorbeeld, /apple(,)\sorange\1/ matched 'apple, orange,' in "apple, orange, cherry, peach."

-
\0 -

Matched een NULL (U+0000) karakter. Volg dit niet met nog een getal, want \0<digits> is een octale escape sequence. Gebruik in plaats daarvan \x00.

-
\xhh -

Matched het karakter met de code hh (twee hexadecimale getallen)

-
\uhhhh -

Matched het karakter met de code hhhh (vier hexadecimale getallen).

-
\u{hhhh} -

(enkel als de u vlag is ingesteld) Matched het karakter met de Unicode-waarde hhhh (hexadecimale getallen).

-
- -

Invoer van gebruikers escapen die als letterlijke string binnen een reguliere expressie behandeld moet worden—die anders als een speciaal karakter gezien zou worden—kan bereikt worden met eenvoudige vervanging:

- -
function escapeRegExp(string) {
-  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
-}
-
- -

De g na de reguliere expressie is een optie of vlaggetje wat globaal zoekt, dus in de hele string kijkt en alle vondsten teruggeeft. Dit wordt in detail beneden uitgelegd in Advanced Searching With Flags

- -

Ronde haakjes gebruiken

- -

Ronde haakjes om een deel van het reguliere expressie patroon zorgen ervoor dat een deel van de gevonden substring wordt onthouden. Eenmaal onthouden kan de substring opgehaald worden voor ander gebruik, zoals beschreven in Using Parenthesized Substring Matches.

- -

Als voorbeeld, het patroon /Chapter (\d+)\.\d*/ illustreert additionele ontsnapte en bijzondere karakters en geeft aan dat een deel van het patroon moet worden onthouden. Het vind precies de karakters 'Chapter' gevolgd door een of meer numerieke karakters (\d betekent ieder numeriek karakter en + betekent 1 of meer keer), gevolgd door een decimale punt (wat een bijzonder karakter is uit zichzelf; \ voorafgaand aan de punt betekend dat het patroon moet zoeken naar het letterlijke karakter '.'), gevolgd door enig numeriek karakter 0 of meer keer. (\d betekent ieder numeriek karakter, * betekent 0 of meer keer). Daarnaast worden de ronde haakjes gebruikt om het eerste gevonden numerieke karakters te onthouden.

- -

Dit patroon wordt gevonden in "Open Chapter 4.3, paragraph 6" en "4' wordt onthouden. Het patroon wordt niet gevonden in "Chapter 3 en 4" omdat de string geen punt bevat na de '3'.

- -

Om een substring te vinden zonder het gevonden deel te onthouden kan binnen de ronde haakjes ?: voor het patroon geplaatst worden. Als voorbeeld, (?:\d+) vind een of meer numerieke karakters maar onthoudt de gevonden karakters niet.

- -

Werken met reguliere expressies

- -

Reguliere expressies worden gebruikt met de RegExp methoden test en exec en met de String methoden match, replace, search, and split. Deze methoden zijn in detail uitgelegd in de JavaScript referentie

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Methoden die reguliere expressies gebruiken
MethodeBeschrijving
{{jsxref("RegExp.exec", "exec")}} -

Een RegExp methode die zoekt naar een vondst in een string. Het geeft een lijst (array) met informatie terug of null bij geen vondst.

-
{{jsxref("RegExp.test", "test")}} -

Een RegExp methode die op een vondst test in een string. geeft true of false terug.

-
{{jsxref("String.match", "match")}} -

Een String methode die zoekt naar een vondst in een string. Het geeft een array met informatie terug of null bij geen vondst.

-
{{jsxref("String.matchAll", "matchAll")}} -

Een String methode die een iterator teruggeeft met alle vondsten, inclusief opgeslagen (capturing) groepen

-
{{jsxref("String.search", "search")}} -

Een String methode die op een vondst in een string test. Het geeft de index van de vonst terug of -1 indien niets gevonden is.

-
{{jsxref("String.replace", "replace")}} -

Een String methode die zoekt naar en vondst in een string en de gevonden substring vervangt met een andere substring.

-
{{jsxref("String.split", "split")}} -

Een String methode die een reguliere expressie of een vaste string gebruikt om een string op te delen in een lijst (array) van substrings.

-
- -

Gebruik de test of search methode wanneer je wilt weten of een string een patroon bevat; gebruik voor meer informatie (maar langzamere executie) de exec of match methode. Als je exec of match gebruikt en als er vondsten zijn, dan geven deze methoden een lijst (array) terug en updaten de eigenschappen van het betreffende reguliere expressie object en ook van het voorgedefinieerde reguliere expressie object, RegExp. Als niets wordt gevonden geeft de exec methode null terug, wat teruggeleid wordt naar false.

- -

In het volgende voorbeeld gebruikt het script de exec methode om een vondst te doen in een string.

- -
var myRe = /d(b+)d/g;
-var myArray = myRe.exec('cdbbdbsbz');
-
- -

Als je geen toegang nodig hebt tot de eigenschappen van de reguliere expressie is dit script een alternatieve manier om myArray te creëren:

- -
var myArray = /d(b+)d/g.exec('cdbbdbsbz');
-    // gelijk aan "cdbbdbsbz".match(/d(b+)d/g); echter,
-    // "cdbbdbsbz".match(/d(b+)d/g) heeft als resultaat Array [ "dbbd" ], terwijl
-    // /d(b+)d/g.exec('cdbbdbsbz') als resultaat heeft Array [ 'dbbd', 'bb', index: 1, input: 'cdbbdbsbz' ].
-
- -

(Zie g different behaviors voor verdere info over de verschillende werkingen.)

- -

Als je een reguliere expressie wil opbouwen uit een string, is dit script nog een alternatief:

- -
var myRe = new RegExp('d(b+)d', 'g');
-var myArray = myRe.exec('cdbbdbsbz');
-
- -

Met dit script is de vondst een success en geeft het een lijst (array) terug en update de eigenschappen die in de volgende tabel worden getoond:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Resultaten van reguliere expressie executie.
ObjectEigenschap of indexBeschrijvingIn dit voorbeeld
myArray -

De gevonden string en alle onthouden substrings.

- 		['dbbd', 'bb', index: 1, input: 'cdbbdbsbz']
index -

De 0-gebaseerde index van de vondst in de invoer string.

- 		1
inputDe originele string"cdbbdbsbz"
[0]De laatste gevonden karakters."dbbd"
myRelastIndex -

De index vanaf waar de volgende match gestart moet worden. (deze eigenschap is alleen ingesteld als de reguliere expressie de g optie gebruikt, beschreven in Advanced Searching With Flags.)

- 		5
source -

De tekst van het patroon. Geüpdate op het moment dat de reguliere expressie wordt gecreërd, niet geëxecuteerd.

- 		"d(b+)d"
- -

Zoals getoond in het tweede formulier van dit voorbeeld kan je een reguliere expressie gebruiken die gemaakt is met een object initializer zonder het aan een variabele toe te kennen. Echter, als je dit doet is ieder voorval een nieuwe reguliere expressie. Om deze reden, als je deze vorm gebruikt zonder het aan een variabele toe te kennen, kan je vervolgens niet de eigenschappen van de reguliere expressie verkrijgen. Stel dat je bijvoorbeeld dit script hebt:

- -
var myRe = /d(b+)d/g;
-var myArray = myRe.exec('cdbbdbsbz');
-console.log('The value of lastIndex is ' + myRe.lastIndex);
-
-// "The value of lastIndex is 5"
-
- -

Echter, als je dit script hebt:

- -
var myArray = /d(b+)d/g.exec('cdbbdbsbz');
-console.log('The value of lastIndex is ' + /d(b+)d/g.lastIndex);
-
-// "The value of lastIndex is 0"
-
- -

De voorvallen van /d(b+)d/g in de twee statements zijn verschillende reguliere expressie objecten en hebben daarom verschillende waarden voor hun lastIndex eigenschap. Als je toegang nodig hebt tot de eigenschappen van een reguliere expressie die gecreërd is met een object initializer, moet je het eerst toekennen aan een variabele.

- -

Using parenthesized substring matches

- -

Including parentheses in a regular expression pattern causes the corresponding submatch to be remembered. For example, /a(b)c/ matches the characters 'abc' and remembers 'b'. To recall these parenthesized substring matches, use the Array elements [1], ..., [n].

- -

The number of possible parenthesized substrings is unlimited. The returned array holds all that were found. The following examples illustrate how to use parenthesized substring matches.

- -

The following script uses the {{jsxref("String.replace", "replace()")}} method to switch the words in the string. For the replacement text, the script uses the $1 and $2 in the replacement to denote the first and second parenthesized substring matches.

- -
var re = /(\w+)\s(\w+)/;
-var str = 'John Smith';
-var newstr = str.replace(re, '$2, $1');
-console.log(newstr);
-
-// "Smith, John"
-
- -

Advanced searching with flags

- -

Regular expressions have six optional flags that allow for functionality like global and case insensitive searching. These flags can be used separately or together in any order, and are included as part of the regular expression.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Regular expression flags
FlagDescription
gGlobal search.
iCase-insensitive search.
mMulti-line search.
sAllows . to match newline characters.
u"unicode"; treat a pattern as a sequence of unicode code points
yPerform a "sticky" search that matches starting at the current position in the target string. See {{jsxref("RegExp.sticky", "sticky")}}
- -

To include a flag with the regular expression, use this syntax:

- -
var re = /pattern/flags;
-
- -

or

- -
var re = new RegExp('pattern', 'flags');
-
- -

Note that the flags are an integral part of a regular expression. They cannot be added or removed later.

- -

For example, re = /\w+\s/g creates a regular expression that looks for one or more characters followed by a space, and it looks for this combination throughout the string.

- -
var re = /\w+\s/g;
-var str = 'fee fi fo fum';
-var myArray = str.match(re);
-console.log(myArray);
-
-// ["fee ", "fi ", "fo "]
-
- -

You could replace the line:

- -
var re = /\w+\s/g;
-
- -

with:

- -
var re = new RegExp('\\w+\\s', 'g');
-
- -

and get the same result.

- -

The behavior associated with the 'g' flag is different when the .exec() method is used.  (The roles of "class" and "argument" get reversed: In the case of .match(), the string class (or data type) owns the method and the regular expression is just an argument, while in the case of .exec(), it is the regular expression that owns the method, with the string being the argument.  Contrast str.match(re) versus re.exec(str).)  The 'g' flag is used with the .exec() method to get iterative progression.

- -
var xArray; while(xArray = re.exec(str)) console.log(xArray);
-// produces:
-// ["fee ", index: 0, input: "fee fi fo fum"]
-// ["fi ", index: 4, input: "fee fi fo fum"]
-// ["fo ", index: 7, input: "fee fi fo fum"]
- -

The m flag is used to specify that a multiline input string should be treated as multiple lines. If the m flag is used, ^ and $ match at the start or end of any line within the input string instead of the start or end of the entire string.

- -

Examples

- -

The following examples show some uses of regular expressions.

- -

Changing the order in an input string

- -

The following example illustrates the formation of regular expressions and the use of string.split() and string.replace(). It cleans a roughly formatted input string containing names (first name last) separated by blanks, tabs and exactly one semicolon. Finally, it reverses the name order (last name first) and sorts the list.

- -
// The name string contains multiple spaces and tabs,
-// and may have multiple spaces between first and last names.
-var names = 'Orange Trump ;Fred Barney; Helen Rigby ; Bill Abel ; Chris Hand ';
-
-var output = ['---------- Original String\n', names + '\n'];
-
-// Prepare two regular expression patterns and array storage.
-// Split the string into array elements.
-
-// pattern: possible white space then semicolon then possible white space
-var pattern = /\s*;\s*/;
-
-// Break the string into pieces separated by the pattern above and
-// store the pieces in an array called nameList
-var nameList = names.split(pattern);
-
-// new pattern: one or more characters then spaces then characters.
-// Use parentheses to "memorize" portions of the pattern.
-// The memorized portions are referred to later.
-pattern = /(\w+)\s+(\w+)/;
-
-// Below is the new array for holding names being processed.
-var bySurnameList = [];
-
-// Display the name array and populate the new array
-// with comma-separated names, last first.
-//
-// The replace method removes anything matching the pattern
-// and replaces it with the memorized string—the second memorized portion
-// followed by a comma, a space and the first memorized portion.
-//
-// The variables $1 and $2 refer to the portions
-// memorized while matching the pattern.
-
-output.push('---------- After Split by Regular Expression');
-
-var i, len;
-for (i = 0, len = nameList.length; i < len; i++) {
-  output.push(nameList[i]);
-  bySurnameList[i] = nameList[i].replace(pattern, '$2, $1');
-}
-
-// Display the new array.
-output.push('---------- Names Reversed');
-for (i = 0, len = bySurnameList.length; i < len; i++) {
-  output.push(bySurnameList[i]);
-}
-
-// Sort by last name, then display the sorted array.
-bySurnameList.sort();
-output.push('---------- Sorted');
-for (i = 0, len = bySurnameList.length; i < len; i++) {
-  output.push(bySurnameList[i]);
-}
-
-output.push('---------- End');
-
-console.log(output.join('\n'));
-
- -

Using special characters to verify input

- -

In the following example, the user is expected to enter a phone number. When the user presses the "Check" button, the script checks the validity of the number. If the number is valid (matches the character sequence specified by the regular expression), the script shows a message thanking the user and confirming the number. If the number is invalid, the script informs the user that the phone number is not valid.

- -

Within non-capturing parentheses (?: , the regular expression looks for three numeric characters \d{3} OR | a left parenthesis \( followed by three digits \d{3}, followed by a close parenthesis \), (end non-capturing parenthesis )), followed by one dash, forward slash, or decimal point and when found, remember the character ([-\/\.]), followed by three digits \d{3}, followed by the remembered match of a dash, forward slash, or decimal point \1, followed by four digits \d{4}.

- -

The Change event activated when the user presses Enter sets the value of RegExp.input.

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
-    <meta http-equiv="Content-Script-Type" content="text/javascript">
-    <script type="text/javascript">
-      var re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/;
-      function testInfo(phoneInput) {
-        var OK = re.exec(phoneInput.value);
-        if (!OK)
-          window.alert(phoneInput.value + ' isn\'t a phone number with area code!');
-        else
-          window.alert('Thanks, your phone number is ' + OK[0]);
-      }
-    </script>
-  </head>
-  <body>
-    <p>Enter your phone number (with area code) and then click "Check".
-        <br>The expected format is like ###-###-####.</p>
-    <form action="#">
-      <input id="phone"><button onclick="testInfo(document.getElementById('phone'));">Check</button>
-    </form>
-  </body>
-</html>
-
- -
{{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}
diff --git a/files/nl/web/javascript/guide/werken_met_objecten/index.html b/files/nl/web/javascript/guide/werken_met_objecten/index.html deleted file mode 100644 index a2dffff1b8..0000000000 --- a/files/nl/web/javascript/guide/werken_met_objecten/index.html +++ /dev/null @@ -1,497 +0,0 @@ ---- -title: Werken met objecten -slug: Web/JavaScript/Guide/Werken_met_objecten -translation_of: Web/JavaScript/Guide/Working_with_Objects ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}
- -

JavaScript is ontworpen op een simpel object-georiënteerde paradigma. Een object is een verzameling eigenschappen, en een eigenschap is een associatie tussen een naam (of een sleutel) en een waarde. De waarde van een eigenschap kan een functie zijn, in welk geval de eigenschap bekend staat als een methode. Naast objecten die zijn gedefinieerd in de browser, kunt u uw eigen objecten definiëren. In dit hoofdstuk wordt beschreven hoe u objecten, eigenschappen, functies en methoden kunt gebruiken en hoe u uw eigen objecten kunt maken.

- -

Objecten overzicht

- -

Objecten in JavaScript, net zoals in veel andere programmeertalen, kunnen worden vergeleken met objecten in het echte leven. Het begrip objecten in JavaScript kan worden begrepen met echte, tastbare objecten.

- -

In JavaScript is een object een zelfstandige entiteit, met eigenschappen en type. Vergelijk het bijvoorbeeld met een kopje. Een kopje is een voorwerp, met eigenschappen. Een kopje heeft een kleur, een ontwerp, gewicht, een materiaal waaruit het bestaat, enz. Op dezelfde wijze kunnen JavaScript objecten eigenschappen hebben die hun karakteristieken definiëren.

- -

Objecten en eigenschappen

- -

Een JavaScript-object heeft eigenschappen die daarmee samenhangen. Een eigenschap van een object kan worden uitgelegd als een variabele die is gekoppeld aan het object. Objecteigenschappen zijn in principe hetzelfde als gewone JavaScript-variabelen, behalve de koppeling bij objecten. De eigenschappen van een object bepalen de karakteristieken van het object. U krijgt toegang tot de eigenschappen van een object met een simpele stip-notatie:

- -
objectName.propertyName
-
- -

Net als alle JavaScript variabelen, kunnen zowel de objectnaam (die een normale variabele zijn) en eigendomsnaam hoofdlettergevoelig zijn. U kunt een eigenschap definiëren door het toewijzen van een waarde. Laten we bijvoorbeeld een object maken met de naam myCar en geef het de eigenschappen als merk, model en jaar als volgt:

- -
var myCar = new Object();
-myCar.make = 'Ford';
-myCar.model = 'Mustang';
-myCar.year = 1969;
-
- -

Niet-toegewezen eigenschappen van een object zijn {{jsxref("undefined")}} (en niet {{jsxref("null")}}).

- -
myCar.color; // undefined
- -

Eigenschappen van JavaScript-objecten kunnen toegankelijk of ingesteld worden met behulp van een haakjes notitie (voor meer details zie toegangsbeheerders). Objecten worden soms associatieve arrays genoemd, aangezien elke eigenschap wordt geassocieerd met een tekenreeks die kan worden gebruikt om toegang te krijgen. Zo kun je bijvoorbeeld de eigenschappen van het myCar-object openen:

- -
myCar['make'] = 'Ford';
-myCar['model'] = 'Mustang';
-myCar['year'] = 1969;
-
- -

Een object naam eigenschap kan een geldige JavaScript-string zijn, of iets dat kan worden omgezet in een tekenreeks, inclusief de lege tekenreeks. Echter, elke naam eigenschap die geen geldige JavaScript-identificatie is (bijvoor-beeld een naam eigenschap die een spatie of een koppelteken heeft, of dat begint met een nummer), kan alleen worden geopend met behulp van de vierkante haakjes notatie. Deze notatie is ook erg handig wanneer naam eigenschappen dynamisch worden bepaald (wanneer de naam eigenschap niet tot de runtime wordt bepaald). Voorbeelden zijn als volgt:

- -
// four variables are created and assigned in a single go,
-// separated by commas
-var myObj = new Object(),
-    str = 'myString',
-    rand = Math.random(),
-    obj = new Object();
-
-myObj.type              = 'Dot syntax';
-myObj['date created']   = 'String with space';
-myObj[str]              = 'String value';
-myObj[rand]             = 'Random Number';
-myObj[obj]              = 'Object';
-myObj['']               = 'Even an empty string';
-
-console.log(myObj);
-
- -

Houd er rekening mee dat alle toetsen in de notatie van de vierkante haakjes worden geconverteerd naar String type, omdat objecten in JavaScript alleen String type kunnen hebben als sleutel type. Bijvoorbeeld, in de bovenstaande code, wanneer de sleutel obj aan de myObj wordt toegevoegd, roept JavaScript de methode obj.toString () op en gebruikt u deze resultaatreeks als de nieuwe sleutel.

- -

U kunt ook eigenschappen krijgen door een stringwaarde te gebruiken die in een variabele is opgeslagen:

- -
var propertyName = 'make';
-myCar[propertyName] = 'Ford';
-
-propertyName = 'model';
-myCar[propertyName] = 'Mustang';
-
- -

U kunt de notitie van de haakjes gebruiken voor ... om te herhalen over alle optelbare eigenschappen van een object. Om te illustreren hoe dit werkt, geeft de volgende functie de eigenschappen van het object weer wanneer u het object en de objectnaam als argumenten voor de functie doorstuurt:

- -
function showProps(obj, objName) {
-  var result = '';
-  for (var i in obj) {
-    // obj.hasOwnProperty() is used to filter out properties from the object's prototype chain
-    if (obj.hasOwnProperty(i)) {
-      result += objName + '.' + i + ' = ' + obj[i] + '\n';
-    }
-  }
-  return result;
-}
-
- -

Dus, de de functie aanroep showProps(myCar, "myCar") Zout  het volgende retourneren:

- -
myCar.make = Ford
-myCar.model = Mustang
-myCar.year = 1969
- -

Doorloop de eigenschappen van een object

- -

Uitgaande van ECMAScript 5 zijn er drie manieren om objecteigenschappen te kunnen bekijken/doorlopen:

- - - -

Vóór ECMAScript 5 was er geen native manier om alle eigenschappen van een object te overlopen. Dit kan echter worden bereikt met de volgende functie:

- -
function listAllProperties(o) {
-	var objectToInspect;
-	var result = [];
-
-	for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)) {
-      result = result.concat(Object.getOwnPropertyNames(objectToInspect));
-	}
-
-	return result;
-}
-
- -

Dit kan handig zijn om 'verborgen' eigenschappen te onthullen (eigenschappen in de prototype-keten die niet door het object toegankelijk zijn, omdat een andere eigenschap eerder in de prototype-keten dezelfde naam heeft). Op deze manier kan er gemakkelijk een lijst van toegankelijke eigenschappen worden gemaakt. 

- -

Nieuwe objecten maken

- -

JavaScript heeft een aantal voorgedefinieerde objecten. Daarnaast kunt u uw eigen objecten maken. U kunt een object maken met een objectinitiator. Als alternatief kunt u eerst een constructorfunctie maken en vervolgens een object oproepen die de functie in combinatie met de nieuwe operator invult.

- -

Object initialiseerders gebruiken

- -

Naast het maken van objecten die een constructorfunctie gebruiken, kunt u objecten maken met behulp van een objectinitiator. Het gebruik van objectinitialisatoren wordt soms aangeduid als het maken van objecten met letterlijke notatie. "Object initializer" is consistent met de terminologie die door C ++ wordt gebruikt.

- -

De syntaxis voor een object met een objectinitialiseerder is:

- -
var obj = { property_1:   value_1,   // property_# may be an identifier...
-            2:            value_2,   // or a number...
-            // ...,
-            'property n': value_n }; // or a string
-
- -

Waar obj de naam van het nieuwe object is, is elke eigenschap_i een identificatie (een naam, een getal of een tekenreeks) en elke waarde_i is een uitdrukking waarvan de waarde is toegewezen aan het property_i. De obj en de opdracht zijn optioneel; Als u niet elders naar het object hoeft te verwijzen, hoeft u het niet toe te wijzen aan een variabele. (Houd er echter rekening mee dat u het object letterlijk tussen haakjes moet kunnen wikkelen wanneer het object verschijnt waar een verklaring wordt verwacht, om niet letterlijk te verwarren met een blokverklaring.)

- -

Objectinitialisatoren zijn expressies, en elke objectinitialiser resulteert in een nieuw object dat wordt gemaakt, wanneer de statement waarin het verschijnt is uitgevoerd. Identieke objectinitializers maken onderscheidende objecten die niet gelijk zijn aan elkaar. Objecten worden gecreëerd als een oproep naar een nieuw object () is gemaakt; Dat wil zeggen, objecten gemaakt van object letterlijke expressies zijn instances van object.

- -

De volgende statement maakt een object en wijst deze toe aan de variabele x als en alleen als de uitdrukkings cond waar is:

- -
if (cond) var x = {greeting: 'hi there'};
-
- -

Het volgende voorbeeld maakt myHonda met drie eigenschappen. Merk op dat de motoreigenschap ook een object is met eigen eigenschappen.

- -
var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}};
-
- -

U kunt ook objectinitieringen gebruiken om arrays te maken. Zie array literals.

- -

Gebruik van een constructor functie

- -

Alternatief voor het maken van een object met deze twee stappen:

- -
    -
  1. Definieer het objecttype door een constructorfunctie te schrijven. Er is een sterke conventie, met goede reden, om een hoofdletter te gebruiken.
    2. -
  2. Creer een instance van het object met new.
    3. -
- -

Om een objecttype te definiëren, creëer een functie voor het objecttype dat zijn naam, eigenschappen en methoden specificeert. Stel bijvoorbeeld dat u een objecttype voor auto's wilt maken. U wilt dat dit type object een auto wordt genoemd, en u wilt dat het eigenschappen voor make, model en jaar heeft. Om dit te doen, zou u de volgende functie schrijven:

- -
function Car(make, model, year) {
-  this.make = make;
-  this.model = model;
-  this.year = year;
-}
-
- -

Let op de manier om waarden aan de eigenschappen van het object toe te wijzen op basis van de waarden die aan de functie zijn overgedragen.

- -

Nu kunt u als volgt een object genaamd mycar maken:

- -
var mycar = new Car('Eagle', 'Talon TSi', 1993);
-
- -

Deze verklaring maakt mycar en wijst de opgegeven waarden toe voor zijn eigenschappen. Dan is de waarde van mycar.make de string "Eagle", mijncar.jaar is het geheel getal 1993, enzovoort.

- -

U kunt elk gewenst aantal car objecten maken door het aanroepen van new. Bijvoorbeeld,

- -
var kenscar = new Car('Nissan', '300ZX', 1992);
-var vpgscar = new Car('Mazda', 'Miata', 1990);
-
- -

Een object kan een eigenschap hebben dat zelf een ander object is. Stel bijvoorbeeld dat u een object genaamd person als volgt definieert:

- -
function Person(name, age, sex) {
-  this.name = name;
-  this.age = age;
-  this.sex = sex;
-}
-
- -

En installeer dan twee nieuwe persoon objecten als volgt:

- -
var rand = new Person('Rand McKinnon', 33, 'M');
-var ken = new Person('Ken Jones', 39, 'M');
-
- -

Vervolgens kunt u de definitie van de auto omschrijven om een eigendom van een persoon die een persoon object heeft, als volgt te omvatten:

- -
function Car(make, model, year, owner) {
-  this.make = make;
-  this.model = model;
-  this.year = year;
-  this.owner = owner;
-}
-
- -

Om de nieuwe objecten te instantiëren, gebruik dan het volgende:

- -
var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
-var car2 = new Car('Nissan', '300ZX', 1992, ken);
-
- -

Merk op dat in plaats van een letterlijke tekenreeks of integerwaarde bij het maken van nieuwe objecten de bovengenoemde uitspraken de voorwerpen rand overbrengen en kenmerken als de argumenten voor de eigenaren. Dan als u de naam van de eigenaar van car2 wilt ontdekken, kunt u toegang hebben tot de volgende accommodatie:

- -
car2.owner.name
-
- -

Houd er rekening mee dat u altijd een eigenschap kunt toevoegen aan een eerder gedefinieerd object. Bijvoorbeeld de verklaring

- -
car1.color = 'black';
-
- -

Voegt een kleureigenschap toe aan car1, en geeft het een waarde van 'black' toe. Dit heeft echter geen invloed op andere objecten. Om de nieuwe eigenschap toe te voegen aan alle objecten van hetzelfde type, moet u de eigenschap toevoegen aan de definitie van het type auto-object.

- -

Gebruik van de  Object.create methode

- -

Objecten kunnen ook worden gemaakt met de methode {{jsxref ("Object.create ()")}}. Deze methode kan erg handig zijn, omdat u het prototype object voor het object kunt maken dat u wilt maken zonder dat u een constructor function.type moet definiëren.

- -
// Animal properties and method encapsulation
-var Animal = {
-  type: 'Invertebrates', // Default value of properties
-  displayType: function() {  // Method which will display type of Animal
-    console.log(this.type);
-  }
-};
-
-// Create new animal type called animal1
-var animal1 = Object.create(Animal);
-animal1.displayType(); // Output:Invertebrates
-
-// Create new animal type called Fishes
-var fish = Object.create(Animal);
-fish.type = 'Fishes';
-fish.displayType(); // Output:Fishes
- -

Overerving

- -

Alle objecten in JavaScript overerven van ten minste één ander object. Het object dat wordt geërfd is bekend als het prototype, en de geërfde eigenschappen zijn te vinden in het prototype object van de constructor. Zie Inheritance and the prototype chain voor meer informatie.

- -

Objecteigenschappen indexeren

- -

U kunt verwijzen naar een eigenschap van een object, hetzij door zijn eigendomsnaam of door zijn ordinale index. Als u voor het eerst een eigenschap definieert, moet u het altijd bij zijn naam noemen, en als u eerst een eigenschap definieert met een index, moet u het altijd door de index refereren.

- -

Deze beperking is van toepassing wanneer u een object en zijn eigenschappen maakt met een constructorfunctie(zoals eerder met het Car-object type) en wanneer u afzonderlijke eigenschappen expliciet definieert(bijvoorbeeld, myCar.color = "red"). Als u eerst een objecteigenschap definieert met een index, zoals myCar[5] = "25 mpg", verwijst u vervolgens alleen naar de eigenschap als myCar[5].

- -

De uitzondering op deze regel zijn objecten die uit HTML worden gereflecteerd, zoals de formulier array. U kunt altijd naar objecten in deze arrays verwijzen door hun ordernummer (op basis van waar ze in het document verschijnen) of hun naam (indien gedefinieerd). ). Als de tweede <FORM> -code in een document bijvoorbeeld een NAME-kenmerk van "myForm" heeft, kunt u verwijzen naar het formulier als document.forms[1] of document.forms["myForm"] of document.forms.myForm.

- -

Definiëren van eigenschappen voor een objecttype

- -

U kunt een eigenschap toevoegen aan een eerder gedefinieerd objecttype door het eigenschap prototype te gebruiken. Dit definieert een eigenschap die wordt gedeeld door alle objecten van het opgegeven type, in plaats van door slechts één instantie van het object. De volgende code voegt een kleureigenschap toe aan alle objecten van het type auto, en geeft vervolgens een waarde toe aan de kleureigenschap van het object car1.

- -
Car.prototype.color = null;
-car1.color = 'black';
-
- -

Zie het prototype property van het Functieobject in de JavaScript reference voor meer informatie.

- -

Methodes definiëren

- -

Een method is een functie die geassocieerd wordt met een object, of, simpel gezegd, een methode is een eigen-schap van een object dat een functie is. Methoden worden gedefinieerd zoals de normale functies zijn ge-definieerd, behalve dat ze als eigendom van een object moeten worden toegewezen. Zie ook method definitions voor meer details. Een voorbeeld is:

- -
objectName.methodname = function_name;
-
-var myObj = {
-  myMethod: function(params) {
-    // ...do something
-  }
-
-  // OR THIS WORKS TOO
-
-  myOtherMethod(params) {
-    // ...do something else
-  }
-};
-
- -

Waar objectnaam een bestaand object is, methodname is de naam die u aan de methode toewijst en functienaam is de naam van de functie.

- -

U kunt dan de methode in de context van het object als volgt noemen:

- -
object.methodname(params);
-
- -

U kunt methoden voor een objecttype definiëren door een methode-definitie in de objectconstructorfunctie op te nemen. U kunt een functie definiëren die de eigenschappen van de eerder gedefinieerde autoobjecten wilt opmaken en weergeven; bijvoorbeeld,:

- -
function displayCar() {
-  var result = 'A Beautiful ' + this.year + ' ' + this.make
-    + ' ' + this.model;
-  pretty_print(result);
-}
-
- -

Waar pretty_print een functie is om een horizontale regel en een tekenreeks weer te geven. Let op het gebruik van this verwijzend naar het object waartoe de methode behoort.

- -

Van deze functie car kun je een methode maken door het toevoegen van een statement.

- -
this.displayCar = displayCar;
-
- -

Naar de objectdefinitie. Dus, de volledige definitie van auto zou nu lijken

- -
function Car(make, model, year, owner) {
-  this.make = make;
-  this.model = model;
-  this.year = year;
-  this.owner = owner;
-  this.displayCar = displayCar;
-}
-
- -

Dan kunt u de displayCar-methode voor elk van de objecten als volgt noemen:

- -
car1.displayCar();
-car2.displayCar();
-
- -

Het gebruik van this voor object referenties

- -

JavaScript heeft een speciaal zoekwoord, this,  dat u binnen een methode kunt gebruiken om naar het huidige object te verwijzen. Stel bijvoorbeeld dat u een functie heeft genaamd validate, die een object's eigenschaps waarde, gegeven de object's hoge en lage waarde valideert:

- -
function validate(obj, lowval, hival) {
-  if ((obj.value < lowval) || (obj.value > hival)) {
-    alert('Invalid Value!');
-  }
-}
-
- -

Vervolgens kunt u validate in elke form element's onchange event handler aanroepen,  gebruikmakend van this om het element door te geven zoals in het volgende voorbeeld:

- -
<input type="text" name="age" size="3"
-  onChange="validate(this, 18, 99)">
-
- -

In het algemeen verwijst dit naar het aanroepende object in een methode.

- -

In combinatie met de form eigenschap, kan dit verwijzen naar het ouderformulier van het huidige object. In het volgende voorbeeld, bevat het formulier myForm  een Text object en een button. Wanneer de gebruiker op de button klikt, wordt de waarde van het tekstobject ingesteld op de naam van het formulier. De knop onclick event handler gebruikt dit this.form to om te verwijzen naar het ouder formulier, myForm.

- -
<form name="myForm">
-<p><label>Form name:<input type="text" name="text1" value="Beluga"></label>
-<p><input name="button1" type="button" value="Show Form Name"
-     onclick="this.form.text1.value = this.form.name">
-</p>
-</form>
- -

Definitie van getters en setters

- -

Een getter is een methode die de waarde van een specifieke eigenschap krijgt. Een setter is een methode die de waarde van een specifieke eigenschap bepaalt. U kunt getters en setters definiëren op elk voorgedefinieerd kern object of door gebruiker gedefinieerd object dat de toevoeging van nieuwe eigenschappen ondersteunt. De syntaxis voor het definiëren van getters en setters maakt gebruik van de object letterlijke syntaxis.

- -

Het volgende illustreert hoe getters en setters kunnen werken voor een gebruiker gedefinieerd object o.

- -
var o = {
-  a: 7,
-  get b() {
-    return this.a + 1;
-  },
-  set c(x) {
-    this.a = x / 2;
-  }
-};
-
-console.log(o.a); // 7
-console.log(o.b); // 8
-o.c = 50;
-console.log(o.a); // 25
-
- -

De o objecten eigenschappen zijn:

- - - -

Houd er rekening mee dat de functie namen van getters en setters gedefinieerd in een object letterlijk met behulp van "[gs] et property ()" (in tegenstelling tot __define [GS]etter__) niet de namen van de getters zelf zijn, hoewel de "[gs]et Property()" syntax zou ju kunnen misleiden anders te denken. Om een functie te noemen in een getter of setter met behulp van de "[gs]et property () "syntax, definieer u een expliciet genoemde functie met behulp van Object.defineProperty (of de Object.prototype.__defineGetter__ legacy fallback).

- -

De volgende code illustreert hoe getters en setters het {{jsxref ("Date")}} prototype kunnen uitbreiden om een jaar eigenschap toe te voegen aan alle gevallen van de vooraf gedefinieerde Date class. Het maakt gebruik van de bestaande GetFullYear- en setFullYear-methoden van de Date-klasse om de getter en setter van het jaar te ondersteunen.

- -

Deze uitspraken definiëren een getter en setter voor het jaar eigenschap:

- -
var d = Date.prototype;
-Object.defineProperty(d, 'year', {
-  get: function() { return this.getFullYear(); },
-  set: function(y) { this.setFullYear(y); }
-});
-
- -

Deze statements gebruiken de getter en setter in een Datum object:

- -
var now = new Date();
-console.log(now.year); // 2000
-now.year = 2001; // 987617605170
-console.log(now);
-// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
-
- -

In principe, getters en setters kunnen beide

- - - -

Bij het definiëren van getters en setters met behulp van object initializers alles wat u hoeft te doen is het prefix van een getter methode met get en een setter methode met set. Natuurlijk mag de getter-methode geen parameter verwachten, terwijl de setter-methode precies een parameter verwacht (de nieuwe waarde die wordt ingesteld). Bijvoorbeeld:

- -
var o = {
-  a: 7,
-  get b() { return this.a + 1; },
-  set c(x) { this.a = x / 2; }
-};
-
- -

Getters en setters kunnen ook op elk moment na creatie aan een object worden toegevoegd met de methode Object.defineProperties. De eerste parameter van deze methode is het object waarop u de getter of setter wilt definiëren. De tweede parameter is een object waarvan de eigenschap namen getter of setter namen zijn en waarvan de eigenschapswaarden objecten zijn om de getter- of setterfuncties te definiëren. Hier is een voorbeeld dat dezelfde getter en setter definieert in het vorige voorbeeld:

- -
var o = { a: 0 };
-
-Object.defineProperties(o, {
-    'b': { get: function() { return this.a + 1; } },
-    'c': { set: function(x) { this.a = x / 2; } }
-});
-
-o.c = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
-console.log(o.b); // Runs the getter, which yields a + 1 or 6
-
- -

Welke van de twee te kiezen vormen hangt af van uw programmeerstijl en taak. Als u gaat voor de objectinitiator wanneer u een prototype definieert, zal u waarschijnlijk meestal de eerste vorm kiezen. Dit formulier is compacter en natuurlijker. Als u later wel getters en setters moet toevoegen, omdat u het prototype of het specifieke object niet hebt geschreven, dan is de tweede vorm het enige mogelijke formulier. De tweede vorm vertegenwoordigt waarschijnlijk het dynamische karakter van JavaScript, maar het kan de code moeilijk lezen en begrijpen.

- -

Verwijderen van eigenschappen

- -

U kunt een niet-overgenomen eigenschap verwijderen door gebruik te maken van de delete operator. De volgende code toont aan hoe u een eigenschap verwijdert.

- -
// Creates a new object, myobj, with two properties, a and b.
-var myobj = new Object;
-myobj.a = 5;
-myobj.b = 12;
-
-// Removes the a property, leaving myobj with only the b property.
-delete myobj.a;
-console.log ('a' in myobj); // yields "false"
-
- -

U kunt ook delete gebruiken om een globale variabele te verwijderen als het var sleutelwoord niet gebruikt werd om de variabele te verklaren:

- -
g = 17;
-delete g;
-
- -

Objecten vergelijken

- -

In JavaScript zijn objecten een referentietype. Twee afzonderlijke objecten zijn nooit gelijk, ook al hebben ze dezelfde eigenschappen. Alleen het vergelijken van datzelfde object-referentie met zichzelf geeft waar.

- -
// Twee variabelen, twee verschillende object met de dezelfde eigenschappen
-var fruit = {name: 'apple'};
-var fruitbear = {name: 'apple'};
-
-fruit == fruitbear; // geeft false
-fruit === fruitbear; // geeft false
- -
// Twee variabelen, één object
-var fruit = {name: 'apple'};
-var fruitbear = fruit;  // wijs referentie van fruit object referentie toe aan fruitbear
-
-// hier verwijzen fruit en fruitbear naar hetzelfde object
-fruit == fruitbear; // return true
-fruit === fruitbear; // return true
-
- -
fruit.name = 'grape';
-console.log(fruitbear);    // geeft { name: "grape" } terug ipv { name: "apple" }
-
- -

Voor meer informatie over vergelijkingsoperators, bekijk Comparison operators.

- -

Bekijk ook

- - - -

{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}

diff --git a/files/nl/web/javascript/guide/working_with_objects/index.html b/files/nl/web/javascript/guide/working_with_objects/index.html new file mode 100644 index 0000000000..a2dffff1b8 --- /dev/null +++ b/files/nl/web/javascript/guide/working_with_objects/index.html @@ -0,0 +1,497 @@ +--- +title: Werken met objecten +slug: Web/JavaScript/Guide/Werken_met_objecten +translation_of: Web/JavaScript/Guide/Working_with_Objects +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}
+ +

JavaScript is ontworpen op een simpel object-georiënteerde paradigma. Een object is een verzameling eigenschappen, en een eigenschap is een associatie tussen een naam (of een sleutel) en een waarde. De waarde van een eigenschap kan een functie zijn, in welk geval de eigenschap bekend staat als een methode. Naast objecten die zijn gedefinieerd in de browser, kunt u uw eigen objecten definiëren. In dit hoofdstuk wordt beschreven hoe u objecten, eigenschappen, functies en methoden kunt gebruiken en hoe u uw eigen objecten kunt maken.

+ +

Objecten overzicht

+ +

Objecten in JavaScript, net zoals in veel andere programmeertalen, kunnen worden vergeleken met objecten in het echte leven. Het begrip objecten in JavaScript kan worden begrepen met echte, tastbare objecten.

+ +

In JavaScript is een object een zelfstandige entiteit, met eigenschappen en type. Vergelijk het bijvoorbeeld met een kopje. Een kopje is een voorwerp, met eigenschappen. Een kopje heeft een kleur, een ontwerp, gewicht, een materiaal waaruit het bestaat, enz. Op dezelfde wijze kunnen JavaScript objecten eigenschappen hebben die hun karakteristieken definiëren.

+ +

Objecten en eigenschappen

+ +

Een JavaScript-object heeft eigenschappen die daarmee samenhangen. Een eigenschap van een object kan worden uitgelegd als een variabele die is gekoppeld aan het object. Objecteigenschappen zijn in principe hetzelfde als gewone JavaScript-variabelen, behalve de koppeling bij objecten. De eigenschappen van een object bepalen de karakteristieken van het object. U krijgt toegang tot de eigenschappen van een object met een simpele stip-notatie:

+ +
objectName.propertyName
+
+ +

Net als alle JavaScript variabelen, kunnen zowel de objectnaam (die een normale variabele zijn) en eigendomsnaam hoofdlettergevoelig zijn. U kunt een eigenschap definiëren door het toewijzen van een waarde. Laten we bijvoorbeeld een object maken met de naam myCar en geef het de eigenschappen als merk, model en jaar als volgt:

+ +
var myCar = new Object();
+myCar.make = 'Ford';
+myCar.model = 'Mustang';
+myCar.year = 1969;
+
+ +

Niet-toegewezen eigenschappen van een object zijn {{jsxref("undefined")}} (en niet {{jsxref("null")}}).

+ +
myCar.color; // undefined
+ +

Eigenschappen van JavaScript-objecten kunnen toegankelijk of ingesteld worden met behulp van een haakjes notitie (voor meer details zie toegangsbeheerders). Objecten worden soms associatieve arrays genoemd, aangezien elke eigenschap wordt geassocieerd met een tekenreeks die kan worden gebruikt om toegang te krijgen. Zo kun je bijvoorbeeld de eigenschappen van het myCar-object openen:

+ +
myCar['make'] = 'Ford';
+myCar['model'] = 'Mustang';
+myCar['year'] = 1969;
+
+ +

Een object naam eigenschap kan een geldige JavaScript-string zijn, of iets dat kan worden omgezet in een tekenreeks, inclusief de lege tekenreeks. Echter, elke naam eigenschap die geen geldige JavaScript-identificatie is (bijvoor-beeld een naam eigenschap die een spatie of een koppelteken heeft, of dat begint met een nummer), kan alleen worden geopend met behulp van de vierkante haakjes notatie. Deze notatie is ook erg handig wanneer naam eigenschappen dynamisch worden bepaald (wanneer de naam eigenschap niet tot de runtime wordt bepaald). Voorbeelden zijn als volgt:

+ +
// four variables are created and assigned in a single go,
+// separated by commas
+var myObj = new Object(),
+    str = 'myString',
+    rand = Math.random(),
+    obj = new Object();
+
+myObj.type              = 'Dot syntax';
+myObj['date created']   = 'String with space';
+myObj[str]              = 'String value';
+myObj[rand]             = 'Random Number';
+myObj[obj]              = 'Object';
+myObj['']               = 'Even an empty string';
+
+console.log(myObj);
+
+ +

Houd er rekening mee dat alle toetsen in de notatie van de vierkante haakjes worden geconverteerd naar String type, omdat objecten in JavaScript alleen String type kunnen hebben als sleutel type. Bijvoorbeeld, in de bovenstaande code, wanneer de sleutel obj aan de myObj wordt toegevoegd, roept JavaScript de methode obj.toString () op en gebruikt u deze resultaatreeks als de nieuwe sleutel.

+ +

U kunt ook eigenschappen krijgen door een stringwaarde te gebruiken die in een variabele is opgeslagen:

+ +
var propertyName = 'make';
+myCar[propertyName] = 'Ford';
+
+propertyName = 'model';
+myCar[propertyName] = 'Mustang';
+
+ +

U kunt de notitie van de haakjes gebruiken voor ... om te herhalen over alle optelbare eigenschappen van een object. Om te illustreren hoe dit werkt, geeft de volgende functie de eigenschappen van het object weer wanneer u het object en de objectnaam als argumenten voor de functie doorstuurt:

+ +
function showProps(obj, objName) {
+  var result = '';
+  for (var i in obj) {
+    // obj.hasOwnProperty() is used to filter out properties from the object's prototype chain
+    if (obj.hasOwnProperty(i)) {
+      result += objName + '.' + i + ' = ' + obj[i] + '\n';
+    }
+  }
+  return result;
+}
+
+ +

Dus, de de functie aanroep showProps(myCar, "myCar") Zout  het volgende retourneren:

+ +
myCar.make = Ford
+myCar.model = Mustang
+myCar.year = 1969
+ +

Doorloop de eigenschappen van een object

+ +

Uitgaande van ECMAScript 5 zijn er drie manieren om objecteigenschappen te kunnen bekijken/doorlopen:

+ + + +

Vóór ECMAScript 5 was er geen native manier om alle eigenschappen van een object te overlopen. Dit kan echter worden bereikt met de volgende functie:

+ +
function listAllProperties(o) {
+	var objectToInspect;
+	var result = [];
+
+	for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)) {
+      result = result.concat(Object.getOwnPropertyNames(objectToInspect));
+	}
+
+	return result;
+}
+
+ +

Dit kan handig zijn om 'verborgen' eigenschappen te onthullen (eigenschappen in de prototype-keten die niet door het object toegankelijk zijn, omdat een andere eigenschap eerder in de prototype-keten dezelfde naam heeft). Op deze manier kan er gemakkelijk een lijst van toegankelijke eigenschappen worden gemaakt. 

+ +

Nieuwe objecten maken

+ +

JavaScript heeft een aantal voorgedefinieerde objecten. Daarnaast kunt u uw eigen objecten maken. U kunt een object maken met een objectinitiator. Als alternatief kunt u eerst een constructorfunctie maken en vervolgens een object oproepen die de functie in combinatie met de nieuwe operator invult.

+ +

Object initialiseerders gebruiken

+ +

Naast het maken van objecten die een constructorfunctie gebruiken, kunt u objecten maken met behulp van een objectinitiator. Het gebruik van objectinitialisatoren wordt soms aangeduid als het maken van objecten met letterlijke notatie. "Object initializer" is consistent met de terminologie die door C ++ wordt gebruikt.

+ +

De syntaxis voor een object met een objectinitialiseerder is:

+ +
var obj = { property_1:   value_1,   // property_# may be an identifier...
+            2:            value_2,   // or a number...
+            // ...,
+            'property n': value_n }; // or a string
+
+ +

Waar obj de naam van het nieuwe object is, is elke eigenschap_i een identificatie (een naam, een getal of een tekenreeks) en elke waarde_i is een uitdrukking waarvan de waarde is toegewezen aan het property_i. De obj en de opdracht zijn optioneel; Als u niet elders naar het object hoeft te verwijzen, hoeft u het niet toe te wijzen aan een variabele. (Houd er echter rekening mee dat u het object letterlijk tussen haakjes moet kunnen wikkelen wanneer het object verschijnt waar een verklaring wordt verwacht, om niet letterlijk te verwarren met een blokverklaring.)

+ +

Objectinitialisatoren zijn expressies, en elke objectinitialiser resulteert in een nieuw object dat wordt gemaakt, wanneer de statement waarin het verschijnt is uitgevoerd. Identieke objectinitializers maken onderscheidende objecten die niet gelijk zijn aan elkaar. Objecten worden gecreëerd als een oproep naar een nieuw object () is gemaakt; Dat wil zeggen, objecten gemaakt van object letterlijke expressies zijn instances van object.

+ +

De volgende statement maakt een object en wijst deze toe aan de variabele x als en alleen als de uitdrukkings cond waar is:

+ +
if (cond) var x = {greeting: 'hi there'};
+
+ +

Het volgende voorbeeld maakt myHonda met drie eigenschappen. Merk op dat de motoreigenschap ook een object is met eigen eigenschappen.

+ +
var myHonda = {color: 'red', wheels: 4, engine: {cylinders: 4, size: 2.2}};
+
+ +

U kunt ook objectinitieringen gebruiken om arrays te maken. Zie array literals.

+ +

Gebruik van een constructor functie

+ +

Alternatief voor het maken van een object met deze twee stappen:

+ +
    +
  1. Definieer het objecttype door een constructorfunctie te schrijven. Er is een sterke conventie, met goede reden, om een hoofdletter te gebruiken.
    2. +
  2. Creer een instance van het object met new.
    3. +
+ +

Om een objecttype te definiëren, creëer een functie voor het objecttype dat zijn naam, eigenschappen en methoden specificeert. Stel bijvoorbeeld dat u een objecttype voor auto's wilt maken. U wilt dat dit type object een auto wordt genoemd, en u wilt dat het eigenschappen voor make, model en jaar heeft. Om dit te doen, zou u de volgende functie schrijven:

+ +
function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+
+ +

Let op de manier om waarden aan de eigenschappen van het object toe te wijzen op basis van de waarden die aan de functie zijn overgedragen.

+ +

Nu kunt u als volgt een object genaamd mycar maken:

+ +
var mycar = new Car('Eagle', 'Talon TSi', 1993);
+
+ +

Deze verklaring maakt mycar en wijst de opgegeven waarden toe voor zijn eigenschappen. Dan is de waarde van mycar.make de string "Eagle", mijncar.jaar is het geheel getal 1993, enzovoort.

+ +

U kunt elk gewenst aantal car objecten maken door het aanroepen van new. Bijvoorbeeld,

+ +
var kenscar = new Car('Nissan', '300ZX', 1992);
+var vpgscar = new Car('Mazda', 'Miata', 1990);
+
+ +

Een object kan een eigenschap hebben dat zelf een ander object is. Stel bijvoorbeeld dat u een object genaamd person als volgt definieert:

+ +
function Person(name, age, sex) {
+  this.name = name;
+  this.age = age;
+  this.sex = sex;
+}
+
+ +

En installeer dan twee nieuwe persoon objecten als volgt:

+ +
var rand = new Person('Rand McKinnon', 33, 'M');
+var ken = new Person('Ken Jones', 39, 'M');
+
+ +

Vervolgens kunt u de definitie van de auto omschrijven om een eigendom van een persoon die een persoon object heeft, als volgt te omvatten:

+ +
function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+}
+
+ +

Om de nieuwe objecten te instantiëren, gebruik dan het volgende:

+ +
var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
+var car2 = new Car('Nissan', '300ZX', 1992, ken);
+
+ +

Merk op dat in plaats van een letterlijke tekenreeks of integerwaarde bij het maken van nieuwe objecten de bovengenoemde uitspraken de voorwerpen rand overbrengen en kenmerken als de argumenten voor de eigenaren. Dan als u de naam van de eigenaar van car2 wilt ontdekken, kunt u toegang hebben tot de volgende accommodatie:

+ +
car2.owner.name
+
+ +

Houd er rekening mee dat u altijd een eigenschap kunt toevoegen aan een eerder gedefinieerd object. Bijvoorbeeld de verklaring

+ +
car1.color = 'black';
+
+ +

Voegt een kleureigenschap toe aan car1, en geeft het een waarde van 'black' toe. Dit heeft echter geen invloed op andere objecten. Om de nieuwe eigenschap toe te voegen aan alle objecten van hetzelfde type, moet u de eigenschap toevoegen aan de definitie van het type auto-object.

+ +

Gebruik van de  Object.create methode

+ +

Objecten kunnen ook worden gemaakt met de methode {{jsxref ("Object.create ()")}}. Deze methode kan erg handig zijn, omdat u het prototype object voor het object kunt maken dat u wilt maken zonder dat u een constructor function.type moet definiëren.

+ +
// Animal properties and method encapsulation
+var Animal = {
+  type: 'Invertebrates', // Default value of properties
+  displayType: function() {  // Method which will display type of Animal
+    console.log(this.type);
+  }
+};
+
+// Create new animal type called animal1
+var animal1 = Object.create(Animal);
+animal1.displayType(); // Output:Invertebrates
+
+// Create new animal type called Fishes
+var fish = Object.create(Animal);
+fish.type = 'Fishes';
+fish.displayType(); // Output:Fishes
+ +

Overerving

+ +

Alle objecten in JavaScript overerven van ten minste één ander object. Het object dat wordt geërfd is bekend als het prototype, en de geërfde eigenschappen zijn te vinden in het prototype object van de constructor. Zie Inheritance and the prototype chain voor meer informatie.

+ +

Objecteigenschappen indexeren

+ +

U kunt verwijzen naar een eigenschap van een object, hetzij door zijn eigendomsnaam of door zijn ordinale index. Als u voor het eerst een eigenschap definieert, moet u het altijd bij zijn naam noemen, en als u eerst een eigenschap definieert met een index, moet u het altijd door de index refereren.

+ +

Deze beperking is van toepassing wanneer u een object en zijn eigenschappen maakt met een constructorfunctie(zoals eerder met het Car-object type) en wanneer u afzonderlijke eigenschappen expliciet definieert(bijvoorbeeld, myCar.color = "red"). Als u eerst een objecteigenschap definieert met een index, zoals myCar[5] = "25 mpg", verwijst u vervolgens alleen naar de eigenschap als myCar[5].

+ +

De uitzondering op deze regel zijn objecten die uit HTML worden gereflecteerd, zoals de formulier array. U kunt altijd naar objecten in deze arrays verwijzen door hun ordernummer (op basis van waar ze in het document verschijnen) of hun naam (indien gedefinieerd). ). Als de tweede <FORM> -code in een document bijvoorbeeld een NAME-kenmerk van "myForm" heeft, kunt u verwijzen naar het formulier als document.forms[1] of document.forms["myForm"] of document.forms.myForm.

+ +

Definiëren van eigenschappen voor een objecttype

+ +

U kunt een eigenschap toevoegen aan een eerder gedefinieerd objecttype door het eigenschap prototype te gebruiken. Dit definieert een eigenschap die wordt gedeeld door alle objecten van het opgegeven type, in plaats van door slechts één instantie van het object. De volgende code voegt een kleureigenschap toe aan alle objecten van het type auto, en geeft vervolgens een waarde toe aan de kleureigenschap van het object car1.

+ +
Car.prototype.color = null;
+car1.color = 'black';
+
+ +

Zie het prototype property van het Functieobject in de JavaScript reference voor meer informatie.

+ +

Methodes definiëren

+ +

Een method is een functie die geassocieerd wordt met een object, of, simpel gezegd, een methode is een eigen-schap van een object dat een functie is. Methoden worden gedefinieerd zoals de normale functies zijn ge-definieerd, behalve dat ze als eigendom van een object moeten worden toegewezen. Zie ook method definitions voor meer details. Een voorbeeld is:

+ +
objectName.methodname = function_name;
+
+var myObj = {
+  myMethod: function(params) {
+    // ...do something
+  }
+
+  // OR THIS WORKS TOO
+
+  myOtherMethod(params) {
+    // ...do something else
+  }
+};
+
+ +

Waar objectnaam een bestaand object is, methodname is de naam die u aan de methode toewijst en functienaam is de naam van de functie.

+ +

U kunt dan de methode in de context van het object als volgt noemen:

+ +
object.methodname(params);
+
+ +

U kunt methoden voor een objecttype definiëren door een methode-definitie in de objectconstructorfunctie op te nemen. U kunt een functie definiëren die de eigenschappen van de eerder gedefinieerde autoobjecten wilt opmaken en weergeven; bijvoorbeeld,:

+ +
function displayCar() {
+  var result = 'A Beautiful ' + this.year + ' ' + this.make
+    + ' ' + this.model;
+  pretty_print(result);
+}
+
+ +

Waar pretty_print een functie is om een horizontale regel en een tekenreeks weer te geven. Let op het gebruik van this verwijzend naar het object waartoe de methode behoort.

+ +

Van deze functie car kun je een methode maken door het toevoegen van een statement.

+ +
this.displayCar = displayCar;
+
+ +

Naar de objectdefinitie. Dus, de volledige definitie van auto zou nu lijken

+ +
function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+  this.displayCar = displayCar;
+}
+
+ +

Dan kunt u de displayCar-methode voor elk van de objecten als volgt noemen:

+ +
car1.displayCar();
+car2.displayCar();
+
+ +

Het gebruik van this voor object referenties

+ +

JavaScript heeft een speciaal zoekwoord, this,  dat u binnen een methode kunt gebruiken om naar het huidige object te verwijzen. Stel bijvoorbeeld dat u een functie heeft genaamd validate, die een object's eigenschaps waarde, gegeven de object's hoge en lage waarde valideert:

+ +
function validate(obj, lowval, hival) {
+  if ((obj.value < lowval) || (obj.value > hival)) {
+    alert('Invalid Value!');
+  }
+}
+
+ +

Vervolgens kunt u validate in elke form element's onchange event handler aanroepen,  gebruikmakend van this om het element door te geven zoals in het volgende voorbeeld:

+ +
<input type="text" name="age" size="3"
+  onChange="validate(this, 18, 99)">
+
+ +

In het algemeen verwijst dit naar het aanroepende object in een methode.

+ +

In combinatie met de form eigenschap, kan dit verwijzen naar het ouderformulier van het huidige object. In het volgende voorbeeld, bevat het formulier myForm  een Text object en een button. Wanneer de gebruiker op de button klikt, wordt de waarde van het tekstobject ingesteld op de naam van het formulier. De knop onclick event handler gebruikt dit this.form to om te verwijzen naar het ouder formulier, myForm.

+ +
<form name="myForm">
+<p><label>Form name:<input type="text" name="text1" value="Beluga"></label>
+<p><input name="button1" type="button" value="Show Form Name"
+     onclick="this.form.text1.value = this.form.name">
+</p>
+</form>
+ +

Definitie van getters en setters

+ +

Een getter is een methode die de waarde van een specifieke eigenschap krijgt. Een setter is een methode die de waarde van een specifieke eigenschap bepaalt. U kunt getters en setters definiëren op elk voorgedefinieerd kern object of door gebruiker gedefinieerd object dat de toevoeging van nieuwe eigenschappen ondersteunt. De syntaxis voor het definiëren van getters en setters maakt gebruik van de object letterlijke syntaxis.

+ +

Het volgende illustreert hoe getters en setters kunnen werken voor een gebruiker gedefinieerd object o.

+ +
var o = {
+  a: 7,
+  get b() {
+    return this.a + 1;
+  },
+  set c(x) {
+    this.a = x / 2;
+  }
+};
+
+console.log(o.a); // 7
+console.log(o.b); // 8
+o.c = 50;
+console.log(o.a); // 25
+
+ +

De o objecten eigenschappen zijn:

+ + + +

Houd er rekening mee dat de functie namen van getters en setters gedefinieerd in een object letterlijk met behulp van "[gs] et property ()" (in tegenstelling tot __define [GS]etter__) niet de namen van de getters zelf zijn, hoewel de "[gs]et Property()" syntax zou ju kunnen misleiden anders te denken. Om een functie te noemen in een getter of setter met behulp van de "[gs]et property () "syntax, definieer u een expliciet genoemde functie met behulp van Object.defineProperty (of de Object.prototype.__defineGetter__ legacy fallback).

+ +

De volgende code illustreert hoe getters en setters het {{jsxref ("Date")}} prototype kunnen uitbreiden om een jaar eigenschap toe te voegen aan alle gevallen van de vooraf gedefinieerde Date class. Het maakt gebruik van de bestaande GetFullYear- en setFullYear-methoden van de Date-klasse om de getter en setter van het jaar te ondersteunen.

+ +

Deze uitspraken definiëren een getter en setter voor het jaar eigenschap:

+ +
var d = Date.prototype;
+Object.defineProperty(d, 'year', {
+  get: function() { return this.getFullYear(); },
+  set: function(y) { this.setFullYear(y); }
+});
+
+ +

Deze statements gebruiken de getter en setter in een Datum object:

+ +
var now = new Date();
+console.log(now.year); // 2000
+now.year = 2001; // 987617605170
+console.log(now);
+// Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
+
+ +

In principe, getters en setters kunnen beide

+ + + +

Bij het definiëren van getters en setters met behulp van object initializers alles wat u hoeft te doen is het prefix van een getter methode met get en een setter methode met set. Natuurlijk mag de getter-methode geen parameter verwachten, terwijl de setter-methode precies een parameter verwacht (de nieuwe waarde die wordt ingesteld). Bijvoorbeeld:

+ +
var o = {
+  a: 7,
+  get b() { return this.a + 1; },
+  set c(x) { this.a = x / 2; }
+};
+
+ +

Getters en setters kunnen ook op elk moment na creatie aan een object worden toegevoegd met de methode Object.defineProperties. De eerste parameter van deze methode is het object waarop u de getter of setter wilt definiëren. De tweede parameter is een object waarvan de eigenschap namen getter of setter namen zijn en waarvan de eigenschapswaarden objecten zijn om de getter- of setterfuncties te definiëren. Hier is een voorbeeld dat dezelfde getter en setter definieert in het vorige voorbeeld:

+ +
var o = { a: 0 };
+
+Object.defineProperties(o, {
+    'b': { get: function() { return this.a + 1; } },
+    'c': { set: function(x) { this.a = x / 2; } }
+});
+
+o.c = 10; // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
+console.log(o.b); // Runs the getter, which yields a + 1 or 6
+
+ +

Welke van de twee te kiezen vormen hangt af van uw programmeerstijl en taak. Als u gaat voor de objectinitiator wanneer u een prototype definieert, zal u waarschijnlijk meestal de eerste vorm kiezen. Dit formulier is compacter en natuurlijker. Als u later wel getters en setters moet toevoegen, omdat u het prototype of het specifieke object niet hebt geschreven, dan is de tweede vorm het enige mogelijke formulier. De tweede vorm vertegenwoordigt waarschijnlijk het dynamische karakter van JavaScript, maar het kan de code moeilijk lezen en begrijpen.

+ +

Verwijderen van eigenschappen

+ +

U kunt een niet-overgenomen eigenschap verwijderen door gebruik te maken van de delete operator. De volgende code toont aan hoe u een eigenschap verwijdert.

+ +
// Creates a new object, myobj, with two properties, a and b.
+var myobj = new Object;
+myobj.a = 5;
+myobj.b = 12;
+
+// Removes the a property, leaving myobj with only the b property.
+delete myobj.a;
+console.log ('a' in myobj); // yields "false"
+
+ +

U kunt ook delete gebruiken om een globale variabele te verwijderen als het var sleutelwoord niet gebruikt werd om de variabele te verklaren:

+ +
g = 17;
+delete g;
+
+ +

Objecten vergelijken

+ +

In JavaScript zijn objecten een referentietype. Twee afzonderlijke objecten zijn nooit gelijk, ook al hebben ze dezelfde eigenschappen. Alleen het vergelijken van datzelfde object-referentie met zichzelf geeft waar.

+ +
// Twee variabelen, twee verschillende object met de dezelfde eigenschappen
+var fruit = {name: 'apple'};
+var fruitbear = {name: 'apple'};
+
+fruit == fruitbear; // geeft false
+fruit === fruitbear; // geeft false
+ +
// Twee variabelen, één object
+var fruit = {name: 'apple'};
+var fruitbear = fruit;  // wijs referentie van fruit object referentie toe aan fruitbear
+
+// hier verwijzen fruit en fruitbear naar hetzelfde object
+fruit == fruitbear; // return true
+fruit === fruitbear; // return true
+
+ +
fruit.name = 'grape';
+console.log(fruitbear);    // geeft { name: "grape" } terug ipv { name: "apple" }
+
+ +

Voor meer informatie over vergelijkingsoperators, bekijk Comparison operators.

+ +

Bekijk ook

+ + + +

{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}

diff --git a/files/nl/web/javascript/reference/classes/index.html b/files/nl/web/javascript/reference/classes/index.html new file mode 100644 index 0000000000..ca5210371c --- /dev/null +++ b/files/nl/web/javascript/reference/classes/index.html @@ -0,0 +1,252 @@ +--- +title: Klassen +slug: Web/JavaScript/Reference/Klasses +translation_of: Web/JavaScript/Reference/Classes +--- +
{{JsSidebar("Classes")}}
+ +

JavaScript classes zijn nieuw in ECMAScript 6. De class syntax is geen object-oriented inheritance model in JavaScript. JavaScript classes brengen een veel eenvoudigere en duidelijkere syntax voor het creëren van objecten.

+ +

Classes definiëren

+ +

Classes zijn eigenlijk functions, net zoals je function expressions en function declarations kan definiëren, de class syntax heeft twee componenten: class expressies en class declaraties.

+ +

Class declaraties

+ +

Eén manier om een class te definiëren is door gebruik te maken van class declaration. Om een klasse te declareren, gebruik je het class keyword gevolgd door de naam van de class. ("Polygon" hier).

+ +
class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+}
+ +

Hoisting

+ +

Een belangrijk verschil tussen function declarations en class declarations is dat function declarations {{Glossary("Hoisting", "hoisted")}} zijn en class declarations niet. Je moet eerst je klasse declareren voor je het kan gebruiken, anders krijg je een {{jsxref("ReferenceError")}}:

+ +
var p = new Polygon(); // ReferenceError
+
+class Polygon {}
+
+ +

Class expressions

+ +

Een class expression is een andere manier om een class te definiëren. Class expressions kunnen named of unnamed zijn. De naam gegeven aan een named class expression is local aan de body van de class.

+ +
// unnamed
+var Polygon = class {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+
+// named
+var Polygon = class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+};
+
+ +

Class body en method definitions

+ +

De body van een class is het stuk tussen de curly brackets {}. Hier kan je class members definiëren, zoals methodes of constructors.

+ +

Strict mode

+ +

De bodies van class declarations en class expressions worden uitgevoerd in strict mode. Constructor, static en prototype methods, getter en setter functions worden bijvoorbeeld uitgevoerd in strict mode.

+ +

Constructor

+ +

De constructor methode is een speciale methode voor het creëren en initializeren van een object voor de klasse. Er kan maar één speciale methode zijn met de naam "constructor" in een klasse. Een {{jsxref("SyntaxError")}} wordt gegooid indien de klasse meerdere constructor methodes heeft.

+ +

Een constructor kan gebruik maken van het super keyword om de constructor van de parent class op te roepen.

+ +

Prototype methods

+ +

Zie ook method definitions.

+ +
class Polygon {
+  constructor(height, width) {
+    this.height = height;
+    this.width = width;
+  }
+
+  get area() {
+    return this.calcArea()
+  }
+
+  calcArea() {
+    return this.height * this.width;
+  }
+}
+ +

Static methods

+ +

Het static keyword beschrijft een statische methode voor een klasse. Statische methodes kunnen worden opgeroepen zonder dat er een instantie gemaakt is van de klasse en kunnen ook niet opgeroepen worden wanneer er een instantie van gemaakt is. Statische methodes zijn dikwijls gebruikt als utility functions voor een applicatie.

+ +
class Point {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+
+    static distance(a, b) {
+        const dx = a.x - b.x;
+        const dy = a.y - b.y;
+
+        return Math.sqrt(dx*dx + dy*dy);
+    }
+}
+
+const p1 = new Point(5, 5);
+const p2 = new Point(10, 10);
+
+console.log(Point.distance(p1, p2));
+ +

Sub classing met extends

+ +

Het extends keyword wordt gebruikt in class declarations of class expressions om een klasse aan te maken als kind van een andere klasse.

+ +
class Animal {
+  constructor(name) {
+    this.name = name;
+  }
+
+  speak() {
+    console.log(this.name + ' makes a noise.');
+  }
+}
+
+class Dog extends Animal {
+  speak() {
+    console.log(this.name + ' barks.');
+  }
+}
+
+ +

Sub classing built-in objects

+ +

TBD

+ +

Super class calls with super

+ +

Het super keyword wordt gebruikt om een methode op te roepen in de parent klasse van het object.

+ +
class Cat {
+  constructor(name) {
+    this.name = name;
+  }
+
+  speak() {
+    console.log(this.name + ' makes a noise.');
+  }
+}
+
+class Lion extends Cat {
+  speak() {
+    super.speak();
+    console.log(this.name + ' roars.');
+  }
+}
+
+ +

ES5 inheritance syntax en ES6 classes syntax vergeleken

+ +

TBD

+ +

Voorbeelden

+ +

TBD

+ +

Specificaties

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ESDraft')}} 
+ +

Browser compatibiliteit

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)MS EdgeInternet ExplorerOperaSafari
Basic support{{CompatChrome(42.0)}}[1]4513{{CompatNo}}{{CompatNo}}{{CompatSafari(9.0)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}45{{CompatUnknown}}{{CompatUnknown}}9{{CompatChrome(42.0)}}[1]
+
+ +

[1] Requires strict mode. Non-strict mode support is behind the flag Enable Experimental JavaScript, disabled by default.

+ +

Zie ook

+ + diff --git a/files/nl/web/javascript/reference/global_objects/object/prototype/index.html b/files/nl/web/javascript/reference/global_objects/object/prototype/index.html deleted file mode 100644 index 8fcfcbfa59..0000000000 --- a/files/nl/web/javascript/reference/global_objects/object/prototype/index.html +++ /dev/null @@ -1,241 +0,0 @@ ---- -title: Object.prototype -slug: Web/JavaScript/Reference/Global_Objects/Object/prototype -tags: - - JavaScript - - Object - - Property -translation_of: Web/JavaScript/Reference/Global_Objects/Object -translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype ---- -
{{JSRef}}
- -

De Object.prototype eigenschap vertegenwoordigt het {{jsxref("Object")}} prototype object.

- -

{{js_property_attributes(0, 0, 0)}}

- -

Beschrijving

- -

Alle objecten in JavaScript zijn afstammelingen van het {{jsxref("Object")}}; alle objecten erven methode's en eigenschappen van Object.prototype, althans kunnen ze overschreden worden (behalve een Object met een null prototype, i.e Object.create(null)). Bijvoorbeeld, een andere constructors' prototypes overschrijden de constructor eigenschap en voorzien hun eigen  {{jsxref("Object.prototype.toString()", "toString()")}} methode's.

- -

Veranderingen in het Object prototype object zijn zichtbaar voor alle objecten door prototype chaining, tenzij de eigenschappen en methode's onderworpen door deze veranderingen worden overschreden verderop de prototype chain. Dit voorziet een vrij krachtig althans potentieel gevaarlijk mechanisme om het gedrag van een object te overschrijden of aan te vullen.

- -

Eigenschappen

- -
-
{{jsxref("Object.prototype.constructor")}}
-
Beschrijft de functie dat het object's prototype aanmaakt.
-
{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}
-
Wijst aan het object welke was bebruikt als prototype wanneer het object was geinstantieerd.
-
{{jsxref("Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}
-
Laat het toe om een functie te definieeren dat zal worden uitgevoerd wanneer een ongedefinieerd lid van een object word geroepen als een methode. 
-
{{jsxref("Object.prototype.count","Object.prototype.__count__")}} {{obsolete_inline}}
-
Used to return the number of enumerable properties directly on a user-defined object, but has been removed.
-
{{jsxref("Object.prototype.parent","Object.prototype.__parent__")}} {{obsolete_inline}}
-
Used to point to an object's context, but has been removed.
-
- -

Methode's

- -
-
{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Associeert een functie met een eigenschap dat, wanneer toegankelijk, een functie uitvoerd en zijn keert zijn return waarde terug.
-
{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Associeert een functie met een eigenschap dat, wanneer gezet, een functie uitvoerd dat de eigenchap veranderd.
-
{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Keert de functie geassocieert met de gespecificieerde eigenschap door de {{jsxref("Object.prototype.__defineGetter__()", "__defineGetter__()")}} methode.
-
{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
Keert de functie geassocieert met de gespecificieerde eigenschap door de {{jsxref("Object.prototype.__defineSetter__()", "__defineSetter__()")}} method.
-
{{jsxref("Object.prototype.hasOwnProperty()")}}
-
Keert een boolean terug die aanwijst of een object dat de eigenschap bevat als een directe eigenschap van dat object en niet wordt geerfd door de prototype chain.
-
{{jsxref("Object.prototype.isPrototypeOf()")}}
-
Keert een boolean waarde terug die aanwijst of het object in de prototype chain zit van het object van waaruit deze methode is geroepen.
-
{{jsxref("Object.prototype.propertyIsEnumerable()")}}
-
Keert een boolean waarde terug die aanwijst of de ECMAScript [[Enumerable]] attribute is gezet.
-
{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}
-
Keert een string terug die de bron van een object zijn literal, die het object waarop deze methode word op geroepen represedenteerd; je kan deze waarde gebruiken om een niew object te maken.
-
{{jsxref("Object.prototype.toLocaleString()")}}
-
Roept {{jsxref("Object.toString", "toString()")}}.
-
{{jsxref("Object.prototype.toString()")}}
-
Keert een string representatie terug van het object.
-
{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}
-
Verwijderd een watchpoint van een eigenschap van het object.
-
{{jsxref("Object.prototype.valueOf()")}}
-
Keert een primitive waarde terug van het gespecifieerde object.
-
{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}
-
Voegt een watchpoint toe aan de eigenschap van het object.
-
{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}
-
Used to evaluate a string of JavaScript code in the context of the specified object, but has been removed.
-
- -

Voorbeelden

- -

Als het gedrag van bestaande Object.prototype's methode's worden veranderd, overweeg code te injecteren door je uitbreiding in te wikkelen voor of achter de bestaande logica. Bijvoorbeeld, deze (ongeteste) code zal onvoorwaardelijk aangepaste logica uitvoeren vooralleer de ingebouwde logica of anderman's uitbreiding word uitgevoerd.

- -

Wanneer een functie is geroepen zullen de argumenten worden gehouden in de array-achtige "variable" van de argumenten. Bijvoorbeeld, in de call "myFn(a, b, c)", zullen de argumenten binnenin myFn's lichaam 3 array elementen bevatten die coressponderen tot (a, b, c).  Wanneer prototype's met haken worden bijgewerkt, voer simpelweg deze & de argementen (de call toestand) toe aan het huidig gedrag door apply() te roepen op de functie. Dit patroon can worden gebruikt voor elk prototype, zoals Node.prototype, Function.prototype, etc.

- -

var current = Object.prototype.valueOf; // Since my property "-prop-value" is cross-cutting and isn't always // on the same prototype chain, I want to modify Object.prototype: Object.prototype.valueOf = function() { if (this.hasOwnProperty("-prop-value") {   return this["-prop-value"];   } else {   // It doesn't look like one of my objects, so let's fall back on   // the default behavior by reproducing the current behavior as best we can.   // The apply behaves like "super" in some other languages.   // Even though valueOf() doesn't take arguments, some other hook may.   return current.apply(this, arguments);   } }

- -

Doordat JavaScript geen sub-classe object bevat, prototype is een handige workaround om een "base class" object aan te maken van bepaalde functie's die zich gedragen als objecten. Bijvoorbeeld:

- -
var Person = function() {
-  this.canTalk = true;
-};
-
-Person.prototype.greet = function() {
-  if (this.canTalk) {
-    console.log('Hi, I am ' + this.name);
-  }
-};
-
-var Employee = function(name, title) {
-  Person.call(this);
-  this.name = name;
-  this.title = title;
-};
-
-Employee.prototype = Object.create(Person.prototype);
-Employee.prototype.constructor = Employee;
-
-Employee.prototype.greet = function() {
-  if (this.canTalk) {
-    console.log('Hi, I am ' + this.name + ', the ' + this.title);
-  }
-};
-
-var Customer = function(name) {
-  Person.call(this);
-  this.name = name;
-};
-
-Customer.prototype = Object.create(Person.prototype);
-Customer.prototype.constructor = Customer;
-
-var Mime = function(name) {
-  Person.call(this);
-  this.name = name;
-  this.canTalk = false;
-};
-
-Mime.prototype = Object.create(Person.prototype);
-Mime.prototype.constructor = Mime;
-
-var bob = new Employee('Bob', 'Builder');
-var joe = new Customer('Joe');
-var rg = new Employee('Red Green', 'Handyman');
-var mike = new Customer('Mike');
-var mime = new Mime('Mime');
-
-bob.greet();
-// Hi, I am Bob, the Builder
-
-joe.greet();
-// Hi, I am Joe
-
-rg.greet();
-// Hi, I am Red Green, the Handyman
-
-mike.greet();
-// Hi, I am Mike
-
-mime.greet();
-
- -

Specificaties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificatieStatusCommentaar
{{SpecName('ES1')}}{{Spec2('ES1')}}Initiale definitie. Geimplemented in JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-object.prototype', 'Object.prototype')}}{{Spec2('ESDraft')}} 
- -

Browser ondersteuning

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
SoortChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basis Ondersteuning{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
SoortAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
- - - - - - - -
Basis Ondersteuning 
- 		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

See also

- - diff --git a/files/nl/web/javascript/reference/global_objects/symbol/index.html b/files/nl/web/javascript/reference/global_objects/symbol/index.html new file mode 100644 index 0000000000..f0777451c8 --- /dev/null +++ b/files/nl/web/javascript/reference/global_objects/symbol/index.html @@ -0,0 +1,205 @@ +--- +title: Symbool +slug: Web/JavaScript/Reference/Global_Objects/Symbool +tags: + - ECMAScript 2015 + - JavaScript + - Klasse + - Symbool +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol +--- +
{{JSRef}}
+ +

Het gegevenstype symbool is een primitief gegevenstype. De Symbol() functie geeft een waarde terug (returns a value) van het type symbool, heeft statische eigenschappen die verscheidene leden van ingebouwde objecten blootstelt, heeft statische methoden die het globale symbolregister blootstellen en vertegenwoordigd een ingebouwde objectklasse. Maar is onvolledig als een constructor, omdat het niet de "new Symbol()" syntaxis ondersteund.

+ +

Elke waarde teruggekregen van Symbol() is uniek. Zo'n teruggekregen waarde kan, bijvoorbeeld, gebruikt worden als identificatiemiddel voor objecteigenschappen; het primaire doel van dit gegevenstype. Hoewel er andere use-cases zijn, zoals het beschikbaar maken van ondoorzichtige gegevenstypen of als algemeen uniek identificatiemiddel. Meer uitleg over het doel en gebruik van het symbool is te vinden in de woordenlijst.

+ +

Beschrijving

+ +

Om een nieuw primitief symbool te creëren, schrijf je Symbol() met een optionele String als beschrijving:

+ +
let sym1 = Symbol()
+let sym2 = Symbol('foo')
+let sym3 = Symbol('foo')
+
+ +

De bovenstaande code creëert drie nieuwe symbolen. Let er op dat Symbol("foo") niet de string "foo" omzet naar een symbool maar dat het telkens een nieuw uniek symbool creëert:

+ +
Symbol('foo') === Symbol('foo')  // false
+
+ +

De volgende syntaxis met de {{jsxref("Operators/new", "new")}} operator zal een {{jsxref("TypeError")}}: afwerpen:

+ +
let sym = new Symbol()  // TypeError
+
+ +

Dit behoed auteurs ervoor om nadrukkelijk een Symbol wrapper-object te creëren in plaats van een nieuwe symboolwaarde. Terwijl normaal gesproken primitieve gegevenstypen wel gemaakt kunnen worden met een wrapper-object. (Zoals: new Boolean, new String en new Number).

+ +

Als je echt een Symbol wrapper-object wilt maken, kun je dit doen met de Object() functie:

+ +
let sym = Symbol('foo')
+typeof sym      // "symbol"
+let symObj = Object(sym)
+typeof symObj   // "object"
+
+ +

Gedeelde symbolen in het globale symboolregister

+ +

De bovenstaande syntaxis, die gebruik maakt van de Symbol() functie, creëert alleen niet een globaal symbool dat te gebruiken is door je gehele codebase. Om symbolen te creëren die door al je bestanden en zelfs door je realms (met elk hun eigen globale scope) te gebruiken zijn; gebruik je de methoden {{jsxref("Symbol.for()")}} en {{jsxref("Symbol.keyFor()")}}. Om, respectievelijk, symbolen in het globale symbolenregister aan te maken en terug te krijgen.

+ +

Symbooleigenschappen vinden in objecten

+ +

De methode {{jsxref("Object.getOwnPropertySymbols()")}} geeft een array met symbolen terug en laat je symbooleigenschappen vinden in een opgegeven object. Let er op dat elk object geïnitialiseerd wordt zonder eigen symbooleigenschappen, dus deze array zal leeg zijn tenzij je een symbool als eigenschap hebt gegeven aan een object. 

+ +

Constructor

+ +
+
Symbol()
+
De  Symbol() constructor geeft een waarde terug van het type symbol, maar is incompleet als een constructor omdat het niet de "new Symbol()" syntaxis ondersteund.
+
+ +

Static properties

+ +
+
{{jsxref("Symbol.asyncIterator")}}
+
A method that returns the default AsyncIterator for an object. Used by for await...of.
+
{{jsxref("Symbol.hasInstance")}}
+
A method determining if a constructor object recognizes an object as its instance. Used by {{jsxref("Operators/instanceof", "instanceof")}}.
+
{{jsxref("Symbol.isConcatSpreadable")}}
+
A Boolean value indicating if an object should be flattened to its array elements. Used by {{jsxref("Array.prototype.concat()")}}.
+
{{jsxref("Symbol.iterator")}}
+
A method returning the default iterator for an object. Used by for...of.
+
{{jsxref("Symbol.match")}}
+
A method that matches against a string, also used to determine if an object may be used as a regular expression. Used by {{jsxref("String.prototype.match()")}}.
+
{{jsxref("Symbol.matchAll")}}
+
A method that returns an iterator, that yields matches of the regular expression against a string. Used by {{jsxref("String.prototype.matchAll()")}}.
+
{{jsxref("Symbol.replace")}}
+
A method that replaces matched substrings of a string. Used by {{jsxref("String.prototype.replace()")}}.
+
{{jsxref("Symbol.search")}}
+
A method that returns the index within a string that matches the regular expression. Used by {{jsxref("String.prototype.search()")}}.
+
{{jsxref("Symbol.split")}}
+
A method that splits a string at the indices that match a regular expression. Used by {{jsxref("String.prototype.split()")}}.
+
{{jsxref("Symbol.species")}}
+
A constructor function that is used to create derived objects.
+
{{jsxref("Symbol.toPrimitive")}}
+
A method converting an object to a primitive value.
+
{{jsxref("Symbol.toStringTag")}}
+
A string value used for the default description of an object. Used by {{jsxref("Object.prototype.toString()")}}.
+
{{jsxref("Symbol.unscopables")}}
+
An object value of whose own and inherited property names are excluded from the with environment bindings of the associated object.
+
+ +

Static methods

+ +
+
{{jsxref("Symbol.for()", "Symbol.for(key)")}}
+
Searches for existing symbols with the given key and returns it if found. Otherwise a new symbol gets created in the global symbol registry with key.
+
{{jsxref("Symbol.keyFor", "Symbol.keyFor(sym)")}}
+
Retrieves a shared symbol key from the global symbol registry for the given symbol.
+
+ +

Instance properties

+ +
+
{{jsxref("Symbol.prototype.description")}}
+
A read-only string containing the description of the symbol.
+
+ +

Instance methods

+ +
+
{{jsxref("Symbol.prototype.toSource()")}}
+
Returns a string containing the source of the {{jsxref("Global_Objects/Symbol", "Symbol")}} object. Overrides the {{jsxref("Object.prototype.toSource()")}} method.
+
{{jsxref("Symbol.prototype.toString()")}}
+
Returns a string containing the description of the Symbol. Overrides the {{jsxref("Object.prototype.toString()")}} method.
+
{{jsxref("Symbol.prototype.valueOf()")}}
+
Returns the primitive value of the {{jsxref("Symbol")}} object. Overrides the {{jsxref("Object.prototype.valueOf()")}} method.
+
{{jsxref("Symbol.prototype.@@toPrimitive()", "Symbol.prototype[@@toPrimitive]")}}
+
Returns the primitive value of the {{jsxref("Symbol")}} object.
+
+ +

Examples

+ +

Using the typeof operator with symbols

+ +

The {{jsxref("Operators/typeof", "typeof")}} operator can help you to identify symbols.

+ +
typeof Symbol() === 'symbol'
+typeof Symbol('foo') === 'symbol'
+typeof Symbol.iterator === 'symbol'
+
+ +

Symbol type conversions

+ +

Some things to note when working with type conversion of symbols.

+ + + +

Symbols and for...in iteration

+ +

Symbols are not enumerable in for...in iterations. In addition, {{jsxref("Object.getOwnPropertyNames()")}} will not return symbol object properties, however, you can use {{jsxref("Object.getOwnPropertySymbols()")}} to get these.

+ +
let obj = {}
+
+obj[Symbol('a')] = 'a'
+obj[Symbol.for('b')] = 'b'
+obj['c'] = 'c'
+obj.d = 'd'
+
+for (let i in obj) {
+   console.log(i)  // logs "c" and "d"
+}
+ +

Symbols and JSON.stringify()

+ +

Symbol-keyed properties will be completely ignored when using JSON.stringify():

+ +
JSON.stringify({[Symbol('foo')]: 'foo'})
+// '{}'
+
+ +

For more details, see {{jsxref("JSON.stringify()")}}.

+ +

Symbol wrapper objects as property keys

+ +

When a Symbol wrapper object is used as a property key, this object will be coerced to its wrapped symbol:

+ +
let sym = Symbol('foo')
+let obj = {[sym]: 1}
+obj[sym]             // 1
+obj[Object(sym)]     // still 1
+
+ +

Specifications

+ + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#sec-symbol-objects', 'Symbol')}}
+ +

Browser compatibility

+ + + +

{{Compat("javascript.builtins.Symbol")}}

+ +

See also

+ + diff --git a/files/nl/web/javascript/reference/global_objects/symbool/index.html b/files/nl/web/javascript/reference/global_objects/symbool/index.html deleted file mode 100644 index f0777451c8..0000000000 --- a/files/nl/web/javascript/reference/global_objects/symbool/index.html +++ /dev/null @@ -1,205 +0,0 @@ ---- -title: Symbool -slug: Web/JavaScript/Reference/Global_Objects/Symbool -tags: - - ECMAScript 2015 - - JavaScript - - Klasse - - Symbool -translation_of: Web/JavaScript/Reference/Global_Objects/Symbol ---- -
{{JSRef}}
- -

Het gegevenstype symbool is een primitief gegevenstype. De Symbol() functie geeft een waarde terug (returns a value) van het type symbool, heeft statische eigenschappen die verscheidene leden van ingebouwde objecten blootstelt, heeft statische methoden die het globale symbolregister blootstellen en vertegenwoordigd een ingebouwde objectklasse. Maar is onvolledig als een constructor, omdat het niet de "new Symbol()" syntaxis ondersteund.

- -

Elke waarde teruggekregen van Symbol() is uniek. Zo'n teruggekregen waarde kan, bijvoorbeeld, gebruikt worden als identificatiemiddel voor objecteigenschappen; het primaire doel van dit gegevenstype. Hoewel er andere use-cases zijn, zoals het beschikbaar maken van ondoorzichtige gegevenstypen of als algemeen uniek identificatiemiddel. Meer uitleg over het doel en gebruik van het symbool is te vinden in de woordenlijst.

- -

Beschrijving

- -

Om een nieuw primitief symbool te creëren, schrijf je Symbol() met een optionele String als beschrijving:

- -
let sym1 = Symbol()
-let sym2 = Symbol('foo')
-let sym3 = Symbol('foo')
-
- -

De bovenstaande code creëert drie nieuwe symbolen. Let er op dat Symbol("foo") niet de string "foo" omzet naar een symbool maar dat het telkens een nieuw uniek symbool creëert:

- -
Symbol('foo') === Symbol('foo')  // false
-
- -

De volgende syntaxis met de {{jsxref("Operators/new", "new")}} operator zal een {{jsxref("TypeError")}}: afwerpen:

- -
let sym = new Symbol()  // TypeError
-
- -

Dit behoed auteurs ervoor om nadrukkelijk een Symbol wrapper-object te creëren in plaats van een nieuwe symboolwaarde. Terwijl normaal gesproken primitieve gegevenstypen wel gemaakt kunnen worden met een wrapper-object. (Zoals: new Boolean, new String en new Number).

- -

Als je echt een Symbol wrapper-object wilt maken, kun je dit doen met de Object() functie:

- -
let sym = Symbol('foo')
-typeof sym      // "symbol"
-let symObj = Object(sym)
-typeof symObj   // "object"
-
- -

Gedeelde symbolen in het globale symboolregister

- -

De bovenstaande syntaxis, die gebruik maakt van de Symbol() functie, creëert alleen niet een globaal symbool dat te gebruiken is door je gehele codebase. Om symbolen te creëren die door al je bestanden en zelfs door je realms (met elk hun eigen globale scope) te gebruiken zijn; gebruik je de methoden {{jsxref("Symbol.for()")}} en {{jsxref("Symbol.keyFor()")}}. Om, respectievelijk, symbolen in het globale symbolenregister aan te maken en terug te krijgen.

- -

Symbooleigenschappen vinden in objecten

- -

De methode {{jsxref("Object.getOwnPropertySymbols()")}} geeft een array met symbolen terug en laat je symbooleigenschappen vinden in een opgegeven object. Let er op dat elk object geïnitialiseerd wordt zonder eigen symbooleigenschappen, dus deze array zal leeg zijn tenzij je een symbool als eigenschap hebt gegeven aan een object. 

- -

Constructor

- -
-
Symbol()
-
De  Symbol() constructor geeft een waarde terug van het type symbol, maar is incompleet als een constructor omdat het niet de "new Symbol()" syntaxis ondersteund.
-
- -

Static properties

- -
-
{{jsxref("Symbol.asyncIterator")}}
-
A method that returns the default AsyncIterator for an object. Used by for await...of.
-
{{jsxref("Symbol.hasInstance")}}
-
A method determining if a constructor object recognizes an object as its instance. Used by {{jsxref("Operators/instanceof", "instanceof")}}.
-
{{jsxref("Symbol.isConcatSpreadable")}}
-
A Boolean value indicating if an object should be flattened to its array elements. Used by {{jsxref("Array.prototype.concat()")}}.
-
{{jsxref("Symbol.iterator")}}
-
A method returning the default iterator for an object. Used by for...of.
-
{{jsxref("Symbol.match")}}
-
A method that matches against a string, also used to determine if an object may be used as a regular expression. Used by {{jsxref("String.prototype.match()")}}.
-
{{jsxref("Symbol.matchAll")}}
-
A method that returns an iterator, that yields matches of the regular expression against a string. Used by {{jsxref("String.prototype.matchAll()")}}.
-
{{jsxref("Symbol.replace")}}
-
A method that replaces matched substrings of a string. Used by {{jsxref("String.prototype.replace()")}}.
-
{{jsxref("Symbol.search")}}
-
A method that returns the index within a string that matches the regular expression. Used by {{jsxref("String.prototype.search()")}}.
-
{{jsxref("Symbol.split")}}
-
A method that splits a string at the indices that match a regular expression. Used by {{jsxref("String.prototype.split()")}}.
-
{{jsxref("Symbol.species")}}
-
A constructor function that is used to create derived objects.
-
{{jsxref("Symbol.toPrimitive")}}
-
A method converting an object to a primitive value.
-
{{jsxref("Symbol.toStringTag")}}
-
A string value used for the default description of an object. Used by {{jsxref("Object.prototype.toString()")}}.
-
{{jsxref("Symbol.unscopables")}}
-
An object value of whose own and inherited property names are excluded from the with environment bindings of the associated object.
-
- -

Static methods

- -
-
{{jsxref("Symbol.for()", "Symbol.for(key)")}}
-
Searches for existing symbols with the given key and returns it if found. Otherwise a new symbol gets created in the global symbol registry with key.
-
{{jsxref("Symbol.keyFor", "Symbol.keyFor(sym)")}}
-
Retrieves a shared symbol key from the global symbol registry for the given symbol.
-
- -

Instance properties

- -
-
{{jsxref("Symbol.prototype.description")}}
-
A read-only string containing the description of the symbol.
-
- -

Instance methods

- -
-
{{jsxref("Symbol.prototype.toSource()")}}
-
Returns a string containing the source of the {{jsxref("Global_Objects/Symbol", "Symbol")}} object. Overrides the {{jsxref("Object.prototype.toSource()")}} method.
-
{{jsxref("Symbol.prototype.toString()")}}
-
Returns a string containing the description of the Symbol. Overrides the {{jsxref("Object.prototype.toString()")}} method.
-
{{jsxref("Symbol.prototype.valueOf()")}}
-
Returns the primitive value of the {{jsxref("Symbol")}} object. Overrides the {{jsxref("Object.prototype.valueOf()")}} method.
-
{{jsxref("Symbol.prototype.@@toPrimitive()", "Symbol.prototype[@@toPrimitive]")}}
-
Returns the primitive value of the {{jsxref("Symbol")}} object.
-
- -

Examples

- -

Using the typeof operator with symbols

- -

The {{jsxref("Operators/typeof", "typeof")}} operator can help you to identify symbols.

- -
typeof Symbol() === 'symbol'
-typeof Symbol('foo') === 'symbol'
-typeof Symbol.iterator === 'symbol'
-
- -

Symbol type conversions

- -

Some things to note when working with type conversion of symbols.

- - - -

Symbols and for...in iteration

- -

Symbols are not enumerable in for...in iterations. In addition, {{jsxref("Object.getOwnPropertyNames()")}} will not return symbol object properties, however, you can use {{jsxref("Object.getOwnPropertySymbols()")}} to get these.

- -
let obj = {}
-
-obj[Symbol('a')] = 'a'
-obj[Symbol.for('b')] = 'b'
-obj['c'] = 'c'
-obj.d = 'd'
-
-for (let i in obj) {
-   console.log(i)  // logs "c" and "d"
-}
- -

Symbols and JSON.stringify()

- -

Symbol-keyed properties will be completely ignored when using JSON.stringify():

- -
JSON.stringify({[Symbol('foo')]: 'foo'})
-// '{}'
-
- -

For more details, see {{jsxref("JSON.stringify()")}}.

- -

Symbol wrapper objects as property keys

- -

When a Symbol wrapper object is used as a property key, this object will be coerced to its wrapped symbol:

- -
let sym = Symbol('foo')
-let obj = {[sym]: 1}
-obj[sym]             // 1
-obj[Object(sym)]     // still 1
-
- -

Specifications

- - - - - - - - - - -
Specification
{{SpecName('ESDraft', '#sec-symbol-objects', 'Symbol')}}
- -

Browser compatibility

- - - -

{{Compat("javascript.builtins.Symbol")}}

- -

See also

- - diff --git a/files/nl/web/javascript/reference/klasses/index.html b/files/nl/web/javascript/reference/klasses/index.html deleted file mode 100644 index ca5210371c..0000000000 --- a/files/nl/web/javascript/reference/klasses/index.html +++ /dev/null @@ -1,252 +0,0 @@ ---- -title: Klassen -slug: Web/JavaScript/Reference/Klasses -translation_of: Web/JavaScript/Reference/Classes ---- -
{{JsSidebar("Classes")}}
- -

JavaScript classes zijn nieuw in ECMAScript 6. De class syntax is geen object-oriented inheritance model in JavaScript. JavaScript classes brengen een veel eenvoudigere en duidelijkere syntax voor het creëren van objecten.

- -

Classes definiëren

- -

Classes zijn eigenlijk functions, net zoals je function expressions en function declarations kan definiëren, de class syntax heeft twee componenten: class expressies en class declaraties.

- -

Class declaraties

- -

Eén manier om een class te definiëren is door gebruik te maken van class declaration. Om een klasse te declareren, gebruik je het class keyword gevolgd door de naam van de class. ("Polygon" hier).

- -
class Polygon {
-  constructor(height, width) {
-    this.height = height;
-    this.width = width;
-  }
-}
- -

Hoisting

- -

Een belangrijk verschil tussen function declarations en class declarations is dat function declarations {{Glossary("Hoisting", "hoisted")}} zijn en class declarations niet. Je moet eerst je klasse declareren voor je het kan gebruiken, anders krijg je een {{jsxref("ReferenceError")}}:

- -
var p = new Polygon(); // ReferenceError
-
-class Polygon {}
-
- -

Class expressions

- -

Een class expression is een andere manier om een class te definiëren. Class expressions kunnen named of unnamed zijn. De naam gegeven aan een named class expression is local aan de body van de class.

- -
// unnamed
-var Polygon = class {
-  constructor(height, width) {
-    this.height = height;
-    this.width = width;
-  }
-};
-
-// named
-var Polygon = class Polygon {
-  constructor(height, width) {
-    this.height = height;
-    this.width = width;
-  }
-};
-
- -

Class body en method definitions

- -

De body van een class is het stuk tussen de curly brackets {}. Hier kan je class members definiëren, zoals methodes of constructors.

- -

Strict mode

- -

De bodies van class declarations en class expressions worden uitgevoerd in strict mode. Constructor, static en prototype methods, getter en setter functions worden bijvoorbeeld uitgevoerd in strict mode.

- -

Constructor

- -

De constructor methode is een speciale methode voor het creëren en initializeren van een object voor de klasse. Er kan maar één speciale methode zijn met de naam "constructor" in een klasse. Een {{jsxref("SyntaxError")}} wordt gegooid indien de klasse meerdere constructor methodes heeft.

- -

Een constructor kan gebruik maken van het super keyword om de constructor van de parent class op te roepen.

- -

Prototype methods

- -

Zie ook method definitions.

- -
class Polygon {
-  constructor(height, width) {
-    this.height = height;
-    this.width = width;
-  }
-
-  get area() {
-    return this.calcArea()
-  }
-
-  calcArea() {
-    return this.height * this.width;
-  }
-}
- -

Static methods

- -

Het static keyword beschrijft een statische methode voor een klasse. Statische methodes kunnen worden opgeroepen zonder dat er een instantie gemaakt is van de klasse en kunnen ook niet opgeroepen worden wanneer er een instantie van gemaakt is. Statische methodes zijn dikwijls gebruikt als utility functions voor een applicatie.

- -
class Point {
-    constructor(x, y) {
-        this.x = x;
-        this.y = y;
-    }
-
-    static distance(a, b) {
-        const dx = a.x - b.x;
-        const dy = a.y - b.y;
-
-        return Math.sqrt(dx*dx + dy*dy);
-    }
-}
-
-const p1 = new Point(5, 5);
-const p2 = new Point(10, 10);
-
-console.log(Point.distance(p1, p2));
- -

Sub classing met extends

- -

Het extends keyword wordt gebruikt in class declarations of class expressions om een klasse aan te maken als kind van een andere klasse.

- -
class Animal {
-  constructor(name) {
-    this.name = name;
-  }
-
-  speak() {
-    console.log(this.name + ' makes a noise.');
-  }
-}
-
-class Dog extends Animal {
-  speak() {
-    console.log(this.name + ' barks.');
-  }
-}
-
- -

Sub classing built-in objects

- -

TBD

- -

Super class calls with super

- -

Het super keyword wordt gebruikt om een methode op te roepen in de parent klasse van het object.

- -
class Cat {
-  constructor(name) {
-    this.name = name;
-  }
-
-  speak() {
-    console.log(this.name + ' makes a noise.');
-  }
-}
-
-class Lion extends Cat {
-  speak() {
-    super.speak();
-    console.log(this.name + ' roars.');
-  }
-}
-
- -

ES5 inheritance syntax en ES6 classes syntax vergeleken

- -

TBD

- -

Voorbeelden

- -

TBD

- -

Specificaties

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES6', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ES6')}}Initial definition.
{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}{{Spec2('ESDraft')}} 
- -

Browser compatibiliteit

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)MS EdgeInternet ExplorerOperaSafari
Basic support{{CompatChrome(42.0)}}[1]4513{{CompatNo}}{{CompatNo}}{{CompatSafari(9.0)}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}45{{CompatUnknown}}{{CompatUnknown}}9{{CompatChrome(42.0)}}[1]
-
- -

[1] Requires strict mode. Non-strict mode support is behind the flag Enable Experimental JavaScript, disabled by default.

- -

Zie ook

- - diff --git a/files/nl/web/javascript/reference/operatoren/index.html b/files/nl/web/javascript/reference/operatoren/index.html deleted file mode 100644 index fc499002b4..0000000000 --- a/files/nl/web/javascript/reference/operatoren/index.html +++ /dev/null @@ -1,288 +0,0 @@ ---- -title: Expressies and operators -slug: Web/JavaScript/Reference/Operatoren -translation_of: Web/JavaScript/Reference/Operators ---- -
{{jsSidebar("Operators")}}
- -

Deze documentatie bevat informatie over JavaScript operators.

- -

Expressies en operators per categorie

- -

Voor alfabetische lijst, zie sidebar.

- -

Primaire expressies

- -

Trefwoorden en algmene expressies in JavaScript.

- -
-
{{jsxref("Operators/this", "this")}}
-
this verwijst naar de context van een functie.
-
{{jsxref("Operators/function", "function")}}
-
function geeft aan dat er een functie moet worden gemaakt
-
{{experimental_inline}} {{jsxref("Operators/class", "class")}}
-
class definieert een klasse.
-
{{experimental_inline}} {{jsxref("Operators/function*", "function*")}}
-
Het function* trefwoord definieert een generator functie expressie.
-
{{experimental_inline}} {{jsxref("Operators/yield", "yield")}}
-
Pauzeer en start een generator functie.
-
{{experimental_inline}} {{jsxref("Operators/yield*", "yield*")}}
-
Doorgegeven aan een andere generator functie.
-
{{jsxref("Global_Objects/Array", "[]")}}
-
Definieert een lijst met data.
-
{{jsxref("Operators/Object_initializer", "{}")}}
-
Definieert een object.
-
{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}
-
Reguliere expressie.
-
{{experimental_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}
-
Datalijst omvang.
-
{{experimental_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}
-
Generator omvang.
-
{{jsxref("Operators/Grouping", "( )")}}
-
Groep operator.
-
- -

Left-hand-side expressies

- -

Deze voeren een opdracht uit met een van de bovenstaande expressies.

- -
-
{{jsxref("Operators/Property_accessors", "Property accessors", "", 1)}}
-
Haalt data uit een object op
- (object.property en object["property"]).
-
{{jsxref("Operators/new", "new")}}
-
Maakt een nieuwe constructor.
-
{{experimental_inline}} new.target
-
In constructors, new.target verwijst naar het object dat werd aangeroepen door {{jsxref("Operators/new", "new")}}. 
-
{{experimental_inline}} {{jsxref("Operators/super", "super")}}
-
Het super keywoord verwijst naar de hoofdconstructor.
-
{{experimental_inline}} {{jsxref("Operators/Spread_operator", "...obj")}}
-
De spread operator stelt een expressie uit te breiden op plaatsen waar meerdere argumenten (voor de functies die opgeroepen worden) of meerdere elementen (voor Array literalen) zijn verplicht.
-
- -

Optellen en Aftrekken

- -

Voor optellen en aftrekken bij variabelen.

- -
-
{{jsxref("Operators/Arithmetic_Operators", "A++", "#Increment")}}
-
Achtervoegsel optel operator.
-
{{jsxref("Operators/Arithmetic_Operators", "A--", "#Decrement")}}
-
Achtervoegsel aftrek operator.
-
{{jsxref("Operators/Arithmetic_Operators", "++A", "#Increment")}}
-
Voorvoegsel optel operator.
-
{{jsxref("Operators/Arithmetic_Operators", "--A", "#Decrement")}}
-
Voorvoegsel aftrek operator.
-
- -

Unaire operatoren

- -

Een unaire operatie is een operatie met slechts één operand.

- -
-
{{jsxref("Operators/delete", "delete")}}
-
De delete operator verwijdert een object of item van een object.
-
{{jsxref("Operators/void", "void")}}
-
De void operator verwijdert de returnwaarde van een expressie.
-
{{jsxref("Operators/typeof", "typeof")}}
-
De typeof operator geeft het type van het object.
-
We zijn bezig met vertalen van het document, maar we zijn nog niet klaar.
-
- -
-
{{jsxref("Operators/Arithmetic_Operators", "+", "#Unary_plus")}}
-
De unaire plus operator zet zijn operand om naar type Number
-
{{jsxref("Operators/Arithmetic_Operators", "-", "#Unary_negation")}}
-
De unaire negatie operator zet zijn operand om naar Number en zet hem dan om in haar tegendeel.
-
{{jsxref("Operators/Bitwise_Operators", "~", "#Bitwise_NOT")}}
-
Bitwise NOT operator.
-
{{jsxref("Operators/Logical_Operators", "!", "#Logical_NOT")}}
-
Logische NOT operator.
-
- -

Rekenkundige operators

- -

Rekenkundige operators accepteren numerieke waarden (letterlijke waarden of variablen) als hun operand en retourneren een enkele numerieke waarde.

- -
-
{{jsxref("Operators/Arithmetic_Operators", "+", "#Addition")}}
-
Additie operator.
-
{{jsxref("Operators/Arithmetic_Operators", "-", "#Subtraction")}}
-
Subtractie operator.
-
{{jsxref("Operators/Arithmetic_Operators", "/", "#Division")}}
-
Divisie operator.
-
{{jsxref("Operators/Arithmetic_Operators", "*", "#Multiplication")}}
-
Multiplicatie operator.
-
{{jsxref("Operators/Arithmetic_Operators", "%", "#Remainder")}}
-
Rest operator.
-
- -
-
{{experimental_inline}} {{jsxref("Operators/Arithmetic_Operators", "**", "#Exponentiation")}}
-
Exponent operator.
-
- -

Relationele operators

- -

Een relationele operator vergelijkt zijn operanden en retourneert een Boolean gebaseerd op de uitkomst van de vergelijking.

- -
-
{{jsxref("Operators/in", "in")}}
-
De in operator bepaalt of een object een zekere eigenschap heeft.
-
{{jsxref("Operators/instanceof", "instanceof")}}
-
De instanceof operator bepaalt of een variable een instantie is van een bepaald type object.
-
{{jsxref("Operators/Comparison_Operators", "<", "#Less_than_operator")}}
-
Minder dan operator.
-
{{jsxref("Operators/Comparison_Operators", ">", "#Greater_than_operator")}}
-
Groter dan operator.
-
{{jsxref("Operators/Comparison_Operators", "<=", "#Less_than_or_equal_operator")}}
-
Minder dan of gelijk aan operator.
-
{{jsxref("Operators/Comparison_Operators", ">=", "#Greater_than_or_equal_operator")}}
-
Groter dan of gelijk aan operator.
-
- -

Gelijkheids operators

- -

Het resultaat van het evalueren van een gelijkheids operator geeft altijd een Boolean gebaseerd op het resultaat van de vergelijking.

- -
-
{{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}
-
Gelijkheids operator.
-
{{jsxref("Operators/Comparison_Operators", "!=", "#Inequality")}}
-
Ongelijkheids operator.
-
{{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}
-
Identiciteits operator.
-
{{jsxref("Operators/Comparison_Operators", "!==", "#Nonidentity")}}
-
Nonidenticiteits operator.
-
- -

Bitwijs shift operators

- -

Operaties die alle bits van de operand verschuiven.

- -
-
{{jsxref("Operators/Bitwise_Operators", "<<", "#Left_shift")}}
-
Bitwijs linker shift operator.
-
{{jsxref("Operators/Bitwise_Operators", ">>", "#Right_shift")}}
-
Bitwijs rechter shift operator.
-
{{jsxref("Operators/Bitwise_Operators", ">>>", "#Unsigned_right_shift")}}
-
Bitwijs tekenloze rechter shift operator.
-
- -

Binaire bitwijs operators

- -

Bitwijs operatoren behandelen hun operand als een set van 32 bits en retourneren een standaard JavaScript numerieke waarde.

- -
-
{{jsxref("Operators/Bitwise_Operators", "&", "#Bitwise_AND")}}
-
Bitwijs AND.
-
{{jsxref("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}
-
Bitwijs OR.
-
{{jsxref("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}
-
Bitwijs XOR.
-
- -

Binaire logische operators

- -

Logische operatoren worden normaliter gebruikt met Booleans en retourneren ook een Boolean waarde.

- -
-
{{jsxref("Operators/Logical_Operators", "&&", "#Logical_AND")}}
-
Logische AND.
-
{{jsxref("Operators/Logical_Operators", "||", "#Logical_OR")}}
-
Logische OR.
-
- -

Conditionele (ternary) operator

- -
-
{{jsxref("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}
-
-

The conditionele operator retourneert een of twee waarden gebaseerd op de waarde van de conditie.

-
-
- -

Toekennings operators

- -

Een toekennings operator kent een waarde toe aan zijn linker operand gebaseerd op de waarde van zijn rechter operand.

- -
-
{{jsxref("Operators/Assignment_Operators", "=", "#Assignment")}}
-
Toekennings operator.
-
{{jsxref("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}
-
Vermenigvuldigings toekenning.
-
{{jsxref("Operators/Assignment_Operators", "/=", "#Division_assignment")}}
-
Delings toekenning.
-
{{jsxref("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}
-
Rest toekenning.
-
{{jsxref("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}
-
Additieve toekenning.
-
{{jsxref("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}
-
Substractieve toekenning
-
{{jsxref("Operators/Assignment_Operators", "<<=", "#Left_shift_assignment")}}
-
Linker shift toekenning.
-
{{jsxref("Operators/Assignment_Operators", ">>=", "#Right_shift_assignment")}}
-
Rechter shift toekenning.
-
{{jsxref("Operators/Assignment_Operators", ">>>=", "#Unsigned_right_shift_assignment")}}
-
Tekenloze rechter shift toekenning.
-
{{jsxref("Operators/Assignment_Operators", "&=", "#Bitwise_AND_assignment")}}
-
Bitwijs AND toekenning.
-
{{jsxref("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}
-
Bitwijs XOR toekenning.
-
{{jsxref("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}
-
Bitwijs OR toekenning.
-
{{experimental_inline}} {{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}
- {{experimental_inline}} {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}
-
-

Ontbindings toekenningen maken het mogelijk eigenschappen van een array of object toe te kennen aan letterlijke arrays of objecten. 

-
-
- -

Komma operator

- -
-
{{jsxref("Operators/Comma_Operator", ",")}}
-
De komma operator maakt het mogelijk meerdere expressies te evalueren in een enkele statement en retourneert het resultaat van de laatste expressie.
-
- -

Niet-standaard features

- -
-
{{non-standard_inline}} {{jsxref("Operators/Legacy_generator_function", "Legacy generator function", "", 1)}}
-
Het function trefwoord kan worden gebruikt om een legacy generator functie te omschrijven binnen een expressie. Hiertoe moet de inhoud van de functie minstens 1  {{jsxref("Operators/yield", "yield")}} expressie bevatten.
-
{{non-standard_inline}} {{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}}
-
De expressie sluitings  syntax is een mogelijkheid om een verkorte functie te schrijven.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}{{Spec2('ES6')}}New: Spread operator, destructuring assignment, super keyword, Array comprehensions, Generator comprehensions
{{SpecName('ES5.1', '#sec-11', 'Expressions')}}{{Spec2('ES5.1')}} 
{{SpecName('ES1', '#sec-11', 'Expressions')}}{{Spec2('ES1')}}Initial definition
- -

See also

- - diff --git a/files/nl/web/javascript/reference/operatoren/typeof/index.html b/files/nl/web/javascript/reference/operatoren/typeof/index.html deleted file mode 100644 index e86cf0b324..0000000000 --- a/files/nl/web/javascript/reference/operatoren/typeof/index.html +++ /dev/null @@ -1,244 +0,0 @@ ---- -title: typeof -slug: Web/JavaScript/Reference/Operatoren/typeof -tags: - - JavaScript - - Operator - - Unair -translation_of: Web/JavaScript/Reference/Operators/typeof ---- -
{{jsSidebar("Operators")}}
- -

De typeof-operator geeft een string terug die het type van de ongeëvalueerde operand weergeeft.

- -

Syntaxis

- -

De typeof-operator wordt gevolgd door zijn operand:

- -
typeof operand
- -

Parameters

- -

operand is een uitdrukking die het object of de {{Glossary("Primitive", "primitief")}} voorstelt waarvan het type moet worden teruggegeven.

- -

Beschrijving

- -

De volgende tabel bevat de mogelijke waarden die typeof kan teruggeven. Voor meer informatie over types of primitieven, zie pagina datastructuren in Javascript.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TypeResultaat
Undefined"undefined"
Null"object" (see below)
Boolean"boolean"
Number"number"
String"string"
Symbol (nieuw in ECMAScript 2015)"symbol"
Host object (voorzien door de JS omgeving)Implementatie-afhankelijk
Function object (implementeert [[Call]] in termen van ECMA-262)"function"
Elk ander object"object"
- -

 

- -

Voorbeelden

- -
// Nummers
-typeof 37 === 'number';
-typeof 3.14 === 'number';
-typeof(42) === 'number';
-typeof Math.LN2 === 'number';
-typeof Infinity === 'number';
-typeof NaN === 'number'; // Ondanks dat het "Not-A-Number" is
-typeof Number(1) === 'number'; // maar gebruik deze manier nooit!
-
-
-// Strings
-typeof "" === 'string';
-typeof "bla" === 'string';
-typeof (typeof 1) === 'string'; // typeof geeft altijd een string terug
-typeof String("abc") === 'string'; // maar gebruik deze manier nooit!
-
-
-// Booleans
-typeof true === 'boolean';
-typeof false === 'boolean';
-typeof Boolean(true) === 'boolean'; // maar gebruik deze manier nooit!
-
-
-// Symbolen
-typeof Symbol() === 'symbol'
-typeof Symbol('foo') === 'symbol'
-typeof Symbol.iterator === 'symbol'
-
-
-// Ongedefinieerd
-typeof undefined === 'undefined';
-typeof declaredButUndefinedVariable === 'undefined';
-typeof undeclaredVariable === 'undefined';
-
-
-// Objecten
-typeof {a:1} === 'object';
-
-// gebruik Array.isArray of Object.prototype.toString.call
-// om het verschil aan te geven tussen normale objecten en
-// arrays (rijen).
-typeof [1, 2, 4] === 'object';
-
-typeof new Date() === 'object';
-
-
-// Het volgende is verwarrend. Niet gebruiken!
-typeof new Boolean(true) === 'object';
-typeof new Number(1) === 'object';
-typeof new String("abc") === 'object';
-
-
-// Functies
-typeof function(){} === 'function';
-typeof class C {} === 'function';
-typeof Math.sin === 'function';
-
- -

null

- -
// Dit geldt sinds het ontstaan van JavaScript
-typeof null === 'object';
-
- -

In de oorspronkelijke implementatie van JavaScript werden JavaScript-waarden gerepresenteerd met een type-label en een waarde. Het type-label voor de meeste objecten was 0. null werd voorgesteld als de NULL-pointer (0x00 in de meeste platformen). Daarom had null het type-label 0, wat de foute typeof teruggeefwaarde verklaart. (referentie)

- -

Een oplossing (via een opt-in) werd voorgesteld voor ECMAScript, maar die werd afgekeurd. Anders zou het er als volgt hebben uitgezien: typeof null === 'null'.

- -

De new-operator gebruiken

- -
// Alle constructorfuncties die worden geïnstantieerd met het
-// 'new'-sleutelwoord, zullen altijd typeof 'object' zijn.
-var str = new String('String');
-var num = new Number(100);
-
-typeof str; // Geeft 'object' terug
-typeof num; // Geeft 'object' terug
-
-// Maar er is een uitzondering in het geval van de functieconstructor van JavaScript.
-
-var func = new Function();
-
-typeof func; // Geeft 'function' terug
-
- -

Reguliere uitdrukkingen

- -

Aanroepbare reguliere uitdrukkingen waren een niet-standaard toevoeging in sommige browsers.

- -
typeof /s/ === 'function'; // Chrome 1-12 Niet comform aan ECMAScript 5.1
-typeof /s/ === 'object';   // Firefox 5+  Conform aan ECMAScript 5.1
-
- -

Temporal Dead Zone-fouten

- -

Voor ECMAScript 2015 gaf typeof altijd gegarandeerd een string terug voor elke operand waarmee het was voorzien. Maar met de toevoeging van niet-gehoiste, blokgekaderde let en const ontstaat er een ReferenceError als typeof op let- en const-variabelen wordt gebruikt voordat ze zijn benoemd. Dit staat in contrast met onbenoemde variabelen, waarvoor typeof 'undefined' teruggeeft. Blokgekaderde variabelen zijn in een "temporal dead zone" vanaf het begin van het blok totdat de intialisatie is verwerkt, waarin een fout ontstaat als ze worden benaderd.

- -
typeof onbenoemdeVariabele === 'undefined';
-typeof nieuweLetVariabele; let nieuweLetVariabele; // ReferenceError
-typeof nieuweConstVariabele; const nieuweConstVariabele = 'hallo'; // ReferenceError
-
- -

Uitzonderingen

- -

Alle huidige browsers onthullen een niet-standaard hostobject {{domxref("document.all")}} met type undefined.

- -
typeof document.all === 'undefined';
-
- -

Hoewel de specificatie aangepaste type-labels toestaat voor niet-standaard exotische objecten, vereist het dat die type-labels verschillen van de ingebouwde. Dat document.all een type-label undefined heeft moet worden geclassificeerd als een uitzonderlijke overtreding van de regels.

- -

Specificaties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificatieStatusOpmerking
{{SpecName('ESDraft', '#sec-typeof-operator', 'The typeof Operator')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-typeof-operator', 'The typeof Operator')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-11.4.3', 'The typeof Operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-11.4.3', 'The typeof Operator')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-11.4.3', 'The typeof Operator')}}{{Spec2('ES1')}}Oorspronkelijke definitie. Geïmplementeerd in JavaScript 1.1.
- -

Browsercompatibiliteit

- - - -

{{Compat("javascript.operators.typeof")}}

- -

IE-specifieke opmerkingen

- -

In IE 6, 7, en 8 zijn een groot aantal host objecten objecten en geen functions. bijvoorbeeld:

- -
typeof alert === 'object'
- -

Zie ook

- - diff --git a/files/nl/web/javascript/reference/operators/index.html b/files/nl/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..fc499002b4 --- /dev/null +++ b/files/nl/web/javascript/reference/operators/index.html @@ -0,0 +1,288 @@ +--- +title: Expressies and operators +slug: Web/JavaScript/Reference/Operatoren +translation_of: Web/JavaScript/Reference/Operators +--- +
{{jsSidebar("Operators")}}
+ +

Deze documentatie bevat informatie over JavaScript operators.

+ +

Expressies en operators per categorie

+ +

Voor alfabetische lijst, zie sidebar.

+ +

Primaire expressies

+ +

Trefwoorden en algmene expressies in JavaScript.

+ +
+
{{jsxref("Operators/this", "this")}}
+
this verwijst naar de context van een functie.
+
{{jsxref("Operators/function", "function")}}
+
function geeft aan dat er een functie moet worden gemaakt
+
{{experimental_inline}} {{jsxref("Operators/class", "class")}}
+
class definieert een klasse.
+
{{experimental_inline}} {{jsxref("Operators/function*", "function*")}}
+
Het function* trefwoord definieert een generator functie expressie.
+
{{experimental_inline}} {{jsxref("Operators/yield", "yield")}}
+
Pauzeer en start een generator functie.
+
{{experimental_inline}} {{jsxref("Operators/yield*", "yield*")}}
+
Doorgegeven aan een andere generator functie.
+
{{jsxref("Global_Objects/Array", "[]")}}
+
Definieert een lijst met data.
+
{{jsxref("Operators/Object_initializer", "{}")}}
+
Definieert een object.
+
{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}
+
Reguliere expressie.
+
{{experimental_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}
+
Datalijst omvang.
+
{{experimental_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}
+
Generator omvang.
+
{{jsxref("Operators/Grouping", "( )")}}
+
Groep operator.
+
+ +

Left-hand-side expressies

+ +

Deze voeren een opdracht uit met een van de bovenstaande expressies.

+ +
+
{{jsxref("Operators/Property_accessors", "Property accessors", "", 1)}}
+
Haalt data uit een object op
+ (object.property en object["property"]).
+
{{jsxref("Operators/new", "new")}}
+
Maakt een nieuwe constructor.
+
{{experimental_inline}} new.target
+
In constructors, new.target verwijst naar het object dat werd aangeroepen door {{jsxref("Operators/new", "new")}}. 
+
{{experimental_inline}} {{jsxref("Operators/super", "super")}}
+
Het super keywoord verwijst naar de hoofdconstructor.
+
{{experimental_inline}} {{jsxref("Operators/Spread_operator", "...obj")}}
+
De spread operator stelt een expressie uit te breiden op plaatsen waar meerdere argumenten (voor de functies die opgeroepen worden) of meerdere elementen (voor Array literalen) zijn verplicht.
+
+ +

Optellen en Aftrekken

+ +

Voor optellen en aftrekken bij variabelen.

+ +
+
{{jsxref("Operators/Arithmetic_Operators", "A++", "#Increment")}}
+
Achtervoegsel optel operator.
+
{{jsxref("Operators/Arithmetic_Operators", "A--", "#Decrement")}}
+
Achtervoegsel aftrek operator.
+
{{jsxref("Operators/Arithmetic_Operators", "++A", "#Increment")}}
+
Voorvoegsel optel operator.
+
{{jsxref("Operators/Arithmetic_Operators", "--A", "#Decrement")}}
+
Voorvoegsel aftrek operator.
+
+ +

Unaire operatoren

+ +

Een unaire operatie is een operatie met slechts één operand.

+ +
+
{{jsxref("Operators/delete", "delete")}}
+
De delete operator verwijdert een object of item van een object.
+
{{jsxref("Operators/void", "void")}}
+
De void operator verwijdert de returnwaarde van een expressie.
+
{{jsxref("Operators/typeof", "typeof")}}
+
De typeof operator geeft het type van het object.
+
We zijn bezig met vertalen van het document, maar we zijn nog niet klaar.
+
+ +
+
{{jsxref("Operators/Arithmetic_Operators", "+", "#Unary_plus")}}
+
De unaire plus operator zet zijn operand om naar type Number
+
{{jsxref("Operators/Arithmetic_Operators", "-", "#Unary_negation")}}
+
De unaire negatie operator zet zijn operand om naar Number en zet hem dan om in haar tegendeel.
+
{{jsxref("Operators/Bitwise_Operators", "~", "#Bitwise_NOT")}}
+
Bitwise NOT operator.
+
{{jsxref("Operators/Logical_Operators", "!", "#Logical_NOT")}}
+
Logische NOT operator.
+
+ +

Rekenkundige operators

+ +

Rekenkundige operators accepteren numerieke waarden (letterlijke waarden of variablen) als hun operand en retourneren een enkele numerieke waarde.

+ +
+
{{jsxref("Operators/Arithmetic_Operators", "+", "#Addition")}}
+
Additie operator.
+
{{jsxref("Operators/Arithmetic_Operators", "-", "#Subtraction")}}
+
Subtractie operator.
+
{{jsxref("Operators/Arithmetic_Operators", "/", "#Division")}}
+
Divisie operator.
+
{{jsxref("Operators/Arithmetic_Operators", "*", "#Multiplication")}}
+
Multiplicatie operator.
+
{{jsxref("Operators/Arithmetic_Operators", "%", "#Remainder")}}
+
Rest operator.
+
+ +
+
{{experimental_inline}} {{jsxref("Operators/Arithmetic_Operators", "**", "#Exponentiation")}}
+
Exponent operator.
+
+ +

Relationele operators

+ +

Een relationele operator vergelijkt zijn operanden en retourneert een Boolean gebaseerd op de uitkomst van de vergelijking.

+ +
+
{{jsxref("Operators/in", "in")}}
+
De in operator bepaalt of een object een zekere eigenschap heeft.
+
{{jsxref("Operators/instanceof", "instanceof")}}
+
De instanceof operator bepaalt of een variable een instantie is van een bepaald type object.
+
{{jsxref("Operators/Comparison_Operators", "<", "#Less_than_operator")}}
+
Minder dan operator.
+
{{jsxref("Operators/Comparison_Operators", ">", "#Greater_than_operator")}}
+
Groter dan operator.
+
{{jsxref("Operators/Comparison_Operators", "<=", "#Less_than_or_equal_operator")}}
+
Minder dan of gelijk aan operator.
+
{{jsxref("Operators/Comparison_Operators", ">=", "#Greater_than_or_equal_operator")}}
+
Groter dan of gelijk aan operator.
+
+ +

Gelijkheids operators

+ +

Het resultaat van het evalueren van een gelijkheids operator geeft altijd een Boolean gebaseerd op het resultaat van de vergelijking.

+ +
+
{{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}
+
Gelijkheids operator.
+
{{jsxref("Operators/Comparison_Operators", "!=", "#Inequality")}}
+
Ongelijkheids operator.
+
{{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}
+
Identiciteits operator.
+
{{jsxref("Operators/Comparison_Operators", "!==", "#Nonidentity")}}
+
Nonidenticiteits operator.
+
+ +

Bitwijs shift operators

+ +

Operaties die alle bits van de operand verschuiven.

+ +
+
{{jsxref("Operators/Bitwise_Operators", "<<", "#Left_shift")}}
+
Bitwijs linker shift operator.
+
{{jsxref("Operators/Bitwise_Operators", ">>", "#Right_shift")}}
+
Bitwijs rechter shift operator.
+
{{jsxref("Operators/Bitwise_Operators", ">>>", "#Unsigned_right_shift")}}
+
Bitwijs tekenloze rechter shift operator.
+
+ +

Binaire bitwijs operators

+ +

Bitwijs operatoren behandelen hun operand als een set van 32 bits en retourneren een standaard JavaScript numerieke waarde.

+ +
+
{{jsxref("Operators/Bitwise_Operators", "&", "#Bitwise_AND")}}
+
Bitwijs AND.
+
{{jsxref("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}
+
Bitwijs OR.
+
{{jsxref("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}
+
Bitwijs XOR.
+
+ +

Binaire logische operators

+ +

Logische operatoren worden normaliter gebruikt met Booleans en retourneren ook een Boolean waarde.

+ +
+
{{jsxref("Operators/Logical_Operators", "&&", "#Logical_AND")}}
+
Logische AND.
+
{{jsxref("Operators/Logical_Operators", "||", "#Logical_OR")}}
+
Logische OR.
+
+ +

Conditionele (ternary) operator

+ +
+
{{jsxref("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}
+
+

The conditionele operator retourneert een of twee waarden gebaseerd op de waarde van de conditie.

+
+
+ +

Toekennings operators

+ +

Een toekennings operator kent een waarde toe aan zijn linker operand gebaseerd op de waarde van zijn rechter operand.

+ +
+
{{jsxref("Operators/Assignment_Operators", "=", "#Assignment")}}
+
Toekennings operator.
+
{{jsxref("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}
+
Vermenigvuldigings toekenning.
+
{{jsxref("Operators/Assignment_Operators", "/=", "#Division_assignment")}}
+
Delings toekenning.
+
{{jsxref("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}
+
Rest toekenning.
+
{{jsxref("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}
+
Additieve toekenning.
+
{{jsxref("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}
+
Substractieve toekenning
+
{{jsxref("Operators/Assignment_Operators", "<<=", "#Left_shift_assignment")}}
+
Linker shift toekenning.
+
{{jsxref("Operators/Assignment_Operators", ">>=", "#Right_shift_assignment")}}
+
Rechter shift toekenning.
+
{{jsxref("Operators/Assignment_Operators", ">>>=", "#Unsigned_right_shift_assignment")}}
+
Tekenloze rechter shift toekenning.
+
{{jsxref("Operators/Assignment_Operators", "&=", "#Bitwise_AND_assignment")}}
+
Bitwijs AND toekenning.
+
{{jsxref("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}
+
Bitwijs XOR toekenning.
+
{{jsxref("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}
+
Bitwijs OR toekenning.
+
{{experimental_inline}} {{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}
+ {{experimental_inline}} {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}
+
+

Ontbindings toekenningen maken het mogelijk eigenschappen van een array of object toe te kennen aan letterlijke arrays of objecten. 

+
+
+ +

Komma operator

+ +
+
{{jsxref("Operators/Comma_Operator", ",")}}
+
De komma operator maakt het mogelijk meerdere expressies te evalueren in een enkele statement en retourneert het resultaat van de laatste expressie.
+
+ +

Niet-standaard features

+ +
+
{{non-standard_inline}} {{jsxref("Operators/Legacy_generator_function", "Legacy generator function", "", 1)}}
+
Het function trefwoord kan worden gebruikt om een legacy generator functie te omschrijven binnen een expressie. Hiertoe moet de inhoud van de functie minstens 1  {{jsxref("Operators/yield", "yield")}} expressie bevatten.
+
{{non-standard_inline}} {{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}}
+
De expressie sluitings  syntax is een mogelijkheid om een verkorte functie te schrijven.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}{{Spec2('ES6')}}New: Spread operator, destructuring assignment, super keyword, Array comprehensions, Generator comprehensions
{{SpecName('ES5.1', '#sec-11', 'Expressions')}}{{Spec2('ES5.1')}} 
{{SpecName('ES1', '#sec-11', 'Expressions')}}{{Spec2('ES1')}}Initial definition
+ +

See also

+ + diff --git a/files/nl/web/javascript/reference/operators/typeof/index.html b/files/nl/web/javascript/reference/operators/typeof/index.html new file mode 100644 index 0000000000..e86cf0b324 --- /dev/null +++ b/files/nl/web/javascript/reference/operators/typeof/index.html @@ -0,0 +1,244 @@ +--- +title: typeof +slug: Web/JavaScript/Reference/Operatoren/typeof +tags: + - JavaScript + - Operator + - Unair +translation_of: Web/JavaScript/Reference/Operators/typeof +--- +
{{jsSidebar("Operators")}}
+ +

De typeof-operator geeft een string terug die het type van de ongeëvalueerde operand weergeeft.

+ +

Syntaxis

+ +

De typeof-operator wordt gevolgd door zijn operand:

+ +
typeof operand
+ +

Parameters

+ +

operand is een uitdrukking die het object of de {{Glossary("Primitive", "primitief")}} voorstelt waarvan het type moet worden teruggegeven.

+ +

Beschrijving

+ +

De volgende tabel bevat de mogelijke waarden die typeof kan teruggeven. Voor meer informatie over types of primitieven, zie pagina datastructuren in Javascript.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypeResultaat
Undefined"undefined"
Null"object" (see below)
Boolean"boolean"
Number"number"
String"string"
Symbol (nieuw in ECMAScript 2015)"symbol"
Host object (voorzien door de JS omgeving)Implementatie-afhankelijk
Function object (implementeert [[Call]] in termen van ECMA-262)"function"
Elk ander object"object"
+ +

 

+ +

Voorbeelden

+ +
// Nummers
+typeof 37 === 'number';
+typeof 3.14 === 'number';
+typeof(42) === 'number';
+typeof Math.LN2 === 'number';
+typeof Infinity === 'number';
+typeof NaN === 'number'; // Ondanks dat het "Not-A-Number" is
+typeof Number(1) === 'number'; // maar gebruik deze manier nooit!
+
+
+// Strings
+typeof "" === 'string';
+typeof "bla" === 'string';
+typeof (typeof 1) === 'string'; // typeof geeft altijd een string terug
+typeof String("abc") === 'string'; // maar gebruik deze manier nooit!
+
+
+// Booleans
+typeof true === 'boolean';
+typeof false === 'boolean';
+typeof Boolean(true) === 'boolean'; // maar gebruik deze manier nooit!
+
+
+// Symbolen
+typeof Symbol() === 'symbol'
+typeof Symbol('foo') === 'symbol'
+typeof Symbol.iterator === 'symbol'
+
+
+// Ongedefinieerd
+typeof undefined === 'undefined';
+typeof declaredButUndefinedVariable === 'undefined';
+typeof undeclaredVariable === 'undefined';
+
+
+// Objecten
+typeof {a:1} === 'object';
+
+// gebruik Array.isArray of Object.prototype.toString.call
+// om het verschil aan te geven tussen normale objecten en
+// arrays (rijen).
+typeof [1, 2, 4] === 'object';
+
+typeof new Date() === 'object';
+
+
+// Het volgende is verwarrend. Niet gebruiken!
+typeof new Boolean(true) === 'object';
+typeof new Number(1) === 'object';
+typeof new String("abc") === 'object';
+
+
+// Functies
+typeof function(){} === 'function';
+typeof class C {} === 'function';
+typeof Math.sin === 'function';
+
+ +

null

+ +
// Dit geldt sinds het ontstaan van JavaScript
+typeof null === 'object';
+
+ +

In de oorspronkelijke implementatie van JavaScript werden JavaScript-waarden gerepresenteerd met een type-label en een waarde. Het type-label voor de meeste objecten was 0. null werd voorgesteld als de NULL-pointer (0x00 in de meeste platformen). Daarom had null het type-label 0, wat de foute typeof teruggeefwaarde verklaart. (referentie)

+ +

Een oplossing (via een opt-in) werd voorgesteld voor ECMAScript, maar die werd afgekeurd. Anders zou het er als volgt hebben uitgezien: typeof null === 'null'.

+ +

De new-operator gebruiken

+ +
// Alle constructorfuncties die worden geïnstantieerd met het
+// 'new'-sleutelwoord, zullen altijd typeof 'object' zijn.
+var str = new String('String');
+var num = new Number(100);
+
+typeof str; // Geeft 'object' terug
+typeof num; // Geeft 'object' terug
+
+// Maar er is een uitzondering in het geval van de functieconstructor van JavaScript.
+
+var func = new Function();
+
+typeof func; // Geeft 'function' terug
+
+ +

Reguliere uitdrukkingen

+ +

Aanroepbare reguliere uitdrukkingen waren een niet-standaard toevoeging in sommige browsers.

+ +
typeof /s/ === 'function'; // Chrome 1-12 Niet comform aan ECMAScript 5.1
+typeof /s/ === 'object';   // Firefox 5+  Conform aan ECMAScript 5.1
+
+ +

Temporal Dead Zone-fouten

+ +

Voor ECMAScript 2015 gaf typeof altijd gegarandeerd een string terug voor elke operand waarmee het was voorzien. Maar met de toevoeging van niet-gehoiste, blokgekaderde let en const ontstaat er een ReferenceError als typeof op let- en const-variabelen wordt gebruikt voordat ze zijn benoemd. Dit staat in contrast met onbenoemde variabelen, waarvoor typeof 'undefined' teruggeeft. Blokgekaderde variabelen zijn in een "temporal dead zone" vanaf het begin van het blok totdat de intialisatie is verwerkt, waarin een fout ontstaat als ze worden benaderd.

+ +
typeof onbenoemdeVariabele === 'undefined';
+typeof nieuweLetVariabele; let nieuweLetVariabele; // ReferenceError
+typeof nieuweConstVariabele; const nieuweConstVariabele = 'hallo'; // ReferenceError
+
+ +

Uitzonderingen

+ +

Alle huidige browsers onthullen een niet-standaard hostobject {{domxref("document.all")}} met type undefined.

+ +
typeof document.all === 'undefined';
+
+ +

Hoewel de specificatie aangepaste type-labels toestaat voor niet-standaard exotische objecten, vereist het dat die type-labels verschillen van de ingebouwde. Dat document.all een type-label undefined heeft moet worden geclassificeerd als een uitzonderlijke overtreding van de regels.

+ +

Specificaties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificatieStatusOpmerking
{{SpecName('ESDraft', '#sec-typeof-operator', 'The typeof Operator')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-typeof-operator', 'The typeof Operator')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-11.4.3', 'The typeof Operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-11.4.3', 'The typeof Operator')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-11.4.3', 'The typeof Operator')}}{{Spec2('ES1')}}Oorspronkelijke definitie. Geïmplementeerd in JavaScript 1.1.
+ +

Browsercompatibiliteit

+ + + +

{{Compat("javascript.operators.typeof")}}

+ +

IE-specifieke opmerkingen

+ +

In IE 6, 7, en 8 zijn een groot aantal host objecten objecten en geen functions. bijvoorbeeld:

+ +
typeof alert === 'object'
+ +

Zie ook

+ + diff --git a/files/nl/web/svg/tutorial/basic_transformations/index.html b/files/nl/web/svg/tutorial/basic_transformations/index.html new file mode 100644 index 0000000000..1d19dd9ffa --- /dev/null +++ b/files/nl/web/svg/tutorial/basic_transformations/index.html @@ -0,0 +1,104 @@ +--- +title: Basistransformaties +slug: Web/SVG/Tutorial/Basis_Transformaties +tags: + - Gevorderd + - SVG + - SVG Handleiding + - animatie + - transformatie +translation_of: Web/SVG/Tutorial/Basic_Transformations +--- +
{{PreviousNext("Web/SVG/Handleidingen/Teksten", "Web/SVG/Handleiding/Knippen_en_maskeren")}}
+ +

Nu kunnen we beginnen om onze mooie afbeeldingen te bewerken. Maar eerst, willen we het groepelement {{SVGElement("g")}} aan je voorstellen. Met de groep<tag>, kun je eigenschappen van een hele groep elementen ineens benoemen. Dat is overigens de enige functie van de "g". Voorbeeld:

+ +
+
<svg width="30" height="10">
+    <g fill="red">
+        <rect x="0" y="0" width="10" height="10" />
+        <rect x="20" y="0" width="10" height="10" />
+    </g>
+</svg>
+
+
+ +

{{ EmbedLiveSample('twee_blokken', '30', '10', '', 'Web/SVG/handleidingl/Basis_Transformaties') }}

+ +

Transformaties voeg je eenvoudig aan het element toe met het transform  attribuut. Elk attribuut dat je wilt veranderen, benoem je apart en je bepaalt de onderlinge samenhang door middel van timing.

+ +

Verplaatsing

+ +

Je kunt een element verplaatsen zonder de "x" en "y" positie te veranderen. Dit is handig als je de <use> gebruikt of een animatie benoemt. Hiervoor gebruik je de translate() functie.

+ +
<svg width="40" height="50" style="background-color:#bff;">
+    <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
+</svg>
+
+ +

In dit voorbeeld wordt een rechthoek 30 eenheden horizontaal en 40 eenheden verticaal verplaatst vanaf de oorspronkelijke plek x=0 en y=0. .

+ +

{{ EmbedLiveSample('Verplaatsing', '40', '50', '', 'Web/SVG/Handleidingl/Basis_Transformaties') }}

+ +

Als je maar één transformatiewaarde invoert, wordt de tweede geacht 0 te zijn.

+ +

Rotatie

+ +

Het roteren van een element wordt vaak toegepast. Hiervoor gebruik je de rotate() transformatie:

+ +
<svg width="31" height="31">
+    <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" />
+</svg>
+
+ +

In dit voorbeeld wordt een vierkant geroteerd. Tussen de haakjes rotate() geef je aan hoe veel graden je wilt roteren. Je kunt ook negatieve waarden invoeren.

+ +

{{ EmbedLiveSample('Rotatie', '31', '31', '', 'Web/SVG/Handleidingl/Basis_Transformaties') }}

+ +

Perspectief

+ +

Om een rechthoek in een ruit te transformeren gebruik je de skewX() en skewY() transformaties. Je moet ze apart/achtereenvolgens benoemen. Tussen de haakjes vemeld je de hoek waarin je de X of de Y as wilt vervormen ten opzichte van het origineel.

+ +

Schalen

+ +

scale() verandert de grootte van een element. Je voert hier twee getallen in. De eerste bepaalt hoe de x factor schaalt en de tweede voor de y factor. The getallen worden vermenigvuldigd met het origineel. Bijvoorbeeld:  0.5 verkleint de x of y tot 50%.  Als je maar één waarde invoert, worden zowel x als y met die waarde geschaald.

+ +

Complexe transformaties met matrix()

+ +

Alle voorgaande transformaties kunnen worden uitgedrukt in een 2x3 transformatie matrix. Als je verschillende transformaties tegelijk wilt uitvoeren kun je ook dematrix(a, b, c, d, e, f) transformatie gebruiken. Dit zet de oorspronkelijke coördinaten om in een geheel nieuwe set coördinaten met behulp van:

+ +

{xnewCoordSys=axprevCoordSys+cyprevCoordSys+eynewCoordSys=bxprevCoordSys+dyprevCoordSys+f\left\{ \begin{matrix} x_{\mathrm{oudeCoordinaten}} = a x_{\mathrm{nieuweCoordinaten}} + c y_{\mathrm{nieuweCoordinaten}} + e \\ y_{\mathrm{oudeCoordinaten}} = b x_{\mathrm{oudeCoordinaten}} + d y_{\mathrm{nieuweCoordinaten}} + f \end{matrix} \right.

+ +

Zie een concreet voorbeeld van de SVG transformatie documentatie. Gedetailleerde informatie over de transformatiematrix vind je in SVG Aanbevelingen.

+ +

Effect voor het coördinaten systeem

+ +

Als je transformaties gebruikt, verander je het gehele coördinatensysteem van het element dat je transformeert. Dat betekent dat de  elementen die je hebt gespecificeerd en hun kinderen niet langer door de oorspronkelijke coördinaten worden gevormd, maar dat die ook worden vergroot/verkleind, vervormd, verplaatst of geroteerd .

+ +
<svg width="100" height="100">
+    <g transform="scale(2)">
+        <rect width="50" height="50" />
+    </g>
+</svg>
+
+ +

De vierkant hierboven wordt 100 bij 100 pixels.  De effecten van de transformaties kunnen echter ook nog eens beïnvloed worden door het gebruik van attributen zoals userSpaceOnUse.

+ +

{{ EmbedLiveSample('Effecten_voor_Coordinaten_Systeem', '100', '100', '', 'Web/SVG/Handleiding/Basis_Transformaties') }}

+ +

SVG inbedden in SVG

+ +

Anders dan in HTML kun je in SVG svg elements zoomloos inbedden in andere SVG elementen. Ook kun je gemakkelijk een geheel eigen coördinatensysteem  toepassen (op ingebedde) elementen door een viewBox, width and height te benoemen. 

+ +
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
+  <svg width="100" height="100" viewBox="0 0 50 50">
+    <rect width="50" height="50" />
+  </svg>
+</svg>
+
+ +

In het voorbeeld is de viewbox zo gedefinieerd ten opzichte van de hoogte en breedte, dat het coordinatenstelsel twee keer zo groot wordt. Het effect is gelijk die in het voorgaande voorbeeld

+ +

{{ EmbedLiveSample('Enbedding_SVG_in_SVG', '100', '100', '', 'Web/SVG/l/Basis_Transformaties') }}

+ +
{{ PreviousNext("Web/SVG/Handleiding/Teksten", "Web/SVG/Handleiding/knippen_en_maskeren")}}
diff --git a/files/nl/web/svg/tutorial/basis_transformaties/index.html b/files/nl/web/svg/tutorial/basis_transformaties/index.html deleted file mode 100644 index 1d19dd9ffa..0000000000 --- a/files/nl/web/svg/tutorial/basis_transformaties/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: Basistransformaties -slug: Web/SVG/Tutorial/Basis_Transformaties -tags: - - Gevorderd - - SVG - - SVG Handleiding - - animatie - - transformatie -translation_of: Web/SVG/Tutorial/Basic_Transformations ---- -
{{PreviousNext("Web/SVG/Handleidingen/Teksten", "Web/SVG/Handleiding/Knippen_en_maskeren")}}
- -

Nu kunnen we beginnen om onze mooie afbeeldingen te bewerken. Maar eerst, willen we het groepelement {{SVGElement("g")}} aan je voorstellen. Met de groep<tag>, kun je eigenschappen van een hele groep elementen ineens benoemen. Dat is overigens de enige functie van de "g". Voorbeeld:

- -
-
<svg width="30" height="10">
-    <g fill="red">
-        <rect x="0" y="0" width="10" height="10" />
-        <rect x="20" y="0" width="10" height="10" />
-    </g>
-</svg>
-
-
- -

{{ EmbedLiveSample('twee_blokken', '30', '10', '', 'Web/SVG/handleidingl/Basis_Transformaties') }}

- -

Transformaties voeg je eenvoudig aan het element toe met het transform  attribuut. Elk attribuut dat je wilt veranderen, benoem je apart en je bepaalt de onderlinge samenhang door middel van timing.

- -

Verplaatsing

- -

Je kunt een element verplaatsen zonder de "x" en "y" positie te veranderen. Dit is handig als je de <use> gebruikt of een animatie benoemt. Hiervoor gebruik je de translate() functie.

- -
<svg width="40" height="50" style="background-color:#bff;">
-    <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
-</svg>
-
- -

In dit voorbeeld wordt een rechthoek 30 eenheden horizontaal en 40 eenheden verticaal verplaatst vanaf de oorspronkelijke plek x=0 en y=0. .

- -

{{ EmbedLiveSample('Verplaatsing', '40', '50', '', 'Web/SVG/Handleidingl/Basis_Transformaties') }}

- -

Als je maar één transformatiewaarde invoert, wordt de tweede geacht 0 te zijn.

- -

Rotatie

- -

Het roteren van een element wordt vaak toegepast. Hiervoor gebruik je de rotate() transformatie:

- -
<svg width="31" height="31">
-    <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" />
-</svg>
-
- -

In dit voorbeeld wordt een vierkant geroteerd. Tussen de haakjes rotate() geef je aan hoe veel graden je wilt roteren. Je kunt ook negatieve waarden invoeren.

- -

{{ EmbedLiveSample('Rotatie', '31', '31', '', 'Web/SVG/Handleidingl/Basis_Transformaties') }}

- -

Perspectief

- -

Om een rechthoek in een ruit te transformeren gebruik je de skewX() en skewY() transformaties. Je moet ze apart/achtereenvolgens benoemen. Tussen de haakjes vemeld je de hoek waarin je de X of de Y as wilt vervormen ten opzichte van het origineel.

- -

Schalen

- -

scale() verandert de grootte van een element. Je voert hier twee getallen in. De eerste bepaalt hoe de x factor schaalt en de tweede voor de y factor. The getallen worden vermenigvuldigd met het origineel. Bijvoorbeeld:  0.5 verkleint de x of y tot 50%.  Als je maar één waarde invoert, worden zowel x als y met die waarde geschaald.

- -

Complexe transformaties met matrix()

- -

Alle voorgaande transformaties kunnen worden uitgedrukt in een 2x3 transformatie matrix. Als je verschillende transformaties tegelijk wilt uitvoeren kun je ook dematrix(a, b, c, d, e, f) transformatie gebruiken. Dit zet de oorspronkelijke coördinaten om in een geheel nieuwe set coördinaten met behulp van:

- -

{xnewCoordSys=axprevCoordSys+cyprevCoordSys+eynewCoordSys=bxprevCoordSys+dyprevCoordSys+f\left\{ \begin{matrix} x_{\mathrm{oudeCoordinaten}} = a x_{\mathrm{nieuweCoordinaten}} + c y_{\mathrm{nieuweCoordinaten}} + e \\ y_{\mathrm{oudeCoordinaten}} = b x_{\mathrm{oudeCoordinaten}} + d y_{\mathrm{nieuweCoordinaten}} + f \end{matrix} \right.

- -

Zie een concreet voorbeeld van de SVG transformatie documentatie. Gedetailleerde informatie over de transformatiematrix vind je in SVG Aanbevelingen.

- -

Effect voor het coördinaten systeem

- -

Als je transformaties gebruikt, verander je het gehele coördinatensysteem van het element dat je transformeert. Dat betekent dat de  elementen die je hebt gespecificeerd en hun kinderen niet langer door de oorspronkelijke coördinaten worden gevormd, maar dat die ook worden vergroot/verkleind, vervormd, verplaatst of geroteerd .

- -
<svg width="100" height="100">
-    <g transform="scale(2)">
-        <rect width="50" height="50" />
-    </g>
-</svg>
-
- -

De vierkant hierboven wordt 100 bij 100 pixels.  De effecten van de transformaties kunnen echter ook nog eens beïnvloed worden door het gebruik van attributen zoals userSpaceOnUse.

- -

{{ EmbedLiveSample('Effecten_voor_Coordinaten_Systeem', '100', '100', '', 'Web/SVG/Handleiding/Basis_Transformaties') }}

- -

SVG inbedden in SVG

- -

Anders dan in HTML kun je in SVG svg elements zoomloos inbedden in andere SVG elementen. Ook kun je gemakkelijk een geheel eigen coördinatensysteem  toepassen (op ingebedde) elementen door een viewBox, width and height te benoemen. 

- -
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
-  <svg width="100" height="100" viewBox="0 0 50 50">
-    <rect width="50" height="50" />
-  </svg>
-</svg>
-
- -

In het voorbeeld is de viewbox zo gedefinieerd ten opzichte van de hoogte en breedte, dat het coordinatenstelsel twee keer zo groot wordt. Het effect is gelijk die in het voorgaande voorbeeld

- -

{{ EmbedLiveSample('Enbedding_SVG_in_SVG', '100', '100', '', 'Web/SVG/l/Basis_Transformaties') }}

- -
{{ PreviousNext("Web/SVG/Handleiding/Teksten", "Web/SVG/Handleiding/knippen_en_maskeren")}}
-- cgit v1.2.3-54-g00ecf