<p class="spip">1.Introduction
2.Mise en forme du texte
3.Les images
4.Les liens
5.Les listes
6.Les tableaux
7.Les formulaires
8.Les cadres
9.Vidéo & son
10.Deplacez vos pages vers un serveur web</p>

<p class="spip">Introduction :</p>

<p class="spip">Tout d’abord qu’est-ce qu’une page web ?
Eh bien c’est un fichier texte avec l’extension .htm ou .html, qui contient du texte et l’emplacement des images. Pour définir la manière dont tous ces éléments seront affichés on utilise un langage de balisage, le HTML (c’est bien un langage de description et non un langage de programmation). Les fichiers HTML ne sont pas compilés et on peut toujours voir le code de la page tel quel l’a écrit son auteur.</p>

<p class="spip">Une page basique.
Une page web qui affiche juste un mot « bonjour » ouverte avec un éditeur de texte tel que bloc-notes de Windows contient ceci :</p>

<p class="spip">
<head>
</head>
<body>
Bonjour
</body>
</p>

<p class="spip">Les mots incompréhensibles (en tout cas pour l’instant) qui se trouvent entre les signes < et > sont des balises du langage HTML. Vous avez sûrement remarqué que pour chaque balise on retrouve la même balise mais précédée par un slache /, par exemple :</p>

<p class="spip"> et </p>

<p class="spip">La première balise s’appelle ouvrante et l’autre fermante.
Ce qui ce trouve entre la balise ouvrante et la balise fermente est modifié par ces balises, par exemple : <b>Bonjour</b> « Bonjour » sera affiché en gras car il est entre les balises <b> et </b>. C’est le principe du HTML.</p>

<p class="spip">Principes du HTML.
Toutes les balises d’une page web écrite en HTML sont placées entre les balises  et  (les lettres peuvent être écrites en majuscules  et ) ce qui signale au navigateur qu’il a affaire à du code HTML.</p>

<p class="spip">Ensuite la page se divise en deux parties, <head> </head> et <body> </body>.
Head (tête en anglais) est la partie en-tête de la page, tout ce qu’elle contient n’est jamais affiché. Elle peut contenir des feuilles de style que nous verrons plus loin, des applets java ou les balises <title> et </title>. Le texte qui se trouve entre ces dernières est affiché dans la barre de titre (tout en haut de la fenêtre du navigateur). La partie « body » contient tout le contenu qui sera affiché.
Avec ce schéma vous devriez y voir plus clair :</p>

<p class="spip">                                            <= indique le début d'un document HTML
<head>                                           <= début de l'en-tête u document
<title>Le titre de la page</title>  <= titre affiché dans la barre de titre
</head>                                          <= fin de l'en-tête
<body>                                           <= début du corps du document HTML

Bonjour                                           <= contenu du corps sera affiché

</body>                                          <= fin du corps du document
                                          <= fin du document HTML</p>

<p class="spip">Astuce : pour afficher le code source d’une page web que vous visitez dans votre navigateur cliquez sur le menu « Affichage » puis sur « code source » ou « afficher le code source ».</p>

<p class="spip">La plupart des balises peuvent avoir des attributs (leur propriétés), ces attributs sont ajoutés à la balise ouvrante :</p>

<p class="spip"><font face="Verdana">Bonjour !</font></p>

<p class="spip">La balise <font> permet d’affecter une police, une couleur, une taille et un alignement. On ajoute à la balise <font> un attribut : "face" et on lui donne la valeur de "Verdana", donc se qui se trouve entre <font face= "Verdana"> et </font> sera affiché en Verdana. Voici un schéma de cette syntaxe :</p>

<p class="spip"><balise attribut="valeur"> ... </balise></p>

<p class="spip">Balise : la balise utilisée, par exemple  ou <body>.

Attribut : attribut de cette balise, par exemple l'attribut face pour la balise font, nous verrons ensuite d'autres attributs de font. Un attribut a toujours une valeur, il est donc suivi d'un signe « = ». Une balise peut avoir plusieurs attributs qui doivent être séparés par un espace.

Valeur : La valeur d'un attribut est toujours place entre guillemets.

Voilà vous connaissez maintenant les principes du HTML, vous pouvez à présent passer à la leçon suivante.

Mise en forme de texte:

Les marqueurs font et basefont
On peut créer maintenant une page web qui affichera la phrase «C'est un essai!!! :) ».
Pour cela procédez comme suit :
Cliquez sur Démarrer>programmes>accessoires>bloc-notes et tapez le code suivant:

<html>
<head>
</head>
<body>

C'est un essai!!! :)

</body>
</p>

<p class="spip">Puis cliquez sur Fichier>enregistrer, pour le format choisissez « tous », écrivez le nom de votre fichier suivi de l’extinction .htm ou html (personnellement je choisis .html) et cliquez sur enregistrer comme sur l’image en dessous.</p>

<p class="spip">Nous procéderont ainsi pour toutes les pages qu’on va faire. Ensuite double-cliquez sur votre fichier et il se chargera dans votre navigateur par défaut.</p>

<p class="spip">Revenons à notre page. Si vous écrivez simplement du texte entre les balises « body » le texte sera affiché dans la police par défaut de votre navigateur, il sera aligné à gauche et aura la taille par défaut qui est de 3. 3 n’est exprimé ni en points ni en pixels mais en unité spéciale qu va de 1 à 7, la taille ne sera cependant la même dans tous les navigateurs elle dépend de la configuration du navigateur. Voici un texte de la taille 7 :</p>

<p class="spip"><font size="7">texte</font></p>

<p class="spip">Pour voir le changement de la taille cliquez sur affichage>taille du texte>choisissez une valeur différente de la précédente, vous verrez alors que la taille de ce texte change. La taille 3 avec un affichage normal correspond à 12 points.</p>

