Aller au contenu

12 Cours HTML

Introduction⚓︎

HTML est un langage qui utilise des balises entre chevrons (<balise>) pour structurer les pages Web et leur donner un sens.

HTML5 (HyperText Markup Language 5) est la version actuelle de HTML. Dans le langage courant, HTML5 désigne souvent un ensemble de technologies Web (HTML5, CSS3 et JavaScript) permettant notamment le développement d’applications.

Le langage HTML a un rôle sémantique, il décrit le contenu de la page et explique le sens de ce contenu afin qu’il puisse être compris par le navigateur Web ou les robots des moteurs de recherche.

Vous pouvez afficher le code HTML d’une page Web, en cliquant droit sur celle-ci et en choisissant Afficher le code source de la page, ou en utilisant le raccourci : Ctrl+u.

Structure générale⚓︎

Une page HTML commence toujours par indiquer le doctype :

HTML
<!doctype HTML>

Le document est séparé en deux grandes parties :

  • head qui contient des informations utiles au navigateur et aux robots qui consultent votre page ;
  • body qui contient les informations qui seront effectivement affichées à l’écran.

Structure modèle⚓︎

HTML
<!DOCTYPE HTML>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Mon premier document</title>
  </head>
  <body>
    <h1>Titre de mon document</h1>
    <!-- Ceci est un commentaire -->
    <p>
      Regarde maman, je suis sais coder en HTML !
    </p>
  </body>
</html>

Exercice⚓︎

En ouvrant le logiciel Notepad++, copier le code ci-dessus dans un fichier que vous appellerez index.html puis visualiser celui-ci dans un navigateur internet en double-cliquant sur le fichier (ou en faisant "Ouvrir avec" un navigateur).

Remarque :⚓︎

Pour créer une page web, il faut donc toujours :

  • d'une part, pouvoir lire et modifier son code html ( et éventuellement sont fichier css et ses scripts Javascript) à l'aide d'un éditeur
  • d'autre part, visualiser le résultat obtenu, par exemple en ouvrant la page dans un navigateur.

On peut donc travailler avec :

  • Notepad++ comme éditeur / un navigateur pour visualiser
  • un éditeur qui fait apparaître d'un côté le code de l'autre le résultat, comme replit
  • ou comme sur Capytale (activités de type HTML / CSS / JS)
  • il existe de nombreux éditeurs spécifiques HTML / CSS / JS qui permettent de visualiser

Balises et attributs⚓︎

Le langage HTML utilise des balises pour indiquer l’organisation et l’affichage des éléments d’une page. Ces balises (tags en Anglais) permettent de construire une hiérarchie au sein du document appelée DOM (Document Object Model). Ces balises sont référencées sur le site MDN.

Par exemple :

  • les balises de titre (headings) <h1>...</h1> jusqu’à <h6>...</h6> permettent d’utiliser jusqu’à six niveaux de titres dans la page ;
  • la balise de paragraphe <p>...</p> ;
  • les balises <div>...</div> permettent d’englober plusieurs autres éléments, ce sont des conteneurs qui permettent de rassembler ensemble divers éléments ;
  • les balises <span>...</span> permetttent d’appliquer des réglages à des éléments spécifiques.

La structure des balises est généralement la suivante :
Balise ouvrante avec attributs éventuels, puis contenu, puis balise fermante

HTML
<tag_name attributs>contenu</tag_name>

Il est important de bien fermer les balises ouvertes.

Comme des parenthèses, attention à ne pas les mélanger

Les balises ouvrantes et fermantes doivent toujours être correctement imbriquées, c’est à dire que les balises fermantes doivent êtres écrites dans l’ordre inverse des balises d’ouverture. Une bonne imbrication des balises est une des règles à respecter afin d’avoir un code valide.

Voici un exemple de code valide :

HTML
<em>Ceci est <strong>très</strong> important</em>

Voici un exemple de code non-valide :

HTML
<em>Ceci est <strong>très</em> important</strong>

Balises auto-fermantes

Cependant, certaines balises sont auto-fermantes (on dit aussi orphelines), c’est à dire qu’elles ne présentent pas de balises fermantes : ce sont des balises qui peuvent avoir des attributs, mais pas de contenu, elles sont vides. Par exemple la balise d’image <img> ou la balise break <br> qui casse la ligne et passe à la ligne suivante.

HTML
<img src="logo-csi.png" alt="Logo de la CSI">
CSI<br>
2 place de Montréal<br>
69007 LYON<br>

Les éléments src et alt sont les attributs de notre image :

  • src : source de l’image, ici un fichier local, mais une adresse Web peut-être spécifiée.
  • alt : texte à afficher si la source ne peut-être trouvée, et utile pour les logiciels de descriptions de pages web pour les malvoyants.

Il est possible d'écrire ces balises comme auto-fermantes : <br />, <img src = "logo.png" />, mais ce n'est pas indispensable en HTML.

Règles d’écriture⚓︎

  • Le fichier commence par le doctype html <!doctype HTML>.
  • Commentaires : <!-- Ceci est un commentaire -->.
  • On écrit en général les balises en minuscules.
  • L’indentation n’est pas obligatoire, mais elle rend le fichier plus lisible.

Validation de la cohérence du code HTML d’une page Web⚓︎

