Notre permier template HTML
Article publié le Mercredi 04 mars 2026 , lu 46 fois
Intro
Afin de pouvoir expérimenter, j'ai créé un site web ou les différentes phases de ce projet seront présentes.
realisation_d_un_site_web.jpg
Architecture
Le "squellette" HTML est le même que celui de l'introduction avec quelques lignes supplémentaires :
- Un favicon pour le site, icone du site dans la barre /onglet du navigateur.
- 3 ajouts CSS pour "bootstrap" et "font awesome". Ces fichiers sont stockés sur un CDN et on aura donc plus à s'en soucier.
- 2 ajous JS pour "bootstrap" et "jquery". Ces fichiers sont aussi sur CDN.
Page d'accueil
Cette dernière sera la nomenclature des différentes phases du projet. Elle comportera des liens vers chaques étapes de ce dernier.
Remarques
Ce template permet de voir les bases utilisées pour HTML et CSS.
HTML
On en a déja fait le tour... Question a éventuellement poser sur la page Facebook. Dans les commentaire de l'article suivant :
CSS
Par rapport au premier template, j'ai ajouté des CSS de base au squelette.
body {
background:#b2cdd5;
padding: 20px;
}
h1{
color:#38788c;
font-size: 2.2rem;
}
p{
margin: 20px 0 50px 75px;
}
a{
margin-left: 90px;
}
- body : C'est le corps du template, ici on change la couleur de fond background) et on lui ajoute une marge intérieur (padding)
- h1 : C'est le titre le plus haut de la hiérarchie des titres (h1, h2, h3, h4, h5, et h6). Ici on lui donne une couleur (color) et on redéfini sa taill (font-size). A savoir, les balises de titre on une taille par defaut, pour h1 c'est "2.5rem".
- p : C'est un paragraphe de texte, ici on définit ses marges extérieur (margin: haute, droite, basse, gauche)
- a : c'est le lien hypertexte, ici on le décale juste par rapport à sa gauche (margin:left).
Pour info : la ligne horizontale est une balises "hr".
Vous avez sur le site de MDN des ressources pour les developpeurs (html, css et js).