HTML§

IUT Lyon 1)

Creative Commons License

Ce travail est sous licence Creative Commons Attribution-ShareAlike 3.0 France.

1

Un langage à balises§

2

Notion de balise§

Vocabulaire

En anglais, les balises sont appelées tags; « langage à balise » se traduit par markup language.

3

Exemple§

Si vous écrivez :

Qu'est-ce qu'une <em>balise</em>?

... vous verrez :

Qu'est-ce qu'une balise?

Le mot « balise » est marqué comme important (em = emphase), c'est pourquoi il est affiché en italique.

4

Structure des balises§

Qu'est-ce qu'une <em>balise</em>?

Astuce

Les éditeurs de texte reconnaissent les balises, et les mettent automatiquement en couleur pour faciliter la lecture du code HTML.

5

Emboîtement§

http://commons.wikimedia.org/wiki/File:Russian-Matroshka2.jpg

On peut appliquer plusieurs balises au même texte, à condition de respecter la règle d'emboîtement :

toute balise B ouverte à l'intérieur d'une balise A doit également être fermée à l'intérieur de A.

Exemples :

<p>Emboîtement <em>correct</em></p>
<p>Emboîtement <em>incorrect</p></em>
6

Structure en arbre§

De la règle d'emboîtement, il découle que les balises confèrent une structure d'arbre au document :

<X><Y>Lorem <Z>ipsum</Z></Y> dolor <X>sit.</X></X>

graph { X -- Y Y -- Lorem Y -- Z Z -- ipsum X -- dolor X -- X2 X2 -- "sit." X [ label="<X>", shape=box, style=rounded ] Y [ label="<Y>", shape=box, style=rounded ] Z [ label="<Z>", shape=box, style=rounded ] X2 [ label="<X>", shape=box, style=rounded ] Lorem [ shape=elipse, style=filled ] ipsum [ shape=elipse, style=filled ] dolor [ shape=elipse, style=filled ] "sit." [ shape=elipse, style=filled ] }

7

Attributs§