Pour vérifier si le code HTML d’une page Web est valide, et être informé sur les erreurs et recommandations, on peut utiliser le validateur du w3c disponible à l’adresse suivante :

http://validator.w3.org/#validate_by_input+with_options

Il existe également des outils qui permettent de nettoyer et d’indenter le code :

http://jsbeautifier.org/.

Balises utiles⚓︎

Balises de structure du document⚓︎

Ces balises n’apportent aucune nouvelle mise en forme, il s’agit bien simplement de structure.

Voici les balises qui rentrent dans cette catégorie :

  • <html></html> : elle encadre l’ensemble du contenu. Elle indique au navigateur qu’il s’agit bien d’une page écrite en langage HTML
  • <head></head> : elle définit une en-tête au document et contient des informations sur la page web qui peuvent être reportées par le navigateur (titre affiché dans l’onglet par exemple)
  • <body></body> : elle définit le corps de la page c’est-à-dire l’ensemble du contenu. Le body peut s’organiser lui-même en sous-structures :
  • <header></header> qui permet de définir une en-tête de page
  • <nav></nav> qui permet de définir un menu de navigation
  • <section></section> pouvant de subdiviser en <article></article> qui permet d’organiser le coeur du contenu
  • <footer></footer> qui permet de définir un pied de page

Organiser son texte⚓︎

Le HTML comporte de nombreuses balises qui nous permettent d’organiser le texte de notre page. Ces balises donnent des indications comme « ceci est un paragraphe », « ceci est un titre », etc. Ces balises sont associées à des règles de mise en forme par défaut pour le navigateur (les titres en gras et en plus gros, le passage à la ligne après les paragraphes, etc.).

Exemples :

  • Il existe six niveaux de titre, de <h1> </h1> à <h6> </h6>, à utiliser selon l’importance du titre.
  • Les paragraphes sont définis par la balise <p> </p> et les sauts de ligne par la balise <br>.
  • On peut mettre en valeur certains mots avec les balises <strong>, <em> et <mark>.
  • Pour créer des listes, on doit utiliser la balise <ul> (liste à puces, non ordonnée) ou <ol> (liste ordonnée). À l’intérieur, on insère les éléments avec une balise <li> pour chaque item.

Les balises génériques⚓︎

Certaines balises ne confèrent aucun attribut particulier au texte. Elles servent uniquement à structurer le texte ou organiser la page.

C’est la cas des balises <div></div> et <span></span> qui sont dites génériques.

  • La balise <div></div> est de type « block » car elle sert à structurer son contenu en blocs.
    Les balises <p></p> et <h1></h1> sont aussi de type « block ».
    Elles se placent donc sur la page web les unes en-dessous des autres.

  • La balise <span></span> est de type « inline » car elle sert à organiser le texte.
    Les balises <strong></strong> et <a></a> sont aussi de type « inline ».
    Elles se placent donc sur la page web les unes à côté des autres.

Ces balises sont très utiles lorsqu’on leur associe un paramètre lui donnant des attributs particuliers et personnalisés. Nous reviendrons sur cette notion plus tard (voir classet id pour le CSS).

Créer des liens⚓︎

Les liens permettent de changer de page et sont, par défaut, écrits en bleu et soulignés.

Pour insérer un lien, on utilise la balise <a> avec l’attribut href pour indiquer l’adresse de la page cible.

Exemple :

HTML
<a href="https://modest-murdock-304272.netlify.app/">Site de NSI</a>

On peut faire en sorte que la nouvelle page Web s’ouvre dans un nouvel onglet plutôt que dans l’onglet courant :

HTML
<a href="https://modest-murdock-304272.netlify.app/" target="_blank">Site de NSI</a>

On peut faire un lien vers une autre page de son site Web simplement en écrivant le nom du fichier :

HTML
<a href="page2.html">Visiter la page suivante</a>

Les liens permettent aussi d’amener vers d’autres endroits de la même page Web. Il faut créer une ancre avec l’attribut id pour « marquer » un endroit dans la page, puis faire un lien vers l’ancre comme ceci :

HTML
<a href="#introduction">Introduction</a>

Cliquer sur ce lien renvoie au paragraphe d’introduction défini par :

HTML
<p id="introduction">Ceci est l'introduction</p>

Les images⚓︎

Il existe plusieurs formats d’images adaptées au Web :

  • JPEG : pour les photos ;
  • PNG : pour toutes les autres illustrations ;
  • GIF : similaire au PNG, plus limité en nombre de couleurs mais qui peut être animé.

On insère une image avec la balise <img>. Elle doit obligatoirement comporter au moins ces deux attributs : src (chemin de l’image) et alt (courte description de l’image).

HTML
<img src="logo-csi.png" alt="Logo de la CSI">

Si une image illustre le texte (et n’est pas seulement décorative), il est conseillé de la placer au sein d’une balise <figure>. La balise <figcaption> permet d’écrire la légende de l’image.

HTML
<figure>
    <img src="elephant.jpg"
         alt="Éléphant">
    <figcaption>Un éléphant</figcaption>
</figure>

On peut également faire en sorte que cliquer sur une image renvoie vers une autre page Web :

HTML
<a href="https://www.csilyon.fr/">
  <img src="logo-csi.png" alt="Logo de la CSI" width="150" height="70">
</a>