Guide du   routard

My Twitter

Aperçu

Aperçu

My Google+

Cours complet d'HTML 5 -2


On peut également modifier :
·         la taille de la police : <font size="taille"></font>, ou taille est un nombre absolu en unité arbitraire (la taille normale est 3), ou un nombre relatif (+1 pour la taille courante augmentée de 1, -2 pour la taille courante diminuée de 2) ;
·         la nature de la police : <font face="nom de la police"></font>.
On peut combiner les deux, par exemple <font size="12" face="Times New Roman"></font>
Ces balises sont maintenant déconseillées. On peut utiliser em et strong pour l'italique et le gras, et le CSS pour le reste :
·         lettres plus grandes de 10 % : <span style="font-size:1.1em">…</span>
·         lettres plus petites de 10 % : <span style="font-size:0.9em">…</span>
·         souligner : <span style="text-decoration:underline">…</span>
·         barrer : <span style="text-decoration:linethrough">…</span>
·         type de police : <span style="font-family:"Times New Roman" ">…</span>
mais il vaut mieux définir des styles dans un fichier à part et faire appel à ces styles (ce qui simplifie la maintenance des fichiers), par exemple, mettre dans le fichier CSS :
.grand {font-size:1.1em}
.petit {font-size:0.9em}
.souligner {text-decoration:underline}
.barrer {text-decoration:linethrough}
ce qui s'exploite dans le fichier HTML de la manière suivante :
<p>
  Du texte en <span class="grand">grandes</span>
  ou <span class="petit">petites</span> lettres,
  <span class="souligner">souligné</span>
  ou <span class="barrer">barré</span>.
</p>

Le langage HTML/Placement des objets


Le placement des objets relève de la mise en forme. Certes, on a expliqué en introduction que le HTML ne concernait pas la mise en forme mais seulement la description du contenu ; par exemple, la balise <blockquote>…</blockquote> a pour effet de décaler le texte vers la droite, mais ce n'est qu'une conséquence de la feuille de style appliquée au bloc de citation.
Nous allons faire une exception à cette règle pour placement des objets. En effet, avant le CSS, le placement des objets était déjà une préoccupation, le W3C a donc créé des balises permettant ce placement — donc de la mise en forme —, on peut donc toujours trouver de telles balise dans du code ou des ouvrages. Les balises sont donc données à titre d'information, mais elles devraient être proscrites au profit du CSS.

Ancien HTML


Par défaut, les objets — texte, images… — sont aligné à gauche, à moins que le réglage du navigateur ou la feuille de style en décide autrement.
·         Il est possible de centrer les objets avec les balises <center>…</center>.
·         Pour aligner à droite, il faut utiliser la balise <div align="right">…</div>.
·         Le texte, quant à lui, peut être justifié avec la balise <div align="justify">…</div>.
On peut aussi indiquer l'alignement à l'intérieur de la balise de description, par exemple :
·         pour centrer un paragraphe, on peut utiliser

<p align="center">…</p> ;
·         pour centrer une image, on peut utiliser

<img src="…" … align="center" />.

Méthode moderne : avec du CSS


Ceci est maintenant obsolète avec le CSS. Il est maintenant recommandé de ne pas utiliser les balises ci-dessus et d'avoir recours au CSS, par exemple :
·         pour du texte : <div style="text-align:valeur">…</div>,
où valeur est left (gauche), right (droite), center (centré) ou justify (justifié);
·         pour une image :
·         pour aligner à droite : <div style="text-align: right;padding-right: 10px">…</div> (ce qui laisse une marge de 10 pixels à droite) ;
·         pour centrer : <div style="text-align: center">…</div>.
Exemple
<div style="text-align:right">
   Bla bla bla bla bla bla bla
</div>
<div style="text-align: center">
   <img src="http://fr.wikibooks.org/images/wiki-textbook.png" width="129" />
</div>

Le langage HTML/Liens


Introduction


Un lien (également appelé « lien hypertexte », d'où le nom d'HTML) est un mot ou groupe de mots permettant, après avoir cliqué dessus, d'ouvrir un fichier. Si ce fichier est une page HTML ou un fichier texte (.txt ou autre), il s'affichera dans le navigateur à la place ou en plus de la page actuelle. S'il s'agit d'un autre type de fichiers, le navigateur demandera généralement de sélectionner une application pour ouvrir le fichier ou d'enregistrer le fichier. Il est possible que l'utilisateur ait installé une extension (plug-in) pour pouvoir lire certains types de fichiers.
Note : certains formats sont devenus si courants que la plupart des navigateurs les supportent sans que l'on ne doive installer d'extension. C'est le cas notamment des formats d'images les plus courants (.bmp.gif.jpg.png.tif, etc). Cela dépend évidemment du navigateur utilisé et surtout de sa version. Les plus récents supportent généralement aussi XML.
Note : certains navigateurs sont livrés avec les extensions gérant les formats les plus courants, comme Java ou Flash.
Note : l'installation de certains logiciels entraîne le support de certains types de fichiers sur certains navigateurs. C'est le cas notamment d'Adobe Reader 6.0.

Balise


Pour créer un lien en html, on utilise les balises <a> et </a> (de l'anglais anchor signifiant « ancre ») pour encadrer le contenu du lien (qui peut être du texte, une image, etc). La balise <a> dispose de trois attributs possibles :
·         href : permet d'indiquer l'adresse du lien ;
·         name : permet de définir une ancre ;
·         target : permet de définir la cible du lien.


Exemples :
<a href="http://fr.wikibooks.org">Lien vers Wikilivres</a>
<a name="ancre_1">Définition d'une ancre</a>
<a href="http://fr.wikipedia.org" target="_blank">Lien ouvrant Wikipédia dans une nouvelle fenêtre</a>

Les URL


Une URL (uniform resource locator), indique au navigateur l'adresse où aller chercher une ressource ; par ressource, on entend autre page Web, mais aussi autre type de fichier : image, son…
Si le fichier à aller chercher se trouve dans le même répertoire (dossier) que la page Web que l'on écrit, on se contente de donner le nom du fichier. On a ici deux types d'adresses : les adresses relatives et les adresses absolues.

Liens absolus


Un lien absolu indique l'adresse complète du fichier lié (de http:// à l'extension ou à l'extension du domaine). Il est généralement utilisé pour afficher une page d'un autre site.
Exemple :
<a href="http://fr.wikipedia.org">Une encyclopédie vraiment géniale</a>
L'adresse absolue peut être utilisée lorsque l'objet se trouve sur son propre site, à condition que l'on soit sûr qu'il ne bougera pas ; par exemple, toutes les images sont mises dans un répertoire /images qui ne sera jamais déplacé.
Dans ce cas, on peut omettre le protocole et le nom de domaine, en donnant une adresse commençant par un slash :
<img src="/images/exemple.jpg"> Une belle image.
L'utilisation de l'adresse absolue est obligatoire lorsque l'on fait un lien vers un objet situé sur un autre site Web, ou lorsqu'un autre protocole que HTTP est utilisé :
<a href="ftp://ftp.download.dom/mysoftware/">Télécharger le logiciel par FTP</a>.

Liens relatifs


Un lien relatif indique l'adresse du fichier par rapport à la page actuelle. Il est vivement conseillé de l'utiliser le plus souvent dans son site web, car cela permet de changer d'hébergeur sans devoir rééditer chaque lien.
Si le fichier se trouve dans le même répertoire que la page courante, il suffit d'indiquer le nom du fichier (avec son extension). Si le fichier se trouve dans un sous-répertoire du répertoire contenant la page courante, il suffit d'indiquer le nom du répertoire, suivi d'une barre oblique « / » et du nom du fichier.


Exemples :
<a href="exemple.html">Lien vers le fichier « exemple.html » se trouvant dans le même répertoire que la
page actuelle</a>
 
<a href="repertoire_exemple/exemple.html">Lien vers le fichier « exemple.html » se trouvant dans le
répertoire « repertoire_exemple » qui se trouve dans le même répertoire que la page actuelle</a>
Si le fichier se trouve dans le répertoire parent du répertoire actuel, ou dans un sous-répertoire du répertoire parent, il faut « remonter » à l'aide de deux points « .. ».


Exemple :
<a href="../exemple.html">Lien vers le fichier « exemple.html » se trouvant dans le répertoire parent 
du répertoire dans lequel se trouve la page actuelle</a>
L'utilisation de l'adresse relative est intéressante si l'objet visé est situé dans une branche de l'arborescence qui restera toujours solidaire. Si l'on déplace la branche (donc la page Web courante et l'objet), l'adresse relative reste valable.
Par contre, si la page Web change de répertoire et pas l'objet cible, l'adresse relative devient erronée.

Liens vers une ancre


Une ancre permet d'afficher une page web à partir d'un certain point (très utile dans les longues pages web). Ainsi, ce lien affiche le chapitre « Liens » du livre « HTML » à partir de la section « Liens vers une ancre ».


