XHTML- of UITBREIDBARE HyperText-opmaaktaal is een mix van HTML en XML, zeer vergelijkbaar met HTML maar strenger. Het is als een regelboek voor het maken van webpagina’s die browsers gemakkelijk begrijpen. In tegenstelling tot HTML moet je voorzichtig zijn en de regels nauwkeurig volgen. De meeste browsers ondersteunen het. Zie het maar als een preciezere manier om webcode te schrijven.
Inhoudsopgave
Geschiedenis
Het is ontwikkeld door het World Wide Web Consortium (W3C) en helpt webontwikkelaars bij de overstap van HTML naar XML. Met XHTML kunnen ontwikkelaars de XML-wereld met al zijn mogelijkheden betreden, terwijl ze toch achterwaartse en toekomstige compatibiliteit van de inhoud garanderen. De XHTML-familie omvat drie documenttypen; de eerste is XHTML 1.0, aanbevolen door W3C op 26 januari 2000. De tweede is XHTML 1.1, aanbevolen door W3C op 31 mei 2001.
De derde is XHTML5, een standaard die wordt gebruikt voor het ontwikkelen van een XML-aanpassing van de HTML5-specificatie. Een XHTML-document moet een XHTML-declaratie hebben.
Elementen van XHTML:
| XHTML-element | Beschrijving |
> | Wordt gebruikt om de Document Type Definition (DTD) te declareren, waarbij de regels voor de opmaaktaal worden gespecificeerd, waardoor een goede weergave in browsers wordt gegarandeerd. |
> | Omsluit het volledige HTML- of XHTML-document en dient als hoofdelement. |
> | Bevat meta-informatie over het document, zoals de titel, tekenset, gekoppelde stylesheets en andere essentiële elementen. |
> | Genest in de hoofdsectie, specificeert de titel van het document, weergegeven in de titelbalk of het tabblad van de browser. |
> | Omvat de inhoud van de webpagina, inclusief tekst, afbeeldingen, links en andere HTML-elementen. Het vertegenwoordigt het zichtbare deel van het document dat in de browser wordt weergegeven. |
Bij het maken van een XHTML-webpagina is het noodzakelijk om een DTD-declaratie (Document Type Definition) op te nemen. Er zijn drie soorten DTD die hieronder worden besproken:
Overgangs-DTD:
Het wordt ondersteund door de oudere browsers die geen ingebouwde ondersteuning voor trapsgewijze stijlbladen hebben. Er zijn verschillende attributen ingesloten in de body-tag die niet zijn toegestaan in strikte DTD.
Syntaxis:
PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'DTD/xhtml1-transitional.dtd'>
Voorbeeld: In dit voorbeeld zien we de code voor het schrijven van een XHTML-document met een voorbeeld.
html
xml version='1.0' encoding='UTF-8'?> Transitionele DTD XHTMLtitel> hoofd> <body bgcolor='#dae1ed'> <div>lettertype-gewicht:vet;tekst-uitlijnen:gecentreerd; margin-bottom:-25px;'>techcodeview.comdiv> <p style='text-align:center;font-size:20px;'>Een informaticaportaal <p style='text-align:center;font-size:20px;'>Optie om maand te kiezen: <select name='month'> <option selected='selected'>Januarioptie> <option>Februarioptie> <option>Maartoptie> <option>Apriloptie> <option>Mayoptie> <option>Junioptie> <option>Julioptie> <option>Augusyoptie> <option>September optie> <option>Oktoberoptie> <option>Novemberoptie> <option>Decemberoptie> selecteren> p> body> html>> </code> </td> </tr> </tbody> </table> <p> </p> <i id='output-icon' title='Output'> </i> <p> </p> <p> </p> <i id='copy-url-button' title='Copy Generated Ide URL'> </i> <p> </p> <p> </p> <p dir='ltr'> <b> <strong>Uitgang: </strong> </b> </p> <p> <img src='//techcodeview.com/img/html-xml/79/xhtml-introduction.webp' alt='transitionele dtd xhtml'> <span> </span> </p> <h2 id='strict-dtd'> <b> <strong>Strikte DTD: </strong> </b> <span> </span> </h2> <p dir='ltr'> <span>Strikte DTD wordt gebruikt wanneer de XHTML-pagina alleen opmaaktaal bevat. Strikte DTD wordt gebruikt in combinatie met trapsgewijze stijlbladen, omdat dit attribuut geen CSS-eigenschap in de body-tag toestaat. </span> </p> <h3> <b> <strong>Syntaxis: </strong> </b> </h3> <pre> PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'DTD/xhtml1-strict.dtd'> </pre> <p dir='ltr'> <b> <strong>Voorbeeld 2: </strong> </b> <span>In dit voorbeeld zien we de code voor het schrijven van een XHTML-document met een voorbeeld voor strikte DTD. </span> </p> <h2>html </h2> <i id='copy-code-button' title='Copy Code'> </i> <p> </p> <p> <i id='run-and-edit-button' title='Edit Code' lang='xml'> </i> <br> </p> <p> <i id='run-code-button' lang='xml' title='Run Code and See Output'> </i> </p> <p> <i id='generate-url-and-run-button' title='Run Code and Generate IDE URL' lang='xml'> </i> <br> <i title='Dark Mode'> </i> <br> <i id='edit-on-ide-button' title='Edit on IDE' lang='xml'> </i> </p> <p> </p> <table class="table"> <tbody> <tr> <td> <code>xml version='1.0' encoding='UTF-8'?> <html xmlns=' http://www.w3.org/1999/xhtml ' xml:lang='en' lang='en'> <head> <title>Strikte DTD XHTMLtitel> hoofd> <body> <div>lettertype-gewicht:vet;tekst-uitlijnen:gecentreerd; margin-bottom:-25px;'>techcodeview.comdiv> <p style='text-align:center;font-size:20px;'>Een informaticaportaal <p style='text-align:center;font-size:20px;'>Optie om maand te kiezen: <select name='month'> <option selected='selected'>Januarioptie> <option>Februarioptie> <option>Maartoptie> <option>Apriloptie> <option>Mayoptie> <option>Junioptie> <option>Julioptie> <option>Augusyoptie> <option>September optie> <option>Oktoberoptie> <option>Novemberoptie> <option>Decemberoptie> selecteren> p> body> html>> </code> </td> </tr> </tbody> </table> <p> </p> <i id='output-icon' title='Output'> </i> <p> </p> <p> </p> <i id='copy-url-button' title='Copy Generated Ide URL'> </i> <p> </p> <p> </p> <p dir='ltr'> <b> <strong>Uitgang: </strong> </b> </p> <p> <span> </span> <img src='//techcodeview.com/img/html-xml/79/xhtml-introduction-2.webp' alt='strikte dtd xhtml'> <span> </span> </p> <h2 id='frameset-dtd'> <b> <strong>Frameset-DTD: </strong> </b> <span> </span> </h2> <p dir='ltr'> <span>De frameset DTD wordt gebruikt wanneer de XHTML-pagina frames bevat. Deze DTD is identiek aan de HTML 4.01 Transitional DTD, behalve het inhoudsmodel van het HTML-element. </span> </p> <h3> <b> <strong>Syntaxis: </strong> </b> </h3> <pre> PUBLIC '-//W3C//DTD XHTML 1.0 Frameset//EN' 'DTD/xhtml1-frameset.dtd'> </pre> <p dir='ltr'> <b> <strong>Voorbeeld 2: </strong> </b> <span>In dit voorbeeld zien we de code voor het schrijven van een XHTML-document met een voorbeeld voor frameset DTD. </span> </p> <h2>html </h2> <i id='copy-code-button' title='Copy Code'> </i> <p> </p> <p> <i id='run-and-edit-button' title='Edit Code' lang='xml'> </i> <br> </p> <p> <i id='run-code-button' lang='xml' title='Run Code and See Output'> </i> </p> <p> <i id='generate-url-and-run-button' title='Run Code and Generate IDE URL' lang='xml'> </i> <br> <i title='Dark Mode'> </i> <br> <i id='edit-on-ide-button' title='Edit on IDE' lang='xml'> </i> </p> <p> </p> <table class="table"> <tbody> <tr> <td> <code>xml version='1.0' encoding='UTF-8'?>http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd '> <html xmlns=' http://www.w3.org/1999/xhtml ' xml:lang='en' lang='en'> <head> <title>Frameset DTD XHTMLtitel> kop> <frameset cols='30%, 20%, *'> <frameset rows='40%, 30%, *'> <frame src='gfg.html' /> <frame src='gfg1.html' /> <frame src='geeks.html' />frameset> <frameset rows='40%, 60%'> <frame src='g4g.html' /> <frame src='g4g1.html' />frameset> <frameset rows='20%, 20%, 30%, *'> <frame src='geeksforgeeks.html' /> <frame src='geeksforgeeks1.html' /> <frame src='geeksforgeeks2.html' /> <frame src='geeksforgeeks3.html' />frameset> frameset> html>> </code> </td> </tr> </tbody> </table> <p> </p> <i id='output-icon' title='Output'> </i> <p> </p> <p> </p> <i id='copy-url-button' title='Copy Generated Ide URL'> </i> <p> </p> <p> </p> <p dir='ltr'> <b> <strong>Uitgang: </strong> </b> </p> <h2 id='why-use-xhtml'> <img src='//techcodeview.com/img/html-xml/79/xhtml-introduction-3.webp' alt='frameset dtdxhtml'> <b> <strong>Waarom XHTML gebruiken? </strong> </b> </h2> <ul> <li value='1'> <span>XHTML-documenten worden gevalideerd met standaard XML-tools. </span> </li> <li value='2'> <span>Het is gemakkelijk om op de lange termijn een document te onderhouden, converteren en bewerken. </span> </li> <li value='3'> <span>Het wordt gebruikt om de kwaliteitsnorm van webpagina's te definiëren. </span> </li> <li value='4'> <span>XHTML is een officiële standaard van het W3C, uw website wordt compatibeler en nauwkeuriger met veel browsers. </span> </li> </ul> <h2 id='benefits-of-xhtml'> <b> <strong>Voordelen van XHTML: </strong> </b> </h2> <ul> <li value='1'> <span>Alle XHTML-tags moeten afsluitende tags hebben en zijn correct genest. Dit genereert schonere code. </span> </li> <li value='2'> <span>XHTML-documenten zijn lean, wat betekent dat ze minder bandbreedte gebruiken. Dit verlaagt de kosten, vooral als uw website duizenden pagina's heeft. </span> </li> <li value='3'> <span>XHTML-documenten zijn goed opgemaakt en kunnen gemakkelijk worden getransporteerd naar draadloze apparaten, braillelezers en andere gespecialiseerde webomgevingen. </span> </li> <li value='4'> <span>Alle nieuwe ontwikkelingen zullen plaatsvinden in XML (waarvan XHTML een applicatie is). </span> </li> <li value='5'> <span>XHTML werkt samen met CSS om webpagina's te maken die gemakkelijk kunnen worden bijgewerkt. </span> </li> </ul> <h2 id='difference-between-html-and-xhtml'> <b> <strong>Verschil tussen HTML en XHTML: </strong> </b> </h2> <table class="table"> <tbody> <tr> <th> <span>HTML </span> </th> <th> <span>XHTML </span> </th> </tr> </tbody> <tbody> <tr> <td> <span>HTML of HyperText Markup Language is de belangrijkste opmaaktaal voor het maken van webpagina's </span> </td> <td> <span>XHTML (Extensible HyperText Markup Language) is een familie van XML-opmaaktalen die versies van de veelgebruikte Hypertext Markup Language (HTML) spiegelen of uitbreiden. </span> </td> </tr> <tr> <td> <span>Flexibel raamwerk dat een soepele HTML-specifieke parser vereist </span> </td> <td> <span>Beperkende subset van XML die moet worden geparseerd met standaard XML-parsers </span> </td> </tr> <tr> <td> <span>Voorgesteld door Tim Berners-Lee in 1987 </span> </td> <td> <span>Aanbeveling van het World Wide Web Consortium in 2000. </span> </td> </tr> <tr> <td> <span>Toepassing van standaard gegeneraliseerde opmaaktaal (SGML). </span> </td> <td> <span>Toepassing van XML </span> </td> </tr> <tr> <td> <span>Uitgebreid van SGML. </span> </td> <td> <span>Uitgebreid van XML, HTML </span> </td> </tr> </tbody> </table> <br> <br>
</div>
<!-- Article Footer with Prominent Share Buttons -->
<div class="px-6 md:px-8 py-8 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700/50">
<div class="flex flex-col sm:flex-row items-center justify-between gap-6">
<h4 class="text-base font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wide flex items-center gap-2">
<i class="fa fa-share-alt text-tech-500"> </i>
Deel </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=XHTML-introductie&url=https://www.techcodeview.com/nl/xhtml-introduction"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-twitter text-lg"> </i>
<span class="hidden sm:inline">Twitter </span>
</a>
<!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.techcodeview.com/nl/xhtml-introduction"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#4267B2]/10 text-[#4267B2] hover:bg-[#4267B2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-facebook text-lg"> </i>
<span class="hidden sm:inline">Facebook </span>
</a>
<!-- LinkedIn -->
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.techcodeview.com/nl/xhtml-introduction&title=XHTML-introductie"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#0077b5]/10 text-[#0077b5] hover:bg-[#0077b5] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-linkedin text-lg"> </i>
<span class="hidden sm:inline">LinkedIn </span>
</a>
</div>
</div>
</div>
</article>
<!-- Comments Placeholder / Random Articles -->
<div class="mt-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 md:p-8 shadow-sm">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 uppercase tracking-wide border-b border-slate-200 dark:border-slate-700 pb-2">
Dit Vind Je Misschien Leuk </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/nl/index-match-function-excel" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/picked/15/index-match-function-excel.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="INDEX- en MATCH-functie in Excel" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/nl/index-match-function-excel">INDEX- en MATCH-functie in Excel </a>
</h4>
</div> <div class="group">
<a href="/nl/data-flow-diagrams" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/software-engineering/64/data-flow-diagrams.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Gegevensstroomdiagrammen" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/nl/data-flow-diagrams">Gegevensstroomdiagrammen </a>
</h4>
</div>
</div>
</div>
</div>
<!-- SECONDARY COLUMN (SIDEBAR) -->
<!-- Aside Column -->
<div class="lg:col-span-4 space-y-8">
<!-- Best Articles Widget -->
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 shadow-sm">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide flex items-center">
<span class="mr-2 h-2 w-2 rounded-full bg-tech-500"> </span>
Top Artikelen </h2>
</div>
<!-- Owl Carousel Preserved Container -->
<div id="owl-carousel-3" class="owl-carousel owl-theme center-owl-nav">
<!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/nl/mobdro-alternatives">
<img src="https://techcodeview.com/img/alternatives/38/mobdro-alternatives.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Mobdro-alternatieven" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/nl/mobdro-alternatives" class="hover:text-tech-500 transition-colors line-clamp-3">Mobdro-alternatieven </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/nl/decimal-binary-converter">
<img src="https://techcodeview.com/img/math-concepts/43/decimal-binary-converter.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Decimaal naar binair converter" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/nl/decimal-binary-converter" class="hover:text-tech-500 transition-colors line-clamp-3">Decimaal naar binair converter </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/nl/complete-guide-ap-environmental-science-frqs-131838">
<img src="https://techcodeview.com/img/blog/04/complete-guide-ap-environmental-science-frqs.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="De complete gids voor AP Environmental Science FRQ's" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/nl/complete-guide-ap-environmental-science-frqs-131838" class="hover:text-tech-500 transition-colors line-clamp-3">De complete gids voor AP Environmental Science FRQ's </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/nl/bfs-algorithm-java">
<img src="https://techcodeview.com/img/java-tutorial/63/bfs-algorithm-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="BFS-algoritme in Java" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/nl/bfs-algorithm-java" class="hover:text-tech-500 transition-colors line-clamp-3">BFS-algoritme in Java </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/nl/mysql-replace">
<img src="https://techcodeview.com/img/mysql-tutorial/25/mysql-replace.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="MySQL VERVANGEN" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/nl/mysql-replace" class="hover:text-tech-500 transition-colors line-clamp-3">MySQL VERVANGEN </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/nl/virtual-function-c">
<img src="https://techcodeview.com/img/cpp-inheritance/65/virtual-function-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Virtuele functie in C++" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/nl/virtual-function-c" class="hover:text-tech-500 transition-colors line-clamp-3">Virtuele functie in C++ </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/nl/postgresql-drop-column">
<img src="https://techcodeview.com/img/postgresql-tutorial/06/postgresql-drop-column.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="PostgreSQL-kolom neerzetten" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/nl/postgresql-drop-column" class="hover:text-tech-500 transition-colors line-clamp-3">PostgreSQL-kolom neerzetten </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/nl/data-abstraction-and-data-independence">
<img src="https://techcodeview.com/img/dbms/89/data-abstraction-and-data-independence.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Gegevensabstractie en gegevensonafhankelijkheid" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/nl/data-abstraction-and-data-independence" class="hover:text-tech-500 transition-colors line-clamp-3">Gegevensabstractie en gegevensonafhankelijkheid </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/nl/shell-sort-algorithm">
<img src="https://techcodeview.com/img/ds-tutorial/72/shell-sort-algorithm.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Shell-sorteeralgoritme" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/nl/shell-sort-algorithm" class="hover:text-tech-500 transition-colors line-clamp-3">Shell-sorteeralgoritme </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/nl/if-poem-rudyard-kipling-summary-line-line-explanation-english">
<img src="https://techcodeview.com/img/summary/08/if-poem-rudyard-kipling-summary-line-line-explanation-english.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Als gedicht van Rudyard Kipling Samenvatting en regel voor regel uitleg in het Engels" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/nl/if-poem-rudyard-kipling-summary-line-line-explanation-english" class="hover:text-tech-500 transition-colors line-clamp-3">Als gedicht van Rudyard Kipling Samenvatting en regel voor regel uitleg in het Engels </a>
</h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
<!-- Categories -->
<div class="mt-8 mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Categorie </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/nl/blog/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Bloggen
</a> <a href="/nl/java-conversion/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Java-Conversie
</a> <a href="/nl/maths/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Wiskunde
</a> <a href="/nl/java-collections/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Java-Collecties
</a> <a href="/nl/differences/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Verschillen
</a> <a href="/nl/java-string/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Java-Reeks
</a>
</div>
<!-- Interesting Articles Widget -->
<div class="mt-8">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Interessante Artikelen </h2>
</div>
<div id="owl-carousel-4" class="owl-carousel owl-theme">
<!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/blog/10/what-is-personal-statement.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Wat is een persoonlijke verklaring? Alles wat u moet weten over het college-essay" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/nl/blog/">Bloggen </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/nl/what-is-personal-statement-1311244">Wat is een persoonlijke verklaring? Alles wat u moet weten over het college-essay </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/misc/37/happy-number.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Gelukkig nummer" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/nl/misc/">Diversen </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/nl/happy-number">Gelukkig nummer </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/blog/45/good-sat-scores-ivy-league-plus-edition.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Goede SAT-scores: Ivy League Plus Edition" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/nl/blog/">Bloggen </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/nl/good-sat-scores-ivy-league-plus-edition-1311530">Goede SAT-scores: Ivy League Plus Edition </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/java/97/generating-password-and-otp-in-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Wachtwoord en OTP genereren in Java" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/nl/java/">Java </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/nl/generating-password-and-otp-in-java">Wachtwoord en OTP genereren in Java </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/layout-manager/52/borderlayout.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="BorderLayout (LayoutManagers)" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/nl/layout-manager/">Lay-Outbeheerder </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/nl/borderlayout">BorderLayout (LayoutManagers) </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/linux-tutorial/65/linux-process-memory-usage.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Linux-procesgeheugengebruik" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/nl/linux-tutorial/">Linux-Zelfstudie </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/nl/linux-process-memory-usage">Linux-procesgeheugengebruik </a> </h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
</div>
</div>
</div>
<!-- /Aside Column --> </div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<span class="footer-links">
Copyright ©2026 Alle Rechten Voorbehouden |
<a href="//www.techcodeview.com/ja/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Vrijwaring </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Wie Zijn Wij? </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Privacybeleid </a>
</span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"> </script>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed; bottom: 25px; right: 25px; z-index: 9999; opacity: 0; visibility: hidden; background-color: #0ea5e9; color: white; border: none; border-radius: 8px; width: 50px; height: 50px; font-size: 24px; cursor: pointer; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover { background-color: #0284c7; }
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>
|
