Le Langage HTML

http://www.ista.
ma
Le langage HTML (HyperText Markup Language) est un ensemble de règles, de commandes

qu'on utilise pour donner des indications aux logiciels clients (Netscape Navigator, Microsoft
Internet Explorer,...) qui recevront le document écrit au format texte.
Faut-il connaître la programmation, pour apprendre et comprendre le langage HTM

?
Le mot "langage" en informatique est pour beaucoup de personnes synonyme de sueurs

froides.
Ne vous alarmez pas !!!
Si vous êtes un programmeur de génie, tant mieux...

Si vous êtes juste un utilisateur de la micro-informatique, tant mieux aussi, car
la création de documents HTML est à la portée de toute personne sachant utiliser un simple
éditeur de texte comme le Bloc-Notes de Windows par exemple.
HTML : Un langage de "Tagueurs".
Dans un traitement de texte, pour rendre un texte en caractères gras ou italique, on va le

sélectionner à l'aide de la souris et appliquer le style grâce à une "barre d'outils".
Il en va de même avec les documents HTML. Mais au lieu d'utiliser la souris, on va placer le
texte entre deux marqueurs (que l'on appelle "tags" en anglais).
Imaginons qu'une personne ne dispose que d'une machine à écrire traditionnelle et qu'une
autre lui propose de mettre en forme son texte sur un ordinateur...
La première personne enverra sa lettre avec les instructions de présentation :
(cher ami, voici le texte accompagné des indications dont nous avons convenues)
(Début de la lettre) (Utilisation de caractères type Helvetica, gras, italiques)

Marcel DURANT (à la ligne)
Société Pingouin qui chante (à la ligne)
10 - 12, rue du pôle Nord (à la ligne)
59850 Keskiféfroi (à la ligne)
(fin d'utilisation de caractères type helvetica, gras, italiques)
(passer une ligne)
(passer une ligne)
Cher Monsieur, (à la ligne)

(passer une ligne)
(paragraphe standard) Suite à notre dernier entretien, je vous informe que j'ai bien reçu
les dates de vos sessions de formation au HTML. (passer une ligne)
Le langage HTML.doc 1/1 17/11/10

J'accepte avec grand plaisir de me rendre à la (utilisation de caractères
italiques)formation sur le HTML (fin d'utilisation de caractères italiques) que vous
organisez chez vous. Je tiens aussi à vous préciser que je viendrai accompagné de mon
collaborateur.
(passer une ligne)
Recevez, Monsieur, l'expression de ma considération distinguée.
(fin de paragraphe standard)
(passer une ligne)
(passer une ligne)
(centrer) Marcel DURANT (fin de centrer)
Les indications entre parenthèses n'apparaîtront pas dans la version finale de ce document. Elles n'ont pas d'autre but que
d'expliquer la mise en forme et le style de présentation à adopter. En HTML, la procédure est identique... Il faut expliquer a
logiciel client (Netscape Navigator, Microsoft Internet Explorer,...) comment il doit présenter la page.
Pour que le logiciel client soit en mesure de distinguer (sans se tromper !) le texte à afficher des indications (les "Tags"),
celles-ci commencent toujours par un < et se termine toujours par un >.
Par exemple : <italique>Je suis un utilisateur heureux</italique>
Affichera sur la page HTML : Je suis un utilisateur heureux.
Ce qu'il faut pour bien commencer.
1. Un éditeur de texte ou un traitement de texte capable d'enregistrer des fichiers texte

sans mise en forme (ASCII pur ou ".TXT").
2. Un client Web (c'est-à-dire Netscape Navigator, Microsoft Internet Explorer ou

autres...).

Il faut rappeler qu'un document contenant des annotations en HTML n'est ni plus ni moins
qu'un fichier texte (code ASCII). Il peut être reconnu sans problèmes de conversion d'un
environnement à l'autre. Une page peut donc être lue et interprétée par n'importe quel
navigateur sur n'importe quelle plateforme... pourvu que l'on ait placé les marqueurs au bon
endroit.
Nous vous proposons dans ce second chapître, de découvrir les autres marqueurs principau
d'une page écrite en HTML, à savoir :
<html></html> : La page
• <head><title></title></head> : l'entête
• <body></body> : Le corps
•  : Les commentaires
La page <html></html>
De l'anglais, HyperTexte Markup Language, ces marqueurs indiquent que ce qui suit
est écrit en HTML. Tout le contenu de votre document, texte et marqueurs, doit être
situé entre <html> et </html>. C'est le premier marqueur qu'on doit trouver dans
tout document HTML.
L'entête d'une page HTML
Le marqueur head indique la présence d'un prologue, d'un titre compris entre
le marqueur de début et de fin. On n'y trouve, généralement, que peu d'autres
marqueurs, à part le marqueur title. Vous ne devez placer aucun élément de
votre texte dans ce bloc.
Le marqueur title vous permet de donner un titre à votre page, et est chargé
de décrire succintement le contenu de la page. Ce titre apparaît dans la barre
de titre du navigateur utilisé.
Enfin ces marqueurs doivent se trouver juste après le marqueur <html> et
avant le marqueur <body>.
Le corps d'une page HTML
<body></body>
Le reste du document HTML, textes, liens, images, toute information... doit
être compris entre ces marqueurs.
En associant les marqueurs que nous venons de voir, on obtient :
<html>
<head>
<title>Le titre de la page</title>

</head>
<body>
Vos textes, liens & images...
</body>
</html>
Les commentaires


Vous pouvez inclure des commentaires dans vos documents HTML pour
décrire le document, ou apporter toute indication sur l'état du document. Le
texte placé en commentaire est ignoré par les navigateurs lorsque le fichier
HTML est lu. De ce fait, il n'apparaît pas à l'écran.

Ce qui rend le Web si populaire, c'est la circulation entre les différentes pages s'effectuant
l'aide de liens hypertextes, contenus dans les documents eux-mêmes. Grâce à ces liens, la
personne qui consulte des données n'a aucun besoin de connaître l'adresse d'un site Web,
pas plus que les URL (Uniform Ressource Locator) des fichiers qu'il contient. Pour rendre leu
présence explicite, les clients WEB (navigateurs) leur associent une couleur particulière et/o
une mise en forme telle que le soulignement.
Couleur des liens
La définition des couleurs des liens se fait en associant des attributs au marqueur <body>
(que nous avons vu au chapitre 3, "La page HTML"). Les couleurs sont attribuées à l'aide de
codes hexadécimaux.
• text
sert à définir la couleur du texte par défaut.

Par exemple : <body text="FFFF00">
• link
sert à définir la couleur des liens.

Par exemple : <body link="00FFFF">
• vlink
sert à définir la couleur des liens déjà visités.

Par exemple : <body vlink="A100A1">
• alink
sert à définir la couleur d'un lien en cours de sélection.

Par exemple : <body alink="808080">
Lien avec une page d'un autre site
Pour insérer un lien, il faut indiquer une référence (URL) et un élément, texte
ou image, visible à l'écran sur lequel on doit cliquer pour y accéder. Voici un
exemple de code pour obtenir un lien :
<a href="menu.html">Le menu du mariage</a>
Le lien apparaît alors en couleur contrastée et souligné dans le navigateur et

donne: Le menu du mariage.
Les liens peuvent diriger le navigateur vers des sites HTTP, FTP, MAILTO...
(vous pouvez en effet, lier un élément avec une boîte aux lettres, un
transfert...). Pour créer un lien, il s'agit tout simplement de définir le type de
document dans la commande A HREF comme dans l'exemple qui suit :
<a href="http://www.nordnet.fr">Venez chez NordNet</a>
Ce qui aura pour résultat :
Venez chez NordNet
Remarquez que lorsque vous survolez avec votre souris le lien hypertexte, (la
souris devient une main), vous pouvez lire sur la barre d'état (en bas de la
fenêtre de votre navigateur) l'adresse du lien auquel il se réfère.
Liens avec une page sur le même site
Le code :
<a href="page.html">Voici mon lien sur une autre page !!!</a>
donne tout simplement accès à une page HTML située au même niveau
hiérarchique que la page actuellement ouverte sur le serveur (la page appelée
se situe dans le même dossier que la page contenant le lien).
Liens sur une même page (les ancres ou sections)

La commande a name enregistre une encre à l'intérieur d'un document HTML. On
peut ensuite référer directement à ce point précis avec une commande a href. Dès
que vous cliquerez sur le lien visant une ancre, le navigateur ira se positionner
directement sur la ligne de texte où aura été placée l'encre. La commande peut se
taper directement comme ceci :
<a name="nom_de_l_ancre">
ce qui indique au navigateur où se trouve la section (l'ancre) visée. Pour se

rendre à cet endroit, il faut taper la référence comme ceci :
<a href="page.html#ancre_couleur">Couleur des liens</a>
Pour essayer la commande en question, cliquez sur ce lien Couleur des liens et
vous devriez vous rendre à la section concernée de cette page.
Les liens a name fonctionnent aussi d'un document HTML à un autre. Ainsi,
après avoir identifié les sections d'un document avec des <a
name="general">, il s'agit de taper la commande plus complète

<a href="caract.html#general">Généralités</a>
Ainsi, le lien indique d'abord le nom du fichier HTML dans lequel il faut se
rendre et ensuite le nom de la section à l'intérieur de ce fichier. Le nom du
fichier et l'ancre sont séparés par un dièse ( # ).

Nous avons vu dans un précédent chapitre quelle était la structure d'un document HTML.
Nous allons maintenant découvrir comment il est possible de présenter l'information entre le
marqueurs <body>.
Nous nous intéresserons aux différentes formes de paragraphe, aux polices de caractères e
enfin aux variations diacritiques.
Les Paragraphes
Les Polices
Les Caractères

L'information que l'on veut faire passer doit toujours être ordonnée, hiérarchisée... de façon à attirer
l'attention du lecteur. Nous allons voir comment il est possible de présenter l'information dans son
ensemble.
<p>, <br> & <nobr></nobr>
<p> marque un changement de paragraphe. <br> donne un simple changement de ligne.

Notez ici que les commandes <br> et <p> n'ont pas à être fermées. Vous pouvez utiliser
plusieurs commandes <br> et <p> répétitivement pour augmenter l'espacement.
Il faut aussi préciser que le passage à la ligne est automatique en HTML. Pour éviter que les
phrases ne soient tronquées arbitrairement, vous pouvez utiliser le marqueur <nobr>(qui
lui, doit toujours être terminé par </nobr>)
<hr>
<HR> donne une ligne comme celle-ci :
o Pour faire varier la largeur de la ligne :

on utilise le code suivant: <HR WIDTH=75%>. Cela donne une ligne de 75%
de la largeur de l'écran (selon la largeur de la fenêtre du navigateur utilisée par
l'usager).
Toutes les valeurs sont possibles, même les décimales. Voici un échantillon
varié :
<HR WIDTH=5%> donne :

o Pour faire varier l'épaisseur de la ligne :

<HR SIZE="5"> donne une ligne d'une épaisseur de 5 pixels :
varié :
<HR SIZE="1"> donne :
<HR SIZE="3.5"> donne :
o On peut faire varier les deux en même temps :


varié :
<HR SIZE=2 WIDTH=25%> donne :
o Les lignes peuvent aussi être alignées à gauche à droite ou centrées.

Les commandes suivantes
<HR ALIGN=left>
<HR ALIGN=right>
<HR ALIGN=center>
donnent respectivement :
o Enfin, la commande <HR NOSHADE> permet d'afficher une ligne sans effet
de profondeur comme ci-dessous :
o Il est également intéressant de placer des images en tant que lignes, ce

qui offre beaucoup plus de possibilités graphiques. Ainsi, il s'agit de dessiner et

préparer à l'avance dans votre logiciel de dessin préféré une image en forme de
ligne et de l'enregistrer en format GIF. Ces images sont alors appelées à l'aide
de la commande de base (<img src="images/ligne1.gif"> voir dans le chapitre
"Insérer des images"). Ainsi, on pourrait avoir des lignes de ce genre :
<center></center>
Le marqueur <center> suivi par quelque chose (texte, image) et terminé par </center>
donne :
Quelque chose de centré
<blockquote> </blockquote>
La commande <blockquote> </blockquote> permet d'emprisonner un paragraphe telle

une citation en alinéa comme dans l'exemple ci-dessous :
NordNet est un lieu de rendez-vous, d'information, d'échanges et de

rencontres, mais aussi une exceptionnelle porte d'entrée sur Internet pour tous
les gens du Nord. NordNet se construit de jour en jour autour de nouvelles
rubriques, et fait découvrir notre région.
Les entreprises sont aussi de plus en plus présentes sur Internet. Retrouvez sur
NordNet celles qui ont déjà mis un pied dans le futur.

En mettant cette commande entre deux mots, cela évite de les séparer s'il y a un passage à

la ligne automatique (Espace insécable).

Cette partie a pour objectif de décrire les possibilités de rendre des caractères en gras,
italique... dans une page Web.
Voyons maintenant les différents marqueurs permettant de présenter l'information :
Généralités sur les caractères
La police des caractères est unique sur Internet et quelque soit le browser
utilisé, elle apparaîtra toujours de la même façon. On peut cependant changer
sa taille, ou donner un effet de police de machine à écrire.
<tt></tt>
Ce marqueur est l'un de ceux qui modifient l'apparence du texte. Vous pouvez
constater que ces quelques mots sont sous le format style "machine à
écrire". Elles ont été encadrées par les marqueurs <tt> </tt>.
<hx> </hx>
La présentation d'une page commence généralement par le choix et l'usage

d'entêtes prédéterminés qui s'échelonnent de <h1> à <h6> (h pour header).
Ces marqueurs comprennent un choix de taille (1 à 6), le caractère gras et un
passage à la ligne automatique.
<h1>Exemple de Header de niveau 1</h1>
Exemple de Header de niveau 1

Il est à noter que les headers peuvent recevoir un attribut :align.

Align va changer la place du titre dès l'instant où il aura comme valeur, soit
left, center, right, ou justify .
<font> </font>
Ce marqueur permet grâce à l'attribut size d'augmenter ou de réduire la taille des

caractères. Aussi, en associant l'attribut color (qui doit recevoir un code hexadécimal), on peut mettre
une série de caractères dans une couleur différente.
<font size=+2 color=408080>

Plus gros de 2 unités et couleur pétrole
</font>
Plus gros de 2 unités et couleur pétrole
Caractères gras

Il existe deux possibilités pour mettre des caractères en gras :
• <b></b>
<b>Caractères gras</b> ===> Caractères gras
• <strong></strong>
indique une insistance plus forte sur un mot qui se trouve

dans un paragraphe.
Caractères italiques
Comme les caractères gras, il existe deux possibilités pour mettre les
caractères en italiques :
• <i></i>
<i>Caractères italiques</i> ===> Caractères italiques
• <em></em>
indique une insistance plus forte sur un mot qui se trouve

dans un paragraphe.
Bien évidemment, il est tout à fait possible de combiner les caractères gras &
italiques.
Texte préformaté
Généralement, le texte contenu dans le fichier HTML est formaté selon les
marqueurs HTML qui s'y trouvent insérés. Ce qui veut dire que tout espace,
tabulation ou retour chariot supplémentaire est ignoré par le navigateur. La
seule exception à cette règle concerne le marqueur de préformatage
<pre></pre>. Tout ce qui se trouve placé entre eux est reproduit tel quel
sur l'écran.
Monsieur,
NordNet est un lieu de rendez-vous,

d'information, d'échanges et de rencontres,
mais aussi une exceptionnelle porte d'entrée
sur Internet pour tous les gens du Nord.
NordNet se construit de jour en jour

autour de nouvelles rubriques, et fait découvrir
notre région. Les entreprises sont aussi de plus
en plus présentes sur Internet. Retrouvez sur NordNet
celles qui ont déjà mis un pied dans le futur.
Bien amicalement.
Toute l'équipe NordNet

Autres caractères
<blink> </blink>
Permet de faire clignoter un mot ou une phrase.
<blink>Coucou ! Beuh !</blink> donne :
Coucou ! Beuh !
<address> </address>
Permet d'apposer sa signature au bas d'une page Web.
On peut aussi y mettre ses Copyrights, et son adresse e-mail.
<address>Marcel Fouillou © 1996</address> donne :
Marcel Fouillou © 1996
<cite> </cite>
Marque une citation, un nom d'écrivain...
Pluie en Novembre, Noël en Décembre. <cite>(Marcel Fouillou, 1889)</cite> donne :
Pluie en Novembre, Noël en Décembre. (Marcel Fouillou, 1889)
<sup> </sup>

Permet d'utiliser les exposants dans des formules.
Si Albert Enstein avait dû écrire ces formules sur les pages HTML, il aurait
programmé comme ça :
E=MC<sup>2</sup> donne :
2
E=MC
<sub> </sub>
Permet d'utiliser les indices dans des formules.
De quoi satisfaire les chimistes, entre autres...
H<sub>2</sub>O donne :
H2O
<small> </small>
Permet de mettre les caractères en tout petit.
<small>C'est variment petit !</small> donne :
C'est vraiment petit !

<big> </big>
Permet de mettre les caractères en grand.
<big>C'est vraiment grand !</big> donne :
C'est vraiment grand !
<samp> </samp>
Affiche tous les caractères tels qu'ils ont été saisis.
C'est souvent pratique pour afficher ce style de signes :
<samp>$, £, #, @</samp> donne :
$, £, #, @

Certains caractères ont une signification spécifique dans HTML. Pour les utiliser comme tels
dans une page, il faut utiliser les commandes alternatives pour les afficher correctement à
l'écran.
De plus, l'utlisation des caractères accentués sur le World Wide Web pose un certain nombr
de problèmes car il y a plusieurs façons de traiter les caractères diacritiques.
Caractères utilisés dans les marqueurs
Code HTML Caractère obetnu Valeur

& & "et" commercial
> > supérieur à
< < inférieur à
" " double guillemet
Caractères A
Majuscules Minuscules
Code HTML Caractère obtenu Code HTML Caractère obtenu
Æ Æ æ æ
Á Á á á
Â Â â â
À À à à
Å Å å å
Ã Ã ã ã
Ä Ä ä ä
Caractères C
Ç Ç ç ç
Caractères E

É É é é
Ê Ê ê ê
È È è è
Ë Ë ë ë
Caractères I
Í Í í í
Î Î î î
Ì Ì ì ì
Ï Ï ï ï
Caractères N
Ñ Ñ ñ ñ
Caractères O
Ó Ó ó ó
Ô Ô ô ô
Ò Ò ò ò
Ø Ø ø ø
Õ Õ õ õ
Ö Ö ö ö
Œ œ

Caractères U
Ú Ú ú ú
Û Û û û
Ù Ù ù ù
Ü Ü ü ü
Caractères Y
Ý Ý ý ý
Ÿ ÿ ÿ

Afin d'illustrer le contenu de vos pages Web, il vous est possible d'y insérer des images. Le
formats d'images reconnus par les navigateurs HTML sont les images en .GIF et les images
en .JPEG.
Ceux-ci sont intéressant car ils compriment les images; n'oublions pas que sur Internet, le
poids est l'ennemi de la vitesse...
Les fonds d'écran
On peut en effet définir un fond de page en associant des attributs au marqueur

<body>. Les attributs sont soit background, soit bgcolor.
• background :
associé au marqueur <body>, reçoit en variable une

image qui sera répétée autant de fois sur la page, jusqu'à
que ce soit uniforme :
<body background="fond.gif">
• bgcolor :
associé au marqueur <body>, reçoit en variable un code

hexadécimal qui définira la couleur du fond :
<body bgcolor=#000080>
Insérer une image au fil du texte
Il est possible d'insérer des images dans une phrase :
Vous voyez que cette image se trouve dans le milieu de la phrase.
align=bottom
L'image peut être alignée à la base du texte grâce l'attribut

align (placé dans le marqueur

<img src="">) qui reçoit la variable bottom :
L'image <discobreak1.gif> est alignée à sa base.
align=top
L'image peut être alignée à la tête du texte grâce la variable top

:
L'image <discobreak1.gif> est alignée à sa tête.
align=middle
L'image peut être alignée au centre du texte grâce la variable

middle :
L'image <discobreak1.gif> est alignée au centre.
Mettre une image à côté d'un texte

Il est possible de positionner des images sur le côté d'u
paragraphe, grâce à l'attribut align. Il faut noter qu'il
n'est bien évidemment pas possible de combiner ces
deux attributs dans le même marqueur.
==> <align=left> donne :

Les entreprises sont aussi de plus en plus présents sur Internet. Retrouvez sur
NordNet ceux qui ont déjà mis un pied dans le futur.
==> <align=right> donne :

Les entreprises sont aussi de plus en plus présents sur Internet. Retrouvez sur
NordNet ceux qui ont déjà mis un pied dans le futur.
Autres commandes
Sous les navigateurs Netscape Navigator et Microsoft Internet Explorer, il est

possible à partir d'une image, de réduire ou d'augmenter sa taille grâce à
l'attribut width et height qui doivent recevoir une taille en nombre de pixels.
Par exemple :
Prenons John Travolta dans "La Fièvre du Samedi Soir".
Cette image donnerait avec width=150 et height=250

... il a certes grossi depuis ce film, mais pas autant que ça !!!

Nous allons, dans ce chapître , voir comment il est possible de réaliser des mises en forme
de tableaux très sophistiqués, sans que la création du code source pose de réelles difficultés
Pour ce faire nous nous appuyerons sur des exemples.
Deux points seront abordés dans les pages suivantes :
Les commandes de bases

Les attributs

Les commandes de base pour créer des tableaux en HTML sont les suivantes :
<table></table>
Cette commande est la commande principale pour ouvrir une zone de tableau.
<table> </table> encadrent les limites d'un tableau.
<th></th>
De l'anglais table header, permet d'ajouter une rangée en en-tête. C'est le titre
de la colonne. Les paramètres par défaut sont l'usage du caractères gras et la
position centrée.
<tr></tr>
De l'anglais table row, marque le début d'une nouvelle ligne. <tr> </tr>
permet de définir une rangée.
<td></td>
De l'anglais table data, est placé devant les informations qui composent les
cellules. Les paramètres par défaut sont l'alignement à gauche et l'alignement
vertical au centre.
<caption></caption>
Commande qui doit être placée directement sous la commande <table> et

avant la première rangée. Elle permet de donner un titre au tableau.
Exemple :
Soit le code HTML suivant :
<table>
<caption>Les chiffres</caption>
<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>

Affichera sous un logiciel client (Navigator ou Internet Explorer) :
Les chiffres
A B C D
1 2 3 4
5 6 7 8
Nota Bene :
Le HTML nous donne la possibilité d'insérer au sein d'un tableau différents

types d'informations :
• du texte
• des images
• des liens hypertextes
• des listes & définitions
• des tableaux
Ceci est un texte simple centré et

gras Voici une image
Ceci est un tableau

dans un autre tableau
Ceci est une liste :
1. se lever
2. prendre son petit-déjeuner Ceci est un lien hypertexte à droite
3. se laver
4. aller travailler

Les attributs permettent de configurer les tableaux pour obtenir la présentation souhaitée.
Les attributs des tableaux sont :
L'Attribut : border se place dans la commande <table> et permet d'encadrer tous les
éléments du tableau par une bordure dont il est possible de spécifier l'épaisseur (border=1,
border=2, etc...). Border peut être utilisé sans spécifier de valeurs (<table border>)
Le code HTML suivant :
<table border=5>
<caption>Les chiffres</caption>
<tr> <th> A </th> <th> B </th> <th> C </th> <th> D </th> </tr>
</table>
Affichera sous un logiciel client :
Les chiffres
A B C D
1 2 3 4
5 6 7 8
Align
L'attribut align est utilisé dans les commandes de base <caption> et <th>, <tr>, <td>.
=> Pour <caption>

align permet de placer le titre d'un tableau au-dessus (top) ou en dessous (bottom)
Les codes HTML suivant afficheraient sous un logiciel client :
<caption align=top> <caption align=bottom>
Les chiffres A B C D
A B C D 1 2 3 4
1 2 3 4 5 6 7 8
5 6 7 8 Les chiffres

=> Pour <th>, <tr>, <td>
Ce même attribut utilisé dans ces commandes permet d'aligner le contenu des cellules à
gauche (align=left), à droite (align=right) ou au centre (align=center).
Valign
Cet attribut est utilisé à l'intérieur des commandes <th>, <tr>, <td>
Il permet de contrôler la disposition verticale des données à l'intérieur des cellules du
tableau. Les valeurs qu'il peut adopter sont :
• valign=top : le texte est placé dans la partie supérieure de la cellule.

• valign=middle : le texte est placé au milieu de la cellule (valeur par défaut).
• valign=bottom : le texte est placé dans la partie inférieure de la cellule.
• valign=baseline : le texte est placé sur la même ligne.
Nowrap
Cet attribut, lorsqu'utilisé dans les cellules <th> ou <td> empêche que le texte ne soit brisé
en deux ou plusieurs lignes. Comparez les deux tableaux suivants pour voir la différence.
La commande s'écrit comme suit : <td nowrap> ou <th nowrap>
contenu
très
long contenu très long avec nowrap
sans
nowrap
Width
Variation de la largeur totale d'un tableau. Cet attribut peut toutefois être utilisé avec les
commandes <th>, <tr>, <td> Voici trois tableaux configurés avec une largeur respective de
30, 60 et 90%. Les commandes pour les obtenir sont :
<table border=1 width="30%">

567 891 123

765 981 321
567 891 123

765 981 321

567 891 123
765 981 321
Rowspan
L'attribut rowspan a pour effet de donner une largeur de lignes que l'on définit. Ainsi, <td
rowspan=2> affichera une colonne de 2 rangées.
Les commandes s'appliquent indifféremment avec <td> ou <th>.
Exemples :
La commande
1° exemple
<th rowspan=2>
La commande
<th rowspan=10>
<th rowspan=10>
<th rowspan=10>
<th rowspan=10>
2° exemple
<th rowspan=10>
<th rowspan=10>
<th rowspan=10>
<th rowspan=10>
<th rowspan=10>
Sur la droite
3° exemple
<th rowspan=2>
Centré dans le tableau

4° exemple
<th rowspan=2> ou <td rowspan=2>
Colspan
Attribut identique à rowspan mais pour les colonnes.
Exemples :
1° exemple
La commande <th colspan=2>
2° exemple
Chiffres 1 2 3 4 5 6 7 8 9
En bas <th colspan=2>

3° exemple
Centré dans le tableau

4° exemple
<th colspan=2> ou <td colspan=2>
Dernier exemple qui combine les attributs rowspan & colspan
Dernier exemple
2 + 11 = 13
opérations 6 +7 = 13
10 + 3 = 13
Cellspacing
L'attribut cellspacing détermine l'épaisseur de la bordure. Bien sûr, cellspacing nécessite
la présence de l'attribut border
(NB : border ne définit que la bordure entourant le tableau en entier).
Par exemple, le premier tableau a une valeur d'espacement des bordures de 0, alors que le
deuxième a une valeur de 5.
100 200 300

400 500 600
100 200 300

400 500 600
Cellpadding
L'attribut cellpadding détermine l'épaisseur de la bordure. Bien sûr, cellpadding nécessite
la présence de l'attribut border
(NB : border ne définit que la bordure entourant le tableau en entier).
Par exemple, le premier tableau a une valeur d'espacement des cellules de 0, alors que le
deuxième a une valeur de 5.
100 200 300

400 500 600
100 200 300
400 500 600

Les attributs cellspacing & cellpadding peuvent être combinés comme dans l'exemple ci-
dessous avec des valeurs respectives de 0 et de 5.
100 200 300
400 500 600
100 200 300
400 500 600

Cette partie décrit comment il est possible d'afficher des listes & définitions. Cela consiste à
présenter de l'information, avec une indentation comme on peut le voir dans les sommaires
des ouvrages papier... Les listes peuvent être programmées de plusieurs façons :
Les listes peuvent être programmées de plusieurs façons :
• Listes ordonnées
• Listes non ordonnées
• Listes numérotées ou à puces
• Les emboitements, etc ...

Ce type de listes est parfois appelé liste numérotée. Les termes insérés dans cette listes
seront numérotés. Lorsqu'un navigateur interprète une liste ordonnée, il numérote (et
souvent indente) chaque terme séquentiellement. Ce n'est pas à vous d'ajouter une
numérotation et si vous ajoutez ou supprimez des termes, la numérotation de l'ensemble
restera correcte.
<ol></ol>
De l'anglais, Ordered-List, ces marqueurs encadrent les termes à numéroter.

