Notions

L’HTML est le langage utilisé pour l’affichage de site web.
La version actuelle est la 5.

Définition

HTML = Hyper Text Markup Language = langage de balisage d’hypertexte.
L’hypertexte représente du contenu lié par des hyperliens, qui permettent de naviguer d’une page à l’autre.
Le langage de balisage est le code de développement permettant l’affichage de contenu.
L’HTML est un langage front-end (= ensemble des éléments visibles sur un site web) interprété par le navigateur.
Le code HTML est écrit dans un fichier texte et enregistré au format .htm ou .html entre autre.
Voir le site de Wikipédia à ce sujet.

Les navigateurs

Le fichier html est lu par un navigateur dont voici la liste des principaux
FirefoxFirefox
ChromeChrome
EdgeEdge
SafariSafari
OpéraOpera

Le navigateur interprète le code html, css, javascript et les langages back-end (PHP, .Net…).
Lors de la conception d’un site il convient donc de l’ouvrir sur tout ces navigateurs et voir les différences d’interprétations (d’affichage).

Les outils du navigateurs pour le développeur

Les navigateurs proposent de nombreux outils dédiés au développeur. Les plus intéressants sont la consultation du code entrant (code source) et la consultation, modification du code interprété permettant son affichage.
Code source -> Navigateur -> Code interprété pour l’affichage
Seuls les codes html, css et javascript sont visible. Les langages back-end (PHP, .Net…) ne sont pas affichés.

Consultation du code entrant

Le code source est le code avant son arrivé dans le navigateur.
  1. Cliquez avec le bouton droit de la souris sur une partie vide de la page Web (ou Ctrl+u)
  2. Sélectionnez « Code source de la page » ou « Afficher le code source de la page » dans le menu contextuel qui apparaît
  3. Un nouvel onglet apparait avec le code source

Le code affiché dans ce nouvel onglet n’est pas modifiable dans le navigateur.

Consultation / modification du code interprété

Le code interprété est le code source modifié par le navigateur afin de l’afficher.
  1. Cliquez avec le bouton droit de la souris sur une partie à examiner de la page Web (ou Ctrl+Maj+C ou F12)
  2. Sélectionnez « Inspecter » dans le menu contextuel qui apparaît
  3. Une fenêtre recouvrant une partie de la page web apparaît sur l’onglet (Elements pour Chrome, Inspecteur pour Firefox) du code interprété
Vous pouvez modifier le code et voir en direct son traitement. Exemple sur le site de Wikipedia / HTML
  1. Cliquez avec le bouton droit de la souris sur le titre « Hypertext Markup Language » et sélectionnez Inspecter dans le menu contextuel
  2. Dans la fenêtre qui vient de s’ouvrir, double cliquez sur « Hypertext Markup Language »
  3. Saisissez ce que vous voulez, cliquez ensuite n’importe où ailleurs et vous verrez le changement

Pour en savoir plus

Le site de Mozilla –

Les éditeurs

Ma première page

  1. Copiez le code ci-dessous en cliquant sur le bouton Copier
  2. Ouvrez un éditeur de texte (le bloc-notes de Windows ou TextEdit sur Mac)
  3. Collez y le code copié (Ctrl+v)
  4. Enregistrez le fichier sur le bureau en le nommant « monsite.htm »
  5. Rendez-vous sur le bureau et double-cliquez sur le fichier « monsite.htm », celui-ci doit normalement s’ouvrir dans votre navigateur

Structure

Une page html est constitué au minimum de cette façon :

<!DOCTYPE html>
<html>
<head>
<title>Mon premier site web</title>
</head>
<body>
<p>Coucou bonjour tout le monde !!</p>
</body>
</html>

Les documents html 5 commencent toujours par <!DOCTYPE html>.
Puis le code est entouré par les balises <html> au début et </html> à la fin.
Les balises <head> et </head> entourent une partie qui ne sera pas visible dans la fenêtre du navigateur, comme le titre par exemple.
Les balises <body> et </body> entourent la partie visible.

Les balises

<balise> est une balise.
Les balises indiquent une action à effectuer sur le contenu.
Elles ne sont pas affichées dans le navigateur et ne sont visible que dans le code source ou l’inspecteur.
La plupart des balises sont à fermer pour entourer le contenu : <balise> contenu </balise>


Certaines balises ne sont pas à fermer, ce sont des balises orphelines.


Les balises peuvent être configurable en ajoutant une valeur à un attribut :
<balise attribut="valeur"> contenu </balise>


p est la balise
class est l’attribut de la balise p
introduction est la valeur de l’attribut class

Règles à suivre

Pour une meilleur compréhension du code
    • Les balises et leurs attributs doivent être saisie en minuscule
      Bonne pratique

      A éviter

    • Les valeurs d’attributs doivent être saisie entre double quote
      Bonne pratique

      A éviter

      Mauvaise pratique

    • Les valeurs d’attributs doivent être saisie en minuscule
      Bonne pratique

      A éviter

    • A l’intérieur d’une balise, évitez les espaces avant et après le signe =
      Bonne pratique

      A éviter

    • Evitez les lignes vides
      Bonne pratique

      A éviter

    • Indenter correctement votre code, signifie ajouter une tabulation (ou 4 espaces) avant une ligne imbriquée
      Bonne pratique

      A éviter

    • Ne pas entremêler les balises
      Bonne pratique

      Mauvaise pratique