Cet article est destiné au apprentis-sorciers qui maîtrisent les rudiments des langages HTML et CSS.
1. Créer un fichier HTML avec les éléments de base
Le code suivant, est pour moi le code minimum que doit contenir une page web.
- Ligne 1 : Le doctype qui précise le langage utilisé, ici la dernière version HTML.
- Ligne 2 : La balise racine de tous documents web <html>.
Ne pas oublier de préciser la langue de la page avec l’attribut lang. - Ligne 5 : Encodage des caractères de la page.
- Ligne 7 : Le viewport. Il est indispensable pour que votre page s’affiche correctement sur les petits terminaux (tablettes, mobiles, … ).
Ne l’oubliez pas !
Pour en savoir plus : https://www.alsacreations.com/article/lire/1490-Comprendre-le-Viewport-dans-le-Web-mobile.html - Ligne 9 : Le titre de votre page, très important pour le référencement et vos visiteurs. Il faut bien le choisir, il doit décrire en quelque mot le contenu ou la fonctionnalité principale de votre page. Attention de votre page pas de votre site !!!
- Ligne 11 : L’auteur de la page.
- Ligne 13 : Une brève description de la page, utile pour y placer des mots-clés qui seront parcours par les moteurs de recherche.
- Ligne 16 : Le titre principal de votre page… Il ne peut y en avoir qu’un et comme pour le titre de votre page <title> il doit rapidement et efficacement décrie le contenu ou la fonctionnalité principale de votre page.
2. Ajouter un reset CSS
Un reset CSS va redéfinir le style de toutes les balises HTML et assure ainsi un affichage identique de votre page sur tous les navigateurs du marché.
Il existe plusieurs reset CSS, personnellement j’utilise Normalise CSS :
Vous pouvez télécharger le ficher CSS pour l’ajouter à votre projet ou le récupérer en ligne via un CDN.
Ci-après, à la ligne 15, le code pour ajouter normalize.css à votre à votre page via le CDN cloudflare.com.
Autres reset CSS :
3. Ajouter votre propre CSS de base
Après avoir appliqué un reset CSS à notre page, il faut y ajouter ses propres styles.
Créer votre feuille de style de base :
- Créer un dossier css/
- Dans ce dossier css/, créer un fichier main.css
- Lier votre fichier main.css à votre page HTML, voir ligne 17 du code ci-après.
Ajouter les styles de base à votre main.css
Le code CSS ci-dessous définit les styles de base pour toutes pages HTML qui se respecte ✋ .
Vous pouvez copier-coller le code ci-après dans votre fichier main.css.
- Lignes 1 à 3 : Définir la méthode de calcul à utiliser pour la hauteur et largeur des éléments HTML : https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing.
- Lignes 5–12 : Style de base du site : police (famille, épaisseur, taille, couleur), hauteur de ligne et couleur de fond, …
- Lignes 14–18 : Pour éviter tous problèmes de débordement des images ou d’images mal proportionnées.
- Lignes 20 à 23 : Définir le style de bases de liens
- Lignes 25 à 27 : Le style des liens survolés
4. Créer les icônes de votre site
Quand l’on crée un site web, une page web, il est recommandé de lui associer une icône, communément appelée favicon.
Cette favicon sera visible :
- À gauche de la barre d’adresse du navigateur
- Comme icône dans la liste des favoris
- Comme icône de raccourci sur le bureau des ordinateurs ou des smartphones de vos visiteurs.
La dimension des favicon n’est pas la même pour tous les terminaux, il faudra donc la créer dans différentes tailles.
Si vous possédez déjà une icône de site au format .ico, rien de plus simple il suffit d’ajouter ce code dans le <head> :
<link rel=”icon” href=”favicon.ico”/>
Afin de se faciliter la vie, je vous recommande d’utiliser un des services suivant pour générer les icônes et le code HTML des favicon :
À la fin du processus, vous obtiendrez un fichier compressé contenant toutes les icônes nécessaires et un code à ajouter à l’entête de votre site.
Il faudra ensuite copier toutes les icônes à la racine de votre site puis y ajouter le code généré dans l’entête de vos pages comme présenté aux lignes 19 à 24, de l’exemple ci-après.
5. Créer la structure de base d’une page
Généralement on peut découper une page web en trois grandes parties :
- Entête <header> lignes 27 à 43 du code ci-après
Contient le logo (ligne 26) et le menu de navigation (lignes 30 à 42) - Contenu principal <main> lignes 44 à 47
Contient le titre principal de la page et les autres contenus (paragraphes, images, vidéos, sous-titres, tableaux, listes, … ) - Pied de page <footer> lignes 48 à 50
On y retrouve le nom de l’auteur, des informations de contact (tel, email, réseaux sociaux, … ), un copyright et un menu de navigation.
Le code ci-dessous intègre ces différentes parties :
Il existe d’autres éléments HTML que vous pouvez ajouter à votre page pour encore mieux la découper :
- <aside> partie d’un document dont le contenu n’a qu’un rapport indirect avec le contenu principal. Par exemple, une citation d’Homer Simpson sur une page qui parle du “Reour du Jedi”, rien à voir.
- <section> un groupe de contenu thématique, commence généralement avec un titre de niveau 2 ou 3.
- <article> : représente du contenu autonome dans un document. Ceci peut être un message sur un forum, un article de journal ou de magazine, une parution sur un blog, un commentaire d’utilisateur, un widget ou gadget interactif, ou tout autre élément de contenu indépendant.
J’espère que cet article vous a permis de comprendre les rudiments d’une page web de base bien construite.
N’hésitez pas à me faire part de vos remarques et questionnements en commentant cet article.