Cette commande est terminée par </ol>.
<li>
De l'anglais, List-Item, est placé au début de chaque ligne, pour indiquer le

premier terme à définir.
Exemple :
Soit le code suivant :
<ol>
<lh>Formation au HTML</lh>
<li>Introduction
<li>A la découverte du HTML
<li>La page HTML
<li>Le formatage du texte
<li>Les listes & définitions
<li>Les liens HyperTexte
<li>...
</ol>
Qui donnera l'affichage suivant :
Formation au HTML
1. Introduction
2. A la découverte du HTML
3. La page HTML
4. Le formatage du texte
5. Les listes & définitions
6. Les liens HyperTexte
7. ...

<ul></ul>
De l'anglais, unumbered-List, ces marqueurs encadrent les termes à

présenter.
Cette commande est terminée par </ul>.
<li>
De l'anglais, List-Item, est placé au début de chaque ligne, pour indiquer le

premier terme à définir.
Les attibuts
Il est possible de changer la forme des différentes puces grâce à l'attribut type,
qui peut recevoir la commande disc (rond noir), circle (carré blanc) ou
square (carré noir). Dans l'exemple suivant, vous pourrez constatr les effets
de cet attributs.
Exemple :
<ul type=disc>
<li>Introduction
<li>La page HTML
<li>Les liens HyperTexte
<li>...
</ul>
Formation au HTML
• Introduction
• A la découverte du HTML
• La page HTML
• Le formatage du texte
• Les listes & définitions
• Les liens HyperTexte

