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 top, bottom, middle, left 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 source, Code 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 ;</li>
<li>deuxième élément ;</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 ;</li>
<li>deuxième élément ;</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 ;</li>
<li>deuxième élément ;</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 (id, class, lang, xml:lang, title…).
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 tr, th 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
'
|
|
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
'
|
|
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
name, id 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 marginwidth, marginheight 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 border, bordercolor 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 id, class, title, style, dir, lang 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 :
<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 :
<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
autoplay, controls 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> \
</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.