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="/random-function-c" 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/c-tutorial/77/random-function-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Fonction aléatoire en C" 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="/random-function-c">Fonction aléatoire en C </a>
</h4>
</div> <div class="group">
<a href="/pell-number" 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/dsa/35/pell-number.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Numéro de téléphone" 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="/pell-number">Numéro de téléphone </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="/how-write-text-file-using-python">
<img src="https://techcodeview.com/img/python-tutorial/03/how-write-text-file-using-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comment écrire dans un fichier texte en utilisant Python ?" 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="/how-write-text-file-using-python" class="hover:text-tech-500 transition-colors line-clamp-3">Comment écrire dans un fichier texte en utilisant Python ? </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="/delete-directory-file-using-python">
<img src="https://techcodeview.com/img/python-file-handling-programs/71/delete-directory-file-using-python.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Supprimer un répertoire ou un fichier à l'aide de Python" 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="/delete-directory-file-using-python" class="hover:text-tech-500 transition-colors line-clamp-3">Supprimer un répertoire ou un fichier à l'aide de Python </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="/kali-linux-terminal">
<img src="https://techcodeview.com/img/kali-linux-tutorial/95/kali-linux-terminal.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Kali Linux-Terminal" 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="/kali-linux-terminal" class="hover:text-tech-500 transition-colors line-clamp-3">Kali Linux-Terminal </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="/von-neumann-model">
<img src="https://techcodeview.com/img/coa-tutorial/46/von-neumann-model.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Modèle Von Neumann" 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="/von-neumann-model" class="hover:text-tech-500 transition-colors line-clamp-3">Modèle Von Neumann </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="/10-best-graphing-calculators-physical-1311336">
<img src="https://techcodeview.com/img/blog/48/10-best-graphing-calculators-physical.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Les 10 meilleures calculatrices graphiques (physiques et en ligne)" 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="/10-best-graphing-calculators-physical-1311336" class="hover:text-tech-500 transition-colors line-clamp-3">Les 10 meilleures calculatrices graphiques (physiques et en ligne) </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="/tree-data-structure">
<img src="https://techcodeview.com/img/ds-tutorial/57/tree-data-structure.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Structure des données arborescentes" 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="/tree-data-structure" class="hover:text-tech-500 transition-colors line-clamp-3">Structure des données arborescentes </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="/javascript-void">
<img src="https://techcodeview.com/img/javascript-tutorial/08/javascript-void.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="JavaScript:vide(0)" 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="/javascript-void" class="hover:text-tech-500 transition-colors line-clamp-3">JavaScript:vide(0) </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="/2-easy-tips-remember-reoccurring-vs-recurring-131248">
<img src="https://techcodeview.com/img/blog/85/2-easy-tips-remember-reoccurring-vs-recurring.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="2 conseils simples pour se souvenir des éléments récurrents et récurrents" 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="/2-easy-tips-remember-reoccurring-vs-recurring-131248" class="hover:text-tech-500 transition-colors line-clamp-3">2 conseils simples pour se souvenir des éléments récurrents et récurrents </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="/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="Le guide complet des FRQ AP Environmental Science" 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="/complete-guide-ap-environmental-science-frqs-131838" class="hover:text-tech-500 transition-colors line-clamp-3">Le guide complet des FRQ AP Environmental Science </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="/when-should-i-ask-college-recommendation-letter-1311380">
<img src="https://techcodeview.com/img/blog/87/when-should-i-ask-college-recommendation-letter.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Quand dois-je demander une lettre de recommandation d’un collège ?" 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="/when-should-i-ask-college-recommendation-letter-1311380" class="hover:text-tech-500 transition-colors line-clamp-3">Quand dois-je demander une lettre de recommandation d’un collège ? </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/html-tutorial/25/how-add-line-html.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Comment ajouter une ligne en HTML" 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="/html-tutorial/">Tutoriel Html </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/how-add-line-html">Comment ajouter une ligne en HTML </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/55/check-if-given-string-can-be-split-into-four-distinct-strings.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Vérifiez si une chaîne donnée peut être divisée en quatre chaînes distinctes" 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="/misc/">Divers </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/check-if-given-string-can-be-split-into-four-distinct-strings">Vérifiez si une chaîne donnée peut être divisée en quatre chaînes distinctes </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/sql-tutorial/44/types-sql-join.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Types de JOINTURE SQL" 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="/sql-tutorial/">Tutoriel Sql </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/types-sql-join">Types de JOINTURE SQL </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-object-class/64/super-keyword-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Super mot-clé en 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="/java-object-class/">Classe D'objet Java </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/super-keyword-java">Super mot-clé en 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/java-util-package/43/stream-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Flux en 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="/java-util-package/">Java - Paquet Utilitaire </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/stream-java">Flux en 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/python-library/99/print-colors-python-terminal.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Imprimer les couleurs dans le terminal Python" 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="/python-library/">Bibliothèque Python </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/print-colors-python-terminal">Imprimer les couleurs dans le terminal Python </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/sv/">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>
|
