• Aucun résultat trouvé

[PDF] Apprendre XHTML support de cours et exemples de A a Z | Cours xhtml

N/A
N/A
Protected

Academic year: 2021

Partager "[PDF] Apprendre XHTML support de cours et exemples de A a Z | Cours xhtml"

Copied!
49
0
0

Texte intégral

(1)

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 HTML ?

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)

(2)

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 au 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 textes sans mise en forme (ASCII pur ou ".TXT").

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

(3)

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 principaux d'une page écrite en HTML, à savoir :

<html></html> : La page

<head><title></title></head> : l'entête

<body></body> : Le corps

<!-- les commentaires --> : 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>

(4)

<title>Le titre de la page</title>

</head> <body>

Vos textes, liens & images...

</body> </html>

Les commentaires

<!-- 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.

(5)

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 leur présence explicite, les clients WEB (navigateurs) leur associent une couleur particulière et/ou 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>

(6)

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.

(7)

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 ( # ).

(8)

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 les marqueurs <body>.

Nous nous intéresserons aux différentes formes de paragraphe, aux polices de caractères et enfin aux variations diacritiques.

Les Paragraphes Les Polices Les Caractères

(9)

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 : <HR WIDTH=15%> donne : <HR WIDTH=25%> donne : <HR WIDTH=50%> donne : <HR WIDTH=65%> donne : <HR WIDTH=92%> donne :

(10)

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

<HR SIZE="5"> donne une ligne d'une épaisseur de 5 pixels :

Toutes les valeurs sont possibles, même les décimales. Voici un échantillon varié : <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 : Toutes les valeurs sont possibles, même les décimales. Voici un échantillon varié :

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

(11)

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 :

(12)

<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.

&nbsp;

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).

(13)

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

<h2>Exemple de Header de niveau 2</h2>

Exemple de Header de niveau 2

(14)

Exemple de Header de niveau 3

<h4>Exemple de Header de niveau 4</h4>

Exemple de Header de niveau 4

<h5>Exemple de Header de niveau 5</h5> Exemple de Header de niveau 5

<h6>Exemple de Header de niveau 6</h6>

Exemple de Header de niveau 6

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 :

(15)

<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

(16)

<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>

(17)

Si Albert Enstein avait dû écrire ces formules sur les pages HTML, il aurait programmé comme ça :

E=MC<sup>2</sup> donne :

E=MC2

<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>

(18)

<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 :

(19)

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 nombre 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 &amp; & "et" commercial

&gt; > supérieur à

&lt; < inférieur à

&quot; " double guillemet

Caractères A

Majuscules

Code HTML Caractère obtenu &AElig; Æ &Aacute; Á &Acirc; Â &Agrave; À &Aring; Å &Atilde; Ã &Auml; Ä Minuscules

Code HTML Caractère obtenu &aelig; æ &aacute; á &acirc; â &agrave; à &aring; å &atilde; ã &auml; ä

Caractères C

Majuscules

Code HTML Caractère obtenu &Ccedil; Ç

Minuscules

Code HTML Caractère obtenu &ccedil; ç

(20)

Caractères E

Majuscules

Code HTML Caractère obtenu &Eacute; É

&Ecirc; Ê &Egrave; È

&Euml; Ë

Minuscules

Code HTML Caractère obtenu &eacute; é &ecirc; ê &egrave; è &euml; ë

Caractères I

Majuscules

Code HTML Caractère obtenu &Iacute; Í

&Icirc; Î &Igrave; Ì

&Iuml; Ï

Minuscules

Code HTML Caractère obtenu &iacute; í &icirc; î &igrave; ì &iuml; ï

Caractères N

Majuscules

Code HTML Caractère obtenu &Ntilde; Ñ

Minuscules

Code HTML Caractère obtenu &ntilde; ñ

(21)

&Oacute; Ó &Ocirc; Ô &Ograve; Ò &Oslash; Ø &Otilde; Õ &Ouml; Ö &#140; Œ &oacute; ó &ocirc; ô &ograve; ò &oslash; ø &otilde; õ &ouml; ö &#156; œ

Caractères U

Majuscules

Code HTML Caractère obtenu &Uacute; Ú

&Ucirc; Û &Ugrave; Ù

&Uuml; Ü

Minuscules

Code HTML Caractère obtenu &uacute; ú &ucirc; û &ugrave; ù &uuml; ü

Caractères Y

Majuscules

Code HTML Caractère obtenu &Yacute; Ý

&#159; Ÿ

Minuscules

Code HTML Caractère obtenu &yacute; ý

