Architecture et langages Web (NFA040)

HTML

Olivier Pons
(pons@cnam.fr)

2022

HTML: c'est quoi

Un langage de description (structuration) de Contenu

HyperText Markup Language

HTML: un peu d'histoire

Credo

On sépare le contenu et la présentation

Contenu et structure
décrit par le langage HTML ;
Présentation
décrite par des feuilles de style CSS : (couleur fonte cadre ...)

Principe :

HTML, XHTML et XML

(X)HTML

XML (Extensible Markup Language)

Outils pour écrire et tester des pages web

Pas besoin d'être connecté !1

  1. Vous écrivez votre code html dans un fichier .html avec votre éditeur

  2. Vous ouvrez la page dans votre navigateur pour afficher le résultat.

  3. Vous valider le code et reprenez en 1 pour corriger (et/ou completer)

Balises et attributs

Exemple de balises

  <h3>Tortues</h3> 
    <p>
      Les
      tortues  sont les seuls <b>reptiles<b> ayant une carapace dure et
      osseuse. 
      <br/><img src=tortue.png alt="une tortue stylisée mangeant une glace dans un transat"/>  
      ça fait rêver !
    </p>

Tortues

Les tortues sont les seuls reptiles ayant une carapace dure et osseuse. tortue
ça fait rêver !

Généralités sur les balises

Remarque

Le /dans les balises vides est obligatoire en XML et donc en XHTML, pas en HTML.

Il facilite la lecture ("je n'ai pas oublier de fermer ma balise")

Plusieurs éditeurs l'ajoutent automatiquement.

Mais depuis octobre 2022 il n'est plus recommandé par le w3C et produit un warning au validateur. (discussion ici)

Balises et attributs

Balises et attributs

Exemple de la balise img

<img src=tortue.png alt="une tortue stylisée mangeant une glace dans un transat">

Ici elle a 2 attributs obligatoires !

  1. src explicite le fichier binaire qui contient limage
  2. alt donne une description de l'image
    • elle apparaît si l'image n'est pas accessible
    • elle peut être lue par les technologies d'assistance.
    Elle est fondamentale pour l'accessibilité des sites qui est une obligation légale !

Vocabulaire : Élément

Définition : le mot élément désigne une balise et ce qu'elle contient.

Exemple : Dans le code ci-dessous

<h1>Cours de
<em>HTML</em></h1>

Nos règles pour l'écriture du code

 <p> un exemple <em> incorrect</p></em>
 <p> un exemple <em> correct</em></p>

(Ces règles sont obligatoires en XHTML, mais nous conseillons de les suivre en HTML5)

Structure d'une page

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <title>Ma belle page</title>
</head>

<body>
    <h1>Un exemple de page</h1>
    <p>Ô la <em>jolie</em> page</p>
</body>

</html>

Un exemple de page

Ô la jolie page

(ouvrir dans jsbin)

Structure d'une page

DOCTYPE
HTML 5
début du document
balise html commence le document ; précise éventuellement sa langue (ici français).
en-tête

balise head Informations diverses utiles au navigateur:

meta charset
précise le codage des caractères (accents, etc...)
titre
titre du document (apparaît dans les onglets du navigateur)
corps du document
body contient le texte du document.

L'entête

Corps

Texte, titres et paragraphes

Les commentaires

<!--
  Texte qui est ignoré
  par le navigateur...
  à destination du programmeur.
-->

Exemple

<h1>Un gros titre</h1>
    <p>Voici le paragraphe associé au
        titre 1. Le saut de ligne précédent ne provoquera pas
        un saut de ligne à l'affichage.</p>
    <p>Voici un bout de texte mis en évidence avec la balise
        <code>&lt;em&gt;</code>:
        <em>ceci est à faire remarquer</em>.<br>
        L'usage de la balise
        <code>br</code> n'est
        que rarement utile.
    </p>
    <p>Et voila le résultat de la balise strong : <strong>très
            important</strong> .</p>
    <h2>un titre un peu plus petit</h2>
    <h3>encore plus petit</h3>
    <h4>toujours plus petit</h4>
    <h5>etc...</h5>

Un gros titre

Voici le paragraphe associé au titre 1. Le saut de ligne précédent ne provoquera pas un saut de ligne à l'affichage.

Voici un bout de texte mis en évidence avec la balise <em>: ceci est à faire remarquer.
L'usage de la balise br n'est que rarement utile.

Et voila le résultat de la balise strong : très important .

un titre un peu plus petit

encore plus petit

toujours plus petit
etc...

