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 :
<!DOCTYPE html>
Cette ligne précise que nous parlons ici en HTML.
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.
<!DOCTYPE html>
<html>
</html>
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>
<head>
</head>
<body>
</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>
<head>
<title>Le titre de ma page web</title>
</head>
<body>
</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-8pour un alphabet Romain, avec nos accents bien Français :
<meta charset="utf-8" />
Le voilà entrée dans notre page :
<!DOCTYPE html>
<html>
<head>
<title>Le titre de ma page web</title>
<meta charset="utf-8" />
</head>
<body>
</body>
</html>
Les balises meta les plus utilisées
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 :
Voilà la balise en meta description :
<meta name="description" content="Une description de la page..." />
Mots-clés (obsolète)
La balise mots-clés 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 :
<meta name="keywords" content="apprendre, html, css, coder, code" />
Author
Cette balise sert à renseigner le nom de l'auteur de la page internet :
<meta name="author" content="Nicolas AUNE" />
Copyright
Cette balise sert à renseigner le copyright qui gère le contenu de notre page internet :
<meta name="copyright" content="© CC BY-NC-SA 4.0" />
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/
Récapitulatif
Voilà le code de notre page index.html avec toutes les balises vues dans ce cours :
<!DOCTYPE html>
<html>
<head>
<title>Le titre de ma page web</title>
<meta charset="utf-8" />
<meta name="description" content="Une description de la page..." />
<meta name="author" content="Nicolas AUNE" />
<meta name="copyright" content="© CC BY-NC-SA 4.0" />
</head>
<body>
</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>.