• ...

<dl></dl>
De l'anglais, Definition-List, indique que ce qui qui suit est une liste de
définitions.
Cette commande est terminée par </dl>.
<dt>
De l'anglais, Definition-Term, est placé pour indiquer le premier terme à

définir.
<dd>
De l'anglais, Definition-Data, est placé au début du texte qui compose la

définition.
Exemple :
<dl>
<dt>Les tableaux
<dd>Les commandes de base
<dd>Les attributs
<dt>Les listes & définitions
<dd>Les listes non ordonnées
<dd>les listes ordonnées
<dd>les définitions
</dl>
Formation au HTML
Les tableaux
Les commandes de base
Les attributs
Les listes & définitions
Les listes non ordonnées
Les listes ordonnées
Les définitions
On s'apperçoit bien que l'indentation est appliquée.

Exemple :
<ol>
<lh><b>Formation au HTML</b></lh>
<li>Introduction
<li>La page HTML
<ul>
<li>Les listes non ordonnées

<li>les listes ordonnées
<li>les définitions
</ul>
<li>Les tableaux
<ul type=disc>
<li>Les commandes de base

<li>les attributs
</ul>
<li>...etc...
</ol>
Formation au HTML
1. Introduction
2. A la découverte du HTML
3. La page HTML
4. Le formatage du texte
5. Les listes & définitions
Les listes non ordonnées
les listes ordonnées
les définitions
6. Les tableaux
• Les commandes de base
• les attributs
7. ...