&yuml; ÿ

(22)

Afin d'illustrer le contenu de vos pages Web, il vous est possible d'y insérer des images. Les 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

(23)

<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.

(24)

Mettre une image à côté d'un texte

Il est possible de positionner des images sur le côté d'un 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 :

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ésents sur Internet. Retrouvez sur NordNet ceux qui ont déjà mis un pied dans le futur.

==> <align=right> donne :

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é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

(25)
(26)

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

(27)

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> <tr> <td> 5 </td> <td> 6 </td> <td> 7 </td> <td> 8 </td> </tr>

</table>

(28)

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

Ceci est un tableau dans un autre tableau

Voici une image

Ceci est une liste :

1.

se lever

2.

prendre son petit-déjeuner

3.

se laver

4.

aller travailler

(29)

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> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> <td> 4 </td> </tr> <tr> <td> 5 </td> <td> 6 </td> <td> 7 </td> <td> 8 </td> </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

1 2 3 4

5 6 7 8

A B C D

1 2 3 4

5 6 7 8

Les chiffres

(30)

=> 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

sans

nowrap

contenu très long

avec

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%"> <table border=1 width="60%"> <table border=1 width="90%">

567

891

123

765

981

321

567

891

123

765

981

321

(31)

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 : 1° exemple La commande <th rowspan=2>

2° exemple La commande <th rowspan=10> <th rowspan=10> <th rowspan=10> <th rowspan=10> <th rowspan=10> <th rowspan=10> <th rowspan=10> <th rowspan=10> <th rowspan=10>

Sur la droite 3° exemple <th rowspan=2>

Centré

4° exemple dans le tableau <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

(32)

Centré dans le tableau 4° exemple

<th colspan=2> ou <td colspan=2> Dernier exemple qui combine les attributs rowspan & colspan

Dernier exemple opérations 2 + 11 = 13 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.

(33)

100

200 300

400

500 600

(34)

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

(35)

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.

...

(36)
(37)

<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 :

Soit le code suivant : <ul type=disc>

<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>... </ul>

Qui donnera l'affichage suivant : Formation au HTML

• Introduction

• A la découverte du HTML

• La page HTML

• Le formatage du texte

(38)
(39)

<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 :

Soit le code suivant : <dl>

<lh>Formation au HTML</lh> <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>

Qui donnera l'affichage suivant : 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

(40)
(41)

Exemple :

Soit le code suivant : <ol>

<lh><b>Formation au HTML</b></lh> <li>Introduction

<li>A la découverte du HTML

<li>La page HTML

<li>Le formatage du texte

<li>Les listes & définitions

<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>

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

 Les listes non ordonnées  les listes ordonnées  les définitions

6.

Les tableaux

 Les commandes de base  les attributs

(42)

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 :

(43)

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>

(44)

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 :

(45)

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

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

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.

(46)

<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 :

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.

Sélectionnez un jour de la semaine :

Lorsque l'on désire réaliser un menu à choix multiple, il suffit d'ajouter l'attribut multiple.

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.

(47)

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 ce 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.

(48)

On peut incorporer autre chose que du texte et des images à un fichier HTML : les sons et les 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 ainsi 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>

(49)

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 choisi.

Références

Documents relatifs

Mais si comme les autres, yòngré fait également partie de cette famille, il est en revanche le seul à avoir « quitté la brousse pour venir définitivement vivre parmi les

Cette question de l’auto identification embarrasse les représentants des Etats au moment de discuter le projet de Déclaration Universelle des Droits des Peuples

dans deux familles (dans un dîner par famille), que le père rentre plus tard, et mange après les enfants, seul ou avec leur mère.... 15 La durée moyenne des 16 dîners est de 38

Tandis qu’aux premiers il est courant d’offrir un coran grand format, aux pages jaunies (procédé qui facilite la lecture), rangé dans un joli coffret, aux autres, des livres du

La collection des Cahiers d’anthropologie sociale publie les travaux menés au Laboratoire d’anthropologie sociale du Collège de France, en particulier les journées

Ainsi Halide avait fait la leçon à certaines qui n’avaient pas pu venir chez elle : « Moi, je leur ai dit, nous avons décidé d’un jour précis, vous devez venir, ne serait-ce

Outre la langue française, c’était tout un pan de la culture française que les enfants allaient faire leur ; en effet, le programme était le même que dans des établissements

Dans les doublons de type reach/attain, ache/pain, answer/reply, birthday/anniversary, le terme d’ascendance germanique inscrit le sens lexical dans un contexte