<p class="spip">Vous pouvez changer la taille par défaut de votre page à l’aide de la balise <basefont size=""> qui n’a pas de balise fermante, son seul attribut est size. Elle doit être placé au début de la page après <body>. Exemple :</p>

<p class="spip">
<body >
<basefont size="4">
Bonjour
Vive le HTML !!! :)
</body>
</p>

<p class="spip">Les deux phrases seront affichées en taille 4 au lieu de 3.
Essayons maintenant de affecter une police à notre phrase :</p>

<p class="spip"><font face="Comic Sans MS">C’est un essai</font></p>

<p class="spip">Nous avons mis notre texte entre les balises font avec un attribut face qui permet d’affecter une police à une chaîne de caractères et nous lui avons affecté la valeur Comic Sans MS, notre texte est maintenant affiché en Comic. Mais que se passera-t-il s’il n’y a pas cette police sur l’ordinateur de l’internaute qui visite votre page ?
Les caractères seront affiché dans la police par défaut, une police que ne contrôlez pas. Pour résoudre ce problème vos pouvez choisir une police de remplacent en utilisant la syntaxe suivante :</p>

<p class="spip"><font face="Comic Sans MS, Verdana, Sherif">Vive le html !!!!!!</font></p>

<p class="spip">Si la police Comic est absente le message sera affiché en Verdana et si cette dernière manque le texte sera affiché dans n’importe quelle police avec empattement (shérif) et si vous voulez afficher votre texte en n’importe quelle police sans empattement, la valeur de font est alors « Sans-Sherif ».</p>

<p class="spip">Voici les différentes propriétés de <font> :</p>

<p class="spip">* face => La police de la chaîne de caractères ; exemple : <font face= "Arial, Verdana">Test
      </font>
    * size => La taille de la chaîne de caractères ; exemple : <font face= "Arial, Verdana" size= "4">Test</font>. La taille peut aussi être exprimé de manière relative à la taille par défaut ou à la taille basefont si vous l’avez définie. Exemple : <font face= "Arial, Verdana" size="+2">Test</font>. Si basefont est 2, « Test » sera affiché en en taille 4(2+2).
    * align => L’alignement de la chaîne de caractères, ses valeurs possibles sont : right -aligner à droite, left (sa valeur par défaut) -à gauche, center -centrer et justify pour justifier le texte. Exemple : <font face="Arial, Verdana" size="+2" align="center">Test</font>.
    * color => La couleur de la chaîne de caractères. Regardez plus bas dans ce chapitre pour savoir comment exprimer la couleur en html.</p>

<p class="spip">Les couleurs
La couleur en html s’exprime de deux manières :
<br /></p>
<li> Par un nom : Voici les noms des 16 couleurs les plus utilisées :
Nom de la couleur : 	Nom HTML : 	Code hexa : 	Echantillon :
Bleu ciel 	aqua 	#00FFFF 	 
Noir 	black 	#000000 	 
Fuchia 	fuchsia 	#FF00FF 	 
Gris 	gray 	#7F7F7F 	 
Vert 	green 	#007F00 	 
Vert citron 	lime 	#00FF00 	 
Marron 	maroon 	#7F007F 	 
Bleu marine 	navy 	#00007F 	 
Olive 	olive 	#7F7F00 	 
Pourpre 	purple 	#7F007F 	 
Rouge 	red 	#FF0000 	 
Gris clair 	silver 	#7F007F 	 
Vert sarcelle 	teal 	#007F7F 	 
Blanc 	white 	#FFFFFF 	 
Jaune 	yellow 	#FFFF00 	 
Bleu 	blue 	#0000FF 	
<li> Par la valeur hexadécimale (basée sur 16 qui va de 0 à F) de la couleur :
#0000FF est la valeur hexadécimale du bleu. Pour obtenir le code hexa de la couleur que vous voulez il faut connaître sa valeur RVB (rouge vert bleu), vous pouvez l’obtenir dans votre logiciel d’édition d’images (à part Microsoft paint !!! ). Choisissez la couleur qu’il vous faut normalement quand vous cliquez dessus on doit vous montrer ces informations. Par exemple dans Paint Shop Pro :
<p class="spip">Dans ce logiciel on montre la valeur RVB et on dit tout de suite le code HTML si ce n’est pas le cas dans votre logiciel ouvrez la calculatrice Windows (dans les accessoires), entrez d’abord la valeur de R puis cliquez sur hex, notez le résultat puis faites pareil(pour entrer une des trois valeurs cliquez sur dec.-decimal pour indiquer que vous entrez une valeur décimale puis cliquez sur hex pour convertir.) pour V et B enfin mettez le résultats dans l’ordre en les précédant d’un # :
#FF0099
   ^ ^  ^
   R V   B
Attention : vous devez avoir 6 signes en tout (2 pour le rouge, 2 pour le vert et deux pour le bleu), si vous obtenez un seul signe pour le bleu par exemple, mettez un zéro devant pareil si la valeur est nulle mettez deux zéros.</p>

<p class="spip">Vous pouvez aussi modifier la couleur de tout le texte de la page en ajoutant à <body> l’attribut text, affectez à cet attribut comme valeur une couleur hexa.</p>

<p class="spip">D’autres balises de mise en forme
Pour mettre un texte en gras mettez le entre le balises <b> et </b>. Vous pouvez utiliser en même temps la balise <font> et <i></i> pour mettre votre texte en italique par exemple, l’important quand vous appliquez plusieurs balises sur le même texte c’est de respecter une certaine symétrie :
<b><font size="5"><i>Mon texte à moi</font></b></i> <==ce n’est pas bon si vous commencer par la balise <b>, vous devez placer la balise</b> en dernier, après <b> vient <font>, donc </font>doit être placé juste avant </b> etc. voici le bon exemple :
<b><font size="5"><i>Mon texte à moi</i></font></b></p>