Jusqu'à présent nous avons vu les différents moyens de diffuser de l'information et de la
présenter. Mais sur le Web, l'information ne circule pas qu'en sens unique.
Il est possible de faire circuler l'information dans les deux sens et de recolter diverses
données et requêtes, en offrant la possibilité à l'utilisateur de renseigner des formulaires de
saisie.
Les applications sont très variées : sondage, réserver une chambre ou un billet de train,
louer une voiture, faire une recherche à partir d'une base de données, etc...
Tous les éléments d'un formulaire HTML doivent obligatoirement être encadrés par les
marqueurs <form> et </form>.
Exemple :
<form>
<input ... >
<input ... >
<input ... >
...
</form>
Les zones de saisie
Grâce à la commande <input>, il est possible de créer des formulaires. Deux attributs sont
toujours associés à ce marqueur :
1. name :
qui sert d'étiquette aux informations qui vont être saisies ou

sélectionnées (par exemple, une zone de saisie pourra être reliée à un
champ d'une base de données). C'est le nom du champ.
2. type :
permet de définir la nature du champ de saisie. Il est suivi d'une valeur

et d'un certain nombre d'options pour donner une forme de saisie ou de
sélection.
type=text
Cette valeur permet de recevoir du texte. Il est possible de définir le nombre de

caractères grâce à l'attribut size :
Le code suivant :
<form>
Nom : <input type="text" name="nom" size=30>
Prénom : <input type="text" name="prenom" size=15>

</form>
donnera à l'écran
Nom : Prénom :
type=password
Similaire à la valeur précédente, excepté que les données saisies n'apparaissent

pas "en clair" à l'écran. Il est possible de définir le nombre de caractéres grâce à
l'attribut size :
Le code suivant :
<form>
Votre mot de passe : <input type="password" name="mot_de_passe"
size=10>
</form>
donnera à l'écran
Votre mot de passe :
type=checkbox
Fait apparaître une zone de sélection qui prend la forme d'une case cochable. La
variable value permet d'attribuer une étiquette à la variable name la valeur de
la case sélectionnée. L'option checked fait apparaître une case cochée par
défaut :
Le code suivant :
<form>
<input type="checkbox" name="viennoiserie" value="croissant" checked>Croissant
<input type="checkbox" name="boisson" value="cafe">Café
<input type="checkbox" name="boisson" value="jus_de_fruit"
checked>Jus de fruit
</form>
donnera à l'écran
Croissant Café Jus de fruit

type=radio
Identique à l'option précédente. Seul point différent, une seule sélection pourra
être validée (avec checkbox, on peut sélectionner plusieurs choix en même
temps) :
Le code suivant :
<form>
<input type="radio" name="civil" value="Mr">Monsieur
<input type="radio" name="civil" value="Mme" checked>Madame
<input type="radio" name="civil" value="Mlle">Mademoiselle
</form>
donnera à l'écran
Monsieur Madame Mademoiselle
type=range
range permet à l'utilisateur d'entrer un nombre dont les limites sont fixées par
2 variables : min et max.
Le code suivant :
<form>
Donnez maintenant une note entre 0 et 20 :

<input type="range" name="note" min=0 max=20 size=2>
</form>
donnera à l'écran :
Donnez maintenant une note entre 0 et 20 :

type=submit
Submit est un des deux boutons se trouvant au bas de tout formulaire de saisie.
Il permet d'envoyer les informations saisies vers le serveur (donc de valider la
saisie). L'attribut value permet de spécifier les mots figurant sur le bouton :
Le code suivant :
<form>
<input type="submit" value="Valider la saisie">
</form>
donnera à l'écran
Valider la saisie
type=reset
Idem au bouton précédent mais réinitialise tous les champs de saisie (annule la
saisie) :
Le code suivant :
<form>
<input type="reset" value="Effacer et recommencer">
</form>
donnera à l'écran
Effacer et recommencer
Les champs mémos
Pour créer une zone de saisie comportant plusieurs lignes, on utilise les marqueurs
<textarea></textarea>.
Deux attributs permettent de définir la taille de la zone de saisie en nombre de lignes rows et
en nombre de colonnes cols.
Le code suivant :
<form>
Vos commentaires :
<textarea name="comments" rows=10 cols=20>