Pour créer une ancre, il faut utiliser la balise <a> avec l'attribut name, comme ceci (Il n'est pas nécessaire d'inclure du texte entre les deux balises) :
<a name="ancre_1"></a>
Lorsque l'ancre est vide, elle ne doit cependant pas être écrite sous la forme <a name="section_5" />, formellement valide en XML, mais déconseillée par les normes XHTML et XML pour des raisons de compatibilité avec différents navigateurs.
Pour créer un lien vers une ancre, il suffit de rajouter un croisillon (#) suivi du nom de l'ancre après l'adresse (absolue ou relative) de la page. Si l'ancre se trouve sur la page actuelle, il ne faut pas noter l'adresse de la page.
Exemples :
<a href="exemple.html#ancre_1">Lien vers l'ancre n°1 de la page "exemple.html"</a>
<a href="#ancre_1">Lien vers l'ancre n°1 de la page actuelle</a>
Il faut cependant faire attention car les ancres sont soumis à la balise base. Si dans l'entête de la page se trouve une référence à la base :
<base href="www.monsite.com" />
Un lien tel que :
<a href="#ancre_1">Lien vers l'ancre n°1 de la page actuelle</a>
Ne redirigera pas vers l'ancre #ancre_1 de la page actuelle mais vers celle de la page définie dans la base. (Donc ici vers www.monsite.com/#ancre_1)

Comment ouvrir un lien dans une nouvelle fenêtre ?


L'attribut target permet de définir la cible du lien, c'est-à-dire l'endroit où sera ouvert le fichier du lien. Pour ouvrir le fichier dans une nouvelle fenêtre, assigner la valeur _blank à l'attribut target.


Exemple :
<a href="http://fr.wikibooks.org" target="_blank">Lien ouvrant Wikilivres dans une nouvelle fenêtre</a>
Note : Les valeurs que peut prendre l'attribut target seront détaillées dans le chapitre des cadres.
Remarque : target="_blank" n'est valide que dans les DTD HTML et XHTML1.0 frameset et transitional, mais ne peut être utilisé dans une DTD strict. Le besoin éventuel d'ouvrir des liens dans une nouvelle fenêtre du navigateur doit donc conduire à opter pour une DTD transitional.

Autres types de liens


Nous avons vu que l'attribut href peut contenir autre chose que l'adresse d'une page Web. S'il contient un nom de fichier autre que HTML, cela télécharge le fichier, ou éventuellement cela ouvre le fichier avec un programme dédié (par exemple Adobe Acrobat Reader pour un fichier PDF).
Mais l'attribut href peut faire référence à des ressources disponibles par un autre protocole que le HTTP :
·         transfert de fichier (protocole FTP) : par exemple href="ftp://ftp.gnu.org/".
·         forum usenet (protocole NNTP) : par exemple href="news:fr.comp.infosystemes.www.auteurs".
·         adresse de courriel (protocole SMTP) : par exemple href="mailto:jeveuxduspam@monfournisseur.fr".
·         adresse de messagerie instantanée (protocole XMPP/Jabber) : href="xmpp:jeveuxduspim@monserveurjabber.fr".

Le langage HTML/Images


Une image est insérée avec la balise img en spécifiant avec l'attribut src (source) le chemin de l'image à inclure (sous la forme d'une adresse réticulaire, URL) et avec l'attribut alt l'éventuel texte de remplacement de l'image :
HTML5/HTML
<img src="mon_image.png" alt="texte si l'image n'est pas affichée">
XHTML
<img src="mon_image.png" alt="texte si l'image n'est pas affichée" />
Par la suite, nous considérerons du HTML. Pour du XHTML, ajoutez simplement la barre de fraction avant la fermeture de la balise.
La balise img peut avoir divers attributs facultatifs. Seuls les attributs src et alt sont obligatoires.
·         align : alignement de l'image (peut prendre les valeurs topbottommiddleleft ou right) ;
·         alt : texte de remplacement (affiché si le navigateur ne peut afficher l'image) ; cet attribut est obligatoire, il permet notamment à un malvoyant de comprendre l'image qu'il ne peut voir (son logiciel lit le texte à voix haute ou le transforme en braille) ;
·         title : titre de l'image (s'affiche en info bulle dans le navigateur) ;
·         border : largeur de la bordure de l'image (valeur exprimée en pixels) ;
·         height : hauteur de l'image (si aucune valeur spécifiée, l'image garde sa hauteur normale) ;
·         width : largeur de l'image (si aucune valeur spécifiée, l'image garde sa largeur normale).

L'attribut src


L'attribut src contient donc l'adresse à laquelle on va chercher l'image (voir le chapitre Liens). On peut utiliser une adresse absolue ou relative.
Il faut cependant proscrire l'inclusion des objets (images, sons, vidéo) situés sur d'autres sites, ce que l'on appelle des « liens à chaud » (hot links). En effet, cela génère du trafic sur le serveur cible au lieu de son propre serveur, ce que le serveur cible peut considérer comme du « vol de bande passante ». Par ailleurs, le fait que l'on utilise l'objet original n'implique pas un respect du droit d'auteur : certes on n'a pas fait de copie de l'objet, mais on utilise l'objet, et cela doit se faire avec l'accord de l'auteur et/ou de ses ayants droit.
Donc, si par exemple notre page web est http://www.monsite.com/mapage.html et que l'on veut inclure l'image http://www.autresite.com/images/img1.png, les deux solutions acceptables sont :
·         demander l'autorisation au toilemestre du site http://www.autresite.com/, importer l'image sur son propre site et l'exploiter en local, en affichant l'origine de l'image et les conditions d'utilisation imposées par le site d'origine ;
par exemple, si l'on place l'image en http://www.monsite.com/image/img1.png, on peut écrire
<img src="/image/img1.png" … > <br>
Reproduit avec l'aimable autorisation de
<a href="http://www.autresite.com/">Autresite.com</a>,
tous droits réservés 
·        ne pas inclure l'image mais faire le lien vers cette image, ou mieux vers la page Web contenant cette image ; par exemple
Voir l'illustration sur l'article dédié
du site <a href="http://www.autresite.com/lapage.html">Autresite.com</a>

L'attribut alt