<p class="spip">Il y a beaucoup d’autres balises comme <b> pour modifier le texte, les voici :
Balise : 	Description :
<em>...</em> 	Italique
<strong>...</strong> 	Gras (préférable à <b>)
<code class='spip_code' dir='ltr'>...</code> 	Police fixe (caractères de même largeur le i sera de la même largeur que le k !)
<ins>...</ins> 	Souligné
<del>...</del> 	Barré</p>
<address>...</address> 	Paragraphe distinct en retrait
Etc...
<p class="spip">Titres
En HTML il y a aussi 6 niveau de titres différents, voici la syntaxe :</p>

<h1>Mon titre</h1>
<p class="spip">« Mon titre » sera affiché sur une ligne distincte et aura la taille d’environ 36 points, pour diminuer cette taille il faut modifier le chiffre après h ça va de 1 à 6, plus le chiffre est proche de 6 plus la taille sera petite.</p>

<p class="spip">Lignes horizontales
Pour tracer une ligne horizontale sur votre page vous avez à vote disposition la balise</p>
<hr> elle possède plusieurs attributs :
<p class="spip">* width <= La largeur de la ligne en pixels, vous pouvez l’indiquer en % par rapport à la largeur de la fenêtre. Exemple</p>
<hr width="80%">
    * size <= La l’épaisseur du trait par rapport au trait d’origine, si vous mettez size="3", l’épaisseur du trait sera trois fois plus grande que l’épaisseur par défaut.
    * color <= La couleur de la ligne.
    * noshade <= Ajoutez ceci comme un attribut, mais il n’as pas de valeur si vous voulez enlever l’ombrage par défaut.
<p class="spip">Passages à la ligne
Pour forcer le passage à la ligne suivante mettez simplement <br> sans balise de fermeture.</p>

<p class="spip">Vous utiliserez la balise</p>

<p class="spip">faire des paragraphes, en faite la balise</p>

<p class="spip">revient à deux balises <br> donc entre deux paragraphes vous aurez une ligne vide.</p>

<p class="spip">Caractères spécieux
Certains caractères comme à ou é sont propres à la langue française, ils ne seront donc pas toujours affichés de la même façon sur tous les navigateurs au monde, pour éviter ce probleme dans votre code vous devez écrire un nom spécial pour chaque caractère français. Par exemple dans le code de ma page je ne vais par écrire télécharger, mais télécharger. On peut aussi écrire le code de la lettre à la place de son nom, le code é est &#201. La plupart des éditeurs de cites même simples font cette opération automatiquement. Voici les noms des caractères spécieux :
Caractère spécial 	Code ISO HTML 	Nom HTML
à 	à 	à
â 	â 	â
ä 	ä 	ä
æ 	æ 	æ
ç 	ç 	ç
è 	è 	è
é 	é 	é
ê 	ê 	ê
ë 	ë 	ë
î 	î 	î
ï 	ï 	ï
ô 	ô 	ô
ö 	ö 	ö
ù 	ù 	ù
û 	û 	û
© 	© 	©
® 	® 	®
€ 	€ 	 ?
Espace insécable 	 	 </p>

<p class="spip">Les images :</p>

<p class="spip">Dans ce chapitre vous allez apprendre à insérer des images dans vos pages web, les redimensionner et les positionner.</p>

<p class="spip">Les formats d’images du web
Tous les navigateurs qui supportent les images peuvent afficher les images GIF et des images JPEG, les deux sont des formats bitmap (l’information sur couleur est enregistrée pour chaque pixel ce qui n’est pas le cas des images vectorielles qui occupent moins de place mais ne sont pas supportées par les navigateurs).On utilise généralement le format jpeg pour des photos et le format gif pour les images à traits réguliers qui n’utilisent pas beaucoup de couleurs. Le format gif gère également la transparence, on peut choisir une couleur qui sera transparente c’est intéressent quand on une image d’arrière plan , mais une image gif ne peut pas comporter plus de 256 couleurs.</p>

<p class="spip">Voilà la syntaxe élémentaire pour afficher une image :
<img src= "mon_image.jpg">
L’image sera affiché que si l’image se trouve dans le même répertoire que la page web sinon vous verrez ce signe :</p>

<p class="spip">Il y a deux manières d’indiquer l’emplacement de l’image :
<br /></p>
<li> De manière absolue sur Internet. Exemple :
« http://moncite.com/images/mon_image.gif » cette méthode est inefficace, quand vous allez déplacer vos pages vers le serveur vous allez devoir changer touts les chemins d’accès.
<br /><li> De manière relative à l’emplacement de la page. Dans le répertoire ou se trouve notre page il y a un sous-dossier appelé images et l’image qui s’y trouve s’appelle 1.gif le chemin de l’image s’écrit ainsi :
<p class="spip"><img src="images/1.gif">
 sous-répertoire^       ^ l’image
Cette méthode est beaucoup plus efficace que la précédente vous créez vos pages sur votre ordinateur ensuite vous déplacez le répertoire qui contient toutes les pages et les sous-répertoires d’images et vous n’aurez pas changer les chemins d’accès !</p>

<p class="spip">Texte de remplacement
Si votre image ne peut pas être affichée soit car un vieux navigateur n’affiche pas les images soit car les chemins d’accès sont incorrects vous pouvez écrire un texte de remplacement qui sera alors affiché, on utilise pour ça l’attribut de img alt</p>

<p class="spip"><img src= "monimage.gif" alt="Description"></p>