</textarea>
</form>
donnera à l'écran
Vos commentaires :
Les menus déroulants
<select> </select> permettent de créer des menus déroulants comportant deux ou

plusieurs options.
Le code suivant :
<form>
<p>Sélectionnez un jour de la semaine :
<select name="jour_semaine">
<option>Lundi
<option>Mardi
<option>Mercredi
<option>Jeudi
<option>Vendredi
<option>Samedi
<option>Dimanche
</select>
</form>
donnera à l'écran :
Lundi
Sélectionnez un jour de la semaine :
On peut aussi spécifier la taille de la fenêtre de sélection en ajoutant la variable

size. Dans le cas où size=6, la fenêtre de sélection fera apparaître les six
premières options du menu.
Lundi
Mardi
Mercredi
Jeudi
Vendredi
Samedi
Lorsque l'on désire réaliser un menu à choix multiple, il suffit d'ajouter l'attribut
multiple.

Lundi
Mardi
Mercredi
Jeudi
Vendredi
Samedi
Dimanche
Sélectionnez un ou des jours de la semaine :
En rajoutant, l'option selected au marqueur <option>, l'information qui suit

sera sélectionnée par défaut.
Lundi
Mardi
Mercredi
Jeudi
Vendredi
Samedi
Dimanche
Récupération et exploitation des données
Les données bien évidemment, à un moment ou à un autre devront être récupérées et

