HTML5

Cette page est une introduction très rapide à HTML5. Pour plus de détail vous pouvez vous reportez à http://www.w3schools.com/html/ et http://www.w3schools.com/html/html5_intro.asp

Nous n’abordons pas ici les formulaires, ni javascript en général.

Généralités

Le web

De façon simpliste, on peut voir le World Wide Web comme un système de partage d’informations appelées ressources (documents, images, video, …). Ce système s’appuie sur une vision client/serveur : Un client demande une ressource (par exemple un document) à un serveur et le serveur la retourne.

Un serveur est un programme qui s’exécute sur une machine et qui dispose de ressources (sous forme de fichiers) ou qui sait comment les produire (en exécutant un programme dont le résultat est la ressource). Une page Web peut donc être un fichier statique ou le résultat de l’exécution d’un programme (écrit dans différents langages comme PHP, python, …) à la demande par le serveur.

Le client peut ensuite afficher la ressource obtenue qui peut contenir des liens vers d’autres ressources.

Techniquement, le web s’appuie sur trois éléments :

  • Un standard d’échange entre le client et le serveur : c’est le protocole http.
  • Un standard pour indiquer une ressource ou une partie d’une ressource : les URL
  • Un standard pour structurer des ressources particulières les pages web : le langage HTML

Nous n’étudierons pas ici le protocole http.

Une URL (Uniform Resource Locator) est une expression qui permet d’adresser une ressource sur Internet 

<protocole>://[user[:password]@]<machine>[:port][/<path>][\#label|? liste paramètres >]]

Les [ ] indiquent des parties optionnelles.

  • protocole : méthode d’accès au document
  • machine : adresse IP ou nom de la machine
  • port : numéro de port sur la machine
  • path : chemin d’accès au document sur la machine
http://www.univ-tln.fr
http://www.paris.org:80/Monuments/Eiffel/info.html
http://localhost:8080/manual/index.html
http://mamachine/cgi-bin/dbquery.php?cleDeTri=nom
ftp://pierre@localhost:4900/personnel/

Les web est donc un ensemble de ressources dont des pages web qui contiennent des liens vers d’autres ressources. Un site web est un ensemble de pages web mais il n’a pas de limites explicites, il s’agit plutôt d’un ensemble de pages cohérentes et qui partagent éventuellement une partie de leur URL (nom de la machine et préfixe du chemin).

Pour accéder à une ressource, il faut donc connaitre son adresse (URL). Certains sites ont pour fonction de permettre de rechercher des pages (les moteurs de recherche).

Le langage HTML décrit la structure indépendamment de la présentation, il est associé à un autre langage appelée CSS (étudié plus tard) dont le rôle est de décrire la présentation (sur un écran, à l’impression, …). Les documents HTML sont statiques, ils peuvent être rendu dynamique à l ‘aide d’un troisième langage appelé Javascript. Il s’agit d’un langage de programmation (à ne pas confondre avec Java) dont les programmes sont exécutés par le navigateur (donc sur la machine de l’utilisateur). C’est la combinaison de HTML, de CSS et de Javascript qui permet de réaliser des applications web.

HTML

HTML (Hypertext Markup Language) est un langage dont l’objectif est de décrire la structure des pages (documents) partagés sur le Web. Le document ci dessous présente un exemple très simple de document HTML (version 5).

simple.html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Mon document</title>
 </head>
 <body>
  <h1>Mon document</h1>
  <p>Ce document est très simple .</p>
  <p>Nous verrons d’autres exemples ensuite.</p>
 </body>
</html>

