Validation des Éléments Web — Standardisée

<!DOCTYPE html> <html lang="fr" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="theme-color" content="#0d1b2a"> <meta name="author" content="sync" /> <title>Validation des Éléments Web — Standardisée</title> <style type="text/css"> :root{ --bg-1:#0b1020; --bg-2:#071227; --card-bg:#ffffff; --muted:#777; --accent:#1a73e8; --radius:12px; --max-width:1000px; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; padding:40px 16px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; background: radial-gradient(1200px 600px at 10% 10%,rgba(58,35,98,0.22) 0%,transparent 18%), radial-gradient(900px 500px at 90% 80%,rgba(13,88,144,0.18) 0%,transparent 18%), linear-gradient(180deg,var(--bg-1) 0%,var(--bg-2) 100%); color:#222; -webkit-font-smoothing:antialiased; } .skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; } .skip-link:focus{ left:16px; top:16px; padding:8px 12px; background:#fff; color:#000; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,0.2); z-index:9999; } main.validation-container{ width:95%; max-width:var(--max-width); margin:0 auto; background:var(--card-bg); padding:28px; border-radius:var(--radius); box-shadow:0 10px 30px rgba(2,6,23,0.45); color:#111; } h1{ margin:0 0 14px 0; text-align:center; font-size:1.9rem; color:#0b2540; } .header-meta{ text-align:center; font-size:0.92rem; color:var(--muted); margin-bottom:22px; } section{margin-top:28px} h2{ margin:0 0 12px 0; font-size:1.25rem; display:flex; align-items:center; justify-content:center; color:var(--accent); border-bottom:2px solid #eef3ff; padding-bottom:10px; } .table-wrap{ overflow-x:auto; border-radius:8px; padding:6px; background:linear-gradient(180deg,rgba(250,250,255,0.6),rgba(250,250,255,0.4)); } .validation-table{ width:100%; border-collapse:collapse; min-width:640px; margin-bottom:18px; } .validation-table th, .validation-table td{ padding:12px 14px; border:1px solid #eef2f6; text-align:left; font-size:0.96rem; } .validation-table th{ background:#f7f9fd; color:#2d3b55; font-weight:600; } .validation-table tr:nth-child(even){ background:#fbfdff; } .check{color:#008744;font-weight:700} .cross{color:#d62d20;font-weight:700} .warn{color:#b97700;font-weight:700} .spinner{ border:4px solid #f3f3f3; border-top:4px solid var(--accent); border-radius:50%; width:16px;height:16px; animation:spin 1s linear infinite; display:inline-block; vertical-align:middle; margin-right:8px; } @keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){ .spinner{animation:none} } .loading-text{ color:var(--accent); font-weight:700; font-size:0.96rem; display:inline-block; vertical-align:middle; } @media (max-width:720px){ body{padding:20px 10px} h2{font-size:1.06rem} .validation-table th, .validation-table td{padding:10px} .validation-table{min-width:520px} } footer{ text-align:center; margin:18px auto 0 auto; color:var(--muted); font-size:0.9rem; max-width:var(--max-width); } </style> </head> <body> <a href="#maincontent" class="skip-link">Aller au contenu</a> <main id="maincontent" class="validation-container" role="main" aria-labelledby="page-title"> <h1 id="page-title">Documentation des Standards du Code</h1> <p class="header-meta">Page optimisée : centrage parfait • compatible PC, Android et iOS • accessible (A11Y)</p>  <section aria-labelledby="s1"> <h2 id="s1">1. Support des Types de Fichiers Standards (MIME Types et Support Serveur)</h2> <div class="table-wrap"> <table class="validation-table"> <thead> <tr> <th>Type de Fichier</th> <th>Extensions</th> <th>Nécessaire ?</th> <th>Supporté</th> </tr> </thead> <tbody> <tr><td>Page Web</td><td>.html, .htm</td><td>Oui</td><td><span class="check">Oui</span></td></tr> <tr><td>CSS</td><td>.css</td><td>Oui</td><td><span class="check">Oui</span></td></tr> <tr><td>JavaScript</td><td>.js</td><td>Oui</td><td><span class="check">Oui</span></td></tr> <tr><td>JPEG</td><td>.jpg, .jpeg</td><td>Oui</td><td><span class="check">Oui</span></td></tr> <tr><td>PNG</td><td>.png</td><td>Oui</td><td><span class="check">Oui</span></td></tr> <tr> <td>GIF</td><td>.gif</td><td>Non</td> <td><span id="test_gif_result"><span class="spinner"></span><span class="loading-text">Chargement...</span></span></td> </tr> <tr><td>WebP</td><td>.webp</td><td>Non</td><td><span class="check">Oui (Recommandé)</span></td></tr> <tr><td>JSON</td><td>.json</td><td>Oui (API)</td><td><span class="check">Oui</span></td></tr> </tbody> </table> </div> <h2 id="s1-1">1.1 Audit Côté Serveur (Format Question / Réponse)</h2> <p style="margin-top:-10px;font-size:0.95rem;color:#0b2540;"><b>Créer <code>test_php.php</code> et <code>test_gif.txt</code> à la racine pour les tests.</b></p> <div class="table-wrap"> <table class="validation-table"> <thead> <tr> <th>Capacité Serveur</th> <th>Résultat</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td><b>PHP (Activation)</b></td> <td><span id="test_php_result"><span class="spinner"></span><span class="loading-text">Chargement...</span></span></td> <td>Si échec → module PHP inactif ou fichier manquant.</td> </tr> <tr> <td>Node.js / Python</td> <td><span class="warn">⚠️ Nécessite plan dédié</span></td> <td>Consulter votre hébergement.</td> </tr> <tr> <td>Limite mémoire PHP</td> <td><span class="warn">Non testable</span></td> <td>Vérifier <code>phpinfo()</code>.</td> </tr> <tr> <td>max_execution_time</td> <td><span class="warn">Non testable</span></td> <td>Réglage manuel.</td> </tr> </tbody> </table> </div> </section>  <section aria-labelledby="s2"> <h2 id="s2">2. Validation des Balises et Attributs HTML/JS</h2> <div class="table-wrap"> <table class="validation-table"> <thead> <tr> <th>Élément</th> <th>Description</th> <th>Conformité</th> <th>Note</th> </tr> </thead> <tbody> <tr><td><!DOCTYPE html></td><td>Déclaration</td><td><span class="check">Valide</span></td><td>Essentiel</td></tr> <tr><td>HTTPS</td><td>Connexion sécurisée</td><td><span class="check">Valide</span></td><td>Critique pour SEO</td></tr> <tr><td>meta viewport</td><td>Responsive</td><td><span class="check">Valide</span></td><td>Indispensable</td></tr> <tr><td><iframe></td><td>Contenu externe</td><td><span class="check">Valide</span></td><td>OK si HTTPS</td></tr> <tr><td>language="javascript"</td><td>Ancien attribut</td><td><span class="cross">Déprécié</span></td><td>Supprimé</td></tr> <tr><td><![CDATA]]></td><td>XHTML only</td><td><span class="cross">Obsolète</span></td><td>Supprimé</td></tr> <tr><td>scrolling="no"</td><td>IFrame</td><td><span class="cross">Obsolète</span></td><td>Utiliser CSS</td></tr> </tbody> </table> </div> </section>  <section aria-labelledby="s3"> <h2 id="s3">3. Compatibilité Mobile et Performance</h2> <div class="table-wrap"> <table class="validation-table"> <thead> <tr> <th>Élément</th> <th>Description</th> <th>Standard</th> <th>Performance</th> </tr> </thead> <tbody> <tr><td>grid-template-columns</td><td>Mise en page</td><td><span class="check">Bon</span></td><td>Flexible</td></tr> <tr><td>minmax()</td><td>Colonnes adaptatives</td><td><span class="check">Bon</span></td><td>Optimal mobile</td></tr> <tr><td>Images RSS</td><td>thumbnail / enclosure</td><td><span class="check">Valide</span></td><td>Compresser + lazy loading</td></tr> <tr><td>CSS inline</td><td>dans une page</td><td><span class="check">OK</span></td><td>Évite une requête</td></tr> </tbody> </table> </div> </section>  <section aria-labelledby="s4"> <h2 id="s4">4. Accessibilité (A11Y)</h2> <div class="table-wrap"> <table class="validation-table"> <thead> <tr> <th>Élément</th> <th>Description</th> <th>Standard</th> <th>Impact</th> </tr> </thead> <tbody> <tr> <td>alt sur <code><img></code></td> <td>Description visuelle</td> <td><span class="check">Présent</span></td> <td>Important pour lecteurs d'écran</td> </tr> <tr> <td>Contraste WCAG</td> <td>Rapport texte / fond</td> <td><span id="wcag_auto_result"><span class="spinner"></span><span class="loading-text">Chargement...</span></td> <td>Calcul automatique</td> </tr> <tr><td>Structure Hn</td><td>Ordre logique</td><td><span class="check">Bon</span></td><td>Navigation claire</td></tr> <tr><td>Focus clavier</td><td>Navigation tab</td><td><span class="check">Implicite</span></td><td>Toutes les balises <code><a></code> sont focusables</td></tr> </tbody> </table> </div> </section>  <section aria-labelledby="s5"> <h2 id="s5">5. Optimisation pour les Moteurs de Recherche (SEO)</h2> <div class="table-wrap"> <table class="validation-table"> <thead> <tr> <th>Élément</th> <th>Description</th> <th>Validation</th> <th>Impact</th> </tr> </thead> <tbody> <tr><td>Chargement JS</td><td>Dépend du moteur</td><td><span class="cross">Variable</span></td><td>Préférer statique</td></tr> <tr><td>Liens externes</td><td>Utilisation simple</td><td><span class="check">Valide</span></td><td>Ajouter rel si nécessaire</td></tr> <tr><td>Balises H2</td><td>Titres de sections</td><td><span class="check">Bon</span></td><td>Structure SEO</td></tr> <tr><td>API externe</td><td>Dépendance vitesse</td><td><span class="cross">Variable</span></td><td>Impact sur chargement</td></tr> </tbody> </table> </div> </section> </main> <footer role="contentinfo"><p>Documentation de standardisation HTML5 et Accessibilité Web<br><a href="https://feuille-heures-angelique.neocities.org/" style="color:inherit;text-decoration:none;">Calculatrice d’heures - Feuille d'heures Angélique (fr)</a></p></footer>  <script type="text/javascript" language="javascript"> document.addEventListener('DOMContentLoaded', () => { const phpResult = document.getElementById('test_php_result'); const gifResult = document.getElementById('test_gif_result'); function updateStatus(element, ok, msgOK, msgFail){ element.className = ok ? "check" : "cross"; element.textContent = (ok ? "✅ " : "❌ ") + (ok ? msgOK : msgFail); } // Test standardisé async function runContentTest(url, expected, element, okMsg, failMsg){ try{ const response = await fetch(url,{cache:'default'}); if(!response.ok) throw new Error(response.status); let data = (await response.text()) .replace(/\uFEFF/g,"") // enlève BOM .replace(/\s+/g,"") // supprime tous espaces .trim(); expected = expected.replace(/\s+/g,"").trim(); updateStatus(element, data === expected, okMsg, failMsg); } catch(e){ updateStatus(element,false,okMsg,failMsg); } } runContentTest('test_php.php','PHP_OK',phpResult,'Actif et Exécuté','PHP inactif ou fichier absent'); runContentTest('test_gif.txt','GIF_OK',gifResult,'Support HTTP OK','Fichier inexistant ou bloqué'); }); </script>  <script type="text/javascript" language="javascript"> function parseRGB(s){ const m = s.match(/\d+/g).map(Number); return {r:m[0],g:m[1],b:m[2]}; } function luminance(r,g,b){ const a=[r,g,b].map(v=>{ v/=255; return v<=0.03928? v/12.92 : Math.pow((v+0.055)/1.055,2.4); }); return 0.2126*a[0]+0.7152*a[1]+0.0722*a[2]; } function contrastRatio(fg,bg){ const L1=luminance(fg.r,fg.g,bg.b); const L2=luminance(bg.r,bg.g,bg.b); return (Math.max(L1,L2)+0.05)/(Math.min(L1,L2)+0.05); } document.addEventListener("DOMContentLoaded",()=>{ const target=document.querySelector("#wcag_auto_result"); const el=document.querySelector("main.validation-container"); if(!el||!target) return; const cs=getComputedStyle(el); const fg=parseRGB(cs.color); const bg=parseRGB(cs.backgroundColor); const ratio=contrastRatio(fg,bg).toFixed(2); if(ratio>=7) target.innerHTML=`<span class="check">🟢 ${ratio} — AAA</span>`; else if(ratio>=4.5) target.innerHTML=`<span class="warn">🟡 ${ratio} — AA</span>`; else target.innerHTML=`<span class="cross">🔴 ${ratio} — Non conforme</span>`; }); </script> </body> </html>

Documentation des Standards du Code

Page optimisée : centrage parfait • compatible PC, Android et iOS • accessible (A11Y)

1. Support des Types de Fichiers Standards (MIME Types et Support Serveur)

Type de Fichier	Extensions	Nécessaire ?	Supporté
Page Web	.html, .htm	Oui	Oui
CSS	.css	Oui	Oui
JavaScript	.js	Oui	Oui
JPEG	.jpg, .jpeg	Oui	Oui
PNG	.png	Oui	Oui
GIF	.gif	Non	Chargement...
WebP	.webp	Non	Oui (Recommandé)
JSON	.json	Oui (API)	Oui

1.1 Audit Côté Serveur (Format Question / Réponse)

Créer test_php.php et test_gif.txt à la racine pour les tests.

Capacité Serveur	Résultat	Action
PHP (Activation)	Chargement...	Si échec → module PHP inactif ou fichier manquant.
Node.js / Python	⚠️ Nécessite plan dédié	Consulter votre hébergement.
Limite mémoire PHP	Non testable	Vérifier `phpinfo()`.
max_execution_time	Non testable	Réglage manuel.

2. Validation des Balises et Attributs HTML/JS

Élément	Description	Conformité	Note
<!DOCTYPE html>	Déclaration	Valide	Essentiel
HTTPS	Connexion sécurisée	Valide	Critique pour SEO
meta viewport	Responsive	Valide	Indispensable
<iframe>	Contenu externe	Valide	OK si HTTPS
language="javascript"	Ancien attribut	Déprécié	Supprimé
	XHTML only	Obsolète	Supprimé
scrolling="no"	IFrame	Obsolète	Utiliser CSS

3. Compatibilité Mobile et Performance

Élément	Description	Standard	Performance
grid-template-columns	Mise en page	Bon	Flexible
minmax()	Colonnes adaptatives	Bon	Optimal mobile
Images RSS	thumbnail / enclosure	Valide	Compresser + lazy loading
CSS inline	dans une page	OK	Évite une requête

4. Accessibilité (A11Y)

Élément	Description	Standard	Impact
alt sur `<img>`	Description visuelle	Présent	Important pour lecteurs d'écran
Contraste WCAG	Rapport texte / fond	Chargement...	Calcul automatique
Structure Hn	Ordre logique	Bon	Navigation claire
Focus clavier	Navigation tab	Implicite	Toutes les balises `<a>` sont focusables

5. Optimisation pour les Moteurs de Recherche (SEO)

Élément	Description	Validation	Impact
Chargement JS	Dépend du moteur	Variable	Préférer statique
Liens externes	Utilisation simple	Valide	Ajouter rel si nécessaire
Balises H2	Titres de sections	Bon	Structure SEO
API externe	Dépendance vitesse	Variable	Impact sur chargement