enregistrées par le serveur en vue de leur traitement. Les possibilités qui sont offertes dans c
domaine sont très nombreuses. Elles n'entrent pas dans les spécifications du langage
HTML puisque ce dernier se borne uniquement à définir l'aspect des pages Web. Un
programme informatique traîtant les données transmises par un formulaire doit être, à cet
effet, mis en place sur le serveur qui abrite ledit formulaire.

On peut incorporer autre chose que du texte et des images à un fichier HTML : les sons et le
animations vidéo sont aussi les bienvenus. Ils viendront se charger dans des fenêtres
distinctes de celle du navigateur. Un logiciel dit "programme d'accompagnement" sera lancé
parce que le navigateur ne peut reproduire tous les sons ou animations lui-même.
Les trames sonores
Pour placer des sons dans un document HTML, vous devez d'abord choisir et travailler
(éventuellement) vos sons dans votre logiciel de traîtement sonore et sauvegarder les fichiers
produits dans un format compatible (WAV, AIFF, AU).
La commande pour insérer un son est du même type que les pointeurs déjà vus. On peut ain
mettre un son "derrière" un lien ou une image. Voici les deux commandes :
=> Pour assigner un son à un lien :

<a href="bebe.wav">Ecoutez le bébé (Attention : 48Ko)</a>
donne : Ecoutez le bébé (Attention : 48Ko)
=> Pour une image "sonore" :