<p class="spip">Ca donne ceci dans Internet Explorer si l’image ne peut pas être affichée :</p>

<p class="spip">Dimensions des images
Le texte est aussi affiché quand l’image n’est pas encore chargée t la plupart des navigateurs affichent ce texte dans une info-bulle quand la souris passe sur l’image.</p>

<p class="spip">Vous pouvez indiquer les dimensions de l’image si les dimensions initiales ne vous conviennent pas à l’aide des attributs de img :
<br /></p>
<li> width pour indiquer la largeur en pixels
<br /><li> height pour indiquer la hauteur e pixels
<p class="spip">Bordure autour de l’image
Vous pouvez indiquer la bordure de l’image en pixels à l’aide de l’attribut border.</p>

<p class="spip">Alignement de l’image
Vous pouvez aligner l’image par rapport au texte à l’aide de l’attribut align, il ne peut avoir qu’une des ces valeurs : left à gauche par rapport au texte ; right à droite par rapport au text ; center pour mettre l’image au milieu ; top pour aligner en haut et bottom en bas.</p>

<p class="spip">Enfin pour définir l’espacement horizontal entre le texte et l’image en pixels vous utiliserez l’attribut hspace de img, et vspace pour l’espacent vertical.</p>

<p class="spip">Résumé :
Les attributs de <img> :
<br /></p>
<li> src le chemin du fichier de l’image
<br /><li> alt texte de remplacement
<br /><li> width largeur de l’image
<br /><li> height hauteur de l’image
<br /><li> border la bordure autour de l’image
<br /><li> hspace espacement horizontal autour de l’image
<br /><li> vspace espacement vertical autour de l’image.
<p class="spip">Liens hypertexte :</p>

<p class="spip">Dans ce chapitre vous allez apprendre à créer des liens et des signets, à partir de ce chapitre vous allez pouvoir vraiment commencer à créer des pages web et à les relier entre elles par des liens hypertexte.</p>

<p class="spip">Les signets
Commençons par les signets, un signet permet de marquer par un nom une ligne de la page et d’y envoyer le visiteur de la page lorsqu’il cliquera sur un lien. Voici la syntaxe pour créer un signet :</p>

<p class="spip"><a name="nom_du_signet">...</a></p>

<p class="spip">Nom du signet est le nom que vous voulez donnez au signet. Entre les balises<a> et </a> vous pouvez mettre la première lettre de la ligne à marquer et continuer le texte après le </a>.</p>

<p class="spip">Lien vers un signet de la même page
Pour faire un lien qui va pointer vers un signet on utilise la même balise <a>, mais avec un autre attribut :</p>

<p class="spip"><a href="#nom_signet">Texte cliquable</a></p>

<p class="spip">nom_signet est le nom du signet vers lequel pointe le lien précédé d’un #.
Texte cliquable est le texte sur lequel on va cliquer pour aller vers le signet désigné dans href.</p>

<p class="spip">Lien vers une page web
Maintenant faisons un lien vers une autre page web, le chemin d’accès s‘écrit exactement de la même manière que pour les images, soit de manière relative par rapport l’emplacement de la page(si les deux pages sont dans le même dossier mettez juste le nom du fichier) soit de manière absolue sur internet. Exemples :</p>

<p class="spip"><a href="mespages/index.html">Ma page d’accueil</a>
<a href="http://www.yahoo.com">Yahoo !</a></p>

<p class="spip">Lien vers un signet d’une autre page web
Vous pouvez faire pointer un lien vers un signet d’une page distincte en utilisant la syntaxe suivante :</p>

<p class="spip"><a href="page3.html#signet5">Chapitre 5 de la page 3 !!!</a></p>

<p class="spip">Donc dans la valeur de href vous mettez l’adresse du fichier puis un dièse et le nom du signet.</p>

<p class="spip">Target
Il existe un autre attribut qui s’emploie avec <a href="">...</a>, c’est target qui précise si le lien doit s’ouvrir dans la même ou dans une nouvelle fenêtre. Si vous voulez que le lien s’ouvre dans une fenêtre distincte affectez a target la valeur _blanc.</p>

<p class="spip">Couleurs des liens
Malheureusement on ne peut pas modifier la couleur des liens avec la balise <font>, mais on peut modifier la couleur de tous les liens de la page en ajoutant à <body> l’attribut link, vous pouvez lui affecter comme valeur une couleur hexa, ceci modifiera la couleur des liens qui n’ont pas encore étés visités, en revanche les liens visités seront affichés en marron (couleur par défaut) si vous n’ajoutez pas l’attribut vlink a <body>, c’est le même principe que link il faut lui affecter une couleur. Il existe un autre attribut de <body> pour modifier la couleur des liens au moment quand vous cliquez dessus, c’est alink.</p>

<p class="spip">Image cliquable
On peut aussi placer entre les balises <a href="...">...</a> une image à l’aide de la balise <img>, cette image sera cliquable.</p>

<p class="spip">Astuce : quant votre lien est une image, l’image est automatiquement détourée d’une bordure bleue, si vous voulez l’enlever, ajouter l’attribut border à img et affectez lui la valeur 0.</p>

<p class="spip">Les liens e-mail
On peut créer un lien vers une adresse e-mail, pour faire ça affectez à href come valeur une adresse e-mail précédée de mailto:. Quand on cliquera sur un lien e-mail un nouveau message s’ouvrira dans le client de messagerie par défaut, ayant pour destinataire l’adresse e-mail du lien.</p>

<p class="spip">Les liens de téléchargement
Pour faire un lien vers un fichier affectez href comme valeur le chemin du fichier à télécharger.</p>

<p class="spip">Voilà vous savez maintenant comment faire des liens !!</p>

<p class="spip">Listes :</p>

