Mes templates HTML
Pour démarrer rapidement mes petits projets HTML, j'aime me baser sur des modèles que j'ai préparés à l'avance.
Template HTML basique
Le modèle HTML de base que j'utilise se compose simplement de trois fichiers (1 HTML, 1 JavaScript et 1 CSS), reliés les uns aux autres. Il affiche un test rapide permettant de confirmer que l'ensemble fonctionne correctement.
Fichier : index.html (html)1<!DOCTYPE html> 2<html lang="fr"> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 <title>Template HTML</title> 7 <link rel="stylesheet" href="./styles/main.css" /> 8 <style> 9 #cssInlineTest { 10 font-size: 0; 11 } 12 #cssInlineTest::after { 13 content: 'OK'; 14 font-size: initial; 15 color: green; 16 } 17 </style> 18 </head> 19 <body> 20 <h1>Mon template HTML</h1> 21 <p>Tests :</p> 22 <ul> 23 <li>HTML : <span style="color: green;">OK</span></li> 24 <li>CSS en ligne : <span id="cssInlineTest">KO</span></li> 25 <li>CSS : <span id="cssTest">KO</span></li> 26 <li>JavaScript en ligne : <span id="jsInlineTest">KO</span></li> 27 <li>JavaScript : <span id="jsTest">KO</span></li> 28 </ul> 29 30 <script> 31 { 32 const testContainer = document.getElementById('jsInlineTest'); 33 testContainer.innerText = 'OK'; 34 testContainer.style.color = 'green'; 35 } 36 </script> 37 <script src="./scripts/page.js"></script> 38 </body> 39</html>
― Valentin LORTET