<a href="bebe.wav"> <img src="eric_bebe.jpg></a>
donne :
Les séquences vidéo
L'intégration de séquences vidéo est possible en HTML par le biais d'animations en format
Quicktime, MPEG ou AVI.
Dans l'exemple qui suit, le code utilisé est:
<a href="st_voyager.avi">Cliquez ici pour voir Star Trek Voyager (Attention : 358
Ko)</a>
donne à l'écran : Cliquez ici pour voir Star Trek Voyager (Attention : 358Ko)

L'utilisateur doit cliquer sur la phrase contrastée "Cliquez ici pour voir Star Trek
Voyager" pour déclencher le téléchargement du fichier sur le disque dur de l'utilisateur.
On peut également choisir de mettre une image comme déclencheur de la commande en

inscrivant une image source comme référence au lieu de texte comme ceci :
<a href="st_voyager.avi"> <img src="voyager.gif"></a>
donne :
L'animation se déclenchera d'elle-même par le biais du programme d'accompagnement chois

Le Langage HTML

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Le Langage HTML

Hochgeladen von

Copyright:

Verfügbare Formate

http://www.ista.

Le langage HTML (HyperText Markup Language) est un ensemble de règles, de commandes

Faut-il connaître la programmation, pour apprendre et comprendre le langage HTM