<p class="spip">Il existe deux sortes de listes en html, les listes numérotées et les listes à puces.</p>

<p class="spip">Listes à puces
Voici un exemple de liste à puces :</p>
<ul>
<li>Elément 1</li>
<li>Elément 2</li>
<li>Elément 3</li>
</ul>
<p class="spip">Voilà cette liste :</p>

<p class="spip">* Elément 1</p>

<p class="spip">* Elément 2</p>

<p class="spip">* Elément 3</p>

<p class="spip">Comme vous le voyez pour créer une liste à puces on utilise la balise</p>
<ul> et </ul>, on place ensuite chaque élément de la liste entre les balises <li> et </li>. Il existe un attribut de <ul> pour changer la puce, c’est type ses trois valeurs possibles sont :
<br /><li> disc valeur par défaut, un point noir.
<br /><li> circle un point blanc avec un contour noir.
<br /><li> square un point noir carré.
<p class="spip">Liste numérottée
Pour créer une liste numérotée, la syntaxe est la même, mais au lieu du marquer</p>
<ul>, on utilise <ol> (order list en anglais), voici un exemple de liste numérotée :
<ol>
<li>Elément 1</li>
<li>Elément 2</li>
<li>Elément 3</li>
</ol>
<p class="spip">Voici cette liste :</p>

<p class="spip">1. Elément 1
   2. Elément 2
   3. Elément 3</p>

<p class="spip">Il existe aussi l’attribut type pour les listes numérotées, ses valeurs possibles sont différentes :
<br /></p>
<li> A ,les éléments de la liste seront numérotés A B C D...
<br /><li> a ,pareil que le précédent mais en minuscules a b c d...
<br /><li> I ,numérotée en chiffres romains I II III IV...
<br /><li> i ,en chiffres romains minuscules i ii iii iv v...
<br /><li> 1 ,numérotée en chiffres normaux 1 2 3 4... ,si vous n’utilisez pas l’attribut type la liste sera numérotée de cette manière.
Il y a un autre attribut de <ol>, start, il sert à définir le début de la liste numérotée. Si la valeur de type est I, et vous voulez que la numérotation commence par IV, il faut donner cette valeur à start.
<p class="spip">Plusieurs niveaux de listes</p>

<p class="spip">On peut imbriquer plusieurs listes les unes dans les autres pour avoir plusieurs niveaux de liste, exemple :</p>
<ol type="A">
<li>Elément 1</li>
<li>Elément 2</li>
  <ul>
    <li>Sous-élement1</li>
    <li>Sous-élement2</li>
    <li>Sous-élement3</li>
  </ul>
<li>Elément 3</li>
</ol>
<p class="spip">Voici cette liste :</p>

<p class="spip">1. Elément 1
   2. Elément 2
          * Sous-élément 1
          * Sous-élément 2
   3. Elément</p>

<p class="spip">La liste à puces sera décalée à droite par rapport à la liste numérotée créant ainsi plusieurs niveaux de liste. Vous pouvez imbriquer le nombre de listes que vous voulez, sur internet on trouve rarement plus de trois niveaux de liste.</p>

<p class="spip">Astuce:Chaque élément d’une liste peut être un lien et être modifié par une autre balise comme <b> ou <font> :</p>

<ul type="circle">
<li><a href="index.html">Accueil</a></li>
<li><a href="downloads.html">Téléchargements</a></li>
<li><a href="contact.html"><b>Nous contacter</b></a></li>
</ul>
<p class="spip">Les tableaux :</p>

<p class="spip">Les tableaux sont des éléments très importants du web même si vous ne les voyez pas toujours, la plupart des mises en page sophistiquées utilisent des tableaux pour placer les différents éléments sur la page. Dans ce chapitre vous allez apprendre à créer des tableaux et à les cacher pour créer des mises en page.</p>

<p class="spip">Tableaux simples
Pour déclarer un tableau en html on utilise les marqueurs</p>
<table> et </table>, ensuite pour faire une ligne du tableau on ajoute les marqueurs <tr> et <tr> enfin pour créer une cellule sur une ligne on se sert des balises <td> et <td> ainsi on obtient la syntaxe d’un tableau élémentaire :
<table>
<tr>
<td>...</td>
</tr>
</table>
<p class="spip">Ce tableau sera une simple cellule qui ne sera affiché que s’ il y a des caractères entre les balises</p>
<td> et </td>, les navigateurs n’affichent pas des cellules vides.
<p class="spip">Voici la syntaxe d’un tableau deux sur deux cellules :</p>
<table>                               <=Le début du tableau
<tr>                                    <=Définit le début d’une ligne
<td>1</td><td>2</td>    <=Crée 2 cellules sur la 1ère ligne
</tr>                                   <=Met fin à la 1ère ligne
<tr>                                    <=Début de la 2ème ligne
<td>3</td><td>4</td>    <=Crée 2 cellules sur la 2ème ligne
</tr>                                   <=Met fin à la 2ème ligne
</table>                              <=Met fin au tableau
<p class="spip">Fusionner les cellules
Maintenant qu’on sait faire un tableau standard comment faire de tableaux avec des cellules de tailles différentes, ou fusionnés comme ça :</p>

<p class="spip">Pour obtenir ce résultat il faut fractionner ou diviser les cellules, pour ça on va utiliser les attributs du marqueur</p>
<td> colspan et rowspan. On utilisera colspan pour fractionner une cellule horizontalement et rowspan verticalement. Voici un exemple de fractionnement horizontal :
  	
<p class="spip"><= Deux cellules normales</p>

