HTML5 – Principes de base

LEÇON

 

Qu'est-ce que HTML ?

  • en anglais : Hyper Text Markup Language
  • un document HTML contient des balises et du texte ordinaire
  • les balises (le markup) sont là pour décrire/structurer le contenu et ainsi spécifier sa visualisation
  • un navigateur transforme le document HTML en page web pour visualisation
  • un document HTML est donc le "code source" d'une page web

 

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Ma page</title>
  </head>
  <body>
    <h1>Exemple de page en HTML</h1>
    <p>Bonjour,<br>et bienvenue sur cette page en HTML.</p>
    <hr>
    <p>
      <a href="http://www.studio-m.fr/">
        Cliquez ici pour visiter le site de Studio-M
      </a>
    </p>
    <img src="http://www.web-design-codex.fr/wp-content/uploads/2015/12/lamborghini_green.jpg">
  </body>
</html>

 

 

Balises et éléments HTML

  • les balises sont délimitées par les symboles < et >
    • par exemple <html>, <body> ou <h1>
  • typiquement il y a une balise d'ouverture et une balise de fermeture : la différence est que la balise de fermeture contient un slash avant le nom de la balise
    • par exemple <p> et </p>
  • un élément HTML est une paire de balises (ouverture + fermeture) avec son contenu entre les deux
    • par exemple <h1> tout seul est une balise
    • mais ce code est un élément : <h1>Exemple de page en HTML</h1>
  • il existe aussi des éléments vides, avec une seule balise
    • dans ce cas pas besoin de balise de fermeture car il n'y a jamais de contenu
    • par exemple <br> pour un retour à la ligne ou <hr> pour dessiner une ligne horizontal (voir l'exemple)
    • un autre exemple, la balise pour afficher une image : <img src="..."> car il n'y a pas de "contenu" - l'image est mentionnée comme attribut (voir ci-dessous)
  • les balises d'ouverture, et les éléments vides, peuvent avoir des attributs
    • par exemple dans ce code  <a href="http://www.studio-m.fr/">Cliquez ici pour visiter le site de Studio-M</a> on trouve un attribut dans la balise <a> qui est l'attribut href et la valeur de l'attribut href est "http://www.studio-m.fr/"
    • autre exemple : <img src="http://www.web-design-codex.fr/wp-content/uploads/2015/12/lamborghini_green.jpg"> - ici src est un attribut de la balise <img> et la valeur de l'attribut est l'adresse web d'une image

 

Imbriquer les éléments

  • les éléments sont organisés dans une structure hiérarchique où ils sont imbriqués les uns dans les autres
  • par exemple <p>On peut <strong>imbriquer</strong> les éléments.</p>
  • il est interdit de casser la hiérarchie
    • par exemple <p>Ne faites <strong>jamais</p> ceci.</strong>

 


 

EXERCICES

  1. Imaginer devoir expliquer HTML à quelqu'un qui ne le connaît pas. Comment faites-vous?
  2. Ouvrir cette page web : bonjour.html et regarder son code source (via l'option de visualisation de code source présente dans le navigateur : pour faire ceci on fait typiquement un clic-droit dans la page et on sélectionne "afficher le code source" ou similaire).
  3. Essayer de repérer ce qui correspond aux balises de la page et ce qui correspond au contenu de la page.
  4. Lesquelles sont des éléments vides ?
  5. Essayer d'identifier la balise à la racine de la hiérarchie.
  6. Copier tout le code source et le coller dans un éditeur de texte (notepad++). Sauvegarder en tant que fichier HTML (extension .htm ou .html). Remarquer / Faire en sorte que l'éditeur reconnaisse la syntaxe et colorie les balises et les attributs différemment par rapport au contenu.
  7. Essayer de voir la relation entre le code source de la page et sa visualisation dans le navigateur.
  8. Qu'est-ce qui ne va pas avec ce morceau de code HTML ? : <img src="logo.jpg">bonjour</img>
  9. Lesquelles de ces morceaux de HTML sont interdits car ils cassent la hiérarchie :
    • <body> <p> Lorem ipsum dolor </p> </body>
    • <body> <p> Lorem ipsum dolor </body> </p>
    • <body> <h1> Bonjour </h1> <p> Lorem ipsum dolor </p> </body>
    • <body> <h1> Bonjour <p> Lorem </h1> ipsum dolor </p> </body>
    • <body> <h1> Bonjour </h1> <p> Lorem ipsum dolor </p> <p> Lorem ipsum dolor </body> </p>