HTML

Raconté par Vincent Jugé
sur la base d'un cours créé par Rémi Forax

Historique des versions

HTML	1991
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML 5	2014

Élément

Un élément est défini par une balise de début et une balise de fin.
Par exemple, pour mettre en gras,
on utilise <b> et </b>.

En fait on utilisera surtout CSS.

Par exemple, pour mettre en <b>gras</b>

Entités

Les caractères < et > sont réservés
pour déclarer des éléments.
Il faut une façon de dé-spécialiser ces caractères.

caractère	entité	description
<	<	less than
>	>	greater than
&	&	ampersand
		non-breakable space

Commentaire

Il est possible d'indiquer des commentaires
entre les balises .


<!--
 Ceci est un commentaire dans le HTML qui ne sera pas affiché
-->

Exemple de document

Un document est commence par la balise html ;
l'en-tête (méta-données) sont contenues dans head ;
le corps du texte est contenu dans body ;
h1 indique un titre de rubrique ;
p définit un paragraphe.


<html>
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>C'est le premier paragraphe</p>
    <p>Et voici le second paragraphe</p>
  </body>
</html>

document.html


<html>
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>C'est le premier paragraphe</p>
    <p>Et voici le second paragraphe</p>
  </body>
</html>

Arbre d'éléments

Les éléments sont organisés sous forme d'arbre.
Attention : l'ordre des fils d'un même nœud est important !

Arbre : l'arbre DOM (Document Object Model)


<html>
 <body>
  <h1>Hello</h1>
  <p>C'est le premier paragraphe</p>
  <p>Et voici le second paragraphe</p>
 </body>
</html>

Élément entrelacé

Les éléments entrelacés sont interdits :

impossible de créer l'arbre correspondant !

Exemple qui ne marche pas

Exemple <b>qui <i>ne</b> marche pas</i>

La plupart des navigateurs supportent quand même les constructions invalides
mais ce n'est pas le cas de tous les outils qui lisent le HTML (crawlers par exemple).

Élément sans balise fermante

Certains éléments n'ont pas de balise fermante,
comme <br> par exemple.


<p>
 Ceci est un paragraphe
<br>
 sur plusieurs lignes
</p>

La norme XHTML permet d'écrire ces balises comme ceci :
<br/>.

Élément avec attribut

Certains éléments définissent des attributs

Il existe trois formes d'attributs :

<tag attr="value">
<tag attr=value>
<tag attr>


<p>
 Ceci <a href="www.univ-eiffel.fr">est un lien</a>
</p>

Éléments standards

La norme HTML 5 définit beaucoup trop
d'éléments pour tous les lister.

Voici les principaux organisés en catégories :

éléments liés au texte
éléments de structure
éléments multi-média
éléments de formulaire (vu plus tard)
éléments du document

⚠ Catalogue ! ⚠

Éléments liés au texte

Élément	Commentaire
<b> ou <strong>	en gras (bold)
<i> ou <em>	en italique
<small>	en petit
~~<s>~~	barré (strike)
^<sup>/_<sub>	exposant/indice
`<code>`	partie de programme

Éléments de structure

Éléments de structure (simple)

Élément	Commentaire
section	section
h1, h2, h3, h4, h5, h6	titre de section (headings)
p	paragraphe
pre	comme à la machine à écrire (preformatted)
blockquote	citation

Éléments de structure (simple)

Un exemple


<h1>Titre du document</h1>
<section>
  <h2>Titre de section</h2>
  <p>
    Premier paragraphe
  </p>
  <pre>
    Second paragraphe préformaté
  </pre>
</section>
<section>
  <h2>Titre autre section</h2>
  <blockquote>
    C'est trop bien le HTML !
  </blockquote>
</section>

Éléments de structure (simple)

Même exemple vu sous la forme d'un arbre

arbre de balises correspondant document précédent

Éléments de structure (ol)

Les listes ordonnées :

premier item
second item

<ol>
 <li>premier item</li>
 <li>second item</li>
</ol>

li = item de liste (list item)

Les seuls enfants autorisés pour une balise ol sont des balises li :
pas de texte, pas de balises autre que li !

Éléments de structure (ul)

Les listes non-ordonnées :

premier item
second item

<ul>
 <li>premier item</li>
 <li>second item</li>
</ul>

Les seuls enfants autorisés pour une balise ul sont des balises li !

Éléments de structure (dl)

Les listes de définitions

HTML: HyperText Markup Language...
HTTP: The Hypertext Transfer Protocol...

<dl>
 <dt>HTML</dt>
 <dd>HyperText Markup Language, ...</dd>
 <dt>HTTP</dt>
 <dd>The Hypertext Transfer Protocol ...</dd>
</dl>

dt = definition title, dd = definition data

Les seuls enfants autorisés pour une balise dl sont des balises dt et dd !

Éléments de structure (table)

Les tableaux à 2 dimensions

Azote	N₂
Oxygène	O₂