<p class="spip"><= Une cellule fusionnée, elle prend la place de deux cellules. Son code</p>
<td colspan="2"> </td>. On a mis comme contenu de la cellule un espace insécable pour forcer l’affichage de la cellule, une cellule n’est jamais affichée en html si elle ne contient rien. Donc la valeur de colspan est le nombre de cellules que la cellule fractionnée doit occuper sur sa ligne.
<p class="spip">Voilà un exemple de fractionnement vertical :
1 	3
2</p>

<p class="spip">1.Cellule sur la 1ère ligne.
2.Cellule sur la 2ème ligne.
3. Cellule fractionnée sur la 1ère ligne (</p>
<td rowspan="2">). Quand vous ajoutez un rowspan a une cellule la cellule(ou les cellules) qui est(sont) en dessous sera automatiquement decalée à droite et une partie de la cellule fractionnée prendra sa place. S’il avait une cellule sous la cellule 3 elle serait automatiquement décalée vers la droite et le tableau serait comme ça :
1 	3
2 	4
<p class="spip">Il est très important de comprendre le principe de division des cellules, alors relisez bien ce chapitre.</p>

<p class="spip">Liste des attributs de table et de td
Il existe plein d’autres attributs pour</p>
<table> ou <td>, les voilà :
<table> :
<br />&mdash; border , très important pour cacher les tableau il définit la bordure en pixels du tableau.
<p class="spip">&mdash; cellspacing , l’espace en pixels entre les cellules.</p>

<p class="spip">&mdash; cellpadding , l’espacement en pixels entre le contenu du tableau et les cellules.</p>

<p class="spip">&mdash; background , l’image d’arrière plan du tableau.</p>

<p class="spip">&mdash; bgcolor , couleur d’arrière plan du tableau.</p>

<p class="spip">&mdash; width , largeur du tableau en pixels ou en pourcentage par rapport à la largeur de la fenêtre du
navigateur.</p>

<p class="spip">&mdash; height , hauteur du tableau en pixels ou en pourcentage.</p>

<p class="spip">&mdash; bordercolor , couleur de la bordure du tableau.</p>

<p class="spip">&mdash; bordercolordark , couleur de l’ombrage du tableau.</p>

<p class="spip">&mdash; bordercolorlight , couleur de l’ombrage en haut de la bordure.</p>

<p class="spip">Astuce : si vous voulez enlever l’effet 3D de la bodure affectez la même valeur aux trois derniers attributs.</p>

<p class="spip">&mdash; align , l’alignement du tableau, peut avoir comme valeur left, right ou center.</p>

<p class="spip">&mdash; rules , cet attribut spécifie quelles bordures internes d’un tableau doivent être affichées. Les valeurs possibles sont :
none : Aucune bordure. (Valeur par défaut)
groups : Bordures apparaissent seulement entre les groupes de lignes (THEAD, TFOOT, et TBODY) que nous verrons plus tard.
rows : Bordures horizontales entre chaque paire de lignes.
cols : Bordures verticales entre chaque paire de colonnes.
all : Bordures entre toutes les cellules.</p>

<p class="spip">&mdash; title , titre affiché sous le tableau.</p>

<td> :
<br />&mdash; width , la largeur de la cellule en pixels ou e pourcentages par rapport à la taille du tableau.
<p class="spip">&mdash; height , la hauteur de la cellule en pixels ou en pourcentages par rapport à la taille du tableau.</p>

<p class="spip">&mdash; align , l’alignement horizontal du contenu dans la cellule.</p>

<p class="spip">&mdash; valign , l’alignement vertical du contenu dans la cellule, ses valeurs possibles sont top, bottom, ou middle(par défaut).</p>

<p class="spip">&mdash; rowspan , expliqué plus haut.</p>

<p class="spip">&mdash; colspan , expliqué plus haut.</p>

<p class="spip">&mdash; background , image d’arrière plan de la cellule.</p>

<p class="spip">&mdash; bgcolor , couleur d’arrière plan.</p>

<p class="spip">Cellules de titres
Une cellule de titre est la même chose qu’une cellule normale auf que le texte de cette cellule est en gras. Mettez simplement</p>
<th> à la place de td, th possède les mêmes attributs que td.
<p class="spip">Division d’un tableau en parties logiques
On peut diviser un tableau en trois parties :
<br />&mdash; En tête du tableau.
<br />&mdash; Le corps du tableau.
<br />&mdash; Le pied du tableau.
Si votre tableau organise les éléments de votre page vous pouvez placer les lignes de votre tableau ou se trouve le titre entre les balises <thead> et </thead>, les lignes ou se trouve le texte entre les balises</p>
<tbody> et </tbody> et le texte en bas sur le copyright entre les balises <tfoot> et </tfoot>. Voici un tableau organisé en trois parties logiques :
<table border= »0 »>
<thead>
<tr>
<td>Titre</td><td><img src= »mon_image_logo.jpg »></td>
</tr>
</thead>
<tbody>
<tr>
<td colspan= »2 »>Mon contenu</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan= »2 »>Tout droits réservés (c)2003 </td>
</tr>
</tfoot>
</table>
<p class="spip">En fait ces balises ne sont pas très importantes, je vous les montre juste parce que dans ces cours je présente toutes les balises et attributs du html (enfin presque toutes certaines ne s’utilises qu’avec d’autres langages de programmation). Le seuls avantages de ces marqueurs sont une meilleure organisation des éléments du tableau et l’attribut rules de table ne fonctionne que si vous divisez votre tableau avec ses marqueurs.</p>

<p class="spip">Utilisation de tableaux pour créer des mises en pages
Maintenant que vous connaissez bien les tableaux je vais montrer comment les cacher pour faire des mises en pages.
Tout d’abord mettez les attributs cellpadding, cellspacing et border à 0 :</p>
<table border="0" cellpading="0" cllspacing="0">
Ensuite ajoutez l’attribut valign à chaque balise td et donnez lui la valeur de top.
<p class="spip">Les formulaires :</p>

