3. Structure d'une page¶
Nous allons maintenant voir comment créer une page internet valide pour les navigateurs.
Premier élément, le doctype¶
Avant de commencer à coder, il faut préciser au navigateur dans quel langage nous parlons. Il s'agit du doctype (type de document).
Votre première ligne ressemble à ça :
Cette ligne précise que nous parlons ici en HTML. Elle est indispensable pour avoir un affichage correct de son fichier HTML. En effet, c'est grâce à cette balise que le navigateur web traite correctement le fichier. Cette balise n'a pas du tout la même structure que les autres. C'est une exception.
la balise <html>¶
Ensuite, il faut ouvrir une balise <html>. Tout notre code sera compris dans cette balise. Attention ! Il ne peut y avoir qu'une seule balise <html> par page.
L'attribut lang="fr" informe le navigateur que le contenu de la page sera en français.
Les balises <head> et <body>¶
Une page web est coupée en deux grandes sections :
- la balise
<head> - la balise
<body>
La balise <head>¶
Elle sert aux robots et au navigateur. C'est elle qui gère la logistique de la page, et les méta données. Tout ce qui est entré dans cette balise n'est pas visible des internautes. On peut la comparer au moteur d'une voiture.
La balise <body>¶
C'est ici que nous allons entrer notre contenu. Tout ce qui est codé entre ces balises sera visible des internautes. On peut la comparer à l'habitacle d'une voiture.
Voilà donc notre page avec ces deux nouvelles balises :
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- contenu du titre, méta données, styles, etc. ici -->
</head>
<body>
<!-- contenu de la page ici -->
</body>
</html>
la balise <title>¶
L'une des balises les plus importante à mettre dans le <head> est le titre de notre page :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Le titre de ma page web</title>
</head>
<body>
<!-- contenu de la page ici -->
</body>
</html>
Il ne peut y avoir qu'une seule balise <title> par page.
Le charset¶
Le charset permet de savoir dans quel alphabet nous écrivons. Si vous déclarez un mauvais charset, il est possible que les accents ou les caractères spéciaux s'affichent mal. Voilà le charset UTF-8 pour un alphabet Romain, avec nos accents bien Français :
Le voilà entrée dans notre page :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Le titre de ma page web</title>
<meta charset="utf-8">
</head>
<body>
<!-- contenu de la page ici -->
</body>
</html>
Les balises <meta> les plus utilisées¶
Viewport¶
La meta viewport est une balise qui permet de définir les dimensions d'affichage d'une page web, c'est-à-dire sa largeur, sa hauteur et son zoom. Elle est utilisée pour contrôler la mise en page sur les appareils mobiles tels que les smartphones et les tablettes.
Description¶
La balise description est très utile. Elle permet de donner une description aux robots des moteurs de recherches et de l'afficher sur la page des résultats :
La balise description utilisée par Google
Voilà la balise en meta description :
La meta description doit toujours être rédigée avec précision et respecter une taille optimale de 155 à 158 caractères espaces compris.
Mots-clés (obsolète)¶
La balise keywords est obsolète depuis 2004. Mais alors pourquoi je vous en parle ? Parce que des gens pensent toujours qu'elle sert à quelque chose, et qu'il faut bien savoir de quoi on parle :
Author¶
Cette balise sert à renseigner le nom de l'auteur de la page internet :
Copyright¶
Cette balise sert à renseigner le copyright qui gère le contenu de notre page internet :
Ici, j'utilise le copyright de Creative Commons BY-NC-SA 4.0.
Les copyrights
Si vous souhaitez générer un copyright pour vos pages, vous pouvez le faire ici : https://creativecommons.org/choose/
Un favicon¶
Le favicon est la petite icône qui apparaît tout à gauche de l’onglet d’une page web. Il s’agit la plupart du temps d’une version originale ou allégée du logo d’un site. C’est rel="icon" qui indique que la ressource est une image.
Notez
Un favicon porte généralement l’extension .ico, mais il peut également s’agir d’un .png ou d’un .svg.
Comment dimensionner correctement les favicons ?
La taille standard des favicons est de 16x16 pixels, mais la plupart des concepteurs commencent avec 32x32 pixels pour s'adapter aux écrans Retina. De cette façon, les favicons plus grands s'affichent bien sur les écrans Retina et peuvent également être réduits.
Attention !
Il doit toujours avoir le ratio 1:1. Donc carré.
Pour créer un favicon, il faut sélectionner la taille et le format appropriés pour garantir son rendu sur toutes les plateformes sur lesquelles il peut apparaître. Voici un tableau qui décrit les tailles et formats les plus courants pour les favicons, ce qui peut vous aider à décider lesquels créer pour votre site Web.
| Taille (px) | Format | Cas d'utilisation courant |
|---|---|---|
| 16x16 | PNG, ICO, SVG | Taille classique pour les onglets de navigateur, les signets. Idéal pour les icônes simples en raison de la petite taille du canevas. |
| 32x32 | PNG, ICO, SVG | Écrans haute résolution ; peuvent être utilisés pour les onglets du navigateur et les signets pour plus de clarté. |
| 48x48 | PNG, ICO, SVG | Taille facultative, utilisée pour plus de clarté sur diverses plates-formes. |
| 96x96 | PNG, ICO, SVG | Recommandé par Google pour les écrans à haute résolution. Peut être utilisé dans les onglets du navigateur et les signets. |
| 144x144 | PNG, ICO, SVG | Écrans haute résolution comme les écrans Retina ; souvent utilisés pour les icônes tactiles Apple. |
| SVG | SVG | Format graphique vectoriel évolutif ; taille flexible, garantissant un affichage net et clair sur tous les écrans. |
Générateur de Favicon
Générez rapidement votre favicon à partir d'une image https://favicon.io/favicon-converter/
Récapitulatif¶
Voilà le code de notre page index.html avec toutes les balises vues dans ce cours :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Le titre de ma page web</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Une description de la page...">
<link href="favicon.ico" rel="icon">
<!-- optionnelle -->
<meta name="author" content="John Doe">
<meta name="copyright" content="© CC BY-NC-SA 4.0">
</head>
<body>
<!-- contenu de la page vide -->
</body>
</html>
À partir de maintenant, nous allons mettre de coté la balise <head> pour nous concentrer sur le contenu de notre page, qui se trouve dans la balise <body>.