<table>                                   
  <tr>
    <td>Azote</td><td>N<sub>2</sub></td>
  </tr>
  <tr>
    <td>Oxygène</td><td>O<sub>2</sub></td>
  </tr>
</table>

tr = table row, td = table data

Éléments de structure (table)

	Symbole	% dans l'air
Azote	N₂	78 %
Oxygène	O₂	20 %


<table>  
  <thead>
    <tr> <th></th><th>Symbole</th><th>% dans l'air</th> </tr>
  </thead>
  <tbody>                                 
    <tr> <th>Azote</th><td>N<sub>2</sub></td><td>78 %</td> </tr>
    <tr> <th>Oxygène</th><td>O<sub>2</sub></td><td>20 %</td> </tr>
  </tbody>
</table>

thead = table head, tbody = table body, th = table header

Les seuls enfants autorisés pour une balise tr sont des balises th ou td !

Éléments multi-media

Éléments multi-media (lien)

les liens externes


<a href="http://www.w3c.org/">texte</a>

les liens internes
déclaration :


<a id="foo">texte</a>

référence :


<a href="#foo">texte</a>

On peut bien sûr combiner les deux.

                        
<a href="http://www.bar.com/hello.html#foo">texte</a>

Éléments multi-media (iframe)

Permet d'inclure un document dans un document.


<iframe src="html.html#/25"
        width="450"
        height="200">
</iframe>

Éléments multi-media (image)

Enquire, name used by Tim Berners-Lee before the Web


<img src="images/html/enquire.jpg"
     width="361"
     height="282"
     alt="Enquire, name used by Tim Berners-Lee before the Web">

alt est utilisé par les clients HTML qui ne sont pas graphiques.

Éléments multi-media
(formats d'image)

PNG	Bitmap, compression sans perte
GIF	Bitmap, compression sans perte, perte si réduction de la palette
JPEG	Bitmap, compression avec perte
SVG	Vectoriel

Éléments multi-media (audio)


<audio controls>
  <source src="images/html/upem.oga" type="audio/ogg">
  <source src="images/html/upem.mp3" type="audio/mpeg">
  Sorry, no audio for you.
</audio>

Le format mp3 est supporté par tous les browsers.
ogg (format libre !) n'est supporté
ni par Internet Explorer ni par Safari.

Éléments multi-media (vidéo)


<video width="640"
       height="360"
       poster="images/html/upem-poster.jpg"
       controls>
  <source src="images/html/upem.ogv" type="video/ogg">
  <source src="images/html/upem.mp4" type="video/mp4">
  Sorry, no video for you.
</video>

Le format mp4 est supporté par tous les browsers.
ogg et webm (formats libres !) ne sont supportés
ni par Internet Explorer ni par Safari.

Éléments multi-media (vidéo)

Éléments du document

Éléments du document (doctype)

Avant la balise html, on doit indiquer la version du HTML.

HTML 5


<!DOCTYPE html>

XHTML 1.0


<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML 4.01


<!DOCTYPE HTML PUBLIC
  "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

Éléments du document (head)

La balise head permet d'indiquer
des propriétés sur le document.

title: permet d'indiquer un titre au document
meta: les méta-données associées au document


<!DOCTYPE html>
<html>
  <head>
    <title>Programmation Web</title>
    <meta charset="UTF-8"> 
  </head>
</html>

Éléments du document (meta)

Méta-données sur le document :

table de caractères (encodage)


<meta charset="UTF-8">

mots-clefs (moteur de recherche)


<meta name="keywords" content="web, html, css, javascript">

auteur


<meta name="author" content="Remi Forax">

Le W3C validator

Comment vérifier facilement si mon code HTML est valide ?

Je dépose mon code sur le W3C validator et je cherche à comprendre les éventuels messages d'erreur pour corriger celles-ci.

Code qui ne passe pas le W3C validator = le chargé de TP se fâchera tout rouge !

Et pour le style ?

Et comment on

ajoute des couleurs ?
change les fontes ?
place les éléments sur l'écran ?
a des placements différents
pour un ordinateur ou un smartphone ?
...

On ne fait pas ça en HTML, on utilise CSS pour cela !

HTML

Historique des versions

Élément

Entités

Commentaire

Exemple de document

document.html

Arbre d'éléments

Élément entrelacé

Élément sans balise fermante

Élément avec attribut

Éléments standards

Éléments liés au texte

Éléments liés au texte

Éléments de structure

Éléments de structure (simple)

Éléments de structure (simple)

Éléments de structure (simple)

Éléments de structure (ol)

Éléments de structure (ul)

Éléments de structure (dl)

Éléments de structure (table)

Éléments de structure (table)

Éléments multi-media

Éléments multi-media (lien)

Éléments multi-media (iframe)

Éléments multi-media (image)

Éléments multi-media(formats d'image)

Éléments multi-media (audio)

Éléments multi-media (vidéo)

Éléments multi-media (vidéo)

Éléments du document

Éléments du document (doctype)

Éléments du document (head)

Éléments du document (meta)

Le W3C validator

Et pour le style ?

Éléments multi-media
(formats d'image)