<p class="spip">Le seul moyen de recueillir des information sur vos visiteurs reste les formulaires.</p>

<p class="spip">Pour créer un formulaire vous utiliserez les balises</p>
<form> et </form>. Form possède plusieurs attributs obligatoires :
<br /><li> method , la méthode utilisée pour envoyer les données du formulaire, elle peut avoir la valeur get ou post, on utilisera toujours la seconde valeur.
<br /><li> action , indique au formulaire ou envoyer les données, elle peut les envoyer vers un programme de traitement, dans ce cas indiquez l’emplacement de ce fichier, les formulaires peuvent aussi envoyer les données sur une adresse e-mail, dans ce cas mettez comme valeur l’adresse e-mail précédé de mailto:.
<p class="spip">Pour créer un élément du formulaire on utilise la balise <input> qui ne comporte pas de marqueur de fermeture. Pour indiquer la nature de input on utilise l’attribut type, voici ses différentes valeurs :
<br /></p>
<li> text , champ de saisie
<br /><li> password ,mot de passe
<br /><li> checkbox , case à cocher
<br /><li> submit , bouton pour envoyer les données du formulaire
<br /><li> reset , bouton efface les données saisies et ne les envoie pas
<br /><li> radio , un bouton radio
<p class="spip">Chaque élément du formulaire doit avoir un nom pour l’indiquer, on utilise l’attribut name de input.
Pour faire un champ multiligne on utilise les marqueurs <text area> et</p>
</textarea>, le texte qui se trouve entre ces balises sera affiché dans le champ avant que le modifiez, ces balises possèdent comme les autres marqueurs des formulaires l’attribut name et deux autres attributs encore, cols pour la largeur du champ en caractères et rows poua la hauteur en lignes.
<p class="spip">Pour faire un menu déroulant on utilise les marqueurs <select> et </select>, ce marqueur a l’attribut name. Pour faire une sélection du menu on utilise les marqueurs <option> et </option>.</p>

<p class="spip">Pour regrouper les boutons radios, li faut leur affecter le même nom et leur ajouter à chacun l’attribut value dont la valeur sera envoyée si le bouton est sélectionné.</p>

<p class="spip">Les boutons envoie et effacer ont un attribut value, sa valeur sera affichée sur le bouton.</p>

<p class="spip">Voilà un exemple d’un formulaire utilisant tous ses éléments :</p>


<body>
<form method="post" action="mailto:monemail@netall.fr">
Entrez votre nom:<input type="text" name="nom"><p>
Entrez votre mot de passe:<input type="password" name="pass"><p>
<input type="checkbox" name="visite">je visite net-all tous les jours.<p>
Combien de fois par semaine visitez-vous net-all ?
<select name="frequence">
<option>1</option>
<option>3</option>
<option>5</option>
<option>Tous les jours</option>
</select><br>
Aimez-vous mes cours ?<p>
Oui
<input type="radio" name="cours" value="oui">non<input type="radio" value="non" name="cours"><p>
Un commentaire ?<p>
<textarea name="comment" rows="15" cols="40">Entrez votre commentaire</textarea><br>
<input type="submit" value="envoyer"> 
<input type="reset" value="recommencer">
</form>
</body>

<p class="spip">Cliquez ici pour voir cet exemple</p>

<p class="spip">Les cadres :</p>

<p class="spip">L’utilité des cadres
Les cadres ou les frames permettent d’afficher plusieurs pages dans la même fenêtre du navigateur, c’est très pratique quand votre site comporte beaucoup de pages. Pour modifier le menu de navigation, par exemple, vous devez modifier toutes les pages en utilisant la méthode classique, alors qu’avec les frames vous modifiez juste page qui contient le menu.</p>

<p class="spip">Mise en place des cadres
Voici le code d’une page composée de deux cadres, dans le cadre d’en haut on affiche la page menu.html et en bas la page contenu.html. Cliquez ici pour afficher cette page. Je vais expliquer ce code plus loin :</p>

<p class="spip"><head><title>Cadres</title></head>
<frameset rows=”20%,*”>
<frame src=”menu.html”>
<frame src=”contenu.html”>
</frameset>
</p>

<p class="spip">Le code de menu.html :</p>

<p class="spip"><body>Ici doit se trouver le menu de navigation</body></p>

<p class="spip">Le code de contenu.html :</p>

<p class="spip"><body>Le contenu</body></p>

<p class="spip">Comme vous pouvez le constater on remplace <body> et </body> par <frameset> et </frameset>, on ajoute à ce marqueur l‘attribut rows qui indique au navigateur qu’il faut afficher les cadres les uns sous les autres. La valeur de rows indique le nombre de cadres et leurs dimensions, on indique les dimensions des cadres en pourcentages par rapport à la largeur de la fenêtre, on met une * pour indiquer que le cadre occupe l’espace restant et on sépare les dimensions des cadres par une virgule. Dans notre exemple la valeur de rows est « 20%,* », ça veut dire que le 1èr cadre en haut occupe 20% de l’écran et le 2ème - l’espace restant, soit 80%. Maintenant pour indiquer la page à afficher dans chaque cadre on utilise les marqueurs <frame>, il n’a pas de balise de fermeture et il a deux attributs : src (sa valeur est le chemin d’accès au fichier à afficher dans le cadre) et name (il donne un nom au cadre, vous verrez plus loin pourquoi). Comme vous le voyez sur l’exemple si frameset indique qu’il y a 3 cadres il faut ensuite 3 marqueurs <frame> pour indiquer quelle page afficher dans chaque cadre.</p>