Pour créer un document HTML, un simple éditeur de texte suffit. En réalité, l’utilisation d’un environnement adapté est un plus. Il en existe des spécifiques (http://bluefish.openoffice.nl/) à HTML/CSS, d’autres le propose en plus de langages programmation (Eclipse, Netbeans, Intellij Idea, …).

Un document HTML peut être ouvert depuis le système de fichier et visualisé directement dans un navigateur Web (Google Chrome, Internet Explorer, Firefox ou Safari). Il peut aussi être mis à disposition d’un navigateur web et accédé à travers une URL.

Dans les salles de TP, il faut placer le document dans le répertoire public_html à la racine de votre compte. Vous pouvez y accéder avec l’URL http://sinfo3/~votrelogin/

La norme (http://www.w3.org/html/wg/drafts/html/CR/) définit si un document est conforme, son respect (Validité syntaxique) est fondamental. Certains navigateurs sont trop laxistes : ils permettent une mauvaise imbrication des balises, et autorisent l’absence d’éléments obligatoires, la présence de balises propriétaires (non normalisées) reconnues seulement par certains navigateurs spécifiques. La conséquence : des pages non compatibles. Il existe un outils de validation : http://validator.w3.org/

La structuration du document est marquée dans le texte avec des balises (étiquettes, tags) Les balises commencent par < et se terminent par >. Un élément HTML possède un nom et est délimité par une balise ouvrante et une balise fermante. Par exemple : 

<title>Ma page personnelle</title>
<p>Un petit texte</p>

Certains éléments appelés éléments vides ne marquent pas du texte. Il n’ont pas de contenu, les balises de début et de fin peuvent être combinées : <img></img> devient <img/>

Des attributs peuvent être ajoutés à un élément, ils précisent celui-ci sans faire partie de son contenu. Le nom de l’attribut apparaît après le nom d’élément dans la balise ouvrante et est suivi du signe “=” puis de la valeur de l’attribut entre guillemets. Les attributs d’un élément forment un ensemble (nom unique, pas d’ordre). 

<img alt="Plan de l’USTV"
     src="http://www.univ-tln.fr/IMG/jpg/planutv.jpg"/>

Les éléments peuvent être imbriqués les uns dans les autres : <p>Retenez ce mot <emph>abracadabra</emph></p> Il ne peut pas y avoir de chevauchement. Tout élément doit être fermé avant ceux qui le contiennent. Un document ainsi structuré forme donc un arbre dont les nœuds sont les éléments et les feuilles des fragments du texte ou des éléments vides.

le document lui-même est composé d’un élément html qui contient deux éléments : head l’entête du document et body le contenu du document.

L’entête doit comprendre un titre (élément title) qui apparaît dans le haut de la fenêtre du navigateur.

Le corps du document (body) est composé d’éléments qui ont soit une sémantique (un sens) précis (form pour les formulaires, table pour les tableaux, img pour les images, …), soit qui sont génériques (div pour un bloc, span pour un fragment de ligne).

HTML5 reprend des éléments de structuration des versions précédentes et introduit de nouveaux éléments (en gras) qui permettent de mieux structurer une page. Nous n’allons pas ici faire une présentation exhaustive (cf. http://www.w3schools.com/tags/) mais présenter les principaux.

Certains servent à marquer des blocs dans la page :

  • <p> : Marque des paragraphes de texte.
  • <h1>,<h2> à <h6> : Marque des titres de niveau décroissant.
  • <blockquote> (extrait cité)
  • <pre> : Du texte préformaté.
  • <article> : Un contenu indépendant.
  • <section> : Un regroupement de contenu dans un thème souvent avec un titre (élements h1, …)
  • <aside> : Regroupe les éléments qui doivent être disposés à côté de l’élément dans lequel il est placé.
  • <header> : Un entête qui permet de regrouper des élément d’introduction pour un document ou une section.
  • <nav> : Regroupe un ensemble de liens de navigation
  • <figure> et <figcaption> : Marque une illustration et sa légende.
  • <footer> : Le bas de page d’un document ou d’une section.

Et d’autre des partie d’un bloc de texte :

  • abbr (un acronyme), address (une adresse), cite (citer le titre d’un travail), code (extrait de programme), q (citation courte), em (mise en valeur), strong (texte important), samp (sortie d’un programme), kbd (une entrée au clavier), var (une variable), <mark> : (texte mis en valeur), <time> Date ou heure.

Finalement, d’autres ont un sens très spécifique comme :

  • progress et meter : barre de progression et jauge.
  • <details> : Marque des détails qu’un utilisateur pour cacher ou voir. <summary> marque l’entête visible d’un détail.
texte.html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Le texte en HTML</title>
 </head>
 <body>
  <h1>Titre</h1>
  <article>
   <h2>Un article</h2>
   <p>
   <em>M. Tim Berners-Lee</em> est l'inventeur
   du <strong>Web</strong>, lisez son livre
   <cite>Weaving the Web</cite>.
   </p>
   <details open="open">
    <summary>Un détail</summary>
     Plus d'informations...
   </details>
   <p><progress value="10" max="30"></progress></p>
   <p><meter value="3" low="10" max="30" min="-1"></meter></p>
   <p><meter value="20" low="10" max="30" min="-1"></meter></p>
  </article>
 </body>
</html>

Images

On insère une image avec l’élément img. L’attribut src indique l’URL de l’image L’attribut alt donne une description textuelle alternative de l’image. 

<img src="maison.png" alt="Ma maison"/>

Hyperliens

Pour pouvoir référencer des parties d’un document, on définit des ancres pour cela on ajoute l’attribut id à un élément qui sera la destination de la référence. La valeur de cet attribut doit être unique dans tout le document. 

<p id="intro">Voilà l’introduction</p>

Il est possible de définir des liens internes, c’est-à-dire vers une section du même document. On utilise l’élément A, l’attribut href indique l’id de l’ancre (préfixée par #), le texte (ou l’image) contenu dans l’élément est utilisé comme étiquette (présenté comme un lien cliquable). 

<p>Ce point est abordé dans
l’<a href="#intro">introduction</a></p>
links.html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Le texte en HTML</title>
 </head>
 <body>
   <h1>Mon document</h1>
   <h2>Table des matières</h2>
    <ul>
     <li><a href="#intro">Introduction</a></li>
     <li><a href="#concl">Conlusion</a></li>
    </ul>
   <h2>Contenu</h2>
    <h3 id="intro">Introduction</h3>
    <p>bla bla</p>
    <h3 id="concl">Conclusion</h3>
    <p>allez lire la <a href="http://www.w3.org/html/wg/drafts/html/CR/">référence</a> et plus précisément la parties sur les
    <a href="http://www.w3.org/html/wg/drafts/html/CR/interactive-elements.html#anchor-points">ancres</a>.
</p>
  </body>
 </html>

Il est possible de définir des liens vers d’autres documents HTML (ou des parties) voire d’autres protocole. On utilise toujours l’élément A, l’attribut href est utilisé pour spécifier l’adresse (URL) de la ressource vers laquelle on veut pointer (absolue ou relative) 

<a href="http://www.univ-tln.fr" > Site de l’USTV</a>
<a href="http://www.univ-tln.fr/~bruno/index.xhtml" > Page de E. Bruno</a>
<a href="http://www.univ-tln.fr/~bruno/index.xhtml#publications"> Publications de E. Bruno</a>
<a href="mailto:bruno@univ-tln.fr">contact</a>
<a href="#publication">Publications de E. Bruno</a>
<a href="Telechargement/accueil.xhtml">Téléchargement</a>

Listes

En HTML, les listes peuvent être non numérotée (à puces) : ul ou numérotée : ol. Chaque élément qui la compose est marqué par li.

Il est aussi possible de marquer des liste de définitions avec dl contenant une alternance d’un terme (dt) et d’une définition dd.

listes.html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Les listes</title>
 </head>
 <body>
  <h2>Une liste non ordonnees</h2>
  <ul>
   <li>Un item</li>
   <li>Un autre item</li>
  </ul>
  <h2>Une enumeration</h2>
   <ol>
    <li>le premier item</li>
    <li>le second item</li>
   </ol>
  <hr/>
  <h2>Une liste de definitions</h2>
  <dl>
   <dt>XML</dt><dd>Extensible Markup Language</dd>
   <dt>XHTML</dt><dd>Extensible HyperText Markup Language</dd>
  </dl>
 </body>
</html>

Tableaux

L’élément table permet de décrire un tableau (“bloc”). Il contient :

  • Un attribut summary qui décrit le contenu.
  • Éventuellement un élément thead qui décrit la l’entête
  • Éventuellement un élément tfoot qui décrit le pied
  • des éléments tbody qui décrivent le contenu,
    • ils sont composés d’une suite de TR (lignes) qui contiennent des TD (cellules) ou des TH (cellules d’entête). Les attributs colspan et rowspan indiquent sur combien de colonnes ou de lignes un TD ou TH s’étale.
table.html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Un tableau</title>
 </head>
 <body>
  <figure>
   <figcaption>Ce tableau décrit l’âge des enfants</figcaption>
   <table>
    <thead>
     <tr><td colspan="2">Identité</td><td>Autre</td></tr>
     <tr><th>Nom</th> <th>Prénom</th> <th>Age</th></tr>
    </thead>
    <tfoot>
     <tr><th>Nom</th> <th>Prénom</th> <th>Age</th></tr>
    </tfoot>
    <tbody>
     <tr><td>Pierre</td><td>Martin</td><td>12 ans</td></tr>
     <tr><td>Jean</td> <td>Durand</td><td>13 ans</td></tr>
    </tbody>
    <tbody>
     <tr><td>Nicole</td><td>Martin</td><td>15 ans</td></tr>
     <tr><td>Sophie</td><td>Durand</td><td>16 ans</td></tr>
    </tbody>
   </table>
   </figure>
 </body>
</html>

Marquage générique (''div'' et ''span'')

Dans le cas où aucun élément standard ne correspond à une zone qui doit être marquée, on utilise div (niveau “bloc”) ou span (niveau “texte”).

On leur associe l’attribut class qui indique un type définit par l’utilisateur ou l’attribut id qui permet de fixer un identifiant.

Ces deux éléments seront très utilisés plus tard lors de la présentation avec des feuilles de style CSS.

Graphiques : SVG et Canvas

cf. http://www.w3schools.com/html/html5_canvas.asp cf. http://www.w3schools.com/html/html5_svg.asp

Audio et Video

A Compléter

cf. http://www.w3schools.com/html/html5_video.asp cf. http://www.w3schools.com/html/html5_audio.asp

API Javascript

A Compléter

Geolocalisation Drap and drop Stockage de données locales Cache d’application (offline) Tâches séparées (web worker) websocket

Sémantique et indexation

A reprendre

Il peut aussi comprendre Une ou plusieurs références à d’autres documents (élément link)

L’entête peut aussi contenir des métadonnées (élément meta) 

<HEAD profile="http :// www .acme .com /profiles /core ">
<TITLE>How to complete Memorandum cover sheets</TITLE>
<META name=" author" content="John  Doe ">
<META name=" copyright " content="&copy ; 1997  Acme  Corp .">
<META name=" keywords " content="corporate ,guidelines , cataloging ">
<META name="date " content="1994 -11 -06 T08 :49:37+00:00 ">
</HEAD>

Ces informations ne sont généralement pas affichées, mais sont très utiles (avec des réserves) en particulier pour les moteurs de recherche qui indexent les documents sur le web. 

<html>
 <head>
  <title>Page personnelle de E . Bruno</title>
  <meta name=" author " content="Emmanuel   Bruno "/>
  <meta name=" description "content="un  premier  exemple  de document "/>
  <link rel="stylesheet " type="text /css" href=" styles.css" />
 </head>
 <body> 
  <h1>Mon document</h1> 
 </body>
</html>

Il est maintenant fortement recommandé de marquer aussi les informations en indiquant précisément leur sémantique et par uniquement la structure dans le but de la présentation. Ainsi plusieurs technique et vocabulaires sont disponibles par exemple : http://www.schema.org/docs/gs.html#microdata_how

, ,