Template HTML basique - Mes templates HTML : Partie 1
Pour démarrer mes projets HTML rapidement, j'aime me baser sur des modèles que j'ai préparés à l'avance. Cette première partie présente le modèle HTML le plus simple, qui me sert de base pour les suivants.
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