XHTML ou Langage de balisage hypertexte extensible est un mélange de HTML et XML, très similaire à HTML mais plus strict. C’est comme un livre de règles pour créer des pages Web que les navigateurs comprennent facilement. Contrairement au HTML, vous devez être prudent et suivre exactement les règles. La plupart des navigateurs le prennent en charge. Considérez-le simplement comme une manière plus précise d’écrire du code Web.
Table des matières
Histoire
Il a été développé par le World Wide Web Consortium (W3C) et aide les développeurs Web à passer du HTML au XML. Avec XHTML, les développeurs peuvent entrer dans le monde XML avec toutes ses fonctionnalités tout en garantissant la compatibilité ascendante et future du contenu. La famille XHTML comprend trois types de documents ; le premier est XHTML 1.0, recommandé par le W3C le 26 janvier 2000. Le second est XHTML 1.1, recommandé par le W3C le 31 mai 2001.
Le troisième est XHTML5, un standard utilisé pour développer une adaptation XML de la spécification HTML5. Un document XHTML doit avoir une déclaration XHTML.
Éléments de XHTML :
| Élément XHTML | Description |
> | Utilisé pour déclarer la définition de type de document (DTD), spécifiant les règles du langage de balisage, garantissant un rendu correct dans les navigateurs. |
> | Entoure l'intégralité du document HTML ou XHTML, servant d'élément racine. |
> | Contient des méta-informations sur le document, telles que le titre, le jeu de caractères, les feuilles de style liées et d'autres éléments essentiels. |
> | Imbriqué dans la section d'en-tête, spécifie le titre du document, affiché dans la barre de titre ou l'onglet du navigateur. |
> | Entoure le contenu de la page Web, y compris le texte, les images, les liens et autres éléments HTML. Il représente la partie visible du document affiché dans le navigateur. |
Lors de la création d'une page Web XHTML, il est nécessaire d'inclure une déclaration DTD (Document Type Definition). Il existe trois types de DTD qui sont décrits ci-dessous :
DTD de transition :
Il est pris en charge par les anciens navigateurs qui ne disposent pas de prise en charge intégrée des feuilles de style en cascade. Plusieurs attributs sont inclus dans la balise body et ne sont pas autorisés dans une DTD stricte.
Syntaxe:
PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'DTD/xhtml1-transitional.dtd'>
Exemple: Dans cet exemple nous verrons le code pour écrire un document XHTML avec un exemple.
HTML
xml version='1.0' encoding='UTF-8'?> Titre XHTML DTD transitionnel> tête> <body bgcolor='#dae1ed'> <div>font-weight: gras; texte-align: center; margin-bottom:-25px;'>techcodeview.comdiv> <p style='text-align:center;font-size:20px;'>Un portail informatique <p style='text-align:center;font-size:20px;'>Possibilité de choisir le mois : <select name='month'> <option selected='selected'>Option janvier> <option>Option février> <option>Option mars> <option>Option avril> <option>Option mai> <option>Option juin> <option>Option juillet> <option>Option Augusy> <option>Option septembre> <option>Option octobre> <option>Option novembre> <option>Option décembre> select> 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>Sortir: </strong> </b> </p> <p> <img src='//techcodeview.com/img/html-xml/79/xhtml-introduction.webp' alt='transitionnel dtd xhtml'> <span> </span> </p> <h2 id='strict-dtd'> <b> <strong>DTD stricte : </strong> </b> <span> </span> </h2> <p dir='ltr'> <span>La DTD stricte est utilisée lorsque la page XHTML contient uniquement un langage de balisage. La DTD stricte est utilisée avec les feuilles de style en cascade, car cet attribut n'autorise pas la propriété CSS dans la balise body. </span> </p> <h3> <b> <strong>Syntaxe: </strong> </b> </h3> <pre> PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'DTD/xhtml1-strict.dtd'> </pre> <p dir='ltr'> <b> <strong>Exemple 2 : </strong> </b> <span>Dans cet exemple nous verrons le code pour écrire un document XHTML avec un exemple de DTD stricte. </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>Titre XHTML DTD strict> tête> <body> <div>font-weight: gras; texte-align: center; margin-bottom:-25px;'>techcodeview.comdiv> <p style='text-align:center;font-size:20px;'>Un portail informatique <p style='text-align:center;font-size:20px;'>Possibilité de choisir le mois : <select name='month'> <option selected='selected'>Option janvier> <option>Option février> <option>Option mars> <option>Option avril> <option>Option mai> <option>Option juin> <option>Option juillet> <option>Option Augusy> <option>Option septembre> <option>Option octobre> <option>Option novembre> <option>Option décembre> select> 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>Sortir: </strong> </b> </p> <p> <span> </span> <img src='//techcodeview.com/img/html-xml/79/xhtml-introduction-2.webp' alt='dtd strict xhtml'> <span> </span> </p> <h2 id='frameset-dtd'> <b> <strong>DTD du jeu de cadres : </strong> </b> <span> </span> </h2> <p dir='ltr'> <span>La DTD frameset est utilisée lorsque la page XHTML contient des frames. Cette DTD est identique à la DTD transitionnelle HTML 4.01, à l'exception du modèle de contenu de l'élément HTML. </span> </p> <h3> <b> <strong>Syntaxe: </strong> </b> </h3> <pre> PUBLIC '-//W3C//DTD XHTML 1.0 Frameset//EN' 'DTD/xhtml1-frameset.dtd'> </pre> <p dir='ltr'> <b> <strong>Exemple 2 : </strong> </b> <span>Dans cet exemple, nous verrons le code pour écrire un document XHTML avec un exemple de DTD frameset. </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 XHTMLtitre> tête> <frameset cols='30%, 20%, *'> <frameset rows='40%, 30%, *'> <frame src='gfg.html' /> <frame src='gfg1.html' /> <frame src='geeks.html' />jeu de cadres> <frameset rows='40%, 60%'> <frame src='g4g.html' /> <frame src='g4g1.html' />jeu de cadres> <frameset rows='20%, 20%, 30%, *'> <frame src='geeksforgeeks.html' /> <frame src='geeksforgeeks1.html' /> <frame src='geeksforgeeks2.html' /> <frame src='geeksforgeeks3.html' />jeu de cadres> jeu de cadres> 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>Sortir: </strong> </b> </p> <h2 id='why-use-xhtml'> <img src='//techcodeview.com/img/html-xml/79/xhtml-introduction-3.webp' alt='jeu de cadres dtd xhtml'> <b> <strong>Pourquoi utiliser XHTML ? </strong> </b> </h2> <ul> <li value='1'> <span>Les documents XHTML sont validés avec des outils XML standards. </span> </li> <li value='2'> <span>Il est facile de maintenir, convertir, modifier un document à long terme. </span> </li> <li value='3'> <span>Il est utilisé pour définir le standard de qualité des pages Web. </span> </li> <li value='4'> <span>XHTML est un standard officiel du W3C, votre site Web devient plus compatible et plus précis avec de nombreux navigateurs. </span> </li> </ul> <h2 id='benefits-of-xhtml'> <b> <strong>Avantages du XHTML : </strong> </b> </h2> <ul> <li value='1'> <span>Toutes les balises XHTML doivent avoir des balises de fermeture et sont correctement imbriquées. Cela génère un code plus propre. </span> </li> <li value='2'> <span>Les documents XHTML sont légers, ce qui signifie qu'ils utilisent moins de bande passante. Cela réduit les coûts, en particulier si votre site Web comporte des milliers de pages. </span> </li> <li value='3'> <span>Les documents XHTML sont bien formatés et peuvent facilement être transportés vers des appareils sans fil, des lecteurs braille et d'autres environnements Web spécialisés. </span> </li> <li value='4'> <span>Tous les nouveaux développements seront en XML (dont XHTML est une application). </span> </li> <li value='5'> <span>XHTML fonctionne en association avec CSS pour créer des pages Web qui peuvent facilement être mises à jour. </span> </li> </ul> <h2 id='difference-between-html-and-xhtml'> <b> <strong>Différence entre HTML et 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 ou HyperText Markup Language est le principal langage de balisage pour la création de pages Web. </span> </td> <td> <span>XHTML (Extensible HyperText Markup Language) est une famille de langages de balisage XML qui reflètent ou étendent les versions du langage HTML (Hypertext Markup Language) largement utilisé. </span> </td> </tr> <tr> <td> <span>Cadre flexible nécessitant un analyseur spécifique au HTML indulgent </span> </td> <td> <span>Sous-ensemble restrictif de XML qui doit être analysé avec des analyseurs XML standard </span> </td> </tr> <tr> <td> <span>Proposé par Tim Berners-Lee en 1987 </span> </td> <td> <span>Recommandation du Consortium World Wide Web en 2000. </span> </td> </tr> <tr> <td> <span>Application du langage de balisage standard généralisé (SGML). </span> </td> <td> <span>Application de XML </span> </td> </tr> <tr> <td> <span>Étendu à partir de SGML. </span> </td> <td> <span>Étendu à partir de 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>
Partager </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Présentation du XHTML&url=https://www.techcodeview.com/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/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/xhtml-introduction&title=Présentation du XHTML"
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">
Vous Pourriez Aimer </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/routing-information-protocol" 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/computer-networks-network-layer/85/routing-information-protocol.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Protocole d'informations de routage (RIP)" 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="/routing-information-protocol">Protocole d'informations de routage (RIP) </a>
</h4>
</div> <div class="group">
<a href="/basic-shell-commands-linux" 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/it-problems-solutions/49/basic-shell-commands-linux.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Commandes Shell de base sous Linux" 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="/basic-shell-commands-linux">Commandes Shell de base sous Linux </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 Articles </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="/carmichael-numbers">
<img src="https://techcodeview.com/img/misc/20/carmichael-numbers.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Numéros de Carmichael" 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="/carmichael-numbers" class="hover:text-tech-500 transition-colors line-clamp-3">Numéros de Carmichael </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="/jsp-tutorial">
<img src="https://techcodeview.com/img/jsp-tutorial/87/jsp-tutorial.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Tutoriel JSP" 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="/jsp-tutorial" class="hover:text-tech-500 transition-colors line-clamp-3">Tutoriel JSP </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="/difference-between-android">
<img src="https://techcodeview.com/img/operating-system/47/difference-between-android.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Différence entre les systèmes d'exploitation Android et Windows" 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="/difference-between-android" class="hover:text-tech-500 transition-colors line-clamp-3">Différence entre les systèmes d'exploitation Android et Windows </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="/good-sat-scores-ivy-league-plus-edition-1311530">
<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="Bons scores SAT : édition Ivy League Plus" 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="/good-sat-scores-ivy-league-plus-edition-1311530" class="hover:text-tech-500 transition-colors line-clamp-3">Bons scores SAT : édition Ivy League Plus </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="/minimum-cost-path-with-left-right-bottom-and-up-moves-allowed">
<img src="https://techcodeview.com/img/graph/02/minimum-cost-path-with-left-right-bottom-and-up-moves-allowed.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Chemin à coût minimum avec mouvements à gauche, à droite, en bas et en haut autorisé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="/minimum-cost-path-with-left-right-bottom-and-up-moves-allowed" class="hover:text-tech-500 transition-colors line-clamp-3">Chemin à coût minimum avec mouvements à gauche, à droite, en bas et en haut autorisé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="/difference-between-protein">
<img src="https://techcodeview.com/img/differences/31/difference-between-protein.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Différence entre les protéines et les graisses" 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="/difference-between-protein" class="hover:text-tech-500 transition-colors line-clamp-3">Différence entre les protéines et les graisses </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="/what-is-parent-brag-sheet-1311370">
<img src="https://techcodeview.com/img/blog/81/what-is-parent-brag-sheet.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Qu'est-ce qu'une feuille de vantardise pour les parents ? Conseils et exemples" 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="/what-is-parent-brag-sheet-1311370" class="hover:text-tech-500 transition-colors line-clamp-3">Qu'est-ce qu'une feuille de vantardise pour les parents ? Conseils et exemples </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="/advantages-disadvantages-speakers">
<img src="https://techcodeview.com/img/blog/04/advantages-disadvantages-speakers.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Avantages et inconvénients des haut-parleurs" 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="/advantages-disadvantages-speakers" class="hover:text-tech-500 transition-colors line-clamp-3">Avantages et inconvénients des haut-parleurs </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="/dijkstra-algorithm-java">
<img src="https://techcodeview.com/img/java-tutorial/65/dijkstra-algorithm-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Algorithme Java de Dijkstra" 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="/dijkstra-algorithm-java" class="hover:text-tech-500 transition-colors line-clamp-3">Algorithme Java de Dijkstra </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="/bash-scripting-array">
<img src="https://techcodeview.com/img/bash-script/60/bash-scripting-array.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Script Bash – Tableau" 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="/bash-scripting-array" class="hover:text-tech-500 transition-colors line-clamp-3">Script Bash – Tableau </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">Catégorie </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/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">
Blog
</a> <a href="/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">
Conversion Java
</a> <a href="/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">
Mathématiques
</a> <a href="/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">
Collections Java
</a> <a href="/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">
Différences
</a> <a href="/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">
Chaîne Java
</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">Des Articles Intéressants </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/71/12-best-fashion-schools-us.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Les 12 meilleures écoles de mode aux États-Unis" 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="/blog/">Blog </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/12-best-fashion-schools-us-1311438">Les 12 meilleures écoles de mode aux États-Unis </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/it-problems-solutions/89/how-use-bootstrap-with-react.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comment utiliser Bootstrap avec React ?" 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="/it-problems-solutions/">Problèmes Informatiques Et Solutions </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/how-use-bootstrap-with-react">Comment utiliser Bootstrap avec React ? </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/30/18-top-scholarships.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="18 meilleures bourses pour les lycéens" 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="/blog/">Blog </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/18-top-scholarships-1311564">18 meilleures bourses pour les lycéens </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/58/how-is-sat-scored.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comment le SAT est-il noté ? Tableaux de notation" 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="/blog/">Blog </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/how-is-sat-scored-131618">Comment le SAT est-il noté ? Tableaux de notation </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/basic-coding-problems/31/program-tower-hanoi-algorithm.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Programme pour l'algorithme de la Tour de Hanoi" 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="/basic-coding-problems/">Problèmes De Codage De Base </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/program-tower-hanoi-algorithm">Programme pour l'algorithme de la Tour de Hanoi </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/dbms-tutorial/19/types-relationship-dbms.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Types de relations dans le SGBD" 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="/dbms-tutorial/">Tutoriel Sgbd </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/types-relationship-dbms">Types de relations dans le SGBD </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 Tous Les Droits Sont Réservés |
<a href="//www.techcodeview.com/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Clause De Non-Responsabilité </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">A Propos De Nous </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politique De Confidentialité </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>
|