(l'ouvrir dans jsbin)

Les listes

Une liste est

Il existe plusieurs sortes de listes :

  1. les listes « non ordonnées », ou « unsorted lists » introduites par ul;
  2. les listes numérotées « ordered lists », introduites par ol

Les listes à puce

<h2>listes à puces</h2>
    <p>Les animaux domestiques les plus courants sont:</p>
    <ul>
        <li>chat</li>
        <li>chien</li>
        <li>poisson rouge</li>
    </ul>
    <h2>listes ordonnées</h2>
    <p>Pour monter des blancs en neige :</p>
    <ol>
        <li>Séparer les blancs des jaunes</li>
        <li>Mettre un peu de sel dans les blancs</li>
        <li>Battre les blancs au fouet</li>
    </ol>

listes à puces

Les animaux domestiques les plus courants sont:

  • chat
  • chien
  • poisson rouge

listes ordonnées

Pour monter des blancs en neige :

  1. Séparer les blancs des jaunes
  2. Mettre un peu de sel dans les blancs
  3. Battre les blancs au fouet

Les listes de définitions (ou de description)

<h2>listes de définitions</h2>
    <p>un exemple :</p>
    <dl>
        <dt>Java</dt>
        <dd>langage impératif orienté objet</dd>
        <dt>Scheme</dt>
        <dd>variante du langage fonctionnel Lisp</dd>
    </dl>

listes de définitions

un exemple :

Java
langage impératif orienté objet
Scheme
variante du langage fonctionnel Lisp

Listes imbriquées

Listes imbriquées

<h2>Plusieurs niveaux de listes</h2>

    <p>exemple :</p>
    <ol>
      <li>exercice 1
        <ol>
          <li>1er élément</li>
          <li>2ème élément</li>
          <li>3ème élément</li>
        </ol>
      </li>
      <li>exercice 2</li>
    </ol>
    <p>et non pas :</p>
    <ol>
      <li>exercice 1</li>
      erreur html 
      (on ne devrait pas fermé le li ici)
        <ol>
          <li>1er élément</li>
          <li>2ème élément</li>
          <li>3ème élément</li>
        </ol>
       <li>exercice 2</li>
      <li>exercice 3</li>
    </ol>

Plusieurs niveaux de listes

exemple :

  1. exercice 1
    1. 1er élément
    2. 2ème élément
    3. 3ème élément
  2. exercice 2

et non pas :

  1. exercice 1

    1. 1er élément
    2. 2ème élément
    3. 3ème élément

  3. exercice 2

  4. exercice 3

Les tables

<table>
  <tr>
    <th></th>
    <th>lundi</th>
    <th>mardi</th>
  </tr>
  <tr>
    <th>Matin</th>
    <td>julie</td>
    <td>martin</td>
  </tr>
  <tr>
    <th>Après-midi</th>
    <td>Julie</td>
    <td>didier</td>
  </tr>
  <tr>
    <th>Soir</th>
    <td>Martin</td>
    <td>Martin</td>
  </tr>
</table>
lundi mardi
Matin julie martin
Après-midi Julie didier
Soir Martin Martin

Une table

Un tableau plus compliqué

Regroupement avec rowspan et colspan

<table>
  <caption>
    Mon premier tableau
  </caption>
  <tr> 
      <th></th><th>lundi</th> <th>mardi</th>
  </tr>
  <tr> 
      <th>Matin</th> <td rowspan="2">julie</td> <td>martin</td>
  </tr>
  <tr>
      <th>Après midi</th><!-- seconde ligne de "julie"-->
      <td>didier</td>
  </tr>
  <tr>
    <th>Soir</th>
    <td colspan="2">Martin</td> <!-- (occupe deux colonnes) -->
  </tr>
</table>

(limites de cases ajoutées en CSS)

table, td,th {border-style :solid}

Noter l'utilisation des commentaires HTML

Les liens

Permet de naviguer de page en page ou de de morceaux de page en morceaux de page

Définir un lien

<a href="URL">texte du lien</a>

URL : Uniform Resource Locator désigne une resource, par exemple une autre page web.

Les URL

absolue

protocole + adresse :

  • http://www.cnam.fr/salut.html : page web ;
  • ftp://ftp.cnam.fr/cours.zip : fichier sur un serveur ftp ;
  • file:///home/rosmord/test.html : fichier sur le disque local.
relative au serveur
  • /images/logoCnam.png :
    si le serveur actuel a l'adresse http://www.cnam.fr/, alors cela charge http://www.cnam.fr/images/logoCnam.png
relative
  • lessolutions/examenWEB2022.html : l'adresse de la nouvelle page est relative à celle de la page actuelle. Si la page est http://lecnam.org/COURS/WEB/index.html
    alors cela charge
    http://lecnam.org/COURS/WEB/lessolutions/examenWEB2022.html

URL Relatives

Si on est sur la page http://localhost/CoursHTML/dossier/ici.html on peut :

Exemple de liens

<body>
    <h1>Index</h1> 
    <ul>
      <li> <a href="chapitre1.html">chapitre 1 </a></li>
      <li> <a href="coursCss/chapitre2.html">chapitre 2</a></li>
    </ul>
</body>
<h1>chapitre 1</h1> 
<p> bla bla bla trtrtrtr trtrtrtr </p> 
<p>
  <a href="depart.html">Retour à l'index </a>
</p>
<h1>chapitre 2</h1>
<p> bla bla bla </p>
<p>
   <a href="../depart.html">Retour à l'index </a>
</p>

Démonstration

Les ancres

Désignent un point précis dans une page.

Définition d'une ancre

<p id="nom_d_ancre">[contenu]</p>

Pour nom_d_ancre noter un nom. Sans espace, ni accent, avec une lettre comme premier caractère.

On peut remplacer <p> par n'importe quelle balise

Note :

Les ancres, exemple

<h1 id="index">Index</h1>
<p><a href="#chapitre1">chapitre 1</a></p>
<p><a href="#chapitre2">chapitre 2</a></p>

<p> un paragraphe </p>
<h1 id="chapitre1">Chapitre 1</h1>
<p> un paragraphe </p>
<p> un paragraphe </p>
<h2>bli blo</h2>
<h1 id="chapitre2">Chapitre 2</h1>
<p> un paragraphe </p>


<a href="#index">retour à l'index</a>

Démonstration

Les images

Pour insérer une image dans une page : balise <img>

exemple : si on a dans notre repertoire le fichier image "lion.png" :

<img src="images/lion.png" alt="un petit lion stylisée"/>

        le roi de la jungle

Catégories de balises

On en reparlera en css avec la propriété display

Balises génériques

Attribut universels

universels car applicables à toute les balises
(contrairement à src par exemple qui s'applique sur img mais pas sur h ou p).

Plusieurs éléments peuvent avoir la même caractéristique (class)
mais pas le même identifiant (id)

Exemple d'utilisation de div, span , class, id

<div class="recette" id="laRecetteDeMamie">
  <h2 class="plat dessert">gateau au chocolat<h2> 
  il faut:
  <ul classe="ingredients">
    <li class="ingredient"> du chocolat</li>
    <li class="ingredient"> des oeufs </li>
    ...
  </ul>
  <p class="preparation">
  faire fondre le chocolat
   <span class="inportant"> à feux doux<span>...
  </p>
 </div>
<div class="recette" id="laRecetteDePapi">
  <h2 class="plat dessert">la tarte aux pommes<h2>
...
</div>

gateau au chocolat

il faut:
  • du chocolat
  • des oeufs
  • ...

faire fondre le chocolat à feux doux...

la tarte aux pommes

...

On pourra ajouter un rendu particulier grace à css

Rappel : page HTML = un arbre de balise

dessin de l'arbre

<!DOCTYPE html>
<html>
<head>
  <title>Page 1</title>
</head>
<body>
  <h1>titre 1</h1>
<p class="monmachin">bla bla bla <em>etc</em></p>
<div class="important">
   <h1>titre 2</h1>
   <p>encore bla bla bla</p>
    <h2>titre3 <em>+++</em></h2>
</div>
</body>
</html>

racine : html
enfants : head, body
enfants de body : h1,p,div
descendants de body: h1,p,div,h1,p,h2,em

Certains noeuds de l'arbre ont des attributs

Quelques balises supplémentaires de HTML5

video

Permet d'inclure une vidéo dans une page. La video peut être désignée par l'attribut src, ou, si plusieurs formats sont proposés, listée dans une balise source.

<video controls>
  <source src="cours.webm" type="video/webm">
  <source src="cours.mp4" type="video/mp4">
    Désolé, format non disponible.
</video>

Attention

Tous les formats ne sont pas reconnus par tout les navigateurs !

Quelques balises supplémentaires de HTML5

Elles ont été définies en regardant les utilisations les plus courantes de class et id.

Elle ont une sémantique précise et normalisée (contrairement aux classes qui ajoutent une sémantique mais dont les noms ne sont pas normalisés).

Par défaut, ces balises se conduisent comme des div. Pour leur donner un aspect intéressant, il faut utiliser les CSS.

Balises de structuration de page

header
(à ne pas confondre avec head : délimite un bandeau en haut de page.
footer
bandeau de pied de page
main
contenu principal de la page.
nav

une zone qui contient essentiellement des liens (typiquement un menu)

<nav>
  <ul>
  <li><a href="home.php">Accueil</a></li>
  <li><a href="recettes.php">Recettes</a></li>
  </ul>
</nav>

Quelques balises supplémentaires de HTML5

Structuration de contenu

article
délimite un contenu autonome ; qui a en théorie son propre header, qui lui-même contient un titre (h1...h9) ;
section
partie de document typiquement pourvue d'un titre.

Pour Completer sur MDN

  1. Vous pouvez aussi travailler dans le cloud avec replit↩︎