Il est nécessaire de donner, pour chaque image, un texte de remplacement pour les navigateurs ne supportant pas l'affichage d'images ou pour des raisons d'accessibilité des pages web (cf normes W3C). Le texte de remplacement est spécifié par l'attribut alt :
<img src="bienvenue.png" alt="Bienvenue !" >
Lorsqu'une image ne véhicule pas d'information, ce texte doit être vide (n'oubliez pas que le alt est lu ou rendu en braille pour un malvoyant), l'attribut est alors présent sous la forme :
<img src="image_decorative.png" alt="" >

Note
Microsoft Internet Explorer affiche le texte alternatif dans une info-bulle ; ce comportement est erroné puisque c'est normalement le titre (voir ci-dessous) qui est affiché en info-bulle.

L'attribut title


Il est possible d'attribuer un titre à chaque image en plus de l'information alternative (alt). L'attribut title doit contenir une information optionnelle sur l'image, ou reproduire l'attribut alt: Les navigateurs affichent cette information dans une info bulle :
<img src="renard.png" alt="Renard en promenade" title="Renard en promenade" >
Remarque
Les attributs alt et title peuvent être cumulés.

Les attributs height et width


Si l'on omet ces attributs, l'image s'affiche en grandeur réelle (pixel pour pixel).
Si l'on indique une des dimensions (la largeur ou la hauteur), l'autre dimension est calculée pour que l'image s'affiche avec ses proportions originales.
Le fait d'indiquer les deux dimensions peut faciliter l'affichage : les images sont chargées après le texte, le navigateur peut ainsi réserver la place nécessaire, sinon, il doit décaler le texte au fur et à mesure que les images sont chargées. Il peut donc être intéressant d'indiquer les dimensions même si l'on utilise les dimensions originales de l'image. Cependant, l'auteur doit bien s'assurer que les proportions (rapport largeur/hauteur) sont respectées, sous peine que l'image s'affiche déformée.

Image contenant des liens


Une image elle-même peut être à l'intérieur d'une balise <a>…</a> : on peut alors cliquer sur l'image pour accéder à la ressource désignée. Par exemple :
<a href="http://fr.wikibooks.org">
   <img src="https://upload.wikimedia.org/wikipedia/commons/d/df/Wikibooks-logo-en-noslogan.svg" alt="Wikibooks" />
</a>

L'image peut également être découpée en zones cliquables menant vers des ressources différentes. Pour cela :
·         la balise <img> doit contenir un attribut usemap dont la valeur rst un nom, le nom de la carte définissant les zones ;
·         la carte est définie par une balise <map>…<map> qui contient des zones ; chaque zone est définie par une balise <area />.
Par exemple :
<img src="image.png" alt="Carte du site" usemap="#nomdelacarte" />
<map name="nomdelacarte">
  <area shape="rect" coords="9,372,66,397" href="http://fr.wikipedia.org/" alt="Wikipédia" title="Wikipédia" >
</map>
Les attributs de la balise <area /> sont :
·         shape : définit la forme de la zone, ses valeurs peuvent être "rect" pour un rectangle, "poly" pour un polygone et "circle" pour un disque ;
·         coords : définit les coordonnées décrivant la zone, séparées par des virgules :
·         pour un rectangle, il s'agit des coordonnées des coins en bas à gauche et en haut à droite, sous la forme "x1, y1, x2, y2",
·         pour un polygone, il s'agit de la liste des coordonnées des points, sous la forme "x1, y1, x2, y2, …, xn, yn",
·         pour un disquee, il s'agit des coordonnées du centre et du rayon, sous la forme "xc, yc, r" ;
·         les attributs classiques d'un lien : essentiellement href et alt

Image SVG


Le SVG étant du XML, comme le XHTML, il est possible de définir une image SVG directement à l'intérieur du code HTML. Par exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
  <head>
    <title> Rectangle noir </title>
  </head>

  <body>
    <p>Voici un rectangle noir :</p>
    <svg width="3cm" height="2cm" version="1.1"
         xmlns="http://www.w3.org/2000/svg">
      <rect
        x="0.5cm" y="0.5cm" width="2cm" height="1cm"
      />
    </svg>
  </body>
</html>

 

 

Le SVG étant du XML, comme le XHTML, il est possible de définir une image SVG directement à l'intérieur du code HTML. Par exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
  <head>
    <title> Rectangle noir </title>
  </head>

  <body>
    <p>Voici un rectangle noir :</p>
    <svg width="3cm" height="2cm" version="1.1"
         xmlns="http://www.w3.org/2000/svg">
      <rect
        x="0.5cm" y="0.5cm" width="2cm" height="1cm"
      />
    </svg>
  </body>
</html>

Découvrir le SVG/Introduction


Le sigle SVG signifie scalable vector graphics, c'est-à-dire « graphiques vectoriels dont on peut modifier l'échelle ».
Le SVG est un langage de programmation qui sert à dessiner. La meilleure manière de créer un dessin en SVG consiste à utiliser un logiciel doté d'une interface graphique, par exemple le logiciel libre Inkscape .

La façon la plus simple de voir un dessin en SVG consiste à l'afficher dans un navigateur Web (Mozilla Firefox, Opera, Microsoft Internet Explorer, Microsoft Edge, Safari, Google Chrome…) — le format SVG est en effet un standard du Web depuis 2001[1], même si certains navigateurs s'y sont mis tardivement[2]. On peut par exemple faire un glisser-lâcher depuis la fenêtre d'un gestionnaire de fichiers (Explorateur Windows, Finder MacOs, GNOME Commander…) vers la fenêtre du navigateur Web.
Un dessin SVG est en fait simplement un fichier texte portant l'extension .svg : on peut le voir en utilisant la commande « afficher le code source » du navigateur Web,
·        en général accessible par le menu contextuel : faire un clic avec le bouton secondaire de la souris (« clic droit » pour une souris configurée en droitier) dans la fenêtre du navigateur et, dans la liste qui apparaît, choisir Afficher le code source de la page ou équivalent (selon le navigateur : Afficher la sourceCode source de la page…) ;
·        ou bien avec la commande « Éditeur XML » d'Inkscape — menu Édition > Éditeur XML ou bien le bouton dédié .
Dans certains cas, le code SVG peut être intégré au sein d'un autre fichier, par exemple un fichier HTML.
·        
Dessin élémentaire et éditeur XML avec Inkscape.

·     
   
Code source d'un dessin SVG élémentaire dans Mozilla Firefox.
Le langage SVG est un langage XML (extended markup language). C'est donc un texte qui comprend des balises entre crochets <…>. Le langage SVG est décrit par une recommandation du World Wide Web Consortium (W3C) : Scalable Vector Graphics (SVG) — W3C Recommendation[3]. Il existe une recommandation « minuscule » (tiny) pour les appareils munis de petits écrans, typiquement les appareils mobiles (téléphones, tablettes)[4].

Le langage HTML/Listes


Les listes permettent d'ordonner une énumération. Même si on les rencontre rarement, elles ont cet avantage qu'elles ont été crées spécialement pour faciliter une opération qu'effectue souvent tout créateur de page web et qui consiste à dresser une liste d'éléments.

Types de liste


Il existe trois types de listes :
·         une liste sans ordre précis (non ordonnée),
·         une liste tenant compte de l'ordre (ordonnée),
·         une liste de termes et descriptions (définitions).

Listes non numérotées


Les listes non numérotées sont introduites par la balise ul (pour unordered list, « liste non ordonnée ») et chaque élément de la liste par li (list item, « élément de liste ») :
<ul>
    <li>premier élément de la liste&nbsp;;</li>
    <li>deuxième élément&nbsp;;</li>
    <li>etc.</li>
</ul>
Les balises fermantes pour les éléments li ne sont pas obligatoires. Ce code donnera quelque chose comme :
'
·         premier élément de la liste ;
·         deuxième élément ;
·         etc.

Listes numérotées


Les listes numérotées fonctionnent sur le même principe que les listes non numérotées. La seule différence est qu'on utilise la balise ol (ordered list, « liste ordonée ») au lieu de la balise ul. Les éléments restent encadrés par les balises li.
Exemple :
<ol>
    <li>premier élément de la liste&nbsp;;</li>
    <li>deuxième élément&nbsp;;</li>
    <li>etc.</li>
</ol>
Ce code donnera :
'
1.   premier élément de la liste ;
2.   deuxième élément ;
3.   etc.
En HTML transitionnel, l'attribut start permet de définir la valeur initiale de la numérotation.
Exemple :
<ol start="5">
    <li>premier élément de la liste&nbsp;;</li>
    <li>deuxième élément&nbsp;;</li>
    <li>etc.</li>
</ol>
Ce code donnera :
'
5.   premier élément de la liste ;
6.   deuxième élément ;
7.   etc.

Listes de descriptions


Contrairement aux autres types de listes, les listes de description, dl (definition list), n'utilisent pas la balise li pour les éléments de la liste, mais les sépare en deux parties : le terme, introduit par dt (definition term) et sa description introduite par dd (definition description).
Par exemple :
<dl>
    <dt>C</dt>      <dd>Un langage efficace</dd>
    <dt>Java</dt>   <dd>Un langage portable</dd>
    <dt>Pascal</dt> <dd>Un langage pédagogique</dd>
</dl>
Ce code donnera :
'
C
Un langage efficace
Java
Un langage portable
Pascal
Un langage pédagogique

Propriété des listes


En CSS, les listes sont hautement paramétrable, elles ont même des propriétés valables uniquement pour elles. D'une manière générale on peut se pencher sur :
·         les puces (petit élément devant chaque élément de la liste) ; ces puces pourront changer pour devenir un caractère prédéfini, personnalisable ou encore une image ;
·         le type de numérotation : latin, arabe, grec, …

Le langage HTML/Tableaux


Avant toute chose, il est nécessaire de rappeler que l'utilisation de tableaux doit se limiter au classement et à la présentation des données. Ce n'est donc pas un outil de mise en page même s'il est souvent employé, par erreur, à cet effet. Car par sa rigueur voire sa rigidité, il empêche et complexifie, à l'usage, la mise en page d'un site internet.

En revanche, pour la présentation de données statistiques par exemple, il ne possède aucune concurrence.

Balises de bases


La déclaration d'un tableau se fait grâce à la balise table ;
·         la balise tr (table row) permet de définir une ligne, une rangée dans un tableau ; cette balise encadre les balises td de cellules ;
·         la balise td (table data) permet de définir une cellule de donnée dans une ligne ; elle sera contenue obligatoirement dans la balise tr ;
·         la balise th (table header) permet de définir des cellules comme étant des entêtes de lignes ou de colonnes ; généralement, le texte sera mis en emphase forte suivant les styles par défaut du navigateur ou de l'utilisateur ;
·         la balise caption (« légende ») permet de donner un titre au tableau.
Exemple élémentaire
<table border="1" >
 
   <caption>Table simple</caption>
 
   <tr>             <!-- ligne 1 -->
      <th> a1 </th> <!-- case 1 -->
      <th> a2 </th> <!-- case 2 -->
   </tr>
 
   <tr>             <!-- ligne 2 -->
      <td> b1 </td> <!-- case 1 -->
      <td> b2 </td> <!-- case 2 -->
   </tr>
 
</table>
donne
'
Table simple
a1
a2
b1
b2

Attributs de la balise table


Comme toutes les balises, la balise table peut avoir des attributs. On peut bien sûr utiliser les attributs habituels (idclasslangxml:langtitle…).

Attributs de mise en forme


Parmi les attributs spécifiques, nous avons des attributs de mise en forme :
·         border : permet de définir si la table a des traits (bordure de cases) ou pas, et quelle est leur épaisseur en pixels :

border="0" indique que la table n'a pas de traits, border="1" indique qu'elle a des traits de un pixel de large…
·         width : permet d'indiquer la largeur totale du tableau, en pixels (nombre entier seul) pourcentage de la page totale (par exemple "30%") ;
·         rules : si l'on a une bordure (attribut border ayant une valeur non nulle), on peut choisir quels sont les traits intérieurs qui sont tracés :
·         all (valeur par défaut si border est non nul) : tous les traits sont tracés ;
·         rows : les lignes sont séparées par des traits, mais pas les colonnes ;
·         cols : les colonnes sont séparées par des traits, mais pas les lignes ;
·         none : aucun trait intérieur n'est tracé ;
·         frames ou frame (sans s) : si l'on a une bordure (attribut border ayant une valeur non nulle), on peut choisir quels sont les traits du cadre du tableau qui sont tracés :
·         border (valeur par défaut si border est non nul) : tous les traits sont tracés ;
·         hsides : seuls les traits horizontaux sont tracés (haut et bas) ; above : seul le trait en haut est tracé ; below : seul le trait en bas est tracé ;
·         vsides : seuls les traits verticaux sont tracés (gauche et droite) ; lhs : seul le trait à gauche est tracé (left hand side) ; rhs : seul le trait à droite est tracé (right hand side) ;
·         void : aucun trait de contour n'est tracé.
Exemple
<table
  lang="en"
  title="Statistics for 2000"
  border="1"
  rules="all"
  frames="border"
  width="30%">
 
  <caption>Statistics for 2000</caption>
  
</table>
Notons que ces attributs de mise en forme peuvent être remplacés par du CSS.

Attribut d'accessibilité


Le plus grand problème des tableaux est l'accessibilité aux malvoyants. L'attribut summary permet de fournir une explication longue du tableau ; son contenu ne sera pas affiché par les navigateurs graphiques, mais interprété par les navigateurs en Braille ou les lecteurs vocaux.

Attributs des balises trth et td


·         align : indique l'alignement horizontal : left (aligné à gauche), center (centré), right (aligné à droite) ou justify (justifié) ;
·         valign : indique l'alignement vertical : top (aligné en haut), middle (centré) ou bottom (aligné en bas).

Balises de groupement


Les balises de groupement permettent comme leur nom l'indique de grouper des cellules entre elles suivant leur nature. Il est possible de créer des groupes de lignes ou de colonnes. La définition correcte de ces groupes permet entre autres une définition plus aisée des styles, comme par exemple séparer les groupes par des traits.

Séparation des groupes


Si l'on a défini une bordure (attribut border ayant une valeur non nulle), on peut choisir de ne pas séparer les cellules du tableau par des traits, mais uniquement les groupes de lignes ou de colonnes. Pour cela, on indique l'attribut rules="groups" dans la balise d'ouverture table :
<table border="1" rules="groups">
  
</table>

Lignes


La balise thead (table header) permet de grouper les lignes d'entête. Elle est généralement utilisée avec la balise th.
La balise tbody (table body) permet de grouper les lignes du « corps », c'est-à-dire de la partie principale du tableau.
La balise tfoot (table footer) permet, à l'instar des deux précédentes, de grouper les lignes du pied de tableau. Elle est par exemple utilisée lorsque, dans le cas d'un tableau très long, les titres sont reproduits à la fin dans le but d'obtenir une meilleur lisibilité.
Exemple
<table border="1" frame="void" rules="all">

  <thead>
     <tr>
        <th> a1 </th>
        <th> a2 </th>
     </tr>
  </thead>

  <tfoot>
     <tr>
        <td> a1 </td>
        <td> a2 </td>
     </tr>
  </tfoot>

  <tbody>
     <tr>
        <td> b1 </td>
        <td> b2 </td>
     </tr>
     <tr>
        <td> c1 </td>
        <td> c2 </td>
     </tr>
  </tbody>

</table>
ce qui donne
'
a1
a2
b1
b2
c1
c2
a1
a2

Colonnes
Les balises col et colgroup permettent de définir un groupe de colonnes dans le but d'appliquer un style ou une taille précise à une ou plusieurs colonnes.
Le principal attribut de colgroup est span, qui indique le nombre de colonnes faisant partie du groupe. S'il est absent, la valeur par défaut est "1".
On peut utiliser tous les attributs spécifiques à td, ils s'appliqueront alors à toutes les colonnes du groupe.
Exemple
<table border="1" rules="groups">
 
  <colgroup span="2" width="40" align="left" />
  <colgroup span="2" width="10" align="center" />
 
  <tr>
    <th> a </th> <th> b </th> <th> c </th> <th> d </th> 
  </tr>
  <tr>
    <td> 1 </td> <td> 2 </td> <td> 3 </td> <td> 4 </td> 
  </tr>
 
</table>
donne
'
a
b
1
2
c
d
3
4
Au lieu de l'attribut span, on peut utiliser des éléments col pour désigner chaque colonne ; cela permet d'individualiser les attributs pour chaque colonne.
Exemple
<table border="1" rules="groups">
 
  <colgroup align="left">
    <col width="20" />
    <col width="40" />
  </colgroup>
  <colgroup span="2" align="center" width="10" />
 
  <tr>
    <th> a </th> <th> b </th> <th> c </th> <th> d </th> 
  </tr>
  <tr>
    <td> 1 </td> <td> 2 </td> <td> 3 </td> <td> 4 </td> 
  </tr>
 
</table>
donne
'
a
b
1
2
c
d
3
4
La balise col peut contenir un attribut span, c'est-à-dire qu'elle peut désigner plusieurs colonnes. Les mêmes attributs s'appliquent alors à ces colonnes, mais cela ne constitue pas un groupe au sens du HTML ; notamment, l'attribut rules="groups" de la balise table n'agit qu'entre les éléments colgroup et pas entre les éléments col.

Fusionner des cellules


Il est possible de fusionner des cellules entre elles en utilisant des attributs de la balise td.
La fusion de plusieurs cellules d'une même ligne, c'est-à-dire de plusieurs colonnes, se fait grâce à l'option colspan et la fusion de plusieurs cellules appartenant à une même colonne, c'est-à-dire de plusieurs lignes, avec l'option rowspan. Ces deux attributs prennent la valeur correspondant aux nombres de cellules que l'on souhaite fusionner.
Exemple
pour fusionner trois cellules d'une colonne :
<table>
    <tr>
        <td colspan="3">triple cellule</td>
    </tr>
    <tr>
        <td>cellule simple</td>
        <td>deuxième cellule simple</td>
        <td>troisième cellule simple</td>
    </tr>
</table>
Et voilà le résultat :
'
triple cellule
cellule simple
deuxième cellule simple
troisième cellule simple

Note
Il ne faut pas confondre <td colspan=…> avec <col span=…>. Dans le premier cas, on a une fusion, c'est-à-dire que l'on a une seule et unique cellule ; dans le deuxième cas, on a simplement plusieurs colonnes distinctes qui partagent des attributs communs.

La fusion des cellules d'une colonne est un peu plus complexe, en raison de la construction linéaire des tableaux. En effet, lorsqu'une cellule occupe plusieurs lignes, elle est définie dans la première ligne et pas dans les lignes suivantes ; celles-ci contiennents donc un élément td de moins.
Exemple
<table>
    <tr>
<!-- La première cellule des trois prochaines lignes seront fusionnées avec la suivante -->
        <td rowspan="3">cellule 1</td>
        <td>cellule simple</td>
        <td>cellule simple</td>
        <td>cellule simple</td>
    </tr>
    <tr>
<!-- La première cellule de cette ligne étant fusionnée avec la précédente,
elle ne doit pas être définie -->
        <td>cellule simple</td>
        <td>cellule simple</td>
        <td>cellule simple</td>
    </tr>
    <tr>
<!-- La première cellule de cette ligne étant fusionnée avec la précédente,
elle ne doit pas être définie -->
        <td>cellule simple</td>
        <td>cellule simple</td>
        <td>cellule simple</td>
    </tr>
</table>
ce qui donne
'
cellule 1
cellule simple
cellule simple
cellule simple
cellule simple
cellule simple
cellule simple
cellule simple
cellule simple
cellule simple

Accessibilité aux malvoyants


Nous avons déjà vu ci-dessus comment mettre une description de la table à l'attention des malvoyants.
L'autre problème est celui de la lecture de la table. En effet, la table est lue linéairement, ligne par ligne et colonne par colonne. Ainsi, il est difficile de faire le lien entre le contenu d'une cellule et les en-têtes qui s'y rattachent (nom de la ligne et de la colonne), alors que c'est ce lien qui distingue la table d'une simple liste.
Pour contourner ce problème, on met un identifiant à chaque en-tête avec l'attribut id, et pour chaque cellule on indique l'identifiant des en-têtes qui s'y rattachent avec l'attribut headers.
Exemple
 <table
   border="1"
   summary="La table indique, pour chaque mois de l'année,
     la longueur de ce mois
     en jours et en heures" >

   <caption> Longueur des mois </caption>

   <tr>
      <td> </td>
      <th id="col2"> Janvier </th>
      <th id="col3"> Février </th>
      <th id="col4"> Mars </th>
   </tr>

   <tr>
      <th> Durée en jours </th>
      <td headers="col2"> 31 </td>
      <th headers="col3"> 28 ou 29 </td>
      <th headers="col4"> 31 </td>
   </tr>

   <tr>
      <th> Durée en heures </th>
      <td headers="col2"> 744 </td>
      <td headers="col3"> 672 ou 696 </td>
      <td headers="col4"> 744 </td>
   </tr>

 </table>
Notons que l'en-tête peut aussi bien se trouver sur la première colonne de la ligne, mais cela ne pose en général pas de problème : puisque les données suivent l'en-tête, on associe facilement l'en-tête aux données, l'utilisation de id et headers est superflue.
S'il n'y a pas d'ambiguïté, et notamment pas de fusion de cellule, on peut utiliser l'attribut scope dans la balise.
Dans le cas d'un en-tête de colonne, on utilisera scope="col" et pour un en-tête de ligne, on utilisera scope="row" dans la balise td de la première cellule.
Si la personne veut lire directement le contenu d'une cellule, alors la ligne n'est plus lue en entier, on perd l'information de l'en-tête de ligne. Il peut donc être intéressant d'utiliser scope="col"et scope="row" conjointement.
th, on ne définit alors pas d'identifiant :
 <table
   border="1"
   summary="La table indique, pour chaque mois de l'année,
     la longueur de ce mois
     en jours et en heures" >

   <caption> Longueur des mois </caption>

   <tr>
      <td> </td>
      <th scope="col"> Janvier </th>
      <th scope="col"> Février </th>
      <th scope="col"> Mars </th>
   </tr>

   <tr>
      <th scope="row" abbr="jours"> Durée en jours </th>
      <td> 31 </td>
      <td> 28 ou 29 </td>
      <td> 31 </td>
   </tr>

   <tr>
      <th scope="row" abbr="heures"> Durée en heures </th>
      <td> 744 </td>
      <td> 672 ou 696 </td>
      <td> 744 </td>
   </tr>

 </table>
L'attribut abbr utilisé ci-dessus permet de raccourcir le texte lu par la suite.

Le langage HTML/Formulaires


Un formulaire fournit un espace sur la page HTML où l'utilisateur peut entrer des données ; données qui pourront être envoyées au serveur pour être éventuellement traitées. Un formulaire est composé d'un ou plusieurs éléments d'entrée englobés par la balise <form>. Par exemple :
<form method="post">
    <p>Entrez votre nom : <input type="text" name="nom"></p>
    <p>Entrez votre prénom : <input type="text" name="prenom"></p>
</form>
Attention : la manière dont les données envoyées au serveur seront traitées ne dépendent pas du code HTML, qui peut juste indiquer le type de communication HTTP souhaité : get ou post. Pour traiter les données du formulaire, il faut élaborer une interface capable de les traiter sur le serveur, la plus commune étant un script PHP. Le rôle de l'HTML est d'indiquer la forme que doit avoir la requête HTTP qui sera envoyée par l'agent utilisateur au serveur et comment l'interface doit se comporter du côté client.

La balise <form>


<form> permet de regrouper plusieurs entrées sous un seul nom, ce qui permettra de les traiter ensemble. Exemple :
<form name="formulaire_1" method="post" action="traitement.php">
    <p>Entrez votre nom : <input type="text" name="nom"></p>
    <input type="submit" value="Envoyer 1" />
</form>
<form name="formulaire_2" method="post" action="traitement.php">
    </p>Entrez votre prénom : <input type="text" name="prenom"></p>
    <input type="submit" value="Envoyer 2">
</form>
Ici, si vous cliquez sur « Envoyer 2 », les données saisies dans « nom » ne seront pas récupérées car le bouton « Envoyer 2 » ne porte que sur le formulaire dans lequel il se trouve (en l'occurrence « formulaire_2 »).
La balise <form> sert également à spécifier via l'attribut action l'URI du programme destiné à traiter les données validées, le protocole utilisé lors de la transaction HTTP, soit get, soit postvia l'attribut method et enfin via l'attribut accept-charset l'encodage de caractères qui doit être accepté par le serveur pour manipuler ce formulaire.
L'attribut enctype permet de spécifier l'encodage pour un envoi de type POST. En particulier la valeur enctype="multipart/form-data" permet l'envoi de fichiers au serveur, en utilisant un champ de type fichier (<input type="file">). Sans l'utilisation de cet encodage, un champ fichier n'envoie que le nom du fichier au serveur, sans son contenu.

La balise <input>


<input> est la balise la plus utilisée dans les formulaires. Elle permet par exemple de demander à l'utilisateur de la page des informations textuelles (par exemple son nom), un choix entre plusieurs options ou même de sélectionner un fichier à envoyer.

L'attribut name


Cet attribut sert à retrouver un objet (ici la balise <input>) afin de l'exploiter en JavaScript. Il est également utilisé lors de l'envoi du formulaire vers un serveur afin d'extraire les données saisies par l'utilisateur.

L'attribut id


Comme l'attribut nameid sert à nommer un objet dans une page web. Cependant, contrairement à l'attribut name, tous les id doivent être uniques dans toute la page. Ils servent également à la balise <label> que nous présenterons plus loin.

L'attribut type


Le rôle de la balise est déterminée par l'attribut type. Voici une liste des possibilités qui s'offrent à vous :
text 
C'est un champ de saisie de texte classique.
password 
Ce type permet d'entrer un mot de passe. Le texte saisi est remplacé par des étoiles (le caractère « * »). Attention, avoir un champ caché à l'utilisateur ne signifie pas que personne pourra le lire car le mot de passe est transmis « en clair » sur le réseau.
checkbox 
C'est une simple case à cocher permettant à l'utilisateur de valider ou non une option. Elle est cochée si son attribut "checked" existe.
radio 
C'est une case d'option. Elle n'est jamais utilisée seule car, en groupe, elle permet à l'utilisateur de choisir une option parmi plusieurs. Le groupe est identifié par l'attribut name.
file 
Ce type permet à l'utilisateur de choisir un fichier afin qu'il soit envoyé vers un serveur. Afin que le contenu du fichier soit envoyé au lieu du chemin seulement, le formulaire doit spécifier un encodage différent de celui par défaut, en utilisant l'attribut enctype et utiliser la méthode POST :
<form enctype="multipart/form-data" method="POST">
submit 
C'est un simple bouton permettant d'envoyer le formulaire.
reset 
C'est un bouton permettant de remettre le formulaire dans son état initial.
image 
C'est un bouton contenant une image permettant d'envoyer le formulaire. L'URL de l'image est spécifiée par l'attribut src.
hidden 
C'est un champ caché qui permet à l'auteur du formulaire de faire passer des informations au serveur qui n'ont pas à être modifiées par l'utilisateur. Attention, même si l'utilisateur ne peux pas voir directement ces champs, leur valeur est aisément modifiable. Il ne faut donc JAMAIS faire confiance aux données venant de ces champs lors du traitement du formulaire.
name 
cet attribut permet d'insérer une variable dans le texte.
Si l'attribut type est omis, le type text est utilisé par défaut.

L'attribut value


Cet attribut permet de spécifier la valeur par défaut d'un champ.
Exemple :
<form name="formulaire" method="post">
  <p>Un champ texte : <input type="text" name="nom" id="nom"> </p>
  <p>Un mot de passe : <input type="password" name="pass" id="pass"> </p>
  <p><input type="checkbox" name="choix_simple" id="choix_simple"> Une case à cocher </p>
  <p><input type="radio" name="choix_multiple" value="choix1"> Premier choix </p>
  <p><input type="radio" name="choix_multiple" value="choix2"> Deuxième choix </p>
  <p><input type="radio" name="choix_multiple" value="choix3"> Troisième choix </p>
  <p>Un fichier à mettre sur le serveur :<input type="file" name="fichier" id="fichier"> </p>
  <p>Un champ que l'utilisateur ne pourra pas modifier ni même voir : <input type="hidden" name="champ_cache" id="champ_cache" value="coucou"> </p>
  <p><input type="submit" /><input type="reset" /></p>
</form>

L'attribut checked


Les champs à sélectionner ayant cet attribut (qui s'utilise sans valeur) le sont par défaut.

L'attribut disabled


Les champs ayant cet attribut (qui s'utilise sans valeur) ne sont jamais envoyé lors de la soummission[1].

La balise <label>


L'habitude courante lors du développement d'un formulaire web consiste à placer le texte associé au champs d'entrée à côté de ces champs sans préciser explicitement qu'ils sont associés. Ce n'est pas un gros problème pour l'utilisateur moyen car en visualisant la page, il associe directement ces deux informations et remplit aisément le formulaire. Par contre, pour un utilisateur ayant un handicap, cette association peut ne pas être aussi facile.
Il est donc recommandé d'utiliser un label c'est à dire la balise <label> permettant d'associer une légende à un champ d'entrée. De plus, un clic sur un label donne le focus au champ correspondant. Ainsi, tous les utilisateurs pourront utiliser votre formulaire sans problème.

L'attribut for


Cet attribut sert à spécifier le nom du champ d'entrée dont le label est la légende.
Exemple 
<form name="formulaire" method="post">
  <p><label for="nom">Un champ texte : </label> <input type="text" name="nom" id="nom"> </p>
  <p><input type="submit"></p>
</form>

La balise <fieldset>


Cette balise sert à regrouper plusieurs champs qui ont un rapport entre eux comme par exemple un groupe de cases d'options. Le but de cette balise est le même que celui de <label> car elle permet d'indiquer explicitement la fonction d'un groupe de champs.

La balise <legend>


On doit placer cette balise dans un bloc de fieldset. Elle permet de donner une légende au groupe de champs.
Exemple :
<form id="" action="" method="post">
 <fieldset>
  <legend>Voici une liste de cases à cocher</legend>
  <p>
    <input type="radio" name="choix_multiple" id="choix_multiple_1" value="choix1">
    <label for="choix_multiple_1">Premier choix </label>
  </p>
  <p>
    <input type="radio" name="choix_multiple" id="choix_multiple_2" value="choix2">
    <label for="choix_multiple_2">Deuxième choix </label> 
  </p>
  <p>
    <input type="radio" name="choix_multiple" id="choix_multiple_3" value="choix3">
    <label for="choix_multiple_3">Troisième choix </label>
  </p>
 </fieldset>
</form>

La balise <textarea>

Génère des zones de texte multilignes.
  <TEXTAREA rows="nombre de lignes -1" name="commentaires">
Par exemple, pour créer une zone de saisie de six lignes :
  <TEXTAREA rows="5" name="suggestions">
    Entrer ici vos suggestions
  </TEXTAREA>
Pour faire en sorte que le texte affiché s'efface lorsque l'utilisateur remplit la zone :
  <TEXTAREA rows="5" name="suggestions" placeholder="Entrer ici vos suggestions">
  </TEXTAREA>

La balise <select>


Cette balise affiche un menu déroulant cliquable. Exemple pour choisir une des trois propositions :
    <select name="Selection">
        <option value="1">Choix 1</option>
        <option value="2">Choix 2 SELECTED</option>
        <option value="3">Choix 3</option>
    </select>
Pour passer ce menu en lecture seule, ajoute l'attribut : disabled="true" (on ne peut alors plus voir les options non sélectionnées).

multiple


L'attribut "multiple" d'une balise "select" indique que l'utilisateur peut effectuer un choix multiple :
    <select name="Selection2" multiple="multiple">
        <option value="1">Choix 1</option>
        <option value="2">Choix 2</option>
        <option value="3">Choix 3</option>
    </select>

Le langage HTML/Cadres


Un cadre (frame en anglais) est une section de page web contenant elle-même une autre page web. La technique des cadres permet de faire évoluer plusieurs pages web simultanément. Par exemple, un cadre peut contenir le menu d'un site, et un autre son contenu (ce qui évite de devoir insérer un menu sur chaque page du site).
Le principal inconvénient des cadres est qu'ils brisent la sémantique des données, en particulier la gestion de l'historique des pages devient complexe. Pour cette raison, leur utilisation n'est plus encouragée.

Définition d'un jeu de cadres : la balise frameset


Les attributs cols et rows


Ces attributs servent à déterminer la disposition et les dimensions des cadres : cols pour les colonnes, rows pour les lignes (ou, plus précisément, une séparation verticale ou horizontale).

Imbrication de cadres

Comme vous l'aurez remarqué, la balise frameset ne peut diviser qu'à l'horizontale ou à la verticale. Pour combiner les deux, il est possible d'imbriquer les balises frameset. Ce résultat s'obtient en définissant un jeu de cadres (toujours avec la balise frameset donc) dans un cadre.

La balise noframe


Certains navigateurs très anciens ne savent pas comment interpréter les cadres. La balise noframe permet d'indiquer à ces navigateurs comment produire la page web d'une manière alternative. Cette balise est ignorée par les navigateurs sachant interpréter les cadres.

Définition d'un cadre : la balise frame


L'attribut src


L'attribut src contient l'adresse (relative ou absolue) de la page à afficher dans le cadre.

L'attribut name


L'attribut name permet de donner un nom à un cadre. Ceci permet par exemple d'identifier précisément quel cadre mettre à jour lorsque l'on suit un lien hypertexte.

L'attribut longdesc


L'attribut longdesc s'adresse particulièrement aux non-voyants qui utilisent une interface vocale pour "lire" les pages web. Certains logiciels dédiés ont parfois des difficultés à rendre les contenus des cadres dans un ordre pertinent. L'attribut permet d'effectuer un lien vers une description longue des cadres et de leur intérêt. Il s'agit généralement d'une page web séparée contenant un texte explicatif.

Les marges : les attributs marginwidthmarginheight et frameborder


L'attribut marginheight accepte une valeur (pixels ou pourcentage) correspondant à une marge par rapport aux bords verticaux (supérieur et inférieur) du cadre. L'attribut marginwidthcorrespond aux marges horizontales (droite et gauche). L'attribut frameborder accepte les valeurs 1 ou 0 (ou bien TRUE et FALSE) et détermine si le cadre est délimité par une bordure ou non.

Les bordures : les attributs borderbordercolor et frameborder


Les attributs noresize et scrolling


noresize détermine si l'internaute peut ou non changer la taille du cadre.
scrolling détermine la présence de barres de défilement (toujours, automatique ou jamais).

Cadres uniques : la balise iframe


Iframes ou fenêtres intégrées dans une page Web
L'intérêt est d'ajouter dans une page propre, une autre page. Cette méthode est utilisée entre autre pour afficher des bannières de publicité.

Les attributs d'iframe

Exemple de code pour la balise Iframe :
<iframe name="lesteph" src="http://www.lesteph.ch/lesteph/tutoriaux/tuto-2003/webmaster/tutoriaux/html/html-frames.html" width="468" height="60" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>

Les valeurs de l'attribut target


target est un attribut de la balise a, la balise servant à inclure des liens hypertexte. Il détermine la cible (signification de "target" en anglais) du lien, c'est-à-dire où ce lien doit être ouvert, en se basant sur l'attribut name des cadres présents.
target peut prendre différentes valeurs :
nom_du_cadre 
ouvre le lien dans le cadre dont l'attribut name a la valeur "nom_du_cadre".
_self 
le lien s'ouvre dans le même cadre.
_parent 
le lien s'ouvre dans le cadre parent du cadre de la page. C'est à dire à la place de la page contenant le <frameset> qui détermine le cadre de la page ou se trouve le lien.
_top 
le lien s'ouvre dans le fenêtre courante (annule donc tous les cadres).
_blank 
ouvre le lien dans une nouvelle fenêtre.
Note : Certains navigateurs (Mozilla Firefox, Konqueror, Opera, ...) proposent une navigation par onglets, permettant d'afficher plusieurs pages dans une seule fenêtre. Bien que ce type de navigation soit de plus en plus courant et de plus en plus utilisé, il n'existe pas de valeurs à attribuer à target permettant d'ouvrir un lien dans un nouvel onglet (ceci est notamment dû au fait que ce type de navigation n'était pas encore très courante quand HTML 4 est sorti - les onglets ne sont donc pas un standard, mais bien une fonctionnalité supplémentaire proposée par certains navigateurs). Cependant, certains navigateurs, éventuellement munis d'une extension, peuvent proposer d'ouvrir tous les liens ayant _blank comme valeur de l'attribut target dans un nouvel onglet, à voir dans les options de votre navigateur.

Le langage HTML/Multimédia


Dans une page, nous pouvons insérer différents contenus autres que du textes et des images. Il peut s'agir de sons, de vidéos, d'animations (Adobe Flash ou SMIL) ou d'appliquettes (applets).


Note
Consultez la section L'attribut src du chapitre Image concernant l'utilisation du contenu d'un autre site.

Balise object


Pour intégrer un objet, nous utilisons la balise <object>. Comme toutes les balises, on peut lui définir les attributs idclasstitlestyledirlang et xml:lang. En outre, cette balise dispose d'attributs spécifiques :
data 
localisation de l'objet à insérer (adresse réticulaire), c'est l'équivalent du src de l'élément <img> ;
type 
le type MIME du contenu ;
width 
largeur de l'affichage ;
height 
hauteur de l'affichage ;
standby 
est l'équivalent du alt pour <img>. Ce texte est affiché pendant le chargement.
On peut, à l'intérieur de la balise object, donner du code qui s'affichera si le contenu ne peut pas être affiché. On peut également donner quelques paramètres à l'objet à l'aide de la balise <param /> qui associe à chaque paramètre une valeur booléenne. Voici les paramètres disponibles :
loop 
indique si le média doit être jouer en boucle ou seulement une fois ;
controller 
indique si il faut faire apparaître des boutons de contrôles ;
autoplay 
indique si il faut lancer la vidéo au chargement de la page ; attention : à éviter à tout prix si la page contient plusieurs médias.

Insertion d'une vidéo


object data="video.mpeg" title="une vidéo d'exemple" type="video/mpeg" standby="Vidéo d'exemple">
  <param name="loop" value="false" />
  <param name="autoplay" value="false" />
  <param name="controller" value="true" />
  Impossible de lire la vidéo : <a href="video.mpeg">Téléchargez-la</a>
</object>

Insertion d'une animation Flash


<object data="flash.swf" title="animation d'exemple" type="application/x-shockwave-flash" standby="animation d'exemple">
  Impossible de lire l'animation Flash
</object>

Insertion d'une appliquette Java


Obsolète : balise embed


Avant la balise object, on utilisait la balise embed. Cette balise avait été créée par Netscape. Elle ne fait pas partie de la norme W3C et donc ne devrait pas figurer sur des sites ; cependant, les navigateurs l'interprètent en général correctement, on peut donc encore la trouver sur des sites. De ce fait, il peut être utile d'en connaître la syntaxe pour convertir de l'ancien code.
Exemple d'utilisation simple
<embed src="foobar.wav" />
où foobar.wav est le nom du fichier son.
Les attributs de cette balise sont :
src 
l'emplacement (URL) de l'objet
alt 
texte de remplacement à afficher
height 
hauteur de l'affichage
width 
largeur de l'affichage
name 
nom de l'objet

Le langage HTML/Internationalisation


L'Internet est un réseau mondial (world wide web). Le rendu du contenu peut donc varier selon la configuration du navigateur. Il peut être intéressant d'indiquer la langue utilisée, ce qui permettra au navigateur d'appliquer les paramètres régionaux relatifs à cette langue (s'il le peut).
L'identification des langues est définie dans le document RFC 3066 Tags for the Identification of Languages.

Comment indique-t-on la langue utilisée ?


La langue utilisée dans la majeure partie du document est un paramètre de la balise <html> d'ouverture :
<html lang="…">
Si on change de langue au cours du document, il faut l'indiquer dans la balise qui encadre le texte concerné. Par exemple
<html lang="fr" >
 
<head>
   
</head>
 
<body>
 
<p>
   Le texte est en français par défaut.
   Mais comme on dit en italien&nbsp;:
   <q lang="it">Tradutore, traditore</q>.
</p>
 
</body>
 
</html>
En XHTML, il faut indiquer en outre la langue selon la norme XML, avec l'attribut : xml:lang="…". L'exemple ci-dessus devient donc :
<html lang="fr" xml:lang="fr" >
 
<head>
   
</head>
 
<body>
 
<p>
   Le texte est en français par défaut.
   Mais comme on dit en italien&nbsp;:
   <q lang="it" xml:lang="it">Tradutore, traditore</q>.
</p>
 
</body>
 
</html>
Si le texte en langue étrangère n'est pas inclus dans une balise particulière, on peut simplement utiliser la balise <span>…</span> (voir le chapitre Zones de mise en forme).

Note
L'en-tête peut contenir une indication de la « langue de l'audience » avec la balise <meta http-equiv="content-language" content="langue">, en utilisant le même codage que ci-dessus (par exemple <meta http-equiv="content-language" content="fr"> pour le français). Cette balise sert pour le référencement par des moteurs de recherche, mais est indépendant de l'indication de la langue d'un élément de texte.

Identificateur de la langue


De manière générale, la langue est identifiée par deux lettre selon la norme ISO 639-2 (dite « alpha-3 »), par exemple :
·         allemand : de
·         anglais : en
·         arabe : ar
·         chinois : zh
·         espagnol : es
·         français : fr
·         grec moderne : el
·         hébreu : he
·         italien : it
·         japonais : ja
·         néerlandais : nl
·         portugais : pt
·         russe : ru
Certaines langues sont identifiées par un code de trois lettres, par exemple :
·         ancien anglais (entre 450 et 1100) : ang
·         moyen anglais (1100–1500) : enm
·         berbère : ber
·         créole/pidgin issu de l'anglais : cpe
·         créole issu du français : cpf
·         créole issu du portuguais : cpp
·         égyptien antique : egy
·         ancien français (842–1400) : fro
·         français moyen (1400–1600) : frm
·         grec ancien (jusqu'en 1453) : grc
·         kabyle : kab
·         massaï : mas
Lorsqu'un code à 3 lettres et un code à 2 lettres sont simultanément disponibles pour une même langue, seul le code à deux lettres doit être utilisé dans l'attribut lang.
On peut indiquer une sous-catégorie de langue. Par exemple :
·         anglais : en
·         anglais du Royaume Uni : en-GB
·         anglais du Royaume Uni, selon l'orthographe du dictionnaire d'Oxford (Oxford English Dictionary) : en-GB-oed
·         anglais étatsunien : en-US
·         anglais cockney : en-cockney
·         espagnol : es
·         espagnol d'Espagne : es-ES
·         espagnol de l'Amérique latine : es-419
Les codes régionaux ne doivent cependant être utilisés que lorsqu'ils sont explicitement nécessaires. Par exemple, on n'écrira pas es-ES sauf s'il est nécessaire de différencier dans la même page des textes en espagnol courant d'autres passages en es-419.

Direction de l'écriture


On peut préciser si l'écriture se fait de gauche à droite (left-to-right, LTR) ou de droite à gauche (right-to-left, RTL), avec le paramètre dir, par exemple
<p lang="he" dir="rtl">עברית</p>
La valeur par défaut est ltr ; si une langue s'écrit de gauche à droite, il est inutile de le préciser.

Exemple de feuille de style différenciant la langue


L'exemple suivant est une feuille de style (écrite en CSS) dans laquelle la mise en page d'un paragraphe dépend de la langue.
/* ********** Français ********** */
   [lang|="fr"] > * { quotes: '\00ab\00a0' '\00a0\00bb'; } /* guillemets de citation */
   p:lang(fr) {
      text-align: justify; /* texte justifié */
      text-indent: 1em;    /* alinéa rentrant */
      margin-top: 0;       /* pas d'interligne */
      margin-bottom: 0;
   }
/* ********** Anglais ********** */
   [lang|="en"] > * { quotes: '\2018' '\2019' '\201c' '\201d'; }    /* guillemets de citation, 2 niveaux de citation  */
   [lang|="en-US"] > * { quotes: '\201c' '\201d' '\2018' '\2019'; } /* différents en GB et aux US  */
   p:lang(en) {
      text-align:left;        /* texte aligné à gauche */
      text-indent: 0;         /* pas de retrait de paragraphe */
      margin-top: 1em;
      margin-bottom: 1em;     /* alinéa "pavé" (interligne) */
   }
Les guillemets étant des caractères non-ASCII, on les mentionne en CSS en indiquant le code Unicode en hexadécimal après une barre de fraction (U+00ab est le guillemet ouvrant français «, U+00a0 est l'espace insécable…). Si on définit la page de code utilisée dans la feuille de style, on peut utiliser des caractères non-ASCII, mais la solution avec les barres de fraction inversée est universelle.
Vous pouvez tester le résultat avec des paragraphes suffisamment longs.
Exemple
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
 
<html lang="fr" xml:lang="fr">
 
<head>
 
   <title>
      Variation de mise en forme selon la langue
   </title>
 
   <meta
      http-equiv="Content-Type"
      content="text/html; charset=ISO-8859-15" />
 
   <style type="text/css">
      /* ********** Français ********** */
      [lang|="fr"] > * { quotes: "«\00a0" "\00a0\00bb"; } /* guillemets de citation */
      p:lang(fr) {
         text-align: justify; /* texte justifié */
         text-indent: 1em;    /* alinéa rentrant */
         margin-top: 0;       /* pas d'interligne */
         margin-bottom: 0;
      }
      /* ********** Anglais ********** */
      [lang|="en"] > * { quotes: "‘" "’" "“" "”"; }    /* guillemets de citation, 2 niveaux de citation  */
      [lang|="en-US"] > * { quotes: "“" "”" "‘" "’"; } /* différents en GB et aux US  */
      p:lang(en) {
         text-align:left;        /* texte aligné à gauche */
         text-indent: 0;         /* pas de retrait de paragraphe */
         margin-top: 1em;
         margin-bottom: 1em;     /* alinéa "pavé" (interligne) */
      }
   </style>
 
</head>
 
<body>
 
<p>
   Ceci est un paragraphe en français
   <q>avec une citation et
   <q>une citation dans la citation</q></q>
</p>
 
<p>
   Notez l'alinéa rentrant
   et l'absence de saut de ligne entre les paragraphes…
</p>
 
<p lang="en" xml:lang="en">
   This is a paragraph in english
   <q>with a quotation and
   <q>a quotation in the quotation</q></q>
</p>
 
<p lang="en-US" xml:lang="en-US">
   This is a paragraph in american english
   <q>with a quotation and
   <q>a quotation in the quotation</q></q>
</p>
 
</body>
 
</html>
Lorsque vous affichez le résultat de ce code, diminuez la largeur de la fenêtre de votre navigateur afin que chaque paragraphe s'affiche au moins sur deux lignes, pour pouvoir apprécier les différences de mise en page (justifié/aligné à gauche, indentation/saut de ligne).
Vous devriez obtenir à peu près le résultat suivant, si le navigateur interprète bien la feuille de style.
'
Ceci est un paragraphe en français « avec une citation et « une citation dans la citation » »…
Notez l'alinéa rentrant et l'absence de saut de ligne entre les paragraphes…
This is a paragraph in english ‘with a quotation and “a quotation in the quotation”’…
This is a paragraph in american english “with a quotation and ‘a quotation in the quotation’”…

Note
Comme on a défini la page de code dans l'en-tête du fichier HTML, on peut utiliser les guillemets « en clair » (caractères non-ASCII) dans la feuille de style intégrée.

Décryptage de la feuile de style


Le CSS possède son propre wikilivre. Toutefois, afin que cela ne soit pas juste du copier-coller et que vous puissiez modifier l'exemple sans lire tout le wikilivre Programmation CSS, voici quelques éléments.
Dans l'expression « [lang|="en"] > * {…} » :
·         [lang|="en"] signifie « les éléments dont l'attribut est « lang="en" » » ;
·         > * désigne tous les éléments (*) situés en-dessous (>) de l'élément pré-cité, donc tous les sous-éléments de l'élément ayant pour attribut « lang="en" ».
L'expression « [lang|="en"] » désigne aussi les éléments ayant les attributs dérivés de en, notamment en-GB et en-US (mais ce cas-là est redéfini après).
L'expression « p:lang(en) » désigne les paragraphes (éléments introduits par la balise <p …>) dont l'attribut lang est "en".
La propriété quote indique les guillemets utilisés, sous la forme « "guillemet ouvrant" "guillemet fermant" ». Lorsqu'il y a deux paires de délimiteurs, la première paire correspond aux citations de premier niveau, la seconde paire aux citations de deuxième niveau (citation dans la citation).
Les autres éléments sont assez explicite en anglais.

Le langage HTML/Balises complémentaires


Éléments de phrase


Les éléments de phrase ont été mentionnés dans le chapitre Style de texte. Il existe d'autres éléments « exotiques », dont la définition en HTML 4.01 est très vague et qui ne sont en pratique pas utilisés (mais on peut toujours les associer à une mise en forme particulière avec du CSS).
Éléments de phrase « exotiques »
Style
Balise
Mnémotechnique
Rendu par défaut
terme faisant l'objet d'une définition
<dfn></dfn>
italiques
extrait de programme
<samp></samp>
sample (échantillon)
idem <code>
variable ou paramètre d'un programme
<var></var>

Les balises multimédia


Les scripts


La balise <script> permet d'insérer un script dans un langage spécifié par l'attribut language. Le type est également spécifié par l'attribut type.
Cette balise peut être placée dans la partie <head> ou <body> de la page HTML.
Exemple :
<script language="Javascript1.2" type="text/javascript">
 
var resultat = "aucun";
 
function clic_bouton()
{
  alert("Résultat = " + resultat);
}
</script>
Le langage du script peut être quelconque (VBScript, Javascript, ...), mais seul le Javascript est reconnu par la plupart des navigateurs.

Événements

Le script peut définir des fonctions appelées plus tard, lorsqu'un évènement particulier survient (clic d'un bouton par exemple).
Les différentes balises HTML, en particulier les champs de formulaire, permettent de faire appel à une fonction javascript pour traiter certains évènements. L'appel se fait en ajoutant un attribut dont le nom commence par "on" suivi du nom de l'évènement. La valeur de l'attribut est un code javascript (souvent un appel de fonction), qui doit retourner une valeur booléenne. Si le code retourne faux (false), l'action par défaut associée à l'évènement est annulée.
Exemple :
<script language="Javascript1.2" type="text/javascript">
function envoi_formulaire()
{
  return confirm("Voulez-vous réellement envoyer les données au serveur ?");
}
</script>
<form action="/envoyer.cgi" onsubmit="return envoi_formulaire();">
<label>
<input type="text" name="nom"></input>
<br />
<input type="submit" value="Envoyer"></input>
</form>

Script dans un lien


Un lien dont l'adresse commence par "javascript:" est en fait un code javascript. En général, il s'agit d'un appel de fonction.
Exemple :
<a href="javascript:clic_bouton()">Appel à la fonction</a>

Les applets


Une applet Java est une application dont le code est sur le serveur. Il est téléchargé puis exécuté sur le navigateur de l'utilisateur, où il s'affiche dans une zone de la page HTML, définie par la balise <applet>.
Cette balise possède les attributs suivants :
code
(obligatoire) Nom de la classe principale de l'applet Java.
codebase
(optionnel) URL du répertoire où trouver la classe, si elle ne se trouve pas dans le même répertoire que la page HTML.
archive
(optionnel) Liste des archives JAR contenant les classes de l'applet.
width
(obligatoire) Largeur de la zone d'affichage de l'applet.
height
(obligatoire) Hauteur de la zone d'affichage de l'applet.
alt
(recommandé) Texte alternatif quand les applets ne sont pas autorisées par le navigateur.
Cette balise peut contenir des paramètres à transmettre à l'applet, en utilisant la balise <param>. Cette balise a pour attributs name pour le nom du paramètre et value pour sa valeur.
Exemple :
<applet code="Graph.class" width="500" height="300" alt="Graphique du nombre de fichiers téléchargés dans les 5 derniers jours">
<param name="type" value="bar2D" />
<param name="data" value="0, 10, 15, 7, 16" />
<param name="labels" value="Lun, Mar, Mer, Jeu, Ven" />
</applet>


Note sur la sécurité des applets 
Étant donné que le code s'exécute sur le navigateur de l'utilisateur, un programme malveillant pourrait faire n'importe quoi. Cependant la machine virtuelle Java n'autorise pas les applets à faire tout ce qu'elles veulent, à moins que l'utilisateur ne lui accorde plus de droits où que l'applet soit signée et acceptée par l'utilisateur. Les navigateurs permettent également d'empêcher toutes les applets de s'exécuter.

Le langage HTML/Zones de mise en forme


On peut définir une zone sur laquelle on applique une mise en forme particulière. Cette notion est donc liée au CSS, bien que l'on puisse l'utiliser en HTML « pur ».
Il faut s'attacher à la notion d'imbrication de zones : le formattage d'une zone se superpose au formattage environnant, ou éventuellement s'y substitue, selon des règles de priorité (cf. la section Priorité des règles  sur le CSS).
Par exemple, si l'environnement indique que le texte est centré et le formattage de la zone indique qu'il est en gras, alors on aura du texte centré et gras. Mais si le formattage de la zone indique que le texte est aligné à droite, alors cela annule la consigne générale.


Note
Cette notion de zonage est fréquemment confondue avec la notion de calque (layer), qui était une notion spécifique à Netscape (introduit en 1997 dans sa version 4.0). Cette confusion est entretenue par certains logiciels de création [1]. La notion de « calque » n'est pertinente que si l'on utilise l'attribut z-index (superposition de couches).

Balises universelles


Toute balise est une zone de mise en forme. En effet, on peut associer un style à toute balise,
·         soit en écrivant le style dans la balise, par exemple

<q style="font-style: italic;">…</q> ;
·         soit en faisant référence à un style défini dans l'en-tête ou dans un fichier .css lié, par exemple

<h1 id="menu">…</h1>
— ou —
<p class="remarque">…</p>

On a alors une mise en page liée à la fonction de la portion de page.
Il existe de plus, deux balises spécifiques pour créer une zone :
·         <span>…</span> : balise en-ligne (inline), donc une balise dans un paragraphe ou plutôt dans une balise dite « bloc » ; elle s'utilise au sein d'un bloc pour une modification ponctuelle ;
·         <div>…</div> : balise de bloc (block), un bloc est créé, il y a un retour à la ligne automatique.
Notons qu'appliquer span ou div sans attribut à un texte ne change rien : leur intérêt réside dans les paramètres que contiennent ces balises.
On peut ainsi définir une mise en forme sur une portion de page sans qu'elle ait une fonction particulière.
Notons que ces balises sont des « éléments de regroupement » qui permettent d'appliquer un traitement à une zone de manière générale, pas nécessairement une feuille de style.


Note
Les éléments span et div ne se substituent pas aux éléments décrivant le contenu. Si le rendu d'un élément ne vous convient pas, il faut le modifier en faisant référence à une classe dans la balise ouvrante ou en y intégrant du code CSS. Mais il serait malvenu de remplacer la balise par un span ou div qui, eux, ne donnent aucun sens au contenu.


Attention !
On peut imbriquer des balises en-ligne dans des balises blocs, mais pas l'inverse

La balise div


Utilisation


On va entourer la partie souhaitée des balises <div> et </div> pour délimiter le bloc auquel vont se rapporter les effets de style.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Titre</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
     <div>
       <p>Texte</p>
     </div>
   </body>
</html>

Mise en lien avec le style


En effet, un div est associé à des informations de style en CSS, qui peuvent être implantées en haut de la page HTML dans un espace entre les balises <head> et </head> ainsi :
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
        <title>Titre</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <style type="text/css">
           ''code CSS''
        </style>
    </head>
    <body>
      <div ''référence au formattage''>
        <p>Texte</p>
      <div>
    </body>
 </html>
Ou bien dans un fichier séparé, que l'on lie au fichier HTML en remplaçant <style type="text/css"></style> par :
<link rel="stylesheet" media="screen" type="text/css" title="Titre" href="feuilledestyle.css" />
Ou encore directement dans la balise <div> ainsi :
<div style=" ... ''code CSS'' ... ">
  <p>texte</p>
</div>

Caractérisation


Il est conseillé d'opter pour une solution avec feuille de style externe. Mais comment fait-on alors pour personnaliser chaque <div> ? Il suffit d'ajouter dans la balise <div> une information qui permettra de la caractériser, un class ou un id. On précise qu'un id est à usage unique (il ne peut être utilisé qu'une fois par page), pas le class (id : identité unique, class : classe de style ou multiplicité). L'utilisation de ces balises se fait ainsi :
Utilisation de class et de id
Avec class
Avec id
Code CSS dans l'en-tête ou le fichier lié
.ma_classe
{
   propriété 1 : valeur 1;
   propriété 2 : valeur 2;
   ...
}
#mon_id
{
   propriété 1 : valeur 1;
   propriété 2 : valeur 2;
   ...
}
Code HTML
...
   <body>
     <div class="ma_classe">
       <p>Texte</p>
     </div>
   </body>
</html>
...
   <body>
     <div id="mon_id">
       <p>Texte</p>
     </div>
   </body>
</html>

Fonctions


Position


La balise <div> peut être placée comme on le souhaite grâce au CSS, jugez plutôt l'aspect CSS que l'on peut obtenir : visibility: visible; position: absolute; top: 20px; left: 20px; width: 100px; height: 100px. De plus le dernier cadre déclaré recouvre celui d'avant si les deux se superposent.

Clarification


Lorsque l'on travaille avec un bloc à part avec un <div>, on peut définir avec le CSS les différentes balises usuelles dans le <div> choisi. D'une manière plus simple il y a une cohérence entre forme et fond.

Mise en application


Voici un exemple de styles de mise en forme avec un menu, un centre de page et un bas de page. La page se compose de trois calques <div> les uns derrière les autres. Les blocs sont modulables : peu importe l'ordre dans lequel on les écrit, on obtient le même rendu final.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
 
   <head>
      <title>Titre</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <style type="text/css">
         .un
         {
            position: absolute;
            top: 20px; left: 20px; width: 100px; height: 100px
         } 
         .deux
         {
            position: absolute;
            top: 20px; left: 50%; width: 100px; height: 200px
         } 
         .trois
         {
            position: absolute;
            bottom: 20px; left: 20px; width: 100px; height: 20px
         } 
      </style>
  </head>
 
  <body>
     <div class="un">
        <p>menu</p>
     </div>
     <div class="deux">
        <p>centre</p>
     </div>
     <div class="trois">
        <p>bas de page</p>
     </div>
   </body>
</html>

Le langage HTML/XML et XHTML


Le balisage HTML autorise une souplesse de syntaxe :
·         ouvrir une balise sans la fermer,
·         donner la valeur d'un attribut entre guillemets, apostrophes ou sans délimiteurs (un seul mot),
·         ...
Ces problèmes sont gérés par l'interpréteur du navigateur. La gestion de ces erreurs de syntaxe dépend donc du navigateur.
La syntaxe du XML n'autorise pas les erreurs ; elles sont signalées par le navigateur. Un fichier utilisant la syntaxe XML avec des balises HTML utilise en fait le format XHTML.
Avec les navigateurs supportant le format XML, il est possible d'écrire des pages en XML sans utiliser de balises HTML (exemple : <paragraph>, <section>, ...), et d'utiliser une feuille de transformation XSL pour convertir le fichier XML en page HTML.
Certaines balises utilisées en HTML font directement de la mise en forme, ou font un lien vers une feuille de style CSS particulière :
<div class=noprint>
Le contenu de ce tableau ne sera pas affiché à l'impression.
</div>

La syntaxe


En HTML5, vous avez le choix entre utiliser une syntaxe SGML (comme HTML 4) ou XML (comme XHTML). Prenez juste garde à être cohérent dans votre choix.
De plus, les balises <style> et <script> n'ont plus besoin systématiquement de l'attribut type. S'il n'est pas précisé, la balise <style> accepte le css par défaut, tandis que la balise <script>, elle, accepte le javascript.

data


L'attribut "data-"[1] permet de renseigner des données dans les balises HTML, séparées par "-", mais on peut aussi leur affecter des valeurs avec "=".
Exemple :
<div id="introduction" data-introduction data-paragraphe="introduction">
...
</div>
Attention !
Le fait de sectionner des data en JavaScript est plus lent que de sélectionner des classes, lui-même plus lent que d'utiliser les id[2].

Balises obsolètes

<center>, <font>, <strike>, <tt>.

Nouvelles balises


<article>, <aside>, <footer>, <header>, <nav>, <section>.

<canvas>


La balise <canvas> permet de créer une zone de dessin. On utilise ensuite du JavaScript pour créer/animer celle-ci.
Exemple :
<canvas id="myCanvas" width="300" height="200" />
<script>
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.strokeStyle="#900";
context.strokeRect(20,30,100,50);
</script>

Cet exemple est basique, mais canvas devrait permettre de créer des animations qui n'étaient avant possibles qu'avec Flash.

<audio>


La balise <audio> permet d'afficher un lecteur audio. L'avantage par rapport aux balises <object> et <embed> est que le fichier est lu directement par le navigateur, il n'y a plus besoin de plugin.
Elle s'utilise comme ceci :
<audio src="monfichier.mp3" autoplay controls loop />
Les attributs autoplaycontrols et loop sont facultatifs. Ils permettent respectivement de lancer automatiquement la lecture, d'afficher les boutons lecture/arrêt et de lire la piste en boucle.
Vous pouvez aussi spécifier plusieurs sources, dans différents formats, comme ceci :
<audio>
<source src="monfichier.mp3" />
<source src="monfichier.ogg" />
</audio>
Le navigateur choisira alors le format qui lui convient le mieux.

<video>


La balise <video> s'utilise comme la balise <audio>, sauf qu'il faut préciser les dimensions de la vidéo, ainsi que le type MIME du fichier :
<video width="360" height="240">
<source src="movie.ogv" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
</video>

Faire un livre dont vous êtes le héros


Idée maîtresse


L’arborescence classique est :
·         ./
./scripts
./styles
./assets <-- c'est ici que viennent les images et les sons
./assets/images

Source


<!doctype html5>
<html>
        <!--
               LDVELH(Livre dont vous êtes le héros) -> engine amicaFolio
               +---------------------------------------
               | Cet engin est un single page application
               | cette version de l'engin ne permet de changer qu'un image à la fois par page
               +----------------------------------------------------
               synopsis : j'ai fait cet engin pour une amie (\).(\)
               version : 0.1
               authors : zulad//
        -->
        <head>
               <meta charset="UTF-8" />
               <script src="scripts/jquery-1.11.3.js" ></script>
               <link rel="stylesheet" type="text/css" href="styles/style.css" > </link>
        </head>
       
        <body onload="fillPage(1);" >
              
               <div id="main" />
              
        </body>
       
</html>
<script>
       
// Les données peuvent être modifiées en fonction de l'histoire
        var datas = {
       
               _cpt:1,
               _1:{img:"0_start.svg", txt:"Il est 07h au réveil de Lucie. Si vous voulez vous lever : {{cliquez ici|2}} "},
               _2:{img:"0_bed.svg", txt:"Il était l'heure de se lever. Si vous voulez vous laver : {{cliquez ici|3}} - Si vous voulez vous recoucher : {{cliquez ici|1}}"},
               _3:{img:"2_sdb.svg", txt:"Il était l'heure de se laver. Si vous voulez vous recoucher : {{cliquez ici|1}} - Si vous voulez lire les news : {{cliquez ici|4}}"},
               _4:{img:"3_miroir.svg", txt:"Il était l'heure de regarder les news. Si vous voulez vous coiffer : {{cliquez ici|5}}"},
               _5:{img:"4_miroir.svg", txt:"Il était l'heure de se coiffer"}
              
        };

// Ceci est le noyau de l'application. Il est préférable de ne pas le modifier
        function getMatches(string, regex, index) {
          index || (index = 1); // default to the first capturing group
          var matches = [];
          var match;
          while (match = regex.exec(string)) {
               matches.push(match[index]);
          }
          return matches;
        }

        function fillText(str) {
               var re = new RegExp("(\{\{)([ a-zA-Z0-9|]*)(\}\})", "gm");
               matches = str.match(re);
              
               var matches = getMatches(str, re, 2);
              
               var lnk = Array();
               for (m in matches)
               {
                       lnk[m] = matches[m].split("|");
                       str = str.replace(matches[m], "<span class='click' onclick='fillPage("+lnk[m][1]+")'>"+lnk[m][0]+"</span>");
                       str = str.replace("{{","").replace("}}","");
               }
              
               return str;
        }
       
        function fillPage(page) {
               if(!page) page = 1;
               var content_1 = '<table id="tbl" width="480"> \
                               <tr><td width="10"><img id="imgTrg" src="assets/images/'+eval('datas._'+page+'.img')+'" onclick="fillPage(target);" /></td></tr> \
                               <tr><td id="txt">'+fillText(eval('datas._'+page+'.txt'))+'<td/></tr>  \
                       </table>';  $("#main").html(content_1); eval(datas._cpt = page);
        }
       
</script>

Le langage HTML/Conclusion


Le langage de balisage HTML permet de structurer un document et de le mettre en forme. Cependant, ce langage utilisé intensément par les sites internet tend à devenir exclusivement un langage de structuration en se rapprochant du format XML, laissant la mise en forme aux feuilles de styles en cascade (CSS), et les animations au JavaScript.
Afin de protéger le code et lui permettre une plus grande interactivité entre l'utilisateur et les bases de données, le PHP est de plus en plus employé avec l'HTML.



Aucun commentaire:

Enregistrer un commentaire

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.