HTML Structure d’une page

La structure minimale d’une page HTML est la suivante :

Code complet d’une page en HTML5

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Titre de la page</title>
  </head>
  <body>
    <p>Le texte de mon premier paragraphe</p>
  </body>
</html>

L’indentation est facultative, mais aide grandement à la lecture du fichier.

Le DOCTYPE#

définit le type du document
première ligne du fichier
indispensable

La zone racine#

balise <html></html>
indique le début et la fin du document
la langue du document doit être ajoutée via un attribut <html lang="fr">

Les métadonnées#

balise <head></head>
indique le début et la fin des informations non affichées du document
permet de spécifier les métadonnées, les feuilles de styles utilisées, les fonctions JavaScript, l’encodage de caractères, etc.
obligatoire:
- balise <title> qui définit le titre du document HTML. Le contenu de cette balise est utilisée par les navigateurs pour le titre de l’onglet ou par Google pour les résultats de recherche
- balise <meta charset> définit l’encodage des caractères: ici, c'est de l’utf-8 (conseillé)

D’autres balises de métadonnées existent, avec notamment :

<meta name="description" content=""> qui définit la description du site en 2 ou 3 phrases. Utile pour le référencement.
<link> pour les appels de fichiers externes (feuille de styles)
<script> pour les appels de fichiers scripts (JavaScript)

Le corps#

balise <body></body>
contient tous les éléments à afficher dans la page

Exercice 1 - Première page HTML#

Nous allons préparer notre espace de travail afin de développer nos pages :

Installez MAMP (Apache, MySQL, PHP, ), puis démarrez le serveur web (apache)
Configurez-le (document root notamment)
Dans ce dossier, créez un nouveau document texte, nommez le index.html
Copiez le code HTML de l’exemple ci-dessus dans ce fichier
Ouvrez le navigateur à l’adresse : http://127.0.0.1 ou http://localhost
\o/