{"id":1586,"date":"2024-03-12T10:03:51","date_gmt":"2024-03-12T09:03:51","guid":{"rendered":"https:\/\/computerles.classy.be\/?page_id=1586"},"modified":"2024-07-03T11:28:37","modified_gmt":"2024-07-03T10:28:37","slug":"html","status":"publish","type":"page","link":"https:\/\/computerles.classy.be\/?page_id=1586","title":{"rendered":"HTML"},"content":{"rendered":"\n<p>Wil je websites leren maken? Dan kan een basiskennis van HTML erg nuttig zijn.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"W3Schools HTML Tutorial 01 - Introduction\" width=\"580\" height=\"326\" src=\"https:\/\/www.youtube.com\/embed\/ewZ_YWbIWXI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">HTML-elementen<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>HTML staat voor Hyper Text Markup Language<\/li>\n\n\n\n<li>HTML kan de structuur van een webpagina bepalen<\/li>\n\n\n\n<li>HTML bestaat uit een reeks elementen<\/li>\n\n\n\n<li>HTML de elementen zorgen voor de juiste weergave van de tekst in de webbrowser<\/li>\n\n\n\n<li>HTML elementen geven bijvoorbeeld aan  &#8220;dit is een hoofding&#8221;, &#8220;dit is een alinea&#8221;, &#8220;dit is een link&#8221;&#8230;<\/li>\n<\/ul>\n\n\n\n<p>Je hebt meestal een <strong>beginelement <\/strong>dan je <strong>inhoud <\/strong>en dan de <strong>eindelement<\/strong>.&lt;elementnaam&gt;&nbsp;Zichtbare inhoud&#8230;&nbsp;&lt;\/elementnaam&gt;<\/p>\n\n\n\n<p>Je hebt uitzonderlijk ook elementen waar er geen inhoud mogelijk is. Dan is er ook geen eindelement nodig.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"242\" height=\"273\" src=\"https:\/\/computerles.classy.be\/wp-content\/uploads\/elementen.png\" alt=\"\" class=\"wp-image-1587\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"537\" height=\"546\" src=\"https:\/\/computerles.classy.be\/wp-content\/uploads\/structuur-html.png\" alt=\"\" class=\"wp-image-1588\" srcset=\"https:\/\/computerles.classy.be\/wp-content\/uploads\/structuur-html.png 537w, https:\/\/computerles.classy.be\/wp-content\/uploads\/structuur-html-295x300.png 295w\" sizes=\"auto, (max-width: 537px) 100vw, 537px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Test het voorbeeld via <a href=\"https:\/\/www.w3schools.com\/html\/tryit.asp?filename=tryhtml_default\" data-type=\"link\" data-id=\"https:\/\/www.w3schools.com\/html\/tryit.asp?filename=tryhtml_default\" target=\"_blank\" rel=\"noreferrer noopener\">deze pagina<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"449\" src=\"https:\/\/computerles.classy.be\/wp-content\/uploads\/basis-1024x449.png\" alt=\"\" class=\"wp-image-1613\" srcset=\"https:\/\/computerles.classy.be\/wp-content\/uploads\/basis-1024x449.png 1024w, https:\/\/computerles.classy.be\/wp-content\/uploads\/basis-300x132.png 300w, https:\/\/computerles.classy.be\/wp-content\/uploads\/basis-768x337.png 768w, https:\/\/computerles.classy.be\/wp-content\/uploads\/basis-1200x526.png 1200w, https:\/\/computerles.classy.be\/wp-content\/uploads\/basis.png 1427w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Tijd over? Speel begin en eindelement memory.<\/p>\n\n\n\n<div class=\"bw-widget-wrapper\"><iframe allow=\"microphone *; microphone;\" src=\"https:\/\/www.bookwidgets.com\/play\/BED3VBL\" class=\"bw-widget-frame\" height=\"500\"><\/iframe><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Elementen uit het voorbeeld<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>&lt;!DOCTYPE html&gt;<\/code>&nbsp;geeft aan dat het een HTML5 document is (enige zonder eindtag)<\/li>\n\n\n\n<li><code>&lt;html&gt;<\/code>&nbsp;geeft start en einde van HTML-document aan<\/li>\n\n\n\n<li><code>&lt;head&gt;<\/code>&nbsp;bevat meta info van de pagina<\/li>\n\n\n\n<li><code>&lt;title&gt;<\/code>&nbsp;geeft de titel aan (zichtbaar in de titelbalk\/tabblad van je browser)<\/li>\n\n\n\n<li><code>&lt;body&gt;<\/code>&nbsp;dit element bevat alle zichtbare delen op je pagina zoals hoofding, alinea, afbeeldingen&#8230;<\/li>\n\n\n\n<li><code>&lt;h1&gt;<\/code>&nbsp;een grote hoofding<\/li>\n\n\n\n<li><code>&lt;p&gt;<\/code>&nbsp;weergave van een alinea<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Extra elementen<\/h3>\n\n\n\n<p>Pas je voorbeeld aan zodat je meerdere alinea&#8217;s hebt (&lt;p&gt;).<br>Probeer ook verschillende hoofdingen (&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;&#8230;).<br>Vergeet nooit om je elementen af te sluiten met een eind-element!!!<\/p>\n\n\n\n<p>Pas je voorbeeld aan via <a href=\"https:\/\/www.w3schools.com\/html\/tryit.asp?filename=tryhtml_default\" data-type=\"link\" data-id=\"https:\/\/www.w3schools.com\/html\/tryit.asp?filename=tryhtml_default\" target=\"_blank\" rel=\"noreferrer noopener\">deze pagina<\/a>. <\/p>\n\n\n\n<p>Gebruik ook onderstaande elementen om tekst bijvoorbeeld tekst in het vet te zetten of tekst te benadrukken.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>&lt;strong&gt;&nbsp; &lt;\/strong&gt;<\/td><td>Tekst benadrukken (vet)<\/td><\/tr><tr><td>&lt;em&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;\/em&gt;<\/td><td>Tekst benadrukken (cursief)<\/td><\/tr><tr><td>&lt;!&#8211; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &#8211;&gt;<\/td><td>Commentaar\/onafgewerkte code<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"514\" src=\"https:\/\/computerles.classy.be\/wp-content\/uploads\/opmaak-1024x514.png\" alt=\"\" class=\"wp-image-1614\" srcset=\"https:\/\/computerles.classy.be\/wp-content\/uploads\/opmaak-1024x514.png 1024w, https:\/\/computerles.classy.be\/wp-content\/uploads\/opmaak-300x151.png 300w, https:\/\/computerles.classy.be\/wp-content\/uploads\/opmaak-768x386.png 768w, https:\/\/computerles.classy.be\/wp-content\/uploads\/opmaak-1200x603.png 1200w, https:\/\/computerles.classy.be\/wp-content\/uploads\/opmaak.png 1479w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Probleem met alinea&#8217;s<\/h3>\n\n\n\n<p>Wil je de tekst op een nieuwe lijn laten starten? Dit kan op twee manieren:<\/p>\n\n\n\n<p>&lt;br&gt; element (dit heeft geen eind-element)<\/p>\n\n\n\n<p>Bekijk het voorbeeld via <a href=\"https:\/\/www.w3schools.com\/html\/tryit.asp?filename=tryhtml_elements_br\" data-type=\"link\" data-id=\"https:\/\/www.w3schools.com\/html\/tryit.asp?filename=tryhtml_elements_br\" target=\"_blank\" rel=\"noreferrer noopener\">deze link<\/a>. Pas het voorbeeld aan zodat de tekst in het Nederlands staat. Voeg nog enkele zinnen toe.<\/p>\n\n\n\n<p>Je kan ook gebruik maken van de &lt;pre&gt; &lt;\/pre&gt; elementen. Dit maak het nog eenvoudiger. Bekijk het voorbeeld <a href=\"https:\/\/www.w3schools.com\/html\/tryit.asp?filename=tryhtml_pre\" data-type=\"link\" data-id=\"https:\/\/www.w3schools.com\/html\/tryit.asp?filename=tryhtml_pre\" target=\"_blank\" rel=\"noreferrer noopener\">via deze link<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Attributen<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Alle HTML-elementen kunnen attributen krijgen<\/li>\n\n\n\n<li>Attributen geven extra info over het element<\/li>\n\n\n\n<li>Attributen staan altijd in het begin-element<\/li>\n\n\n\n<li>Attributen hebben meestal volgende vorm:&nbsp;<strong>naam=&#8221;waarde&#8221;<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"HTML - Attributes - W3Schools.com\" width=\"580\" height=\"326\" src=\"https:\/\/www.youtube.com\/embed\/yMX901oVtn8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Er zijn HTML-elementen die enkel goed werken met de extra info in het attribuut. Als je bijvoorbeeld met een link of afbeelding wil werken.<\/p>\n\n\n\n<p>Link toevoegen:<br>Bekijk het voorbeeld via <a href=\"https:\/\/www.w3schools.com\/html\/tryit.asp?filename=tryhtml_attributes_link\" data-type=\"link\" data-id=\"https:\/\/www.w3schools.com\/html\/tryit.asp?filename=tryhtml_attributes_link\" target=\"_blank\" rel=\"noreferrer noopener\">deze link<\/a>. Pas het voorbeeld aan zodat de tekst Nederlands is en je verwijst naar de website computerles.classy.be.<\/p>\n\n\n\n<p>Afbeelding toevoegen:<br>Bekijk het voorbeeld via <a href=\"https:\/\/www.w3schools.com\/html\/tryit.asp?filename=tryhtml_attributes_img\" data-type=\"link\" data-id=\"https:\/\/www.w3schools.com\/html\/tryit.asp?filename=tryhtml_attributes_img\" target=\"_blank\" rel=\"noreferrer noopener\">deze link<\/a>. Verander de breedte en hoogte naar de helft. Probeer ook een andere afbeelding te laten verschijnen door de source te veranderen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"597\" src=\"https:\/\/computerles.classy.be\/wp-content\/uploads\/afbeelding-en-link-1024x597.png\" alt=\"\" class=\"wp-image-1615\" srcset=\"https:\/\/computerles.classy.be\/wp-content\/uploads\/afbeelding-en-link-1024x597.png 1024w, https:\/\/computerles.classy.be\/wp-content\/uploads\/afbeelding-en-link-300x175.png 300w, https:\/\/computerles.classy.be\/wp-content\/uploads\/afbeelding-en-link-768x447.png 768w, https:\/\/computerles.classy.be\/wp-content\/uploads\/afbeelding-en-link-1200x699.png 1200w, https:\/\/computerles.classy.be\/wp-content\/uploads\/afbeelding-en-link.png 1442w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Extra (kleur)<\/strong><\/h3>\n\n\n\n<p>Wil je lettertype en kleur veranderen? Bekijk dan ook deze video.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"HTML - Styles - W3Schools.com\" width=\"580\" height=\"326\" src=\"https:\/\/www.youtube.com\/embed\/twdNPJfbj_8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Voorbeeld:<br>&lt;p style=&#8221;color:blue;&#8221;&gt; Deze tekst is blauw. &lt;\/p&gt;<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>style=&#8221;background-color:blue;&#8221;<\/td><td>Achtergrondkleuren kies uit <a href=\"https:\/\/www.w3schools.com\/colors\/colors_groups.asp\" data-type=\"link\" data-id=\"https:\/\/www.w3schools.com\/colors\/colors_groups.asp\">deze mogelijkheden<\/a>.<\/td><\/tr><tr><td>style=&#8221;color:blue;&#8221;<\/td><td>Tekstkleur kiezen<\/td><\/tr><tr><td>style=&#8221;font-family:courier;&#8221;<\/td><td>Tekst lettertype<\/td><\/tr><tr><td>style=&#8221;font-size:50px;&#8221;<\/td><td>Tekst grootte<\/td><\/tr><tr><td>style=&#8221;align:center;&#8221;<\/td><td>Tekst in het midden plaatsen<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Je eerste website<\/h2>\n\n\n\n<p>Maak nu een eigen website in kladblok. Bekijk de video hoe dit moet.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"HTML - Editors - W3Schools.com\" width=\"580\" height=\"326\" src=\"https:\/\/www.youtube.com\/embed\/bBP0ckEln4Y?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Broncode aanpassen<\/h2>\n\n\n\n<p>Je kent nu voldoende HTML om de broncode van een site aan te passen. Ga naar een website. Vraag de broncode op en pas aan naar wens.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-space-between is-layout-flex wp-container-core-buttons-is-layout-b9b75ed2 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/computerles.classy.be\/?page_id=1473\">&lt; ICT-vaardigheden<\/a><\/div>\n\n\n\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/computerles.classy.be\/\" target=\"_blank\" rel=\"noreferrer noopener\">Hoofdmenu &gt;<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Wil je websites leren maken? Dan kan een basiskennis van HTML erg nuttig zijn. HTML-elementen Je hebt meestal een beginelement dan je inhoud en dan de eindelement.&lt;elementnaam&gt;&nbsp;Zichtbare inhoud&#8230;&nbsp;&lt;\/elementnaam&gt; Je hebt uitzonderlijk ook elementen waar er geen inhoud mogelijk is. Dan is er ook geen eindelement nodig. Test het voorbeeld via deze pagina. Tijd over? Speel [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1473,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1586","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/computerles.classy.be\/index.php?rest_route=\/wp\/v2\/pages\/1586","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/computerles.classy.be\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/computerles.classy.be\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/computerles.classy.be\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/computerles.classy.be\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1586"}],"version-history":[{"count":15,"href":"https:\/\/computerles.classy.be\/index.php?rest_route=\/wp\/v2\/pages\/1586\/revisions"}],"predecessor-version":[{"id":1616,"href":"https:\/\/computerles.classy.be\/index.php?rest_route=\/wp\/v2\/pages\/1586\/revisions\/1616"}],"up":[{"embeddable":true,"href":"https:\/\/computerles.classy.be\/index.php?rest_route=\/wp\/v2\/pages\/1473"}],"wp:attachment":[{"href":"https:\/\/computerles.classy.be\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}