Certaines balises, en plus du contenu textuel qu'elles délimitent, ont besoin d'information supplémentaire (mais qui n'apparaîtra pas dans le document).

Cette information est donnée par des attributs, qui ont la forme nom=valeur et sont placés entre les chevrons de la balise ouvrante, après son nom.

Par exemple :

<a href="http://champin.net/">P-A. Champin</a>

n'affichera que le texte « P-A. Champin ».

8

Balises vides§

Certaines balises particulières n'attendent pas de contenu textuel. Ces balises vides n'ont donc pas de balise fermante correspondante :

Cette balise <Y a="v"> n'a pas de contenu.

On peut (mais ce n'est pas une obligation) indiquer explicitement l'absence de balise fermante en ajoutant la barre oblique à la fin de la balise ouvrante :

Cette balise <Y a="v"/> n'a pas de contenu.
9

Gestion des espaces§

Si vous écrivez :

Gestion      des
espaces.

... vous verrez :

Gestion des espaces.

10

Explication§

HTML considère tous les caractères d'espacements (espaces, retours à la ligne...) comme des séparations entre mots, et les affiche comme une simple espace.

Cela donne de la souplesse dans la mise en page du code HTML (notamment en utilisant l'indentation, comme en programmation).

On va voir dans la suite comment faire afficher des retours à la ligne.

11

Séparation fond / forme§

Depuis la version 4, HTML vise a décrire la structure logique du document, c'est à dire le fond et non la forme.

La mise en forme (qu'on appelle parfois structure physique) est gérée par une feuille de style qui sera décrite en CSS.

Cette séparation est indispensable pour assurer l'adaptabilité du contenu, et cette adaptabilité est incontournable dans un environnement ouvert comme le Web:

12

Séparation fond / forme§

Indication

Considérez que votre page web peut être visualisée sur

  • un ordinateur fixe (grand écran, clavier, souris)
  • un ordinateur portable (écran moyen, clavier, touchpad)
  • une tablette (écran moyen à petit, écran tactile, clavier éventuellement)
  • un smartphone (petit écran tactile, accéléromètre?, voix?)
  • un téléviseur (très grand écran, télécommande)
  • un terminal pour non-voyant (lecteur d'écran, afficheur braille)
13

Structure d'un document§

14

Structure globale§

 1<!DOCTYPE html>
 2<html lang="fr">
 3  <head>
 4    <title>Titre du document</title>
 5    <meta charset="utf-8"/>
 6  </head>
 7  <body>
 8    ...
 9  </body>
10</html>
15

Explication§

16

Explication§

Indication

On remarque que l'indication d'encodage est un exemple de balise sans contenu et possédant un attribut.

NB : l'attribut lang peut en fait être utilisé sur n'importe quelle balise, y compris dans le corps (<body>) du document.

17

Valideur§

Le W3C fournit un service de validation en ligne :

http://validator.w3.org/

Son utilisation vous est vivement recommandée.

18

Titres et paragraphes§

Un document typique est une séquence de

Les titres ont différents niveaux d'importance, repérables à leur typographie (et parfois à leur numérotation), et donnent une structure hiérarchique au document (en parties, sous-parties, etc.).

Question

Identifiez-vous les différents niveaux de titre dans l'exemple suivant ?

19

Exemple§

_images/sujet.png
20

Titres et paragraphes en HTML§

Illustration :

<h1>Ceci est un titre</h1>
<p>Ceci est un paragraphe.</p>
<p>Ceci est un deuxième paragraphe.</p>
21
Illustration plus élaborée§
<h1>Ma dissertation</h1>
<h2>Thèse</h2>
  <p>Paragraphe d'introduction</p>
  <h3>Argument 1</h3>
    <p>...</p> <p>...</p> <p>...</p>
  <h3>Argument 2</h3>
    <p>...</p> <p>...</p> <p>...</p>
<h2>Antithèse</h2>
  <h3>Contre-argument 1</h3>
    <p>...</p> <p>...</p> <p>...</p>
  <h3>Contre-argument 2</h3>
    <p>...</p> <p>...</p> <p>...</p>
<h2>Synthèse</h2>
  <p>...</p> <p>...</p> <p>...</p>

Notez l'indentation pour faciliter la lecture.

22

Cohérence§

⚠ L'enchaînement des niveaux de titre doit être cohérent :

Avertissement

« Mais si le <h2> ne se différencie pas assez du <h1> visuellement, j'ai le droit de mettre un <h3> à la place ? »

→ non; HTML doit être cohérent avec la structure du document. Pour changer la typographie, on modifiera plutôt le CSS.

23
Cohérence (suite)§

NB : ces règles de cohérence ne sont pas normatives, leur non-respect n'est pas signalé par le valideur, mais il est tout de même à proscrire.

Avertissement

C'est donc à vous d'être attentifs à bien les respecter.

24
Exercice§
  1. Téléchargez le texte correspondant à l'exemple ci-avant en utilisant les balises <p> et <hN>.

    NB : la mise en forme sera différente, mais cherchez surtout à reproduire la structure logique du document.

  2. Téléchargez le modèle HTML correspondant à l'exemple, et recopiez votre code à l'intérieur de la balise <body> . Ce modèle contient un lien vers la feuille de style appropriée.

Dans les deux cas, ne tenez pas compte pour l'instant des mots en gras, italique et souligné.

25

Sections§

Les titres définissent en fait une structure de plus haut niveau :

Une section contient donc

  • un titre,
  • éventuellement des paragraphes,
  • éventuellement une ou plusieurs section(s) de niveau suivant.
26

Sections en HTML§

27
Arbre avec des sections implicites§

graph { node [ shape=elipse, style=filled ] body -- h1 -- "Ma dissertation" body -- h2_1 -- "Thèse" body -- p_1 -- "...1" body -- h3_1 -- "Argument 1" body -- p_2 -- "...2" body -- p_3 -- "...3" body -- h3_2 -- "Argument 2" body -- p_4 -- "...4" body -- p_5 -- "...5" body -- h2_2 -- "Anti-thèse" body -- h3_3 -- "Contre-argument 1" body -- p_6 -- "...6" body -- p_7 -- "...7" body -- h3_4 -- "Contre-argument 2" body -- p_8 -- "...8" body -- p_9 -- "...9" body -- h2_3 -- "Synthèse" body -- p_10 -- "...10" body [ label="<body>", shape=box, style=rounded ] h1 [ label="<h1>", shape=box, style=rounded ] h2_1 [ label="<h2>", shape=box, style=rounded ] h2_2 [ label="<h2>", shape=box, style=rounded ] h2_3 [ label="<h2>", shape=box, style=rounded ] h3_1 [ label="<h3>", shape=box, style=rounded ] h3_2 [ label="<h3>", shape=box, style=rounded ] h3_3 [ label="<h3>", shape=box, style=rounded ] h3_4 [ label="<h3>", shape=box, style=rounded ] p_1 [ label="<p>", shape=box, style=rounded ] p_2 [ label="<p>", shape=box, style=rounded ] p_3 [ label="<p>", shape=box, style=rounded ] p_4 [ label="<p>", shape=box, style=rounded ] p_5 [ label="<p>", shape=box, style=rounded ] p_6 [ label="<p>", shape=box, style=rounded ] p_7 [ label="<p>", shape=box, style=rounded ] p_8 [ label="<p>", shape=box, style=rounded ] p_9 [ label="<p>", shape=box, style=rounded ] p_10 [ label="<p>", shape=box, style=rounded ] "...1" [ label="..." ] "...2" [ label="..." ] "...3" [ label="..." ] "...4" [ label="..." ] "...5" [ label="..." ] "...6" [ label="..." ] "...7" [ label="..." ] "...8" [ label="..." ] "...9" [ label="..." ] "...10" [ label="..." ] }

28
Illustration avec sections§
<h1>Ma dissertation</h1>
<section>
  <h2>Thèse</h2>
  <p>Paragraphe d'introduction</p>
  <section>
    <h3>Argument 1</h3>
    <p>...</p> <p>...</p> <p>...</p>
  </section><section>
    <h3>Argument 2</h3>
    <p>...</p> <p>...</p> <p>...</p>
  </section>
</section><section>
  <h2>Antithèse</h2>
  <section>
    <h3>Contre-argument 1</h3>
    <p>...</p> <p>...</p> <p>...</p>
  </section><section>
    <h3>Contre-argument 2</h3>
    <p>...</p> <p>...</p> <p>...</p>
  </section>
</section><section>
  <h2>Synthèse</h2>
  <p>...</p> <p>...</p> <p>...</p>
</section>
29
Arbre avec des sections explicites§

graph { node [ shape=elipse, style=filled ] body -- h1 -- "Ma dissertation" body -- sec1 sec1 -- h2_1 -- "Thèse" sec1 -- p_1 -- "...1" sec1 -- sec2 sec2 -- h3_1 -- "Argument 1" sec2 -- p_2 -- "...2" sec2 -- p_3 -- "...3" sec1 -- sec3 sec3 -- h3_2 -- "Argument 2" sec3 -- p_4 -- "...4" sec3 -- p_5 -- "...5" body -- sec4 sec4 -- h2_2 -- "Anti-thèse" sec4 -- sec5 sec5 -- h3_3 -- "Contre-argument 1" sec5 -- p_6 -- "...6" sec5 -- p_7 -- "...7" sec4 -- sec6 sec6 -- h3_4 -- "Contre-argument 2" sec6 -- p_8 -- "...8" sec6 -- p_9 -- "...9" body -- sec7 sec7 -- h2_3 -- "Synthèse" sec7 -- p_10 -- "...10" body [ label="<body>", shape=box, style=rounded ] h1 [ label="<h1>", shape=box, style=rounded ] sec1 [ label="<section>", shape=box, style=rounded ] sec2 [ label="<section>", shape=box, style=rounded ] sec3 [ label="<section>", shape=box, style=rounded ] sec4 [ label="<section>", shape=box, style=rounded ] sec5 [ label="<section>", shape=box, style=rounded ] sec6 [ label="<section>", shape=box, style=rounded ] sec7 [ label="<section>", shape=box, style=rounded ] h2_1 [ label="<h2>", shape=box, style=rounded ] h2_2 [ label="<h2>", shape=box, style=rounded ] h2_3 [ label="<h2>", shape=box, style=rounded ] h3_1 [ label="<h3>", shape=box, style=rounded ] h3_2 [ label="<h3>", shape=box, style=rounded ] h3_3 [ label="<h3>", shape=box, style=rounded ] h3_4 [ label="<h3>", shape=box, style=rounded ] p_1 [ label="<p>", shape=box, style=rounded ] p_2 [ label="<p>", shape=box, style=rounded ] p_3 [ label="<p>", shape=box, style=rounded ] p_4 [ label="<p>", shape=box, style=rounded ] p_5 [ label="<p>", shape=box, style=rounded ] p_6 [ label="<p>", shape=box, style=rounded ] p_7 [ label="<p>", shape=box, style=rounded ] p_8 [ label="<p>", shape=box, style=rounded ] p_9 [ label="<p>", shape=box, style=rounded ] p_10 [ label="<p>", shape=box, style=rounded ] "...1" [ label="..." ] "...2" [ label="..." ] "...3" [ label="..." ] "...4" [ label="..." ] "...5" [ label="..." ] "...6" [ label="..." ] "...7" [ label="..." ] "...8" [ label="..." ] "...9" [ label="..." ] "...10" [ label="..." ] }

Indication

À ce stade, on pourrait arguer que l'ordinateur peut reconstruire la structure des sections à partir des niveaux de titre, et donc qu'il est superflu d'alourdir le code HTML avec cette information redondante.

Lorsqu'on étudiera CSS et les scripts (l'an prochain), on comprendra mieux l'intérêt de rendre cette structure explicite.

30
Exercice§

Améliorez votre version de l'exemple ci-avant en ajoutant les balises <section>.

31

Redondance et compatibilité§

RMQ: l'emboîtement des sections suffit à déterminer leur niveau, donc l'information portée par le numéro de titre est redondante.

→ en HTML5, on peut en théorie n'utiliser que <h1> à tous les niveaux,

  • les navigateurs compatibles adapteront la typographie en fonction de la « profondeur ».

⚠ cependant, en pratique on évitera de le faire, car

  • ce n'est pas compatible avec les anciens navigateurs,
  • certains outils (moteurs de recherche, lecteurs d'écran) attendent un unique h1 dans la page.
32

Redondance et compatibilité§

Indication

Pour ces raisons, le valideur HTML du W3C émet un warning lorsqu'une page contient plusieurs h1.

33
Illustration§
<h1>Ma dissertation</h1>
<section>
  <h1>Thèse</h1>
  <p>Paragraphe d'introduction</p>
  <section>
    <h1>Argument 1</h1>
    <p>...</p> <p>...</p> <p>...</p>
  </section><section>
    <h1>Argument 2</h1>
    <p>...</p> <p>...</p> <p>...</p>
  </section>
</section><section>
  <h1>Antithèse</h1>
  <section>
    <h1>Contre-argument 1</h1>
    <p>...</p> <p>...</p> <p>...</p>
  </section><section>
    <h1>Contre-argument 2</h1>
    <p>...</p> <p>...</p> <p>...</p>
  </section>
</section><section>
<h1>Synthèse</h1>
  <p>...</p> <p>...</p> <p>...</p>
</section>
34

Sections spécialisées§

Les balises suivantes représentent des sections avec une sémantique particulière.

<main> contenu principal de la page
<article> contenu auto-suffisant
<aside> encart
<header> en-tête de la section parent (ou du doc)
<footer> pied de la section parent (ou du doc)
<nav> section contenant des liens de navigation
35
Exemple§
<!-- this examples comes from http://www.w3.org/TR/html5/ -->
<body>
 <header>
  <h1>My wonderful blog</h1>
  <p>My tagline</p>
 </header>
 <aside>
  <!-- this aside contains two sections that are tangentially related
  to the page, namely, links to other blogs, and links to blog posts
  from this blog -->
  <nav>
   <h1>My blogroll</h1>
   <ul>
    <li><a href="http://blog.example.com/">Example Blog</a>
   </ul>
  </nav>
  <nav>
   <h1>Archives</h1>
   <ol reversed>
    <li><a href="/last-post">My last post</a>
    <li><a href="/first-post">My first post</a>
   </ol>
  </nav>
 </aside>
 <aside>
  <!-- this aside is tangentially related to the page also, it
  contains twitter messages from the blog author -->
  <h1>Twitter Feed</h1>
  <blockquote cite="http://twitter.example.net/t31351234">
   I'm on vacation, writing my blog.
  </blockquote>
  <blockquote cite="http://twitter.example.net/t31219752">
   I'm going to go on vacation soon.
  </blockquote>
 </aside>
 <article>
  <!-- this is a blog post -->
  <h1>My last post</h1>
  <p>This is my last post.</p>
  <footer>
   <p><a href="/last-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <article>
  <!-- this is also a blog post -->
  <h1>My first post</h1>
  <p>This is my first post.</p>
  <aside>
   <!-- this aside is about the blog post, since it's inside the
   <article> element; it would be wrong, for instance, to put the
   blogroll here, since the blogroll isn't really related to this post
   specifically, only to the page as a whole -->
   <h1>Posting</h1>
   <p>While I'm thinking about it, I wanted to say something about
   posting. Posting is fun!</p>
  </aside>
  <footer>
   <p><a href="/first-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <footer>
  <nav>
   <a href="/archives">Archives</a><a href="/about">About me</a><a href="/copyright">Copyright</a>
  </nav>
 </footer>
</body>
36

Quelques balises utiles§

Nous allons maintenant présenter un certain nombre de balises qui peuvent être utilisées à l'intérieur des balises de paragraphe ou de titre.

37

Balises génériques§

Voici quelques balises utiles, avec leur sémantique, et leur mise en forme par défaut.

<em> emphase italique
<strong> emphase forte gras
<dfn> définition italique
<cite> titre d'ouvrage italique
<q> citation guillemets
38
Exemple§
Selon <cite>Wikipedia</cite>, la <dfn>prose</dfn> est :
<q>la forme <em>ordinaire</em> de l'expression verbale.</q>

Selon Wikipedia, la prose est : la forme ordinaire de l'expression verbale.

Selon Wikipedia, la prose est : la forme ordinaire de l'expression verbale.

39

Documentation informatique§

Les balises suivantes sont utiles pour écrire des documentations informatiques (ou scientifiques).

<code> code informatique non-prop
<kbd> entrée clavier non-prop
<samp> sortie de programme non-prop
<var> variable italique
40
Exemple§
La boucle <code>while</code> affiche <samp>1 2 3 4</samp>,
soient toutes les valeurs prises par <var>i</var>.

La boucle while affiche 1 2 3 4, soient toutes les valeurs prises par i.

La boucle while affiche 1 2 3 4, soient toutes les valeurs prises par i.

41

Document évolutif§

Les balises suivantes sont utiles pour faire apparaître les évolutions d'un document.

<ins> texte inséré souligné
<del> texte supprimé barré
42
Exemple§
Je <del>ne</del> connais
<del>rien à</del><ins>bien</ins> HTML.

Je ne connais rien àbien HTML.

Je ne connais rien àbien HTML.

43

Balises historiques§

Ces balises datent des premières versions de HTML, où la séparation fond / forme n'était pas encore de rigueur.

<b> texte en gras
<i> texte en italique
<u> texte souligné
<br> saut de ligne (sans contenu)

Avertissement

Elles sont encore valides en HTML5, (et donc acceptées par le valideur) mais la plupart du temps, il faut leur préférer une balise avec une sémantique plus précise.

44
Exercice§

Reprenez votre code HTML reproduisant l'exemple ci-avant, et ajoutez les balises manquantes.

Le rendu doit maintenant être très proche de celui de l'exemple.

45

Listes§

46

Motivation§

Une liste est un paragraphe d'un type particulier, contenant une énumération d'éléments.

47

Liste non ordonnée§

<ul>
  <li>sucre</li>
  <li>céréales</li>
  <li>lait</li>
</ul>
  • sucre
  • céréales
  • lait
48

Liste ordonnée§

<ol>
  <li>sucre</li>
  <li>céréales</li>
  <li>lait</li>
</ol>
  1. sucre
  2. céréales
  3. lait
49

Remarque§

On note que :

Dans une liste ordonnée, les éléments sont automatiquement numérotés (mais cette numérotation peut être contrôlée avec une feuille de style).

50

Styles alternatifs pour les listes§

  • sucre
  • céréales
  • lait
  1. sucre
  2. céréales
  3. lait
51
Exercice§

Dans l'exemple ci-avant pouvez-vous identifier une liste ? Reprenez votre code HTML reproduisant cet exemple et modifiez-le en conséquence.

Le rendu doit maintenant être identique à celui de l'exemple.

52

Liens et contenus embarqués§

53

URLs§

_images/url-structure.svg

Avertissement

Malgré cette similitude, les ressources ne correspondent pas toujours à des fichiers.

54

URL relative§

"" l'URL de base
"toto" la ressource toto dans le "dossier" courant
"." le "dossier" courant
".." le "dossier" parent du "dossier" courant
"/" le "dossier" racine du serveur

On peut ensuite combiner ces éléments en les séparant par "/".

Étant données une URL de base et une URL relative, on peut calculer l'URL absolue correspondante simplement par un jeu d'écriture.

55

URL relative§

Indication

Plus précisément, c'est une manipulation purement syntaxique, qui est donc indépendante de la structure des éventuels fichiers sur le serveur.

Il est même possible que l'URL relative et le nom de fichier relatif donnent des résultats différents, exemple :

  • http://example.org/pchampin/ correspond au répertoire /home/pchampin/public_html/ sur le serveur ;
  • l'URL relative ../jdoe/ conduit à l'URL http://example.org/jdoe/, qui correspond au répertoire /home/jdoe/public_html/,
  • alors que le nom de fichier relatif ../jdoe/ conduit au répertoire /home/pchampin/jdoe/ qui n'a pas d'URL correspondante (et d'ailleurs n'existe probablement pas).
56

Exercices§

Combinez chacune des URLs de base de gauche avec chacune des URLs relatives de droite.

URLs absolues URLs relatives
  • .
  • tata
  • ../tata
  • baz/tutu
  • ../../there
  • /somewhere/else
57
Exercices (suite)§

Considérant l'URL de base http://example.com/foo/bar/p1.html , donnez une URL relative pour :

58

Image§

59

Image§

Avertissement

La description textuelle est obligatoire pour les situations où l'image ne peut pas être affichée :

  • elle n'a pas pu être chargée,
  • elle n'est pas reconnue par le navigateur,
  • le navigateur ne peut pas afficher d'image (e.g. lecteur d'écran)...
60

Exemple§

<figure>
  <img src="_static/monalisa-small.jpg"
    alt="Portrait de Mona Lisa">
  <figcaption>source:
    <a href="http://en.wikipedia.org/wiki/File:Mona_Lisa,_by_Leonardo_da_Vinci,_from_C2RMF_retouched.jpg">
      Wikipedia
    </a>
  </figcaption>
</figure>
Portrait de Mona Lisa
source: Wikipedia
61

Images et droit d'auteur§

Avertissement

Le fait qu'une image soit disponible sur le Web ne signifie pas que vous avez toute latitude pour la réutiliser sur votre propre site.

Ce qu'il faut faire :

62
Images réutilisables§
63

Liens§

Bienvenue à
<a href="http://iut.univ-lyon1.fr/">l'IUT de Lyon</a>

Bienvenue à l'IUT de Lyon

64

Contenu de la balise <a>§

Rien n'empêche bien sûr la balise <a> de contenir d'autres balises.

Bienvenue à
<a href="http://iut.univ-lyon1.fr/">
  l'<strong>IUT</strong> de Lyon
  <img src="_static/logo-lyon1.jpg" alt="Logo de Lyon1" />
</a>

Bienvenue à l'IUT de Lyon Logo de Lyon1

65

Lien interne§

66

Lien interne§

Avertissement

Deux éléments du même document ne peuvent pas avoir la même valeur pour l'attribut id (ce qui serait contradictoire avec la notion d'identifiant).

Dans les anciennes versions d'HTML, on utilisait une balise vide de la forme:

<a name="identifier">

mais cette syntaxe est obsolète.

67
Exemples§
<a href="#sec1">
  pointe vers le fragment #sec1 du document courant</a>
<a href="other.html#sec2">
  pointe vers le fragment #sec2 d'un autre document</a>
<a href="http://en.wikipedia.org/wiki/Lyon#Details">
  pointe vers la section "Détails" d'un article
  Wikipedia</a>

<section id="sec1">
  La section vers laquelle pointe le 1er lien ci-dessus.
  ...</section>
68

Exercice : livre dont vous êtes le héros§

Téléchargez ce fichier html. Il contient un livre dont vous êtes le héros minimaliste.

  1. Faites en une version interactive avec des liens internes.
  2. Faites en une version interactive où chaque entrée est une page HTML distincte (en utilisant ces fichiers HTML).
69

Organisation des fichiers§

Lorsque le nombre de fichiers constituant un site croît, il devient important de penser leur organisation. Quelques conseils :

70
Exemple§
├ assets/
│ ├ style.css
│ ├ img1.png
│ └ ...
├ index.html
├ page1.html
├ page2.html
│
├ sous-site1/
│ ├ assets/
│ │ └ ...
│ ├ index.html
│ └ page2.html
└ sous-site2/
  └ ...
71

Vidéo§

En plus des images, HTML5 permet d'inclure des vidéos, grâce à la balise <video>.

<figure>
   <video controls src="_static/Chrome_ImF.webm">
     Ici, une vidéo représentant...</video>
   <figcaption>source:
      <a href="http://google.com">Google</a>
   </figcaption>
</figure>
source: Google

Indication

Le contenu textuel de la balise <video>, affiché uniquement si le navigateur ne supporte pas cette balise, joue le rôle de l'attribut alt des images.

72

Attributs de la balise video§

La balise video supporte les attributs suivants :

NB : à part poster, ces attributs n'ont pas besoin de valeur ; la simple présence de l'attribut active son effet. Il n'est donc même pas indispensable de leur donner une valeur ; au lieu de autoplay="", on peut écrire simplement autoplay.

73
Attributs de la balise video (exemple)§
<figure>
  <video src="_static/Chrome_ImF.webm"
        autoplay loop muted>
    Ici, une vidéo représentant...</video>
  <video src="_static/Chrome_ImF.webm"
        controls poster="_static/sun.png">
    Ici, une vidéo représentant...</video>
  <figcaption>source vidéo:
    <a href="http://google.com">Google</a>, image:
    <a href="https://openclipart.org/detail/551/sun-woodcut">johnny_automatic</a>
  </figcaption>
</figure>
source vidéo: Google, image: johnny_automatic
74

Problème de compatibilité§

Les navigateurs ne supportent pas tous les même formats vidéo. Il peut donc être nécessaire de fournir plusieurs sources alternatives pour la même vidéo.

La balise vidéo peut donc, à la place de l'attribut src, contenir plusieurs balises <source> ayant chacune :

  • un attribut src avec l'URL d'une version de la vidéo,
  • éventuellement un attribut type décrivant son format.

Avec les formats WebM et MP4 (H264+AAC), on couvre la grande majorité des navigateurs.

75
Problème de compatibilité (exemple)§
<figure>
   <video autoplay loop muted>
     <source src="_static/Chrome_ImF.webm"
           type='video/webm; codecs="vp8, vorbis"'>
     <source src="_static/Chrome_ImF.mp4"
           type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
     Ici, une vidéo représentant...
   </video>
   <figcaption>source:
      <a href="http://google.com">Google</a>
   </figcaption>
</figure>
source: Google
76

HTML avancé§

77

Entités§

Les caractères suivants ont une signification spéciale en HTML, donc il faut utiliser un code spécial (entité) pour les afficher :

< &lt; lower than
> &gt; greater than
" &quote; quote
' &apos; apostrophe
& &amp; ampersand
78

Autres entités§

Il existe d'autres entités pour de nombreux caractères non-ASCII, par exemple &eacute; pour é, &Agrave; pour À, &ccedil; pour ç...

Cependant, HTML supporte désormais unicode, donc ces entités ne sont plus nécessaires. En revanche, elles nuisent à la lisibilité du code HTML. Leur utilisation est donc déconseillée.

79

Commentaires§

En HTML, tout texte commençant par <!-- et se terminant par --> est considéré comme un commentaire. Tout ce qu'il contient (texte et balises) sera ignoré.

hello <!--
  <strong>wonderful</strong>
--> world

hello world

80

Utilité§

Les commentaires servent à

Notons que le commentaire ne concerne pas que l'affichage :

<link rel="stylesheet" type="text/css" href="style1.css"/>
<!--
<link rel="stylesheet" type="text/css" href="style2.css"/>
  inhibe temporairement la 2e feuille de style -->
81

Méta-données§

<meta charset="utf-8">
<meta name="description"
      content="apprenez plus de tours en HTML">
<meta name="author"
      content="Pierre-Antoine Champin">
<meta name="keywords" content="html web iut">

Indication

On a déjà rencontré la balise <meta> pour spécifier l'encodage du document.

82

Méta-données pour les robots§

Avec le nom robot, la balise <meta> peut être utilisée pour fournir des instructions aux moteurs de recherche :

<meta name="robot" content="index,nofollow">
83

Langue des méta-données§

Les méta-données peuvent être fournies dans différentes langues, spécifiées dans l'attribut lang.

<meta name="description" lang="en"
      content="learn advanced tricks in HTML">
<meta name="description" lang="fr"
      content="apprenez plus de tours en HTML">
84

Span et div§

HTML fournit deux balises neutres (c.à.d. sans sémantique particulière) :

Ces éléments sont utiles pour rajouter de la structuration au document, notamment en portant des classes personnalisées.

Avertissement

Même lorsqu'on utilise des classes personnalisées, il est préférable de les associer, autant que possible, à une balise dont la sémantique est proche, plutôt qu'à une balise neutre.

85

Tableaux§

86

Structure d'un tableau§

Un tableau (ou une table) permet d'organiser des information sur deux dimensions.

Une table (table) est composée d'une éventuelle légende (<caption>) et de lignes (rows), elles-mêmes composées de cellules (cells).

On considère deux sortes de cellules : les cellules d'en-tête (header cells) et les cellules de données (data cells).

Table example
the table
a row
a header cell a data cell another data cell
87

Tableau en HTML§

Les différents éléments d'un tableau sont représentés par

table <table>
caption <caption> (premier enfant de <table>)
row <tr>
header cell <th>
data cell <td>

Il est possible d'améliorer l'accessibilité de l'association des titres avec les cellules de données grâce aux attributs scope et headers.

88

Exemple§

<table>
  <caption>Hot drink prices</caption>
  <tr>
    <td></td>
    <th scope="col">Medium</th>
    <th scope="col">Large</th>
  </tr><tr>
    <th scope="row">Americano</th>
    <td>1.50€</td>
    <td>1.90€</td>
  </tr><tr>
    <th scope="row">Latte</th>
    <td>1.90€</td>
    <td>2.10€</td>
  </tr><tr>
    <th scope="row">Cappucino</th>
    <td>1.90€</td>
    <td>2.10€</td>
  </tr></table>
89

Exemple§

Hot drink prices
Medium Large
Americano 1.50€ 1.90€
Latte 1.90€ 2.10€
Cappucino 1.90€ 2.10€
90

Cellules étendues§

Une cellule peut s'étendre sur plusieurs lignes (vers le bas) et/ou colonnes (vers la droite) à l'aide des attributs rowspan et colspan.

Indication

Dans ce cas, le nombre de <td> ou <th> pourra varier d'une <tr> à l'autre...

Exemple
rowspan=2colspan=2.
.colspan=2 rowspan=2
..
91

Exercice§

Reproduisez le modèle ci-dessous représentant une calculatrice.

calculette
92

Pour aller plus loin§

Pour plus de détails, voir http://www.w3.org/TR/html5/tabular-data.html#table-model .

93

Tableaux et mise en pages§

Avant que CSS ne s'impose, les tableaux ont souvent été utilisés pour faciliter la mise en page des sites (en tête et pied de page, menu latéral, présentation sur plusieurs colonnes).

Aujourd'hui, cette pratique est fortement déconseillée, car elle est beaucoup moins flexible que l'utilisation de CSS pour le positionnement.

C'est aussi une violation de la séparation entre fond et forme : l'utilisation de <table> se justifie lorsque les éléments situés sur la même ligne (resp. la même colonne) ont quelque-chose qui les relie.

94
Contre-exemple§

L'utilisation d'un tableau pour afficher une galerie d'image sur deux colonnes est une mauvaise solution.

Il est plus judicieux d'utiliser CSS pour obtenir le même résultat, d'autant que ce résultat pourra adapter le nombre de colonnes (éventuellement pour le réduire à 1) en fonction du type d'affichage.

95

Formulaires et interactivité§

96

Champs de saisie§

Certaines pages HTML comportent des champs permettant à l'utilisateur de saisir de l'information. La balise offrant cette possibilité est la balise <input>.

<input/>

97

Types de champs§

HTML offre un certain nombre de types de champs, les plus utilisés étant

<input type="text"/>
<input type="password"/>
<input type="checkbox"/>
<input type="radio"/>
<input type="file"/>
<input type="number"/>
<input type="range"/>
<input type="date"/>
<input type="color"/>

NB : HTML définit d'autres types de champs, mais tous ne sont pas encore largement implémentés.

98

Libellé§

Les champs de saisie doivent être associés à un libellé. L'association du libellé au champ explicite la sémantique du document, ce qui permet notamment d'améliorer :

Ceci est représenté en encapsulant le libellé (n'importe quel code HTML) et la balise <input> dans une balise <label>.

99

Libellé§

<div class="field">
  <label>Nom : <input></label>
</div><div class="field">
  <label><input type="checkbox"/> tarif réduit</label>
</div>
100

Libellé§

Une autre méthode consiste à

Par exemple :

<div class="field"><label for="name">Nom :</label>
  <input id="name"/></div>
<div class="field"><label for="gname">Prénom :</label>
  <input id="gname"/></div>
101
Regroupement de champs§

Les champs de saisie peuvent être associés dans une balise <fieldset> contenant une légende dans la balise <legend> (premier enfant de <fieldset>).

102
Regroupement de champs§
<fieldset>
  <legend>Adresse de livraison</legend>
  <div class="field"><label for="addr_street">Rue :</label>
    <input id="addr_street"/></div>
  <div class="field"><label for="addr_city">Ville :</label>
    <input id="addr_city"/></div>
  <div class="field"><label for="addr_country">Pays :</label>
    <input id="addr_country"/></div>
</fieldset>
Adresse de livraison
103

Liste§

Un autre type de champ permet de sélectionner (ou ou plusieurs) éléments dans une liste.

<select>
  <option>Georges</option>
  <option>John</option>
  <option>Paul</option>
  <option>Ringo</option>
</select>

L'attribut multiple autorise la sélection de plusieurs éléments.

104

Zone de texte§

Le champ <input> ne permet pas la saisie de texte sur plusieurs lignes. Pour cela, on utilise le champ <textarea>.

<div class="field">
  <label for="message">Message :</label>
  <textarea>Hello
world</textarea>
</div>

NB : contrairement à <input>, <textarea> attend une balise fermante (car le texte contenu dans le champ est le contenu de la balise).

105

Boutons§

La balise <button> permet de créer des boutons.

<button>Ok</button> <button><em>Annuler</em></button>

Indication

Historiquement, les boutons étaient générés par la balise <input> avec des types spécifiques (button et submit notamment).

106

Formulaire§

Les champs sont généralement regroupés dans une balise <form>, qu'on appelle un formulaire.

Cette balise requiert l'attribut action, qui contient l'URL de la ressource qui traitera les données du formulaire.

107

Champs d'un formulaire§

Pour pouvoir être traités, les champs d'un formulaire doivent tous être identifiés par un nom, porté par l'attribut name :

<form action="_static/formproc/debug">
  <span class="field"><label>e-mail:
  <input type="email" name="email"></span>
  <button>Je m'inscris</button>
</form>
108

Contraintes sur les champs§

Le navigateur peut vérifier les valeurs saisies avant l'envoi des données. En plus de l'attribut type, HTML fournit d'autres attributs comme

required le champ doit être renseigné
min valeur minimale pour un numérique
max valeur maximale pour un numérique
minlength longueur minimale pour un texte
maxlength longueur maximale pour un texte
pattern expression régulière que doit respecter un texte

Avertissement

Cela ne supprime pas la nécessité de vérifier les données envoyées côté serveur. En effet, ces types et attributs peuvent être contournés (utilisation frauduleuse) ou non supportés par certains navigateurs (ignorés dans ce cas).

109

Cases à cocher et boutons radio§

Les champs ayant le type checkbox ou radio vont souvent par groupe. Tous les membres d'un groupe ont le même nom, et se différencient par une valeur portée par un attribut value.

Pour les cases à cocher, le nom se voit affecter l'ensemble des valeurs sélectionnées.

Pour les boutons radio, une seule valeur peut-être affectée (l'activation d'un bouton du groupe désactive automatiquement les autres).

110

Cases à cocher et boutons radio§

<form action="_static/formproc/debug">
  <fieldset>
    <legend>Taille</legend>
    <label><input name="size" type="radio" value="s"/>
      Petite</label>
    <label><input name="size" type="radio" value="m"/>
      Moyenne</label>
    <label><input name="size" type="radio" value="l"/>
      Grande</label>
  </fieldset><fieldset>
    <legend>Garniture</legend>
    <label><input name="topping" type="checkbox" value="ch"/>
      Fromage</label>
    <label><input name="topping" type="checkbox" value="ol"/>
      Olives</label>
    <label><input name="topping" type="checkbox" value="mu"/>
      Champignons</label>
  </fieldset>
  <button>Commander</button></form>
111

Cases à cocher et boutons radio§

Taille
Garniture
112

Boutons et formulaires§

Les boutons ont trois fonctionnalités possibles, portées par l'attribut type :

Les boutons du dernier type sont utiles en conjonction avec des scripts (hors-programme pour cette année).

113

Méthode§

La balise <form> accepte un attribut method, qui peut prendre deux valeurs :

La méthode get doit être employée :

Dans tous les autres cas, la méthode post doit être utilisée.

114

Méthode§

Avertissement

Bien que les données du formulaire n'apparaissent pas directement avec la méthode post, celle-ci n'est pas plus sécurisée que la méthode get : les données circulent en clair sur le réseau.

La bonne manière de faire transiter des données de manière sûre sur le Web consiste à utiliser le protocole HTTPS au lieu de HTTP.

115

Envoi de fichier§

L'emploi de <input type="file"> pour envoyer le contenu d'un fichier nécessite deux précautions au niveau du <form> englobant :

sans quoi c'est le nom du fichier, et non son contenu, qui sera envoyé au serveur.

116

Exercices§

Reprenez votre code représentant une calculatrice et améliorez le pour qu'il soit conforme au modèle ci-dessous.

calculette
117

Exercices§

Ajoutez ensuite la ligne suivante dans le <head> de votre document :

<script type="text/javascript" src="http://champin.net/enseignement/intro-web/_static/exo_calculette/calculette.js">
</script>

et essayez votre calculette...

118

Exercices§

Dans un nouveau document, créer un formulaire (par exemple, pour commander des pizzas), en expérimentant les différents types de champs avec le processeur fourni à l'adresse suivante  :

https://perso.liris.cnrs.fr/pierre-antoine.champin/enseignement/intro-web/_static/formproc/debug

119