Le mot "langage" en informatique est pour beaucoup de personnes synonyme de sueurs

Si vous êtes un programmeur de génie, tant mieux...

HTML : Un langage de "Tagueurs".

Dans un traitement de texte, pour rendre un texte en caractères gras ou italique, on va le

La première personne enverra sa lettre avec les instructions de présentation :

(Début de la lettre) (Utilisation de caractères type Helvetica, gras, italiques)

Cher Monsieur, (à la ligne)

Le langage HTML.doc 1/1 17/11/10

Par exemple : <italique>Je suis un utilisateur heureux</italique>

Affichera sur la page HTML : Je suis un utilisateur heureux.

Ce qu'il faut pour bien commencer.

1. Un éditeur de texte ou un traitement de texte capable d'enregistrer des fichiers texte

2. Un client Web (c'est-à-dire Netscape Navigator, Microsoft Internet Explorer ou

Le langage HTML.doc 2/2 17/11/10

L'entête d'une page HTML

Le corps d'une page HTML

En associant les marqueurs que nous venons de voir, on obtient :

Le langage HTML.doc 3/3 17/11/10

Vos textes, liens & images...

Le langage HTML.doc 4/4 17/11/10

Couleur des liens

sert à définir la couleur du texte par défaut.

sert à définir la couleur des liens.

sert à définir la couleur des liens déjà visités.

sert à définir la couleur d'un lien en cours de sélection.

Lien avec une page d'un autre site

<a href="menu.html">Le menu du mariage</a>

Le lien apparaît alors en couleur contrastée et souligné dans le navigateur et

Le langage HTML.doc 5/5 17/11/10

<a href="http://www.nordnet.fr">Venez chez NordNet</a>

Ce qui aura pour résultat :

Venez chez NordNet

Liens avec une page sur le même site

<a href="page.html">Voici mon lien sur une autre page !!!</a>

Liens sur une même page (les ancres ou sections)

ce qui indique au navigateur où se trouve la section (l'ancre) visée. Pour se

<a href="page.html#ancre_couleur">Couleur des liens</a>

Le langage HTML.doc 6/6 17/11/10

Le langage HTML.doc 7/7 17/11/10

Le langage HTML.doc 8/8 17/11/10

<p>, <br> & <nobr></nobr>

<p> marque un changement de paragraphe. <br> donne un simple changement de ligne.

o Pour faire varier la largeur de la ligne :

<HR WIDTH=5%> donne :

<HR WIDTH=15%> donne :

<HR WIDTH=25%> donne :

<HR WIDTH=50%> donne :

<HR WIDTH=65%> donne :

Le langage HTML.doc 9/9 17/11/10

o Pour faire varier l'épaisseur de la ligne :

<HR SIZE="1"> donne :

<HR SIZE="2"> donne :

<HR SIZE="3"> donne :

<HR SIZE="3.5"> donne :

<HR SIZE="4"> donne :

<HR SIZE="10"> donne :

<HR SIZE="25"> donne :

o On peut faire varier les deux en même temps :

Le langage HTML.doc 10/10 17/11/10

<HR SIZE=2 WIDTH=25%> donne :