<p class="spip">Si vous remplacez l’attribut rows de frameset par cols les cadres seront verticales et les uns à coté des autres. Cliquez ici pour voir le deuxième exemple.</p>

<p class="spip">Astuce : vous pouvez aussi indiquer la taille des cadres en pixels mais la taille d’au moins d’un cadre doit occuper l’espace restant *.</p>

<p class="spip">Comment combiner des cadres verticaux et horizontaux ?
Je veux faire par exemple une page composée de trois cadres : d’une ligne en haut et deux colonnes en bas. Je commence par définir la ligne :
<frameset rows="20%,*"> Les deux colonnes en bas en occupent bien une, donc je suis obligé d’indiquer deux lignes.
Maintenant j’indique l’emplacement de la page à afficher dans la première ligne :</p>

<p class="spip"><frameset cols="30%,*">
<frame src="gauche.html"></p>

<p class="spip">, et enfin au lieu de mettre un autre marqueur frame je mets un 2ème frameset mais celui-ci composé de deux colonnes :<frameset cols="30%,*">, j’indique l’emplacement des pages à afficher dans les colonnes :</p>

<p class="spip"><frame src="gauche.html">
<frame src="groite.html"></p>

<p class="spip">et je mets deux balises de fermeture </frameset> puisque on a mis deux frameset d’ouverture. Finalement on obtient ceci :</p>

<p class="spip"><frameset rows="20%,*">
<frame src="superieur.html">
<frameset cols="30%,*">
<frame src="gauche.html">
<frame src="groite.html">
</frameset>
</frameset></p>

<p class="spip">Voici le schéma de cette page :</p>

<p class="spip">1ère ligne 20% normale</p>

<p class="spip">2ème ligne 80% composée de deux colonnes, définie par un frameset cols</p>

<p class="spip">30%                                                      70%</p>

<p class="spip">Empêcher le redimensionnement des cadres
Vous avez sûrement remarqué que quand vous pointez la souris sur la ligne entre deux cadres le curseur change et vous pouvez redimensionner les cadres. Pour interdire à l’utilisateur de redimensionner les cadres ajoutez au marqueur frame qui représente le cadre dont vous voulez interdire le redimensionnement noresize.</p>

<p class="spip">Vous pouvez aussi régler les ascenseurs de chaque cadre avec l’attribut scrolling, ses valeurs possibles sont : yes, l’ascenseur apparaît toujours, no, jamais et auto juste si tout le contenu du cadre n’est pas visible.</p>

<p class="spip">Les liens et les cadres
Si une page affichée dans un cadre comporte un lien et on clique dessus la page de destination sera affichée dans le même cadre, pour afficher la page dans un cadre de votre choix ajoutez au lien l’attribut target et donnez lui comme valeur le nom du cadre dans lequel la page de destination doit être affichée. Par exemple le lien se trouve dans le cadre qui contient le menu de navigation et les pages doivent être affichées dans le cadre dont la valeur de name est « content », la syntaxe du lien sera suivante :
<a href="contact.html" target="content">Nous-contacter</a></p>

<p class="spip">Vidéo et son :</p>

<p class="spip">Dans ce chapitre vous allez apprendre à insérer du multimédia dans vos pages web.</p>

<p class="spip">Le son
Pour insérer un son d’accompagnement dans votre page vous utiliserez la balise <embed>, elle n’a pas de marqueur de fermeture. Voici les attributs de embed :
<br /></p>
<li> src , source du son, chemin d’accès au fichier son.
<br /><li> autoplay , donnez à cet attribut la valeur true si vous voulez que le son soit déclenché juste après son chargement.
<br /><li> loop , répétition du son, donnez lui comme valeur le nombre de fois qu’il faut répéter le son, vous pouvez lui donner comme valeur true pour jouer le son en continu et false pour ne le répéter qu’une fois.
<p class="spip">La vidéo
Pour insérer une video dans votre page vous utiliserez comme pour le son la balise <embed>. Voilà ses différentes valeurs pour la video :
<br /></p>
<li> src , source de la vidéo, chemin d’accès au fichier vidéo.
<br /><li> autoplay , donnez à cet attribut la valeur true si vous voulez que le son soit déclenché juste après son chargement ou false si vous ne le voulez pas.
<br /><li> loop , répétition du son, donnez lui comme valeur le nombre de fois qu’il faut répéter le son, vous pouvez lui donner comme valeur true pour jouer le son en continu et false pour ne le répéter qu’une fois.
<br /><li> height , hauteur en pixels du cadre dans lequel la vidéo sera affichée.
<br /><li> width , largeur en pixels du cadre dans lequel la vidéo sera affichée.
<br /><li> controller , donnez lui la valeur true si vous voulez qu’une barre avec les boutons play, stop, pause soit affichée sous la vidéo sinon donnez lui comme valeur false.
<p class="spip">Insérer une animation flash dans votre page
Vous pouvez insérer dans votre page une animation flash (fichiers *.swf), voilà le code à mettre :</p>

<object width="largeur" hight=”hauteur” classid=”clsid:D27CDB6E - AE6D - 11CF - 96B8 - 444553540000”>
<param name=”movie” value”mon_anim_flash.swf”>
</object>
<p class="spip">Remplacez les mots largeur, hauteur et mon_anim_flash.swf par vos paramètres et l’animation sera affichée.</p>

<p class="spip">Conclusion
Vous savez maintenant pas mal de choses sur le HTML et même si vous n’avez retenu que la moitié des choses vous étés déjà bon en HTML et vous êtes capables de faire de belles pages web. Pour ces cours je me suis servi de quelques bons livres :</p>

<li> M. Holzschlag HTML4 (Série "Création express"), Editions First Interactive, 2000
<br /><li> M. Martin Comment créer son site web (Série "Comment faire ...") CampusPress, 2001